@lvce-editor/static-server 0.113.21 → 0.113.23

package/static/{95b4585 → a28f89f}/packages/ports-view/dist/portsViewWorkerMain.js

@@ -508,6 +508,9 @@ const restoreExistingError = (error, currentStack) => {
 };
 const restoreMethodNotFoundError = (error, currentStack) => {
   const restoredError = new JsonRpcError(error.message);
+  Object.assign(restoredError, {
+    code: error.code
+  });
   const parentStack = getParentStack(error);
   setStack(restoredError, `${parentStack}${NewLine}${currentStack}`);
   return restoredError;
@@ -527,9 +530,13 @@ const applyDataProperties = (restoredError, error) => {
     // @ts-ignore
     restoredError.codeFrame = error.data.codeFrame;
   }
-  if (error.data.code) {
+  if (typeof error.data.code === 'string' || typeof error.data.code === 'number') {
     // @ts-ignore
-    restoredError.code = error.data.code;
+    Object.defineProperty(restoredError, 'code', {
+      configurable: true,
+      value: error.data.code,
+      writable: true
+    });
   }
   if (error.data.type) {
     // @ts-ignore
@@ -551,6 +558,13 @@ const applyDirectProperties = (restoredError, error) => {
 };
 const restoreMessageError = (error, _currentStack) => {
   const restoredError = constructError(error.message, error.type, error.name);
+  if (typeof error.code === 'string' || typeof error.code === 'number') {
+    Object.defineProperty(restoredError, 'code', {
+      configurable: true,
+      value: error.code,
+      writable: true
+    });
+  }
   if (error.data) {
     applyDataProperties(restoredError, error);
   } else {
@@ -629,7 +643,7 @@ const getErrorProperty = (error, prettyError) => {
   return {
     code: Custom,
     data: {
-      code: prettyError.code,
+      code: prettyError.code ?? error?.code,
       codeFrame: prettyError.codeFrame,
       name: prettyError.name,
       stack: getStack(prettyError),
@@ -666,7 +680,12 @@ const getErrorResponseSimple = (id, error) => {
   return {
     error: {
       code: Custom,
-      data: error,
+      data: error instanceof Error ? {
+        ...error,
+        code: 'code' in error ? error.code : undefined,
+        stack: error.stack,
+        type: error.name
+      } : error,
       // @ts-ignore
       message: error.message
     },
@@ -950,175 +969,14 @@ const create$2 = rpcId => {
   };
 };
 
-const Audio = 0;
 const Button = 1;
-const Col = 2;
-const ColGroup = 3;
 const Div = 4;
-const H1 = 5;
 const Input = 6;
-const Kbd = 7;
 const Span = 8;
-const Table$1 = 9;
-const TBody = 10;
-const Td = 11;
 const Text = 12;
-const Th = 13;
-const THead = 14;
-const Tr = 15;
-const I = 16;
-const Img = 17;
-const Root = 0;
-const Ins = 20;
-const Del = 21;
-const H2 = 22;
-const H3 = 23;
-const H4 = 24;
-const H5 = 25;
-const H6 = 26;
-const Article = 27;
-const Aside = 28;
-const Footer = 29;
-const Header = 30;
-const Nav = 40;
-const Section = 41;
-const Search = 42;
-const Dd = 43;
-const Dl = 44;
-const Figcaption = 45;
-const Figure = 46;
-const Hr = 47;
-const Li = 48;
-const Ol = 49;
-const P = 50;
-const Pre = 51;
 const A = 53;
-const Abbr = 54;
-const Br = 55;
-const Cite = 56;
-const Data = 57;
-const Time = 58;
-const Tfoot = 59;
-const Ul = 60;
-const Video = 61;
-const TextArea = 62;
-const Select = 63;
-const Option = 64;
-const Code = 65;
-const Label = 66;
-const Dt = 67;
-const Iframe = 68;
-const Main = 69;
-const Strong = 70;
-const Em = 71;
-const Style = 72;
-const Html = 73;
-const Head = 74;
-const Title = 75;
-const Meta = 76;
-const Canvas = 77;
-const Form = 78;
-const BlockQuote = 79;
-const Quote = 80;
-const Circle = 81;
-const Defs = 82;
-const Ellipse = 83;
-const G = 84;
-const Line = 85;
-const Path = 86;
-const Polygon = 87;
-const Polyline = 88;
-const Rect = 89;
-const Svg = 90;
-const Use = 91;
 const Reference = 100;
 
-const VirtualDomElements = {
-  __proto__: null,
-  A,
-  Abbr,
-  Article,
-  Aside,
-  Audio,
-  BlockQuote,
-  Br,
-  Button,
-  Canvas,
-  Circle,
-  Cite,
-  Code,
-  Col,
-  ColGroup,
-  Data,
-  Dd,
-  Defs,
-  Del,
-  Div,
-  Dl,
-  Dt,
-  Ellipse,
-  Em,
-  Figcaption,
-  Figure,
-  Footer,
-  Form,
-  G,
-  H1,
-  H2,
-  H3,
-  H4,
-  H5,
-  H6,
-  Head,
-  Header,
-  Hr,
-  Html,
-  I,
-  Iframe,
-  Img,
-  Input,
-  Ins,
-  Kbd,
-  Label,
-  Li,
-  Line,
-  Main,
-  Meta,
-  Nav,
-  Ol,
-  Option,
-  P,
-  Path,
-  Polygon,
-  Polyline,
-  Pre,
-  Quote,
-  Rect,
-  Reference,
-  Root,
-  Search,
-  Section,
-  Select,
-  Span,
-  Strong,
-  Style,
-  Svg,
-  TBody,
-  THead,
-  Table: Table$1,
-  Td,
-  Text,
-  TextArea,
-  Tfoot,
-  Th,
-  Time,
-  Title,
-  Tr,
-  Ul,
-  Use,
-  Video
-};
-
 const ClientY = 'event.clientY';
 const DeltaMode = 'event.deltaMode';
 const DeltaY = 'event.deltaY';
@@ -1126,10 +984,23 @@ const Key = 'event.key';
 const TargetName = 'event.target.name';
 const TargetValue = 'event.target.value';
 
+const Backspace = 1;
+const Enter = 3;
+const Space = 9;
+const End = 255;
+const Home = 12;
+const UpArrow = 14;
+const DownArrow = 16;
+const Delete = 18;
+const KeyA = 29;
+
+const Shift = 1 << 10 >>> 0;
+
 const RendererWorker = 1;
 
 const SetCss = 'Viewlet.setCss';
 const SetDom2 = 'Viewlet.setDom2';
+const SetFocusContext = 'Viewlet.setFocusContext';
 const SetPatches = 'Viewlet.setPatches';
 
 const {
@@ -1152,7 +1023,8 @@ const create$1 = () => {
   const commandQueues = new Map();
   const generations = Object.create(null);
   const states = Object.create(null);
-  const commandMapRef = {};
+  const commandMapRef = Object.create(null);
+  const commandsById = Object.create(null);
   const getGeneration = uid => generations[uid] || 0;
   const isCurrentGeneration = (uid, generation) => {
     return states[uid] !== undefined && getGeneration(uid) === generation;
@@ -1214,6 +1086,18 @@ const create$1 = () => {
         delete states[key];
       }
     },
+    createDirectEventCommandMap(requestRender) {
+      return {
+        async 'Viewlet.executeViewletCommand'(uid, command, ...args) {
+          const fn = commandsById[command];
+          if (!fn) {
+            throw new Error(`Viewlet command not found: ${command}`);
+          }
+          await fn(uid, ...args);
+          await requestRender(uid);
+        }
+      };
+    },
     diff(uid, modules, numbers) {
       const {
         oldState,
@@ -1245,6 +1129,9 @@ const create$1 = () => {
     },
     registerCommands(commandMap) {
       Object.assign(commandMapRef, commandMap);
+      for (const [key, fn] of Object.entries(commandMap)) {
+        commandsById[toCommandId(key)] = fn;
+      }
     },
     set(uid, oldState, newState, scheduledState) {
       const current = states[uid];
@@ -1438,23 +1325,24 @@ const clamp = (value, minimum, maximum) => {
   return Math.min(Math.max(value, minimum), maximum);
 };
 
-const MinimumScrollBarSize = 20;
 const recalculateVirtualList = state => {
   const {
+    deltaY: oldDeltaY,
     footerHeight,
     headerHeight,
     height,
     itemHeight,
+    minimumScrollBarSize,
     ports
   } = state;
   const listHeight = Math.max(0, height - headerHeight - footerHeight);
   const contentHeight = ports.length * itemHeight;
   const finalDeltaY = Math.max(0, contentHeight - listHeight);
-  const deltaY = clamp(state.deltaY, 0, finalDeltaY);
+  const deltaY = clamp(oldDeltaY, 0, finalDeltaY);
   const minLineY = itemHeight === 0 ? 0 : Math.floor(deltaY / itemHeight);
   const visibleCount = itemHeight === 0 ? 0 : Math.ceil(listHeight / itemHeight) + 1;
   const maxLineY = Math.min(ports.length, minLineY + visibleCount);
-  const scrollBarHeight = contentHeight <= listHeight || listHeight === 0 ? 0 : Math.max(MinimumScrollBarSize, listHeight * listHeight / contentHeight);
+  const scrollBarHeight = contentHeight <= listHeight || listHeight === 0 ? 0 : Math.max(minimumScrollBarSize, listHeight * listHeight / contentHeight);
   const scrollBarY = finalDeltaY === 0 ? 0 : deltaY / finalDeltaY * (listHeight - scrollBarHeight);
   return {
     ...state,
@@ -1469,8 +1357,11 @@ const recalculateVirtualList = state => {
 };
 
 const setPorts = (state, ports) => {
+  const {
+    focusedIndex: oldFocusedIndex
+  } = state;
   const normalized = normalizePorts(ports);
-  const focusedIndex = Math.min(state.focusedIndex, normalized.length - 1);
+  const focusedIndex = Math.min(oldFocusedIndex, normalized.length - 1);
   return recalculateVirtualList({
     ...state,
     focusedIndex,
@@ -1480,9 +1371,13 @@ const setPorts = (state, ports) => {
 };
 
 const addPort = (state, port) => {
-  return setPorts(state, [...state.ports, port]);
+  const {
+    ports
+  } = state;
+  return setPorts(state, [...ports, port]);
 };
 
+const PortRegex = /^\d+$/;
 const startAddPort = state => {
   return {
     ...state,
@@ -1507,9 +1402,12 @@ const handleAddPortInput = (state, value) => {
   };
 };
 const submitAddPort = state => {
-  const value = state.addPortValue.trim();
+  const {
+    addPortValue
+  } = state;
+  const value = addPortValue.trim();
   const port = Number(value);
-  if (!/^\d+$/.test(value) || !Number.isSafeInteger(port) || port < 1 || port > 65_535) {
+  if (!PortRegex.test(value) || !Number.isSafeInteger(port) || port < 1 || port > 65_535) {
     return {
       ...state,
       addPortError: 'Enter a port number between 1 and 65535'
@@ -1551,6 +1449,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir, parentUid) =>
     deltaY: 0,
     editing: false,
     finalDeltaY: 0,
+    focused: false,
     focusedIndex: -1,
     footerHeight: 36,
     headerHeight: 28,
@@ -1559,6 +1458,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir, parentUid) =>
     listHeight: 0,
     loaded: false,
     maxLineY: 0,
+    minimumScrollBarSize: 20,
     minLineY: 0,
     parentUid,
     platform,
@@ -1574,6 +1474,9 @@ const create = (uid, uri, x, y, width, height, platform, assetDir, parentUid) =>
   set(uid, calculated, calculated);
 };
 
+const isFocusContextEqual = (oldState, newState) => {
+  return oldState.focused === newState.focused && oldState.editing === newState.editing;
+};
 const isDomEqual = (oldState, newState) => {
   return oldState.addPortError === newState.addPortError && oldState.addPortValue === newState.addPortValue && oldState.editing === newState.editing && oldState.focusedIndex === newState.focusedIndex && oldState.loaded === newState.loaded && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.ports === newState.ports;
 };
@@ -1584,13 +1487,14 @@ const isCssEqual = (oldState, newState) => {
 const RenderCss = 1;
 const RenderDom = 2;
 const RenderIncremental = 3;
+const RenderFocusContext = 4;
 
 const diff2 = uid => {
   const {
     oldState
   } = get(uid);
   const domDiffType = oldState.loaded ? RenderIncremental : RenderDom;
-  return diff(uid, [isDomEqual, isCssEqual], [domDiffType, RenderCss]);
+  return diff(uid, [isDomEqual, isCssEqual, isFocusContextEqual], [domDiffType, RenderCss, RenderFocusContext]);
 };
 
 const setDeltaY = (state, deltaY) => {
@@ -1602,6 +1506,8 @@ const setDeltaY = (state, deltaY) => {
 
 const focusIndex = (state, index) => {
   const {
+    itemHeight,
+    listHeight,
     ports
   } = state;
   if (ports.length === 0) {
@@ -1614,12 +1520,12 @@ const focusIndex = (state, index) => {
   let {
     deltaY
   } = state;
-  const itemTop = focusedIndex * state.itemHeight;
-  const itemBottom = itemTop + state.itemHeight;
+  const itemTop = focusedIndex * itemHeight;
+  const itemBottom = itemTop + itemHeight;
   if (itemTop < deltaY) {
     deltaY = itemTop;
-  } else if (itemBottom > deltaY + state.listHeight) {
-    deltaY = itemBottom - state.listHeight;
+  } else if (itemBottom > deltaY + listHeight) {
+    deltaY = itemBottom - listHeight;
   }
   return setDeltaY({
     ...state,
@@ -1627,7 +1533,10 @@ const focusIndex = (state, index) => {
   }, deltaY);
 };
 const focusNext = state => {
-  return focusIndex(state, state.focusedIndex + 1);
+  const {
+    focusedIndex
+  } = state;
+  return focusIndex(state, focusedIndex + 1);
 };
 const focusPrevious = state => {
   const {
@@ -1638,313 +1547,15 @@ const focusPrevious = state => {
   return focusIndex(state, index);
 };
 
-const handleBlur = state => {
-  return {
-    ...state,
-    focusedIndex: -1
-  };
-};
-
-const handleClickAt = (state, clientY, name) => {
-  if (name.startsWith('port-address-') || name.startsWith('port-status-')) {
-    const port = Number(name.slice(name.lastIndexOf('-') + 1));
-    const index = state.ports.findIndex(item => item.port === port);
-    return index === -1 ? state : focusIndex(state, index);
-  }
-  const relativeY = clientY - state.y - state.headerHeight;
-  const index = state.minLineY + Math.floor((relativeY + state.deltaY % state.itemHeight) / state.itemHeight);
-  if (relativeY < 0 || index < 0 || index >= state.ports.length) {
-    return state;
-  }
-  return focusIndex(state, index);
-};
-
-const SchemeRegex = /^[a-z][a-z\d+.-]*:\/\//i;
-const getAddressUrl = address => {
-  return SchemeRegex.test(address) ? address : `http://${address}`;
+const focusFirst = state => {
+  return focusIndex(state, 0);
 };
 
-const openAddress = async (state, portNumber) => {
-  const port = state.ports.find(item => item.port === portNumber);
-  if (!port || !port.forwardedAddress) {
-    return state;
-  }
-  await openUri(getAddressUrl(port.forwardedAddress));
-  return state;
-};
-
-const togglePortActive = (state, portNumber) => {
-  return {
-    ...state,
-    ports: state.ports.map(item => {
-      if (item.port !== portNumber) {
-        return item;
-      }
-      return {
-        ...item,
-        active: !item.active
-      };
-    })
-  };
-};
-
-const parsePort = name => {
-  return Number(name.slice(name.lastIndexOf('-') + 1));
-};
-const handleClick = async (state, clientY, name) => {
-  if (name.startsWith('port-address-')) {
-    const portNumber = parsePort(name);
-    const index = state.ports.findIndex(item => item.port === portNumber);
-    const focused = index === -1 ? state : focusIndex(state, index);
-    return openAddress(focused, portNumber);
-  }
-  if (name.startsWith('port-status-')) {
-    const portNumber = parsePort(name);
-    const index = state.ports.findIndex(item => item.port === portNumber);
-    const focused = index === -1 ? state : focusIndex(state, index);
-    return togglePortActive(focused, portNumber);
-  }
-  return handleClickAt(state, clientY, name);
-};
-
-const removePort = (state, portNumber) => {
-  const ports = state.ports.filter(item => item.port !== portNumber);
-  const focusedIndex = Math.min(state.focusedIndex, ports.length - 1);
-  return recalculateVirtualList({
-    ...state,
-    focusedIndex,
+const focusLast = state => {
+  const {
     ports
-  });
-};
-
-const handleKeyDown = async (state, key) => {
-  if (state.editing) {
-    return state;
-  }
-  if (key === 'ArrowDown') {
-    return focusNext(state);
-  }
-  if (key === 'ArrowUp') {
-    return focusPrevious(state);
-  }
-  if (key === 'Home') {
-    return focusIndex(state, 0);
-  }
-  if (key === 'End') {
-    return focusIndex(state, state.ports.length - 1);
-  }
-  if (key === 'a' || key === 'A') {
-    return startAddPort(state);
-  }
-  const selected = state.ports[state.focusedIndex];
-  if (!selected) {
-    return state;
-  }
-  if (key === 'Enter') {
-    return openAddress(state, selected.port);
-  }
-  if (key === ' ' || key === 'Spacebar') {
-    return togglePortActive(state, selected.port);
-  }
-  if (key === 'Delete' || key === 'Backspace') {
-    return removePort(state, selected.port);
-  }
-  return state;
-};
-
-const PageScrollMultiplier = 16;
-const handleWheel = (state, deltaMode, deltaY) => {
-  const multiplier = deltaMode === 0 ? 1 : PageScrollMultiplier;
-  return setDeltaY(state, state.deltaY + deltaY * multiplier);
-};
-
-const loadContent = state => {
-  return {
-    ...state,
-    loaded: true
-  };
-};
-
-const getCss = state => {
-  const relativeY = -(state.deltaY % state.itemHeight);
-  return `.Ports {
-  box-sizing: border-box;
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) ${state.footerHeight}px;
-  height: 100%;
-  min-height: 0;
-  outline: none;
-  overflow: hidden;
-  color: var(--PanelForeground, var(--WorkbenchForeground));
-  background: var(--PanelBackground, var(--WorkbenchBackground));
-  font-size: 13px;
-}
-
-.PortsTable {
-  display: grid;
-  grid-template-rows: ${state.headerHeight}px minmax(0, 1fr);
-  min-height: 0;
-  overflow: hidden;
-}
-
-.PortsTableHeader,
-.PortsTableRow {
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: 42px minmax(72px, 0.65fr) minmax(160px, 1.25fr) minmax(120px, 1.7fr) minmax(110px, 1fr);
-  min-width: 620px;
-}
-
-.PortsTableHeader {
-  align-items: center;
-  color: var(--PanelTitleActiveForeground, var(--WorkbenchForeground));
-  font-weight: 600;
-  border-bottom: 1px solid var(--PanelSectionBorder, rgba(128, 128, 128, 0.35));
-}
-
-.PortsTableBody {
-  min-height: 0;
-  overflow: hidden;
-}
-
-.PortsTableBody > .PortsTableRow:first-child {
-  margin-top: ${relativeY}px;
-}
-
-.PortsTableRow {
-  height: ${state.itemHeight}px;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.PortsTableRowOdd {
-  background: var(--TreeTableOddRowsBackground, rgba(255, 255, 255, 0.025));
-}
-
-.PortsTableRow:hover {
-  background: var(--ListHoverBackground, rgba(255, 255, 255, 0.06));
-}
-
-.PortsTableRow.Focused {
-  background: var(--ListActiveSelectionBackground, #405c50);
-  color: var(--ListActiveSelectionForeground, white);
-}
-
-.PortsTableCell {
-  box-sizing: border-box;
-  min-width: 0;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding: 0 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  border-right: 1px solid var(--PanelSectionBorder, rgba(128, 128, 128, 0.2));
-}
-
-.PortsStatusColumn {
-  justify-content: center;
-  padding: 0;
-}
-
-.PortsStatusButton {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  border: 0;
-  color: inherit;
-  background: transparent;
-  cursor: pointer;
-}
-
-.PortsStatusIcon {
-  font-size: 14px;
-}
-
-.PortsStatusIconActive {
-  color: var(--PortsIconRunningProcessForeground, #89d185);
-}
-
-.PortsStatusIconInactive {
-  color: var(--DisabledForeground, #8c8c8c);
-}
-
-.PortsAddressLink {
-  color: var(--TextLinkForeground, #3794ff);
-  cursor: pointer;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-.PortsAddressLink:hover {
-  color: var(--TextLinkActiveForeground, #4daafc);
-  text-decoration: underline;
-}
-
-.PortsEmpty {
-  padding: 12px 16px;
-  color: var(--DescriptionForeground, #9d9d9d);
-}
-
-.PortsFooter {
-  display: flex;
-  align-items: center;
-  padding-left: 52px;
-}
-
-.AddPortButton,
-.CancelAddPortButton {
-  border: 0;
-  border-radius: 2px;
-  padding: 3px 12px;
-  background: var(--ButtonBackground, #0e639c);
-  color: var(--ButtonForeground, white);
-  cursor: pointer;
-}
-
-.CancelAddPortButton {
-  background: var(--ButtonSecondaryBackground, #3a3d41);
-  color: var(--ButtonSecondaryForeground, white);
-}
-
-.AddPortButton:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.AddPortEditor {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.AddPortInput {
-  box-sizing: border-box;
-  width: 160px;
-  height: 24px;
-  border: 1px solid var(--InputBorder, transparent);
-  outline: none;
-  padding: 2px 6px;
-  background: var(--InputBackground, #3c3c3c);
-  color: var(--InputForeground, white);
-}
-
-.AddPortInput:focus {
-  border-color: var(--FocusBorder, #007fd4);
-}
-
-.AddPortError {
-  color: var(--InputValidationErrorForeground, #f48771);
-  margin-left: 6px;
-}
-`;
-};
-
-const renderCss = (oldState, newState) => {
-  return [SetCss, newState.uid, getCss(newState)];
+  } = state;
+  return focusIndex(state, ports.length - 1);
 };
 
 const mergeClassNames = (...classNames) => {
@@ -1959,8 +1570,6 @@ const text = data => {
   };
 };
 
-new Set(Object.values(VirtualDomElements));
-
 const SetText = 1;
 const Replace = 2;
 const SetAttribute = 3;
@@ -1971,6 +1580,7 @@ const NavigateParent = 8;
 const RemoveChild = 9;
 const NavigateSibling = 10;
 const SetReferenceNodeUid = 11;
+const MultiNavigation = 18;
 
 const isKey = key => {
   return key !== 'type' && key !== 'childCount';
@@ -2031,6 +1641,55 @@ const getChildrenWithCount = (nodes, startIndex, childCount) => {
   };
 };
 
+const isNavigationPatch = patch => {
+  switch (patch.type) {
+    case NavigateChild:
+    case NavigateParent:
+    case NavigateSibling:
+      return true;
+    default:
+      return false;
+  }
+};
+const getNavigationIndex = patch => {
+  switch (patch.type) {
+    case NavigateChild:
+    case NavigateSibling:
+      return patch.index;
+    default:
+      return 0;
+  }
+};
+const appendNavigationPatch = (patches, type, index) => {
+  const previousPatch = patches.at(-1);
+  if (!previousPatch) {
+    patches.push(type === NavigateParent ? {
+      type
+    } : {
+      index,
+      type
+    });
+    return;
+  }
+  if (previousPatch.type === MultiNavigation) {
+    previousPatch.navigations.push(type, index);
+    return;
+  }
+  if (isNavigationPatch(previousPatch)) {
+    patches[patches.length - 1] = {
+      navigations: [previousPatch.type, getNavigationIndex(previousPatch), type, index],
+      type: MultiNavigation
+    };
+    return;
+  }
+  patches.push(type === NavigateParent ? {
+    type
+  } : {
+    index,
+    type
+  });
+};
+
 const compareNodes = (oldNode, newNode) => {
   // Check if node type changed - return null to signal incompatible nodes
   // (caller should handle this with a Replace operation)
@@ -2039,14 +1698,11 @@ const compareNodes = (oldNode, newNode) => {
   }
   const patches = [];
   // Handle reference nodes - special handling for uid changes
-  if (oldNode.type === Reference) {
-    if (oldNode.uid !== newNode.uid) {
-      patches.push({
-        type: SetReferenceNodeUid,
-        uid: newNode.uid
-      });
-    }
-    return patches;
+  if (oldNode.type === Reference && oldNode.uid !== newNode.uid) {
+    patches.push({
+      type: SetReferenceNodeUid,
+      uid: newNode.uid
+    });
   }
   // Handle text nodes
   if (oldNode.type === Text && newNode.type === Text) {
@@ -2059,8 +1715,8 @@ const compareNodes = (oldNode, newNode) => {
     return patches;
   }
   // Compare attributes
-  const oldKeys = getKeys(oldNode);
-  const newKeys = getKeys(newNode);
+  const oldKeys = getKeys(oldNode).filter(key => oldNode.type !== Reference || key !== 'uid');
+  const newKeys = getKeys(newNode).filter(key => newNode.type !== Reference || key !== 'uid');
   // Check for attribute changes
   for (const key of newKeys) {
     if (oldNode[key] !== newNode[key]) {
@@ -2084,34 +1740,31 @@ const compareNodes = (oldNode, newNode) => {
 };
 
 const treeToArray = node => {
-  const result = [node.node];
-  for (const child of node.children) {
-    result.push(...treeToArray(child));
+  const result = [];
+  const stack = [node];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    result.push(current.node);
+    for (let i = current.children.length - 1; i >= 0; i--) {
+      stack.push(current.children[i]);
+    }
   }
   return result;
 };
 
 const navigateToChild = (patches, currentChildIndex, index) => {
   if (currentChildIndex === -1) {
-    patches.push({
-      type: NavigateChild,
-      index
-    });
+    appendNavigationPatch(patches, NavigateChild, index);
     return index;
   }
   if (currentChildIndex !== index) {
-    patches.push({
-      type: NavigateSibling,
-      index
-    });
+    appendNavigationPatch(patches, NavigateSibling, index);
   }
   return index;
 };
 const navigateToParent = (patches, currentChildIndex) => {
   if (currentChildIndex >= 0) {
-    patches.push({
-      type: NavigateParent
-    });
+    appendNavigationPatch(patches, NavigateParent, 0);
   }
   return -1;
 };
@@ -2127,6 +1780,29 @@ const replaceTree = (newNode, patches) => {
     nodes: treeToArray(newNode)
   });
 };
+const appendPatch = (patches, patch) => {
+  switch (patch.type) {
+    case MultiNavigation:
+      for (let i = 0; i < patch.navigations.length; i += 2) {
+        appendNavigationPatch(patches, patch.navigations[i], patch.navigations[i + 1]);
+      }
+      return;
+    case NavigateChild:
+    case NavigateSibling:
+      appendNavigationPatch(patches, patch.type, patch.index);
+      return;
+    case NavigateParent:
+      appendNavigationPatch(patches, patch.type, 0);
+      return;
+    default:
+      patches.push(patch);
+  }
+};
+const appendPatches = (patches, newPatches) => {
+  for (const patch of newPatches) {
+    appendPatch(patches, patch);
+  }
+};
 const diffExistingChild = (oldNode, newNode, patches, currentChildIndex, index) => {
   const nodePatches = compareNodes(oldNode.node, newNode.node);
   if (nodePatches === null) {
@@ -2135,16 +1811,16 @@ const diffExistingChild = (oldNode, newNode, patches, currentChildIndex, index)
     return nextChildIndex;
   }
   const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
-  if (nodePatches.length === 0 && !hasChildrenToCompare) {
+  const childPatches = [];
+  if (hasChildrenToCompare) {
+    diffChildren(oldNode.children, newNode.children, childPatches);
+  }
+  if (nodePatches.length === 0 && childPatches.length === 0) {
     return currentChildIndex;
   }
   const nextChildIndex = navigateToChild(patches, currentChildIndex, index);
-  if (nodePatches.length > 0) {
-    patches.push(...nodePatches);
-  }
-  if (hasChildrenToCompare) {
-    diffChildren(oldNode.children, newNode.children, patches);
-  }
+  patches.push(...nodePatches);
+  appendPatches(patches, childPatches);
   return nextChildIndex;
 };
 const diffRootNode = (oldNode, newNode, patches) => {
@@ -2200,7 +1876,7 @@ const diffTrees = (oldTree, newTree, patches, path) => {
 const removeTrailingNavigationPatches = patches => {
   while (patches.length > 0) {
     const patch = patches.at(-1);
-    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
+    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling && patch.type !== MultiNavigation) {
       break;
     }
     patches.pop();
@@ -2219,6 +1895,246 @@ const diffTree = (oldNodes, newNodes) => {
   return removeTrailingNavigationPatches(patches);
 };
 
+const Empty = 0;
+const FocusPorts = 9000;
+
+const getKeyBindings = () => {
+  return [{
+    command: 'Ports.focusNext',
+    key: DownArrow,
+    when: FocusPorts
+  }, {
+    command: 'Ports.focusPrevious',
+    key: UpArrow,
+    when: FocusPorts
+  }, {
+    command: 'Ports.focusFirst',
+    key: Home,
+    when: FocusPorts
+  }, {
+    command: 'Ports.focusLast',
+    key: End,
+    when: FocusPorts
+  }, {
+    command: 'Ports.startAddPort',
+    key: KeyA,
+    when: FocusPorts
+  }, {
+    command: 'Ports.startAddPort',
+    key: KeyA | Shift,
+    when: FocusPorts
+  }, {
+    command: 'Ports.openFocusedAddress',
+    key: Enter,
+    when: FocusPorts
+  }, {
+    command: 'Ports.toggleFocusedPort',
+    key: Space,
+    when: FocusPorts
+  }, {
+    command: 'Ports.removeFocusedPort',
+    key: Delete,
+    when: FocusPorts
+  }, {
+    command: 'Ports.removeFocusedPort',
+    key: Backspace,
+    when: FocusPorts
+  }];
+};
+
+const handleBlur = state => {
+  return {
+    ...state,
+    focused: false,
+    focusedIndex: -1
+  };
+};
+
+const handleClickAt = (state, clientY, name) => {
+  const {
+    deltaY,
+    headerHeight,
+    itemHeight,
+    minLineY,
+    ports,
+    y
+  } = state;
+  if (name.startsWith('port-address-') || name.startsWith('port-status-')) {
+    const port = Number(name.slice(name.lastIndexOf('-') + 1));
+    const index = ports.findIndex(item => item.port === port);
+    return index === -1 ? state : focusIndex(state, index);
+  }
+  const relativeY = clientY - y - headerHeight;
+  const index = minLineY + Math.floor((relativeY + deltaY % itemHeight) / itemHeight);
+  if (relativeY < 0 || index < 0 || index >= ports.length) {
+    return state;
+  }
+  return focusIndex(state, index);
+};
+
+const SchemeRegex = /^[a-z][a-z\d+.-]*:\/\//i;
+const getAddressUrl = address => {
+  return SchemeRegex.test(address) ? address : `http://${address}`;
+};
+
+const openAddress = async (state, portNumber) => {
+  const {
+    ports
+  } = state;
+  const port = ports.find(item => item.port === portNumber);
+  if (!port || !port.forwardedAddress) {
+    return state;
+  }
+  await openUri(getAddressUrl(port.forwardedAddress));
+  return state;
+};
+
+const togglePortActive = (state, portNumber) => {
+  const {
+    ports
+  } = state;
+  return {
+    ...state,
+    ports: ports.map(item => {
+      if (item.port !== portNumber) {
+        return item;
+      }
+      return {
+        ...item,
+        active: !item.active
+      };
+    })
+  };
+};
+
+const parsePort = name => {
+  return Number(name.slice(name.lastIndexOf('-') + 1));
+};
+const handleClick = async (state, clientY, name) => {
+  const {
+    ports
+  } = state;
+  if (name.startsWith('port-address-')) {
+    const portNumber = parsePort(name);
+    const index = ports.findIndex(item => item.port === portNumber);
+    const focused = index === -1 ? state : focusIndex(state, index);
+    return openAddress(focused, portNumber);
+  }
+  if (name.startsWith('port-status-')) {
+    const portNumber = parsePort(name);
+    const index = ports.findIndex(item => item.port === portNumber);
+    const focused = index === -1 ? state : focusIndex(state, index);
+    return togglePortActive(focused, portNumber);
+  }
+  return handleClickAt(state, clientY, name);
+};
+
+const handleFocus = state => {
+  return {
+    ...state,
+    focused: true
+  };
+};
+
+const PageScrollMultiplier = 16;
+const handleWheel = (state, deltaMode, deltaY) => {
+  const {
+    deltaY: oldDeltaY
+  } = state;
+  const multiplier = deltaMode === 0 ? 1 : PageScrollMultiplier;
+  return setDeltaY(state, oldDeltaY + deltaY * multiplier);
+};
+
+const requests = new Map();
+const loadContent = async (state, workspaceUri = '') => {
+  const {
+    uid
+  } = state;
+  const request = {};
+  requests.set(uid, request);
+  try {
+    const ports = workspaceUri ? await invoke('Application.executeForView', uid, 'PortProvider.getPorts', workspaceUri) : [];
+    if (requests.get(uid) !== request) {
+      return get(uid).newState;
+    }
+    return setPorts(state, ports);
+  } finally {
+    if (requests.get(uid) === request) {
+      requests.delete(uid);
+    }
+  }
+};
+
+const openFocusedAddress = async state => {
+  const {
+    editing,
+    focusedIndex,
+    ports
+  } = state;
+  const selected = ports[focusedIndex];
+  if (editing || !selected) {
+    return state;
+  }
+  return openAddress(state, selected.port);
+};
+
+const removePort = (state, portNumber) => {
+  const {
+    focusedIndex: oldFocusedIndex,
+    ports: oldPorts
+  } = state;
+  const ports = oldPorts.filter(item => item.port !== portNumber);
+  const focusedIndex = Math.min(oldFocusedIndex, ports.length - 1);
+  return recalculateVirtualList({
+    ...state,
+    focusedIndex,
+    ports
+  });
+};
+
+const removeFocusedPort = state => {
+  const {
+    editing,
+    focusedIndex,
+    ports
+  } = state;
+  const selected = ports[focusedIndex];
+  if (editing || !selected) {
+    return state;
+  }
+  return removePort(state, selected.port);
+};
+
+const getCss = state => {
+  const {
+    deltaY,
+    footerHeight,
+    headerHeight,
+    itemHeight
+  } = state;
+  const relativeY = -(deltaY % itemHeight);
+  return `.Ports {
+  grid-template-rows: minmax(0, 1fr) ${footerHeight}px;
+}
+
+.PortsTable {
+  grid-template-rows: ${headerHeight}px minmax(0, 1fr);
+}
+
+.PortsTableBody > .PortsTableRow:first-child {
+  margin-top: ${relativeY}px;
+}
+
+.PortsTableRow {
+  height: ${itemHeight}px;
+}
+`;
+};
+
+const renderCss = (oldState, newState) => {
+  return [SetCss, newState.uid, getCss(newState)];
+};
+
 const Alert = 'alert';
 const Cell = 'cell';
 const ColumnHeader = 'columnheader';
@@ -2253,33 +2169,11 @@ const HandleAddPortKeyDown = 2;
 const HandleBlur = 3;
 const HandleCancelAddPort = 4;
 const HandleClick = 5;
-const HandleKeyDown = 6;
+const HandleFocus = 6;
 const HandleStartAddPort = 7;
 const HandleSubmitAddPort = 8;
 const HandleWheel = 9;
 
-const addButton = {
-  childCount: 1,
-  className: AddPortButton,
-  onClick: HandleStartAddPort,
-  type: Button
-};
-const addButtonDom = [addButton, text('Add Port')];
-const cancelButton = {
-  childCount: 1,
-  className: 'CancelAddPortButton',
-  onClick: HandleCancelAddPort,
-  type: Button
-};
-const footer = {
-  childCount: 1,
-  className: PortsFooter,
-  type: Div
-};
-const footerContent = {
-  childCount: 1,
-  type: Div
-};
 const errorMessage = {
   childCount: 1,
   className: AddPortError,
@@ -2292,6 +2186,13 @@ const getErrorDom = addPortError => {
   }
   return [errorMessage, text(addPortError)];
 };
+
+const cancelButton = {
+  childCount: 1,
+  className: 'CancelAddPortButton',
+  onClick: HandleCancelAddPort,
+  type: Button
+};
 const getEditor = state => {
   const {
     addPortError,
@@ -2319,6 +2220,23 @@ const getEditor = state => {
     type: Button
   }, text('Add'), cancelButton, text('Cancel'), ...getErrorDom(addPortError)];
 };
+
+const addButton = {
+  childCount: 1,
+  className: AddPortButton,
+  onClick: HandleStartAddPort,
+  type: Button
+};
+const addButtonDom = [addButton, text('Add Port')];
+const footer = {
+  childCount: 1,
+  className: PortsFooter,
+  type: Div
+};
+const footerContent = {
+  childCount: 1,
+  type: Div
+};
 const getPortsFooterVirtualDom = state => {
   const {
     editing
@@ -2345,15 +2263,6 @@ const getPortsStatusVirtualDom = (active, port) => {
   }, text(active ? '●' : '○')];
 };
 
-const Focusable = 0;
-const Unfocusable = -1;
-
-const statusCell = {
-  childCount: 1,
-  className: mergeClassNames(PortsTableCell, 'PortsStatusColumn'),
-  role: Cell,
-  type: Div
-};
 const getRowClassName = port => {
   let className = PortsTableRow;
   if (port.index % 2 === 1) {
@@ -2364,6 +2273,7 @@ const getRowClassName = port => {
   }
   return className;
 };
+
 const getTextCell = (value, className) => {
   return [{
     childCount: 1,
@@ -2373,6 +2283,16 @@ const getTextCell = (value, className) => {
     type: Div
   }, text(value)];
 };
+
+const Focusable = 0;
+const Unfocusable = -1;
+
+const statusCell = {
+  childCount: 1,
+  className: mergeClassNames(PortsTableCell, 'PortsStatusColumn'),
+  role: Cell,
+  type: Div
+};
 const getPortRowVirtualDom = port => {
   const portText = String(port.port);
   return [{
@@ -2398,12 +2318,18 @@ const getPortRowVirtualDom = port => {
 };
 
 const getVisiblePorts = state => {
+  const {
+    focusedIndex,
+    maxLineY,
+    minLineY,
+    ports
+  } = state;
   const visible = [];
-  for (let index = state.minLineY; index < state.maxLineY; index++) {
+  for (let index = minLineY; index < maxLineY; index++) {
     visible.push({
-      ...state.ports[index],
+      ...ports[index],
       index,
-      selected: index === state.focusedIndex
+      selected: index === focusedIndex
     });
   }
   return visible;
@@ -2473,7 +2399,7 @@ const getPortsVirtualDom = state => {
     className: mergeClassNames(Viewlet, Ports),
     onBlur: HandleBlur,
     onClick: HandleClick,
-    onKeyDown: HandleKeyDown,
+    onFocus: HandleFocus,
     onWheel: HandleWheel,
     role: Table,
     tabIndex: Focusable,
@@ -2485,6 +2411,13 @@ const renderDom = (oldState, newState) => {
   return [SetDom2, newState.uid, getPortsVirtualDom(newState)];
 };
 
+const renderFocusContext = (oldState, newState) => {
+  if (!newState.focused) {
+    return ['Viewlet.unsetAdditionalFocus', newState.uid, FocusPorts];
+  }
+  return [SetFocusContext, newState.uid, newState.editing ? Empty : FocusPorts];
+};
+
 const renderIncremental = (oldState, newState) => {
   const oldDom = getPortsVirtualDom(oldState);
   const newDom = getPortsVirtualDom(newState);
@@ -2497,6 +2430,8 @@ const getRenderer = diffType => {
       return renderCss;
     case RenderDom:
       return renderDom;
+    case RenderFocusContext:
+      return renderFocusContext;
     case RenderIncremental:
       return renderIncremental;
     default:
@@ -2529,9 +2464,8 @@ const renderEventListeners = () => {
     name: HandleClick,
     params: ['handleClick', ClientY, TargetName]
   }, {
-    name: HandleKeyDown,
-    params: ['handleKeyDown', Key],
-    preventDefault: true
+    name: HandleFocus,
+    params: ['handleFocus']
   }, {
     name: HandleStartAddPort,
     params: ['startAddPort']
@@ -2552,24 +2486,43 @@ const resize = (state, dimensions) => {
   });
 };
 
+const toggleFocusedPort = state => {
+  const {
+    editing,
+    focusedIndex,
+    ports
+  } = state;
+  const selected = ports[focusedIndex];
+  if (editing || !selected) {
+    return state;
+  }
+  return togglePortActive(state, selected.port);
+};
+
 const commandMap = {
   'Ports.addPort': wrapCommand(addPort),
   'Ports.cancelAddPort': wrapCommand(cancelAddPort),
   'Ports.create': create,
   'Ports.diff2': diff2,
   'Ports.dispose': dispose,
+  'Ports.focusFirst': wrapCommand(focusFirst),
   'Ports.focusIndex': wrapCommand(focusIndex),
+  'Ports.focusLast': wrapCommand(focusLast),
   'Ports.focusNext': wrapCommand(focusNext),
   'Ports.focusPrevious': wrapCommand(focusPrevious),
   'Ports.getCommandIds': getCommandIds,
+  'Ports.getKeyBindings': getKeyBindings,
   'Ports.handleAddPortInput': wrapCommand(handleAddPortInput),
   'Ports.handleAddPortKeyDown': wrapCommand(handleAddPortKeyDown),
   'Ports.handleBlur': wrapCommand(handleBlur),
   'Ports.handleClick': wrapCommand(handleClick),
-  'Ports.handleKeyDown': wrapCommand(handleKeyDown),
+  'Ports.handleFocus': wrapCommand(handleFocus),
   'Ports.handleWheel': wrapCommand(handleWheel),
+  'Ports.handleWorkspaceChange': wrapCommand(loadContent),
   'Ports.loadContent': wrapCommand(loadContent),
   'Ports.openAddress': wrapCommand(openAddress),
+  'Ports.openFocusedAddress': wrapCommand(openFocusedAddress),
+  'Ports.removeFocusedPort': wrapCommand(removeFocusedPort),
   'Ports.removePort': wrapCommand(removePort),
   'Ports.render2': render2,
   'Ports.renderEventListeners': renderEventListeners,
@@ -2579,6 +2532,7 @@ const commandMap = {
   'Ports.startAddPort': wrapCommand(startAddPort),
   'Ports.submitAddPort': wrapCommand(submitAddPort),
   'Ports.terminate': terminate,
+  'Ports.toggleFocusedPort': wrapCommand(toggleFocusedPort),
   'Ports.togglePortActive': wrapCommand(togglePortActive)
 };