gesso-core 0.4.2 → 0.5.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { $ as prepareInputSurface, $a as UiNodeType, $i as isTypographyRole, $n as offsetForVerticalMove, $r as isMinMaxTrack, $t as DEFAULT_FONT_FAMILY, A as accumulatedOffsetTo, Aa as writeDeclaredProperty, Ai as hasThemeExtension, An as linkOf, Ar as statesEqual, At as ELLIPSIS, B as parseFlexDirection, Ba as UiFocusEvent, Bi as defaultSpacing, Bn as isMultiline, Br as transform, Bt as drawText, C as describeLength, Ca as findEnvironmentKey, Ci as unknownContainerSize, Cn as isNodeInert, Cr as propertyValuesEqualByName, Ct as paragraphGeometry, D as formatNumber, Da as clearOverrideProperty, Di as withContrast, Dn as clearLinkHover, Dr as isUiRole, Dt as CharacterCountTextMeasurer, E as formatExplanation, Ea as DirtyNodeSet, Ei as themesEqual, En as resolveCursor, Er as UI_SEMANTIC_STATES, Et as wordRangeIn, F as constraintsEqual, Fa as visualState, Fi as contrastRatio, Fn as EDITOR_PROP, Fr as inputsEqual, Ft as isPrintable, G as MainAxisAlignment, Ga as UiPinchEvent, Gi as shadowsEqual, Gn as isVideoSurface, Gr as gradientsEqual, Gt as spanOf, H as sizeGridTracks, Ha as UiInputEvent, Hi as spacingEqual, Hn as nextCaretToggle, Hr as transformsEqual, Ht as layoutTextLines, I as tightenConstraints, Ia as visualStatesEqual, Ii as highContrastColors, In as caretVisibleAt, Ir as paintValuesEqual, It as EditableLayout, J as parseMainAxisAlignment, Ja as UiTextChangeEvent, Ji as boxShadowsEqual, Jn as lineIndexAtY, Jr as validateGradient, Jt as textRunDecorations, K as parseAlignContent, Ka as UiPointerEvent, Ki as boxShadow, Kn as videoFrameSize, Kr as linearGradient, Kt as textMeasureRequest, L as MAX_MEASURES_PER_CHILD, La as MOUSE_POINTER, Li as raiseContrast, Ln as editorFor, Lr as pathValuesEqual, Lt as applyCanvasTextStyle, M as LayoutRecord, Ma as UiVisualState, Mi as themeExtension, Mn as setLinkHover, Mr as validateStates, Mt as proportionalFontMetrics, N as Constraints, Na as defaultVisualState, Ni as themeExtensionsEqual, Nn as CARET_BLINK_MS, Nr as UI_SUBGRID_AXES, Nt as commandForKey, O as labelNode, Oa as overrideSources, Oi as withDensity, On as hasTextLinks, Or as isUiSemanticState, Ot as ParagraphTextMeasurer, P as clampSize, Pa as hasVisualState, Pi as withThemeExtension, Pn as CARET_WIDTH, Pr as validateSubgrid, Pt as detectEditingPlatform, Q as pointerDeviceOf, Qa as wheelDeltaYOf, Qi as defaultTypography, Qn as offsetAtX, Qr as isFrLength, Qt as registerFontStack, R as isLayoutProtocol, Ra as UiBeforeInputEvent, Ri as relativeLuminance, Rn as editorOf, Rr as UiTransforms, Rt as buildFontString, S as SCROLLBAR_LINGER_MS, Sa as createEnvironmentKey, Si as containerBands, Sn as isNodeHitTestable, Sr as propertyIsInherited, St as offsetAtPointIn, T as formatConstraints, Ta as UiNode, Ti as lightTheme, Tn as isNodeTabStop, Tr as UI_ROLES, Tt as selectionRectsIn, U as AlignContent, Ua as UiKeyboardEvent, Ui as spacingSteps, Un as syncEditorValue, Ur as MAX_GRADIENT_STOPS, Ut as runCanvasStyleInto, V as placeGridItems, Va as UiGestureEvent, Vi as scaleSpacing, Vn as isReadOnly, Vr as transformIsIdentity, Vt as fillTextRects, W as CrossAxisAlignment, Wa as UiPasteEvent, Wi as defaultShadows, Wn as resolveColorValue, Wr as gradientPaint, Wt as runFontString, X as UiPlatformAdapter, Xa as UiWheelEvent, Xi as isShapeName, Xn as lineLimit, Xr as fr, Xt as clearFontStacks, Y as CanvasPlatformSurface, Ya as UiWheelDeltaMode, Yi as defaultShapes, Yn as lineIndexForOffset, Yr as auto, Yt as bumpFontStack, Z as capturePointer, Za as noKeyModifiers, Zi as shapesEqual, Zn as offsetAtPoint, Zr as isAutoLength, Zt as fontStackFor, _ as LABEL_PADDING_X, _a as colorsEqual, _i as insetsEqual, _n as selectableTextNodes, _r as findPropertyDefinition, _t as scrollbarThumb, a as PaintPictureCache, aa as spanAtOffset, ai as UiBorderRadiuses, an as createPaintState, ar as nextGraphemeEnd, at as UiWheelController, b as LayoutEngine, ba as rgb8, bi as UiContainerSizeSource, bn as setSelectionRange, br as inheritedPropertyNames, bt as UiInputDispatcher, c as EMPTY_RECORDING, ca as textSpansEqual, ci as borderRadiusEqual, cn as normalizeVerticalAlign, cr as previousWordStart, ct as UiPointerController, d as tracePathData, da as darkColors, di as normalizeBorderRadius, dn as TEXT_MATCHES_PROP, dr as resolveNumber, dt as SCROLLBAR_HOVER_ZONE, ea as typographyEqual, ei as isPercentLength, en as DEFAULT_FONT_SIZE, eo as DirtyFlags, er as selectionRects, et as touchActionFor, f as ScaledImageCache, fa as lightColors, fi as uniformBorderRadius, fn as clearMatchRanges, fr as resolveProperty, ft as SCROLLBAR_INSET, g as paintsAfterChildren, ga as colorValuesEqual, gi as UiInsetRegistry, gn as clearSelectionRange, gr as closestPropertyName, gt as scrollRange, h as hasDecorationPhase, ha as colorToRgba, hi as UiEnvironmentKeys, hn as TEXT_SELECTION_PROP, hr as UiGraph, ht as scrollLeaderOf, i as traceRoundedRect, ia as resolvedSpansOf, ii as resolveLength, in as computeObjectFitRect, ir as lineStartAt, it as UiPinchRecognizer, j as contentOffset, ja as writeOverrideProperty, ji as noThemeExtensions, jn as linkRunAtPointIn, jr as validateRole, jt as layoutParagraph, k as withOverrideSource, ka as resetOverrideWarnings, ki as defineThemeExtension, kn as linkHoverOf, kr as normalizeStates, kt as spannedRunsFor, l as PaintRecorder, la as textStylesEqual, li as borderRadiusIsZero, ln as resolvePaintState, lr as wordRangeAt, lt as UiFocusManager, m as decorationRect, ma as colorToHex, mi as propertyValuesEqual, mn as setMatchRanges, mr as resolveString, mt as SCROLLBAR_THICKNESS, n as createCanvasSurface, na as editableSpansOf, ni as percent, nn as DEFAULT_TEXT_COLOR, nr as graphemeBoundaries, nt as UiTouchScroller, o as paintPictures, oa as spannedTextOf, oi as borderRadius, on as isPaintVisible, or as nextWordEnd, ot as isScrollContainer, p as decorationColor, pa as UiBasicColors, pi as defineProperty, pn as matchRangesOf, pr as resolvePropertyByName, pt as SCROLLBAR_MIN_THUMB, q as parseCrossAxisAlignment, qa as UiSelectionChangeEvent, qi as boxShadowArraysEqual, qn as caretRectFor, qr as radialGradient, qt as textRunBackgrounds, r as Canvas2DRenderer, ra as flattenTextSpans, ri as repeat, rn as colorToCss, rr as lineEndAt, rt as UiGestureRecognizer, s as PaintTarget, sa as textContentOf, si as borderRadiusCorners, sn as normalizeTextAlign, sr as previousGraphemeStart, st as UiKeyboardController, t as CanvasSurface, ta as defaultTextStyle, ti as minmax, tn as DEFAULT_FONT_WEIGHT, to as UiBinding, tr as EditableTextModel, tt as UiEditingController, u as replayPaint, ua as colorsEqualPalette, ui as borderRadiusValuesEqual, un as DEFAULT_LINE_HEIGHT_FACTOR, ur as resolveBoolean, ut as UiHitTester, v as drawOverlayShapes, va as normalizeColor, vi as noInsets, vn as selectableTextOf, vr as getPropertyNames, vt as scrollbarThumbs, w as describeOverrides, wa as UiEnvironment, wi as darkTheme, wn as isNodeSelectable, wr as UiProperties, wt as paragraphGeometryFrom, x as SCROLLBAR_FADE_MS, xa as rgba, xi as bandOf, xn as isNodeFocusable, xr as propertyEffects, xt as hasDrawnText, y as labelOrigin, ya as parseColor, yi as observeViewportInsets, yn as selectionRangeOf, yr as inheritedPropertyFlags, yt as scrollbarZoneAt, z as FlexDirection, za as UiEventType, zi as densityFactors, zn as isEditableNode, zr as parseTransform, zt as createCanvasTextStyle } from "./CanvasSurface-BMOmE_dD.js";
+import { $ as pointerDeviceOf, $a as UiKeyboardEvent, $i as boxShadow, $n as caretRectFor, $r as radialGradient, $t as DEFAULT_FONT_SIZE, A as withOverrideSource, Aa as rgb8, Ai as darkTheme, An as linkRunAtPointIn, Ar as UiProperties, At as edgeField, B as FlexDirection, Ba as writeDeclaredProperty, Bi as withThemeExtension, Bn as isReadOnly, Br as validateSubgrid, Bt as fillTextRects, C as SCROLLBAR_LINGER_MS, Ca as UiBasicColors, Ci as insetsEqual, Cn as isNodeTabStop, Cr as findPropertyDefinition, Ct as offsetAtPointIn, D as formatExplanation, Da as colorsEqual, Di as bandOf, Dn as hasTextLinks, Dr as propertyEffects, Dt as wordRangeIn, E as formatConstraints, Ea as colorValuesEqual, Ei as UiContainerSizeSource, En as clearLinkHover, Er as inheritedPropertyNames, Et as selectionRectsIn, F as clampSize, Fa as UiNode, Fi as defineThemeExtension, Fn as caretVisibleAt, Fr as normalizeStates, Ft as EditableLayout, G as CrossAxisAlignment, Ga as visualState, Gi as densityFactors, Gn as videoFrameSize, Gr as parseTransform, Gt as textMeasureRequest, H as placeGridItems, Ha as UiVisualState, Hi as highContrastColors, Hn as syncEditorValue, Hr as paintValuesEqual, Ht as runCanvasStyleInto, I as constraintsEqual, Ia as DirtyNodeSet, Ii as hasThemeExtension, In as editorFor, Ir as statesEqual, It as applyCanvasTextStyle, J as parseCrossAxisAlignment, Ja as UiBeforeInputEvent, Ji as spacingEqual, Jn as spannedRunsFor, Jr as transformsEqual, Jt as bumpFontStack, K as MainAxisAlignment, Ka as visualStatesEqual, Ki as defaultSpacing, Kn as CharacterCountTextMeasurer, Kr as transform, Kt as textRunBackgrounds, L as tightenConstraints, La as clearOverrideProperty, Li as noThemeExtensions, Ln as editorOf, Lr as validateRole, Lt as buildFontString, M as contentOffset, Ma as createEnvironmentKey, Mi as themesEqual, Mn as CARET_BLINK_MS, Mr as UI_SEMANTIC_STATES, Mt as commandForKey, N as LayoutRecord, Na as findEnvironmentKey, Ni as withContrast, Nn as CARET_WIDTH, Nr as isUiRole, Nt as detectEditingPlatform, O as formatNumber, Oa as normalizeColor, Oi as containerBands, On as linkHoverOf, Or as propertyIsInherited, Ot as adjacentField, P as Constraints, Pa as UiEnvironment, Pi as withDensity, Pn as EDITOR_PROP, Pr as isUiSemanticState, Pt as isPrintable, Q as capturePointer, Qa as UiInputEvent, Qi as BOX_SHADOW_BLUR_REACH, Qn as DEFAULT_LINE_HEIGHT_FACTOR, Qr as linearGradient, Qt as DEFAULT_FONT_FAMILY, R as MAX_MEASURES_PER_CHILD, Ra as overrideSources, Ri as themeExtension, Rn as isEditableNode, Rr as validateStates, Rt as createCanvasTextStyle, S as SCROLLBAR_FADE_MS, Sa as lightColors, Si as UiInsetRegistry, Sn as isNodeSelectable, Sr as closestPropertyName, St as hasDrawnText, T as describeOverrides, Ta as colorToRgba, Ti as observeViewportInsets, Tn as resolveCursor, Tr as inheritedPropertyFlags, Tt as paragraphGeometryFrom, U as sizeGridTracks, Ua as defaultVisualState, Ui as raiseContrast, Un as resolveColorValue, Ur as pathValuesEqual, Ut as runFontString, V as parseFlexDirection, Va as writeOverrideProperty, Vi as contrastRatio, Vn as nextCaretToggle, Vr as inputsEqual, Vt as layoutTextLines, W as AlignContent, Wa as hasVisualState, Wi as relativeLuminance, Wn as isVideoSurface, Wr as UiTransforms, Wt as spanOf, X as CanvasPlatformSurface, Xa as UiFocusEvent, Xi as defaultShadows, Xn as layoutParagraph, Xr as gradientPaint, Xt as fontStackFor, Y as parseMainAxisAlignment, Ya as UiEventType, Yi as spacingSteps, Yn as ELLIPSIS, Yr as MAX_GRADIENT_STOPS, Yt as clearFontStacks, Z as UiPlatformAdapter, Za as UiGestureEvent, Zi as shadowsEqual, Zn as proportionalFontMetrics, Zr as gradientsEqual, Zt as registerFontStack, _ as LABEL_PADDING_X, _a as textContentOf, _i as normalizeBorderRadius, _n as selectionRangeOf, _r as resolveNumber, _t as scrollRange, a as PaintPictureCache, aa as isShapeName, ai as isMinMaxTrack, an as isPaintVisible, ao as UiWheelDeltaMode, ar as offsetForVerticalMove, at as UiPinchRecognizer, b as snapScroll, ba as colorsEqualPalette, bi as propertyValuesEqual, bn as isNodeHitTestable, br as resolveString, bt as scrollbarZoneAt, c as EMPTY_RECORDING, ca as isTypographyRole, ci as percent, cn as resolvePaintState, co as wheelDeltaYOf, cr as graphemeBoundaries, ct as UiKeyboardController, d as tracePathData, da as editableSpansOf, di as UiBorderRadiuses, dn as matchRangesOf, do as UiBinding, dr as nextGraphemeEnd, dt as UiHitTester, ea as boxShadowArraysEqual, ei as validateGradient, en as DEFAULT_FONT_WEIGHT, eo as UiPasteEvent, er as lineIndexAtY, et as prepareInputSurface, f as ScaledImageCache, fa as flattenTextSpans, fi as borderRadius, fn as setMatchRanges, fr as nextWordEnd, ft as SCROLLBAR_HOVER_ZONE, g as paintsAfterChildren, ga as spannedTextOf, gi as borderRadiusValuesEqual, gn as selectableTextOf, gr as resolveBoolean, gt as scrollLeaderOf, h as hasDecorationPhase, ha as spanAtOffset, hi as borderRadiusIsZero, hn as selectableTextNodes, hr as wordRangeAt, ht as SCROLLBAR_THICKNESS, i as traceRoundedRect, ia as defaultShapes, ii as isFrLength, in as createPaintState, io as UiTextChangeEvent, ir as offsetAtX, it as UiGestureRecognizer, j as accumulatedOffsetTo, ja as rgba, ji as lightTheme, jn as setLinkHover, jr as UI_ROLES, jt as editingGroupOf, k as labelNode, ka as parseColor, ki as unknownContainerSize, kn as linkOf, kr as propertyValuesEqualByName, kt as comparePositions, l as PaintRecorder, la as typographyEqual, li as repeat, ln as TEXT_MATCHES_PROP, lo as UiNodeType, lr as lineEndAt, lt as UiPointerController, m as decorationRect, ma as resolvedSpansOf, mi as borderRadiusEqual, mn as clearSelectionRange, mr as previousWordStart, mt as SCROLLBAR_MIN_THUMB, n as createCanvasSurface, na as boxShadowReach, ni as fr, nn as colorToCss, no as UiPointerEvent, nr as lineLimit, nt as UiEditingController, o as paintPictures, oa as shapesEqual, oi as isPercentLength, on as normalizeTextAlign, oo as UiWheelEvent, or as selectionRects, ot as UiWheelController, p as decorationColor, pa as hiddenRangesOf, pi as borderRadiusCorners, pn as TEXT_SELECTION_PROP, pr as previousGraphemeStart, pt as SCROLLBAR_INSET, q as parseAlignContent, qa as MOUSE_POINTER, qi as scaleSpacing, qn as ParagraphTextMeasurer, qr as transformIsIdentity, qt as textRunDecorations, r as Canvas2DRenderer, ra as boxShadowsEqual, ri as isAutoLength, rn as computeObjectFitRect, ro as UiSelectionChangeEvent, rr as offsetAtPoint, rt as UiTouchScroller, s as PaintTarget, sa as defaultTypography, si as minmax, sn as normalizeVerticalAlign, so as noKeyModifiers, sr as EditableTextModel, st as isScrollContainer, t as CanvasSurface, ta as boxShadowRadius, ti as auto, tn as DEFAULT_TEXT_COLOR, to as UiPinchEvent, tr as lineIndexForOffset, tt as touchActionFor, u as replayPaint, ua as defaultTextStyle, ui as resolveLength, un as clearMatchRanges, uo as DirtyFlags, ur as lineStartAt, ut as UiFocusManager, v as drawOverlayShapes, va as textSpansEqual, vi as uniformBorderRadius, vn as setSelectionRange, vr as resolveProperty, vt as scrollbarThumb, w as describeLength, wa as colorToHex, wi as noInsets, wn as isPressable, wr as getPropertyNames, wt as paragraphGeometry, x as LayoutEngine, xa as darkColors, xi as UiEnvironmentKeys, xn as isNodeInert, xr as UiGraph, xt as UiInputDispatcher, y as labelOrigin, ya as textStylesEqual, yi as defineProperty, yn as isNodeFocusable, yr as resolvePropertyByName, yt as scrollbarThumbs, z as isLayoutProtocol, za as resetOverrideWarnings, zi as themeExtensionsEqual, zn as isMultiline, zr as UI_SUBGRID_AXES, zt as drawText } from "./CanvasSurface-Dok8FuyX.js";
 import { BehaviorSubject, EMPTY, Subject, combineLatest, distinctUntilChanged, isObservable as isObservable$1, map, of } from "rxjs";
 //#region src/animation/UiEasing.ts
 /** Progress equals time. What a spinner and a sweep want. */
@@ -836,11 +836,12 @@ var UiSharedElements = class {
 	* But it must not disappear *yet*. A claim happens during
 	* reconciliation, and the arriving node has no box until the frame
 	* lays out — so yielding here leaves a window in which neither
-	* element is drawn. For a transform morph that window is closed
-	* within the same frame; for a geometry morph, which cannot write a
-	* box after layout has run, it is a whole frame long, and a whole
-	* frame with neither the old card nor the new one is a flash of the
-	* page behind them. It was exactly that visible.
+	* element is drawn. The window closes within the frame now, for a
+	* geometry morph as for a transform one, but only because the
+	* arriving element takes its place in that frame's layout pass; when
+	* a geometry morph's box waited for the next frame, a whole frame
+	* with neither the old card nor the new one was a flash of the page
+	* behind them, and it was exactly that visible.
 	*
 	* So the caller yields the previous holder at the moment it actually
 	* takes its place. Until then both are on screen, in the same
@@ -1199,7 +1200,7 @@ const PRESS_ONLY = Object.freeze({
 	hover: false,
 	press: true
 });
-const kind$4 = defineModifier({
+const kind$5 = defineModifier({
 	name: "interactive",
 	attach(host, options) {
 		let hovered = false;
@@ -1246,15 +1247,15 @@ const kind$4 = defineModifier({
 });
 /** Hover and press. */
 function interactive(options = BOTH) {
-	return kind$4(options);
+	return kind$5(options);
 }
 /** Hover only. */
 function hoverable() {
-	return kind$4(HOVER_ONLY);
+	return kind$5(HOVER_ONLY);
 }
 /** Press only. */
 function pressable() {
-	return kind$4(PRESS_ONLY);
+	return kind$5(PRESS_ONLY);
 }
 /**
 * What every Button carries. One shared value, so `sameArgs` matches it
@@ -1263,7 +1264,7 @@ function pressable() {
 * that genuinely differ do detach and re-attach it, losing the hover and
 * press state with them, which is the reason this one is a constant.
 */
-const BUTTON_INTERACTION = kind$4(BOTH);
+const BUTTON_INTERACTION = kind$5(BOTH);
 function sameStates(a, b) {
 	if (a.size !== b.size) return false;
 	for (const state of b) if (!a.has(state)) return false;
@@ -1756,26 +1757,26 @@ var Host = class {
 		}
 		this.own(layout.onLayout(this.node, listener));
 	}
-	environment(key) {
+	environment(key, of = this.node) {
 		const environment = this.services.environment;
 		if (environment === void 0) return key.defaultValue;
-		return environment.read(this.node, key);
+		return environment.read(of, key);
 	}
-	onEnvironment(listener) {
+	onEnvironment(listener, of = this.node) {
 		const environment = this.services.environment;
 		if (environment === void 0) {
 			warnMissing(this.name, "follow its environment", "environment");
 			return;
 		}
-		this.own(environment.onChange(this.node, listener));
+		this.own(environment.onChange(of, listener));
 	}
-	focus() {
+	focus(options) {
 		const focus = this.services.focus;
 		if (focus === void 0) {
 			warnMissing(this.name, "move focus", "focus");
 			return;
 		}
-		focus.focus(this.node);
+		focus.focus(this.node, options);
 	}
 	isFocused() {
 		return this.services.focus?.isFocused(this.node) ?? false;
@@ -2497,15 +2498,30 @@ var UiGraphBuilder = class {
 	* instance is unchanged and torn down when a property stops
 	* being reactive.
 	*/
+	/**
+	* The properties each node's element declared last time, so a render
+	* that stops declaring one takes it off the node.
+	*
+	* Only bindings used to be torn down that way. A plain value stayed:
+	* a conditional that swapped `<scrollview padding={20}>` for a
+	* `<scrollview>` reused the node and kept the padding, and an editor
+	* switching from its source view back to its document came back
+	* twenty pixels narrower. Only what the builder declared is tracked,
+	* so what modifiers and the runtime write on a node is left alone.
+	*/
+	declaredProps = /* @__PURE__ */ new WeakMap();
 	reconcileProps(node, props, parent) {
 		this.reconcileTransitions(node, props[TRANSITION_PROP]);
 		const present = /* @__PURE__ */ new Set();
 		const presentEvents = /* @__PURE__ */ new Set();
 		let declaredModifiers;
+		let declaredRef;
+		let hasRef = false;
 		for (const [property, value] of Object.entries(props)) {
 			if (property === KEY_PROP) continue;
 			if (property === REF_PROP) {
-				this.reconcileRef(node, value);
+				declaredRef = value;
+				hasRef = true;
 				continue;
 			}
 			if (property === MODIFIERS_PROP) {
@@ -2532,7 +2548,13 @@ var UiGraphBuilder = class {
 		}
 		for (const binding of this.graph.getBindingsForNode(node)) if (!present.has(binding.property)) this.graph.unbind(binding);
 		for (const binding of this.graph.getEventBindingsForNode(node)) if (!presentEvents.has(binding.type)) this.graph.unbindEvent(node, binding);
+		const previous = this.declaredProps.get(node);
+		if (previous !== void 0) {
+			for (const property of previous) if (!present.has(property)) this.graph.removeNodeProperty(node, property, propertyEffects(property));
+		}
+		this.declaredProps.set(node, present);
 		if (node.environment === null && parent?.environment != null) node.environment = this.graph.buildNodeEnvironment(node, parent);
+		if (hasRef) this.reconcileRef(node, declaredRef);
 		this.reconcileModifiers(node, declaredModifiers);
 	}
 	/**
@@ -3183,6 +3205,9 @@ function lazyList(axis, props, renderItem, grid) {
 * padding, and a layout that switched arms at 600 px would otherwise
 * switch at 600 px of border box and lay itself out in 560.
 *
+* What a subtree builds from the size it reports is laid out on the
+* same frame, before anything paints; see `UiModifierHost.onLayout`.
+*
 * `Responsive` attaches this for you. Attach it by hand when the
 * source has to be reachable somewhere the helper's own children are
 * not, and put the same object on the node's `containerSize` prop.
@@ -3218,9 +3243,15 @@ const sizeContainer = defineModifier({
 * about it and the thing a media query cannot do: a card in a sidebar
 * asks how wide the card is, not how wide the window is.
 *
-* Nothing is written until the node has been laid out once, so the
-* first frame uses the element's own values. Give the element the
-* narrowest band's values as its declared props if that matters.
+* Nothing is written until the node has been laid out once, but the
+* first frame is already right: the runtime lays out again before it
+* paints when a layout listener changes layout (see
+* `UiModifierHost.onLayout`), so the frame a node first appears on,
+* and the frame a resize crosses a width on, are drawn with the band's
+* values. The element's own values are what that first pass measures
+* with; give it the narrowest band's values as its declared props so a
+* layout nothing settles (a headless one, a spec driving layout by
+* hand) starts from the right band.
 */
 const breakpoint = defineModifier({
 	name: "breakpoint",
@@ -3273,7 +3304,9 @@ const breakpoint = defineModifier({
 * The first build happens before any layout, when the size is zero, so
 * `build` must return something sensible for a container whose room is
 * not yet known. Zero picks the narrowest arm, which is the right
-* guess and also what a phone gets.
+* guess and also what a phone gets. It is never what a wider container
+* paints: the first layout reports the real size, the arm for it is
+* built, and the runtime lays that out before the frame paints.
 */
 function Responsive(props, build) {
 	const { at, as = "column", modifiers, ...rest } = props;
@@ -4375,6 +4408,12 @@ const MODIFIER_KEYS = /* @__PURE__ */ new Set([
 * Without that rule an application with a `n` for "new note" becomes an
 * application you cannot type the letter n into, which is the failure
 * every home-grown key handler eventually ships.
+*
+* ## Pressing is not a shortcut
+*
+* A bare Enter or Space is skipped while a button or link has focus,
+* unless the shortcut is that control's own: the control is focused, so
+* it has the key first, as it would in a browser.
 */
 var UiShortcutRegistry = class {
 	bindings = [];
@@ -4390,10 +4429,11 @@ var UiShortcutRegistry = class {
 	/** Adds a shortcut. The returned function removes it again. */
 	register(shortcut) {
 		const steps = parseShortcut(shortcut.keys);
+		this.platform ??= detectEditingPlatform();
 		const binding = {
 			...shortcut,
 			steps,
-			display: formatShortcut(steps)
+			display: formatShortcut(steps, this.platform)
 		};
 		this.bindings.push(binding);
 		return () => {
@@ -4434,6 +4474,10 @@ var UiShortcutRegistry = class {
 	*/
 	handleKey(key, modifiers, focused) {
 		if (MODIFIER_KEYS.has(key)) return false;
+		if (focused !== null && isTypingInto(focused) && this.isEditingKey(key, modifiers)) {
+			this.pending = [];
+			return false;
+		}
 		const step = stepFor(key, modifiers);
 		const at = this.now();
 		if (this.pending.length > 0 && at - this.pendingAt > this.chordTimeout) this.pending = [];
@@ -4456,6 +4500,13 @@ var UiShortcutRegistry = class {
 		this.pending = [];
 		return false;
 	}
+	platform = null;
+	/** Whether a field would take this key as an edit of its own, rather than as text or as Enter. */
+	isEditingKey(key, modifiers) {
+		this.platform ??= detectEditingPlatform();
+		const command = commandForKey(key, modifiers, this.platform, false);
+		return command !== null && command.kind !== "newline" && command.kind !== "insert";
+	}
 	/** Forgets a half-typed chord, for a route change or a lost focus. */
 	reset() {
 		this.pending = [];
@@ -4463,17 +4514,20 @@ var UiShortcutRegistry = class {
 	/**
 	* Whether a binding would fire for a key going to `focused`.
 	*
-	* Three things take a shortcut out: its scope does not contain the
-	* focused node, its own `when` says no, and, for a shortcut with no
-	* modifier at all, the focused node is somewhere text is being
-	* typed. The last is the rule that keeps a single-letter shortcut
-	* from making a text field unusable.
+	* Four things take a shortcut out: its scope does not contain the
+	* focused node, its own `when` says no, for a shortcut with no
+	* modifier at all the focused node is somewhere text is being typed,
+	* and for a bare Enter or Space the focused node is a button that
+	* isn't the shortcut's own. The third keeps a single-letter shortcut
+	* from making a text field unusable; the fourth keeps a list's Enter
+	* from opening a row when the button focused inside it was pressed.
 	*/
 	isLive(binding, focused) {
 		const scope = binding.scope ?? null;
 		if (scope !== null && (focused === null || !containsNode(scope, focused))) return false;
 		if (binding.when !== void 0 && !binding.when()) return false;
 		if (focused !== null && isTypingInto(focused) && binding.steps.every((step) => isBare(step))) return false;
+		if (focused !== null && scope !== focused && isPressing(binding.steps) && isPressable(focused)) return false;
 		return true;
 	}
 };
@@ -4508,6 +4562,11 @@ function isTypingInto(node) {
 	for (let current = node; current !== null; current = current.parent) if (current.type === "editable-text" && !isNodeInert(current)) return true;
 	return false;
 }
+/** A bare Enter or Space on its own: what presses a focused button. */
+function isPressing(steps) {
+	const [step] = steps;
+	return steps.length === 1 && step !== void 0 && isBare(step) && !step.shift && (step.key === "Enter" || step.key === " ");
+}
 /** A press with no modifier at all: an ordinary character. */
 function isBare(step) {
 	return !step.mod && !step.ctrl && !step.meta && !step.alt;
@@ -4569,20 +4628,47 @@ function parseStep(text) {
 * `'Mod+K'` and `'Mod+k'` are the same shortcut, and the browser
 * reports whichever the shift state produced. Anything longer than one
 * character is a named key (`'Enter'`, `'ArrowUp'`) and keeps its case.
+*
+* The space bar is the exception that has to be spelled out. The
+* platform reports it as `' '`, which a shortcut string cannot contain
+* because space separates the steps of a chord, so the name `Space`
+* stands for it. Before this, `'Space'` was kept as the literal name and
+* never matched a press: the board's keyboard drag in the issue tracker
+* was the first thing to need it.
 */
 function normalizeKey(key) {
+	const named = NAMED_KEYS[key.toLowerCase()];
+	if (named !== void 0) return named;
 	return key.length === 1 ? key.toLowerCase() : key;
 }
+/** Key names a shortcut string uses for keys it cannot spell. */
+const NAMED_KEYS = {
+	space: " ",
+	spacebar: " "
+};
 /** Whether the presses so far could still complete this shortcut. */
 function matchesPrefix(steps, sequence) {
 	if (sequence.length > steps.length) return false;
 	return sequence.every((step, index) => sameStep(steps[index], step));
 }
 function sameStep(want, got) {
-	if (want.key !== got.key || want.shift !== got.shift || want.alt !== got.alt) return false;
+	if (want.key !== got.key) return false;
+	if (isSymbol(want.key)) {
+		if (isBare(want) && got.alt && !got.meta) return true;
+	} else if (want.shift !== got.shift) return false;
+	if (want.alt !== got.alt) return false;
 	if (want.mod) return got.ctrl || got.meta;
 	return want.ctrl === got.ctrl && want.meta === got.meta;
 }
+/**
+* Whether a key is a character that isn't a letter: punctuation, a digit
+* or a symbol, which different layouts put under different keys and
+* reach with or without Shift. A letter keeps its Shift, which is what
+* tells `Shift+L` from `l`.
+*/
+function isSymbol(key) {
+	return key.length === 1 && key !== " " && key.toLowerCase() === key.toUpperCase();
+}
 /** The press the person actually made. */
 function stepFor(key, modifiers) {
 	return {
@@ -4595,24 +4681,123 @@ function stepFor(key, modifiers) {
 	};
 }
 /**
-* The shortcut as a palette should print it.
+* The shortcut as a palette should print it, the way the platform
+* writes its own: `⇧⌘K` on a Mac, where `Mod` is Command, and
+* `Ctrl+Shift+K` elsewhere, where it is Control. The platform is the
+* one the editing keys follow (`detectEditingPlatform`, from the user
+* agent, which a worker can read too).
+*/
+function formatShortcut(steps, platform = detectEditingPlatform()) {
+	return shortcutKeyCaps(steps, platform).map((caps) => caps.join(platform === "mac" ? "" : "+")).join(" ");
+}
+/**
+* The keys of each press, one string per key, for a help sheet that
+* draws them as key caps: `[['⇧', '⌘', 'K']]` on a Mac and
+* `[['Ctrl', 'Shift', 'K']]` elsewhere, and a chord is one array per
+* press. They are the pieces `formatShortcut` joins, so a sheet and a
+* palette print the same keys.
+*/
+function shortcutKeyCaps(steps, platform = detectEditingPlatform()) {
+	return steps.map((step) => [...modifierNames(step, platform, MAC_CAPS, OTHER_CAPS), keyName(step.key)]);
+}
+/**
+* The shortcut as a screen reader should say it: `Command Shift K` on a
+* Mac and `Control Shift K` elsewhere, `Down arrow`, `Question mark`,
+* and `g then d` for a chord.
 *
-* `Mod` is printed as `Ctrl`, not as a platform glyph: the render
-* worker cannot see the platform, and a wrong symbol is worse than a
-* plain word. An application that knows what it is running on can
-* format the `steps` itself.
+* A key cap's `⌘` or `↓` is read out inconsistently or not at all, and
+* punctuation is skipped at a screen reader's default verbosity, so a
+* row that shows caps takes this as its name.
 */
-function formatShortcut(steps) {
-	return steps.map(formatStep).join(" ");
+function describeShortcut(steps, platform = detectEditingPlatform()) {
+	return steps.map((step) => {
+		const modifiers = modifierNames(step, platform, MAC_WORDS, OTHER_WORDS);
+		return [...modifiers, spokenKey(step.key, modifiers.length > 0)].join(" ");
+	}).join(" then ");
 }
-function formatStep(step) {
-	const parts = [];
-	if (step.mod || step.ctrl) parts.push("Ctrl");
-	if (step.meta) parts.push("Meta");
-	if (step.alt) parts.push("Alt");
-	if (step.shift) parts.push("Shift");
-	parts.push(step.key.length === 1 ? step.key.toUpperCase() : step.key);
-	return parts.join("+");
+/** In the order the Mac's menus print them: Control, Option, Shift, Command. */
+const MAC_CAPS = {
+	ctrl: "⌃",
+	alt: "⌥",
+	shift: "⇧",
+	meta: "⌘"
+};
+const MAC_WORDS = {
+	ctrl: "Control",
+	alt: "Option",
+	shift: "Shift",
+	meta: "Command"
+};
+const OTHER_CAPS = {
+	ctrl: "Ctrl",
+	meta: "Meta",
+	alt: "Alt",
+	shift: "Shift"
+};
+const OTHER_WORDS = {
+	ctrl: "Control",
+	meta: "Meta",
+	alt: "Alt",
+	shift: "Shift"
+};
+/**
+* A press's modifiers, in the platform's order: Control, Option, Shift,
+* Command on a Mac, where `Mod` is Command; Control, Meta, Alt, Shift
+* elsewhere, where it is Control.
+*/
+function modifierNames(step, platform, mac, other) {
+	const names = [];
+	if (platform === "mac") {
+		if (step.ctrl) names.push(mac.ctrl);
+		if (step.alt) names.push(mac.alt);
+		if (step.shift) names.push(mac.shift);
+		if (step.mod || step.meta) names.push(mac.meta);
+	} else {
+		if (step.mod || step.ctrl) names.push(other.ctrl);
+		if (step.meta) names.push(other.meta);
+		if (step.alt) names.push(other.alt);
+		if (step.shift) names.push(other.shift);
+	}
+	return names;
+}
+/** The arrows as arrows, which every keyboard prints them as. */
+const KEY_NAMES = {
+	" ": "Space",
+	ArrowUp: "↑",
+	ArrowDown: "↓",
+	ArrowLeft: "←",
+	ArrowRight: "→"
+};
+function keyName(key) {
+	return KEY_NAMES[key] ?? (key.length === 1 ? key.toUpperCase() : key);
+}
+/** What a screen reader should say for a key it would read as a symbol, or skip. */
+const SPOKEN_KEYS = {
+	" ": "Space",
+	ArrowUp: "Up arrow",
+	ArrowDown: "Down arrow",
+	ArrowLeft: "Left arrow",
+	ArrowRight: "Right arrow",
+	PageUp: "Page up",
+	PageDown: "Page down",
+	"?": "Question mark",
+	"/": "Slash",
+	"\\": "Backslash",
+	".": "Period",
+	",": "Comma",
+	";": "Semicolon",
+	":": "Colon",
+	"'": "Apostrophe",
+	"`": "Backtick",
+	"[": "Left bracket",
+	"]": "Right bracket",
+	"-": "Minus",
+	"=": "Equals",
+	"+": "Plus"
+};
+/** A letter as typed when it's pressed alone (`j`), and as its cap after a modifier (`Command K`). */
+function spokenKey(key, modified) {
+	return SPOKEN_KEYS[key] ?? (key.length === 1 && !modified ? key : keyName(key));
 }
 function defaultClock() {
 	return typeof performance !== "undefined" ? performance.now() : Date.now();
@@ -4656,6 +4841,8 @@ var UiDragSession = class {
 	zones = [];
 	current = null;
 	inside = null;
+	/** Every zone the point is in that would take the payload, winner or not. */
+	hovering = /* @__PURE__ */ new Set();
 	/** Registers a drop target. The returned function unregisters it. */
 	addZone(zone) {
 		this.zones.push(zone);
@@ -4719,6 +4906,7 @@ var UiDragSession = class {
 		}
 		const effect = zone.drop(state);
 		zone.leave();
+		this.unhover();
 		return {
 			node: zone.node,
 			effect
@@ -4729,6 +4917,12 @@ var UiDragSession = class {
 		this.inside?.leave();
 		this.inside = null;
 		this.current = null;
+		this.unhover();
+	}
+	/** Tells every zone the drag was hovering over that it no longer is. */
+	unhover() {
+		for (const zone of this.hovering) zone.hover?.(null);
+		this.hovering.clear();
 	}
 	/**
 	* Turns a shell's file-drop message into an ordinary drag.
@@ -4779,10 +4973,12 @@ var UiDragSession = class {
 		if (state === null) return;
 		let best = null;
 		let bestDepth = -1;
+		const containing = /* @__PURE__ */ new Set();
 		for (const zone of this.zones) {
 			if (!zone.accepts(state.payload)) continue;
 			const box = zone.boxOf();
 			if (box === null || !contains$1(box, state.x, state.y)) continue;
+			containing.add(zone);
 			const depth = depthOf(zone.node);
 			if (depth > bestDepth) {
 				best = zone;
@@ -4793,9 +4989,10 @@ var UiDragSession = class {
 			this.inside?.leave();
 			this.inside = best;
 			best?.enter(state);
-			return;
-		}
-		best?.over(state);
+		} else best?.over(state);
+		for (const zone of this.hovering) if (!containing.has(zone)) zone.hover?.(null);
+		for (const zone of containing) zone.hover?.(state);
+		this.hovering = containing;
 	}
 };
 function contains$1(box, x, y) {
@@ -5007,7 +5204,7 @@ function ringShapes(options) {
 * costs nothing here because the options of a focus ring do not
 * change while it is attached.
 */
-const kind$3 = defineModifier({
+const kind$4 = defineModifier({
 	name: "focusRing",
 	attach(host, options) {
 		const shapes = ringShapes(options);
@@ -5018,7 +5215,7 @@ const kind$3 = defineModifier({
 		host.onFocusChange(sync);
 	}
 });
-const DEFAULT_RING = kind$3(Object.freeze({}));
+const DEFAULT_RING = kind$4(Object.freeze({}));
 /**
 * The ring, with the theme's own colour and spacing.
 *
@@ -5029,7 +5226,7 @@ const DEFAULT_RING = kind$3(Object.freeze({}));
 * attachment.
 */
 function focusRing(options) {
-	return options === void 0 ? DEFAULT_RING : kind$3(options);
+	return options === void 0 ? DEFAULT_RING : kind$4(options);
 }
 /**
 * A border per edge, as paint rather than as layout.
@@ -5138,24 +5335,62 @@ function borderShapes(options) {
 //#endregion
 //#region src/modifiers/focus.ts
 /**
-* One shared instance, so the arguments keep their identity across
-* renders and the modifier is never detached and re-attached (which
-* would autofocus a second time).
+* Takes focus the first time the node is laid out.
+*
+* The one a dialog needs: an overlay that opens with the caret already
+* in its first field, without the component that opened it reaching
+* for a `ref` and a focus store.
+*
+* **Why the first layout and not the attach.** A modifier attaches
+* while its node is still being built, before the builder inserts it
+* into its parent, so at attach time the node has no parent and is not
+* under the focus manager's traversal root. `UiFocusManager.focus`
+* would accept it anyway (it asks whether the node is focusable, not
+* where it is), and the result would be a focused node that Tab cannot
+* reach and that no ancestor sees the focus event from. The first
+* layout is the first moment the node is demonstrably on screen, and
+* it is the same frame in every case that matters, because a node
+* mounted into a live tree is laid out on the frame that mounted it.
+*
+* It fires once. A node that is autofocused, loses focus to something
+* the person clicked, and is then laid out again does not steal the
+* focus back; that would make an autofocus a focus trap.
+*
+* A node that cannot take focus is left alone and no error is raised:
+* `focus()` refuses a node that is inert, not focusable, or outside an
+* active focus scope, which is exactly the set of cases where an
+* application would not want the focus moved either.
 */
-const AUTO_FOCUS = defineModifier({
+const kind$3 = defineModifier({
 	name: "autoFocus",
-	attach(host) {
+	attach(host, options) {
 		let done = false;
 		host.onLayout(() => {
 			if (done) return;
 			done = true;
-			host.focus();
+			host.focus(options);
 		});
 	}
-})(void 0);
-/** Takes focus the first time the node is laid out. */
-function autoFocus() {
-	return AUTO_FOCUS;
+});
+/**
+* One shared instance of each, so the arguments keep their identity
+* across renders and the modifier is never detached and re-attached
+* (which would autofocus a second time).
+*/
+const AUTO_FOCUS = kind$3({});
+const AUTO_FOCUS_IN_PLACE = kind$3({ preventScroll: true });
+/**
+* Takes focus the first time the node is laid out.
+*
+* The node is scrolled into view, as focus from code always is, once
+* the frame's layout has settled. Pass `{ preventScroll: true }` to
+* leave the page where it is, as `element.focus({ preventScroll: true })`
+* does: for a region focused when a page opens so a screen reader reads
+* it, where revealing it would scroll a tall region to a few pixels
+* short of its own top instead of leaving the page at its start.
+*/
+function autoFocus(options = {}) {
+	return options.preventScroll === true ? AUTO_FOCUS_IN_PLACE : AUTO_FOCUS;
 }
 //#endregion
 //#region src/modifiers/clickOutside.ts
@@ -5485,13 +5720,20 @@ var DropTarget = class {
 			x: state.x,
 			y: state.y
 		});
-		this.updateAutoScroll(state);
 	}
 	leave() {
 		for (const property of Object.keys(this.options.over ?? {})) this.host.clear(property);
-		this.stopScrolling();
 		this.options.onLeave?.();
 	}
+	/**
+	* Auto-scroll follows the point being inside this zone, not this zone
+	* winning the drop: a list covered in row zones is never the winner,
+	* and still has to scroll when a card is held at its edge.
+	*/
+	hover(state) {
+		if (state === null) this.stopScrolling();
+		else this.updateAutoScroll(state);
+	}
 	drop(state) {
 		return this.options.onDrop(state.payload, {
 			x: state.x,
@@ -6780,15 +7022,15 @@ var SharedElementController = class {
 	*
 	* Held rather than called on arrival: see `UiSharedElements.claim`.
 	* Between claiming a name and taking the departing element's place
-	* there is at least one layout, and for a geometry morph a whole
-	* frame — and hiding it up front makes that a frame with neither
-	* element on screen, which reads as a flash of the page behind them.
+	* there is at least one layout pass — and hiding it up front, on a
+	* frame painted between the two, would leave neither element on
+	* screen, which reads as a flash of the page behind them.
 	*/
 	yieldPrevious = null;
 	yielded = false;
 	/** Whether a morph is running, so `onMorph` is never told twice. */
 	morphing = false;
-	/** Set for the one frame a geometry morph spends being measured. */
+	/** Set between a geometry morph writing its first box and that box being laid out. */
 	geometryTarget = null;
 	constructor(host, args) {
 		this.host = host;
@@ -8294,6 +8536,40 @@ function onDeviceLost(listener) {
 		onDeviceLostListeners.delete(listener);
 	};
 }
+//#endregion
+//#region src/rendering/webgpu/WebGPUShader.ts
+/**
+* WGSL sources for the two WebGPU pipelines.
+*
+* Both draw one unit quad per instance. An instance carries the
+* rectangle it covers in absolute layout coordinates and the affine
+* transform that maps those coordinates to logical screen pixels, so
+* every instance under one node shares the node's transform and the
+* rectangle is honest — a scrollbar thumb sits where its geometry says.
+*
+* Clipping is two-layered. The rectangular part is a scissor set per
+* draw command. The rounded part is a **clip chain**: a storage buffer
+* of clipping boxes with corner radii, each holding its parent's index
+* and the inverse of its own transform. An instance names its
+* innermost rounded clip; the fragment shader carries the pixel back
+* into each clip's space up the chain and multiplies their coverages,
+* so every rounded ancestor applies.
+*
+* Edges are anti-aliased by coverage rather than cut by `discard`: a
+* pixel's alpha is scaled by how far its centre sits inside the shape,
+* in physical pixels. A box on integer coordinates is still crisp —
+* every pixel centre is half a pixel from its edge — and rounded
+* corners match the anti-aliased paths Canvas2D draws.
+*
+* A box shadow is a primitive too, drawn analytically: the coverage of
+* a Gaussian-blurred rounded rectangle is integrated in closed form
+* across one axis (an error function) and sampled along the other, as
+* in Evan Wallace's "Fast rounded rectangle shadows". It is exact for
+* square corners and within a fraction of a percent for round ones,
+* which is closer than browsers' own blur gets to a Gaussian.
+*/
+/** Mirrors `BOX_SHADOW_BLUR_REACH`: a shadow's quad reaches this many blur radii past its shape. */
+const SHADOW_REACH = BOX_SHADOW_BLUR_REACH;
 const SHARED = `
 // x: logical width, y: logical height, z: device pixel ratio.
 @group(0) @binding(0) var<uniform> uView: vec4f;
@@ -8438,6 +8714,86 @@ fn gradientColor(index: u32, local: vec2f) -> vec4f {
   return unpremultiply(previousColor);
 }
 
+// PrimitiveKind: 0 fill, 1 border, 2 shadow, 3 inset shadow.
+const KIND_BORDER = 1u;
+const KIND_SHADOW = 2u;
+const SHADOW_REACH = ${SHADOW_REACH};
+
+// Abramowitz and Stegun's approximation, to about 5e-4, for two values.
+fn erf2(x: vec2f) -> vec2f {
+  let s = sign(x);
+  let a = abs(x);
+  var t = 1.0 + (0.278393 + (0.230389 + 0.078108 * (a * a)) * a) * a;
+  t = t * t;
+  return s - s / (t * t);
+}
+
+fn gaussian(x: f32, sigma: f32) -> f32 {
+  return exp(-(x * x) / (2.0 * sigma * sigma)) / (2.5066283 * sigma);
+}
+
+// The blurred shape's coverage along x at one height y, both relative
+// to its centre: an error function across the row the rounded corner
+// leaves at that height.
+fn shadowRow(x: f32, y: f32, sigma: f32, corner: f32, halfSize: vec2f) -> f32 {
+  let delta = min(halfSize.y - corner - abs(y), 0.0);
+  let curved = halfSize.x - corner + sqrt(max(0.0, corner * corner - delta * delta));
+  let integral = 0.5 + 0.5 * erf2((x + vec2f(-curved, curved)) * (0.70710678 / sigma));
+  return integral.y - integral.x;
+}
+
+// Coverage at a point of a rounded rectangle blurred by a Gaussian of
+// the given standard deviation. The row integral is weighted by the
+// Gaussian over the three deviations either side that it reaches.
+fn blurredRoundedRect(point: vec2f, origin: vec2f, size: vec2f, radius: f32, sigma: f32, dpr: f32) -> f32 {
+  if (size.x <= 0.0 || size.y <= 0.0) {
+    return 0.0;
+  }
+  if (sigma * dpr < 0.25) {
+    // Under a quarter of a device pixel: the sharp shape, anti-aliased.
+    return coverage(roundedRectDistance(point, origin, size, radius), dpr);
+  }
+  let halfSize = size * 0.5;
+  let corner = min(radius, min(halfSize.x, halfSize.y));
+  let p = point - (origin + halfSize);
+  let low = p.y - halfSize.y;
+  let high = p.y + halfSize.y;
+  let first = clamp(-3.0 * sigma, low, high);
+  let last = clamp(3.0 * sigma, low, high);
+  let stride = (last - first) / 4.0;
+  var y = first + stride * 0.5;
+  var value = 0.0;
+  for (var i = 0; i < 4; i = i + 1) {
+    value = value + shadowRow(p.x, p.y - y, sigma, corner, halfSize) * gaussian(y, sigma) * stride;
+    y = y + stride;
+  }
+  return clamp(value, 0.0, 1.0);
+}
+
+// A shadow's alpha at a point of its quad; see the instance layout in
+// WebGPURenderData.ts for what each field holds.
+fn shadowAlpha(kind: u32, local: vec2f, size: vec2f, radius: f32, blur: f32, shadow: vec4f, dpr: f32) -> f32 {
+  let sigma = blur * 0.5;
+  let offset = shadow.xy;
+  let spread = shadow.z;
+  if (kind == KIND_SHADOW) {
+    // The quad is the blurred shape grown by the blur's reach; the box
+    // sits back by the offset and in by the spread, and hides it.
+    let reach = blur * SHADOW_REACH;
+    let shapeOrigin = vec2f(reach, reach);
+    let shapeSize = size - vec2f(reach, reach) * 2.0;
+    let boxOrigin = shapeOrigin - offset + vec2f(spread, spread);
+    let boxSize = shapeSize - vec2f(spread, spread) * 2.0;
+    let blurred = blurredRoundedRect(local, shapeOrigin, shapeSize, radius, sigma, dpr);
+    return blurred * (1.0 - coverage(roundedRectDistance(local, boxOrigin, boxSize, shadow.w), dpr));
+  }
+  // Inset: the quad is the box; everything but the blurred hole is shadow.
+  let holeOrigin = offset + vec2f(spread, spread);
+  let holeSize = size - vec2f(spread, spread) * 2.0;
+  let inside = coverage(roundedRectDistance(local, vec2f(0.0, 0.0), size, radius), dpr);
+  return inside * (1.0 - blurredRoundedRect(local, holeOrigin, holeSize, shadow.w, sigma, dpr));
+}
+
 struct VertexOutput {
   @builtin(position) position: vec4f,
   @location(0) localPos: vec2f,
@@ -8447,6 +8803,7 @@ struct VertexOutput {
   @location(4) @interpolate(flat) kind: u32,
   @location(5) @interpolate(flat) clipIndex: f32,
   @location(6) @interpolate(flat) gradientIndex: f32,
+  @location(7) @interpolate(flat) shadow: vec4f,
 };
 
 @vertex
@@ -8456,12 +8813,13 @@ fn vs(
   @location(2) instanceSize: vec2f,
   @location(3) instanceColor: vec4f,
   @location(4) radiusOpacityBorder: vec3f,
-  @location(5) instanceKind: u32,
+  @location(5) instanceKind: f32,
   @location(6) transformA: vec2f,
   @location(7) transformB: vec2f,
   @location(8) transformC: vec2f,
   @location(9) clipIndex: f32,
   @location(10) gradientIndex: f32,
+  @location(11) shadow: vec4f,
 ) -> VertexOutput {
   var out: VertexOutput;
   // The quad is inflated by one physical pixel on every side so the
@@ -8480,9 +8838,10 @@ fn vs(
   out.size = instanceSize;
   out.color = instanceColor;
   out.radiusOpacityBorder = radiusOpacityBorder;
-  out.kind = instanceKind;
+  out.kind = u32(instanceKind + 0.5);
   out.clipIndex = clipIndex;
   out.gradientIndex = gradientIndex;
+  out.shadow = shadow;
   return out;
 }
 
@@ -8492,7 +8851,17 @@ fn fs(in: VertexOutput) -> @location(0) vec4f {
   let dist = roundedRectDistance(in.localPos, vec2f(0.0, 0.0), in.size, in.radiusOpacityBorder.x);
 
   var shape = coverage(dist, dpr);
-  if (in.kind != 0u) {
+  if (in.kind >= KIND_SHADOW) {
+    shape = shadowAlpha(
+      in.kind,
+      in.localPos,
+      in.size,
+      in.radiusOpacityBorder.x,
+      in.radiusOpacityBorder.z,
+      in.shadow,
+      dpr
+    );
+  } else if (in.kind == KIND_BORDER) {
     // Border: the band between the outer edge and the inner edge inset
     // by borderWidth.
     let bw = max(in.radiusOpacityBorder.z, 0.0);
@@ -9319,14 +9688,25 @@ function createWebGPUSurface(host) {
 *   2  size.xy
 *   4  color.rgba
 *   8  radius, opacity, borderWidth
-*   11 kind               (u32: PrimitiveKind)
+*   11 kind               (PrimitiveKind, as a float)
 *   12 transform          3x2 affine, absolute layout → logical screen
 *   18 clipIndex          index into the clip chain, -1 for none
 *   19 gradientIndex      index into the frame's gradients, -1 for none
-*   20 (end)
-*/
-const INSTANCE_STRIDE_FLOATS = 20;
-const INSTANCE_STRIDE_BYTES = 80;
+*   20 shadow             offsetX, offsetY, spread, the other shape's radius
+*   24 (end)
+*
+* A shadow is two rounded rectangles, the blurred one and the box it
+* is cut by, and an instance describes the first. For an outer shadow
+* the rectangle is the blurred shape grown by the blur's reach
+* (`BOX_SHADOW_BLUR_REACH` × blur), `radius` its corners, `borderWidth`
+* the blur, and the box it must not show under is recovered from the
+* offset and spread, with the box's own radius last. An inset shadow's
+* rectangle is the box, and the hole it is cast from is the box moved
+* by the offset and shrunk by the spread, with the hole's radius last.
+* Every other instance writes zeros there.
+*/
+const INSTANCE_STRIDE_FLOATS = 24;
+const INSTANCE_STRIDE_BYTES = 96;
 /**
 * Textured instance layout (glyphs and images), in floats:
 *
@@ -9362,6 +9742,10 @@ const NO_CLIP_INDEX = -1;
 let PrimitiveKind = /* @__PURE__ */ function(PrimitiveKind) {
 	PrimitiveKind[PrimitiveKind["Fill"] = 0] = "Fill";
 	PrimitiveKind[PrimitiveKind["Border"] = 1] = "Border";
+	/** A `boxShadows` entry outside the box; see the instance layout. */
+	PrimitiveKind[PrimitiveKind["Shadow"] = 2] = "Shadow";
+	/** A `boxShadows` entry marked `inset`. */
+	PrimitiveKind[PrimitiveKind["InsetShadow"] = 3] = "InsetShadow";
 	return PrimitiveKind;
 }({});
 let CommandKind = /* @__PURE__ */ function(CommandKind) {
@@ -9435,7 +9819,7 @@ var FloatBuffer = class {
 		return this.data.slice(0, this.length);
 	}
 };
-const instanceScratch = new FloatBuffer(10240);
+const instanceScratch = new FloatBuffer(12288);
 const texturedScratch = new FloatBuffer(32768);
 const clipScratch = new FloatBuffer(1024);
 const gradientScratch = new FloatBuffer(768);
@@ -9488,7 +9872,7 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 	/** The nodes asking for `lift`, met on the walk and drawn after it. */
 	const liftedPass = [];
 	function closePrimitives() {
-		const end = instanceData.length / 20;
+		const end = instanceData.length / 24;
 		if (end > openStart) commands.push({
 			kind: 0,
 			start: openStart,
@@ -9498,7 +9882,7 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 		openStart = end;
 	}
 	function beginPrimitives(scissor) {
-		if (openStart === instanceData.length / 20) {
+		if (openStart === instanceData.length / 24) {
 			openScissor = scissor;
 			return;
 		}
@@ -9612,7 +9996,7 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 			return;
 		}
 		const sticky = rec.stickyOffsetX !== 0 || rec.stickyOffsetY !== 0;
-		if (state.cull !== null && !intersectsCull(state.cull, rec.x + rec.stickyOffsetX, rec.y + rec.stickyOffsetY, rec.width, rec.height)) return;
+		if (state.cull !== null && !intersectsCull(state.cull, rec.extentMinX + rec.stickyOffsetX, rec.extentMinY + rec.stickyOffsetY, rec.extentMaxX - rec.extentMinX, rec.extentMaxY - rec.extentMinY)) return;
 		const paint = resolvePaintState(node, paintScratch);
 		const effectiveOpacity = state.opacity * paint.opacity;
 		const baseCtm = sticky ? translateTransform(state.ctm, rec.stickyOffsetX, rec.stickyOffsetY) : state.ctm;
@@ -9637,6 +10021,10 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 		}
 		const contentScissor = nextClip;
 		const contentRounded = nextRounded;
+		if (paint.boxShadows.length > 0) {
+			beginPrimitives(ownScissor);
+			pushShadows(instanceData, rec, paint, effectiveOpacity, nodeCtm, ownRounded, false);
+		}
 		if (paint.backgroundColor !== void 0) {
 			const color = parseColor$1(paint.backgroundColor);
 			if (color !== void 0) {
@@ -9652,6 +10040,10 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 				pushInstance(instanceData, rec.x, rec.y, rec.width, rec.height, first, uniformBorderRadius(paint.borderRadius), effectiveOpacity, 0, 0, nodeCtm, ownRounded, index);
 			}
 		}
+		if (paint.boxShadows.length > 0) {
+			beginPrimitives(ownScissor);
+			pushShadows(instanceData, rec, paint, effectiveOpacity, nodeCtm, ownRounded, true);
+		}
 		const textureSource = paint.video !== void 0 && paint.video.frame !== null ? paint.video : paint.image;
 		if (textureSource !== void 0) {
 			const sourceSize = paint.video !== void 0 && paint.video.frame !== null ? videoFrameSize(paint.video) : {
@@ -9766,7 +10158,7 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 			state.rounded = nextRounded;
 			if (rec.clips && state.cull !== null) state.cull = pushCull(state.cull, rec);
 			if (paint.hasTransform || sticky) state.cull = null;
-			if (rec.scrollable) state.ctm = translateTransform(state.ctm, -rec.scrollX, -rec.scrollY);
+			if (rec.scrollable) state.ctm = translateTransform(state.ctm, -snapScroll(rec.scrollX, dpr), -snapScroll(rec.scrollY, dpr));
 			liftedFrom = liftedPass.length;
 			visitChildren(node, rec.paintOrder);
 			state.opacity = saved.opacity;
@@ -9821,9 +10213,10 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 				const model = text.editor;
 				const editable = new EditableLayout(model, contentBox, text, measurer);
 				pushTextRects(textRunBackgrounds(editable.lines, text));
-				if (model.focused && !model.collapsed) {
+				const spanned = text.textSelection;
+				if (spanned !== void 0 || model.focused && !model.collapsed) {
 					const selection = parseColor$1(text.selectionColor);
-					if (selection !== void 0) for (const box of editable.selectionBoxes()) pushContentRect(box, selection);
+					if (selection !== void 0) for (const box of editable.selectionBoxes(spanned)) pushContentRect(box, selection);
 				}
 				if (editable.placeholderLines.length > 0) pushTextRun(editable.placeholderLines, colorToCss(text.placeholderColor));
 				else {
@@ -9842,7 +10235,7 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 						}, underline);
 					}
 				}
-				if (model.focused && model.collapsed && caretVisibleAt(model, now)) {
+				if (spanned === void 0 && model.focused && model.collapsed && caretVisibleAt(model, now)) {
 					const caretColor = parseColor$1(text.caretColor);
 					if (caretColor !== void 0) {
 						const caret = editable.caretRect();
@@ -9976,7 +10369,7 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 	closePrimitives();
 	return {
 		instanceData: instanceData.take(),
-		instanceCount: instanceData.length / 20,
+		instanceCount: instanceData.length / 24,
 		texturedData: texturedData.take(),
 		texturedCount: texturedData.length / 16,
 		clipData: clipData.take(),
@@ -10024,8 +10417,8 @@ function pushScrollbars(out, rec, opacity, transform, rounded, now) {
 		pushInstance(out, x, y, width, height, color, 3, opacity, 0, 0, transform, rounded);
 	}
 }
-function pushInstance(out, x, y, width, height, color, radius, opacity, borderWidth, kind, transform, clip, gradient = -1) {
-	out.ensure(20);
+function pushInstance(out, x, y, width, height, color, radius, opacity, borderWidth, kind, transform, clip, gradient = -1, shadowX = 0, shadowY = 0, shadowSpread = 0, shadowRadius = 0) {
+	out.ensure(24);
 	const data = out.data;
 	const at = out.length;
 	data[at] = x;
@@ -10048,7 +10441,38 @@ function pushInstance(out, x, y, width, height, color, radius, opacity, borderWi
 	data[at + 17] = transform[5];
 	data[at + 18] = clip;
 	data[at + 19] = gradient;
-	out.length = at + 20;
+	data[at + 20] = shadowX;
+	data[at + 21] = shadowY;
+	data[at + 22] = shadowSpread;
+	data[at + 23] = shadowRadius;
+	out.length = at + 24;
+}
+/**
+* One instance per outer shadow, or per inset one, in the order
+* Canvas2D draws them: the last declared first, since CSS paints the
+* first shadow on top. The shader evaluates the blurred shape exactly
+* rather than sampling a blurred texture, so a shadow costs a quad.
+*/
+function pushShadows(out, rec, paint, opacity, transform, clip, inset) {
+	const shadows = paint.boxShadows;
+	const radius = borderRadiusIsZero(paint.borderRadius) ? 0 : uniformBorderRadius(paint.borderRadius);
+	for (let i = shadows.length - 1; i >= 0; i--) {
+		const shadow = shadows[i];
+		if (shadow.inset === true !== inset || shadow.color.a <= 0) continue;
+		const color = parseColor$1(shadow.color);
+		if (color === void 0) continue;
+		const blur = Math.max(0, shadow.blurRadius);
+		const spread = shadow.spreadRadius;
+		if (inset) {
+			pushInstance(out, rec.x, rec.y, rec.width, rec.height, color, radius, opacity, blur, 3, transform, clip, -1, shadow.offsetX, shadow.offsetY, spread, boxShadowRadius(radius, spread, true));
+			continue;
+		}
+		const width = rec.width + spread * 2;
+		const height = rec.height + spread * 2;
+		if (width <= 0 || height <= 0) continue;
+		const reach = blur * BOX_SHADOW_BLUR_REACH;
+		pushInstance(out, rec.x + shadow.offsetX - spread - reach, rec.y + shadow.offsetY - spread - reach, width + reach * 2, height + reach * 2, color, boxShadowRadius(radius, spread, false), opacity, blur, 2, transform, clip, -1, shadow.offsetX, shadow.offsetY, spread, radius);
+	}
 }
 /**
 * Writes one gradient record for a rectangle of the given size and
@@ -10503,7 +10927,7 @@ function quadVertexLayout() {
 /** Mirrors the float layout documented on INSTANCE_STRIDE_FLOATS. */
 function primitiveInstanceLayout() {
 	return {
-		arrayStride: 80,
+		arrayStride: 96,
 		stepMode: "instance",
 		attributes: [
 			{
@@ -10529,7 +10953,7 @@ function primitiveInstanceLayout() {
 			{
 				shaderLocation: 5,
 				offset: 44,
-				format: "uint32"
+				format: "float32"
 			},
 			{
 				shaderLocation: 6,
@@ -10555,6 +10979,11 @@ function primitiveInstanceLayout() {
 				shaderLocation: 10,
 				offset: 76,
 				format: "float32"
+			},
+			{
+				shaderLocation: 11,
+				offset: 80,
+				format: "float32x4"
 			}
 		]
 	};
@@ -11022,7 +11451,7 @@ var WebGPURenderer = class {
 		glyphPages.flush();
 		const uploadStart = this.hooks.onUploadStart !== void 0 || this.hooks.onUploadEnd !== void 0 ? performance.now() : 0;
 		if (list.instanceCount > 0) {
-			const buffer = this.ensureBuffer(this.instanceBuffer, list.instanceData.byteLength, 80);
+			const buffer = this.ensureBuffer(this.instanceBuffer, list.instanceData.byteLength, 96);
 			if (buffer !== this.instanceBuffer) {
 				this.instanceBuffer = buffer;
 				this.cachedInstanceData = null;
@@ -13470,7 +13899,7 @@ function markNow() {
 * frame is collected, so a node dirtied again while the frame
 * is being processed belongs to the next frame.
 */
-var UiFrame = class {
+var UiFrame = class UiFrame {
 	id;
 	time;
 	dirty;
@@ -13516,6 +13945,21 @@ var UiFrame = class {
 		for (const value of this.dirty.values()) if ((value & flags) !== 0) return true;
 		return false;
 	}
+	/**
+	* This frame and `later` as one: every node in either, with the
+	* flags it carried in both.
+	*
+	* What the phases after layout read when layout ran more than once
+	* in a frame (see `UiScheduler.recollect`): a node dirtied by a
+	* layout listener has to be re-meant and redrawn like any other
+	* node the frame changed.
+	*/
+	merged(later) {
+		if (later.isEmpty()) return this;
+		const dirty = new Map(this.dirty);
+		for (const [node, flags] of later.entries()) dirty.set(node, (dirty.get(node) ?? 0) | flags);
+		return new UiFrame(this.id, this.time, dirty);
+	}
 	get size() {
 		return this.dirty.size;
 	}
@@ -13652,6 +14096,32 @@ var UiScheduler = class {
 		this.handleFrame(time);
 	}
 	/**
+	* Takes what was dirtied since `frame` was collected into that same
+	* frame, rather than leaving it for the next one.
+	*
+	* For a phase that has to finish inside the frame what the frame
+	* started. A layout listener (a `breakpoint`, a `sizeContainer`)
+	* that writes padding after the boxes are final has made those boxes
+	* stale, and painting them would show the stale layout for one frame
+	* before the next corrects it. The runtime lays the writes out again
+	* from what this returns, before anything paints.
+	*
+	* The result holds only the newly dirtied nodes, with `frame`'s id
+	* and time: it is more of the same frame, not a new one, so the
+	* frame count does not move. Anything armed by those writes finds
+	* nothing left to do.
+	*/
+	recollect(frame) {
+		const count = this.dirty.drainInto(this.drained);
+		const dirty = /* @__PURE__ */ new Map();
+		for (let i = 0; i < count; i++) {
+			const node = this.drained[i];
+			dirty.set(node, node.dirtyFlags);
+			node.dirtyFlags = 0;
+		}
+		return new UiFrame(frame.id, frame.time, dirty);
+	}
+	/**
 	* Runs one frame, and names its three parts for the browser's
 	* profiler when anything is recording (`PerformanceMarks`).
 	*
@@ -14565,8 +15035,14 @@ const PRESENTATIONAL_CHILDREN = /* @__PURE__ */ new Set([
 *      is, carrying `disabled` — unavailable is a thing to announce,
 *      hidden is not.
 */
-function buildSemanticsTree(root) {
-	return walk(root, null, false);
+function buildSemanticsTree(root, memory) {
+	return walk(root, null, false, memory);
+}
+function semanticsMemory() {
+	return {
+		described: /* @__PURE__ */ new WeakSet(),
+		spans: /* @__PURE__ */ new WeakMap()
+	};
 }
 /**
 * The records one subtree contributes, as if walked in place.
@@ -14588,8 +15064,8 @@ function buildSemanticsTree(root) {
 * `inert` is whether an ancestor above this subtree is disabled, which
 * only the caller can know.
 */
-function buildSemanticsSubtree(node, parent, index, inert) {
-	const records = walk(node, parent, inert);
+function buildSemanticsSubtree(node, parent, index, inert, memory) {
+	const records = walk(node, parent, inert, memory);
 	const own = records.get(node.id);
 	if (own === void 0) return null;
 	records.set(node.id, {
@@ -14598,26 +15074,129 @@ function buildSemanticsSubtree(node, parent, index, inert) {
 	});
 	return records;
 }
-function walk(root, rootParent, rootInert) {
-	const records = /* @__PURE__ */ new Map();
+/**
+* Walks a subtree again after the shape of the tree changed inside it,
+* describing only what changed.
+*
+* A full walk asks every node what it means, and moves every record
+* whose siblings moved. After a block is inserted in a long document
+* nearly every node means what it did. So a record `reuse.unchanged`
+* vouches for is taken back as it was, and an untouched transparent
+* subtree (one with no record of its own, like a block of the document)
+* is taken back as the run of its parent's children it contributed last
+* time, without being walked into. Nothing taken back is renumbered:
+* the caller learns where everything went from `children` and `placed`.
+*
+* `node` has to carry a record, as for `buildSemanticsSubtree`; null
+* otherwise.
+*/
+function rewalkSemantics(node, parent, index, inert, reuse) {
+	const result = {
+		records: /* @__PURE__ */ new Map(),
+		children: /* @__PURE__ */ new Map(),
+		kept: /* @__PURE__ */ new Set(),
+		placed: []
+	};
+	walk(node, parent, inert, reuse.memory, reuse, result);
+	const own = result.records.get(node.id);
+	if (own === void 0) return null;
+	result.records.set(node.id, {
+		...own,
+		index
+	});
+	result.placed[0] = {
+		id: node.id,
+		parent,
+		index
+	};
+	return result;
+}
+function walk(root, rootParent, rootInert, memory, reuse, rewalk) {
+	const records = rewalk?.records ?? /* @__PURE__ */ new Map();
 	const childCounts = /* @__PURE__ */ new Map();
+	/** Each parent's children so far, in order: for spans, and for a rewalk's result. */
+	const given = rewalk?.children ?? /* @__PURE__ */ new Map();
+	const placed = rewalk?.placed;
+	const tracking = memory !== void 0 || rewalk !== void 0;
 	const nextIndex = (parent) => {
 		const index = childCounts.get(parent) ?? 0;
 		childCounts.set(parent, index + 1);
 		return index;
 	};
+	const note = (parent, id, index) => {
+		if (!tracking) return;
+		let list = given.get(parent);
+		if (list === void 0) given.set(parent, list = []);
+		list.push(id);
+		placed?.push({
+			id,
+			parent,
+			index
+		});
+	};
+	/** Takes back a record nothing changed, subtree and all. */
+	const keep = (id, parent) => {
+		note(parent, id, nextIndex(parent));
+		rewalk.kept.add(id);
+	};
+	/**
+	* Takes back everything an untouched transparent node contributed, as
+	* a run of its parent's old children, without walking into it. False
+	* when its span can't be trusted, and it is walked.
+	*/
+	const keepSpan = (node, parent) => {
+		const span = memory.spans.get(node);
+		if (span === void 0 || span.parent !== parent) return false;
+		if (span.count === 0) return true;
+		const at = span.first === null ? -1 : reuse.positionOf(parent, span.first);
+		if (at < 0) return false;
+		const ids = reuse.childrenOf(parent).slice(at, at + span.count);
+		if (ids.length !== span.count) return false;
+		for (const id of ids) keep(id, parent);
+		return true;
+	};
 	const visit = (node, parent, inert) => {
 		if (node.properties.get("visible") === false) return;
 		const disabled = inert || node.properties.get("disabled") === true;
+		if (reuse !== void 0 && node !== root && reuse.unchanged(node)) {
+			if (memory.described.has(node) && reuse.previous.has(node.id)) {
+				keep(node.id, parent);
+				return;
+			}
+			if (keepSpan(node, parent)) return;
+		}
 		const record = describe(node, parent, disabled, nextIndex);
 		if (record === null) {
+			const start = childCounts.get(parent) ?? 0;
 			for (let child = node.firstChild; child !== null; child = child.nextSibling) visit(child, parent, disabled);
+			if (memory !== void 0) {
+				const count = (childCounts.get(parent) ?? 0) - start;
+				memory.spans.set(node, {
+					parent,
+					first: count === 0 ? null : given.get(parent)[start],
+					count
+				});
+			}
 			return;
 		}
+		memory?.described.add(node);
+		if (node !== root) note(parent, record.id, record.index);
+		else placed?.push({
+			id: record.id,
+			parent,
+			index: record.index
+		});
+		if (rewalk !== void 0 && !given.has(record.id)) given.set(record.id, []);
 		const runs = linkRunsOf(node);
 		if (runs.length > 0) {
 			records.set(record.id, paragraphOf(record));
 			appendTextRuns(node, record.id, runs, records);
+			if (tracking) for (let run = 0;; run++) {
+				const id = `${record.id}${TEXT_RUN_ID_SEPARATOR}${run}`;
+				const added = records.get(id);
+				if (added === void 0) break;
+				note(record.id, id, added.index);
+			}
 		} else records.set(record.id, record);
 		for (let child = node.firstChild; child !== null; child = child.nextSibling) {
 			if (claimedByName(node, child)) continue;
@@ -14664,7 +15243,10 @@ function describe(node, parent, disabled, nextIndex) {
 		valueText: valueTextOf(node),
 		posInSet: node.properties.get("posInSet"),
 		setSize: node.properties.get("setSize"),
-		level: node.properties.get("level")
+		level: node.properties.get("level"),
+		activeDescendant: node.properties.get("activeDescendant")?.id,
+		controls: node.properties.get("controls")?.id,
+		autocomplete: node.properties.get("autocomplete")
 	});
 }
 /**
@@ -14828,6 +15410,46 @@ function diffSemantics(previous, next) {
 	}
 	return patches;
 }
+/**
+* Drops the updates that only renumber a record whose siblings kept
+* their order.
+*
+* A record carries its index among its siblings, so inserting one near
+* the top of a list changes the index of every record after it, and
+* each of those used to go out as an update: 4,266 patches for one
+* paragraph inserted in a 5,000-line document, every one of them
+* crossing to the main thread and rewriting a mirror element. They say
+* nothing a mirror needs. It applies removals, then adds in document
+* order at their indices, so the elements that stayed are already in
+* the right order around the ones that came and went. Only when the
+* siblings that stayed changed their order among themselves (a move)
+* do the new indices matter, and then every update is kept.
+*
+* The records keep their new indices; this only thins the patches.
+*/
+function dropIndexShifts(previous, next, patches) {
+	const parents = /* @__PURE__ */ new Set();
+	for (const patch of patches) if (patch.op === "update" && onlyIndexMoved(previous.get(patch.node.id), patch.node)) parents.add(patch.node.parent);
+	if (parents.size === 0) return [...patches];
+	const lastOld = /* @__PURE__ */ new Map();
+	const reordered = /* @__PURE__ */ new Set();
+	for (const record of next.values()) {
+		if (!parents.has(record.parent) || reordered.has(record.parent)) continue;
+		const before = previous.get(record.id);
+		if (before === void 0 || before.parent !== record.parent) continue;
+		if (before.index < (lastOld.get(record.parent) ?? -1)) reordered.add(record.parent);
+		lastOld.set(record.parent, before.index);
+	}
+	return patches.filter((patch) => patch.op !== "update" || reordered.has(patch.node.parent) || !onlyIndexMoved(previous.get(patch.node.id), patch.node));
+}
+/** Whether two records differ in their index and in nothing else. */
+function onlyIndexMoved(before, after) {
+	if (before === void 0 || before.parent !== after.parent || before.index === after.index) return false;
+	return recordsEqual({
+		...before,
+		index: after.index
+	}, after);
+}
 /** Structural equality over the record's flat, pruned members. */
 function recordsEqual(a, b) {
 	const aKeys = Object.keys(a);
@@ -14847,6 +15469,6 @@ function recordsEqual(a, b) {
 	return true;
 }
 //#endregion
-export { AlignContent, AnimationDriver, BUTTON_INTERACTION, Box, Button, CARET_BLINK_MS, CARET_WIDTH, CLIP_STRIDE_BYTES, CLIP_STRIDE_FLOATS, Canvas2DRenderer, CanvasPlatformSurface, CanvasSurface, CanvasTextMeasurer, CharacterCountTextMeasurer, Column, CommandKind, Constraints, CrossAxisAlignment, DEFAULT_BLOCK_SIZE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_WEIGHT, DEFAULT_LINE_HEIGHT_FACTOR, DEFAULT_TEXT_COLOR, DefaultImageResolver, DefaultVideoResolver, DirtyFlags, DirtyNodeSet, EDITOR_PROP, ELLIPSIS, EMPTY_RECORDING, EXTERNAL_FILES, EditableLayout, EditableText, EditableTextModel, EnvironmentNotifier, FlexDirection, FocusNotifier, GLYPH_SUBPIXEL_PHASES, GlyphShaper, Grid, INSPECTOR_HEAT_MS, INSTANCE_STRIDE_BYTES, INSTANCE_STRIDE_FLOATS, IconRasterizer, LABEL_PADDING_X, LayoutEngine, LayoutInspector, LayoutNotifier, LayoutRecord, LazyColumn, LazyGrid, LazyRow, LazySheet, MARK_PREFIX, MAX_GRADIENT_STOPS, MAX_MEASURES_PER_CHILD, MOTION_CHANNELS, MOTION_REST, MOUSE_POINTER, MainAxisAlignment, Mp3Frames, NO_CLIP_INDEX, NodeTransitions, Paint, PaintPictureCache, PaintRecorder, PaintTarget, ParagraphTextMeasurer, PrimitiveKind, Responsive, Row, SCROLLBAR_FADE_MS, SCROLLBAR_HOVER_ZONE, SCROLLBAR_INSET, SCROLLBAR_LINGER_MS, SCROLLBAR_MIN_THUMB, SCROLLBAR_THICKNESS, ScrollView, Stack, TEXTURED_STRIDE_BYTES, TEXTURED_STRIDE_FLOATS, TEXT_MATCHES_PROP, TEXT_RUN_ID_SEPARATOR, TEXT_SELECTION_PROP, Text, UI_ROLES, UI_SEMANTIC_STATES, UI_SUBGRID_AXES, UiAnimation, UiAnimationFrameClock, UiBasicColors, UiBeforeInputEvent, UiBinding, UiBorderRadiuses, UiChildrenBinding, UiContainerSizeSource, UiDragSession, UiEditingController, UiEnvironment, UiEnvironmentKeys, UiEventBinding, UiEventType, UiFindController, UiFocusEvent, UiFocusManager, UiFrame, UiGestureEvent, UiGestureRecognizer, UiGraph, UiGraphBuilder, UiHitTester, UiHostFrameClock, UiInputDispatcher, UiInputEvent, UiInsetRegistry, UiKeyboardController, UiKeyboardEvent, UiManualFrameClock, UiModifierSet, UiNode, UiNodeType, UiPasteEvent, UiPinchEvent, UiPinchRecognizer, UiPlatformAdapter, UiPointerController, UiPointerEvent, UiProperties, UiScheduler, UiSelectionChangeEvent, UiSelectionController, UiSharedElements, UiShortcutRegistry, UiSpring, UiTextChangeEvent, UiTimerFrameClock, UiTouchScroller, UiTransforms, UiTween, UiUnknownModifierPropertyError, UiVirtualSheet, UiVirtualWindow, UiVisualState, UiWheelController, UiWheelDeltaMode, UiWheelEvent, VIRTUAL_INDEX_PROP, VIRTUAL_LEAD_PROP, VIRTUAL_SHEET_PROP, VIRTUAL_WINDOW_PROP, WebGPUError, WebGPUGlyphAtlas, WebGPUGlyphPages, WebGPURenderer, WebGPUSurface, WebGPUTextureCache, accumulatedOffsetTo, animateLayout, applyCanvasTextStyle, assertModifierList, assertTransitionMap, auto, autoFocus, bandOf, borderRadius, borderRadiusCorners, borderRadiusEqual, borderRadiusIsZero, borderRadiusValuesEqual, borderShapes, borders, boxShadow, boxShadowArraysEqual, boxShadowsEqual, breakpoint, bufferSource, buildFontString, buildRenderList, buildSemanticsSubtree, buildSemanticsTree, bumpFontStack, bundle, canDecodeVideo, capturePointer, caretRectFor, caretVisibleAt, clampSize, clearFontStacks, clearLinkHover, clearMatchRanges, clearOverrideProperty, clearSelectionRange, clickOutside, closestPropertyName, colorToCss, colorToHex, colorToRgba, colorValuesEqual, colorsEqual, colorsEqualPalette, commandForKey, computeObjectFitRect, constraintsEqual, containerBands, contentOffset, contextMenu, contrastRatio, createCanvasSurface, createCanvasTextStyle, createElement, createEnvironmentKey, createPaintState, createTextCache, createTween, createWebGPUSurface, cubicBezier, cueAt, darkColors, darkTheme, decorated, decorationColor, decorationRect, defaultMotion, defaultShadows, defaultShapes, defaultSpacing, defaultTextStyle, defaultTypography, defaultVisualState, defineModifier, defineProperty, defineThemeExtension, demuxMp4Audio, demuxMp4Video, densityFactors, describeLength, describeOverrides, detectEditingPlatform, diffSemantics, dragSessionFor, dragSource, draggable, drawOverlayShapes, drawText, dropTarget, easings, editableSpansOf, editorFor, editorOf, fade, fillTextRects, findEnvironmentKey, findMatchesIn, findPropertyDefinition, flattenTextSpans, focusRing, fontStackFor, formatConstraints, formatExplanation, formatShortcut, fr, getPropertyNames, glyphCount, gradientPaint, gradientsEqual, graphemeBoundaries, hasDecorationPhase, hasDrawnText, hasTextLinks, hasThemeExtension, hasVisualState, highContrastColors, hoverable, iconKey, iconSource, imageSource, inheritedPropertyFlags, inheritedPropertyNames, initializeWebGPU, inputsEqual, insetPadding, insetsEqual, interactive, interpolateColor, interpolateNumber, interpolateTransform, interpolatorFor, isAutoLength, isComponentLikeElement, isEditableNode, isFrLength, isLayoutProtocol, isMinMaxTrack, isMotionRest, isMultiline, isNodeFocusable, isNodeHitTestable, isNodeInert, isNodeSelectable, isNodeTabStop, isObservable, isPaintVisible, isPercentLength, isPrintable, isReadOnly, isScrollContainer, isShapeName, isTypographyRole, isUiChild, isUiElement, isUiModifier, isUiRole, isUiSemanticState, isVideoSurface, isWebGPUAvailable, labelNode, labelOrigin, layoutParagraph, layoutTextLines, lazySource, lightColors, lightTheme, lineEndAt, lineIndexAtY, lineIndexForOffset, lineLimit, lineStartAt, linear, linearGradient, linkHoverOf, linkOf, linkRunAtPointIn, markInstant, markNow, matchRangesOf, measure, measureSpan, minmax, motion, nextCaretToggle, nextGraphemeEnd, nextWordEnd, noInsets, noKeyModifiers, noModifiers, noThemeExtensions, normalizeBorderRadius, normalizeColor, normalizeStates, normalizeTextAlign, normalizeTransition, normalizeVerticalAlign, observeViewportInsets, offsetAtPoint, offsetAtPointIn, offsetAtX, offsetForVerticalMove, overrideSources, paintPictures, paintValuesEqual, paintsAfterChildren, paragraphGeometry, paragraphGeometryFrom, parseAlignContent, parseColor, parseCrossAxisAlignment, parseFlexDirection, parseMainAxisAlignment, parseShortcut, parseTransform, parseWebVtt, pathValuesEqual, percent, performanceMarksEnabled, pinchable, placeGridItems, pointerDeviceOf, pop, prepareInputSurface, pressable, previousGraphemeStart, previousWordStart, propertyEffects, propertyIsInherited, propertyValuesEqual, propertyValuesEqualByName, proportionalFontMetrics, provideEnvironment, publishInset, radialGradient, raiseContrast, rangeSource, readMp3Header, recordsEqual, registerFontStack, relativeLuminance, reorderable, repeat, replayPaint, resetOverrideWarnings, resetTransitionWarnings, resolveBoolean, resolveCursor, resolveLength, resolveMotionState, resolveNumber, resolvePaintState, resolveProperty, resolvePropertyByName, resolveString, resolvedSpansOf, rgb8, rgba, rotateFrom, runCanvasStyleInto, runFontString, sameArgs, scaleFrom, scaleSpacing, scrollLeaderOf, scrollPosition, scrollRange, scrollbarThumb, scrollbarThumbs, scrollbarZoneAt, selectableTextNodes, selectableTextOf, selectionRangeOf, selectionRects, selectionRectsIn, semanticsInertAbove, setLinkHover, setMatchRanges, setPerformanceMarks, setSelectionRange, shadowsEqual, shapesEqual, sharedElement, sheetSource, shortcut, shortcuts, sizeContainer, sizeGridTracks, slideDown, slideFrom, slideUp, spacingEqual, spacingSteps, spanAtOffset, spannedRunsFor, spannedTextOf, splitMp3Frames, spring, statesEqual, steps, syncEditorValue, textContentOf, textRunBackgrounds, textRunDecorations, textRunOfRecordId, textRuns, textSpansEqual, textStylesEqual, themeExtension, themeExtensionsEqual, themeTokens, themesEqual, tightenConstraints, touchActionFor, tracePathData, traceRoundedRect, transform, transformIsIdentity, transformsEqual, tween, typographyEqual, uniformBorderRadius, unknownContainerSize, validateGradient, validateRole, validateStates, validateSubgrid, videoFrameSize, videoSource, visualState, visualStatesEqual, wheelDeltaYOf, withContrast, withDensity, withOverrideSource, withThemeExtension, wordRangeAt, wordRangeIn, writeDeclaredProperty, writeOverrideProperty };
+export { AlignContent, AnimationDriver, BOX_SHADOW_BLUR_REACH, BUTTON_INTERACTION, Box, Button, CARET_BLINK_MS, CARET_WIDTH, CLIP_STRIDE_BYTES, CLIP_STRIDE_FLOATS, Canvas2DRenderer, CanvasPlatformSurface, CanvasSurface, CanvasTextMeasurer, CharacterCountTextMeasurer, Column, CommandKind, Constraints, CrossAxisAlignment, DEFAULT_BLOCK_SIZE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_WEIGHT, DEFAULT_LINE_HEIGHT_FACTOR, DEFAULT_TEXT_COLOR, DefaultImageResolver, DefaultVideoResolver, DirtyFlags, DirtyNodeSet, EDITOR_PROP, ELLIPSIS, EMPTY_RECORDING, EXTERNAL_FILES, EditableLayout, EditableText, EditableTextModel, EnvironmentNotifier, FlexDirection, FocusNotifier, GLYPH_SUBPIXEL_PHASES, GlyphShaper, Grid, INSPECTOR_HEAT_MS, INSTANCE_STRIDE_BYTES, INSTANCE_STRIDE_FLOATS, IconRasterizer, LABEL_PADDING_X, LayoutEngine, LayoutInspector, LayoutNotifier, LayoutRecord, LazyColumn, LazyGrid, LazyRow, LazySheet, MARK_PREFIX, MAX_GRADIENT_STOPS, MAX_MEASURES_PER_CHILD, MOTION_CHANNELS, MOTION_REST, MOUSE_POINTER, MainAxisAlignment, Mp3Frames, NO_CLIP_INDEX, NodeTransitions, Paint, PaintPictureCache, PaintRecorder, PaintTarget, ParagraphTextMeasurer, PrimitiveKind, Responsive, Row, SCROLLBAR_FADE_MS, SCROLLBAR_HOVER_ZONE, SCROLLBAR_INSET, SCROLLBAR_LINGER_MS, SCROLLBAR_MIN_THUMB, SCROLLBAR_THICKNESS, ScrollView, Stack, TEXTURED_STRIDE_BYTES, TEXTURED_STRIDE_FLOATS, TEXT_MATCHES_PROP, TEXT_RUN_ID_SEPARATOR, TEXT_SELECTION_PROP, Text, UI_ROLES, UI_SEMANTIC_STATES, UI_SUBGRID_AXES, UiAnimation, UiAnimationFrameClock, UiBasicColors, UiBeforeInputEvent, UiBinding, UiBorderRadiuses, UiChildrenBinding, UiContainerSizeSource, UiDragSession, UiEditingController, UiEnvironment, UiEnvironmentKeys, UiEventBinding, UiEventType, UiFindController, UiFocusEvent, UiFocusManager, UiFrame, UiGestureEvent, UiGestureRecognizer, UiGraph, UiGraphBuilder, UiHitTester, UiHostFrameClock, UiInputDispatcher, UiInputEvent, UiInsetRegistry, UiKeyboardController, UiKeyboardEvent, UiManualFrameClock, UiModifierSet, UiNode, UiNodeType, UiPasteEvent, UiPinchEvent, UiPinchRecognizer, UiPlatformAdapter, UiPointerController, UiPointerEvent, UiProperties, UiScheduler, UiSelectionChangeEvent, UiSelectionController, UiSharedElements, UiShortcutRegistry, UiSpring, UiTextChangeEvent, UiTimerFrameClock, UiTouchScroller, UiTransforms, UiTween, UiUnknownModifierPropertyError, UiVirtualSheet, UiVirtualWindow, UiVisualState, UiWheelController, UiWheelDeltaMode, UiWheelEvent, VIRTUAL_INDEX_PROP, VIRTUAL_LEAD_PROP, VIRTUAL_SHEET_PROP, VIRTUAL_WINDOW_PROP, WebGPUError, WebGPUGlyphAtlas, WebGPUGlyphPages, WebGPURenderer, WebGPUSurface, WebGPUTextureCache, accumulatedOffsetTo, adjacentField, animateLayout, applyCanvasTextStyle, assertModifierList, assertTransitionMap, auto, autoFocus, bandOf, borderRadius, borderRadiusCorners, borderRadiusEqual, borderRadiusIsZero, borderRadiusValuesEqual, borderShapes, borders, boxShadow, boxShadowArraysEqual, boxShadowRadius, boxShadowReach, boxShadowsEqual, breakpoint, bufferSource, buildFontString, buildRenderList, buildSemanticsSubtree, buildSemanticsTree, bumpFontStack, bundle, canDecodeVideo, capturePointer, caretRectFor, caretVisibleAt, clampSize, clearFontStacks, clearLinkHover, clearMatchRanges, clearOverrideProperty, clearSelectionRange, clickOutside, closestPropertyName, colorToCss, colorToHex, colorToRgba, colorValuesEqual, colorsEqual, colorsEqualPalette, commandForKey, comparePositions, computeObjectFitRect, constraintsEqual, containerBands, contentOffset, contextMenu, contrastRatio, createCanvasSurface, createCanvasTextStyle, createElement, createEnvironmentKey, createPaintState, createTextCache, createTween, createWebGPUSurface, cubicBezier, cueAt, darkColors, darkTheme, decorated, decorationColor, decorationRect, defaultMotion, defaultShadows, defaultShapes, defaultSpacing, defaultTextStyle, defaultTypography, defaultVisualState, defineModifier, defineProperty, defineThemeExtension, demuxMp4Audio, demuxMp4Video, densityFactors, describeLength, describeOverrides, describeShortcut, detectEditingPlatform, diffSemantics, dragSessionFor, dragSource, draggable, drawOverlayShapes, drawText, dropIndexShifts, dropTarget, easings, edgeField, editableSpansOf, editingGroupOf, editorFor, editorOf, fade, fillTextRects, findEnvironmentKey, findMatchesIn, findPropertyDefinition, flattenTextSpans, focusRing, fontStackFor, formatConstraints, formatExplanation, formatShortcut, fr, getPropertyNames, glyphCount, gradientPaint, gradientsEqual, graphemeBoundaries, hasDecorationPhase, hasDrawnText, hasTextLinks, hasThemeExtension, hasVisualState, hiddenRangesOf, highContrastColors, hoverable, iconKey, iconSource, imageSource, inheritedPropertyFlags, inheritedPropertyNames, initializeWebGPU, inputsEqual, insetPadding, insetsEqual, interactive, interpolateColor, interpolateNumber, interpolateTransform, interpolatorFor, isAutoLength, isComponentLikeElement, isEditableNode, isFrLength, isLayoutProtocol, isMinMaxTrack, isMotionRest, isMultiline, isNodeFocusable, isNodeHitTestable, isNodeInert, isNodeSelectable, isNodeTabStop, isObservable, isPaintVisible, isPercentLength, isPrintable, isReadOnly, isScrollContainer, isShapeName, isTypographyRole, isUiChild, isUiElement, isUiModifier, isUiRole, isUiSemanticState, isVideoSurface, isWebGPUAvailable, labelNode, labelOrigin, layoutParagraph, layoutTextLines, lazySource, lightColors, lightTheme, lineEndAt, lineIndexAtY, lineIndexForOffset, lineLimit, lineStartAt, linear, linearGradient, linkHoverOf, linkOf, linkRunAtPointIn, markInstant, markNow, matchRangesOf, measure, measureSpan, minmax, motion, nextCaretToggle, nextGraphemeEnd, nextWordEnd, noInsets, noKeyModifiers, noModifiers, noThemeExtensions, normalizeBorderRadius, normalizeColor, normalizeStates, normalizeTextAlign, normalizeTransition, normalizeVerticalAlign, observeViewportInsets, offsetAtPoint, offsetAtPointIn, offsetAtX, offsetForVerticalMove, overrideSources, paintPictures, paintValuesEqual, paintsAfterChildren, paragraphGeometry, paragraphGeometryFrom, parseAlignContent, parseColor, parseCrossAxisAlignment, parseFlexDirection, parseMainAxisAlignment, parseShortcut, parseTransform, parseWebVtt, pathValuesEqual, percent, performanceMarksEnabled, pinchable, placeGridItems, pointerDeviceOf, pop, prepareInputSurface, pressable, previousGraphemeStart, previousWordStart, propertyEffects, propertyIsInherited, propertyValuesEqual, propertyValuesEqualByName, proportionalFontMetrics, provideEnvironment, publishInset, radialGradient, raiseContrast, rangeSource, readMp3Header, recordsEqual, registerFontStack, relativeLuminance, reorderable, repeat, replayPaint, resetOverrideWarnings, resetTransitionWarnings, resolveBoolean, resolveCursor, resolveLength, resolveMotionState, resolveNumber, resolvePaintState, resolveProperty, resolvePropertyByName, resolveString, resolvedSpansOf, rewalkSemantics, rgb8, rgba, rotateFrom, runCanvasStyleInto, runFontString, sameArgs, scaleFrom, scaleSpacing, scrollLeaderOf, scrollPosition, scrollRange, scrollbarThumb, scrollbarThumbs, scrollbarZoneAt, selectableTextNodes, selectableTextOf, selectionRangeOf, selectionRects, selectionRectsIn, semanticsInertAbove, semanticsMemory, setLinkHover, setMatchRanges, setPerformanceMarks, setSelectionRange, shadowsEqual, shapesEqual, sharedElement, sheetSource, shortcut, shortcutKeyCaps, shortcuts, sizeContainer, sizeGridTracks, slideDown, slideFrom, slideUp, spacingEqual, spacingSteps, spanAtOffset, spannedRunsFor, spannedTextOf, splitMp3Frames, spring, statesEqual, steps, syncEditorValue, textContentOf, textRunBackgrounds, textRunDecorations, textRunOfRecordId, textRuns, textSpansEqual, textStylesEqual, themeExtension, themeExtensionsEqual, themeTokens, themesEqual, tightenConstraints, touchActionFor, tracePathData, traceRoundedRect, transform, transformIsIdentity, transformsEqual, tween, typographyEqual, uniformBorderRadius, unknownContainerSize, validateGradient, validateRole, validateStates, validateSubgrid, videoFrameSize, videoSource, visualState, visualStatesEqual, wheelDeltaYOf, withContrast, withDensity, withOverrideSource, withThemeExtension, wordRangeAt, wordRangeIn, writeDeclaredProperty, writeOverrideProperty };
 
 //# sourceMappingURL=index.js.map