@botiverse/raft-ui 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [0.16.0](https://github.com/botiverse/raft-design/compare/v0.15.0...v0.16.0) (2026-10-21)
+
+### Breaking Changes
+
+- **VirtualList** `items`: compared by reference. A row renders again only when its item, its index or one of the list's render props changes, so replace an item to change it instead of editing it in place. ([#658](https://github.com/botiverse/raft-design/pull/658))
+  - Why: keeping rows across range updates is what removes the per-frame re-render.
+  - Migrate: if your code edits an item object in place, or a render function reads mutable state outside the props, replace the item (a new object) when it changes.
+  - Docs: https://raft-design.botiverse.build/components/virtual-list/
+
+### Changed
+
+- **VirtualList**: scrolling no longer restyles or re-renders every mounted row. Rows that stay in range keep their elements; rows are mounted ahead of the view in batches and passed rows stay mounted for a while; only the rows that fill the view below are mounted; rows above the view are planned at the average measured height; resize passes where nothing changed size write nothing. ([#658](https://github.com/botiverse/raft-design/pull/658))
+  - Why: in a long chat timeline the list dropped more frames than a plain list while scrolling, most with a slow CPU: every row was restyled on almost every frame, and each range change re-rendered every row.
+  - Affects: with a 4x slower CPU, frames over 33ms scrolling 320 messages 9 → 0 down and 24 → 0 up, p95 33ms → 16.7ms; main-thread time per frame 10–17ms → 2–5ms. Up to 2.5 viewports of passed rows stay mounted; after a jump only the rows in view mount, as before.
+  - Docs: https://raft-design.botiverse.build/components/virtual-list/
+
 ## [0.15.0](https://github.com/botiverse/raft-design/compare/v0.14.0...v0.15.0) (2026-10-21)
 
 ### Design System

package/dist/index.d.mts

@@ -4387,11 +4387,17 @@ interface VirtualListProps<T> extends VirtualListNativeProps {
    * result is the row's `renderedItemWithCols`.
    */
   renderItemWithCols?: ((info: RenderItemWithColsInfo) => ReactNode) | undefined;
-  /** The items, one row each, in order. */
+  /**
+   * The items, one row each, in order. Treat them as immutable: a mounted row is rendered again only
+   * when its item (by reference) or its index changes, or a render prop does (`children`,
+   * `ItemComponent`, `getKey`, `renderCol`, `renderItemWithCols`, `itemResizable`, `ignoreItemResize`,
+   * `sessionId`, `virtual`), so replace an item's object to change its row.
+   */
   items?: readonly T[] | undefined;
   /**
-   * The shortest a row can be, in px, or less: the list mounts as many rows as fit in the view at this
-   * size, plus one, so a larger value leaves the end of the view empty.
+   * The shortest a row can be, in px, or less: to fill the view, rows not measured yet count at this
+   * size (after a jump, as many rows as fit at it, plus one), so a larger value leaves the end of the
+   * view empty. While the list scrolls, rows ahead of the view are mounted on top of these.
    */
   itemMinSize: number;
   /** The size, in px, counted for a row not measured yet (its offset and the spacer's height). */
@@ -4450,6 +4456,8 @@ interface VirtualListProps<T> extends VirtualListNativeProps {
   /**
    * Renders a row: called for each item in or near the view with the item, its index, the `domRef` to
    * put on the row's root element and the `style` to spread on it. Give the element the `key` it gets.
+   * A mounted row is rendered again only when its item, its index or a render prop changes (see
+   * `items`): read no other mutable state here.
    */
   children?: ((props: ItemRenderProps<T> & {
     key: string | undefined;

package/dist/index.mjs

@@ -13399,10 +13399,45 @@ function toLayoutUnit(value) {
 	return Math.round(value * 64) / 64;
 }
 //#endregion
+//#region src/components/virtual-list/utils/size-cache.ts
+/**
+* Records `size` as the measured size of row `key` in `offsets`, kept even when it equals the estimate
+* (an offset of 0), so the row counts as measured. Returns whether the cache changed.
+*/
+function recordMeasuredSize(offsets, key, size, itemEstimatedSize) {
+	const offset = size - itemEstimatedSize;
+	if (offsets.get(key) === offset) return false;
+	offsets.set(key, offset);
+	return true;
+}
+function createTypicalSizeCache() {
+	return {
+		version: -1,
+		itemEstimatedSize: NaN,
+		size: 0
+	};
+}
+/**
+* The size rows typically are: the mean size of the measured rows (`offsets`), or `itemEstimatedSize`
+* before any is measured, and at least `itemMinSize` (and 1). Kept in `cache` and computed again only
+* when `version` (bumped whenever `offsets` changes) or `itemEstimatedSize` changes.
+*/
+function getTypicalSize(cache, offsets, version, itemEstimatedSize, itemMinSize) {
+	if (cache.version !== version || cache.itemEstimatedSize !== itemEstimatedSize) {
+		let total = 0;
+		for (const offset of offsets.values()) total += offset;
+		cache.size = itemEstimatedSize + (offsets.size === 0 ? 0 : total / offsets.size);
+		cache.version = version;
+		cache.itemEstimatedSize = itemEstimatedSize;
+	}
+	return Math.max(cache.size, itemMinSize, 1);
+}
+//#endregion
 //#region src/components/virtual-list/utils/range.ts
 /**
 * The items to render: from the item at `scrollTop - paddingTop` through as many items as fit in
-* `listHeight` at their minimum size, plus one (no overscan). Empty (`0..-1`) before the list has been
+* `listHeight` at their minimum size, plus one (the overscan is `getOverscannedRange`'s). Empty
+* (`0..-1`) before the list has been
 * measured or when there are no items.
 */
 function getVerticalRange({ fenwickTree, scrollTop, listHeight, itemMinSize, itemCount, paddingTop }) {
@@ -13416,6 +13451,60 @@ function getVerticalRange({ fenwickTree, scrollTop, listHeight, itemMinSize, ite
 		endIndex: Math.min(startIndex + Math.ceil(listHeight / itemMinSize + 1), itemCount - 1)
 	};
 }
+const OVERSCAN_MIN = .25;
+const OVERSCAN_TARGET = 1;
+const OVERSCAN_MAX = 2.5;
+const OVERSCAN_BELOW = .25;
+/**
+* The last row needed to fill the view from row `startIndex` down: measured rows (`isMeasured`) count at
+* their size, the others at `itemMinSize`, so the view is filled whatever the unmeasured rows turn out
+* to be. `viewTop` is the view's top in item offsets.
+*/
+function getNeededEnd({ fenwickTree, startIndex, viewTop, listHeight, itemMinSize, itemCount, isMeasured }) {
+	const bottom = viewTop + listHeight;
+	let offset = fenwickTree.sum(startIndex);
+	let index = startIndex;
+	for (; index < itemCount - 1; ++index) {
+		offset += isMeasured(index) ? fenwickTree.get(index) : Math.max(itemMinSize, 1);
+		if (offset >= bottom) break;
+	}
+	return index;
+}
+/**
+* The items to render with overscan (see above), from the range in view (`view`, as `getVerticalRange`
+* gives it), the last row needed to fill the view (`neededEnd`) and the rendered range (`prev`).
+* `viewTop` is the view's top in item offsets, `moved` how far it moved since the last range update,
+* `movingUp` whether it last moved up, `settling` whether a jump is settling, `plannedSize` the size a
+* row is counted at when planning how many rows to mount above the view. With a `listHeight` of 0
+* (not laid out) there is no overscan: `view` is returned.
+*/
+function getOverscannedRange({ fenwickTree, view, prev, neededEnd, viewTop, moved, movingUp, settling, plannedSize, listHeight, itemCount }) {
+	const last = itemCount - 1;
+	const min = OVERSCAN_MIN * listHeight;
+	const target = OVERSCAN_TARGET * listHeight;
+	const max = OVERSCAN_MAX * listHeight;
+	const apart = view.startIndex > prev.endIndex || view.endIndex < prev.startIndex;
+	if (listHeight <= 0 || view.endIndex < view.startIndex || prev.endIndex < prev.startIndex || prev.endIndex > last || moved > max || apart && moved === 0) return view;
+	let ahead = view.startIndex;
+	for (let above = viewTop - fenwickTree.sum(ahead); ahead > 0 && above < target;) {
+		ahead -= 1;
+		above += plannedSize(ahead);
+	}
+	let startIndex = prev.startIndex;
+	if (prev.startIndex > view.startIndex) startIndex = movingUp && !settling ? ahead : view.startIndex;
+	else if (!settling) {
+		const above = viewTop - fenwickTree.sum(prev.startIndex);
+		if (movingUp ? above < min : above > max) startIndex = movingUp ? Math.min(ahead, prev.startIndex) : ahead;
+	}
+	const needed = Math.min(neededEnd, view.endIndex);
+	const neededBottom = fenwickTree.sum(needed + 1);
+	let endIndex = prev.endIndex;
+	if (prev.endIndex < needed || movingUp && !settling && fenwickTree.sum(prev.endIndex + 1) - neededBottom > max) endIndex = Math.min(Math.max(fenwickTree.getBound(neededBottom + OVERSCAN_BELOW * listHeight), needed), last);
+	return {
+		startIndex,
+		endIndex
+	};
+}
 /** The columns to render: the ones in `scrollLeft .. scrollLeft + listWidth`, plus one on each side. */
 function getHorizontalRange({ xFenwickTree, scrollLeft, listWidth, columnCount }) {
 	if (xFenwickTree === null || columnCount === 0) return {
@@ -13866,7 +13955,11 @@ function VirtualList(props) {
 	const keptKeysRef = useRef([]);
 	/** The key of the row that holds focus (`document.activeElement` is in it), tracked by focusin / focusout. */
 	const focusedKeyRef = useRef(null);
+	/** The measured rows' sizes, by key (see `utils/size-cache.ts`). */
 	const keyToHeightOffsetRef = useRef(/* @__PURE__ */ new Map());
+	/** Bumped whenever `keyToHeightOffsetRef` changes (see `getTypicalSize`). */
+	const measuredVersionRef = useRef(0);
+	const typicalSizeRef = useRef(createTypicalSizeCache());
 	const leadingMarginRef = useRef(0);
 	/**
 	* Where the first mounted row in flow starts in the visible-items element (its top margin there,
@@ -13877,6 +13970,8 @@ function VirtualList(props) {
 	const pendingScrollTaskTimeoutRef = useRef(null);
 	const pendingScrollTaskRafRef = useRef(null);
 	const wheelScrollingRef = useRef(false);
+	/** Whether the view last moved up (see `updateRange`). */
+	const scrollingUpRef = useRef(false);
 	/** Clears `wheelScrollingRef` in the next frame; this list's own, so other lists cannot replace it. */
 	const [runLatestInNextFrame] = useState(createLatestInNextFrame);
 	/** The wheel is only taken over (catchWheel) where the pointer is not coarse. */
@@ -13944,6 +14039,7 @@ function VirtualList(props) {
 		keptKeysRef.current = [];
 		focusedKeyRef.current = null;
 		keyToHeightOffsetRef.current.clear();
+		measuredVersionRef.current += 1;
 		leadingMarginRef.current = 0;
 		keyToIndexRef.current = /* @__PURE__ */ new Map();
 		rangeRef.current = {
@@ -14135,9 +14231,12 @@ function VirtualList(props) {
 			}
 		}
 	}, [virtual]);
+	/** The size rows typically are: the mean of the measured rows (`getTypicalSize`). */
+	const getTypicalRowSize = useEventCallback(() => getTypicalSize(typicalSizeRef.current, keyToHeightOffsetRef.current, measuredVersionRef.current, itemEstimatedSize, itemMinSize));
 	/**
 	* The viewport sync. The range starts at the item at `scrollTop + compensation - paddingTop` and
-	* holds as many items as fit at `itemMinSize`, plus one. Items holding the text selection, and the item
+	* holds as many items as fit at `itemMinSize`, plus one, and is overscanned in batches
+	* (`getOverscannedRange`). Items holding the text selection, and the item
 	* holding focus, stay
 	* mounted ("kept"). When the new range is inside the old one, only the layout styles are written;
 	* otherwise the items entering above the old start are recorded (`prependIndexes`) and the range is
@@ -14163,7 +14262,7 @@ function VirtualList(props) {
 			startIndex: range.verticalStartIndex,
 			endIndex: range.verticalEndIndex
 		};
-		const nextRange = getVerticalRange({
+		const viewRange = getVerticalRange({
 			fenwickTree,
 			scrollTop: effectiveScrollTop,
 			listHeight: viewport.listHeight,
@@ -14171,8 +14270,37 @@ function VirtualList(props) {
 			itemCount: items.length,
 			paddingTop: getRowsTop()
 		});
+		const overscanned = viewport.listHeight > 0;
+		if (scrollTop !== viewport.scrollTop) scrollingUpRef.current = scrollTop < viewport.scrollTop;
+		const nextRange = overscanned ? getOverscannedRange({
+			fenwickTree,
+			view: viewRange,
+			prev: prevRange,
+			neededEnd: getNeededEnd({
+				fenwickTree,
+				startIndex: viewRange.startIndex,
+				viewTop: effectiveScrollTop - getRowsTop(),
+				listHeight: viewport.listHeight,
+				itemMinSize,
+				itemCount: items.length,
+				isMeasured: (index) => {
+					const item = items[index];
+					return item !== void 0 && keyToHeightOffsetRef.current.has(getKey(item));
+				}
+			}),
+			viewTop: effectiveScrollTop - getRowsTop(),
+			moved: Math.abs(scrollTop - viewport.scrollTop),
+			movingUp: scrollingUpRef.current,
+			settling: pendingScrollTaskRef.current !== null,
+			plannedSize: (index) => {
+				const item = items[index];
+				return item !== void 0 && keyToHeightOffsetRef.current.has(getKey(item)) ? fenwickTree.get(index) : getTypicalRowSize();
+			},
+			listHeight: viewport.listHeight,
+			itemCount: items.length
+		}) : viewRange;
 		const rangeChanged = prevRange.startIndex !== nextRange.startIndex || prevRange.endIndex !== nextRange.endIndex;
-		const nextInsidePrev = nextRange.startIndex >= prevRange.startIndex && prevRange.endIndex >= nextRange.endIndex;
+		const nextInsidePrev = !overscanned && nextRange.startIndex >= prevRange.startIndex && prevRange.endIndex >= nextRange.endIndex;
 		const prevColRange = {
 			startIndex: range.horizontalStartIndex,
 			endIndex: range.horizontalEndIndex
@@ -14406,9 +14534,8 @@ function VirtualList(props) {
 		rows.forEach(({ key, index }, i) => {
 			const size = spans[i];
 			const previousSize = fenwickTree.get(index);
+			if (recordMeasuredSize(keyToHeightOffsetRef.current, key, size, itemEstimatedSize)) measuredVersionRef.current += 1;
 			if (size === previousSize) return;
-			if (size - itemEstimatedSize === 0) keyToHeightOffsetRef.current.delete(key);
-			else keyToHeightOffsetRef.current.set(key, size - itemEstimatedSize);
 			fenwickTree.add(index, size - previousSize);
 			resizes.push({
 				index,
@@ -14728,6 +14855,10 @@ function VirtualList(props) {
 		const isFirstOfKey = /* @__PURE__ */ new Map();
 		for (const { key, isFirst } of queue) if (!isFirstOfKey.has(key)) isFirstOfKey.set(key, isFirst);
 		const { resizes, leadingMarginDelta } = measureFlowRun();
+		if (resizes.length === 0 && leadingMarginDelta === 0 && pendingScrollTaskRef.current === null) {
+			clearItemResizeQueue();
+			return;
+		}
 		applyLayoutStyles(startIndex);
 		onContentResize?.();
 		const listEl = listElRef.current;
@@ -15001,7 +15132,45 @@ function VirtualList(props) {
 		ItemComponent,
 		renderItemChild
 	]);
-	const renderedVisibleItems = useMemo(() => visibleItems.map((item) => renderItem(item, false)), [renderItem, visibleItems]);
+	const renderInputs = useMemo(() => ({}), [
+		virtual,
+		getKey,
+		renderCol,
+		renderItemWithCols,
+		itemResizable,
+		sessionId,
+		ignoreItemResize,
+		ItemComponent,
+		renderItemChild
+	]);
+	const [flowElements] = useState(() => /* @__PURE__ */ new Map());
+	const renderedVisibleItems = useMemo(() => {
+		const nodes = visibleItems.map((item) => {
+			const key = getKey(item);
+			const index = keyToIndexRef.current.get(key);
+			const cached = flowElements.get(key);
+			if (cached !== void 0 && cached.item === item && cached.index === index && cached.inputs === renderInputs) return cached.node;
+			const node = renderItem(item, false);
+			flowElements.set(key, {
+				item,
+				index,
+				inputs: renderInputs,
+				node
+			});
+			return node;
+		});
+		if (flowElements.size > visibleItems.length) {
+			const inRange = new Set(visibleItems.map(getKey));
+			for (const key of flowElements.keys()) if (!inRange.has(key)) flowElements.delete(key);
+		}
+		return nodes;
+	}, [
+		renderItem,
+		visibleItems,
+		getKey,
+		flowElements,
+		renderInputs
+	]);
 	const renderedKeptBefore = useMemo(() => keptItemsBefore.map((item) => renderItem(item, true)), [renderItem, keptItemsBefore]);
 	const renderedKeptAfter = useMemo(() => keptItemsAfter.map((item) => renderItem(item, true)), [renderItem, keptItemsAfter]);
 	useNonVirtualContentResize(itemsElRef, onContentResize, !virtual);
@@ -15045,9 +15214,7 @@ function VirtualList(props) {
 				const { spans, firstStart } = measureRowSpans(visibleItemsEl, rows.map((row) => row.el));
 				if (rows[0] !== void 0 && keyToIndexRef.current.get(rows[0].key) === 0) leadingMarginRef.current = firstStart;
 				rows.forEach(({ key }, i) => {
-					const offset = spans[i] - itemEstimatedSize;
-					if (offset === 0) keyToHeightOffsetRef.current.delete(key);
-					else keyToHeightOffsetRef.current.set(key, offset);
+					if (recordMeasuredSize(keyToHeightOffsetRef.current, key, spans[i], itemEstimatedSize)) measuredVersionRef.current += 1;
 				});
 			}
 		}

package/dist/wip.mjs

@@ -27,17 +27,20 @@ function getSnapshot() {
 function usePhoneMedia() {
 	return useSyncExternalStore(subscribe, getSnapshot, () => false);
 }
+//#endregion
+//#region src/components/combobox-select/combobox-select.list-side.ts
+/** One option row (36px) and the list's 6px padding above and below. */
+const ROW = 36;
+const LIST_PADDING = 12;
+/** The gap between the field and the list (the positioner's sideOffset). */
+const SIDE_OFFSET = 4;
 /**
-* The side a phone's list opens on, chosen once when it opens so it never flips
-* while it is open (a phone's visual viewport keeps changing under it, as the
-* keyboard and the address bar come and go). Below, unless the room below is
-* short of the list and there is more above. `listHeight` is the list's full
-* height and `maxHeight` its cap (`listMaxHeight`), both in pixels.
+* Whether fewer than three rows of a phone's list fit between the field and the
+* bottom of the visual viewport. The list always opens below the field on a
+* phone and never flips; when this is true the field is scrolled up instead.
 */
-function preferredListSide(anchor, viewport, listHeight, maxHeight) {
-	const below = viewport.top + viewport.height - anchor.bottom;
-	const above = anchor.top - viewport.top;
-	return below >= Math.min(listHeight, maxHeight) || below >= above ? "bottom" : "top";
+function roomBelowIsShort(field, viewport, rows = 3) {
+	return viewport.top + viewport.height - field.bottom - SIDE_OFFSET < rows * ROW + LIST_PADDING;
 }
 //#endregion
 //#region src/components/combobox-select/combobox-select.options.ts
@@ -106,37 +109,41 @@ function renderSelectedChip({ record, index, tagLimit, strings, renderLabel, ren
 	}, optionKey(record.value));
 }
 /**
-* On a phone the list keeps the side it opened on: it never flips while it is
-* open, as the keyboard or the address bar change the visual viewport under it.
+* On a phone the list always opens below the field, between the field and the
+* keyboard, as a native autocomplete does, and never flips: which side has more
+* room depends on whether the keyboard happens to be up, so choosing a side made
+* the same field open up one time and down the next.
 */
 const PHONE_LIST_COLLISION = {
 	side: "none",
 	align: "shift",
 	fallbackAxisSide: "none"
 };
-/** A CSS length in pixels, as the document resolves it (rem, vh, calc()). */
-function resolveLength(doc, length) {
-	const probe = doc.createElement("div");
-	probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;width:0";
-	probe.style.height = length;
-	doc.body.append(probe);
-	const height = probe.getBoundingClientRect().height;
-	probe.remove();
-	return height;
-}
-/** The side the phone's list opens on, from the room around the field and the list's cap. */
-function measureListSide(anchor, groups, maxHeight) {
-	const view = anchor?.ownerDocument.defaultView;
-	if (!anchor || !view) return "bottom";
+/**
+* Keeps room for the list below the field on a phone: when fewer than three
+* rows fit between the field and the bottom of the visual viewport (the
+* keyboard's top edge while it is up), scrolls the field up to the top of
+* what is visible instead of flipping the list above it.
+*/
+function keepRoomBelow(field) {
+	const view = field?.ownerDocument.defaultView;
+	if (!field || !view) return;
 	const visual = view.visualViewport;
-	const rows = groups.reduce((count, group) => count + group.items.length + (group.label == null ? 0 : 1), 0);
-	return preferredListSide(anchor.getBoundingClientRect(), visual ? {
+	const viewport = visual ? {
 		top: visual.offsetTop,
 		height: visual.height
 	} : {
 		top: 0,
 		height: view.innerHeight
-	}, rows * 36 + 12, resolveLength(anchor.ownerDocument, maxHeight));
+	};
+	if (roomBelowIsShort(field.getBoundingClientRect(), viewport)) {
+		if (!field.style.scrollMarginTop) field.style.scrollMarginTop = "2.5rem";
+		field.scrollIntoView({
+			block: "start",
+			inline: "nearest",
+			behavior: "instant"
+		});
+	}
 }
 /** Options-driven composition. The stable compound Combobox API stays unchanged. */
 function isItemEqualToValue(a, b) {
@@ -422,17 +429,27 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 	const valueChange = handleValueChange;
 	const listHeight = typeof listMaxHeight === "number" ? `${listMaxHeight}px` : listMaxHeight;
 	const fieldRef = useRef(null);
-	const [listSide, setListSide] = useState("bottom");
-	const groups = normalized.groups;
+	const [phoneOpen, setPhoneOpen] = useState(false);
 	const handleOpenChange = useCallback((next, details) => {
 		onOpenChange?.(next, details);
-		if (next && phone && !details.isCanceled) setListSide(measureListSide(fieldRef.current, groups, listHeight ?? "16rem"));
-	}, [
-		onOpenChange,
-		phone,
-		groups,
-		listHeight
-	]);
+		if (phone && !details.isCanceled) setPhoneOpen(next);
+	}, [onOpenChange, phone]);
+	useEffect(() => {
+		if (!phone || !phoneOpen) return;
+		const field = fieldRef.current;
+		const visual = field?.ownerDocument.defaultView?.visualViewport;
+		let frame = 0;
+		const check = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => keepRoomBelow(field));
+		};
+		check();
+		visual?.addEventListener("resize", check);
+		return () => {
+			cancelAnimationFrame(frame);
+			visual?.removeEventListener("resize", check);
+		};
+	}, [phone, phoneOpen]);
 	const popupPropsStyle = popupProps?.style;
 	const popupStyle = useMemo(() => {
 		if (listHeight === void 0) return popupPropsStyle;
@@ -473,7 +490,7 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 				align: "start",
 				collisionPadding: 8,
 				...phone ? {
-					side: listSide,
+					side: "bottom",
 					collisionAvoidance: PHONE_LIST_COLLISION
 				} : null,
 				...positionerProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",
@@ -86,6 +86,7 @@
     "react-dom": "^19"
   },
   "scripts": {
+    "bench:virtual-list": "node bench/virtual-list/run.mjs",
     "build:tokens": "node scripts/build-tokens.mjs",
     "build": "vp pack",
     "check": "vp check",