@lvce-editor/editor-worker 3.26.0 → 3.28.0

package/dist/editorWorkerMain.js

@@ -2,7 +2,7 @@ const commands = Object.create(null);
 const registerCommand = (key, fn) => {
   commands[key] = fn;
 };
-const register$1 = commandMap => {
+const register = commandMap => {
   for (const [key, value] of Object.entries(commandMap)) {
     registerCommand(key, value);
   }
@@ -144,16 +144,16 @@ const IndentMore = 'indentMore';
 const InsertLineBreak = 'insertLineBreak';
 const ToggleBlockComment = 'toggleBlockComment';
 
-const modules = Object.create(null);
-const register = (id, value) => {
-  modules[id] = value;
+const map$1 = Object.create(null);
+const set$7 = (id, widget) => {
+  map$1[id] = widget;
 };
-const get$8 = id => {
-  return modules[id];
+const get$7 = id => {
+  return map$1[id];
 };
 
 const getModule$2 = id => {
-  return get$8(id);
+  return get$7(id);
 };
 
 const applyWidgetChange = (editor, widget, changes) => {
@@ -587,7 +587,7 @@ const alloc = length => {
 const clone = selections => {
   return alloc(selections.length);
 };
-const map$1 = (selections, fn) => {
+const map = (selections, fn) => {
   const newSelections = clone(selections);
   for (let i = 0; i < newSelections.length; i += 4) {
     const [selectionStartRow, selectionStartColumn, selectionEndRow, selectionEndColumn] = getSelectionPairs(selections, i);
@@ -1021,11 +1021,11 @@ const setText = (editor, text) => {
 };
 
 const editors = Object.create(null);
-const get$7 = id => {
+const get$6 = id => {
   number$1(id);
   return editors[id];
 };
-const set$7 = (id, oldEditor, newEditor) => {
+const set$6 = (id, oldEditor, newEditor) => {
   number$1(id);
   object(oldEditor);
   object(newEditor);
@@ -1073,10 +1073,10 @@ const number = value => {
 const state$1$1 = {
   callbacks: Object.create(null)
 };
-const set$6 = (id, fn) => {
+const set$5 = (id, fn) => {
   state$1$1.callbacks[id] = fn;
 };
-const get$6 = id => {
+const get$5 = id => {
   return state$1$1.callbacks[id];
 };
 const remove$6 = id => {
@@ -1110,7 +1110,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = withResolvers$2();
-  set$6(id, resolve);
+  set$5(id, resolve);
   return {
     id,
     promise
@@ -1118,7 +1118,7 @@ const registerPromise = () => {
 };
 const resolve = (id, args) => {
   number(id);
-  const fn = get$6(id);
+  const fn = get$5(id);
   if (!fn) {
     console.log(args);
     warn$1(`callback ${id} may already be disposed`);
@@ -1468,23 +1468,23 @@ const state$8 = {
    */
   ipc: undefined
 };
-const get$5 = () => {
+const get$4 = () => {
   return state$8.ipc;
 };
-const set$5 = ipc => {
+const set$4 = ipc => {
   state$8.ipc = ipc;
 };
 
 const invoke$4 = (method, ...params) => {
-  const ipc = get$5();
+  const ipc = get$4();
   return invoke$5(ipc, method, ...params);
 };
 const invokeAndTransfer$1 = async (method, ...params) => {
-  const ipc = get$5();
+  const ipc = get$4();
   return invokeAndTransfer$2(ipc, method, ...params);
 };
 const listen$8 = ipc => {
-  set$5(ipc);
+  set$4(ipc);
 };
 
 const invoke$3 = async (method, ...params) => {
@@ -1860,7 +1860,7 @@ const createEditor = async ({
     ...newEditor3,
     focused: true
   };
-  set$7(id, emptyEditor, newEditor4);
+  set$6(id, emptyEditor, newEditor4);
   await invoke$2(TextDocumentSyncFull, uri, id, languageId, content);
 };
 
@@ -2883,7 +2883,7 @@ const moveSelectionDown = (selections, i, selectionStartRow, selectionStartColum
   moveRangeToPosition$1(selections, i, selectionEndRow + 1, selectionEndColumn);
 };
 const getNewSelections$9 = selections => {
-  return map$1(selections, moveSelectionDown);
+  return map(selections, moveSelectionDown);
 };
 const cursorDown = editor => {
   const {
@@ -2919,7 +2919,7 @@ const moveSelectionWithoutIntlSegmenter = (selections, i, selectionStartRow, sel
   }
 };
 const getNewSelections$8 = selections => {
-  return map$1(selections, moveSelectionWithoutIntlSegmenter);
+  return map(selections, moveSelectionWithoutIntlSegmenter);
 };
 const cursorVertical = (editor, getPosition, getEdgePosition, delta) => {
   const {
@@ -3698,10 +3698,10 @@ const state$4 = {
   y: 0,
   editor: undefined
 };
-const get$4 = () => {
+const get$3 = () => {
   return state$4;
 };
-const set$4 = (editor, timeout, x, y) => {
+const set$3 = (editor, timeout, x, y) => {
   state$4.editor = editor;
   state$4.timeout = timeout;
   state$4.x = x;
@@ -3727,7 +3727,7 @@ const onHoverIdle = async () => {
     x,
     y,
     editor
-  } = get$4();
+  } = get$3();
   at(editor, x, y);
   await showHover$1();
 };
@@ -3738,12 +3738,12 @@ const handleMouseMove = (editor, x, y) => {
   if (!editor.hoverEnabled) {
     return editor;
   }
-  const oldState = get$4();
+  const oldState = get$3();
   if (oldState.timeout !== -1) {
     clearTimeout(oldState.timeout);
   }
   const timeout = setTimeout(onHoverIdle, hoverDelay);
-  set$4(editor, timeout, x, y);
+  set$3(editor, timeout, x, y);
   return editor;
 };
 
@@ -4800,7 +4800,7 @@ const filterCompletionItems = (completionItems, word) => {
 };
 
 const getEditor = editorUid => {
-  const instance = get$7(editorUid);
+  const instance = get$6(editorUid);
   if (!instance) {
     throw new Error(`editor ${editorUid} not found`);
   }
@@ -4843,7 +4843,7 @@ const getWordAtOffset = editor => {
   }
   return '';
 };
-const handleEditorType$1 = (editorUid, state, text) => {
+const handleEditorType$2 = (editorUid, state, text) => {
   const editor = getEditor(editorUid);
   const {
     unfilteredItems,
@@ -4873,7 +4873,7 @@ const handleEditorType$1 = (editorUid, state, text) => {
     finalDeltaY
   };
 };
-const handleEditorDeleteLeft$1 = (editorUid, state) => {
+const handleEditorDeleteLeft$2 = (editorUid, state) => {
   const editor = getEditor(editorUid);
   const {
     unfilteredItems,
@@ -4981,7 +4981,7 @@ const openCompletion = async editor => {
     ...editor,
     widgets: newWidgets
   };
-  set$7(uid, editor, newEditor);
+  set$6(uid, editor, newEditor);
   const newCompletionWidget = await loadContent$2(uid, completionWidget.newState);
   const FocusEditorCompletions = EditorCompletion;
   await setAdditionalFocus(FocusEditorCompletions);
@@ -6145,10 +6145,10 @@ const state$1 = {
 const has = languageId => {
   return languageId in state$1.tokenizers;
 };
-const set$3 = (languageId, tokenizer) => {
+const set$2 = (languageId, tokenizer) => {
   state$1.tokenizers[languageId] = tokenizer;
 };
-const get$3 = languageId => {
+const get$2 = languageId => {
   return state$1.tokenizers[languageId];
 };
 const isPending = languageId => {
@@ -6169,10 +6169,10 @@ const {
 } = createRpc(SyntaxHighlightingWorker);
 
 const tokenMaps = Object.create(null);
-const set$2 = (languageId, tokenMap) => {
+const set$1 = (languageId, tokenMap) => {
   tokenMaps[languageId] = tokenMap;
 };
-const get$2 = languageId => {
+const get$1 = languageId => {
   return tokenMaps[languageId] || {};
 };
 
@@ -6183,7 +6183,7 @@ const loadTokenizer = async (languageId, tokenizePath) => {
   }
   if (getEnabled$1()) {
     const tokenMap = await invoke$1('Tokenizer.load', languageId, tokenizePath);
-    set$2(languageId, tokenMap);
+    set$1(languageId, tokenMap);
     return;
   }
   try {
@@ -6199,8 +6199,8 @@ const loadTokenizer = async (languageId, tokenizePath) => {
       console.warn(`tokenizer.TokenMap should be an object in "${tokenizePath}"`);
       return;
     }
-    set$2(languageId, tokenizer.TokenMap);
-    set$3(languageId, tokenizer);
+    set$1(languageId, tokenizer.TokenMap);
+    set$2(languageId, tokenizer);
   } catch (error) {
     // TODO better error handling
     console.error(error);
@@ -6209,7 +6209,7 @@ const loadTokenizer = async (languageId, tokenizePath) => {
 };
 const getTokenizer = languageId => {
   if (has(languageId)) {
-    return get$3(languageId);
+    return get$2(languageId);
   }
   if (isPending(languageId)) {
     return TokenizePlainText;
@@ -6218,10 +6218,10 @@ const getTokenizer = languageId => {
 };
 
 const tokenizers = Object.create(null);
-const set$1 = (id, value) => {
+const set = (id, value) => {
   tokenizers[id] = value;
 };
-const get$1 = id => {
+const get = id => {
   return tokenizers[id] || TokenizePlainText;
 };
 
@@ -6238,7 +6238,7 @@ const setLanguageId = async (editor, languageId, tokenizePath) => {
   await loadTokenizer(languageId, tokenizePath);
   const tokenizer = getTokenizer(languageId);
   const newTokenizerId = tokenizerId + 1;
-  set$1(newTokenizerId, tokenizer);
+  set(newTokenizerId, tokenizer);
   const latest = getEditor(editor.uid);
   if (!latest) {
     return editor;
@@ -6497,7 +6497,7 @@ const getHoverPositionXy = (editor, rowIndex, wordStart, documentationHeight) =>
 };
 const getEditorHoverInfo = async (editorUid, position) => {
   number$1(editorUid);
-  const instance = get$7(editorUid);
+  const instance = get$6(editorUid);
   const editor = instance.newState;
   const {
     selections
@@ -7511,7 +7511,8 @@ const create = () => {
       x: 0,
       y: 0,
       width: 0,
-      height: 0
+      height: 0,
+      borderSize: 1
     },
     newState: {
       content: '',
@@ -7519,7 +7520,8 @@ const create = () => {
       x: 0,
       y: 0,
       width: 0,
-      height: 0
+      height: 0,
+      borderSize: 1
     }
   };
   return completionWidget;
@@ -8188,7 +8190,7 @@ const getTokensViewport = (editor, startLineIndex, endLineIndex) => {
     lines,
     languageId
   } = editor;
-  const tokenizer = get$1(tokenizerId);
+  const tokenizer = get(tokenizerId);
   const {
     hasArrayReturn,
     tokenizeLine,
@@ -8452,7 +8454,7 @@ const getLineInfosViewport = (editor, tokens, embeddedResults, minLineY, maxLine
     decorations,
     languageId
   } = editor;
-  const tokenMap = get$2(languageId);
+  const tokenMap = get$1(languageId);
   let offset = minLineOffset;
   const tabSize = 2;
   for (let i = minLineY; i < maxLineY; i++) {
@@ -8637,30 +8639,22 @@ const getSelectionsVirtualDom = selections => {
   return dom;
 };
 
-const map = Object.create(null);
-const set = (id, widget) => {
-  map[id] = widget;
-};
-const get = id => {
-  return map[id];
-};
-
 const addWidget$1 = widget => {
-  const module = get(widget.id);
+  const module = get$7(widget.id);
   if (!module) {
     throw new Error('unsupported widget');
   }
   return module.add(widget);
 };
 const renderWidget = widget => {
-  const module = get(widget.id);
+  const module = get$7(widget.id);
   if (!module) {
     throw new Error(`unsupported widget`);
   }
   return module.render(widget);
 };
 const removeWidget$1 = widget => {
-  const module = get(widget.id);
+  const module = get$7(widget.id);
   if (!module) {
     throw new Error(`unsupported widget`);
   }
@@ -8821,7 +8815,7 @@ const renderWidgets = {
 };
 const render$b = [renderLines, renderSelections, renderScrollBarX, renderScrollBarY, renderFocus$1, renderDecorations, renderGutterInfo, renderWidgets];
 const renderEditor = async id => {
-  const instance = get$7(id);
+  const instance = get$6(id);
   if (!instance) {
     return [];
   }
@@ -8830,7 +8824,7 @@ const renderEditor = async id => {
     newState
   } = instance;
   const commands = [];
-  set$7(id, newState, newState);
+  set$6(id, newState, newState);
   for (const item of render$b) {
     if (!item.isEqual(oldState, newState)) {
       const result = await item.apply(oldState, newState);
@@ -8901,19 +8895,19 @@ const widgetCommands = {
   'FindWidget.focusPreviousMatchButton': Find,
   'FindWidget.focusCloseButton': Find,
   'EditorCompletion.handleWheel': Completion,
-  // TODO
-  // 'EditorCompletion.focusFirst': WidgetId.Completion,
-  'EditorCompletion.focusNext': Completion
-  // 'EditorCompletion.focusPrevious': WidgetId.Completion,
-  // 'EditorCompletion.focusLast': WidgetId.Completion,
+  'EditorCompletion.focusFirst': Completion,
+  'EditorCompletion.focusNext': Completion,
+  'EditorCompletion.focusPrevious': Completion,
+  'EditorCompletion.focusIndex': Completion,
+  'EditorCompletion.focusLast': Completion
 };
 
 // TODO wrap commands globally, not per editor
 // TODO only store editor state in editor worker, not in renderer worker also
 const wrapCommand = fn => async (editorUid, ...args) => {
-  const oldInstance = get$7(editorUid);
+  const oldInstance = get$6(editorUid);
   const newEditor = await fn(oldInstance.newState, ...args);
-  set$7(editorUid, oldInstance.newState, newEditor);
+  set$6(editorUid, oldInstance.newState, newEditor);
   // TODO if possible, rendering should be sync
   const commands = await renderEditor(editorUid);
   newEditor.commands = commands;
@@ -9070,8 +9064,8 @@ const commandMap = {
   'EditorCompletion.focusPrevious': focusPrevious,
   'EditorCompletion.handleEditorBlur': handleEditorBlur,
   'EditorCompletion.handleEditorClick': handleEditorClick,
-  'EditorCompletion.handleEditorDeleteLeft': handleEditorDeleteLeft$1,
-  'EditorCompletion.handleEditorType': handleEditorType$1,
+  'EditorCompletion.handleEditorDeleteLeft': handleEditorDeleteLeft$2,
+  'EditorCompletion.handleEditorType': handleEditorType$2,
   'EditorCompletion.handleWheel': handelWheel,
   'EditorCompletion.loadContent': loadContent$2,
   'EditorCompletion.openDetails': openDetails,
@@ -9112,430 +9106,74 @@ const commandMap = {
 };
 wrapCommands(commandMap);
 
-const CheckBox = 'checkbox';
-const Group = 'group';
-const None = 'none';
-const Option = 'option';
-
-const getFileIconVirtualDom = icon => {
-  return {
-    type: Img,
-    className: FileIcon,
-    src: icon,
-    role: None,
-    childCount: 0
-  };
-};
-
-const getIconDom = (fileIcon, symbolName) => {
-  if (fileIcon) {
-    return getFileIconVirtualDom(fileIcon);
+const MessagePort$1 = 1;
+const ModuleWorker = 2;
+const ReferencePort = 3;
+const ModuleWorkerAndMessagePort = 8;
+const Auto = () => {
+  // @ts-ignore
+  if (globalThis.acceptPort) {
+    return MessagePort$1;
   }
-  return {
-    type: Div,
-    className: `${ColoredMaskIcon} ${symbolName}`,
-    childCount: 0
-  };
+  // @ts-ignore
+  if (globalThis.acceptReferencePort) {
+    return ReferencePort;
+  }
+  return ModuleWorkerAndMessagePort;
 };
 
-const label1 = {
-  type: Div,
-  className: Label,
-  childCount: 1
-};
-const completionHighlight = {
-  type: Span,
-  className: EditorCompletionItemHighlight,
-  childCount: 1
+const getData$1 = event => {
+  return event.data;
 };
-const getHighlightedLabelDom = (label, highlights) => {
-  if (highlights.length === 0) {
-    return [label1, text(label)];
-  }
-  const dom = [];
-  const labelDom = {
-    type: Div,
-    className: Label,
-    childCount: 0
-  };
-  dom.push(labelDom);
-  let position = 0;
-  for (let i = 0; i < highlights.length; i += 2) {
-    const highlightStart = highlights[i];
-    const highlightEnd = highlights[i + 1];
-    if (position < highlightStart) {
-      const beforeText = label.slice(position, highlightStart);
-      labelDom.childCount++;
-      dom.push(text(beforeText));
-    }
-    const highlightText = label.slice(highlightStart, highlightEnd);
-    labelDom.childCount++;
-    dom.push(completionHighlight, text(highlightText));
-    position = highlightEnd;
-  }
-  if (position < label.length) {
-    const afterText = label.slice(position);
-    labelDom.childCount++;
-    dom.push(text(afterText));
+const walkValue = (value, transferrables, isTransferrable) => {
+  if (!value) {
+    return;
   }
-  return dom;
-};
-
-const getCompletionItemVirtualDom = visibleItem => {
-  const {
-    top,
-    label,
-    symbolName,
-    highlights,
-    focused,
-    deprecated,
-    fileIcon
-  } = visibleItem;
-  let className = EditorCompletionItem;
-  if (focused) {
-    className += ' ' + EditorCompletionItemFocused;
+  if (isTransferrable(value)) {
+    transferrables.push(value);
+    return;
   }
-  if (deprecated) {
-    className += ' ' + EditorCompletionItemDeprecated;
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      walkValue(item, transferrables, isTransferrable);
+    }
+    return;
   }
-  return [{
-    type: Div,
-    role: Option,
-    className,
-    top,
-    childCount: 2
-  }, getIconDom(fileIcon, symbolName), ...getHighlightedLabelDom(label, highlights)];
-};
-
-const getCompletionItemsVirtualDom = visibleItems => {
-  if (visibleItems.length === 0) {
-    return [{
-      type: Div,
-      childCount: 1
-    }, text(noResults$1())];
+  if (typeof value === 'object') {
+    for (const property of Object.values(value)) {
+      walkValue(property, transferrables, isTransferrable);
+    }
+    return;
   }
-  const root = {
-    type: Div,
-    childCount: visibleItems.length
-  };
-  const dom = [root, ...visibleItems.flatMap(getCompletionItemVirtualDom)];
-  return dom;
 };
-
-const Property = 1;
-const Value = 2;
-const Function = 3;
-const Variable = 4;
-const Keyword = 5;
-const Folder = 6;
-const File = 7;
-const Field = 8;
-
-const SymbolProperty = 'SymbolProperty';
-const SymbolValue = 'SymbolValue';
-const SymbolFunction = 'SymbolFunction';
-const SymbolVariable = 'SymbolVariable';
-const SymbolKeyword = 'SymbolKeyword';
-const SymbolDefault = 'SymbolDefault';
-const SymbolField = 'SymbolField';
-const SymbolNone = '';
-
-const getSymbolName = kind => {
-  switch (kind) {
-    case Property:
-      return SymbolProperty;
-    case Value:
-      return SymbolValue;
-    case Function:
-      return SymbolFunction;
-    case Variable:
-      return SymbolVariable;
-    case Keyword:
-      return SymbolKeyword;
-    case Field:
-      return SymbolField;
-    case File:
-      return SymbolNone;
-    default:
-      return SymbolDefault;
-  }
+const isMessagePort = value => {
+  return value && value instanceof MessagePort;
 };
-
-// TODO
-const getCompletionFileIcon = kind => {
-  switch (kind) {
-    case File:
-      return EmptyString$1;
-    case Folder:
-      return EmptyString$1;
-    default:
-      return EmptyString$1;
-  }
+const isMessagePortMain = value => {
+  return value && value.constructor && value.constructor.name === 'MessagePortMain';
 };
-
-const getHighlights = item => {
-  const {
-    matches
-  } = item;
-  return matches.slice(1);
+const isOffscreenCanvas = value => {
+  return typeof OffscreenCanvas !== 'undefined' && value instanceof OffscreenCanvas;
 };
-
-const getLabel = item => {
-  return item.label;
+const isInstanceOf = (value, constructorName) => {
+  return value?.constructor?.name === constructorName;
 };
-const getVisibleIem = (item, itemHeight, leadingWord, i, focusedIndex) => {
-  return {
-    label: getLabel(item),
-    symbolName: getSymbolName(item.kind),
-    top: i * itemHeight,
-    highlights: getHighlights(item),
-    focused: i === focusedIndex,
-    deprecated: item.flags & Deprecated,
-    fileIcon: getCompletionFileIcon(item.kind)
-  };
+const isSocket = value => {
+  return isInstanceOf(value, 'Socket');
 };
-
-const getVisibleItems = (filteredItems, itemHeight, leadingWord, minLineY, maxLineY, focusedIndex) => {
-  const visibleItems = [];
-  for (let i = minLineY; i < maxLineY; i++) {
-    const filteredItem = filteredItems[i];
-    visibleItems.push(getVisibleIem(filteredItem, itemHeight, leadingWord, i, focusedIndex));
+const transferrables = [isMessagePort, isMessagePortMain, isOffscreenCanvas, isSocket];
+const isTransferrable = value => {
+  for (const fn of transferrables) {
+    if (fn(value)) {
+      return true;
+    }
   }
-  return visibleItems;
+  return false;
 };
-
-const renderItems = {
-  isEqual(oldState, newState) {
-    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex;
-  },
-  apply(oldState, newState) {
-    const visibleItems = getVisibleItems(newState.items, newState.itemHeight, newState.leadingWord, newState.minLineY, newState.maxLineY, newState.focusedIndex);
-    const dom = getCompletionItemsVirtualDom(visibleItems);
-    return ['setDom', dom];
-  }
-};
-const renderBounds$4 = {
-  isEqual(oldState, newState) {
-    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.x === newState.x && oldState.y === newState.y;
-  },
-  apply(oldState, newState) {
-    const {
-      x,
-      y,
-      width,
-      height
-    } = newState;
-    return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
-  }
-};
-const renderHeight = {
-  isEqual(oldState, newState) {
-    return oldState.items.length === newState.items.length;
-  },
-  apply(oldState, newState) {
-    const {
-      itemHeight
-    } = newState;
-    const contentHeight = newState.items.length * itemHeight;
-    return [/* method */SetContentHeight, /* contentHeight */contentHeight];
-  }
-};
-const renderNegativeMargin = {
-  isEqual(oldState, newState) {
-    return oldState.deltaY === newState.deltaY;
-  },
-  apply(oldState, newState) {
-    return [/* method */SetNegativeMargin, /* negativeMargin */-newState.deltaY];
-  }
-};
-const renderScrollBar = {
-  isEqual(oldState, newState) {
-    return oldState.negativeMargin === newState.negativeMargin && oldState.deltaY === newState.deltaY && oldState.height === newState.height && oldState.finalDeltaY === newState.finalDeltaY && oldState.items.length === newState.items.length;
-  },
-  apply(oldState, newState) {
-    const total = newState.items.length;
-    const contentHeight = total * newState.itemHeight;
-    const scrollBarHeight = getScrollBarSize(newState.height, contentHeight, newState.minimumSliderSize);
-    const scrollBarY = getScrollBarY(newState.deltaY, newState.finalDeltaY, newState.height - newState.headerHeight, scrollBarHeight);
-    return [/* method */SetScrollBar, /* scrollBarY */scrollBarY, /* scrollBarHeight */scrollBarHeight];
-  }
-};
-const render$a = [renderItems, renderBounds$4, renderHeight, renderNegativeMargin, renderScrollBar];
-const renderCompletion = (oldState, newState) => {
-  const commands = [];
-  for (const item of render$a) {
-    if (!item.isEqual(oldState, newState)) {
-      commands.push(item.apply(oldState, newState));
-    }
-  }
-  return commands;
-};
-
-const removeWidget = widget => {
-  // @ts-ignore
-  return [['Viewlet.send', widget.newState.uid, 'dispose']];
-};
-
-const render$9 = widget => {
-  const commands = renderCompletion(widget.oldState, widget.newState);
-  const wrappedCommands = [];
-  const uid = widget.newState.uid;
-  for (const command of commands) {
-    wrappedCommands.push(['Viewlet.send', uid, ...command]);
-  }
-  return wrappedCommands;
-};
-const add$5 = widget => {
-  const commands = render$9(widget);
-  const id = 'EditorCompletion';
-  // TODO how to generate a unique integer id
-  // that doesn't collide with ids created in renderer worker?
-  const uid = widget.newState.uid;
-  const allCommands = [];
-  allCommands.push(['Viewlet.create', id, uid]);
-  allCommands.push(...commands);
-  return allCommands;
-};
-const remove$5 = removeWidget;
-const handleEditorType = (editor, state) => {
-  const {
-    unfilteredItems,
-    itemHeight,
-    maxHeight
-  } = state;
-  const {
-    selections
-  } = editor;
-  const rowIndex = selections[0];
-  const columnIndex = selections[1];
-  const x$1 = x(editor, rowIndex, columnIndex);
-  const y$1 = y(editor, rowIndex);
-  const wordAtOffset = getWordBefore(editor, rowIndex, columnIndex);
-  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
-  const newMinLineY = 0;
-  const newMaxLineY = Math.min(items.length, 8);
-  const height = getListHeight(items.length, itemHeight, maxHeight);
-  const finalDeltaY = items.length * itemHeight - height;
-  return {
-    ...state,
-    items,
-    x: x$1,
-    y: y$1,
-    minLineY: newMinLineY,
-    maxLineY: newMaxLineY,
-    leadingWord: wordAtOffset,
-    height,
-    finalDeltaY
-  };
-};
-const handleEditorDeleteLeft = (editor, state) => {
-  const {
-    unfilteredItems,
-    itemHeight,
-    maxHeight
-  } = state;
-  const {
-    selections
-  } = editor;
-  const rowIndex = selections[0];
-  const columnIndex = selections[1];
-  const x$1 = x(editor, rowIndex, columnIndex);
-  const y$1 = y(editor, rowIndex);
-  const wordAtOffset = getWordBefore(editor, rowIndex, columnIndex);
-  if (!wordAtOffset) {
-    return undefined;
-  }
-  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
-  const newMaxLineY = Math.min(items.length, 8);
-  const height = getListHeight(items.length, itemHeight, maxHeight);
-  return {
-    ...state,
-    items,
-    x: x$1,
-    y: y$1,
-    maxLineY: newMaxLineY,
-    leadingWord: wordAtOffset,
-    height
-  };
-};
-
-const EditorCompletionWidget = {
-  __proto__: null,
-  add: add$5,
-  handleEditorDeleteLeft,
-  handleEditorType,
-  remove: remove$5,
-  render: render$9
-};
-
-const MessagePort$1 = 1;
-const ModuleWorker = 2;
-const ReferencePort = 3;
-const ModuleWorkerAndMessagePort = 8;
-const Auto = () => {
-  // @ts-ignore
-  if (globalThis.acceptPort) {
-    return MessagePort$1;
-  }
-  // @ts-ignore
-  if (globalThis.acceptReferencePort) {
-    return ReferencePort;
-  }
-  return ModuleWorkerAndMessagePort;
-};
-
-const getData$1 = event => {
-  return event.data;
-};
-const walkValue = (value, transferrables, isTransferrable) => {
-  if (!value) {
-    return;
-  }
-  if (isTransferrable(value)) {
-    transferrables.push(value);
-    return;
-  }
-  if (Array.isArray(value)) {
-    for (const item of value) {
-      walkValue(item, transferrables, isTransferrable);
-    }
-    return;
-  }
-  if (typeof value === 'object') {
-    for (const property of Object.values(value)) {
-      walkValue(property, transferrables, isTransferrable);
-    }
-    return;
-  }
-};
-const isMessagePort = value => {
-  return value && value instanceof MessagePort;
-};
-const isMessagePortMain = value => {
-  return value && value.constructor && value.constructor.name === 'MessagePortMain';
-};
-const isOffscreenCanvas = value => {
-  return typeof OffscreenCanvas !== 'undefined' && value instanceof OffscreenCanvas;
-};
-const isInstanceOf = (value, constructorName) => {
-  return value?.constructor?.name === constructorName;
-};
-const isSocket = value => {
-  return isInstanceOf(value, 'Socket');
-};
-const transferrables = [isMessagePort, isMessagePortMain, isOffscreenCanvas, isSocket];
-const isTransferrable = value => {
-  for (const fn of transferrables) {
-    if (fn(value)) {
-      return true;
-    }
-  }
-  return false;
-};
-const getTransferrables = value => {
-  const transferrables = [];
-  walkValue(value, transferrables, isTransferrable);
-  return transferrables;
+const getTransferrables = value => {
+  const transferrables = [];
+  walkValue(value, transferrables, isTransferrable);
+  return transferrables;
 };
 const attachEvents = that => {
   const handleMessage = (...args) => {
@@ -9944,8 +9582,7 @@ const listen$1 = async ({
 };
 
 const listen = async () => {
-  register$1(commandMap);
-  register(Completion, EditorCompletionWidget);
+  register(commandMap);
   const ipc = await listen$1({
     method: Auto()
   });
@@ -10039,7 +9676,7 @@ const renderContent$1 = {
     return ['Viewlet.setDom2', newState.uid, dom];
   }
 };
-const renderBounds$3 = {
+const renderBounds$4 = {
   isEqual(oldState, newState) {
     return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
   },
@@ -10053,10 +9690,10 @@ const renderBounds$3 = {
     return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
   }
 };
-const render$8 = [renderContent$1, renderBounds$3, renderColor, renderOffsetX];
+const render$a = [renderContent$1, renderBounds$4, renderColor, renderOffsetX];
 const renderFull$1 = (oldState, newState) => {
   const commands = [];
-  for (const item of render$8) {
+  for (const item of render$a) {
     if (!item.isEqual(oldState, newState)) {
       commands.push(item.apply(oldState, newState));
     }
@@ -10064,7 +9701,12 @@ const renderFull$1 = (oldState, newState) => {
   return commands;
 };
 
-const render$7 = widget => {
+const removeWidget = widget => {
+  // @ts-ignore
+  return [['Viewlet.send', widget.newState.uid, 'dispose']];
+};
+
+const render$9 = widget => {
   const commands = renderFull$1(widget.oldState, widget.newState);
   const wrappedCommands = [];
   const uid = widget.newState.uid;
@@ -10077,10 +9719,10 @@ const render$7 = widget => {
   }
   return wrappedCommands;
 };
-const add$4 = widget => {
-  return addWidget(widget, 'ColorPicker', render$7);
+const add$5 = widget => {
+  return addWidget(widget, 'ColorPicker', render$9);
 };
-const remove$4 = removeWidget;
+const remove$5 = removeWidget;
 const Commands$1 = {
   'ColorPicker.handleSliderPointerDown': handleSliderPointerDown,
   'ColorPicker.handleSliderPointerMove': handleSliderPointerMove
@@ -10089,9 +9731,9 @@ const Commands$1 = {
 const EditorColorPickerWidget = {
   __proto__: null,
   Commands: Commands$1,
-  add: add$4,
-  remove: remove$4,
-  render: render$7
+  add: add$5,
+  remove: remove$5,
+  render: render$9
 };
 
 const getCompletionDetailVirtualDom = content => {
@@ -10135,7 +9777,7 @@ const renderContent = {
     return ['Viewlet.setDom2', newState.uid, dom];
   }
 };
-const renderBounds$2 = {
+const renderBounds$3 = {
   isEqual(oldState, newState) {
     return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
   },
@@ -10149,32 +9791,427 @@ const renderBounds$2 = {
     return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
   }
 };
-const render$6 = [renderContent, renderBounds$2];
+const render$8 = [renderContent, renderBounds$3];
 const renderFull = (oldState, newState) => {
-  return renderParts(render$6, oldState, newState);
+  return renderParts(render$8, oldState, newState);
 };
 
-const render$5 = widget => {
-  const commands = renderFull(widget.oldState, widget.newState);
-  const wrappedCommands = [];
-  const uid = widget.newState.uid;
-  for (const command of commands) {
-    if (command[0] === 'Viewlet.setDom2') {
-      wrappedCommands.push(command);
-    } else {
-      wrappedCommands.push(['Viewlet.send', uid, ...command]);
-    }
-  }
-  return wrappedCommands;
-};
-const add$3 = widget => {
-  return addWidget(widget, 'EditorCompletionDetails', render$5);
+const getPositionAtCursor = editor => {
+  const {
+    selections
+  } = editor;
+  const rowIndex = selections[0];
+  const columnIndex = selections[1];
+  const x$1 = x(editor, rowIndex, columnIndex);
+  const y$1 = y(editor, rowIndex);
+  return {
+    x: x$1,
+    y: y$1,
+    rowIndex,
+    columnIndex
+  };
+};
+
+const render$7 = widget => {
+  const commands = renderFull(widget.oldState, widget.newState);
+  const wrappedCommands = [];
+  const uid = widget.newState.uid;
+  for (const command of commands) {
+    if (command[0] === 'Viewlet.setDom2') {
+      wrappedCommands.push(command);
+    } else {
+      wrappedCommands.push(['Viewlet.send', uid, ...command]);
+    }
+  }
+  return wrappedCommands;
+};
+const add$4 = widget => {
+  return addWidget(widget, 'EditorCompletionDetails', render$7);
+};
+const remove$4 = removeWidget;
+const handleEditorType$1 = (editor, state) => {
+  const completionState = getCompletionState(editor);
+  if (!completionState) {
+    return editor;
+  }
+  const {
+    x
+  } = getPositionAtCursor(editor);
+  const detailX = x + completionState.width - state.borderSize;
+  return {
+    ...state,
+    x: detailX
+  };
+};
+const handleEditorDeleteLeft$1 = (editor, state) => {
+  const completionState = getCompletionState(editor);
+  if (!completionState) {
+    return editor;
+  }
+  const {
+    x
+  } = getPositionAtCursor(editor);
+  const detailX = x + completionState.width - state.borderSize;
+  return {
+    ...state,
+    x: detailX
+  };
 };
-const remove$3 = removeWidget;
 
 const EditorCompletionDetailWidget = {
+  __proto__: null,
+  add: add$4,
+  handleEditorDeleteLeft: handleEditorDeleteLeft$1,
+  handleEditorType: handleEditorType$1,
+  remove: remove$4,
+  render: render$7
+};
+
+const CheckBox = 'checkbox';
+const Group = 'group';
+const None = 'none';
+const Option = 'option';
+
+const getFileIconVirtualDom = icon => {
+  return {
+    type: Img,
+    className: FileIcon,
+    src: icon,
+    role: None,
+    childCount: 0
+  };
+};
+
+const getIconDom = (fileIcon, symbolName) => {
+  if (fileIcon) {
+    return getFileIconVirtualDom(fileIcon);
+  }
+  return {
+    type: Div,
+    className: `${ColoredMaskIcon} ${symbolName}`,
+    childCount: 0
+  };
+};
+
+const label1 = {
+  type: Div,
+  className: Label,
+  childCount: 1
+};
+const completionHighlight = {
+  type: Span,
+  className: EditorCompletionItemHighlight,
+  childCount: 1
+};
+const getHighlightedLabelDom = (label, highlights) => {
+  if (highlights.length === 0) {
+    return [label1, text(label)];
+  }
+  const dom = [];
+  const labelDom = {
+    type: Div,
+    className: Label,
+    childCount: 0
+  };
+  dom.push(labelDom);
+  let position = 0;
+  for (let i = 0; i < highlights.length; i += 2) {
+    const highlightStart = highlights[i];
+    const highlightEnd = highlights[i + 1];
+    if (position < highlightStart) {
+      const beforeText = label.slice(position, highlightStart);
+      labelDom.childCount++;
+      dom.push(text(beforeText));
+    }
+    const highlightText = label.slice(highlightStart, highlightEnd);
+    labelDom.childCount++;
+    dom.push(completionHighlight, text(highlightText));
+    position = highlightEnd;
+  }
+  if (position < label.length) {
+    const afterText = label.slice(position);
+    labelDom.childCount++;
+    dom.push(text(afterText));
+  }
+  return dom;
+};
+
+const getCompletionItemVirtualDom = visibleItem => {
+  const {
+    top,
+    label,
+    symbolName,
+    highlights,
+    focused,
+    deprecated,
+    fileIcon
+  } = visibleItem;
+  let className = EditorCompletionItem;
+  if (focused) {
+    className += ' ' + EditorCompletionItemFocused;
+  }
+  if (deprecated) {
+    className += ' ' + EditorCompletionItemDeprecated;
+  }
+  return [{
+    type: Div,
+    role: Option,
+    className,
+    top,
+    childCount: 2
+  }, getIconDom(fileIcon, symbolName), ...getHighlightedLabelDom(label, highlights)];
+};
+
+const getCompletionItemsVirtualDom = visibleItems => {
+  if (visibleItems.length === 0) {
+    return [{
+      type: Div,
+      childCount: 1
+    }, text(noResults$1())];
+  }
+  const root = {
+    type: Div,
+    childCount: visibleItems.length
+  };
+  const dom = [root, ...visibleItems.flatMap(getCompletionItemVirtualDom)];
+  return dom;
+};
+
+const Property = 1;
+const Value = 2;
+const Function = 3;
+const Variable = 4;
+const Keyword = 5;
+const Folder = 6;
+const File = 7;
+const Field = 8;
+
+const SymbolProperty = 'SymbolProperty';
+const SymbolValue = 'SymbolValue';
+const SymbolFunction = 'SymbolFunction';
+const SymbolVariable = 'SymbolVariable';
+const SymbolKeyword = 'SymbolKeyword';
+const SymbolDefault = 'SymbolDefault';
+const SymbolField = 'SymbolField';
+const SymbolNone = '';
+
+const getSymbolName = kind => {
+  switch (kind) {
+    case Property:
+      return SymbolProperty;
+    case Value:
+      return SymbolValue;
+    case Function:
+      return SymbolFunction;
+    case Variable:
+      return SymbolVariable;
+    case Keyword:
+      return SymbolKeyword;
+    case Field:
+      return SymbolField;
+    case File:
+      return SymbolNone;
+    default:
+      return SymbolDefault;
+  }
+};
+
+// TODO
+const getCompletionFileIcon = kind => {
+  switch (kind) {
+    case File:
+      return EmptyString$1;
+    case Folder:
+      return EmptyString$1;
+    default:
+      return EmptyString$1;
+  }
+};
+
+const getHighlights = item => {
+  const {
+    matches
+  } = item;
+  return matches.slice(1);
+};
+
+const getLabel = item => {
+  return item.label;
+};
+const getVisibleIem = (item, itemHeight, leadingWord, i, focusedIndex) => {
+  return {
+    label: getLabel(item),
+    symbolName: getSymbolName(item.kind),
+    top: i * itemHeight,
+    highlights: getHighlights(item),
+    focused: i === focusedIndex,
+    deprecated: item.flags & Deprecated,
+    fileIcon: getCompletionFileIcon(item.kind)
+  };
+};
+
+const getVisibleItems = (filteredItems, itemHeight, leadingWord, minLineY, maxLineY, focusedIndex) => {
+  const visibleItems = [];
+  for (let i = minLineY; i < maxLineY; i++) {
+    const filteredItem = filteredItems[i];
+    visibleItems.push(getVisibleIem(filteredItem, itemHeight, leadingWord, i, focusedIndex));
+  }
+  return visibleItems;
+};
+
+const renderItems = {
+  isEqual(oldState, newState) {
+    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex;
+  },
+  apply(oldState, newState) {
+    const visibleItems = getVisibleItems(newState.items, newState.itemHeight, newState.leadingWord, newState.minLineY, newState.maxLineY, newState.focusedIndex);
+    const dom = getCompletionItemsVirtualDom(visibleItems);
+    return ['setDom', dom];
+  }
+};
+const renderBounds$2 = {
+  isEqual(oldState, newState) {
+    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.x === newState.x && oldState.y === newState.y;
+  },
+  apply(oldState, newState) {
+    const {
+      x,
+      y,
+      width,
+      height
+    } = newState;
+    return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
+  }
+};
+const renderHeight = {
+  isEqual(oldState, newState) {
+    return oldState.items.length === newState.items.length;
+  },
+  apply(oldState, newState) {
+    const {
+      itemHeight
+    } = newState;
+    const contentHeight = newState.items.length * itemHeight;
+    return [/* method */SetContentHeight, /* contentHeight */contentHeight];
+  }
+};
+const renderNegativeMargin = {
+  isEqual(oldState, newState) {
+    return oldState.deltaY === newState.deltaY;
+  },
+  apply(oldState, newState) {
+    return [/* method */SetNegativeMargin, /* negativeMargin */-newState.deltaY];
+  }
+};
+const renderScrollBar = {
+  isEqual(oldState, newState) {
+    return oldState.negativeMargin === newState.negativeMargin && oldState.deltaY === newState.deltaY && oldState.height === newState.height && oldState.finalDeltaY === newState.finalDeltaY && oldState.items.length === newState.items.length;
+  },
+  apply(oldState, newState) {
+    const total = newState.items.length;
+    const contentHeight = total * newState.itemHeight;
+    const scrollBarHeight = getScrollBarSize(newState.height, contentHeight, newState.minimumSliderSize);
+    const scrollBarY = getScrollBarY(newState.deltaY, newState.finalDeltaY, newState.height - newState.headerHeight, scrollBarHeight);
+    return [/* method */SetScrollBar, /* scrollBarY */scrollBarY, /* scrollBarHeight */scrollBarHeight];
+  }
+};
+const render$6 = [renderItems, renderBounds$2, renderHeight, renderNegativeMargin, renderScrollBar];
+const renderCompletion = (oldState, newState) => {
+  const commands = [];
+  for (const item of render$6) {
+    if (!item.isEqual(oldState, newState)) {
+      commands.push(item.apply(oldState, newState));
+    }
+  }
+  return commands;
+};
+
+const render$5 = widget => {
+  const commands = renderCompletion(widget.oldState, widget.newState);
+  const wrappedCommands = [];
+  const uid = widget.newState.uid;
+  for (const command of commands) {
+    wrappedCommands.push(['Viewlet.send', uid, ...command]);
+  }
+  return wrappedCommands;
+};
+const add$3 = widget => {
+  const commands = render$5(widget);
+  const id = 'EditorCompletion';
+  // TODO how to generate a unique integer id
+  // that doesn't collide with ids created in renderer worker?
+  const uid = widget.newState.uid;
+  const allCommands = [];
+  allCommands.push(['Viewlet.create', id, uid]);
+  allCommands.push(...commands);
+  return allCommands;
+};
+const remove$3 = removeWidget;
+const handleEditorType = (editor, state) => {
+  const {
+    unfilteredItems,
+    itemHeight,
+    maxHeight
+  } = state;
+  const {
+    x,
+    y,
+    rowIndex,
+    columnIndex
+  } = getPositionAtCursor(editor);
+  const wordAtOffset = getWordBefore(editor, rowIndex, columnIndex);
+  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
+  const newMinLineY = 0;
+  const newMaxLineY = Math.min(items.length, 8);
+  const height = getListHeight(items.length, itemHeight, maxHeight);
+  const finalDeltaY = items.length * itemHeight - height;
+  return {
+    ...state,
+    items,
+    x,
+    y,
+    minLineY: newMinLineY,
+    maxLineY: newMaxLineY,
+    leadingWord: wordAtOffset,
+    height,
+    finalDeltaY
+  };
+};
+const handleEditorDeleteLeft = (editor, state) => {
+  const {
+    unfilteredItems,
+    itemHeight,
+    maxHeight
+  } = state;
+  const {
+    x,
+    y,
+    rowIndex,
+    columnIndex
+  } = getPositionAtCursor(editor);
+  const wordAtOffset = getWordBefore(editor, rowIndex, columnIndex);
+  if (!wordAtOffset) {
+    return undefined;
+  }
+  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
+  const newMaxLineY = Math.min(items.length, 8);
+  const height = getListHeight(items.length, itemHeight, maxHeight);
+  return {
+    ...state,
+    items,
+    x,
+    y,
+    maxLineY: newMaxLineY,
+    leadingWord: wordAtOffset,
+    height
+  };
+};
+
+const EditorCompletionWidget = {
   __proto__: null,
   add: add$3,
+  handleEditorDeleteLeft,
+  handleEditorType,
   remove: remove$3,
   render: render$5
 };
@@ -10702,12 +10739,12 @@ const EditorSourceActionWidget = {
 };
 
 const registerWidgets = () => {
-  set(ColorPicker$2, EditorColorPickerWidget);
-  set(Completion, EditorCompletionWidget);
-  set(CompletionDetail$1, EditorCompletionDetailWidget);
-  set(Find, EditorFindWidget);
-  set(Hover, EditorHoverWidget);
-  set(SourceAction, EditorSourceActionWidget);
+  set$7(ColorPicker$2, EditorColorPickerWidget);
+  set$7(Completion, EditorCompletionWidget);
+  set$7(CompletionDetail$1, EditorCompletionDetailWidget);
+  set$7(Find, EditorFindWidget);
+  set$7(Hover, EditorHoverWidget);
+  set$7(SourceAction, EditorSourceActionWidget);
 };
 
 const main = async () => {