gesso-core 0.6.29 → 0.7.0

package/dist/index.js

@@ -1,4 +1,4 @@
-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-BTZ3A3MN.js";
+import { $ as UiPlatformAdapter, $a as UiNode, $i as themeExtension, $n as isVideoSurface, $r as pathValuesEqual, $t as textRunDecorations, A as formatNumber, Aa as hiddenRangesOf, Ai as propertyValuesEqual, An as isPressable, Ao as UiBinding, Ar as resolveString, At as paragraphGeometryFrom, B as MAX_MEASURES_PER_CHILD, Ba as lightColors, Bi as containerBands, Bn as CARET_BLINK_MS, Br as UiProperties, Bt as isPrintable, C as LayoutEngine, Ca as shapesEqual, Ci as borderRadiusCorners, Cn as selectionRangeOf, Co as UiTextChangeEvent, Cr as wordRangeAt, Ct as scrollbarThumbs, D as describeOverrides, Da as defaultTextStyle, Di as normalizeBorderRadius, Dn as isNodeInert, Do as wheelDeltaYOf, Dr as resolveNumber, Dt as hasDrawnText, E as describeLength, Ea as typographyEqual, Ei as borderRadiusValuesEqual, En as isNodeHitTestable, Eo as noKeyModifiers, Er as resolveBoolean, Et as UiInputDispatcher, F as LayoutRecord, Fa as textContentOf, Fi as insetsEqual, Fn as hasTextLinks, Fr as inheritedPropertyNames, Ft as comparePositions, G as sizeGridTracks, Ga as colorsEqual, Gi as withContrast, Gn as editorOf, Gr as normalizeStates, Gt as drawText, H as FlexDirection, Ha as colorToHex, Hi as darkTheme, Hn as EDITOR_PROP, Hr as UI_SEMANTIC_STATES, Ht as applyCanvasTextStyle, I as Constraints, Ia as textSpansEqual, Ii as noInsets, In as linkHoverOf, Ir as propertyEffects, It as edgeField, J as MainAxisAlignment, Ja as rgb8, Ji as lengths, Jn as isReadOnly, Jr as validateStates, Jt as runCanvasStyleInto, K as AlignContent, Ka as normalizeColor, Ki as withDensity, Kn as isEditableNode, Kr as statesEqual, Kt as fillTextRects, L as clampSize, La as textStylesEqual, Li as observeViewportInsets, Ln as linkOf, Lr as propertyIsInherited, Lt as editingGroupOf, M as withOverrideSource, Ma as spanAtOffset, Mi as withPointer, Mn as pointerEventsOf, Mr as findPropertyDefinition, Mt as wordRangeIn, N as accumulatedOffsetTo, Na as spannedTextOf, Ni as UiEnvironmentKeys, Nn as resolveCursor, Nr as getPropertyNames, Nt as textInputOf, O as formatConstraints, Oa as editableSpansOf, Oi as uniformBorderRadius, On as isNodeSelectable, Oo as UiNodeType, Or as resolveProperty, Ot as offsetAtPointIn, P as contentOffset, Pa as spansDifferOnlyInPaint, Pi as UiInsetRegistry, Pn as clearLinkHover, Pr as inheritedPropertyFlags, Pt as adjacentField, Q as CanvasPlatformSurface, Qa as UiEnvironment, Qi as noThemeExtensions, Qn as resolveColorValue, Qr as paintValuesEqual, Qt as textRunBackgrounds, R as constraintsEqual, Ra as colorsEqualPalette, Ri as UiContainerSizeSource, Rn as linkRunAtPointIn, Rr as propertyNarrowers, Rt as commandForKey, S as tracePathData, Sa as isShapeName, Si as borderRadius, Sn as selectableTextOf, So as UiSelectionChangeEvent, Sr as previousWordStart, St as scrollbarThumb, T as SCROLLBAR_LINGER_MS, Ta as isTypographyRole, Ti as borderRadiusIsZero, Tn as isNodeFocusable, To as UiWheelEvent, Tr as DEFAULT_LINE_HEIGHT_FACTOR, Tt as scrollsFromRight, U as parseFlexDirection, Ua as colorToRgba, Ui as lightTheme, Un as caretVisibleAt, Ur as isUiRole, Ut as buildFontString, V as isLayoutProtocol, Va as UiBasicColors, Vi as unknownContainerSize, Vn as CARET_WIDTH, Vr as UI_ROLES, Vt as EditableLayout, W as placeGridItems, Wa as colorValuesEqual, Wi as themesEqual, Wn as editorFor, Wr as isUiSemanticState, Wt as createCanvasTextStyle, X as parseCrossAxisAlignment, Xa as createEnvironmentKey, Xi as defineThemeExtension, Xn as nextCaretToggle, Xr as validateSubgrid, Xt as spanOf, Y as parseAlignContent, Ya as rgba, Yi as unitsEqual, Yn as maskText, Yr as UI_SUBGRID_AXES, Yt as runFontString, Z as parseMainAxisAlignment, Za as findEnvironmentKey, Zi as hasThemeExtension, Zn as syncEditorValue, Zr as inputsEqual, Zt as textMeasureRequest, _ as paintsAfterChildren, _a as boxShadowReach, _i as minmax, _n as matchRangesOf, _o as UiInputEvent, _r as lineEndAt, _t as SCROLLBAR_MIN_THUMB, a as layerRegion, aa as relativeLuminance, ai as MAX_GRADIENT_STOPS, an as DEFAULT_FONT_SIZE, ao as writeOverrideProperty, ar as layoutParagraph, at as UiEditingController, b as labelOrigin, ba as shadowsOf, bi as resolveLength, bn as clearSelectionRange, bo as UiPinchEvent, br as nextWordEnd, bt as scrollLeaderOf, c as paintPictures, ca as scaleSpacing, ci as linearGradient, cn as colorToCss, co as hasVisualState, cr as lineIndexAtY, ct as UiPinchRecognizer, d as PaintRecorder, da as defaultShadows, di as auto, dn as isPaintVisible, do as MOUSE_POINTER, dr as offsetAtPoint, dt as UiKeyboardController, ea as themeExtensionsEqual, ei as UiTransforms, en as bumpFontStack, eo as DirtyNodeSet, er as videoFrameSize, et as capturePointer, f as replayPaint, fa as shadowsEqual, fi as fr, fn as normalizeTextAlign, fo as UiBeforeInputEvent, fr as offsetAtX, ft as UiPointerController, g as hasDecorationPhase, ga as boxShadowRadius, gi as isPercentLength, gn as clearMatchRanges, go as UiGestureEvent, gr as graphemeBoundaries, gt as SCROLLBAR_INSET, h as decorationRect, ha as boxShadowArraysEqual, hi as isMinMaxTrack, hn as TEXT_MATCHES_PROP, ho as UiFocusEvent, hr as EditableTextModel, ht as SCROLLBAR_HOVER_ZONE, i as traceRoundedRect, ia as raiseContrast, ii as transformsEqual, in as DEFAULT_FONT_FAMILY, io as writeDeclaredProperty, ir as ELLIPSIS, it as touchActionFor, j as labelNode, ja as resolvedSpansOf, ji as TOUCH_TARGET, jn as isSubtreeInert, jr as closestPropertyName, jt as selectionRectsIn, k as formatExplanation, ka as flattenTextSpans, ki as defineProperty, kn as isNodeTabStop, ko as DirtyFlags, kr as resolvePropertyByName, kt as paragraphGeometry, l as PaintTarget, la as spacingEqual, li as radialGradient, ln as computeObjectFitRect, lo as visualState, lr as lineIndexForOffset, lt as UiWheelController, m as decorationColor, ma as boxShadow, mi as isFrLength, mn as resolvePaintState, mo as UiEventType, mr as selectionRects, mt as UiHitTester, n as createCanvasSurface, na as contrastRatio, ni as transform, nn as fontStackFor, no as overrideSources, nr as ParagraphTextMeasurer, nt as pointerDeviceOf, o as opacityNeedsLayer, oa as densityFactors, oi as gradientPaint, on as DEFAULT_FONT_WEIGHT, oo as UiVisualState, or as proportionalFontMetrics, ot as UiTouchScroller, p as ScaledImageCache, pa as BOX_SHADOW_BLUR_REACH, pi as isAutoLength, pn as normalizeVerticalAlign, po as UiCompositionEvent, pr as offsetForVerticalMove, pt as UiFocusManager, q as CrossAxisAlignment, qa as parseColor, qi as defaultUnits, qn as isMultiline, qr as validateRole, qt as layoutTextLines, r as Canvas2DRenderer, ra as highContrastColors, ri as transformIsIdentity, rn as registerFontStack, ro as resetOverrideWarnings, rr as spannedRunsFor, rt as prepareInputSurface, s as PaintPictureCache, sa as defaultSpacing, si as gradientsEqual, sn as DEFAULT_TEXT_COLOR, so as defaultVisualState, sr as caretRectFor, st as UiGestureRecognizer, t as CanvasSurface, ta as withThemeExtension, ti as parseTransform, tn as clearFontStacks, to as clearOverrideProperty, tr as CharacterCountTextMeasurer, tt as isImeKey, u as EMPTY_RECORDING, ua as spacingSteps, ui as validateGradient, un as createPaintState, uo as visualStatesEqual, ur as lineLimit, ut as isScrollContainer, v as LABEL_PADDING_X, va as boxShadowValuesEqual, vi as percent, vn as setMatchRanges, vo as UiKeyboardEvent, vr as lineStartAt, vt as SCROLLBAR_THICKNESS, w as SCROLLBAR_FADE_MS, wa as defaultTypography, wi as borderRadiusEqual, wn as setSelectionRange, wo as UiWheelDeltaMode, wr as UiGraph, wt as scrollbarZoneAt, x as snapScroll, xa as defaultShapes, xi as UiBorderRadiuses, xn as selectableTextNodes, xo as UiPointerEvent, xr as previousGraphemeStart, xt as scrollRange, y as drawOverlayShapes, ya as boxShadowsEqual, yi as repeat, yn as TEXT_SELECTION_PROP, yo as UiPasteEvent, yr as nextGraphemeEnd, yt as scrollBounds, z as tightenConstraints, za as darkColors, zi as bandOf, zn as setLinkHover, zr as propertyValuesEqualByName, zt as detectEditingPlatform } from "./CanvasSurface-BpgbOku2.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. */
@@ -2307,8 +2307,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 +2319,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);
@@ -2524,7 +2525,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 +2553,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 +2589,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 +2737,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 +2853,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 +2872,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 +2901,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. */
@@ -4828,14 +4865,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 +5049,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 +5058,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 +5076,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 }
 	};
 }
 /**
@@ -6526,7 +6576,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 +6597,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 +6646,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();
 			}
@@ -6861,6 +6911,1129 @@ 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",
+	"mask",
+	"filter",
+	"pattern",
+	"marker"
+]);
+/** Attributes that point at one of those. */
+const UNSUPPORTED_ATTRIBUTES = {
+	mask: "mask",
+	filter: "filter",
+	"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);
+		for (const [attribute, feature] of Object.entries(UNSUPPORTED_ATTRIBUTES)) if (element.attributes[attribute] !== void 0 && element.attributes[attribute] !== "none") unsupported.add(feature);
+		element.children.forEach(visit);
+	};
+	visit(root);
+	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]
+	};
+}
+/** 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);
+	switch (name) {
+		case "g":
+		case "a":
+		case "switch":
+			drawChildren(element, style, viewport, context);
+			break;
+		case "svg":
+			drawNested(element, style, viewport, context);
+			break;
+		case "use":
+			drawUse(element, style, viewport, context);
+			break;
+		default: {
+			const shape = shapeOf(element, name, viewport);
+			if (shape !== null && style.visible) paintShape(shape, style, viewport, context);
+		}
+	}
+	surface.restore();
+}
+/** 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 (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 +8043,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 +8101,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 +8110,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 +8141,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]);
@@ -8630,11 +9864,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 +10514,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 +11354,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 +11475,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 +11609,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 +11617,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 +11913,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 +11950,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;
@@ -11125,6 +12432,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 +12524,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 +12545,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 +12585,8 @@ function createTexturedPipeline(device, format, frameLayout) {
 		imageSampler: device.createSampler({
 			magFilter: "linear",
 			minFilter: "linear"
-		})
+		}),
+		layerPipeline
 	};
 }
 function createQuad(device) {
@@ -11673,6 +13015,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 +13048,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 +13196,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 +13218,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 +13302,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 +13445,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 +16136,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 +16197,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 +16207,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 +16246,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 +16305,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 +16323,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 +16441,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 +16603,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 +17598,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, 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, 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, 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, defineProperty, defineThemeExtension, demuxMp4Audio, demuxMp4Video, densityFactors, describeLength, describeOverrides, describeShortcut, detectEditingPlatform, diffSemantics, dragSessionFor, dragSource, draggable, drawOverlayShapes, drawSvg, 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, 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, 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, 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, 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