gesso-core 0.6.30 → 0.8.0

package/dist/index.js

@@ -1,81 +1,5 @@
-import { $ as isImeKey, $a as hasVisualState, $i as densityFactors, $n as CharacterCountTextMeasurer, $r as parseTransform, $t as clearFontStacks, A as withOverrideSource, Aa as darkColors, Ai as UiInsetRegistry, An as pointerEventsOf, Ar as findPropertyDefinition, At as wordRangeIn, B as FlexDirection, Ba as rgba, Bi as themesEqual, Bn as EDITOR_PROP, Br as UI_SEMANTIC_STATES, Bt as applyCanvasTextStyle, C as SCROLLBAR_LINGER_MS, Ca as spanAtOffset, Ci as borderRadiusIsZero, Cn as isNodeFocusable, Cr as DEFAULT_LINE_HEIGHT_FACTOR, Ct as scrollsFromRight, D as formatExplanation, Da as textSpansEqual, Di as defineProperty, Dn as isNodeTabStop, Dr as resolvePropertyByName, Dt as paragraphGeometry, E as formatConstraints, Ea as textContentOf, Ei as uniformBorderRadius, En as isNodeSelectable, Er as resolveProperty, Et as offsetAtPointIn, F as clampSize, Fa as colorValuesEqual, Fi as bandOf, Fn as linkOf, Fr as propertyIsInherited, Ft as editingGroupOf, G as CrossAxisAlignment, Ga as DirtyNodeSet, Gi as noThemeExtensions, Gn as isMultiline, Gr as validateRole, Gt as layoutTextLines, H as placeGridItems, Ha as findEnvironmentKey, Hi as withDensity, Hn as editorFor, Hr as isUiSemanticState, Ht as createCanvasTextStyle, I as constraintsEqual, Ia as colorsEqual, Ii as containerBands, In as linkRunAtPointIn, Ir as propertyNarrowers, It as commandForKey, J as parseCrossAxisAlignment, Ja as resetOverrideWarnings, Ji as withThemeExtension, Jn as nextCaretToggle, Jr as validateSubgrid, Jt as spanOf, K as MainAxisAlignment, Ka as clearOverrideProperty, Ki as themeExtension, Kn as isReadOnly, Kr as validateStates, Kt as runCanvasStyleInto, L as tightenConstraints, La as normalizeColor, Li as unknownContainerSize, Ln as setLinkHover, Lr as propertyValuesEqualByName, Lt as detectEditingPlatform, M as contentOffset, Ma as UiBasicColors, Mi as noInsets, Mn as clearLinkHover, Mr as inheritedPropertyFlags, Mt as adjacentField, N as LayoutRecord, Na as colorToHex, Ni as observeViewportInsets, Nn as hasTextLinks, Nr as inheritedPropertyNames, Nt as comparePositions, O as formatNumber, Oa as textStylesEqual, Oi as propertyValuesEqual, On as isPressable, Or as resolveString, Ot as paragraphGeometryFrom, P as Constraints, Pa as colorToRgba, Pi as UiContainerSizeSource, Pn as linkHoverOf, Pr as propertyEffects, Pt as edgeField, Q as capturePointer, Qa as defaultVisualState, Qi as relativeLuminance, Qn as videoFrameSize, Qr as UiTransforms, Qt as bumpFontStack, R as MAX_MEASURES_PER_CHILD, Ra as parseColor, Ri as darkTheme, Rn as CARET_BLINK_MS, Rr as UiProperties, Rt as isPrintable, S as SCROLLBAR_FADE_MS, Sa as resolvedSpansOf, Si as borderRadiusEqual, Sn as setSelectionRange, Sr as UiGraph, St as scrollbarZoneAt, T as describeOverrides, Ta as spansDifferOnlyInPaint, Ti as normalizeBorderRadius, Tn as isNodeInert, Tr as resolveNumber, Tt as hasDrawnText, U as sizeGridTracks, Ua as UiEnvironment, Ui as defineThemeExtension, Un as editorOf, Ur as normalizeStates, Ut as drawText, V as parseFlexDirection, Va as createEnvironmentKey, Vi as withContrast, Vn as caretVisibleAt, Vr as isUiRole, Vt as buildFontString, W as AlignContent, Wa as UiNode, Wi as hasThemeExtension, Wn as isEditableNode, Wr as statesEqual, Wt as fillTextRects, X as CanvasPlatformSurface, Xa as writeOverrideProperty, Xi as highContrastColors, Xn as resolveColorValue, Xr as paintValuesEqual, Xt as textRunBackgrounds, Y as parseMainAxisAlignment, Ya as writeDeclaredProperty, Yi as contrastRatio, Yn as syncEditorValue, Yr as inputsEqual, Yt as textMeasureRequest, Z as UiPlatformAdapter, Za as UiVisualState, Zi as raiseContrast, Zn as isVideoSurface, Zr as pathValuesEqual, Zt as textRunDecorations, _ as LABEL_PADDING_X, _a as typographyEqual, _i as repeat, _n as TEXT_SELECTION_PROP, _o as noKeyModifiers, _r as nextGraphemeEnd, _t as scrollBounds, a as PaintPictureCache, aa as shadowsEqual, ai as gradientsEqual, an as DEFAULT_TEXT_COLOR, ao as UiEventType, ar as caretRectFor, at as UiGestureRecognizer, b as snapScroll, ba as flattenTextSpans, bi as borderRadius, bn as selectableTextOf, bo as DirtyFlags, br as previousWordStart, bt as scrollbarThumb, c as EMPTY_RECORDING, ca as boxShadowArraysEqual, ci as validateGradient, cn as createPaintState, co as UiInputEvent, cr as lineLimit, ct as isScrollContainer, d as tracePathData, da as boxShadowsEqual, di as isAutoLength, dn as normalizeVerticalAlign, do as UiPinchEvent, dr as offsetForVerticalMove, dt as UiFocusManager, ea as defaultSpacing, ei as transform, en as fontStackFor, eo as visualState, er as ParagraphTextMeasurer, et as pointerDeviceOf, f as ScaledImageCache, fa as defaultShapes, fi as isFrLength, fn as resolvePaintState, fo as UiPointerEvent, fr as selectionRects, ft as UiHitTester, g as paintsAfterChildren, ga as isTypographyRole, gi as percent, gn as setMatchRanges, go as UiWheelEvent, gr as lineStartAt, gt as SCROLLBAR_THICKNESS, h as hasDecorationPhase, ha as defaultTypography, hi as minmax, hn as matchRangesOf, ho as UiWheelDeltaMode, hr as lineEndAt, ht as SCROLLBAR_MIN_THUMB, i as traceRoundedRect, ia as defaultShadows, ii as gradientPaint, in as DEFAULT_FONT_WEIGHT, io as UiCompositionEvent, ir as proportionalFontMetrics, it as UiTouchScroller, j as accumulatedOffsetTo, ja as lightColors, ji as insetsEqual, jn as resolveCursor, jr as getPropertyNames, jt as textInputOf, k as labelNode, ka as colorsEqualPalette, ki as UiEnvironmentKeys, kn as isSubtreeInert, kr as closestPropertyName, kt as selectionRectsIn, l as PaintRecorder, la as boxShadowRadius, li as auto, ln as isPaintVisible, lo as UiKeyboardEvent, lr as offsetAtPoint, lt as UiKeyboardController, m as decorationRect, ma as shapesEqual, mi as isPercentLength, mn as clearMatchRanges, mo as UiTextChangeEvent, mr as graphemeBoundaries, mt as SCROLLBAR_INSET, n as createCanvasSurface, na as spacingEqual, ni as transformsEqual, nn as DEFAULT_FONT_FAMILY, no as MOUSE_POINTER, nr as ELLIPSIS, nt as touchActionFor, o as paintPictures, oa as BOX_SHADOW_BLUR_REACH, oi as linearGradient, on as colorToCss, oo as UiFocusEvent, or as lineIndexAtY, ot as UiPinchRecognizer, p as decorationColor, pa as isShapeName, pi as isMinMaxTrack, pn as TEXT_MATCHES_PROP, po as UiSelectionChangeEvent, pr as EditableTextModel, pt as SCROLLBAR_HOVER_ZONE, q as parseAlignContent, qa as overrideSources, qi as themeExtensionsEqual, qn as maskText, qr as UI_SUBGRID_AXES, qt as runFontString, r as Canvas2DRenderer, ra as spacingSteps, ri as MAX_GRADIENT_STOPS, rn as DEFAULT_FONT_SIZE, ro as UiBeforeInputEvent, rr as layoutParagraph, rt as UiEditingController, s as PaintTarget, sa as boxShadow, si as radialGradient, sn as computeObjectFitRect, so as UiGestureEvent, sr as lineIndexForOffset, st as UiWheelController, t as CanvasSurface, ta as scaleSpacing, ti as transformIsIdentity, tn as registerFontStack, to as visualStatesEqual, tr as spannedRunsFor, tt as prepareInputSurface, u as replayPaint, ua as boxShadowReach, ui as fr, un as normalizeTextAlign, uo as UiPasteEvent, ur as offsetAtX, ut as UiPointerController, v as drawOverlayShapes, va as defaultTextStyle, vi as resolveLength, vn as clearSelectionRange, vo as wheelDeltaYOf, vr as nextWordEnd, vt as scrollLeaderOf, w as describeLength, wa as spannedTextOf, wi as borderRadiusValuesEqual, wn as isNodeHitTestable, wr as resolveBoolean, wt as UiInputDispatcher, x as LayoutEngine, xa as hiddenRangesOf, xi as borderRadiusCorners, xn as selectionRangeOf, xo as UiBinding, xr as wordRangeAt, xt as scrollbarThumbs, y as labelOrigin, ya as editableSpansOf, yi as UiBorderRadiuses, yn as selectableTextNodes, yo as UiNodeType, yr as previousGraphemeStart, yt as scrollRange, z as isLayoutProtocol, za as rgb8, zi as lightTheme, zn as CARET_WIDTH, zr as UI_ROLES, zt as EditableLayout } from "./CanvasSurface-CspYfnND.js";
+import { $ as UiPlatformAdapter, $a as boxShadowArraysEqual, $i as UiKeyboardEvent, $n as isVideoSurface, $r as pathValuesEqual, $t as textRunDecorations, A as formatNumber, Aa as withDensity, Ai as propertyValuesEqual, An as isPressable, Ao as colorsEqual, Ar as resolveString, At as paragraphGeometryFrom, B as MAX_MEASURES_PER_CHILD, Ba as contrastRatio, Bi as writeOverrideProperty, Bn as CARET_BLINK_MS, Bo as easings, Br as UiProperties, Bt as isPrintable, C as LayoutEngine, Ca as bandOf, Ci as borderRadiusCorners, Cn as selectionRangeOf, Co as colorsEqualPalette, Cr as wordRangeAt, Ct as scrollbarThumbs, D as describeOverrides, Da as lightTheme, Di as normalizeBorderRadius, Dn as isNodeInert, Do as colorToHex, Dr as resolveNumber, Dt as hasDrawnText, E as describeLength, Ea as darkTheme, Ei as borderRadiusValuesEqual, En as isNodeHitTestable, Eo as UiBasicColors, Er as resolveBoolean, Et as UiInputDispatcher, F as LayoutRecord, Fa as hasThemeExtension, Fi as DirtyNodeSet, Fn as hasTextLinks, Fo as createEnvironmentKey, Fr as inheritedPropertyNames, Ft as comparePositions, G as sizeGridTracks, Ga as defaultSpacing, Gi as visualStatesEqual, Gn as editorOf, Gr as normalizeStates, Gt as drawText, H as FlexDirection, Ha as raiseContrast, Hi as defaultVisualState, Hn as EDITOR_PROP, Ho as steps, Hr as UI_SEMANTIC_STATES, Ht as applyCanvasTextStyle, I as Constraints, Ia as noThemeExtensions, Ii as clearOverrideProperty, In as linkHoverOf, Io as findEnvironmentKey, Ir as propertyEffects, It as edgeField, J as MainAxisAlignment, Ja as spacingSteps, Ji as UiCompositionEvent, Jn as isReadOnly, Jr as validateStates, Jt as runCanvasStyleInto, K as AlignContent, Ka as scaleSpacing, Ki as MOUSE_POINTER, Kn as isEditableNode, Kr as statesEqual, Kt as fillTextRects, L as clampSize, La as themeExtension, Li as overrideSources, Ln as linkOf, Lo as provided, Lr as propertyIsInherited, Lt as editingGroupOf, M as withOverrideSource, Ma as lengths, Mi as withPointer, Mn as pointerEventsOf, Mo as parseColor, Mr as findPropertyDefinition, Mt as wordRangeIn, N as accumulatedOffsetTo, Na as unitsEqual, Ni as UiEnvironment, Nn as resolveCursor, No as rgb8, Nr as getPropertyNames, Nt as textInputOf, O as formatConstraints, Oa as themesEqual, Oi as uniformBorderRadius, On as isNodeSelectable, Oo as colorToRgba, Or as resolveProperty, Ot as offsetAtPointIn, P as contentOffset, Pa as defineThemeExtension, Pi as UiNode, Pn as clearLinkHover, Po as rgba, Pr as inheritedPropertyFlags, Pt as adjacentField, Q as CanvasPlatformSurface, Qa as boxShadow, Qi as UiInputEvent, Qn as resolveColorValue, Qr as paintValuesEqual, Qt as textRunBackgrounds, R as constraintsEqual, Ra as themeExtensionsEqual, Ri as resetOverrideWarnings, Rn as linkRunAtPointIn, Ro as cubicBezier, Rr as propertyNarrowers, Rt as commandForKey, S as tracePathData, Sa as UiContainerSizeSource, Si as borderRadius, Sn as selectableTextOf, So as textStylesEqual, Sr as previousWordStart, St as scrollbarThumb, T as SCROLLBAR_LINGER_MS, Ta as unknownContainerSize, Ti as borderRadiusIsZero, Tn as isNodeFocusable, To as lightColors, Tr as DEFAULT_LINE_HEIGHT_FACTOR, Tt as scrollsFromRight, U as parseFlexDirection, Ua as relativeLuminance, Ui as hasVisualState, Un as caretVisibleAt, Ur as isUiRole, Ut as buildFontString, V as isLayoutProtocol, Va as highContrastColors, Vi as UiVisualState, Vn as CARET_WIDTH, Vo as linear, Vr as UI_ROLES, Vt as EditableLayout, W as placeGridItems, Wa as densityFactors, Wi as visualState, Wn as editorFor, Wr as isUiSemanticState, Wt as createCanvasTextStyle, X as parseCrossAxisAlignment, Xa as shadowsEqual, Xi as UiFocusEvent, Xn as nextCaretToggle, Xr as validateSubgrid, Xt as spanOf, Y as parseAlignContent, Ya as defaultShadows, Yi as UiEventType, Yn as maskText, Yr as UI_SUBGRID_AXES, Yt as runFontString, Z as parseMainAxisAlignment, Za as BOX_SHADOW_BLUR_REACH, Zi as UiGestureEvent, Zn as syncEditorValue, Zr as inputsEqual, Zt as textMeasureRequest, _ as paintsAfterChildren, _a as springIn, _i as minmax, _n as matchRangesOf, _o as spanAtOffset, _r as lineEndAt, _t as SCROLLBAR_MIN_THUMB, a as layerRegion, aa as UiWheelDeltaMode, ai as MAX_GRADIENT_STOPS, an as DEFAULT_FONT_SIZE, ao as shadowsOf, ar as layoutParagraph, at as UiEditingController, b as labelOrigin, ba as noInsets, bi as resolveLength, bn as clearSelectionRange, bo as textContentOf, br as nextWordEnd, bt as scrollLeaderOf, c as paintPictures, ca as wheelDeltaYOf, ci as linearGradient, cn as colorToCss, co as shapesEqual, cr as lineIndexAtY, ct as UiPinchRecognizer, d as PaintRecorder, da as UiBinding, di as auto, dn as isPaintVisible, do as typographyEqual, dr as offsetAtPoint, dt as UiKeyboardController, ea as UiPasteEvent, ei as UiTransforms, en as bumpFontStack, eo as boxShadowRadius, er as videoFrameSize, et as capturePointer, f as replayPaint, fa as UiEnvironmentKeys, fi as fr, fn as normalizeTextAlign, fo as defaultTextStyle, fr as offsetAtX, ft as UiPointerController, g as hasDecorationPhase, ga as easingIn, gi as isPercentLength, gn as clearMatchRanges, go as resolvedSpansOf, gr as graphemeBoundaries, gt as SCROLLBAR_INSET, h as decorationRect, ha as durationIn, hi as isMinMaxTrack, hn as TEXT_MATCHES_PROP, ho as hiddenRangesOf, hr as EditableTextModel, ht as SCROLLBAR_HOVER_ZONE, i as traceRoundedRect, ia as UiTextChangeEvent, ii as transformsEqual, in as DEFAULT_FONT_FAMILY, io as fittedShadowRadius, ir as ELLIPSIS, it as touchActionFor, j as labelNode, ja as defaultUnits, ji as TOUCH_TARGET, jn as isSubtreeInert, jo as normalizeColor, jr as closestPropertyName, jt as selectionRectsIn, k as formatExplanation, ka as withContrast, ki as defineProperty, kn as isNodeTabStop, ko as colorValuesEqual, kr as resolvePropertyByName, kt as paragraphGeometry, l as PaintTarget, la as UiNodeType, li as radialGradient, ln as computeObjectFitRect, lo as defaultTypography, lr as lineIndexForOffset, lt as UiWheelController, m as decorationColor, ma as defineMotion, mi as isFrLength, mn as resolvePaintState, mo as flattenTextSpans, mr as selectionRects, mt as UiHitTester, n as createCanvasSurface, na as UiPointerEvent, ni as transform, nn as fontStackFor, no as boxShadowValuesEqual, nr as ParagraphTextMeasurer, nt as pointerDeviceOf, o as opacityNeedsLayer, oa as UiWheelEvent, oi as gradientPaint, on as DEFAULT_FONT_WEIGHT, oo as defaultShapes, or as proportionalFontMetrics, ot as UiTouchScroller, p as ScaledImageCache, pa as defaultMotion, pi as isAutoLength, pn as normalizeVerticalAlign, po as editableSpansOf, pr as offsetForVerticalMove, pt as UiFocusManager, q as CrossAxisAlignment, qa as spacingEqual, qi as UiBeforeInputEvent, qn as isMultiline, qr as validateRole, qt as layoutTextLines, r as Canvas2DRenderer, ra as UiSelectionChangeEvent, ri as transformIsIdentity, rn as registerFontStack, ro as boxShadowsEqual, rr as spannedRunsFor, rt as prepareInputSurface, s as PaintPictureCache, sa as noKeyModifiers, si as gradientsEqual, sn as DEFAULT_TEXT_COLOR, so as isShapeName, sr as caretRectFor, st as UiGestureRecognizer, t as CanvasSurface, ta as UiPinchEvent, ti as parseTransform, tn as clearFontStacks, to as boxShadowReach, tr as CharacterCountTextMeasurer, tt as isImeKey, u as EMPTY_RECORDING, ua as DirtyFlags, ui as validateGradient, un as createPaintState, uo as isTypographyRole, ur as lineLimit, ut as isScrollContainer, v as LABEL_PADDING_X, va as UiInsetRegistry, vi as percent, vn as setMatchRanges, vo as spannedTextOf, vr as lineStartAt, vt as SCROLLBAR_THICKNESS, w as SCROLLBAR_FADE_MS, wa as containerBands, wi as borderRadiusEqual, wn as setSelectionRange, wo as darkColors, wr as UiGraph, wt as scrollbarZoneAt, x as snapScroll, xa as observeViewportInsets, xi as UiBorderRadiuses, xn as selectableTextNodes, xo as textSpansEqual, xr as previousGraphemeStart, xt as scrollRange, y as drawOverlayShapes, ya as insetsEqual, yi as repeat, yn as TEXT_SELECTION_PROP, yo as spansDifferOnlyInPaint, yr as nextGraphemeEnd, yt as scrollBounds, z as tightenConstraints, za as withThemeExtension, zi as writeDeclaredProperty, zn as setLinkHover, zo as easingCss, zr as propertyValuesEqualByName, zt as detectEditingPlatform } from "./CanvasSurface-Cy2UErXI.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. */
-const linear = (t) => t;
-/**
-* A cubic Bézier easing, in the CSS `cubic-bezier(x1, y1, x2, y2)`
-* sense: the curve runs from (0, 0) to (1, 1) through the two control
-* points, and the easing is y at the t where x equals the input.
-*
-* Solved by Newton's method with a bisection fallback, which is what
-* every browser engine does; eight iterations is well past the point
-* where the result stops moving in a float.
-*/
-function cubicBezier(x1, y1, x2, y2) {
-	const ax = 3 * x1 - 3 * x2 + 1;
-	const bx = 3 * x2 - 6 * x1;
-	const cx = 3 * x1;
-	const ay = 3 * y1 - 3 * y2 + 1;
-	const by = 3 * y2 - 6 * y1;
-	const cy = 3 * y1;
-	const sampleX = (t) => ((ax * t + bx) * t + cx) * t;
-	const sampleY = (t) => ((ay * t + by) * t + cy) * t;
-	const slopeX = (t) => (3 * ax * t + 2 * bx) * t + cx;
-	return (input) => {
-		if (input <= 0) return 0;
-		if (input >= 1) return 1;
-		let t = input;
-		for (let i = 0; i < 8; i++) {
-			const error = sampleX(t) - input;
-			if (Math.abs(error) < 1e-6) return sampleY(t);
-			const slope = slopeX(t);
-			if (Math.abs(slope) < 1e-6) break;
-			t -= error / slope;
-		}
-		let low = 0;
-		let high = 1;
-		t = input;
-		for (let i = 0; i < 24; i++) {
-			const x = sampleX(t);
-			if (Math.abs(x - input) < 1e-6) break;
-			if (x > input) high = t;
-			else low = t;
-			t = (low + high) / 2;
-		}
-		return sampleY(t);
-	};
-}
-/**
-* An easing that only takes `count` distinct values.
-*
-* The reason it exists is the `Spinner`: eight blades have eight
-* positions promised the F4 version would keep a
-* turn at eight writes a second rather than sixty. Paired with an
-* animation's `stepMs`, this is how that promise is kept — the value
-* is stepped and the frames are too.
-*/
-function steps(count) {
-	if (!(count >= 1)) throw new Error(`steps() needs at least one step, got ${count}.`);
-	return (t) => Math.min(count - 1, Math.floor(t * count)) / count;
-}
-/**
-* The named curves a motion vocabulary is built from.
-*
-* `standard` is the one to reach for: something entering and leaving
-* at a natural pace. `decelerate` is for something arriving (it starts
-* fast and settles), `accelerate` for something leaving. `emphasized`
-* is `standard` with more of a lean, for the one movement on a screen
-* that should be noticed.
-*/
-const easings = {
-	linear,
-	standard: cubicBezier(.2, 0, 0, 1),
-	decelerate: cubicBezier(0, 0, 0, 1),
-	accelerate: cubicBezier(.3, 0, 1, 1),
-	emphasized: cubicBezier(.05, .7, .1, 1)
-};
-//#endregion
 //#region src/animation/Interpolate.ts
 const interpolateNumber = (from, to, t) => from + (to - from) * t;
 /**
@@ -283,7 +207,8 @@ var UiAnimation = class {
 		this.begin(previous.lastAdvancedAt);
 	}
 	onBegin() {}
-	advance(now) {
+	/** `hold`: at its end, stay there, unfinished, to be sampled again at an earlier time (`UiClock.holding`). */
+	advance(now, hold = false) {
 		if (this.finished) return;
 		this.begin(now);
 		this.lastAdvancedAt = now;
@@ -296,7 +221,7 @@ var UiAnimation = class {
 			this.cell.value = value;
 			this.subject.next(value);
 		}
-		if (done) this.finish();
+		if (done && !hold) this.finish();
 	}
 	/**
 	* Moves the ideal timeline on by one step.
@@ -519,40 +444,6 @@ function createTween(cell, to, options) {
 	return new UiTween(cell, to, options, interpolate);
 }
 //#endregion
-//#region src/environment/UiMotion.ts
-const defaultMotion = {
-	durations: {
-		/** No motion. What `reducedMotion` turns everything else into. */
-		instant: 0,
-		/** A control acknowledging a press; too short to watch. */
-		fast: 120,
-		/** The default: something appearing, moving or changing colour. */
-		normal: 200,
-		/** A panel or a dialog, which is bigger and travels further. */
-		slow: 320,
-		/** A movement meant to be followed by the eye. Rare. */
-		deliberate: 500
-	},
-	easings,
-	springs: {
-		gentle: {
-			stiffness: 120,
-			damping: 20,
-			mass: 1
-		},
-		snappy: {
-			stiffness: 220,
-			damping: 24,
-			mass: 1
-		},
-		stiff: {
-			stiffness: 400,
-			damping: 32,
-			mass: 1
-		}
-	}
-};
-//#endregion
 //#region src/animation/UiTransition.ts
 /** A tween of `duration` milliseconds along `easing`. */
 function tween(duration, options = {}) {
@@ -571,12 +462,12 @@ function tween(duration, options = {}) {
 function spring(spec = "snappy", options = {}) {
 	return {
 		kind: "spring",
-		spring: typeof spec === "string" ? defaultMotion.springs[spec] : spec,
+		spring: spec,
 		...options
 	};
 }
 function normalizeTransition(value) {
-	return typeof value === "number" ? {
+	return typeof value === "number" || typeof value === "string" ? {
 		kind: "tween",
 		duration: value
 	} : value;
@@ -598,11 +489,18 @@ function assertTransitionMap(nodeId, value, isKnownProperty) {
 			});
 			continue;
 		}
+		if (typeof entry === "string" && entry !== "") {
+			specs.set(property, {
+				kind: "tween",
+				duration: entry
+			});
+			continue;
+		}
 		if (typeof entry === "object" && entry !== null && (entry.kind === "tween" || entry.kind === "spring")) {
 			specs.set(property, entry);
 			continue;
 		}
-		throw new Error(`The 'transition' for '${property}' on node '${nodeId}' must be a duration in milliseconds or a spec built by tween() or spring(), got ${describe$1(entry)}.`);
+		throw new Error(`The 'transition' for '${property}' on node '${nodeId}' must be a duration in milliseconds or by name, or a spec built by tween() or spring(), got ${describe$1(entry)}.`);
 	}
 	return specs;
 }
@@ -632,8 +530,13 @@ function erase(animation) {
 */
 var AnimationDriver = class {
 	running = /* @__PURE__ */ new Map();
+	/** The clock each running animation was started on, when it was not real time; see `UiClock`. */
+	clocks = /* @__PURE__ */ new Map();
+	/** Each clock's `moves` as last drawn: one moved since (a seek) is drawn at its new time at once. */
+	seenMoves = /* @__PURE__ */ new WeakMap();
 	reducedMotion = false;
 	hidden = false;
+	advancing = false;
 	wake = null;
 	/**
 	* Called when an animation enters the running set on an idle driver.
@@ -648,6 +551,14 @@ var AnimationDriver = class {
 	setWakeListener(listener) {
 		this.wake = listener;
 	}
+	/**
+	* Whether a frame of the running animations is being written now: a
+	* value written meanwhile is a step of an animation, not a change for
+	* a transition to animate again.
+	*/
+	get isAdvancing() {
+		return this.advancing;
+	}
 	/** Whether anything is running, so the `ticks` phase can report 0. */
 	get isRunning() {
 		return this.running.size > 0;
@@ -669,8 +580,8 @@ var AnimationDriver = class {
 	* animation says its movement is the information rather than the
 	* decoration.
 	*/
-	lands(policy) {
-		return policy === "snap" && (this.reducedMotion || this.hidden);
+	lands(policy, clock) {
+		return clock?.settled === true || policy === "snap" && (this.reducedMotion || this.hidden);
 	}
 	/**
 	* Starts an animation, replacing whatever was driving its cell.
@@ -682,16 +593,18 @@ var AnimationDriver = class {
 	* So a reduced-motion app runs no animation frames, rather than
 	* running them and drawing the same thing sixty times.
 	*/
-	start(animation) {
+	start(animation, clock = null) {
 		const cell = animation.cell;
 		this.running.get(cell)?.cancel();
 		this.running.delete(cell);
-		if (this.lands(animation.reducedMotionPolicy)) {
+		this.clocks.delete(cell);
+		if (this.lands(animation.reducedMotionPolicy, clock ?? void 0)) {
 			animation.snap();
 			return animation.values;
 		}
 		const wasIdle = this.running.size === 0;
 		this.running.set(cell, erase(animation));
+		if (clock !== null) this.clocks.set(cell, clock);
 		if (wasIdle) this.wake?.();
 		return animation.values;
 	}
@@ -711,12 +624,14 @@ var AnimationDriver = class {
 		const animation = this.running.get(cell);
 		if (animation === void 0) return false;
 		this.running.delete(cell);
+		this.clocks.delete(cell);
 		animation.cancel();
 		return true;
 	}
 	stopAll() {
 		const animations = [...this.running.values()];
 		this.running.clear();
+		this.clocks.clear();
 		for (const animation of animations) animation.cancel();
 	}
 	/**
@@ -770,8 +685,9 @@ var AnimationDriver = class {
 	}
 	/** Puts everything that may be landed where it was going. */
 	landRunning() {
-		for (const [cell, animation] of this.running) if (this.lands(animation.reducedMotionPolicy)) {
+		for (const [cell, animation] of this.running) if (this.lands(animation.reducedMotionPolicy, this.clocks.get(cell))) {
 			this.running.delete(cell);
+			this.clocks.delete(cell);
 			animation.snap();
 		}
 	}
@@ -788,8 +704,14 @@ var AnimationDriver = class {
 	*/
 	nextTickAt(now) {
 		let earliest;
-		for (const animation of this.running.values()) {
-			const due = animation.dueAt(now) - animation.dueSlackMs;
+		for (const [cell, animation] of this.running) {
+			const clock = this.clocks.get(cell);
+			if (clock?.settled === true) return now;
+			if (clock !== void 0 && clock.moves !== (this.seenMoves.get(clock) ?? 0)) return now;
+			const at = clock === void 0 ? now : clock.local(now);
+			const dueAt = animation.dueAt(at) - animation.dueSlackMs;
+			const due = clock === void 0 ? dueAt : clock.real(dueAt);
+			if (!Number.isFinite(due)) continue;
 			if (earliest === void 0 || due < earliest) earliest = due;
 		}
 		return earliest;
@@ -805,14 +727,144 @@ var AnimationDriver = class {
 	* behind.
 	*/
 	advance(now) {
+		this.advancing = true;
+		try {
+			this.advanceRunning(now);
+		} finally {
+			this.advancing = false;
+		}
+	}
+	advanceRunning(now) {
+		const moved = [...new Set(this.clocks.values())].filter((clock) => clock.moves !== (this.seenMoves.get(clock) ?? 0));
+		this.advanceEach(now);
+		for (const clock of moved) this.seenMoves.set(clock, clock.moves);
+	}
+	advanceEach(now) {
 		for (const [cell, animation] of this.running) {
-			if (animation.dueAt(now) - animation.dueSlackMs > now) continue;
-			animation.advance(now);
-			if (animation.isFinished && this.running.get(cell) === animation) this.running.delete(cell);
+			const clock = this.clocks.get(cell);
+			if (clock?.settled === true) {
+				this.running.delete(cell);
+				this.clocks.delete(cell);
+				animation.snap();
+				continue;
+			}
+			const at = clock === void 0 ? now : clock.local(now);
+			if (!(clock !== void 0 && clock.moves !== (this.seenMoves.get(clock) ?? 0)) && animation.dueAt(at) - animation.dueSlackMs > at) continue;
+			animation.advance(at, clock?.holding === true);
+			if (animation.isFinished && this.running.get(cell) === animation) {
+				this.running.delete(cell);
+				this.clocks.delete(cell);
+			}
 		}
 	}
 };
 //#endregion
+//#region src/animation/UiClock.ts
+/**
+* How time passes for the animations under a node: at a speed of its
+* own, or not at all.
+*
+* A node provides one to its subtree,
+* `provide={[provided(UiEnvironmentKeys.clock, clock)]}`, and every
+* animation started there runs on it: a transition, a `motion` state,
+* hover and press, and `AnimationService.animate` given the node it
+* animates `on`. Nothing provided is real time.
+*
+* What a design tool needs to show one screen two ways at once. The
+* frames on its board are pictures: under a `settled` clock every
+* animation lands where it is going the moment it starts, and a loop
+* holds still. The screen it plays runs at the person's own speed, a
+* quarter of it to watch a press closely, or paused. Reduced motion and
+* a hidden page are the whole app's; this is one part of it.
+*
+* An animation takes all its time from the driver, which hands each
+* the local time of its clock, so nothing inside a tween or a spring
+* knows; and the driver asks for the next frame in real time, so a
+* slowed clock asks for frames as often as it needs them and a paused
+* one asks for none.
+*/
+var UiClock = class {
+	rate;
+	/** A real time and the local time it was, from the last change of speed: where local time is measured from. */
+	anchor = null;
+	/** The real time last asked about, where a change of speed takes effect. */
+	lastReal = null;
+	/** Every animation lands where it is going, and none runs. */
+	settled;
+	/**
+	* Animations that reach their end stay, held there, rather than
+	* finishing: so moving the time back (`seek`) plays them back. What a
+	* design tool scrubs a transition with; let go, they finish as they
+	* would have. A spring, which is worked out step by step rather than
+	* from the time, holds but does not run back.
+	*/
+	holding = false;
+	/** Bumped by `seek`, so a driver knows to draw again at the new time. */
+	moves = 0;
+	constructor(options = {}) {
+		this.rate = checkedSpeed(options.speed ?? 1);
+		this.settled = options.settled ?? false;
+	}
+	/** How fast time passes: 1 is real time, 0.25 a quarter of it, 0 paused. */
+	get speed() {
+		return this.rate;
+	}
+	set speed(next) {
+		const speed = checkedSpeed(next);
+		if (this.anchor !== null && this.lastReal !== null) this.anchor = {
+			real: this.lastReal,
+			local: this.local(this.lastReal)
+		};
+		this.rate = speed;
+	}
+	/** The local time now, as last asked: where a seek is measured from. */
+	get now() {
+		return this.lastReal === null ? 0 : this.local(this.lastReal);
+	}
+	/**
+	* Puts local time at `at`, from now on: forward, or back to replay
+	* what is held (`holding`). Paused, it stays there; running, it goes
+	* on from there.
+	*/
+	seek(at) {
+		const real = this.lastReal ?? 0;
+		this.anchor = {
+			real,
+			local: at
+		};
+		this.moves += 1;
+	}
+	/** The local time at real time `now`. The first time asked, the two agree. */
+	local(now) {
+		this.anchor ??= {
+			real: now,
+			local: now
+		};
+		this.lastReal = now;
+		return this.anchor.local + (now - this.anchor.real) * this.rate;
+	}
+	/** The real time at which local time `at` comes; Infinity while paused. */
+	real(at) {
+		if (this.anchor === null) return at;
+		if (this.rate === 0) return Infinity;
+		return this.anchor.real + (at - this.anchor.local) / this.rate;
+	}
+};
+function checkedSpeed(speed) {
+	if (!(speed >= 0) || !Number.isFinite(speed)) throw new Error(`A clock's speed is a number of 0 or more (0 is paused, 1 real time), not ${speed}.`);
+	return speed;
+}
+/** The motion vocabulary names resolve to under `node`: the nearest provided above it, or Gesso's. */
+function motionOf(node) {
+	for (let at = node ?? null; at !== null; at = at.parent) if (at.environment !== null) return at.environment.get(UiEnvironmentKeys.motion);
+	return UiEnvironmentKeys.motion.defaultValue;
+}
+/** The clock the animations under `node` run on: the nearest one provided above it, or null for real time. */
+function clockOf(node) {
+	for (let at = node ?? null; at !== null; at = at.parent) if (at.environment !== null) return at.environment.get(UiEnvironmentKeys.clock);
+	return null;
+}
+//#endregion
 //#region src/animation/UiSharedElements.ts
 /**
 * Who currently owns each shared-element name, and where they were.
@@ -1099,9 +1151,7 @@ var UiChildrenBinding = class {
 	handleValue(value) {
 		const definitions = Array.isArray(value) ? value : [value];
 		const fragment = this.graph.requireNode(this.fragmentId);
-		this.builder.reconcileChildren(fragment, definitions);
-		const parent = this.graph.requireNode(this.parentId);
-		this.graph.markDirty(parent, 16);
+		if (this.builder.reconcileChildren(fragment, definitions).changed) this.graph.markDirty(this.graph.requireNode(this.parentId), 16);
 	}
 };
 //#endregion
@@ -1211,6 +1261,19 @@ function isUiModifier(value) {
 }
 //#endregion
 //#region src/modifiers/interaction.ts
+/**
+* Draws what is under a node as though it were hovered, pressed or
+* focused: every `interactive` modifier there shows its hover or press
+* look, and every `focusRing` its ring. What a design tool draws a
+* component's pointer states with, beside its other states, where no
+* pointer is over it. Read as each modifier attaches, so a node drawn
+* under it starts so and stays so; the pointer still adds its own.
+* Pressed is hovered too, as a press under a pointer is.
+*/
+const ShownAsKey = createEnvironmentKey({
+	name: "gesso.shownAs",
+	defaultValue: null
+});
 const BOTH = Object.freeze({
 	hover: true,
 	press: true
@@ -1228,19 +1291,25 @@ const kind$5 = defineModifier({
 	attach(host, options) {
 		let hovered = false;
 		let pressed = false;
+		const shown = host.environment(ShownAsKey);
+		const shownPressed = shown === "pressed";
+		const shownHovered = shownPressed || shown === "hovered";
 		const styled = /* @__PURE__ */ new Set([...Object.keys(options.hovered ?? {}), ...Object.keys(options.pressed ?? {})]);
 		const sync = () => {
+			const isHovered = hovered || shownHovered;
+			const isPressed = pressed || shownPressed;
 			const states = /* @__PURE__ */ new Set();
-			if (hovered) states.add("hovered");
-			if (pressed) states.add("pressed");
+			if (isHovered) states.add("hovered");
+			if (isPressed) states.add("pressed");
 			if (states.size === 0) states.add("normal");
 			if (!sameStates(host.get("visualState"), states)) host.set("visualState", states);
 			for (const property of styled) {
-				const value = (pressed ? options.pressed?.[property] : void 0) ?? (hovered ? options.hovered?.[property] : void 0);
+				const value = (isPressed ? options.pressed?.[property] : void 0) ?? (isHovered ? options.hovered?.[property] : void 0);
 				if (value === void 0) host.clear(property);
 				else host.set(property, value);
 			}
 		};
+		if (shownHovered) sync();
 		if (options.hover) {
 			host.on("pointerenter", () => {
 				hovered = true;
@@ -1337,7 +1406,7 @@ const measureFlow = defineModifier({
 			target.next(box);
 		};
 		report();
-		host.onLayout(report);
+		host.onFlowLayout(report);
 	}
 });
 //#endregion
@@ -1618,6 +1687,13 @@ var UiModifierSet = class {
 	get names() {
 		return this.attached.map((entry) => entry.kind.name);
 	}
+	/** What is attached, each kind with its current arguments, in order: for a tool reading what a node does. */
+	get modifiers() {
+		return this.attached.map((entry) => ({
+			kind: entry.kind,
+			args: entry.args
+		}));
+	}
 	get size() {
 		return this.attached.length;
 	}
@@ -1815,6 +1891,17 @@ var Host = class {
 		}
 		this.own(layout.onLayout(this.node, listener));
 	}
+	onFlowLayout(listener) {
+		const layout = this.services.layout;
+		if (layout === void 0) {
+			warnMissingLayout(this.name);
+			return;
+		}
+		this.own(layout.onFlowLayout === void 0 ? layout.onLayout(this.node, () => {
+			const box = layout.flowBox(this.node);
+			if (box !== null) listener(box);
+		}) : layout.onFlowLayout(this.node, listener));
+	}
 	environment(key, of = this.node) {
 		const environment = this.services.environment;
 		if (environment === void 0) return key.defaultValue;
@@ -1863,7 +1950,7 @@ var Host = class {
 			return EMPTY;
 		}
 		this.animated.add(cell);
-		return driver.start(tween);
+		return driver.start(tween, clockOf(this.node));
 	}
 	spring(cell, to, options) {
 		const driver = this.services.animations;
@@ -1878,7 +1965,7 @@ var Host = class {
 		return driver.start(new UiSpring(cell, to, {
 			...options,
 			velocity
-		}));
+		}), clockOf(this.node));
 	}
 	own(teardown) {
 		this.teardowns.push(teardown);
@@ -2063,6 +2150,10 @@ var NodeTransitions = class {
 	write(property, value, flags) {
 		const spec = this.specs.get(property);
 		if (spec === void 0) return false;
+		if (this.driver.isAdvancing) {
+			this.stopProperty(property);
+			return false;
+		}
 		if (!this.node.properties.has(property)) return false;
 		const current = this.node.properties.get(property);
 		if (Object.is(current, value)) return false;
@@ -2082,6 +2173,12 @@ var NodeTransitions = class {
 		this.targets.clear();
 		this.specs = /* @__PURE__ */ new Map();
 	}
+	cancel(property) {
+		this.stopProperty(property);
+	}
+	get declared() {
+		return this.specs;
+	}
 	stopProperty(property) {
 		const cell = this.cells.get(property);
 		if (cell !== void 0) {
@@ -2095,10 +2192,9 @@ var NodeTransitions = class {
 	* node: the driver keys its running set by cell identity, so a fresh
 	* adapter per write would leave the previous animation running.
 	*
-	* Writing goes through `updateNodePropertyNow`, which is the path a
-	* plain write takes minus this class — so a modifier's override still
-	* sits on top of an animated value, exactly as it sits on top of a
-	* bound one.
+	* It writes what is drawn (`applyAnimatedValue`): the target already
+	* is the value the element and any modifier over it settled on, so a
+	* frame of the way there goes onto the node as it is.
 	*/
 	cellFor(property, flags) {
 		let cell = this.cells.get(property);
@@ -2110,7 +2206,7 @@ var NodeTransitions = class {
 				return node.properties.get(property);
 			},
 			set value(next) {
-				graph.updateNodePropertyNow(node, property, next, flags);
+				graph.applyAnimatedValue(node, property, next, flags);
 			}
 		};
 		this.cells.set(property, cell);
@@ -2125,16 +2221,17 @@ var NodeTransitions = class {
 			const previous = this.driver.animationFor(cell);
 			const velocity = previous instanceof UiSpring ? previous.currentVelocity : 0;
 			this.driver.start(new UiSpring(cell, to, {
-				spring: spec.spring,
+				spring: springIn(motionOf(this.node), spec.spring),
 				velocity,
 				restDelta: spec.restDelta,
 				reducedMotion: spec.reducedMotion
-			}));
+			}), clockOf(this.node));
 			return true;
 		}
+		const motion = motionOf(this.node);
 		const tween = createTween(cell, to, {
-			duration: spec.duration,
-			easing: spec.easing,
+			duration: durationIn(motion, spec.duration),
+			easing: easingIn(motion, spec.easing),
 			stepMs: spec.stepMs,
 			reducedMotion: spec.reducedMotion
 		});
@@ -2142,7 +2239,7 @@ var NodeTransitions = class {
 			warnNotInterpolable(property);
 			return false;
 		}
-		this.driver.start(tween);
+		this.driver.start(tween, clockOf(this.node));
 		return true;
 	}
 };
@@ -2307,8 +2404,9 @@ var UiGraphBuilder = class {
 	* the fragment's children on each emission.
 	*/
 	reconcileChildren(parent, definitions) {
+		const present = definitions.some(isNothing) ? definitions.filter((each) => !isNothing(each)) : definitions;
 		if (this.reconciling.has(parent)) {
-			this.deferredChildren.set(parent, definitions);
+			this.deferredChildren.set(parent, present);
 			return {
 				nodes: this.collectChildren(parent),
 				changed: false
@@ -2318,7 +2416,7 @@ var UiGraphBuilder = class {
 		this.reconcileDepth++;
 		let result;
 		try {
-			result = this.reconcile(parent, definitions);
+			result = this.reconcile(parent, present);
 		} finally {
 			this.reconcileDepth--;
 			this.reconciling.delete(parent);
@@ -2326,7 +2424,11 @@ var UiGraphBuilder = class {
 		const deferred = this.deferredChildren.get(parent);
 		if (deferred !== void 0) {
 			this.deferredChildren.delete(parent);
-			return this.reconcileChildren(parent, deferred);
+			const again = this.reconcileChildren(parent, deferred);
+			return {
+				nodes: again.nodes,
+				changed: result.changed || again.changed
+			};
 		}
 		if (this.reconcileDepth === 0) this.components?.flushMounts();
 		return result;
@@ -2458,7 +2560,7 @@ var UiGraphBuilder = class {
 			matched.add(anchor);
 			if (this.reconciledFrom.get(anchor) === element) return anchor;
 		}
-		this.reconcileChildren(anchor, [resolver.resolve(element, anchorId)]);
+		this.reconcileChildren(anchor, [resolver.resolve(element, anchorId, anchor)]);
 		this.reconciledFrom.set(anchor, element);
 		return anchor;
 	}
@@ -2524,7 +2626,7 @@ var UiGraphBuilder = class {
 	matchNode(parent, definition, unkeyed, matched) {
 		const key = this.elementKey(definition);
 		if (key !== void 0) {
-			const candidate = this.graph.getNode(`${parent.id}:${key}`);
+			const candidate = this.graph.getNode(`${parent.id}:${idSegment(key)}`);
 			if (candidate === void 0 || candidate.parent !== parent || candidate.type !== definition.type) return;
 			if (matched.has(candidate)) throw new Error(`Duplicate key '${key}' in parent '${parent.id}'.`);
 			return candidate;
@@ -2552,8 +2654,13 @@ var UiGraphBuilder = class {
 	createNode(parent, definition, index) {
 		const id = this.createNodeId(parent, definition, index);
 		const node = this.graph.createNode(id, definition.type);
-		this.reconcileProps(node, definition.props, parent);
-		this.reconcileChildren(node, definition.children);
+		try {
+			this.reconcileProps(node, definition.props, parent);
+			this.reconcileChildren(node, definition.children);
+		} catch (error) {
+			this.removeSubtree(node);
+			throw error;
+		}
 		return node;
 	}
 	/**
@@ -2583,7 +2690,7 @@ var UiGraphBuilder = class {
 			if (isObservable(definition) || isComponentLikeElement(definition)) continue;
 			const key = this.elementKey(definition);
 			if (key === void 0) continue;
-			const candidate = this.graph.getNode(`${parent.id}:${key}`);
+			const candidate = this.graph.getNode(`${parent.id}:${idSegment(key)}`);
 			const position = candidate === void 0 ? void 0 : at.get(candidate);
 			if (candidate === void 0 || position === void 0 || candidate.type !== definition.type) continue;
 			nodes.push(candidate);
@@ -2731,6 +2838,19 @@ var UiGraphBuilder = class {
 		return this.modifiers.get(node);
 	}
 	/**
+	* Where the element a node was last reconciled from was written, for
+	* the inspector and for tools that edit the source. For a component's
+	* anchor it is where the component was used, so walking up from a
+	* node gives the line that made it and then each place it was used.
+	*
+	* Read off the definition the builder already keeps for each node
+	* rather than stored on the node, so it costs a tree nothing when no
+	* element carries one, which is every element in production.
+	*/
+	sourceOf(node) {
+		return this.reconciledFrom.get(node)?.source;
+	}
+	/**
 	* Rejects a prop nothing will ever read.
 	*
 	* Every property layout, paint, input or the environment consults is
@@ -2834,7 +2954,7 @@ var UiGraphBuilder = class {
 	*/
 	createNodeId(parent, definition, index) {
 		const key = this.elementKey(definition);
-		if (key !== void 0) return `${parent.id}:${key}`;
+		if (key !== void 0) return `${parent.id}:${idSegment(key)}`;
 		return `${parent.id}:${index}`;
 	}
 	/**
@@ -2853,7 +2973,7 @@ var UiGraphBuilder = class {
 	*/
 	createComponentAnchorId(parent, element, index) {
 		const key = element.key === void 0 || element.key === null ? index : element.key;
-		return `${parent.id}:component:${String(key)}`;
+		return `${parent.id}:component:${idSegment(String(key))}`;
 	}
 };
 const NO_NODES = /* @__PURE__ */ new Set();
@@ -2882,6 +3002,24 @@ function longestIncreasing(values) {
 	for (let index = tops.length > 0 ? tops[tops.length - 1] : -1; index !== -1; index = previous[index]) run.push(index);
 	return run.reverse();
 }
+/**
+* A key as one segment of a node id, which joins segments with colons.
+*
+* A key holding a colon would otherwise read as more than one segment,
+* and could spell another node's id: a row keyed `a:0` beside a row
+* keyed `a` whose first child is `a:0` again, which threw "already used
+* outside parent" for a list keyed by ids (a layers panel's). Escaped,
+* a key is one segment whatever it holds, and a key with no colon in it
+* is unchanged.
+*/
+function idSegment(key) {
+	const text = String(key);
+	return text.includes(":") || text.includes("%") ? text.replace(/%/g, "%25").replace(/:/g, "%3A") : text;
+}
+/** A child that draws nothing: null, undefined or a boolean, from plain script. */
+function isNothing(child) {
+	return child === null || child === void 0 || typeof child === "boolean";
+}
 //#endregion
 //#region src/composition/UiVirtualWindow.ts
 /** Marks an item wrapper with its index so the host can measure it. */
@@ -3535,7 +3673,7 @@ const sizeContainer = defineModifier({
 			const vertical = inset("paddingTop", "paddingY") + inset("paddingBottom", "paddingY");
 			args.source.report(Math.max(0, box.width - horizontal), Math.max(0, box.height - vertical));
 		};
-		host.onLayout(report);
+		host.onFlowLayout(report);
 		report();
 	}
 });
@@ -3580,7 +3718,7 @@ const breakpoint = defineModifier({
 			}
 			for (const [name, value] of written) host.set(name, value);
 		};
-		host.onLayout(apply);
+		host.onFlowLayout(apply);
 		apply();
 	}
 });
@@ -4828,14 +4966,17 @@ var UiShortcutRegistry = class {
 	* `preventDefault()` so the keyboard controller's own defaults (Tab
 	* navigation, Enter on a button, an editable's typing) do not also
 	* act on a key that has already been spent.
+	*
+	* `code` is the physical key, which a digit written with Shift
+	* matches on (see `sameStep`).
 	*/
-	handleKey(key, modifiers, focused) {
+	handleKey(key, modifiers, focused, code) {
 		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 step = stepFor(key, modifiers, code);
 		const at = this.now();
 		if (this.pending.length > 0 && at - this.pendingAt > this.chordTimeout) this.pending = [];
 		const sequence = [...this.pending, step];
@@ -5009,7 +5150,7 @@ function matchesPrefix(steps, sequence) {
 	return sequence.every((step, index) => sameStep(steps[index], step));
 }
 function sameStep(want, got) {
-	if (want.key !== got.key) return false;
+	if (want.key !== got.key && !shiftedDigit(want, got)) return false;
 	if (isSymbol(want.key)) {
 		if (isBare(want) && got.alt && !got.meta) return true;
 	} else if (want.shift !== got.shift) return false;
@@ -5018,6 +5159,15 @@ function sameStep(want, got) {
 	return want.ctrl === got.ctrl && want.meta === got.meta;
 }
 /**
+* A digit written with Shift, pressed: `Shift+1`, as a design tool's
+* "zoom to fit" is written, is the 1 key with Shift held, whatever
+* character that types. On a US keyboard it types `!`, on a French one
+* `1` itself, so the character cannot say; the physical key can.
+*/
+function shiftedDigit(want, got) {
+	return want.shift && got.shift && /^[0-9]$/.test(want.key) && got.code === `Digit${want.key}`;
+}
+/**
 * 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
@@ -5027,14 +5177,15 @@ function isSymbol(key) {
 	return key.length === 1 && key !== " " && key.toLowerCase() === key.toUpperCase();
 }
 /** The press the person actually made. */
-function stepFor(key, modifiers) {
+function stepFor(key, modifiers, code) {
 	return {
 		key: normalizeKey(key),
 		mod: false,
 		ctrl: modifiers.ctrl,
 		meta: modifiers.meta,
 		shift: modifiers.shift,
-		alt: modifiers.alt
+		alt: modifiers.alt,
+		...code === void 0 ? {} : { code }
 	};
 }
 /**
@@ -5407,6 +5558,12 @@ function dragSessionFor(node) {
 var LayoutNotifier = class {
 	listeners = /* @__PURE__ */ new Map();
 	last = /* @__PURE__ */ new Map();
+	/**
+	* Listeners told about the node's place in the layout and its scroll
+	* offset, and not about where it is drawn (`addFlow`).
+	*/
+	flowListeners = /* @__PURE__ */ new Map();
+	flowLast = /* @__PURE__ */ new Map();
 	/** Registers a listener; the returned function removes it. */
 	add(node, listener) {
 		let forNode = this.listeners.get(node);
@@ -5425,36 +5582,73 @@ var LayoutNotifier = class {
 			}
 		};
 	}
+	/**
+	* Registers a listener told when the node's laid-out box or its own
+	* scroll offset changes, and not when a scroll or a transform above it
+	* moves it on screen; the returned function removes it.
+	*
+	* Most listeners are this kind: a size container, a breakpoint, a
+	* layout animation, a scroll position read only the node's own box
+	* and offset. Told of every move on screen, each of them was asked
+	* on every step of a pan over a design tool's board, 2,600 of them,
+	* to find nothing it reads had changed; and each answer was where
+	* the node was drawn, worked out through every ancestor. Its place in
+	* the layout is its record, read at once.
+	*/
+	addFlow(node, listener) {
+		let forNode = this.flowListeners.get(node);
+		if (forNode === void 0) {
+			forNode = /* @__PURE__ */ new Set();
+			this.flowListeners.set(node, forNode);
+		}
+		forNode.add(listener);
+		return () => {
+			const set = this.flowListeners.get(node);
+			if (set === void 0) return;
+			set.delete(listener);
+			if (set.size === 0) {
+				this.flowListeners.delete(node);
+				this.flowLast.delete(node);
+			}
+		};
+	}
 	get size() {
-		return this.listeners.size;
+		return this.listeners.size + this.flowListeners.size;
 	}
 	/** Whether anything is listening, so a frame can skip the walk. */
 	isEmpty() {
-		return this.listeners.size === 0;
+		return this.listeners.size === 0 && this.flowListeners.size === 0;
 	}
 	/**
 	* Calls the listeners of every watched node whose box or scroll
 	* offset differs from what it was last told about.
 	*/
-	notify(read) {
-		for (const [node, listeners] of this.listeners) {
-			const current = read(node);
-			const previous = this.last.get(node);
-			if (previous !== void 0 && sameLayout(previous, current)) continue;
-			this.last.set(node, {
-				box: { ...current.box },
-				scrollX: current.scrollX,
-				scrollY: current.scrollY
-			});
-			for (const listener of listeners) listener(current.box);
-		}
+	notify(read, readFlow = read) {
+		notifyEach(this.listeners, this.last, read);
+		notifyEach(this.flowListeners, this.flowLast, readFlow);
 	}
 	/** Drops a removed node's listeners, so nothing keeps it alive. */
 	handleNodeRemoved(node) {
 		this.listeners.delete(node);
 		this.last.delete(node);
+		this.flowListeners.delete(node);
+		this.flowLast.delete(node);
 	}
 };
+/** Calls the listeners of each node whose layout, as `read` gives it, differs from what they were last told. */
+function notifyEach(listeners, last, read) {
+	for (const [node, forNode] of listeners) {
+		const current = read(node);
+		const previous = last.get(node);
+		if (previous !== void 0 && sameLayout(previous, current)) continue;
+		last.set(node, {
+			box: { ...current.box },
+			scrollX: current.scrollX,
+			scrollY: current.scrollY
+		});
+		for (const listener of forNode) listener(current.box);
+	}
+}
 function sameLayout(a, b) {
 	return a.scrollX === b.scrollX && a.scrollY === b.scrollY && sameBox(a.box, b.box);
 }
@@ -5565,8 +5759,9 @@ const kind$4 = defineModifier({
 	name: "focusRing",
 	attach(host, options) {
 		const shapes = ringShapes(options);
+		const shown = host.environment(ShownAsKey) === "focused";
 		const sync = () => {
-			host.decorate(host.isFocused() && host.isFocusVisible() ? shapes : null);
+			host.decorate(shown || host.isFocused() && host.isFocusVisible() ? shapes : null);
 		};
 		sync();
 		host.onFocusChange(sync);
@@ -5722,7 +5917,7 @@ const kind$3 = defineModifier({
 	name: "autoFocus",
 	attach(host, options) {
 		let done = false;
-		host.onLayout(() => {
+		host.onFlowLayout(() => {
 			if (done) return;
 			done = true;
 			host.focus(options);
@@ -6048,7 +6243,7 @@ var DropTarget = class {
 	}
 	attach() {
 		this.registration.sync();
-		this.host.onLayout(() => this.registration.sync());
+		this.host.onFlowLayout(() => this.registration.sync());
 		this.host.own(() => {
 			this.stopScrolling();
 			this.registration.dispose();
@@ -6526,7 +6721,7 @@ var Pinchable = class {
 		if (box === null) return;
 		const clamped = Math.min(Math.max(scale, this.options.minScale ?? 1), this.options.maxScale ?? 8);
 		const [unrotatedX, unrotatedY] = unapply(anchorX - box.x - this.translateX, anchorY - box.y - this.translateY, this.scale, this.rotation);
-		const [reappliedX, reappliedY] = apply(unrotatedX, unrotatedY, clamped, rotation);
+		const [reappliedX, reappliedY] = apply$1(unrotatedX, unrotatedY, clamped, rotation);
 		this.scale = clamped;
 		this.rotation = rotation;
 		this.translateX = anchorX + panX - box.x - reappliedX;
@@ -6547,7 +6742,7 @@ var Pinchable = class {
 	}
 };
 /** Rotates and scales a node-local point, the way the renderers do. */
-function apply(x, y, scale, degrees) {
+function apply$1(x, y, scale, degrees) {
 	const radians = degrees * Math.PI / 180;
 	const cos = Math.cos(radians);
 	const sin = Math.sin(radians);
@@ -6596,7 +6791,7 @@ const shortcutsKind = defineModifier({
 		host.onRoot("keydown", (event) => {
 			if (event.defaultPrevented) return;
 			const key = event;
-			if (registry.handleKey(key.key, key.modifiers, key.target)) {
+			if (registry.handleKey(key.key, key.modifiers, key.target, key.code)) {
 				event.preventDefault();
 				event.stopPropagation();
 			}
@@ -6775,7 +6970,7 @@ var LayoutAnimation = class {
 			this.baseScaleY = numberOr(declared.scaleY, 1);
 			this.baseRotation = numberOr(declared.rotation, 0);
 		}
-		this.host.onLayout(() => this.handleLayout());
+		this.host.onFlowLayout(() => this.handleLayout());
 	}
 	makeCell(read, write) {
 		return {
@@ -6852,7 +7047,7 @@ var LayoutAnimation = class {
 		}
 		const named = this.options.spring ?? "snappy";
 		this.host.spring(cell, 0, {
-			spring: typeof named === "string" ? defaultMotion.springs[named] : named,
+			spring: springIn(motionOf(this.host.node), named),
 			restDelta: .5
 		});
 	}
@@ -6861,6 +7056,1340 @@ function numberOr(value, fallback) {
 	return typeof value === "number" && Number.isFinite(value) ? value : fallback;
 }
 //#endregion
+//#region src/rendering/svg/SvgXml.ts
+/**
+* The document's outermost element, or null when there is none.
+*/
+function parseSvgXml(source) {
+	const stack = [];
+	let root = null;
+	let index = 0;
+	const close = () => {
+		const element = stack.pop();
+		const parent = stack.at(-1);
+		if (parent === void 0) root ??= element;
+		else parent.children.push(element);
+	};
+	while (index < source.length) {
+		const open = source.indexOf("<", index);
+		if (open === -1) break;
+		if (open > index && stack.length > 0) stack.at(-1).text += decodeEntities(source.slice(index, open));
+		if (source.startsWith("<!--", open)) {
+			const end = source.indexOf("-->", open + 4);
+			index = end === -1 ? source.length : end + 3;
+			continue;
+		}
+		if (source.startsWith("<![CDATA[", open)) {
+			const end = source.indexOf("]]>", open + 9);
+			const text = source.slice(open + 9, end === -1 ? source.length : end);
+			if (stack.length > 0) stack.at(-1).text += text;
+			index = end === -1 ? source.length : end + 3;
+			continue;
+		}
+		if (source[open + 1] === "?" || source[open + 1] === "!") {
+			index = skipDeclaration(source, open);
+			continue;
+		}
+		if (source[open + 1] === "/") {
+			const end = source.indexOf(">", open);
+			const name = source.slice(open + 2, end === -1 ? source.length : end).trim();
+			const at = stack.map((element) => element.name).lastIndexOf(name);
+			if (at !== -1) while (stack.length > at) close();
+			index = end === -1 ? source.length : end + 1;
+			continue;
+		}
+		const tag = readTag(source, open);
+		stack.push({
+			name: tag.name,
+			attributes: tag.attributes,
+			children: [],
+			text: ""
+		});
+		if (tag.selfClosing) close();
+		index = tag.end;
+	}
+	while (stack.length > 0) close();
+	return root;
+}
+/** Past a `<?…?>` or a `<!…>`, minding a doctype's bracketed subset. */
+function skipDeclaration(source, open) {
+	let depth = 0;
+	for (let i = open + 1; i < source.length; i++) {
+		const char = source[i];
+		if (char === "[") depth++;
+		else if (char === "]") depth--;
+		else if (char === ">" && depth <= 0) return i + 1;
+	}
+	return source.length;
+}
+function readTag(source, open) {
+	let i = open + 1;
+	const nameStart = i;
+	while (i < source.length && !/[\s/>]/.test(source[i])) i++;
+	const name = source.slice(nameStart, i);
+	const attributes = {};
+	for (;;) {
+		while (i < source.length && /\s/.test(source[i])) i++;
+		if (i >= source.length) return {
+			name,
+			attributes,
+			selfClosing: false,
+			end: i
+		};
+		if (source[i] === ">") return {
+			name,
+			attributes,
+			selfClosing: false,
+			end: i + 1
+		};
+		if (source[i] === "/") {
+			const end = source.indexOf(">", i);
+			return {
+				name,
+				attributes,
+				selfClosing: true,
+				end: end === -1 ? source.length : end + 1
+			};
+		}
+		const keyStart = i;
+		while (i < source.length && !/[\s=/>]/.test(source[i])) i++;
+		const key = source.slice(keyStart, i);
+		while (i < source.length && /\s/.test(source[i])) i++;
+		if (source[i] !== "=") {
+			if (key !== "") attributes[key] = "";
+			else i++;
+			continue;
+		}
+		i++;
+		while (i < source.length && /\s/.test(source[i])) i++;
+		const quote = source[i];
+		if (quote === "\"" || quote === "'") {
+			const end = source.indexOf(quote, i + 1);
+			attributes[key] = decodeEntities(source.slice(i + 1, end === -1 ? source.length : end));
+			i = end === -1 ? source.length : end + 1;
+		} else {
+			const valueStart = i;
+			while (i < source.length && !/[\s>]/.test(source[i])) i++;
+			attributes[key] = decodeEntities(source.slice(valueStart, i));
+		}
+	}
+}
+const NAMED_ENTITIES = {
+	amp: "&",
+	lt: "<",
+	gt: ">",
+	quot: "\"",
+	apos: "'"
+};
+function decodeEntities(text) {
+	if (!text.includes("&")) return text;
+	return text.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (whole, entity) => {
+		if (entity[0] === "#") {
+			const code = entity[1] === "x" || entity[1] === "X" ? parseInt(entity.slice(2), 16) : parseInt(entity.slice(1), 10);
+			return Number.isFinite(code) ? String.fromCodePoint(code) : whole;
+		}
+		return NAMED_ENTITIES[entity] ?? whole;
+	});
+}
+//#endregion
+//#region src/rendering/svg/SvgDocument.ts
+/** Elements drawn as nothing, because nothing here draws them yet. */
+const UNSUPPORTED_ELEMENTS = /* @__PURE__ */ new Set([
+	"text",
+	"image",
+	"foreignObject",
+	"pattern",
+	"marker"
+]);
+/** Attributes that point at one of those. */
+const UNSUPPORTED_ATTRIBUTES = {
+	"marker-start": "marker",
+	"marker-mid": "marker",
+	"marker-end": "marker"
+};
+/**
+* Reads an SVG file. Throws when it holds no `<svg>` element, since
+* there is then nothing to draw and the caller should fall back.
+*/
+function parseSvg(source) {
+	const root = parseSvgXml(source);
+	if (root === null || localName(root.name) !== "svg") throw new Error("This is not an SVG file: it has no <svg> element.");
+	const ids = /* @__PURE__ */ new Map();
+	const rules = [];
+	const unsupported = /* @__PURE__ */ new Set();
+	const visit = (element) => {
+		const name = localName(element.name);
+		const id = element.attributes.id;
+		if (id !== void 0 && !ids.has(id)) ids.set(id, element);
+		if (name === "style") rules.push(...parseStyleSheet(element.text));
+		if (UNSUPPORTED_ELEMENTS.has(name)) unsupported.add(name);
+		if (name === "filter" && dropShadowOf(element) === void 0) unsupported.add("filter");
+		for (const [attribute, feature] of Object.entries(UNSUPPORTED_ATTRIBUTES)) if (element.attributes[attribute] !== void 0 && element.attributes[attribute] !== "none") unsupported.add(feature);
+		for (const attribute of ["mask", "filter"]) {
+			const value = element.attributes[attribute];
+			if (value !== void 0 && value !== "none") references.push([attribute, value]);
+		}
+		element.children.forEach(visit);
+	};
+	const references = [];
+	visit(root);
+	for (const [attribute, value] of references) {
+		const id = referencedId(value);
+		const target = id === void 0 ? void 0 : ids.get(id);
+		if (target === void 0 || localName(target.name) !== attribute) unsupported.add(attribute);
+	}
+	const viewBox = parseViewBox(root.attributes.viewBox);
+	const width = absoluteLength(root.attributes.width) ?? viewBox?.width ?? 300;
+	const height = absoluteLength(root.attributes.height) ?? viewBox?.height ?? 150;
+	return {
+		root,
+		width,
+		height,
+		viewBox: viewBox ?? {
+			x: 0,
+			y: 0,
+			width,
+			height
+		},
+		ids,
+		rules,
+		unsupported: [...unsupported]
+	};
+}
+/** The id a value of the form `url(#id)` names, or undefined for anything else. */
+function referencedId(value) {
+	return /^\s*url\(\s*['"]?#([^'")]+)['"]?\s*\)\s*$/.exec(value)?.[1];
+}
+/**
+* The `<feDropShadow>` a `<filter>` is, when it is exactly one drop
+* shadow of the element itself; undefined for any other filter, which
+* is not drawn.
+*/
+function dropShadowOf(filter) {
+	const primitives = filter.children.filter((child) => !NOT_PRIMITIVES.has(localName(child.name)));
+	const [primitive] = primitives;
+	if (primitives.length !== 1 || localName(primitive.name) !== "feDropShadow") return;
+	const input = primitive.attributes.in;
+	return input === void 0 || input === "SourceGraphic" ? primitive : void 0;
+}
+/** What a `<filter>` may hold that is not a step of it. */
+const NOT_PRIMITIVES = /* @__PURE__ */ new Set([
+	"title",
+	"desc",
+	"metadata"
+]);
+/** An element's name without its namespace prefix: `svg:path` is `path`. */
+function localName(name) {
+	const colon = name.indexOf(":");
+	return colon === -1 ? name : name.slice(colon + 1);
+}
+/** A `viewBox`, or undefined when it is absent or describes nothing. */
+function parseViewBox(value) {
+	if (value === void 0) return;
+	const [x, y, width, height] = numbersIn(value);
+	if (x === void 0 || y === void 0 || width === void 0 || height === void 0 || width <= 0 || height <= 0) return;
+	return {
+		x,
+		y,
+		width,
+		height
+	};
+}
+/** Every number in a list separated by commas and spaces. */
+function numbersIn(value) {
+	return (value.match(/[-+]?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi) ?? []).map(Number);
+}
+/** A length in pixels, or undefined for a percentage or anything that is not one. */
+function absoluteLength(value) {
+	if (value === void 0 || value.trim().endsWith("%")) return;
+	const number = parseFloat(value);
+	if (!Number.isFinite(number) || number <= 0) return;
+	const unit = value.trim().replace(/^[-+\d.e]+/i, "");
+	return number * (UNIT_PIXELS[unit] ?? 1);
+}
+/** CSS's absolute units in pixels, 96 to the inch. */
+const UNIT_PIXELS = {
+	"": 1,
+	px: 1,
+	pt: 96 / 72,
+	pc: 16,
+	in: 96,
+	cm: 96 / 2.54,
+	mm: 96 / 25.4
+};
+/** The declarations of an inline `style` attribute or a rule's block. */
+function parseDeclarations(text) {
+	const declarations = {};
+	for (const part of text.split(";")) {
+		const colon = part.indexOf(":");
+		if (colon === -1) continue;
+		const property = part.slice(0, colon).trim().toLowerCase();
+		const value = part.slice(colon + 1).replace(/!important/i, "").trim();
+		if (property !== "" && value !== "") declarations[property] = value;
+	}
+	return declarations;
+}
+/**
+* A `<style>`'s rules. Only compound selectors are understood, which is
+* what an exporter writes (`.st0{fill:#fff}`); a rule whose selector
+* has a combinator or a pseudo-class is skipped rather than misapplied.
+*/
+function parseStyleSheet(text) {
+	const rules = [];
+	const source = text.replace(/\/\*[\s\S]*?\*\//g, "");
+	for (const match of source.matchAll(/([^{}]+)\{([^}]*)\}/g)) {
+		const declarations = parseDeclarations(match[2]);
+		for (const raw of match[1].split(",")) {
+			const selector = parseSelector(raw.trim());
+			if (selector !== null) {
+				const specificity = (selector.id === void 0 ? 0 : 100) + selector.classes.length * 10 + (selector.name === void 0 ? 0 : 1);
+				rules.push({
+					selector,
+					declarations,
+					specificity
+				});
+			}
+		}
+	}
+	return rules;
+}
+function parseSelector(text) {
+	if (text === "" || /[\s>+~:[\]*]/.test(text)) return null;
+	const parts = text.match(/[.#]?[^.#]+/g) ?? [];
+	let name;
+	let id;
+	const classes = [];
+	for (const part of parts) if (part.startsWith("#")) id = part.slice(1);
+	else if (part.startsWith(".")) classes.push(part.slice(1));
+	else name = part;
+	return {
+		...name === void 0 ? {} : { name },
+		...id === void 0 ? {} : { id },
+		classes
+	};
+}
+/** Whether a rule's selector matches an element. */
+function selectorMatches(selector, element) {
+	if (selector.name !== void 0 && localName(element.name) !== selector.name) return false;
+	if (selector.id !== void 0 && element.attributes.id !== selector.id) return false;
+	if (selector.classes.length > 0) {
+		const classes = (element.attributes.class ?? "").split(/\s+/);
+		return selector.classes.every((name) => classes.includes(name));
+	}
+	return true;
+}
+//#endregion
+//#region src/rendering/svg/SvgDraw.ts
+/**
+* Draws a read SVG file into a box, through the surface every painted
+* node draws through, so it is vectors on either renderer and is drawn
+* again at whatever size the box is laid out at.
+*/
+function drawSvg(document, surface, box, options = {}) {
+	const { viewBox } = document;
+	const fit = options.fit ?? "contain";
+	let scaleX = box.width / viewBox.width;
+	let scaleY = box.height / viewBox.height;
+	if (fit !== "fill") {
+		const contain = Math.min(scaleX, scaleY);
+		const natural = document.width / viewBox.width;
+		const uniform = fit === "cover" ? Math.max(scaleX, scaleY) : fit === "none" ? natural : fit === "scale-down" ? Math.min(contain, natural) : contain;
+		scaleX = uniform;
+		scaleY = uniform;
+	}
+	surface.save();
+	if (fit === "cover" || fit === "none") {
+		surface.beginPath();
+		surface.rect(0, 0, box.width, box.height);
+		surface.clip();
+	}
+	surface.translate((box.width - viewBox.width * scaleX) / 2, (box.height - viewBox.height * scaleY) / 2);
+	surface.scale(scaleX, scaleY);
+	surface.translate(-viewBox.x, -viewBox.y);
+	const context = {
+		document,
+		surface,
+		currentColor: options.color ?? "currentColor",
+		using: /* @__PURE__ */ new Set()
+	};
+	drawChildren(document.root, cascade(INITIAL_STYLE, declarationsOf(document.root, document), context), viewBox, context);
+	surface.restore();
+}
+const paints = /* @__PURE__ */ new WeakMap();
+/**
+* A read SVG file as a node's `paint`: drawn to fill the node, and the
+* file's own size as the node's when the layout gives it none.
+*
+* The same object for the same file and options, so a node given it
+* again is not drawn again; see `paintValuesEqual`.
+*/
+function svgPaint(document, options = {}) {
+	let byOptions = paints.get(document);
+	if (byOptions === void 0) {
+		byOptions = /* @__PURE__ */ new Map();
+		paints.set(document, byOptions);
+	}
+	const key = JSON.stringify([options.fit ?? "contain", options.color ?? "currentColor"]);
+	let paint = byOptions.get(key);
+	if (paint === void 0) {
+		paint = {
+			draw: (surface, box) => drawSvg(document, surface, box, options),
+			inputs: [document, key],
+			intrinsicWidth: document.width,
+			intrinsicHeight: document.height
+		};
+		byOptions.set(key, paint);
+	}
+	return paint;
+}
+const BLACK = {
+	kind: "color",
+	color: {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 1
+	}
+};
+const NONE = { kind: "none" };
+const INITIAL_STYLE = {
+	fill: BLACK,
+	fillOpacity: 1,
+	fillRule: "nonzero",
+	stroke: NONE,
+	strokeOpacity: 1,
+	strokeWidth: 1,
+	lineCap: "butt",
+	lineJoin: "miter",
+	miterLimit: 4,
+	dash: [],
+	dashOffset: 0,
+	clipRule: "nonzero",
+	color: null,
+	visible: true
+};
+/** Drawn only when something points at them, or not at all. */
+const NOT_DRAWN = /* @__PURE__ */ new Set([
+	"defs",
+	"clipPath",
+	"linearGradient",
+	"radialGradient",
+	"symbol",
+	"style",
+	"title",
+	"desc",
+	"metadata",
+	"mask",
+	"filter",
+	"pattern",
+	"marker",
+	"text",
+	"image",
+	"foreignObject"
+]);
+function drawChildren(element, style, viewport, context) {
+	for (const child of element.children) drawElement(child, style, viewport, context);
+}
+function drawElement(element, inherited, viewport, context) {
+	const name = localName(element.name);
+	if (NOT_DRAWN.has(name)) return;
+	const declared = declarationsOf(element, context.document);
+	if (declared.display === "none") return;
+	const style = cascade(inherited, declared, context);
+	const { surface } = context;
+	surface.save();
+	if (declared.transform !== void 0) applyTransform$1(surface, declared.transform);
+	const opacity = unit(declared.opacity);
+	if (opacity < 1) surface.alpha(opacity);
+	if (declared["clip-path"] !== void 0) clipTo(declared["clip-path"], viewport, context);
+	const content = (at) => {
+		switch (name) {
+			case "g":
+			case "a":
+			case "switch":
+				drawChildren(element, style, viewport, at);
+				break;
+			case "svg":
+				drawNested(element, style, viewport, at);
+				break;
+			case "use":
+				drawUse(element, style, viewport, at);
+				break;
+			default: {
+				const shape = shapeOf(element, name, viewport);
+				if (shape !== null && style.visible) paintShape(shape, style, viewport, at);
+			}
+		}
+	};
+	const filtered = () => {
+		const filter = declared.filter === void 0 ? void 0 : referencedElement(declared.filter, "filter", context);
+		const shadow = filter === void 0 ? void 0 : dropShadowOf(filter);
+		if (filter === void 0 || shadow === void 0) content(context);
+		else drawWithShadow(element, filter, shadow, style, viewport, context, content);
+	};
+	const mask = declared.mask === void 0 ? void 0 : referencedElement(declared.mask, "mask", context);
+	if (mask === void 0 || context.using.has(mask)) filtered();
+	else drawMasked(element, mask, viewport, context, filtered);
+	surface.restore();
+}
+/** The element of a kind that a `url(#id)` value names, if it is one. */
+function referencedElement(value, kind, context) {
+	const id = referencedId(value);
+	const target = id === void 0 ? void 0 : context.document.ids.get(id);
+	return target !== void 0 && localName(target.name) === kind ? target : void 0;
+}
+/**
+* Draws an element through a `<mask>`: its drawing is a layer, and the
+* mask's children, drawn into the layer's mask, say how much of it
+* shows. By their luminance, or by their alpha for `mask-type: alpha`.
+*
+* The mask's region and its content are placed in the element's user
+* space or in fractions of its bounding box, as `maskUnits` and
+* `maskContentUnits` say; the region is cut to as the layer is.
+*/
+function drawMasked(element, mask, viewport, context, draw) {
+	const { surface } = context;
+	const attributes = mask.attributes;
+	const declared = declarationsOf(mask, context.document);
+	const bounds = attributes.maskUnits === "userSpaceOnUse" && attributes.maskContentUnits !== "objectBoundingBox" ? void 0 : elementBounds(element, viewport, context);
+	const region = regionOf(attributes, attributes.maskUnits === "userSpaceOnUse", bounds, viewport);
+	surface.beginMaskedLayer(region.x, region.y, region.width, region.height);
+	draw();
+	surface.layerMask(declared["mask-type"] === "alpha" ? "alpha" : "luminance");
+	if (attributes.maskContentUnits === "objectBoundingBox") surface.transform(bounds.width, 0, 0, bounds.height, bounds.x, bounds.y);
+	const root = cascade(INITIAL_STYLE, declarationsOf(context.document.root, context.document), context);
+	context.using.add(mask);
+	drawChildren(mask, cascade(root, declared, context), viewport, {
+		...context,
+		flood: void 0
+	});
+	context.using.delete(mask);
+	surface.endMaskedLayer();
+}
+/**
+* Draws an element with the drop shadow its filter is, and then the
+* element over it, both cut to the filter's region as a filter's result
+* is.
+*
+* The shadow is the element again, every paint of it the flood colour,
+* moved by `dx` and `dy` and blurred by `stdDeviation`: its alpha in
+* the flood colour, which is what `<feDropShadow>` makes. It is drawn
+* as a layer composited at the flood opacity, so where two of a group's
+* shapes overlap their shadow is not darker; a host without layers
+* draws it shape by shape, which differs only there.
+*/
+function drawWithShadow(element, filter, shadow, style, viewport, context, draw) {
+	const { surface } = context;
+	const attributes = filter.attributes;
+	const userSpace = attributes.filterUnits === "userSpaceOnUse";
+	const primitivesInBox = attributes.primitiveUnits === "objectBoundingBox";
+	const bounds = userSpace && !primitivesInBox ? void 0 : elementBounds(element, viewport, context);
+	const region = regionOf(attributes, userSpace, bounds, viewport);
+	if (!(region.width > 0) || !(region.height > 0)) return;
+	const declared = declarationsOf(shadow, context.document);
+	const number = (value, fallback) => {
+		const parsed = value === void 0 ? NaN : parseFloat(value);
+		return Number.isFinite(parsed) ? parsed : fallback;
+	};
+	let dx = number(declared.dx, 2);
+	let dy = number(declared.dy, 2);
+	const [sx, sy] = numbersIn(declared.stdDeviation ?? "2");
+	let deviation = Math.max(0, sy === void 0 ? sx ?? 2 : ((sx ?? 0) + sy) / 2);
+	if (primitivesInBox) {
+		dx *= bounds.width;
+		dy *= bounds.height;
+		deviation *= Math.sqrt((bounds.width ** 2 + bounds.height ** 2) / 2);
+	}
+	const color = colorValue(declared["flood-color"] ?? "black", style, context) ?? BLACK_COLOR;
+	const opacity = unit(declared["flood-opacity"]);
+	surface.save();
+	surface.beginPath();
+	surface.rect(region.x, region.y, region.width, region.height);
+	surface.clip();
+	if (opacity > 0) {
+		surface.save();
+		if (opacity < 1) surface.alpha(opacity);
+		surface.beginMaskedLayer(region.x, region.y, region.width, region.height);
+		surface.translate(dx, dy);
+		if (deviation > 0) surface.blur(deviation);
+		draw({
+			...context,
+			flood: color
+		});
+		surface.endMaskedLayer();
+		surface.restore();
+	}
+	draw(context);
+	surface.restore();
+}
+/**
+* A mask's or a filter's region: its `x`, `y`, `width` and `height` in
+* user space, or in fractions of the element's bounding box, which is
+* where they are by default and where they default to a tenth beyond
+* it on every side.
+*/
+function regionOf(attributes, userSpace, bounds, viewport) {
+	if (userSpace) return {
+		x: length(attributes.x ?? "-10%", viewport.width),
+		y: length(attributes.y ?? "-10%", viewport.height),
+		width: length(attributes.width ?? "120%", viewport.width),
+		height: length(attributes.height ?? "120%", viewport.height)
+	};
+	const box = bounds;
+	return {
+		x: box.x + fraction(attributes.x ?? "-10%") * box.width,
+		y: box.y + fraction(attributes.y ?? "-10%") * box.height,
+		width: fraction(attributes.width ?? "120%") * box.width,
+		height: fraction(attributes.height ?? "120%") * box.height
+	};
+}
+/** A fraction written as a number or a percentage: `0.5` and `50%` alike. */
+function fraction(value) {
+	const trimmed = value.trim();
+	const parsed = trimmed.endsWith("%") ? parseFloat(trimmed) / 100 : parseFloat(trimmed);
+	return Number.isFinite(parsed) ? parsed : 0;
+}
+/**
+* An element's bounding box in its own user space, as `getBBox` gives
+* it: its geometry and its children's through their transforms, without
+* a stroke and without its own transform.
+*/
+function elementBounds(element, viewport, context) {
+	const bounds = new BoundsSurface();
+	addBounds(element, IDENTITY$1, viewport, context, bounds, /* @__PURE__ */ new Set());
+	return bounds.bounds();
+}
+function addBounds(element, matrix, viewport, context, bounds, using) {
+	const name = localName(element.name);
+	const into = new TransformedSurface(bounds, matrix);
+	/** A child, or a used element, under its own transform. */
+	const add = (child, at) => {
+		const declared = declarationsOf(child, context.document);
+		if (declared.display === "none") return;
+		addBounds(child, declared.transform === void 0 ? at : multiply(at, parseTransform$1(declared.transform)), viewport, context, bounds, using);
+	};
+	switch (name) {
+		case "g":
+		case "a":
+		case "switch":
+			for (const child of element.children) if (!NOT_DRAWN.has(localName(child.name))) add(child, matrix);
+			return;
+		case "use": {
+			const target = referenced(element, context.document);
+			if (target === void 0 || using.has(element)) return;
+			using.add(element);
+			add(target, multiply(matrix, [
+				1,
+				0,
+				0,
+				1,
+				length(element.attributes.x, viewport.width),
+				length(element.attributes.y, viewport.height)
+			]));
+			using.delete(element);
+			return;
+		}
+		case "svg":
+		case "symbol": {
+			const a = element.attributes;
+			into.rect(length(a.x, viewport.width), length(a.y, viewport.height), length(a.width ?? "100%", viewport.width), length(a.height ?? "100%", viewport.height));
+			return;
+		}
+		default: shapeOf(element, name, viewport)?.trace(into);
+	}
+}
+/** A nested `<svg>`: a viewport of its own, at its x and y. */
+function drawNested(element, style, viewport, context) {
+	const { surface } = context;
+	const x = length(element.attributes.x, viewport.width);
+	const y = length(element.attributes.y, viewport.height);
+	const width = length(element.attributes.width ?? "100%", viewport.width);
+	const height = length(element.attributes.height ?? "100%", viewport.height);
+	const viewBox = parseViewBox(element.attributes.viewBox);
+	surface.translate(x, y);
+	if (viewBox !== void 0) {
+		const scale = Math.min(width / viewBox.width, height / viewBox.height);
+		surface.translate((width - viewBox.width * scale) / 2, (height - viewBox.height * scale) / 2);
+		surface.scale(scale, scale);
+		surface.translate(-viewBox.x, -viewBox.y);
+	}
+	drawChildren(element, style, viewBox ?? {
+		x: 0,
+		y: 0,
+		width,
+		height
+	}, context);
+}
+/** A `<use>`: the element it names, drawn at its x and y, inheriting from the `<use>`. */
+function drawUse(element, style, viewport, context) {
+	const target = referenced(element, context.document);
+	if (target === void 0 || context.using.has(element)) return;
+	const { surface } = context;
+	surface.translate(length(element.attributes.x, viewport.width), length(element.attributes.y, viewport.height));
+	context.using.add(element);
+	if (localName(target.name) === "symbol") drawNested(target, style, viewport, context);
+	else {
+		const name = localName(target.name);
+		if (name === "g" || name === "svg" || name === "use" || !NOT_DRAWN.has(name)) drawElement(target, style, viewport, context);
+	}
+	context.using.delete(element);
+}
+function referenced(element, document) {
+	const href = element.attributes.href ?? element.attributes["xlink:href"];
+	return href?.startsWith("#") ? document.ids.get(href.slice(1)) : void 0;
+}
+function shapeOf(element, name, viewport) {
+	const a = element.attributes;
+	const w = viewport.width;
+	const h = viewport.height;
+	const diagonal = Math.sqrt((w * w + h * h) / 2);
+	switch (name) {
+		case "path": {
+			const d = a.d;
+			return d === void 0 || d.trim() === "" ? null : { trace: (surface) => surface.path(d) };
+		}
+		case "rect": {
+			const x = length(a.x, w);
+			const y = length(a.y, h);
+			const width = length(a.width, w);
+			const height = length(a.height, h);
+			if (width <= 0 || height <= 0) return null;
+			const rx = a.rx === void 0 ? void 0 : length(a.rx, w);
+			const ry = a.ry === void 0 ? void 0 : length(a.ry, h);
+			const radius = Math.min(rx ?? ry ?? 0, ry ?? rx ?? 0);
+			return { trace: (surface) => radius > 0 ? surface.roundRect(x, y, width, height, radius) : surface.rect(x, y, width, height) };
+		}
+		case "circle": return ellipse(length(a.cx, w), length(a.cy, h), length(a.r, diagonal), length(a.r, diagonal));
+		case "ellipse": return ellipse(length(a.cx, w), length(a.cy, h), length(a.rx, w), length(a.ry, h));
+		case "line": {
+			const [x1, y1, x2, y2] = [
+				length(a.x1, w),
+				length(a.y1, h),
+				length(a.x2, w),
+				length(a.y2, h)
+			];
+			return { trace: (surface) => {
+				surface.moveTo(x1, y1);
+				surface.lineTo(x2, y2);
+			} };
+		}
+		case "polyline":
+		case "polygon": {
+			const points = numbersIn(a.points ?? "");
+			if (points.length < 4) return null;
+			return { trace: (surface) => {
+				surface.moveTo(points[0], points[1]);
+				for (let i = 2; i + 1 < points.length; i += 2) surface.lineTo(points[i], points[i + 1]);
+				if (name === "polygon") surface.closePath();
+			} };
+		}
+		default: return null;
+	}
+}
+/** An ellipse as two arcs of path data, which the surface turns into curves. */
+function ellipse(cx, cy, rx, ry) {
+	if (rx <= 0 || ry <= 0) return null;
+	const d = `M${cx - rx} ${cy}A${rx} ${ry} 0 1 0 ${cx + rx} ${cy}A${rx} ${ry} 0 1 0 ${cx - rx} ${cy}Z`;
+	return { trace: (surface) => surface.path(d) };
+}
+function paintShape(shape, style, viewport, context) {
+	const { surface } = context;
+	surface.beginPath();
+	shape.trace(surface);
+	if (style.fill.kind !== "none" && style.fillOpacity > 0) {
+		surface.save();
+		if (style.fillOpacity < 1) surface.alpha(style.fillOpacity);
+		if (setPaint(style.fill, "fill", shape, style, viewport, context)) surface.fill(style.fillRule);
+		surface.restore();
+	}
+	if (style.stroke.kind !== "none" && style.strokeOpacity > 0 && style.strokeWidth > 0) {
+		surface.save();
+		if (style.strokeOpacity < 1) surface.alpha(style.strokeOpacity);
+		if (setPaint(style.stroke, "stroke", shape, style, viewport, context)) {
+			surface.lineWidth(style.strokeWidth);
+			surface.lineCap(style.lineCap);
+			surface.lineJoin(style.lineJoin);
+			surface.miterLimit(style.miterLimit);
+			if (style.dash.length > 0) surface.lineDash(style.dash, style.dashOffset);
+			surface.stroke();
+		}
+		surface.restore();
+	}
+}
+/**
+* Sets a fill or a stroke on the surface. False when there is nothing
+* to draw with: a gradient with no stops, or a reference to nothing and
+* no fallback.
+*
+* A gradient stroke is drawn in its last stop's colour, because the
+* surface strokes only in a colour.
+*/
+function setPaint(paint, role, shape, style, viewport, context) {
+	if (paint.kind === "none") return false;
+	if (context.flood !== void 0) {
+		if (role === "fill") context.surface.fillColor(context.flood);
+		else context.surface.strokeColor(context.flood);
+		return true;
+	}
+	if (paint.kind === "color") {
+		if (role === "fill") context.surface.fillColor(paint.color);
+		else context.surface.strokeColor(paint.color);
+		return true;
+	}
+	const target = context.document.ids.get(paint.id);
+	const gradient = target === void 0 ? void 0 : gradientOf(target, shape, style, viewport, context);
+	if (gradient === void 0) return setPaint(paint.fallback, role, shape, style, viewport, context);
+	if (gradient.stops.length === 0) return false;
+	if (role === "stroke" || gradient.stops.length === 1) {
+		const color = gradient.stops.at(-1).color;
+		if (role === "fill") context.surface.fillColor(color);
+		else context.surface.strokeColor(color);
+		return true;
+	}
+	context.surface.fillGradient(gradient.paint, gradient.rect.x, gradient.rect.y, gradient.rect.width, gradient.rect.height);
+	return true;
+}
+/**
+* An SVG gradient as Gesso's, and the rectangle to place it in.
+*
+* SVG gives a linear gradient as the two ends of its line and Gesso as
+* an angle across a rectangle, CSS's way, so the rectangle is chosen to
+* make the two agree: a square about the line's midpoint whose
+* gradient line, at that angle, is exactly as long as the SVG's. A
+* radial one is its centre and radius in pixels, placed at the origin.
+*/
+function gradientOf(element, shape, style, viewport, context) {
+	const name = localName(element.name);
+	if (name !== "linearGradient" && name !== "radialGradient") return;
+	const attributes = gradientAttributes(element, context.document);
+	const stops = gradientStops(element, style, context);
+	const userSpace = attributes.gradientUnits === "userSpaceOnUse";
+	const box = userSpace ? viewport : boundsOf(shape);
+	const matrix = attributes.gradientTransform === void 0 ? IDENTITY$1 : parseTransform$1(attributes.gradientTransform);
+	/** A point in the gradient's units, in the drawing's. */
+	const place = (x, y, fallbackX, fallbackY) => {
+		const u = gradientLength(x ?? fallbackX, userSpace, viewport.width);
+		const v = gradientLength(y ?? fallbackY, userSpace, viewport.height);
+		const [tx, ty] = apply(matrix, u, v);
+		return userSpace ? [tx, ty] : [box.x + tx * box.width, box.y + ty * box.height];
+	};
+	if (name === "linearGradient") {
+		const [x1, y1] = place(attributes.x1, attributes.y1, "0%", "0%");
+		const [x2, y2] = place(attributes.x2, attributes.y2, "100%", "0%");
+		const dx = x2 - x1;
+		const dy = y2 - y1;
+		const span = Math.hypot(dx, dy);
+		if (span === 0) return {
+			paint: {
+				kind: "linear",
+				angle: 0,
+				stops: stops.slice(-1)
+			},
+			stops: stops.slice(-1),
+			rect: box
+		};
+		const angle = Math.atan2(dx, -dy);
+		const side = span / (Math.abs(Math.sin(angle)) + Math.abs(Math.cos(angle)));
+		return {
+			paint: {
+				kind: "linear",
+				angle,
+				stops
+			},
+			stops,
+			rect: {
+				x: (x1 + x2) / 2 - side / 2,
+				y: (y1 + y2) / 2 - side / 2,
+				width: side,
+				height: side
+			}
+		};
+	}
+	const [cx, cy] = place(attributes.cx, attributes.cy, "50%", "50%");
+	const radius = gradientLength(attributes.r ?? "50%", userSpace, Math.sqrt((viewport.width ** 2 + viewport.height ** 2) / 2)) * Math.sqrt(Math.abs(matrix[0] * matrix[3] - matrix[1] * matrix[2])) * (userSpace ? 1 : (box.width + box.height) / 2);
+	if (radius <= 0) return {
+		paint: {
+			kind: "radial",
+			stops: stops.slice(-1)
+		},
+		stops: stops.slice(-1),
+		rect: box
+	};
+	return {
+		paint: {
+			kind: "radial",
+			centerX: cx,
+			centerY: cy,
+			radius,
+			stops
+		},
+		stops,
+		rect: {
+			x: 0,
+			y: 0,
+			width: 1,
+			height: 1
+		}
+	};
+}
+/** A gradient's attributes, with the ones it inherits through `href` from the gradient it names. */
+function gradientAttributes(element, document) {
+	const chain = [];
+	for (let at = element; at !== void 0 && !chain.includes(at); at = referenced(at, document)) chain.push(at);
+	return Object.assign({}, ...chain.reverse().map((link) => link.attributes));
+}
+/** Its stops, or those of the gradient it names when it has none. */
+function gradientStops(element, style, context) {
+	const seen = [];
+	let at = element;
+	while (at !== void 0 && !seen.includes(at)) {
+		seen.push(at);
+		const stops = at.children.filter((child) => localName(child.name) === "stop");
+		if (stops.length > 0) {
+			let last = 0;
+			return stops.map((stop) => {
+				const declared = declarationsOf(stop, context.document);
+				const raw = declared.offset ?? "0";
+				const offset = Math.max(last, Math.min(1, raw.trim().endsWith("%") ? parseFloat(raw) / 100 : parseFloat(raw) || 0));
+				last = offset;
+				const color = colorValue(declared["stop-color"] ?? "black", style, context) ?? BLACK_COLOR;
+				return {
+					offset: percent(offset * 100),
+					color: withOpacity(color, unit(declared["stop-opacity"]))
+				};
+			});
+		}
+		at = referenced(at, context.document);
+	}
+	return [];
+}
+const BLACK_COLOR = {
+	r: 0,
+	g: 0,
+	b: 0,
+	a: 1
+};
+function withOpacity(color, opacity) {
+	if (opacity >= 1 || typeof color === "string") return color;
+	return {
+		...color,
+		a: color.a * opacity
+	};
+}
+/** A gradient coordinate: a fraction of the box, or pixels in user space. */
+function gradientLength(value, userSpace, extent) {
+	const trimmed = value.trim();
+	if (trimmed.endsWith("%")) {
+		const fraction = parseFloat(trimmed) / 100;
+		return userSpace ? fraction * extent : fraction;
+	}
+	return parseFloat(trimmed) || 0;
+}
+/** The box a shape's outline and control points lie in, for a gradient sized to it. */
+function boundsOf(shape) {
+	const bounds = new BoundsSurface();
+	shape.trace(bounds);
+	return bounds.bounds();
+}
+/** A surface that only notes where a path goes. */
+var BoundsSurface = class {
+	minX = Infinity;
+	minY = Infinity;
+	maxX = -Infinity;
+	maxY = -Infinity;
+	note(x, y) {
+		this.minX = Math.min(this.minX, x);
+		this.minY = Math.min(this.minY, y);
+		this.maxX = Math.max(this.maxX, x);
+		this.maxY = Math.max(this.maxY, y);
+	}
+	bounds() {
+		if (this.minX > this.maxX) return {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		};
+		return {
+			x: this.minX,
+			y: this.minY,
+			width: this.maxX - this.minX,
+			height: this.maxY - this.minY
+		};
+	}
+	moveTo(x, y) {
+		this.note(x, y);
+	}
+	lineTo(x, y) {
+		this.note(x, y);
+	}
+	quadraticCurveTo(cx, cy, x, y) {
+		this.note(cx, cy);
+		this.note(x, y);
+	}
+	bezierCurveTo(c1x, c1y, c2x, c2y, x, y) {
+		this.note(c1x, c1y);
+		this.note(c2x, c2y);
+		this.note(x, y);
+	}
+	arc(x, y, radius) {
+		this.note(x - radius, y - radius);
+		this.note(x + radius, y + radius);
+	}
+	rect(x, y, width, height) {
+		this.note(x, y);
+		this.note(x + width, y + height);
+	}
+	roundRect(x, y, width, height) {
+		this.rect(x, y, width, height);
+	}
+	closePath() {}
+	path(d) {
+		tracePathData(this, d);
+	}
+};
+/** Intersects the clip with a `<clipPath>`'s shapes, in the drawing's own coordinates. */
+function clipTo(value, viewport, context) {
+	const id = /url\(\s*['"]?#([^'")]+)['"]?\s*\)/.exec(value)?.[1];
+	const clip = id === void 0 ? void 0 : context.document.ids.get(id);
+	if (clip === void 0 || localName(clip.name) !== "clipPath") return;
+	const { surface } = context;
+	surface.beginPath();
+	let rule = "nonzero";
+	const add = (element) => {
+		const name = localName(element.name);
+		const declared = declarationsOf(element, context.document);
+		if (name === "use") {
+			const target = referenced(element, context.document);
+			if (target !== void 0 && localName(target.name) !== "use") add(target);
+			return;
+		}
+		if (name === "g") {
+			element.children.forEach(add);
+			return;
+		}
+		const shape = shapeOf(element, name, viewport);
+		if (shape === null) return;
+		if (declared["clip-rule"] === "evenodd") rule = "evenodd";
+		if (declared.transform !== void 0) {
+			const matrix = parseTransform$1(declared.transform);
+			shape.trace(new TransformedSurface(surface, matrix));
+		} else shape.trace(surface);
+	};
+	clip.children.forEach(add);
+	surface.clip(rule);
+}
+/** Forwards path calls with every point through a matrix. */
+var TransformedSurface = class {
+	target;
+	matrix;
+	constructor(target, matrix) {
+		this.target = target;
+		this.matrix = matrix;
+	}
+	at(x, y) {
+		return apply(this.matrix, x, y);
+	}
+	moveTo(x, y) {
+		this.target.moveTo(...this.at(x, y));
+	}
+	lineTo(x, y) {
+		this.target.lineTo(...this.at(x, y));
+	}
+	quadraticCurveTo(cx, cy, x, y) {
+		this.target.quadraticCurveTo(...this.at(cx, cy), ...this.at(x, y));
+	}
+	bezierCurveTo(c1x, c1y, c2x, c2y, x, y) {
+		this.target.bezierCurveTo(...this.at(c1x, c1y), ...this.at(c2x, c2y), ...this.at(x, y));
+	}
+	rect(x, y, width, height) {
+		this.moveTo(x, y);
+		this.lineTo(x + width, y);
+		this.lineTo(x + width, y + height);
+		this.lineTo(x, y + height);
+		this.closePath();
+	}
+	roundRect(x, y, width, height) {
+		this.rect(x, y, width, height);
+	}
+	closePath() {
+		this.target.closePath();
+	}
+	path(d) {
+		tracePathData(this, d);
+	}
+};
+/**
+* What an element declares, in the cascade's order: its presentation
+* attributes, then the `<style>` rules that match it by specificity,
+* then its own `style` attribute.
+*/
+function declarationsOf(element, document) {
+	const declared = { ...element.attributes };
+	if (document.rules.length > 0) {
+		const matching = document.rules.map((rule, order) => ({
+			rule,
+			order
+		})).filter(({ rule }) => selectorMatches(rule.selector, element)).sort((a, b) => a.rule.specificity - b.rule.specificity || a.order - b.order);
+		for (const { rule } of matching) Object.assign(declared, rule.declarations);
+	}
+	if (element.attributes.style !== void 0) Object.assign(declared, parseDeclarations(element.attributes.style));
+	return declared;
+}
+/** The inherited style at an element, from its parent's and what it declares. */
+function cascade(parent, declared, context) {
+	const color = declared.color === void 0 || declared.color === "inherit" ? parent.color : colorValue(declared.color, parent, context) ?? parent.color;
+	const here = {
+		...parent,
+		color
+	};
+	const pick = (key, property, read) => {
+		const value = declared[property];
+		return value === void 0 || value === "inherit" ? here[key] : read(value) ?? here[key];
+	};
+	const number = (value) => {
+		const parsed = parseFloat(value);
+		return Number.isFinite(parsed) ? parsed : void 0;
+	};
+	return {
+		...here,
+		fill: pick("fill", "fill", (value) => paintValue(value, here, context)),
+		fillOpacity: pick("fillOpacity", "fill-opacity", (value) => unit(value)),
+		fillRule: pick("fillRule", "fill-rule", (value) => value === "evenodd" ? "evenodd" : "nonzero"),
+		stroke: pick("stroke", "stroke", (value) => paintValue(value, here, context)),
+		strokeOpacity: pick("strokeOpacity", "stroke-opacity", (value) => unit(value)),
+		strokeWidth: pick("strokeWidth", "stroke-width", number),
+		lineCap: pick("lineCap", "stroke-linecap", (value) => value === "round" || value === "square" || value === "butt" ? value : void 0),
+		lineJoin: pick("lineJoin", "stroke-linejoin", (value) => value === "round" || value === "bevel" || value === "miter" ? value : value === "arcs" || value === "miter-clip" ? "miter" : void 0),
+		miterLimit: pick("miterLimit", "stroke-miterlimit", number),
+		dash: pick("dash", "stroke-dasharray", (value) => {
+			if (value === "none") return [];
+			const segments = numbersIn(value);
+			if (segments.some((segment) => segment < 0) || segments.every((segment) => segment === 0)) return [];
+			return segments.length % 2 === 1 ? [...segments, ...segments] : segments;
+		}),
+		dashOffset: pick("dashOffset", "stroke-dashoffset", number),
+		clipRule: pick("clipRule", "clip-rule", (value) => value === "evenodd" ? "evenodd" : "nonzero"),
+		visible: pick("visible", "visibility", (value) => value === "visible" || value === "inherit" ? true : value === "hidden" || value === "collapse" ? false : void 0)
+	};
+}
+function paintValue(value, style, context) {
+	const trimmed = value.trim();
+	if (trimmed === "none" || trimmed === "transparent") return NONE;
+	const reference = /^url\(\s*['"]?#([^'")]+)['"]?\s*\)\s*(.*)$/.exec(trimmed);
+	if (reference !== null) {
+		const fallback = reference[2] === "" || reference[2] === void 0 ? NONE : paintValue(reference[2], style, context) ?? NONE;
+		return {
+			kind: "ref",
+			id: reference[1],
+			fallback
+		};
+	}
+	const color = colorValue(trimmed, style, context);
+	return color === void 0 ? void 0 : {
+		kind: "color",
+		color
+	};
+}
+/** A colour, with `currentColor` resolved to whatever it is here. */
+function colorValue(value, style, context) {
+	const trimmed = value.trim();
+	if (trimmed.toLowerCase() === "currentcolor") return style.color ?? context.currentColor;
+	return parseColor(trimmed);
+}
+/** An opacity: a number or a percentage, clamped to 0..1, and 1 when absent. */
+function unit(value) {
+	if (value === void 0) return 1;
+	const trimmed = value.trim();
+	const parsed = trimmed.endsWith("%") ? parseFloat(trimmed) / 100 : parseFloat(trimmed);
+	return Number.isFinite(parsed) ? Math.max(0, Math.min(1, parsed)) : 1;
+}
+/** A length in the drawing's units, a percentage being of `extent`. */
+function length(value, extent) {
+	if (value === void 0) return 0;
+	const trimmed = value.trim();
+	if (trimmed.endsWith("%")) return parseFloat(trimmed) / 100 * extent;
+	const parsed = parseFloat(trimmed);
+	return Number.isFinite(parsed) ? parsed : 0;
+}
+const IDENTITY$1 = [
+	1,
+	0,
+	0,
+	1,
+	0,
+	0
+];
+function multiply(m, n) {
+	return [
+		m[0] * n[0] + m[2] * n[1],
+		m[1] * n[0] + m[3] * n[1],
+		m[0] * n[2] + m[2] * n[3],
+		m[1] * n[2] + m[3] * n[3],
+		m[0] * n[4] + m[2] * n[5] + m[4],
+		m[1] * n[4] + m[3] * n[5] + m[5]
+	];
+}
+function apply(m, x, y) {
+	return [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
+}
+/** A `transform` list as one matrix, its functions applied left to right as SVG says. */
+function parseTransform$1(value) {
+	let matrix = IDENTITY$1;
+	for (const match of value.matchAll(/(matrix|translate|scale|rotate|skewX|skewY)\s*\(([^)]*)\)/g)) {
+		const args = numbersIn(match[2]);
+		let step = IDENTITY$1;
+		switch (match[1]) {
+			case "matrix":
+				if (args.length >= 6) step = [
+					args[0],
+					args[1],
+					args[2],
+					args[3],
+					args[4],
+					args[5]
+				];
+				break;
+			case "translate":
+				step = [
+					1,
+					0,
+					0,
+					1,
+					args[0] ?? 0,
+					args[1] ?? 0
+				];
+				break;
+			case "scale":
+				step = [
+					args[0] ?? 1,
+					0,
+					0,
+					args[1] ?? args[0] ?? 1,
+					0,
+					0
+				];
+				break;
+			case "rotate": {
+				const angle = (args[0] ?? 0) * Math.PI / 180;
+				const cos = Math.cos(angle);
+				const sin = Math.sin(angle);
+				const [cx, cy] = [args[1] ?? 0, args[2] ?? 0];
+				step = multiply(multiply([
+					1,
+					0,
+					0,
+					1,
+					cx,
+					cy
+				], [
+					cos,
+					sin,
+					-sin,
+					cos,
+					0,
+					0
+				]), [
+					1,
+					0,
+					0,
+					1,
+					-cx,
+					-cy
+				]);
+				break;
+			}
+			case "skewX":
+				step = [
+					1,
+					0,
+					Math.tan((args[0] ?? 0) * Math.PI / 180),
+					1,
+					0,
+					0
+				];
+				break;
+			case "skewY": step = [
+				1,
+				Math.tan((args[0] ?? 0) * Math.PI / 180),
+				0,
+				1,
+				0,
+				0
+			];
+		}
+		matrix = multiply(matrix, step);
+	}
+	return matrix;
+}
+function applyTransform$1(surface, value) {
+	const [a, b, c, d, e, f] = parseTransform$1(value);
+	surface.transform(a, b, c, d, e, f);
+}
+//#endregion
+//#region src/rendering/svg/SvgResolver.ts
+/**
+* Whether a source is an SVG file, from its name or its data URL's
+* type: what `Image` asks before it decodes, since the platform
+* decoder refuses SVG and this one draws it.
+*/
+function isSvgSource(source) {
+	if (/^data:image\/svg\+xml[;,]/i.test(source)) return true;
+	const path = source.split(/[?#]/)[0] ?? "";
+	return /\.svgz?$/i.test(path);
+}
+const DEFAULT_CAPACITY$3 = 64;
+/**
+* Fetch, read, keep.
+*
+* Kept by recency and never closed, unlike a bitmap: a read file holds
+* no decoded pixels, so there is nothing to release promptly, and a
+* file a screen shows a hundred times (an icon in every row) is read
+* once. A failed fetch is not kept, so the next node tries again.
+*/
+var DefaultSvgResolver = class {
+	entries = /* @__PURE__ */ new Map();
+	settled = /* @__PURE__ */ new Map();
+	capacity;
+	fetchText;
+	constructor(options = {}) {
+		this.capacity = options.capacity ?? DEFAULT_CAPACITY$3;
+		this.fetchText = options.fetch ?? defaultFetch$2;
+	}
+	resolve(source) {
+		const existing = this.entries.get(source);
+		if (existing !== void 0) {
+			this.entries.delete(source);
+			this.entries.set(source, existing);
+			return existing;
+		}
+		const entry = this.fetchText(source).then((text) => {
+			const document = parseSvg(text);
+			if (this.entries.get(source) === entry) this.settled.set(source, document);
+			return document;
+		}).catch((error) => {
+			if (this.entries.get(source) === entry) this.entries.delete(source);
+			throw error;
+		});
+		entry.catch(() => {});
+		this.entries.set(source, entry);
+		while (this.entries.size > this.capacity) {
+			const oldest = this.entries.keys().next().value;
+			this.entries.delete(oldest);
+			this.settled.delete(oldest);
+		}
+		return entry;
+	}
+	peek(source) {
+		return this.settled.get(source) ?? null;
+	}
+};
+async function defaultFetch$2(source) {
+	const response = await fetch(source);
+	if (!response.ok) throw new Error(`Fetching the SVG '${source}' failed with ${response.status} ${response.statusText}.`);
+	return response.text();
+}
+//#endregion
 //#region src/modifiers/media.ts
 /**
 * A value or an Observable of one, as one Observable. The media
@@ -6870,6 +8399,29 @@ function numberOr(value, fallback) {
 function follow(value) {
 	return isObservable$1(value) ? value : of(value);
 }
+/** Pictures this thread's media modifiers are fetching or decoding now. */
+let inFlight = 0;
+/**
+* How many pictures the media modifiers in this thread are still
+* fetching or decoding: an `Image`'s bitmap or its SVG.
+*
+* A tree waiting on a picture asks for no frames while it waits, so a
+* caller that judges a tree finished by its quiet (`renderFrame`, which
+* draws a mock once, off screen) would draw it without the picture.
+* This is the other half of finished: nothing still on its way.
+*/
+function mediaLoadsInFlight() {
+	return inFlight;
+}
+/** Counts a load from its start until it settles, either way. */
+function counted(loading) {
+	inFlight++;
+	const done = () => {
+		inFlight--;
+	};
+	loading.then(done, done);
+	return loading;
+}
 /**
 * Resolves a source to a bitmap and writes it onto the node's `image`.
 *
@@ -6905,6 +8457,8 @@ function load$1(host, args, sources) {
 	let held = null;
 	args.onState?.("loading");
 	host.clear("image");
+	host.clear("paint");
+	host.clear("src");
 	const attempt = (index, lastError) => {
 		if (!live) return;
 		const source = sources[index];
@@ -6912,16 +8466,22 @@ function load$1(host, args, sources) {
 			args.onState?.("failed", lastError ?? /* @__PURE__ */ new Error("No image source was given."));
 			return;
 		}
+		if (args.vectors !== void 0 && isSvgSource(source)) {
+			drawVector(host, args, args.vectors, source, () => live, (error) => attempt(index + 1, error));
+			return;
+		}
 		held = source;
 		const ready = args.resolver.peek?.(source) ?? null;
 		if (ready !== null) {
 			host.set("image", ready);
+			host.set("src", source);
 			args.onState?.("loaded");
 			return;
 		}
-		args.resolver.resolve(source).then((bitmap) => {
+		counted(args.resolver.resolve(source)).then((bitmap) => {
 			if (!live) return;
 			host.set("image", bitmap);
+			host.set("src", source);
 			args.onState?.("loaded");
 		}).catch((error) => {
 			if (held === source) held = null;
@@ -6937,6 +8497,36 @@ function load$1(host, args, sources) {
 		}
 	};
 }
+/** SVG sources already warned about, so a file shown in every row says what it lacks once. */
+const warnedSvg = /* @__PURE__ */ new Set();
+/**
+* An SVG source, read and set as the node's `paint`: vectors, drawn at
+* whatever size the node is laid out at, with `currentColor` the
+* node's inherited text colour. Nothing is held, because a read file
+* holds no pixels to release.
+*/
+function drawVector(host, args, vectors, source, live, fail) {
+	const show = (document) => {
+		const fit = host.node.getProperty("objectFit") ?? "contain";
+		host.set("paint", svgPaint(document, { fit }));
+		host.set("src", source);
+		if (document.unsupported.length > 0 && !warnedSvg.has(source)) {
+			warnedSvg.add(source);
+			console.warn(`[gesso] ${source.slice(0, 80)} uses ${document.unsupported.join(", ")}, which Gesso does not draw yet; the rest of it is drawn.`);
+		}
+		args.onState?.("loaded");
+	};
+	const ready = vectors.peek?.(source) ?? null;
+	if (ready !== null) {
+		show(ready);
+		return;
+	}
+	counted(vectors.resolve(source)).then((document) => {
+		if (live()) show(document);
+	}, (error) => {
+		if (live()) fail(error);
+	});
+}
 function sameSources(a, b) {
 	if (typeof a === "string" || typeof b === "string") return a === b;
 	return a.length === b.length && a.every((url, index) => url === b[index]);
@@ -7243,14 +8833,14 @@ var MotionLayer = class {
 	}
 	drive(cell, to, timing) {
 		if (timing.spring !== void 0) return this.host.spring(cell, to, {
-			spring: springSpec(timing.spring),
+			spring: springIn(motionOf(this.host.node), timing.spring),
 			delay: timing.delay,
 			reducedMotion: timing.reducedMotion,
 			restDelta: .002
 		});
 		return this.host.animate(cell, to, {
-			duration: resolveDuration(timing.duration),
-			easing: resolveEasing(timing.easing),
+			duration: durationIn(motionOf(this.host.node), timing.duration),
+			easing: easingIn(motionOf(this.host.node), timing.easing),
 			delay: timing.delay,
 			reducedMotion: timing.reducedMotion
 		});
@@ -7266,17 +8856,6 @@ var MotionLayer = class {
 function channelEpsilon(channel) {
 	return channel === "x" || channel === "y" ? .01 : 1e-4;
 }
-function springSpec(spring) {
-	return typeof spring === "string" ? defaultMotion.springs[spring] : spring;
-}
-function resolveDuration(duration) {
-	if (duration === void 0) return defaultMotion.durations.normal;
-	return typeof duration === "number" ? duration : defaultMotion.durations[duration];
-}
-function resolveEasing(easing) {
-	if (easing === void 0) return easings.standard;
-	return typeof easing === "function" ? easing : easings[easing] ?? easings.standard;
-}
 /**
 * Moves an element to a visual state, and optionally in from another.
 *
@@ -7319,7 +8898,7 @@ var MotionController = class {
 	attach() {
 		this.layer.measure(this.host.flowBox());
 		if (this.args.initial !== void 0) this.layer.snapTo(resolveMotionState(this.args.initial));
-		this.host.onLayout(() => this.layer.measure(this.host.flowBox()));
+		this.host.onFlowLayout(() => this.layer.measure(this.host.flowBox()));
 		this.aim();
 	}
 	update(args) {
@@ -7615,13 +9194,13 @@ var SharedElementController = class {
 			const cell = geometry.cell(field);
 			const to = targets[field];
 			(timing.spring !== void 0 ? this.host.spring(cell, to, {
-				spring: springSpec(timing.spring),
+				spring: springIn(motionOf(this.host.node), timing.spring),
 				delay: timing.delay,
 				reducedMotion: timing.reducedMotion,
 				restDelta: .5
 			}) : this.host.animate(cell, to, {
-				duration: resolveDuration(timing.duration),
-				easing: resolveEasing(timing.easing),
+				duration: durationIn(motionOf(this.host.node), timing.duration),
+				easing: easingIn(motionOf(this.host.node), timing.easing),
 				delay: timing.delay,
 				reducedMotion: timing.reducedMotion
 			})).subscribe({ complete: done });
@@ -8143,7 +9722,7 @@ const scrollPosition = defineModifier({
 				if (settling === 1) args.onSettled?.(offset);
 			} });
 		};
-		host.onLayout(() => {
+		host.onFlowLayout(() => {
 			const offset = host.scrollOffset();
 			if (offset === null || last !== null && last.x === offset.x && last.y === offset.y) return;
 			last = offset;
@@ -8193,7 +9772,7 @@ const publishInset = defineModifier({
 			if (write === null) write = source.publish(insets);
 			else write(insets);
 		};
-		host.onLayout(publish);
+		host.onFlowLayout(publish);
 		publish();
 		host.own(() => {
 			write?.();
@@ -8630,11 +10209,9 @@ const DEFAULT_CAPACITY$2 = 32;
 *
 * **What it cannot decode.** `createImageBitmap` takes a `Blob`, and
 * Chrome refuses an SVG one — "The source image could not be decoded".
-* So an `Image` pointed at an `.svg` fails on a browser where the same
-* file in an `<img>` would work, and a vector glyph belongs in `Icon`,
-* which draws a path rather than decoding a document. Found by
-* pointing the playground's Media card at an SVG data URL and getting
-* a placeholder.
+* Found by pointing the playground's Media card at an SVG data URL and
+* getting a placeholder. So an `Image` never sends one here: an SVG
+* source is read by `SvgResolver` and drawn as vectors (`svg/`).
 *
 * **Eviction.** Reference counting first, LRU second. A bitmap
 * something on screen is holding is never evicted, however long the
@@ -9282,6 +10859,19 @@ fn fs(in: VertexOutput) -> @location(0) vec4f {
   let color = textureSample(tTexture, tSampler, in.uv);
   return vec4f(color.rgb, color.a * in.opacity * alpha);
 }
+
+// An opacity group's layer, blended onto what holds it. The layer was
+// drawn into with the same blend as the frame, so it holds premultiplied
+// colour, and is scaled whole — colour and alpha alike — by the group's
+// opacity and the clip's coverage.
+@fragment
+fn fsLayer(in: VertexOutput) -> @location(0) vec4f {
+  let alpha = clipCoverage(in.position.xy, uView.z, in.clipIndex);
+  if (alpha <= 0.0) {
+    discard;
+  }
+  return textureSample(tTexture, tSampler, in.uv) * (in.opacity * alpha);
+}
 `;
 //#endregion
 //#region src/rendering/webgpu/WebGPUGlyphAtlas.ts
@@ -10109,6 +11699,13 @@ let CommandKind = /* @__PURE__ */ function(CommandKind) {
 	CommandKind[CommandKind["Glyphs"] = 1] = "Glyphs";
 	/** One textured instance drawn with an image. */
 	CommandKind[CommandKind["Image"] = 2] = "Image";
+	/**
+	* Everything until the matching `EndLayer` is drawn into a cleared
+	* layer of its own, the start of an opacity group (`GroupOpacity.ts`).
+	*/
+	CommandKind[CommandKind["BeginLayer"] = 3] = "BeginLayer";
+	/** The layer is done, and is blended onto what holds it at the group's opacity. */
+	CommandKind[CommandKind["EndLayer"] = 4] = "EndLayer";
 	return CommandKind;
 }({});
 const IDENTITY = [
@@ -10223,8 +11820,21 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 			height: logicalHeight
 		}
 	};
-	/** The nodes asking for `lift`, met on the walk and drawn after it. */
+	/**
+	* The nodes asking for `lift`, met on the walk and drawn after it,
+	* with their opacity as a product of everything above them: inside a
+	* layer `state.opacity` counts from the layer, and a lifted node is
+	* drawn outside the layers it was met in.
+	*/
 	const liftedPass = [];
+	/**
+	* The opacity each open layer will be blended at, multiplied out from
+	* the frame: the last entry is what `state.opacity` is relative to.
+	* One entry, 1, while no layer is open.
+	*/
+	const layerOpacities = [1];
+	const physicalWidth = toPhysicalPixels(logicalWidth, dpr);
+	const physicalHeight = toPhysicalPixels(logicalHeight, dpr);
 	function closePrimitives() {
 		const end = instanceData.length / 24;
 		if (end > openStart) commands.push({
@@ -10344,7 +11954,7 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 		if (rec.lifted && !lifted) {
 			liftedPass.push({
 				node,
-				opacity: state.opacity,
+				opacity: state.opacity * layerOpacities[layerOpacities.length - 1],
 				ctm: state.ctm
 			});
 			return;
@@ -10352,9 +11962,33 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 		const sticky = rec.stickyOffsetX !== 0 || rec.stickyOffsetY !== 0;
 		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 layered = paint.opacity < 1 && opacityNeedsLayer(node, rec, paint, layout);
+		const opacity = paint.opacity;
+		const outerOpacity = state.opacity;
+		const outerClip = state.clip;
+		const outerRounded = state.rounded;
+		const effectiveOpacity = layered ? 1 : state.opacity * paint.opacity;
 		const baseCtm = sticky ? translateTransform(state.ctm, rec.stickyOffsetX, rec.stickyOffsetY) : state.ctm;
 		const nodeCtm = paint.hasTransform ? multiplyTransform(baseCtm, buildOwnTransform(rec, paint.transform)) : baseCtm;
+		const region = layered ? layerRegion(node, rec, {
+			a: nodeCtm[0] * dpr,
+			b: nodeCtm[1] * dpr,
+			c: nodeCtm[2] * dpr,
+			d: nodeCtm[3] * dpr,
+			e: nodeCtm[4] * dpr,
+			f: nodeCtm[5] * dpr
+		}, layout, physicalWidth, physicalHeight, dpr) : null;
+		if (layered) {
+			closePrimitives();
+			commands.push({
+				kind: 3,
+				scissor: null
+			});
+			layerOpacities.push(layerOpacities[layerOpacities.length - 1] * outerOpacity * opacity);
+			state.opacity = 1;
+			state.clip = null;
+			state.rounded = -1;
+		}
 		const ownScissor = state.clip;
 		const ownRounded = state.rounded;
 		let nextClip = state.clip;
@@ -10624,6 +12258,24 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 			beginPrimitives(ownScissor);
 			pushScrollbars(instanceData, rec, effectiveOpacity, nodeCtm, ownRounded, now);
 		}
+		if (region !== null) {
+			closePrimitives();
+			layerOpacities.pop();
+			state.opacity = outerOpacity;
+			state.clip = outerClip;
+			state.rounded = outerRounded;
+			const instance = region.width > 0 && region.height > 0 ? pushTextured(texturedData, region.x / dpr, region.y / dpr, region.width / dpr, region.height / dpr, outerOpacity * opacity, IDENTITY, outerRounded, {
+				u: region.x / physicalWidth,
+				v: region.y / physicalHeight,
+				uw: region.width / physicalWidth,
+				vh: region.height / physicalHeight
+			}) : null;
+			commands.push({
+				kind: 4,
+				instance,
+				scissor: outerClip
+			});
+		}
 	}
 	/**
 	* The top layer, drawn once the tree is done: no clip, no scissor,
@@ -10643,7 +12295,7 @@ function buildRenderList(root, layout, measurer, logicalWidth, logicalHeight, dp
 		};
 		for (let i = from; i < liftedPass.length; i++) {
 			const entry = liftedPass[i];
-			state.opacity = entry.opacity;
+			state.opacity = entry.opacity / layerOpacities[layerOpacities.length - 1];
 			state.ctm = entry.ctm;
 			state.clip = clip;
 			state.rounded = rounded;
@@ -10809,7 +12461,7 @@ function pushInstance(out, x, y, width, height, color, radius, opacity, borderWi
 */
 function pushShadows(out, rec, paint, opacity, transform, clip, inset) {
 	const shadows = paint.boxShadows;
-	const radius = borderRadiusIsZero(paint.borderRadius) ? 0 : uniformBorderRadius(paint.borderRadius);
+	const radius = borderRadiusIsZero(paint.borderRadius) ? 0 : fittedShadowRadius(uniformBorderRadius(paint.borderRadius), rec.width, rec.height);
 	for (let i = shadows.length - 1; i >= 0; i--) {
 		const shadow = shadows[i];
 		if (shadow.inset === true !== inset || shadow.color.a <= 0) continue;
@@ -11125,6 +12777,19 @@ const STRAIGHT_ALPHA_BLEND = {
 		operation: "add"
 	}
 };
+/** Source-over for a premultiplied source: an opacity group's layer. */
+const PREMULTIPLIED_BLEND = {
+	color: {
+		srcFactor: "one",
+		dstFactor: "one-minus-src-alpha",
+		operation: "add"
+	},
+	alpha: {
+		srcFactor: "one",
+		dstFactor: "one-minus-src-alpha",
+		operation: "add"
+	}
+};
 /**
 * Creates the primitive pipeline: rounded fills and borders.
 *
@@ -11204,8 +12869,9 @@ function createTexturedPipeline(device, format, frameLayout) {
 			texture: {}
 		}
 	] });
+	const layout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout, frameLayout] });
 	const pipeline = device.createRenderPipeline({
-		layout: device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout, frameLayout] }),
+		layout,
 		vertex: {
 			module,
 			entryPoint: "vs",
@@ -11224,7 +12890,27 @@ function createTexturedPipeline(device, format, frameLayout) {
 			cullMode: "none"
 		}
 	});
-	if (pipeline === void 0) throw new WebGPUError("Failed to create textured render pipeline.", "pipeline");
+	const layerPipeline = device.createRenderPipeline({
+		layout,
+		vertex: {
+			module,
+			entryPoint: "vs",
+			buffers: [quadVertexLayout(), texturedInstanceLayout()]
+		},
+		fragment: {
+			module,
+			entryPoint: "fsLayer",
+			targets: [{
+				format,
+				blend: PREMULTIPLIED_BLEND
+			}]
+		},
+		primitive: {
+			topology: "triangle-list",
+			cullMode: "none"
+		}
+	});
+	if (pipeline === void 0 || layerPipeline === void 0) throw new WebGPUError("Failed to create textured render pipeline.", "pipeline");
 	const { vertexBuffer, indexBuffer } = createQuad(device);
 	const uniformBuffer = device.createBuffer({
 		size: 16,
@@ -11244,7 +12930,8 @@ function createTexturedPipeline(device, format, frameLayout) {
 		imageSampler: device.createSampler({
 			magFilter: "linear",
 			minFilter: "linear"
-		})
+		}),
+		layerPipeline
 	};
 }
 function createQuad(device) {
@@ -11673,6 +13360,7 @@ function createCanvas(width, height) {
 const vertexBufferUsage = typeof GPUBufferUsage !== "undefined" ? GPUBufferUsage.VERTEX : 32;
 const storageBufferUsage = typeof GPUBufferUsage !== "undefined" ? GPUBufferUsage.STORAGE : 128;
 const copyDstBufferUsage = typeof GPUBufferUsage !== "undefined" ? GPUBufferUsage.COPY_DST : 8;
+const layerTextureUsage = (typeof GPUTextureUsage !== "undefined" ? GPUTextureUsage.RENDER_ATTACHMENT : 16) | (typeof GPUTextureUsage !== "undefined" ? GPUTextureUsage.TEXTURE_BINDING : 4);
 const copyDstUsage = typeof GPUBufferUsage !== "undefined" ? GPUBufferUsage.COPY_DST : 8;
 const mapReadUsage = typeof GPUBufferUsage !== "undefined" ? GPUBufferUsage.MAP_READ : 1;
 const mapModeRead = typeof GPUMapMode !== "undefined" ? GPUMapMode.READ : 1;
@@ -11705,6 +13393,12 @@ var WebGPURenderer = class {
 	frameLayout = null;
 	frameBindGroup = null;
 	cachedInstanceData = null;
+	/**
+	* The textures opacity groups are drawn in, one per depth of nesting,
+	* so a group inside a group never clears what holds it. Made the first
+	* time a frame reaches that depth and again when the surface resizes.
+	*/
+	groupLayers = [];
 	/** Draw calls of the most recent frame. */
 	lastDraws = {
 		primitiveDraws: 0,
@@ -11847,8 +13541,9 @@ var WebGPURenderer = class {
 		const encodeStart = this.hooks.onEncodeStart !== void 0 || this.hooks.onEncodeEnd !== void 0 ? performance.now() : 0;
 		const commandEncoder = device.createCommandEncoder();
 		const texture = this.surface.getCurrentTexture();
-		const pass = commandEncoder.beginRenderPass({ colorAttachments: [{
-			view: texture.createView(),
+		const targets = [texture.createView()];
+		let pass = commandEncoder.beginRenderPass({ colorAttachments: [{
+			view: targets[0],
 			clearValue: {
 				r: 0,
 				g: 0,
@@ -11868,6 +13563,49 @@ var WebGPURenderer = class {
 		const commands = list.commands;
 		for (let i = 0; i < commands.length; i++) {
 			const command = commands[i];
+			if (command.kind === 3 || command.kind === 4) {
+				pass.end();
+				const depth = targets.length - 1;
+				let layer;
+				if (command.kind === 3) {
+					layer = this.groupLayer(device, depth, texture.width, texture.height);
+					targets.push(layer.view);
+				} else {
+					layer = this.groupLayers[depth - 1];
+					targets.pop();
+				}
+				pass = commandEncoder.beginRenderPass({ colorAttachments: [command.kind === 3 ? {
+					view: layer.view,
+					clearValue: {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 0
+					},
+					loadOp: "clear",
+					storeOp: "store"
+				} : {
+					view: targets[targets.length - 1],
+					loadOp: "load",
+					storeOp: "store"
+				}] });
+				pass.setBindGroup(1, this.frameBindGroup);
+				currentScissor = null;
+				currentKind = null;
+				if (command.kind === 3) continue;
+				const blendScissor = command.scissor ?? viewport;
+				if (command.instance === null || blendScissor.width <= 0 || blendScissor.height <= 0) continue;
+				pass.setPipeline(textured.layerPipeline);
+				pass.setVertexBuffer(0, textured.vertexBuffer);
+				pass.setVertexBuffer(1, this.texturedBuffer);
+				pass.setIndexBuffer(textured.indexBuffer, "uint16");
+				pass.setBindGroup(0, layer.bindGroup);
+				currentScissor = setScissor(pass, currentScissor, blendScissor);
+				pass.drawIndexed(textured.indexCount, 1, 0, 0, command.instance);
+				this.lastDraws.texturedDraws++;
+				this.lastDraws.texturedInstances++;
+				continue;
+			}
 			const scissor = command.scissor ?? viewport;
 			if (scissor.width <= 0 || scissor.height <= 0) continue;
 			if (command.kind === 0) {
@@ -11909,6 +13647,24 @@ var WebGPURenderer = class {
 		capture?.();
 		if (this.hooks.onEncodeEnd !== void 0) this.hooks.onEncodeEnd(performance.now() - encodeStart);
 	}
+	/** The layer for an opacity group at `depth`, made or remade at the surface's size. */
+	groupLayer(device, depth, width, height) {
+		const existing = this.groupLayers[depth];
+		if (existing !== void 0 && existing.texture.width === width && existing.texture.height === height) return existing;
+		existing?.texture.destroy();
+		const texture = device.createTexture({
+			size: [width, height],
+			format: this.format,
+			usage: layerTextureUsage
+		});
+		const layer = {
+			texture,
+			view: texture.createView(),
+			bindGroup: createTexturedBindGroup(device, this.textured, texture, this.textured.textSampler)
+		};
+		this.groupLayers[depth] = layer;
+		return layer;
+	}
 	/**
 	* When a capture is pending, encodes a copy of the frame into a
 	* mappable buffer and returns the step that maps it after submit.
@@ -12034,6 +13790,8 @@ var WebGPURenderer = class {
 		this.clipBuffer = null;
 		this.gradientBuffer?.destroy();
 		this.gradientBuffer = null;
+		for (const layer of this.groupLayers) layer.texture.destroy();
+		this.groupLayers = [];
 		this.frameBindGroup = null;
 		this.frameLayout = null;
 		this.primitives = null;
@@ -14723,6 +16481,14 @@ const NEW_DISPLAY = .15;
 const BEAT_PASSES = 3;
 /** Refreshes apart the two an interval is read between must be, at least. */
 const MIN_BEAT_SPAN = 6;
+/**
+* The most refreshes a frame waits for a tick that has not sat in this
+* thread's queue (see `tick`): a frame is drawn on a stale one after
+* that, so a thread that is always behind still draws.
+*/
+const MAX_QUEUED_REFRESHES = 8;
+/** How long, at least, between timing this thread's refreshes again once they were given up; see `retryLocal`. */
+const RETRY_LOCAL_MS = 2e3;
 /** The most refreshes a frame is given: two, sixty at 120 Hz; slower than that is no smoother. */
 const MAX_STRIDE = 2;
 function localAnimationFrame() {
@@ -14776,6 +16542,8 @@ var UiHostFrameClock = class {
 	/** Gaps between this thread's own refreshes while frames ran back to back. */
 	localIntervals = [];
 	lastLocalTime = null;
+	/** How long the frame drawn at `lastLocalTime` took, which says whether the gap after it was the refresh's or the frame's. */
+	lastLocalCost = 0;
 	/** The display's interval and the host's time origin, once the host has said. */
 	display = null;
 	/**
@@ -14784,6 +16552,11 @@ var UiHostFrameClock = class {
 	* show (see \`displayInterval\`).
 	*/
 	locked = false;
+	/** This thread's own `requestAnimationFrame` once given up, kept to see whether it keeps time after all. */
+	givenUp = null;
+	/** When this thread's refreshes were last timed again, and their times while they are being. */
+	lastRetry = -Infinity;
+	retrying = null;
 	/** The host's recent refresh times, which give the beat its phase. */
 	refreshes = [];
 	/** Host refreshes since the last frame drawn on the beat. */
@@ -14818,7 +16591,11 @@ var UiHostFrameClock = class {
 			if (this.localHandle === null) this.localHandle = this.local((time) => {
 				this.localHandle = null;
 				this.recordLocal(time);
-				if (this.pending) this.deliver(time);
+				if (this.pending) {
+					const started = this.now();
+					this.deliver(time);
+					this.lastLocalCost = this.now() - started;
+				} else this.lastLocalCost = 0;
 			});
 			return;
 		}
@@ -14873,7 +16650,7 @@ var UiHostFrameClock = class {
 		this.lastLocalTime = time;
 		if (previous !== null && this.pending) {
 			const interval = time - previous;
-			if (interval > 0 && interval < MAX_CADENCE_MS) {
+			if (interval > 0 && interval < MAX_CADENCE_MS && this.lastLocalCost < interval / 2) {
 				this.localIntervals.push(interval);
 				if (this.localIntervals.length > LOCAL_SAMPLES) this.localIntervals.shift();
 			}
@@ -14891,9 +16668,59 @@ var UiHostFrameClock = class {
 		if (this.local === null || this.display === null || this.localIntervals.length < LOCAL_SAMPLES) return;
 		const sorted = [...this.localIntervals].sort((a, b) => a - b);
 		if (sorted[Math.floor(sorted.length / 2)] / this.display.interval <= 1.06) return;
+		this.givenUp = this.local;
 		this.local = null;
 		this.locked = true;
 	}
+	/**
+	* Times this thread's own refreshes again, now and then, once they were
+	* given up, and takes them back if they keep the display's time.
+	*
+	* Given up for good, a worker's refreshes stayed given up whatever had
+	* made them slow. A Chrome worker busy between its frames, opening a
+	* large file or scrolling through lines it has never drawn, refreshes
+	* late and unevenly, which no measure of the gaps alone told from
+	* WebKit's timer: 5.5, 25.5, 10.9, 25 ms on a 165 Hz display one time,
+	* 12.1, 6.1, 12.2, 24.2 the next. Its frames then went through the
+	* host's ticks for as long as the page was open, a message and a hop
+	* through the page's thread each. Timed again while frames are cheap,
+	* they come a refresh apart and are taken back; WebKit's come 15 ms
+	* apart on a 120 Hz display however idle the thread is, and stay given
+	* up. Nine refreshes every two seconds or more, while frames come cheap.
+	*/
+	retryLocal(interval) {
+		if (this.givenUp === null || this.hidden || this.costs.length < SLOW_SAMPLES) return;
+		const now = this.now();
+		if (now - this.lastRetry < RETRY_LOCAL_MS) return;
+		const sorted = [...this.costs].sort((a, b) => a - b);
+		if (sorted[Math.floor(sorted.length / 2)] > interval * FAST_FRAME) return;
+		this.lastRetry = now;
+		const local = this.givenUp;
+		const times = [];
+		this.retrying = times;
+		const step = (time) => {
+			if (this.retrying !== times) return;
+			times.push(time);
+			if (times.length <= LOCAL_SAMPLES) {
+				local(step);
+				return;
+			}
+			this.retrying = null;
+			const gaps = times.slice(1).map((value, index) => value - times[index]).sort((a, b) => a - b);
+			if (this.givenUp === null || this.display === null || gaps[Math.floor(gaps.length / 2)] / this.display.interval > 1.06) return;
+			this.local = this.givenUp;
+			this.givenUp = null;
+			this.locked = false;
+			this.localIntervals.length = 0;
+			this.lastLocalTime = null;
+			this.costs.length = 0;
+			this.stride = 1;
+			this.clearFallback();
+			this.setActive(false);
+			if (this.pending) this.requestFrame();
+		};
+		local(step);
+	}
 	/** A time on the host's clock, on this thread's. */
 	toLocal(host) {
 		return this.display === null ? host : host - this.timeOrigin + this.display.origin;
@@ -14959,6 +16786,7 @@ var UiHostFrameClock = class {
 		const started = this.now();
 		this.deliver(this.toLocal(refresh));
 		this.recordCost(this.now() - started, beat.interval);
+		this.retryLocal(beat.interval);
 	}
 	/**
 	* Keeps the stride to what frames cost: every refresh while the typical
@@ -15120,7 +16948,8 @@ var UiHostFrameClock = class {
 			if (this.pending) {
 				this.clearFallback();
 				this.idleTicks = 0;
-				if (this.refreshesSinceFrame >= this.stride) this.deliverOnBeat(time);
+				const queued = this.now() - this.toLocal(time) > this.display.interval;
+				if (this.refreshesSinceFrame >= this.stride && (!queued || this.refreshesSinceFrame >= MAX_QUEUED_REFRESHES)) this.deliverOnBeat(time);
 				return;
 			}
 		}
@@ -16114,6 +17943,6 @@ function recordsEqual(a, b) {
 	return true;
 }
 //#endregion
-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, UiCompositionEvent, 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, isImeKey, isLayoutProtocol, isMinMaxTrack, isMotionRest, isMultiline, isNodeFocusable, isNodeHitTestable, isNodeInert, isNodeSelectable, isNodeTabStop, isObservable, isPaintVisible, isPercentLength, isPrintable, isReadOnly, isScrollContainer, isShapeName, isSubtreeInert, 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, measureFlow, 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, pointerEventsOf, pop, prepareInputSurface, pressable, previousGraphemeStart, previousWordStart, propertyEffects, propertyIsInherited, propertyNarrowers, 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, scrollBounds, scrollLeaderOf, scrollPosition, scrollRange, scrollbarThumb, scrollbarThumbs, scrollbarZoneAt, scrollsFromRight, 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, spansDifferOnlyInPaint, splitMp3Frames, spring, statesEqual, steps, syncEditorValue, textContentOf, textInputOf, 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, DefaultSvgResolver, 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, ShownAsKey, Stack, TEXTURED_STRIDE_BYTES, TEXTURED_STRIDE_FLOATS, TEXT_MATCHES_PROP, TEXT_RUN_ID_SEPARATOR, TEXT_SELECTION_PROP, TOUCH_TARGET, Text, UI_ROLES, UI_SEMANTIC_STATES, UI_SUBGRID_AXES, UiAnimation, UiAnimationFrameClock, UiBasicColors, UiBeforeInputEvent, UiBinding, UiBorderRadiuses, UiChildrenBinding, UiClock, UiCompositionEvent, 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, boxShadowValuesEqual, boxShadowsEqual, breakpoint, bufferSource, buildFontString, buildRenderList, buildSemanticsSubtree, buildSemanticsTree, bumpFontStack, bundle, canDecodeVideo, capturePointer, caretRectFor, caretVisibleAt, clampSize, clearFontStacks, clearLinkHover, clearMatchRanges, clearOverrideProperty, clearSelectionRange, clickOutside, clockOf, 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, defaultUnits, defaultVisualState, defineModifier, defineMotion, defineProperty, defineThemeExtension, demuxMp4Audio, demuxMp4Video, densityFactors, describeLength, describeOverrides, describeShortcut, detectEditingPlatform, diffSemantics, dragSessionFor, dragSource, draggable, drawOverlayShapes, drawSvg, drawText, dropIndexShifts, dropTarget, durationIn, easingCss, easingIn, easings, edgeField, editableSpansOf, editingGroupOf, editorFor, editorOf, fade, fillTextRects, findEnvironmentKey, findMatchesIn, findPropertyDefinition, fittedShadowRadius, 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, isImeKey, isLayoutProtocol, isMinMaxTrack, isMotionRest, isMultiline, isNodeFocusable, isNodeHitTestable, isNodeInert, isNodeSelectable, isNodeTabStop, isObservable, isPaintVisible, isPercentLength, isPrintable, isReadOnly, isScrollContainer, isShapeName, isSubtreeInert, isSvgSource, isTypographyRole, isUiChild, isUiElement, isUiModifier, isUiRole, isUiSemanticState, isVideoSurface, isWebGPUAvailable, labelNode, labelOrigin, layoutParagraph, layoutTextLines, lazySource, lengths, lightColors, lightTheme, lineEndAt, lineIndexAtY, lineIndexForOffset, lineLimit, lineStartAt, linear, linearGradient, linkHoverOf, linkOf, linkRunAtPointIn, markInstant, markNow, matchRangesOf, measure, measureFlow, measureSpan, mediaLoadsInFlight, minmax, motion, motionOf, 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, parseSvg, parseTransform, parseWebVtt, pathValuesEqual, percent, performanceMarksEnabled, pinchable, placeGridItems, pointerDeviceOf, pointerEventsOf, pop, prepareInputSurface, pressable, previousGraphemeStart, previousWordStart, propertyEffects, propertyIsInherited, propertyNarrowers, propertyValuesEqual, propertyValuesEqualByName, proportionalFontMetrics, provideEnvironment, provided, 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, scrollBounds, scrollLeaderOf, scrollPosition, scrollRange, scrollbarThumb, scrollbarThumbs, scrollbarZoneAt, scrollsFromRight, selectableTextNodes, selectableTextOf, selectionRangeOf, selectionRects, selectionRectsIn, semanticsInertAbove, semanticsMemory, setLinkHover, setMatchRanges, setPerformanceMarks, setSelectionRange, shadowsEqual, shadowsOf, shapesEqual, sharedElement, sheetSource, shortcut, shortcutKeyCaps, shortcuts, sizeContainer, sizeGridTracks, slideDown, slideFrom, slideUp, spacingEqual, spacingSteps, spanAtOffset, spannedRunsFor, spannedTextOf, spansDifferOnlyInPaint, splitMp3Frames, spring, springIn, statesEqual, steps, svgPaint, syncEditorValue, textContentOf, textInputOf, textRunBackgrounds, textRunDecorations, textRunOfRecordId, textRuns, textSpansEqual, textStylesEqual, themeExtension, themeExtensionsEqual, themeTokens, themesEqual, tightenConstraints, touchActionFor, tracePathData, traceRoundedRect, transform, transformIsIdentity, transformsEqual, tween, typographyEqual, uniformBorderRadius, unitsEqual, unknownContainerSize, validateGradient, validateRole, validateStates, validateSubgrid, videoFrameSize, videoSource, visualState, visualStatesEqual, wheelDeltaYOf, withContrast, withDensity, withOverrideSource, withPointer, withThemeExtension, wordRangeAt, wordRangeIn, writeDeclaredProperty, writeOverrideProperty };
 
 //# sourceMappingURL=index.js.map