gesso-core 0.6.30 → 0.7.0

package/dist/{CanvasSurface-CspYfnND.js → CanvasSurface-BpgbOku2.js}

@@ -1501,7 +1501,9 @@ const lightColors = {
 	danger: rgb8(220, 38, 38),
 	focusRing: rgb8(17, 24, 39),
 	selectionBackground: rgb8(219, 234, 254),
-	selectionForeground: rgb8(30, 58, 138)
+	selectionForeground: rgb8(30, 58, 138),
+	tooltipBackground: rgb8(17, 24, 39),
+	tooltipForeground: UiBasicColors.white
 };
 const darkColors = {
 	background: rgb8(17, 19, 24),
@@ -1524,7 +1526,9 @@ const darkColors = {
 	danger: rgb8(248, 113, 113),
 	focusRing: rgb8(243, 244, 246),
 	selectionBackground: rgb8(30, 58, 95),
-	selectionForeground: rgb8(219, 234, 254)
+	selectionForeground: rgb8(219, 234, 254),
+	tooltipBackground: rgb8(55, 61, 72),
+	tooltipForeground: rgb8(243, 244, 246)
 };
 /**
 * Compares two color palettes for equality.
@@ -1911,6 +1915,24 @@ function isShapeName(value, scale) {
 //#endregion
 //#region src/properties/UiBoxShadow.ts
 /**
+* The shadows a `boxShadows` value stands for: itself, or the named
+* size from `scale`, the node's theme's shadows. A name the scale lacks,
+* or no scale, is no shadow.
+*/
+function shadowsOf(value, scale) {
+	if (Array.isArray(value)) return value;
+	if (typeof value === "string" && scale !== void 0 && Object.prototype.hasOwnProperty.call(scale, value)) return scale[value];
+	return NO_SHADOWS$1;
+}
+const NO_SHADOWS$1 = [];
+/**
+* Compares two `boxShadows` values: two names by name, two lists entry by entry.
+*/
+function boxShadowValuesEqual(a, b) {
+	if (typeof a === "string" || typeof b === "string") return a === b;
+	return boxShadowArraysEqual(a, b);
+}
+/**
 * Creates a box shadow with the supplied parameters.
 */
 function boxShadow(offsetX, offsetY, blurRadius, spreadRadius, color, inset = false) {
@@ -2147,7 +2169,8 @@ const FOREGROUNDS = {
 	controlForegroundDisabled: "controlBackground",
 	controlBorder: "controlBackground",
 	controlAccent: "controlBackground",
-	selectionForeground: "selectionBackground"
+	selectionForeground: "selectionBackground",
+	tooltipForeground: "tooltipBackground"
 };
 /**
 * A palette at high contrast.
@@ -2181,7 +2204,8 @@ const SURFACES = /* @__PURE__ */ new Set([
 	"controlBackground",
 	"controlBackgroundHovered",
 	"controlBackgroundPressed",
-	"selectionBackground"
+	"selectionBackground",
+	"tooltipBackground"
 ]);
 //#endregion
 //#region src/environment/UiThemeExtension.ts
@@ -2195,6 +2219,7 @@ function defineThemeExtension(options) {
 		key: Symbol(options.name),
 		name: options.name,
 		defaults: options.defaults,
+		...options.coarse === void 0 ? {} : { coarse: options.coarse },
 		equals: options.equals ?? shallowEqual
 	};
 	comparisons.set(extension.key, extension.equals);
@@ -2232,7 +2257,8 @@ function isPlainObject(value) {
 /** What the theme carries for this extension, or its declared defaults. */
 function themeExtension(theme, extension) {
 	const carried = theme.extensions?.get(extension.key);
-	return carried === void 0 ? extension.defaults : carried;
+	if (carried !== void 0) return carried;
+	return theme.pointer === "coarse" && extension.coarse !== void 0 ? extension.coarse : extension.defaults;
 }
 /** Whether the theme carries this extension at all, rather than falling back. */
 function hasThemeExtension(theme, extension) {
@@ -2280,6 +2306,49 @@ function themeExtensionsEqual(a, b) {
 	return true;
 }
 //#endregion
+//#region src/environment/UiUnits.ts
+const defaultUnits = {
+	pixelsPerInch: 96,
+	rootFontSize: 16
+};
+/**
+* The conversions for a set of units, usually a theme's.
+*
+*   const { rem, pt } = lengths(theme.units);
+*   <box padding={rem(1)}><text fontSize={pt(12)} /></box>
+*
+* A theme writes its own scales the same way, from the units it is
+* about to carry, so the scales follow them:
+*
+*   const units = { pixelsPerInch: 96, rootFontSize: 16 };
+*   const { rem } = lengths(units);
+*   export const theme = { ...lightTheme, units, spacing: { ...lightTheme.spacing, large: rem(1) } };
+*
+* Throws on units that cannot measure anything, a zero or negative or
+* non-finite number, since every length written from them would be.
+*/
+function lengths(units = defaultUnits) {
+	check("pixelsPerInch", units.pixelsPerInch);
+	check("rootFontSize", units.rootFontSize);
+	const inch = units.pixelsPerInch;
+	return {
+		units,
+		rem: (value) => value * units.rootFontSize,
+		inch: (value) => value * inch,
+		pt: (value) => value * inch / 72,
+		mm: (value) => value * inch / 25.4
+	};
+}
+/**
+* Compares two sets of units for equality.
+*/
+function unitsEqual(a, b) {
+	return a.pixelsPerInch === b.pixelsPerInch && a.rootFontSize === b.rootFontSize;
+}
+function check(name, value) {
+	if (!Number.isFinite(value) || value <= 0) throw new RangeError(`UiUnits.${name} has to be a positive number of pixels; it was ${value}.`);
+}
+//#endregion
 //#region src/environment/UiTheme.ts
 const lightTheme = {
 	colors: lightColors,
@@ -2287,6 +2356,7 @@ const lightTheme = {
 	spacing: defaultSpacing,
 	density: "comfortable",
 	contrast: "standard",
+	units: defaultUnits,
 	shapes: {
 		none: 0,
 		extraSmall: 2,
@@ -2434,7 +2504,7 @@ const darkTheme = {
 * not repaint, and it is easy to forget.
 */
 function themesEqual(a, b) {
-	return a.density === b.density && a.contrast === b.contrast && colorsEqualPalette(a.colors, b.colors) && typographyEqual(a.typography, b.typography) && shapesEqual(a.shapes, b.shapes) && shadowsEqual(a.shadows, b.shadows) && spacingEqual(a.spacing, b.spacing) && themeExtensionsEqual(a.extensions, b.extensions);
+	return a.density === b.density && a.contrast === b.contrast && (a.pointer ?? "fine") === (b.pointer ?? "fine") && a.touch === b.touch && unitsEqual(a.units, b.units) && colorsEqualPalette(a.colors, b.colors) && typographyEqual(a.typography, b.typography) && shapesEqual(a.shapes, b.shapes) && shadowsEqual(a.shadows, b.shadows) && spacingEqual(a.spacing, b.spacing) && themeExtensionsEqual(a.extensions, b.extensions);
 }
 /**
 * The same theme at another density.
@@ -2538,13 +2608,26 @@ function bandOf(width, breakpoints) {
 	return band;
 }
 /**
-* The width bands of a container, one value per band entered.
+* The width bands of a container, one value per band entered, and once
+* more at the first size measured.
 *
 * What `Responsive` builds its children from, and what an author who
 * wants only a number rather than a subtree can subscribe to directly.
+*
+* The first value is the size before any layout, usually zeroes, and
+* the first measurement is the real one. Emitting only when the band
+* changed left a container whose real width fell in the same band as
+* the guess built from the guess for good, so a builder that reads the
+* width (`size.width < 600` inside the `[1024]` band) was handed zero
+* on a 768-wide tablet. One more value at the first measurement costs
+* one more build at most, once, and every build after it sees a size
+* that was measured.
 */
 function containerBands(size, breakpoints) {
-	return size.changes.pipe(map((measured) => bandOf(measured.width, breakpoints)), distinctUntilChanged());
+	return size.changes.pipe(map((measured, index) => ({
+		band: bandOf(measured.width, breakpoints),
+		first: index === 0
+	})), distinctUntilChanged((before, now) => before.band === now.band && !before.first), map(({ band }) => band));
 }
 //#endregion
 //#region src/environment/UiInsets.ts
@@ -2767,6 +2850,16 @@ const UiEnvironmentKeys = {
 	* as it changes. Provided by `Responsive` and by the
 	* `containerSize` property; see `UiContainerSize`.
 	*/
+	/**
+	* What the person points with here: the device's, as the runtime
+	* reads it (CSS's `pointer` feature), or what an ancestor said with
+	* `pointer`. A theme provided under `coarse` is turned for it
+	* (`withPointer`). See `UiPointer`.
+	*/
+	pointer: createEnvironmentKey({
+		name: "pointer",
+		defaultValue: "fine"
+	}),
 	containerSize: createEnvironmentKey({
 		name: "containerSize",
 		defaultValue: unknownContainerSize
@@ -2788,6 +2881,44 @@ const UiEnvironmentKeys = {
 	})
 };
 //#endregion
+//#region src/environment/UiPointer.ts
+/** The smallest target a finger can be asked to hit, in pixels: WCAG's 2.5.5, Apple's and Android's 44 to 48. */
+const TOUCH_TARGET = 44;
+/**
+* The same theme for another pointer.
+*
+* Turned to `coarse`, it is the theme with its `touch` laid over it and
+* `pointer` saying so; turned back, it is the theme it was turned from,
+* kept for the purpose, so a subtree that goes from touch to mouse and
+* back gets the identical theme each time. A theme already for that
+* pointer is returned as it is.
+*/
+function withPointer(theme, pointer) {
+	if ((theme.pointer ?? "fine") === pointer) return theme;
+	if (pointer === "fine") return fineThemes.get(theme) ?? {
+		...theme,
+		pointer: "fine"
+	};
+	const touch = theme.touch ?? {};
+	const turned = {
+		...theme,
+		pointer: "coarse",
+		typography: touch.typography === void 0 ? theme.typography : {
+			...theme.typography,
+			...touch.typography
+		},
+		spacing: touch.spacing === void 0 ? theme.spacing : {
+			...theme.spacing,
+			...touch.spacing
+		},
+		...touch.extensions === void 0 ? {} : { extensions: new Map([...theme.extensions ?? [], ...touch.extensions]) }
+	};
+	fineThemes.set(turned, theme);
+	return turned;
+}
+/** Each touch theme's mouse self, for turning it back. */
+const fineThemes = /* @__PURE__ */ new WeakMap();
+//#endregion
 //#region src/properties/UiPropertyDefinition.ts
 /**
 * Creates a property definition with the supplied metadata.
@@ -2972,6 +3103,18 @@ function resolveLength(value, base, property, keepAuto = false) {
 	}
 	throw new Error(`Property '${property}' has an invalid length ${describe(value)}. Use a number of pixels, percent(n), or auto.`);
 }
+/**
+* Why a value cannot be a length, or undefined when it can: the rules
+* `resolveLength` lays out by, for checking a value when it is written
+* (each length property's `validate`), where the error names the
+* element, rather than when it is laid out, where it would stop the
+* frame and everything else in it.
+*/
+function lengthProblem(value, property) {
+	if (value === void 0 || value === null || isAutoLength(value) || isPercentLength(value)) return;
+	if (typeof value === "number") return Number.isFinite(value) ? void 0 : `Property '${property}' must be a finite number, got ${String(value)}.`;
+	return `Property '${property}' has an invalid length ${describe(value)}. Use a number of pixels, percent(n), or auto.`;
+}
 function describe(value) {
 	if (typeof value === "string") return `'${value}'`;
 	try {
@@ -3385,39 +3528,49 @@ const P = 2;
 const T = 32;
 const E = 128;
 const S = 256;
+/** A length property's check, run when a plain value is written: see `lengthProblem`. */
+function lengthValidator(property) {
+	return (value) => lengthProblem(value, property);
+}
 const UiProperties = {
 	width: defineProperty({
 		name: "width",
+		validate: lengthValidator("width"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
 	}),
 	height: defineProperty({
 		name: "height",
+		validate: lengthValidator("height"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
 	}),
 	minWidth: defineProperty({
 		name: "minWidth",
+		validate: lengthValidator("minWidth"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
 	}),
 	maxWidth: defineProperty({
 		name: "maxWidth",
+		validate: lengthValidator("maxWidth"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
 	}),
 	minHeight: defineProperty({
 		name: "minHeight",
+		validate: lengthValidator("minHeight"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
 	}),
 	maxHeight: defineProperty({
 		name: "maxHeight",
+		validate: lengthValidator("maxHeight"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
@@ -3523,6 +3676,7 @@ const UiProperties = {
 	}),
 	margin: defineProperty({
 		name: "margin",
+		validate: lengthValidator("margin"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
@@ -3530,6 +3684,7 @@ const UiProperties = {
 	/** Space outside the box, left and right. See `paddingX`. */
 	marginX: defineProperty({
 		name: "marginX",
+		validate: lengthValidator("marginX"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
@@ -3537,30 +3692,35 @@ const UiProperties = {
 	/** Space outside the box, top and bottom. See `paddingX`. */
 	marginY: defineProperty({
 		name: "marginY",
+		validate: lengthValidator("marginY"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
 	}),
 	marginTop: defineProperty({
 		name: "marginTop",
+		validate: lengthValidator("marginTop"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
 	}),
 	marginRight: defineProperty({
 		name: "marginRight",
+		validate: lengthValidator("marginRight"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
 	}),
 	marginBottom: defineProperty({
 		name: "marginBottom",
+		validate: lengthValidator("marginBottom"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
 	}),
 	marginLeft: defineProperty({
 		name: "marginLeft",
+		validate: lengthValidator("marginLeft"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
@@ -3568,6 +3728,7 @@ const UiProperties = {
 	/** Space outside the box on the edge the reading starts at. See `paddingStart`. */
 	marginStart: defineProperty({
 		name: "marginStart",
+		validate: lengthValidator("marginStart"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
@@ -3575,6 +3736,7 @@ const UiProperties = {
 	/** Space outside the box on the edge the reading ends at. See `paddingStart`. */
 	marginEnd: defineProperty({
 		name: "marginEnd",
+		validate: lengthValidator("marginEnd"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
@@ -3754,6 +3916,7 @@ const UiProperties = {
 	}),
 	flexBasis: defineProperty({
 		name: "flexBasis",
+		validate: lengthValidator("flexBasis"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
@@ -3819,24 +3982,28 @@ const UiProperties = {
 	}),
 	top: defineProperty({
 		name: "top",
+		validate: lengthValidator("top"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
 	}),
 	right: defineProperty({
 		name: "right",
+		validate: lengthValidator("right"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
 	}),
 	bottom: defineProperty({
 		name: "bottom",
+		validate: lengthValidator("bottom"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
 	}),
 	left: defineProperty({
 		name: "left",
+		validate: lengthValidator("left"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
@@ -4014,6 +4181,7 @@ const UiProperties = {
 	}),
 	inset: defineProperty({
 		name: "inset",
+		validate: lengthValidator("inset"),
 		defaultValue: void 0,
 		inherited: false,
 		affects: L
@@ -4099,7 +4267,7 @@ const UiProperties = {
 		defaultValue: [],
 		inherited: false,
 		affects: P,
-		compare: boxShadowArraysEqual
+		compare: boxShadowValuesEqual
 	}),
 	visible: defineProperty({
 		name: "visible",
@@ -4405,6 +4573,20 @@ const UiProperties = {
 		inherited: false,
 		affects: 64
 	}),
+	/**
+	* Takes a mouse over this subtree as a finger, as a browser's device
+	* mode does: nothing is hovered without a press, a press hovers what
+	* it lands on until it lifts, and the press has a finger's slop and
+	* gestures. For a design tool playing a screen drawn for touch with a
+	* mouse; read up the ancestor chain. A finger and a pen are
+	* unchanged.
+	*/
+	touchEmulation: defineProperty({
+		name: "touchEmulation",
+		defaultValue: void 0,
+		inherited: false,
+		affects: 64
+	}),
 	focusable: defineProperty({
 		name: "focusable",
 		defaultValue: void 0,
@@ -4622,6 +4804,20 @@ const UiProperties = {
 			return transformsEqual(transform(a), transform(b));
 		}
 	}),
+	/**
+	* Keep what this subtree paints as pixels, and copy them while only
+	* what is above it moves or scales: a design tool's frames under a
+	* zooming camera, a map's tiles under a pan. Canvas2D only; see
+	* `RasterCache.ts` for when it draws them again. A hint: a subtree
+	* that changes on most frames, or one too large to hold at the scale
+	* it is drawn at, is drawn directly.
+	*/
+	rasterize: defineProperty({
+		name: "rasterize",
+		defaultValue: false,
+		inherited: false,
+		affects: P
+	}),
 	text: defineProperty({
 		name: "text",
 		defaultValue: void 0,
@@ -4648,6 +4844,21 @@ const UiProperties = {
 		inherited: false,
 		affects: P
 	}),
+	/**
+	* The URL the node's picture was loaded from, as `imageSource` last
+	* resolved it: an image's or an SVG's.
+	*
+	* Nothing lays it out or paints it. It is there for what reads a tree
+	* as a document, an inspector, a design tool writing the screen as
+	* HTML, since the bitmap or the drawing on the node no longer says
+	* where it came from.
+	*/
+	src: defineProperty({
+		name: "src",
+		defaultValue: void 0,
+		inherited: false,
+		affects: 0
+	}),
 	objectFit: defineProperty({
 		name: "objectFit",
 		defaultValue: void 0,
@@ -4794,6 +5005,18 @@ const UiProperties = {
 		affects: E
 	}),
 	/**
+	* What the person points with in this subtree, `fine` or `coarse`,
+	* over the device's: a design tool's frame drawn as a phone says
+	* `coarse`, and the controls in it grow to a finger's size. See
+	* `UiPointer`.
+	*/
+	pointer: defineProperty({
+		name: "pointer",
+		defaultValue: void 0,
+		inherited: false,
+		affects: E
+	}),
+	/**
 	* The type this element and its subtree are written in: a role in
 	* the theme's scale (`textStyle="title"`), or a style of its own.
 	*
@@ -5663,8 +5886,15 @@ var UiGraph = class {
 	*/
 	buildNodeEnvironment(node, parent = node.parent) {
 		let env = (parent !== null ? parent.environment : null) ?? new UiEnvironment(null);
+		const pointer = node.getProperty("pointer");
+		if (pointer === "fine" || pointer === "coarse") env = env.set(UiEnvironmentKeys.pointer, pointer);
 		const theme = node.getProperty("theme");
 		if (theme !== void 0) env = env.set(UiEnvironmentKeys.theme, theme);
+		if (pointer !== void 0 || theme !== void 0) {
+			const scoped = env.get(UiEnvironmentKeys.theme);
+			const turned = withPointer(scoped, env.get(UiEnvironmentKeys.pointer));
+			if (turned !== scoped) env = env.set(UiEnvironmentKeys.theme, turned);
+		}
 		const textStyle = node.getProperty("textStyle");
 		if (textStyle !== void 0) {
 			const scale = env.get(UiEnvironmentKeys.theme).typography;
@@ -8149,6 +8379,14 @@ function isSubtreeInert(node) {
 	return false;
 }
 /** `pointerEvents` as CSS inherits it: the nearest value set from the node up, 'auto' when none is. */
+/** Whether a mouse over the node is taken as a finger: `touchEmulation` up the ancestor chain. */
+function emulatesTouch(node) {
+	for (let current = node; current !== null; current = current.parent) {
+		const value = current.properties.get("touchEmulation");
+		if (value === true || value === false) return value;
+	}
+	return false;
+}
 function pointerEventsOf(node) {
 	for (let current = node; current !== null; current = current.parent) {
 		const value = current.properties.get("pointerEvents");
@@ -8577,9 +8815,11 @@ const NO_SHADOWS = [];
 * frame would allocate a shadow record per shadow on screen.
 */
 const paintShadows = /* @__PURE__ */ new WeakMap();
-function resolvePaintShadows(node, shadows) {
-	if (!Array.isArray(shadows) || shadows.length === 0) return NO_SHADOWS;
-	const theme = node.environment !== null ? node.environment.get(UiEnvironmentKeys.theme) : void 0;
+function resolvePaintShadows(node, value) {
+	if (value === void 0 || Array.isArray(value) && value.length === 0) return NO_SHADOWS;
+	const theme = node.environment !== null ? node.environment.get(UiEnvironmentKeys.theme) : UiEnvironmentKeys.theme.defaultValue;
+	const shadows = shadowsOf(value, theme?.shadows);
+	if (shadows.length === 0) return NO_SHADOWS;
 	const cached = paintShadows.get(shadows);
 	if (cached !== void 0 && cached.theme === theme) return cached.shadows;
 	const resolved = [];
@@ -10702,6 +10942,11 @@ var UiFocusManager = class {
 *     same thing by holding, which the gesture recognizer answers.
 *   - Touch hover: a finger's hover is dropped when it lifts, because
 *     the finger is no longer anywhere. A mouse keeps its hover.
+*   - Touch emulation: over a `touchEmulation` subtree a mouse is taken
+*     as a finger, as a browser's device mode does. Its moves with
+*     nothing pressed hover nothing there, and a press there is a
+*     finger's from down to up: its slop, its gestures and its hover
+*     dropped when it lifts.
 *   - Scrollbars: a press on a scroll container's thumb starts a drag
 *     that moves the content with the pointer; a press on the track
 *     beside a visible thumb pages one viewport toward the pointer.
@@ -10772,6 +11017,8 @@ var UiPointerController = class {
 		return this.lastPosition;
 	}
 	lastPosition = null;
+	/** Whether the last hover hit was on a scrollbar; see `overScrollbar`. */
+	hoverOnScrollbar = false;
 	/** The pressed node and its ancestors when the press began, deepest first. */
 	downPath = [];
 	get hoveredNode() {
@@ -10800,27 +11047,45 @@ var UiPointerController = class {
 		return this.scrollbarDrag?.node ?? null;
 	}
 	/**
+	* Whether the pointer is on a scrollbar, or dragging a thumb: the arrow
+	* is shown there whatever the content under the bar asks for, as over a
+	* native scrollbar. A hit on a bar is its scroll container's, so the
+	* cursor set above that (an editor's I-beam) was shown over the thumb.
+	*/
+	get overScrollbar() {
+		return this.scrollbarDrag !== null || this.hoverOnScrollbar;
+	}
+	/**
 	* Pointer press. Hit-tests at the point, establishes hover, and
 	* dispatches PointerDown to the pressed node. Subsequent moves and
 	* the up are routed to that node until release.
 	*/
-	pointerDown(x, y, buttons = 1, modifiers = noKeyModifiers(), pointer = MOUSE_POINTER) {
+	pointerDown(x, y, buttons = 1, modifiers = noKeyModifiers(), device = MOUSE_POINTER) {
 		this.lastPosition = {
 			x,
 			y
 		};
-		const event = new UiPointerEvent("pointerdown", x, y, buttons, modifiers, pointer);
+		let pointer = device;
+		let event = new UiPointerEvent("pointerdown", x, y, buttons, modifiers, pointer);
 		if (this.downTarget !== null || this.scrollbarDrag !== null) {
 			this.gestures?.contactDown?.(pointer, x, y, this.downTarget, modifiers);
 			return event;
 		}
 		const hit = this.hitTester.hitTest(x, y);
+		this.hoverOnScrollbar = hit?.scrollbar !== void 0;
 		if (hit?.scrollbar !== void 0 && this.scrollSink !== null) {
 			this.activePointer = pointer;
 			this.pressScrollbar(hit.node, hit.scrollbar.axis, hit.scrollbar.onThumb, x, y);
 			return event;
 		}
 		const target = hit?.node ?? null;
+		if (pointer.kind === "mouse" && emulatesTouch(target)) {
+			pointer = {
+				id: pointer.id,
+				kind: "touch"
+			};
+			event = new UiPointerEvent("pointerdown", x, y, buttons, modifiers, pointer);
+		}
 		this.updateHover(target, x, y, buttons, modifiers, pointer);
 		if (target !== null && isSecondaryButton(buttons)) {
 			this.dispatcher.dispatch(event, target);
@@ -10856,11 +11121,12 @@ var UiPointerController = class {
 	* hover enter/leave, and dispatches PointerMove to the hovered
 	* node. Returns null when the move lands on empty space.
 	*/
-	pointerMove(x, y, buttons = 0, modifiers = noKeyModifiers(), pointer = MOUSE_POINTER) {
+	pointerMove(x, y, buttons = 0, modifiers = noKeyModifiers(), device = MOUSE_POINTER) {
 		this.lastPosition = {
 			x,
 			y
 		};
+		const pointer = this.contactOf(device);
 		this.gestures?.contactMove?.(pointer, x, y);
 		if (!this.ownsPress(pointer)) return null;
 		if (this.scrollbarDrag !== null) {
@@ -10882,7 +11148,13 @@ var UiPointerController = class {
 			const zone = this.hitTester.scrollbarZoneAt(x, y);
 			if (zone !== null) this.scrollSink.revealScrollbars(zone.node);
 		}
-		const target = this.hitTester.hitTest(x, y)?.node ?? null;
+		const hit = this.hitTester.hitTest(x, y);
+		this.hoverOnScrollbar = hit?.scrollbar !== void 0;
+		const target = hit?.node ?? null;
+		if (pointer.kind === "mouse" && emulatesTouch(target)) {
+			this.updateHover(null, x, y, buttons, modifiers, pointer);
+			return null;
+		}
 		this.updateHover(target, x, y, buttons, modifiers, pointer);
 		this.selection?.pointerHover?.(target, x, y);
 		if (target === null) return null;
@@ -10896,7 +11168,8 @@ var UiPointerController = class {
 	* cancelled via preventDefault on the down, synthesizes a Click on
 	* the same node. Returns null when nothing was pressed.
 	*/
-	pointerUp(x, y, buttons = 0, modifiers = noKeyModifiers(), pointer = MOUSE_POINTER) {
+	pointerUp(x, y, buttons = 0, modifiers = noKeyModifiers(), device = MOUSE_POINTER) {
+		const pointer = this.contactOf(device);
 		this.gestures?.contactUp?.(pointer);
 		if (!this.ownsPress(pointer)) return null;
 		if (this.scrollbarDrag !== null) {
@@ -10959,7 +11232,8 @@ var UiPointerController = class {
 	* Aborts the active press: dispatches PointerCancel to the pressed
 	* node and clears press state so no Click is synthesized.
 	*/
-	pointerCancel(pointer = MOUSE_POINTER) {
+	pointerCancel(device = MOUSE_POINTER) {
+		const pointer = this.contactOf(device);
 		this.gestures?.contactUp?.(pointer);
 		if (!this.ownsPress(pointer)) return;
 		this.scrollbarDrag = null;
@@ -10989,6 +11263,10 @@ var UiPointerController = class {
 	ownsPress(pointer) {
 		return this.activePointer === null || this.activePointer.id === pointer.id;
 	}
+	/** The contact an event is from: the press's own, which an emulated finger's mouse events are part of. */
+	contactOf(device) {
+		return this.activePointer !== null && this.activePointer.id === device.id ? this.activePointer : device;
+	}
 	/**
 	* A press on the thumb starts a drag that maps pointer travel to
 	* scroll offset through the thumb's travel range. A press on the
@@ -11096,6 +11374,7 @@ var UiPointerController = class {
 	*/
 	releaseHover(x, y, modifiers, pointer) {
 		if (pointer.kind !== "touch") return;
+		this.hoverOnScrollbar = false;
 		this.updateHover(null, x, y, 0, modifiers, pointer);
 	}
 };
@@ -14945,86 +15224,6 @@ var MeasureSlot = class {
 	}
 };
 //#endregion
-//#region src/layout/SubtreeBounds.ts
-/**
-* Fills in the subtree bounds of every record under `root`, bottom up.
-*
-* The traversal mirrors the hit tester's exactly, `paintOrder` and
-* transparent fragments included, so the set of nodes a box covers is
-* the set of nodes the descent it replaces would have reached.
-*/
-function fillSubtreeBounds(root, records) {
-	fillNode(root, records);
-}
-/**
-* A node's bounds, and its whole subtree's on the way there. Returns
-* null for a node with no record, a fragment above all, which has
-* nothing of its own to contribute to its parent's box.
-*/
-function fillNode(node, records) {
-	const rec = records.get(node);
-	if (rec === void 0) return null;
-	rec.boundsMinX = rec.x;
-	rec.boundsMinY = rec.y;
-	rec.boundsMaxX = rec.x + rec.width;
-	rec.boundsMaxY = rec.y + rec.height;
-	rec.boundsUnbounded = isUnbounded(node, rec);
-	fillChildren(node, rec.paintOrder, records, rec.clips ? null : rec);
-	return rec;
-}
-function fillChildren(parent, order, records, into) {
-	if (order !== null) {
-		for (let i = 0; i < order.length; i++) union(into, fillNode(order[i], records));
-		return;
-	}
-	for (let child = parent.firstChild; child !== null; child = child.nextSibling) if (child.type === "fragment") fillChildren(child, null, records, into);
-	else union(into, fillNode(child, records));
-}
-function union(into, child) {
-	if (into === null || child === null) return;
-	if (child.boundsUnbounded) {
-		into.boundsUnbounded = true;
-		return;
-	}
-	if (child.boundsMinX < into.boundsMinX) into.boundsMinX = child.boundsMinX;
-	if (child.boundsMinY < into.boundsMinY) into.boundsMinY = child.boundsMinY;
-	if (child.boundsMaxX > into.boundsMaxX) into.boundsMaxX = child.boundsMaxX;
-	if (child.boundsMaxY > into.boundsMaxY) into.boundsMaxY = child.boundsMaxY;
-}
-/**
-* Whether a node's own hit area is something its parent's box cannot
-* describe.
-*
-* A transform is the first case. The hit tester inverts the point into
-* a node's local space before it compares anything, so the box a
-* parent would test the point against is in the space the transform
-* moved the node out of: a node translated three hundred pixels up is
-* hit three hundred pixels up and bounded where it is not. Mapping the
-* box forward through the transform is possible, and rotation makes it
-* fiddly enough to be worth doing on its own evidence rather than
-* here; until then a transformed node is simply always descended into.
-*
-* Sticky is the second. A sticky node is drawn, and hit, shifted from
-* its record by an offset `applySticky` writes after placement, and
-* the shift moves the node's whole subtree without moving a single
-* box. The shifted box is knowable here, but it is knowable only
-* because the walk runs after layout has settled, and that is a
-* thinner reason than the rule these bounds are held to. Sticky nodes
-* are few, and every one of them sits inside a scroll container, whose
-* clip stops the flag going any further.
-*
-* Anchored nodes are deliberately not on this list. An anchored
-* overlay is re-placed after the pass that moved its anchor, but every
-* such move writes a box, and a written box invalidates these bounds,
-* so the walk that fills them always runs against the boxes an anchor
-* settled on.
-*/
-function isUnbounded(node, rec) {
-	if (rec.sticky) return true;
-	const transform = node.properties.get("transform");
-	return typeof transform === "object" && transform !== null;
-}
-//#endregion
 //#region src/layout/LayoutTransform.ts
 /**
 * Maps a container's content space into its own outer
@@ -15135,6 +15334,109 @@ function transformPointsIn(node, record, points) {
 	}
 }
 //#endregion
+//#region src/layout/SubtreeBounds.ts
+/**
+* Fills in the subtree bounds of every record under `root`, bottom up.
+*
+* The traversal mirrors the hit tester's exactly, `paintOrder` and
+* transparent fragments included, so the set of nodes a box covers is
+* the set of nodes the descent it replaces would have reached.
+*/
+function fillSubtreeBounds(root, records) {
+	fillNode(root, records);
+}
+/**
+* A node's bounds, and its whole subtree's on the way there. Returns
+* null for a node with no record, a fragment above all, which has
+* nothing of its own to contribute to its parent's box.
+*/
+function fillNode(node, records) {
+	const rec = records.get(node);
+	if (rec === void 0) return null;
+	rec.boundsMinX = rec.x;
+	rec.boundsMinY = rec.y;
+	rec.boundsMaxX = rec.x + rec.width;
+	rec.boundsMaxY = rec.y + rec.height;
+	rec.boundsUnbounded = isUnbounded(node, rec);
+	fillChildren(node, rec.paintOrder, records, rec.clips ? null : rec);
+	const transform = node.properties.get("transform");
+	if (!rec.boundsUnbounded && typeof transform === "object" && transform !== null) mapThroughTransform(node, rec);
+	return rec;
+}
+/**
+* A transformed node's bounds, carried out through its transform: the
+* box around where its corners land. Never smaller than what is drawn,
+* because a box's image under any affine transform is inside the box
+* around its corners' images; larger only by a rotation's corners.
+*/
+function mapThroughTransform(node, rec) {
+	const corners = new Float64Array([
+		rec.boundsMinX,
+		rec.boundsMinY,
+		rec.boundsMaxX,
+		rec.boundsMinY,
+		rec.boundsMaxX,
+		rec.boundsMaxY,
+		rec.boundsMinX,
+		rec.boundsMaxY
+	]);
+	transformPointsOut(node, rec, corners);
+	rec.boundsMinX = Math.min(corners[0], corners[2], corners[4], corners[6]);
+	rec.boundsMinY = Math.min(corners[1], corners[3], corners[5], corners[7]);
+	rec.boundsMaxX = Math.max(corners[0], corners[2], corners[4], corners[6]);
+	rec.boundsMaxY = Math.max(corners[1], corners[3], corners[5], corners[7]);
+}
+function fillChildren(parent, order, records, into) {
+	if (order !== null) {
+		for (let i = 0; i < order.length; i++) union(into, fillNode(order[i], records));
+		return;
+	}
+	for (let child = parent.firstChild; child !== null; child = child.nextSibling) if (child.type === "fragment") fillChildren(child, null, records, into);
+	else union(into, fillNode(child, records));
+}
+function union(into, child) {
+	if (into === null || child === null) return;
+	if (child.boundsUnbounded) {
+		into.boundsUnbounded = true;
+		return;
+	}
+	if (child.boundsMinX < into.boundsMinX) into.boundsMinX = child.boundsMinX;
+	if (child.boundsMinY < into.boundsMinY) into.boundsMinY = child.boundsMinY;
+	if (child.boundsMaxX > into.boundsMaxX) into.boundsMaxX = child.boundsMaxX;
+	if (child.boundsMaxY > into.boundsMaxY) into.boundsMaxY = child.boundsMaxY;
+}
+/**
+* Whether a node's own hit area is something its parent's box cannot
+* describe.
+*
+* A transform was the first case, and is not any more: the hit tester
+* inverts the point into a node's local space before it compares
+* anything, so the box a parent tests the point against has to be in
+* the space the transform moves the node into, and `mapThroughTransform`
+* carries it there. The evidence it was worth doing on: a design tool's
+* board, every frame's name drawn the same size at any zoom by a
+* transform, left every ancestor of every name unbounded, and nothing
+* on the board was ever passed over.
+*
+* Sticky is the case that remains. A sticky node is drawn, and hit, shifted from
+* its record by an offset `applySticky` writes after placement, and
+* the shift moves the node's whole subtree without moving a single
+* box. The shifted box is knowable here, but it is knowable only
+* because the walk runs after layout has settled, and that is a
+* thinner reason than the rule these bounds are held to. Sticky nodes
+* are few, and every one of them sits inside a scroll container, whose
+* clip stops the flag going any further.
+*
+* Anchored nodes are deliberately not on this list. An anchored
+* overlay is re-placed after the pass that moved its anchor, but every
+* such move writes a box, and a written box invalidates these bounds,
+* so the walk that fills them always runs against the boxes an anchor
+* settled on.
+*/
+function isUnbounded(_node, rec) {
+	return rec.sticky;
+}
+//#endregion
 //#region src/layout/LayoutExplanation.ts
 const EPSILON$1 = 1e-6;
 /**
@@ -15388,6 +15690,8 @@ function formatExplanation(explanation) {
 //#endregion
 //#region src/layout/LayoutEngine.ts
 /** How long overlay scrollbars stay after the last scroll change. */
+/** Lengths already reported as refused, by node, so each is said once. */
+const refusedLengths = /* @__PURE__ */ new WeakMap();
 const SCROLLBAR_LINGER_MS = 1200;
 /** Portion of the linger during which the scrollbar fades out. */
 const SCROLLBAR_FADE_MS = 350;
@@ -15596,7 +15900,8 @@ const reachScratch = {
 * shadow that is on screen.
 */
 function readPaintReach(node, rec) {
-	const shadows = node.properties.get("boxShadows");
+	const value = node.properties.get("boxShadows");
+	const shadows = typeof value === "string" ? shadowsOf(value, (node.environment?.get(UiEnvironmentKeys.theme) ?? UiEnvironmentKeys.theme.defaultValue).shadows) : value;
 	let left = 0;
 	let top = 0;
 	let right = 0;
@@ -16482,6 +16787,19 @@ var LayoutEngine = class {
 		return part === void 0 ? this.projectBox(node, rec.x, rec.y, rec.width, rec.height) : this.projectBox(node, rec.x + part.x, rec.y + part.y, part.width, part.height);
 	}
 	/**
+	* Where everything under a node is drawn, through every transform
+	* above it: its subtree's bounds, as `subtreeBoundsFor` left them,
+	* projected as `screenBox` projects the node's own box. Null when the
+	* subtree has no bounds to cull by (it draws past them, or has no
+	* record). What a walk under a panned, zoomed parent passes a whole
+	* subtree over by when none of it is on screen.
+	*/
+	screenBounds(node) {
+		const rec = this.records.get(node);
+		if (rec === void 0 || rec.boundsUnbounded) return null;
+		return this.projectBox(node, rec.boundsMinX, rec.boundsMinY, rec.boundsMaxX - rec.boundsMinX, rec.boundsMaxY - rec.boundsMinY);
+	}
+	/**
 	* The scroll offsets each scroll ancestor would need so that `node`
 	* is inside its viewport, `padding` pixels from the nearest edge,
 	* innermost first. Nothing is changed: the caller writes the offsets
@@ -19350,14 +19668,36 @@ var LayoutEngine = class {
 		const raw = node.properties.get(property);
 		if (raw === void 0) return;
 		if (typeof raw === "number" && Number.isFinite(raw)) return raw;
-		const value = resolveLength(raw, base, property);
+		const value = this.lengthOrNothing(node, raw, base, property, false);
 		return value === "auto" ? void 0 : value;
 	}
 	lengthPropOrAuto(node, property, base) {
 		const raw = node.properties.get(property);
 		if (raw === void 0) return;
 		if (typeof raw === "number" && Number.isFinite(raw)) return raw;
-		return resolveLength(raw, base, property, true);
+		return this.lengthOrNothing(node, raw, base, property, true);
+	}
+	/**
+	* A length, or nothing when the value cannot be one. A plain value
+	* that cannot is refused when it is written (each length property's
+	* `validate`); one that arrives bound, from an Observable, is caught
+	* here. Throwing here abandoned the frame, and with it every other
+	* element: one mock's `width: '100%'` stopped a whole design editor
+	* drawing. So it is said, once for the node and property, and the
+	* element is laid out as if the property were not set.
+	*/
+	lengthOrNothing(node, raw, base, property, keepAuto) {
+		try {
+			return resolveLength(raw, base, property, keepAuto);
+		} catch (error) {
+			const said = refusedLengths.get(node) ?? /* @__PURE__ */ new Set();
+			if (!said.has(property)) {
+				said.add(property);
+				refusedLengths.set(node, said);
+				console.error(`[gesso] ${error.message} On node '${node.id}'; laid out as if it were not set.`);
+			}
+			return;
+		}
 	}
 	/**
 	* A margin side: the side's own value, else the logical side that
@@ -19367,7 +19707,12 @@ var LayoutEngine = class {
 		const value = props.get(side) ?? (logical !== void 0 ? props.get(logical) : void 0) ?? props.get(axis) ?? props.get("margin");
 		if (value === void 0) return 0;
 		if (typeof value === "number" && Number.isFinite(value)) return value;
-		return resolveLength(value, void 0, side, true) ?? 0;
+		try {
+			return resolveLength(value, void 0, side, true) ?? 0;
+		} catch (error) {
+			console.error(`[gesso] ${error.message} Laid out as 0.`);
+			return 0;
+		}
 	}
 	textWrapProp(node) {
 		const value = node.properties.get("textWrap");
@@ -19452,335 +19797,24 @@ function hasPercentLength(props, names) {
 	return false;
 }
 //#endregion
-//#region src/rendering/ScrollSnap.ts
+//#region src/rendering/PaintPathData.ts
 /**
-* A scroll offset as it is drawn: on a whole device pixel.
+* SVG path data, as calls on a `PaintSurface`.
 *
-* The offset a container holds stays exact, so a trackpad's steps of a
-* fraction of a pixel still add up; only what is drawn lands on the
-* pixel grid, as a browser draws scrolled content. Drawn at the exact
-* offset, text lands between pixels and rasterises differently each
-* frame, which shimmers as a flick coasts to a stop.
-*/
-function snapScroll(offset, dpr) {
-	return Math.round(offset * dpr) / dpr;
-}
-//#endregion
-//#region src/rendering/OverlayShapes.ts
-/** Where a label's background box goes: above its box when there is room, else inside its top edge. */
-function labelOrigin(shape) {
-	return {
-		x: Math.max(0, shape.box.x),
-		y: shape.box.y >= shape.height ? shape.box.y - shape.height : shape.box.y
-	};
-}
-/** Horizontal padding inside a label box, each side. */
-const LABEL_PADDING_X = 4;
-/**
-* Draws overlay shapes onto a 2D context left in logical pixels, as the
-* Canvas2D renderer leaves it after a frame. Styles are assigned only
-* when they change, so a run of strips in one colour is one style set.
-*/
-function drawOverlayShapes(ctx, shapes) {
-	let fillStyle;
-	let strokeStyle;
-	let lineWidth;
-	const fill = (color) => {
-		if (fillStyle !== color) {
-			ctx.fillStyle = color;
-			fillStyle = color;
-		}
-	};
-	for (const shape of shapes) switch (shape.kind) {
-		case "fill":
-			fill(shape.color);
-			ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
-			break;
-		case "stroke": {
-			if (strokeStyle !== shape.color) {
-				ctx.strokeStyle = shape.color;
-				strokeStyle = shape.color;
-			}
-			if (lineWidth !== shape.lineWidth) {
-				ctx.lineWidth = shape.lineWidth;
-				lineWidth = shape.lineWidth;
-			}
-			const inset = shape.lineWidth / 2;
-			ctx.strokeRect(shape.x + inset, shape.y + inset, Math.max(0, shape.width - shape.lineWidth), Math.max(0, shape.height - shape.lineWidth));
-			break;
-		}
-		case "label": {
-			ctx.font = shape.font;
-			ctx.textAlign = "left";
-			ctx.textBaseline = "alphabetic";
-			const width = ctx.measureText(shape.text).width + 8;
-			const { x, y } = labelOrigin(shape);
-			fill(shape.background);
-			ctx.fillRect(x, y, width, shape.height);
-			fill(shape.textColor);
-			ctx.fillText(shape.text, x + 4, y + shape.height - 4);
-			break;
-		}
-	}
-}
-//#endregion
-//#region src/rendering/Decorations.ts
-/**
-* Places a decoration against the node's record.
-*
-* Shared by both backends rather than derived twice: the offsets, the
-* outset and the inherited radius are exactly the arithmetic the two
-* renderers would otherwise drift on.
-*/
-function decorationRect(shape, rec, nodeRadius) {
-	const outset = shape.outset ?? 0;
-	const horizontal = axis(rec.x, rec.width, shape.x, shape.width, shape.right, outset);
-	const vertical = axis(rec.y, rec.height, shape.y, shape.height, shape.bottom, outset);
-	const radius = Math.max(0, shape.radius ?? nodeRadius + outset);
-	return {
-		x: horizontal.start,
-		y: vertical.start,
-		width: horizontal.size,
-		height: vertical.size,
-		radius
-	};
-}
-/**
-* One axis of the placement, from any two of near, size and far.
-*
-* The outset applies after the three are reconciled, growing the
-* rectangle by it on both sides, so it means the same thing however
-* the rectangle was described.
-*/
-function axis(origin, extent, near, size, far, outset) {
-	let start;
-	let length;
-	if (near === void 0 && size !== void 0 && far !== void 0) {
-		length = size;
-		start = extent - far - size;
-	} else {
-		start = near ?? 0;
-		length = size ?? extent - start - (far ?? 0);
-	}
-	return {
-		start: origin + start - outset,
-		size: Math.max(0, length + 2 * outset)
-	};
-}
-/**
-* A decoration's colour, resolved against the node it decorates.
-*
-* The same rule every colour prop follows: a palette name resolves
-* against whatever theme the node inherits, at paint. That is why
-* `focusRing()` never reads the theme — it names `focusRing` and the
-* node's environment decides what that is, so a ring inside a dark
-* card is the dark palette's without the modifier knowing there was a
-* card.
-*/
-function decorationColor(node, shape) {
-	return resolveColorValue(node, shape.color);
-}
-/** Whether a shape paints before the node's children or after them. */
-function paintsAfterChildren(shape) {
-	return shape.after === "children";
-}
-/** Whether any shape in the list paints in the given phase; lets a renderer skip a pass. */
-function hasDecorationPhase(shapes, after) {
-	for (const shape of shapes) if (paintsAfterChildren(shape) === after) return true;
-	return false;
-}
-//#endregion
-//#region src/rendering/ScaledImageCache.ts
-/**
-* How many consecutive frames a size must hold before a copy is made.
-*
-* A morph transition scales its image every frame, so every frame
-* asks for a size no copy will ever be asked for again. Building one
-* anyway would add a blit to a frame that already had to resample,
-* making the one case that is most sensitive to frame time worse.
-* Two frames is enough to tell a settled layout from an animating
-* one, and costs an animation nothing it was not already paying.
-*/
-const FRAMES_BEFORE_COPY = 2;
-/**
-* The largest copy worth keeping, in device pixels.
-*
-* A full-bleed image on a 3440x1440 display is about 5 megapixels
-* and 20MB as a copy, which is worth it: that image is the single
-* most expensive draw in the frame. Twice that is not, so the
-* ceiling sits above the largest real screen and below anything a
-* mistake would ask for.
-*/
-const MAX_COPY_PIXELS = 12e6;
-/**
-* How many copies to keep.
-*
-* One per image visible at once, near enough. A shelf of artwork
-* scrolls new images in and old ones out, and the cost of losing a
-* copy is one resampled draw plus one blit, so this only has to be
-* large enough that a screenful does not evict itself.
-*/
-const MAX_ENTRIES = 48;
-function defaultSurfaceFactory(width, height) {
-	return new OffscreenCanvas(width, height);
-}
-/**
-* Whether this environment can make a copy at all.
-*
-* `OffscreenCanvas` is the only synchronous way to resample: the
-* asynchronous `createImageBitmap(source, { resizeWidth })` cannot
-* be awaited inside a frame, and a copy that arrives a frame later
-* is a copy that arrives after the size it was made for has changed.
-*/
-function canScaleImages() {
-	return typeof OffscreenCanvas === "function";
-}
-var ScaledImageCache = class {
-	/**
-	* Insertion-ordered, which is what makes eviction least-recently-used:
-	* a hit deletes and re-sets its key, so the oldest entry is first.
-	*
-	* A `Map` rather than a `WeakMap` because eviction has to be able to
-	* find the entry it is dropping in order to close the copy it holds,
-	* and a weak collection cannot be walked. The strong reference to the
-	* source is bounded by `MAX_ENTRIES` and released on eviction.
-	*/
-	entries = /* @__PURE__ */ new Map();
-	/**
-	* A number per source, so an entry can be keyed by picture *and*
-	* size.
-	*
-	* One slot per source was a bug rather than a simplification. A
-	* picture on screen at two sizes at once — Segue's now-playing bar
-	* shows the same cover at 52px that its page shows at 340 — had the
-	* two draws fight over the single slot: each in turn held the size
-	* long enough to earn a copy, made it, and closed the other's. The
-	* smaller one then alternated between a crisp copy and a raw
-	* downsample of the source every few frames, which reads on screen as
-	* the picture shimmering. `ScaledImageCache.spec.ts` pins it.
-	*
-	* `WeakMap`, so a source that goes away takes its id with it; the
-	* entries themselves are still strongly held and evicted by count.
-	*/
-	sourceIds = /* @__PURE__ */ new WeakMap();
-	nextSourceId = 1;
-	createSurface;
-	enabled;
-	constructor(createSurface) {
-		this.enabled = createSurface !== void 0 || canScaleImages();
-		this.createSurface = createSurface ?? defaultSurfaceFactory;
-	}
-	/**
-	* The image to draw for a destination of `width` x `height` device
-	* pixels: a copy at that exact size when one is worth having and
-	* ready, and otherwise `source` unchanged.
-	*
-	* Always safe to draw the result at the destination rectangle the
-	* sizes came from. A copy is a resample of the same pixels, so the
-	* picture is the same either way; only which of the two resamples
-	* runs this frame differs.
-	*/
-	resolve(source, width, height) {
-		if (!this.enabled) return source;
-		const w = Math.round(width);
-		const h = Math.round(height);
-		if (w <= 0 || h <= 0 || w * h > MAX_COPY_PIXELS) return source;
-		if (source.width === w && source.height === h) return source;
-		const key = this.keyFor(source, w, h);
-		const entry = this.entries.get(key);
-		if (entry === void 0) {
-			this.insert(key, {
-				source,
-				bitmap: null,
-				width: w,
-				height: h,
-				stable: 1
-			});
-			return source;
-		}
-		this.entries.delete(key);
-		this.entries.set(key, entry);
-		if (entry.bitmap !== null) return entry.bitmap;
-		entry.stable++;
-		if (entry.stable < FRAMES_BEFORE_COPY) return source;
-		const copy = this.copy(source, w, h);
-		if (copy === null) return source;
-		entry.bitmap = copy;
-		return copy;
-	}
-	/** Drops every copy. Called when the renderer goes away. */
-	dispose() {
-		for (const entry of this.entries.values()) entry.bitmap?.close();
-		this.entries.clear();
-	}
-	/** How many picture-and-size pairs are tracked. For specs and the inspector. */
-	get size() {
-		return this.entries.size;
-	}
-	/**
-	* The cache key: this picture, at this size.
-	*
-	* A size that is asked for once and never again makes an entry that
-	* holds no copy and is evicted by count like any other, which is why
-	* a morph scaling every frame costs entries rather than copies.
-	*/
-	keyFor(source, width, height) {
-		let id = this.sourceIds.get(source);
-		if (id === void 0) {
-			id = this.nextSourceId++;
-			this.sourceIds.set(source, id);
-		}
-		return `${id}:${width}x${height}`;
-	}
-	insert(key, entry) {
-		if (this.entries.size >= MAX_ENTRIES) {
-			const oldest = this.entries.keys().next();
-			if (!oldest.done) {
-				this.entries.get(oldest.value)?.bitmap?.close();
-				this.entries.delete(oldest.value);
-			}
-		}
-		this.entries.set(key, entry);
-	}
-	/**
-	* Resamples once, into a bitmap.
-	*
-	* Failure is not exceptional: a source that has been closed under
-	* us throws here, and the honest answer is to draw the original and
-	* let the next frame notice. So this reports null rather than
-	* letting a frame die over an image.
-	*/
-	copy(source, width, height) {
-		try {
-			const surface = this.createSurface(width, height);
-			const context = surface.getContext("2d");
-			if (context === null) return null;
-			context.drawImage(source, 0, 0, width, height);
-			return surface.transferToImageBitmap();
-		} catch {
-			return null;
-		}
-	}
-};
-//#endregion
-//#region src/rendering/PaintPathData.ts
-/**
-* SVG path data, as calls on a `PaintSurface`.
-*
-* `IconRasterizer` hands its `d` string to `Path2D` and lets the
-* browser do this. That is the right call there, because an icon is
-* only ever rasterised in a browser, and it is the wrong call here for
-* two reasons: `Path2D` does not exist in the suite, so nothing about
-* a path could be asserted without a browser, and a recording that
-* held an opaque `Path2D` could not be compared, replayed or handed to
-* a second backend, which is the whole design.
-*
-* The grammar is the full one: `M L H V C S Q T A Z`, upper case
-* absolute and lower case relative, repeated coordinate sets after one
-* command letter, and the shorthand curves' reflected control points.
-* An unknown letter ends the parse rather than throwing, because a
-* half-drawn logo is a better failure in front of a person than a
-* blank frame.
+* `IconRasterizer` hands its `d` string to `Path2D` and lets the
+* browser do this. That is the right call there, because an icon is
+* only ever rasterised in a browser, and it is the wrong call here for
+* two reasons: `Path2D` does not exist in the suite, so nothing about
+* a path could be asserted without a browser, and a recording that
+* held an opaque `Path2D` could not be compared, replayed or handed to
+* a second backend, which is the whole design.
+*
+* The grammar is the full one: `M L H V C S Q T A Z`, upper case
+* absolute and lower case relative, repeated coordinate sets after one
+* command letter, and the shorthand curves' reflected control points.
+* An unknown letter ends the parse rather than throwing, because a
+* half-drawn logo is a better failure in front of a person than a
+* blank frame.
 */
 function tracePathData(surface, d) {
 	const scanner = new Scanner(d);
@@ -19905,133 +19939,444 @@ function reflect(control, x, y) {
 	return control === null ? [x, y] : [2 * x - control[0], 2 * y - control[1]];
 }
 /**
-* An elliptical arc as cubic segments, by the endpoint-to-centre
-* conversion in the SVG specification's implementation notes.
+* An elliptical arc as cubic segments, by the endpoint-to-centre
+* conversion in the SVG specification's implementation notes.
+*
+* Nothing in the surface draws an ellipse, and nothing should: an arc
+* with a rotation and two radii is the only shape in the grammar that
+* a rectangle-and-curve vocabulary cannot state, and one conversion
+* here is cheaper than a primitive every consumer of the recording
+* would have to implement. Ninety degrees per segment keeps the error
+* far under a tenth of a pixel at icon sizes.
+*/
+function arcToCurves(surface, x0, y0, rx, ry, rotation, largeArc, sweep, x1, y1) {
+	if (x0 === x1 && y0 === y1) return;
+	let radiusX = Math.abs(rx);
+	let radiusY = Math.abs(ry);
+	if (radiusX === 0 || radiusY === 0) {
+		surface.lineTo(x1, y1);
+		return;
+	}
+	const cos = Math.cos(rotation);
+	const sin = Math.sin(rotation);
+	const dx = (x0 - x1) / 2;
+	const dy = (y0 - y1) / 2;
+	const px = cos * dx + sin * dy;
+	const py = -sin * dx + cos * dy;
+	const lambda = px * px / (radiusX * radiusX) + py * py / (radiusY * radiusY);
+	if (lambda > 1) {
+		const grow = Math.sqrt(lambda);
+		radiusX *= grow;
+		radiusY *= grow;
+	}
+	const numerator = radiusX * radiusX * radiusY * radiusY - radiusX * radiusX * py * py - radiusY * radiusY * px * px;
+	const denominator = radiusX * radiusX * py * py + radiusY * radiusY * px * px;
+	const factor = (largeArc === sweep ? -1 : 1) * Math.sqrt(Math.max(0, numerator / denominator));
+	const cxPrime = factor * radiusX * py / radiusY;
+	const cyPrime = -factor * radiusY * px / radiusX;
+	const cx = cos * cxPrime - sin * cyPrime + (x0 + x1) / 2;
+	const cy = sin * cxPrime + cos * cyPrime + (y0 + y1) / 2;
+	const start = Math.atan2((py - cyPrime) / radiusY, (px - cxPrime) / radiusX);
+	let sweepAngle = Math.atan2((-py - cyPrime) / radiusY, (-px - cxPrime) / radiusX) - start;
+	if (!sweep && sweepAngle > 0) sweepAngle -= 2 * Math.PI;
+	else if (sweep && sweepAngle < 0) sweepAngle += 2 * Math.PI;
+	const segments = Math.max(1, Math.ceil(Math.abs(sweepAngle) / (Math.PI / 2)));
+	const step = sweepAngle / segments;
+	const handle = 4 / 3 * Math.tan(step / 4);
+	let angle = start;
+	for (let i = 0; i < segments; i++) {
+		const next = angle + step;
+		const cosA = Math.cos(angle);
+		const sinA = Math.sin(angle);
+		const cosB = Math.cos(next);
+		const sinB = Math.sin(next);
+		const p1 = onEllipse(cx, cy, radiusX, radiusY, cos, sin, cosA - handle * sinA, sinA + handle * cosA);
+		const p2 = onEllipse(cx, cy, radiusX, radiusY, cos, sin, cosB + handle * sinB, sinB - handle * cosB);
+		const p3 = onEllipse(cx, cy, radiusX, radiusY, cos, sin, cosB, sinB);
+		surface.bezierCurveTo(p1[0], p1[1], p2[0], p2[1], p3[0], p3[1]);
+		angle = next;
+	}
+}
+/** A point on the rotated ellipse, from its unit-circle coordinates. */
+function onEllipse(cx, cy, rx, ry, cos, sin, ux, uy) {
+	const x = rx * ux;
+	const y = ry * uy;
+	return [cx + cos * x - sin * y, cy + sin * x + cos * y];
+}
+/**
+* A cursor over path data.
+*
+* Path data is written without separators wherever it can be
+* (`M0 0l5-3.5`), so nothing here can split on whitespace: numbers are
+* read character by character, and the two arc flags are read as a
+* single digit each, which is the one place the grammar is not a plain
+* number list.
+*/
+var Scanner = class {
+	source;
+	index = 0;
+	constructor(source) {
+		this.source = source;
+	}
+	get done() {
+		return this.index >= this.source.length;
+	}
+	skipSeparators() {
+		while (this.index < this.source.length) {
+			const code = this.source.charCodeAt(this.index);
+			if (code === 32 || code === 9 || code === 10 || code === 13 || code === 12 || code === 44) {
+				this.index++;
+				continue;
+			}
+			return;
+		}
+	}
+	/** The command letter here, consumed; undefined when a number is next. */
+	peekCommand() {
+		const char = this.source[this.index];
+		if (char === void 0 || !/[a-zA-Z]/.test(char)) return;
+		this.index++;
+		return char;
+	}
+	number() {
+		this.skipSeparators();
+		const start = this.index;
+		if (this.source[this.index] === "+" || this.source[this.index] === "-") this.index++;
+		while (this.isDigit()) this.index++;
+		if (this.source[this.index] === ".") {
+			this.index++;
+			while (this.isDigit()) this.index++;
+		}
+		const exponent = this.source[this.index];
+		if (exponent === "e" || exponent === "E") {
+			this.index++;
+			if (this.source[this.index] === "+" || this.source[this.index] === "-") this.index++;
+			while (this.isDigit()) this.index++;
+		}
+		const value = Number.parseFloat(this.source.slice(start, this.index));
+		return Number.isNaN(value) ? 0 : value;
+	}
+	/** One character, `0` or `1`: the arc flags carry no separator. */
+	flag() {
+		this.skipSeparators();
+		const char = this.source[this.index];
+		this.index++;
+		return char === "1";
+	}
+	isDigit() {
+		const code = this.source.charCodeAt(this.index);
+		return code >= 48 && code <= 57;
+	}
+};
+//#endregion
+//#region src/rendering/ScrollSnap.ts
+/**
+* A scroll offset as it is drawn: on a whole device pixel.
+*
+* The offset a container holds stays exact, so a trackpad's steps of a
+* fraction of a pixel still add up; only what is drawn lands on the
+* pixel grid, as a browser draws scrolled content. Drawn at the exact
+* offset, text lands between pixels and rasterises differently each
+* frame, which shimmers as a flick coasts to a stop.
+*/
+function snapScroll(offset, dpr) {
+	return Math.round(offset * dpr) / dpr;
+}
+//#endregion
+//#region src/rendering/OverlayShapes.ts
+/** Where a label's background box goes: above its box when there is room, else inside its top edge. */
+function labelOrigin(shape) {
+	return {
+		x: Math.max(0, shape.box.x),
+		y: shape.box.y >= shape.height ? shape.box.y - shape.height : shape.box.y
+	};
+}
+/** Horizontal padding inside a label box, each side. */
+const LABEL_PADDING_X = 4;
+/**
+* Draws overlay shapes onto a 2D context left in logical pixels, as the
+* Canvas2D renderer leaves it after a frame. Styles are assigned only
+* when they change, so a run of strips in one colour is one style set.
+*/
+function drawOverlayShapes(ctx, shapes) {
+	let fillStyle;
+	let strokeStyle;
+	let lineWidth;
+	const fill = (color) => {
+		if (fillStyle !== color) {
+			ctx.fillStyle = color;
+			fillStyle = color;
+		}
+	};
+	for (const shape of shapes) switch (shape.kind) {
+		case "fill":
+			fill(shape.color);
+			ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
+			break;
+		case "stroke": {
+			if (strokeStyle !== shape.color) {
+				ctx.strokeStyle = shape.color;
+				strokeStyle = shape.color;
+			}
+			if (lineWidth !== shape.lineWidth) {
+				ctx.lineWidth = shape.lineWidth;
+				lineWidth = shape.lineWidth;
+			}
+			const inset = shape.lineWidth / 2;
+			ctx.strokeRect(shape.x + inset, shape.y + inset, Math.max(0, shape.width - shape.lineWidth), Math.max(0, shape.height - shape.lineWidth));
+			break;
+		}
+		case "label": {
+			ctx.font = shape.font;
+			ctx.textAlign = "left";
+			ctx.textBaseline = "alphabetic";
+			const width = ctx.measureText(shape.text).width + 8;
+			const { x, y } = labelOrigin(shape);
+			fill(shape.background);
+			ctx.fillRect(x, y, width, shape.height);
+			fill(shape.textColor);
+			ctx.fillText(shape.text, x + 4, y + shape.height - 4);
+			break;
+		}
+	}
+}
+//#endregion
+//#region src/rendering/Decorations.ts
+/**
+* Places a decoration against the node's record.
+*
+* Shared by both backends rather than derived twice: the offsets, the
+* outset and the inherited radius are exactly the arithmetic the two
+* renderers would otherwise drift on.
+*/
+function decorationRect(shape, rec, nodeRadius) {
+	const outset = shape.outset ?? 0;
+	const horizontal = axis(rec.x, rec.width, shape.x, shape.width, shape.right, outset);
+	const vertical = axis(rec.y, rec.height, shape.y, shape.height, shape.bottom, outset);
+	const radius = Math.max(0, shape.radius ?? nodeRadius + outset);
+	return {
+		x: horizontal.start,
+		y: vertical.start,
+		width: horizontal.size,
+		height: vertical.size,
+		radius
+	};
+}
+/**
+* One axis of the placement, from any two of near, size and far.
 *
-* Nothing in the surface draws an ellipse, and nothing should: an arc
-* with a rotation and two radii is the only shape in the grammar that
-* a rectangle-and-curve vocabulary cannot state, and one conversion
-* here is cheaper than a primitive every consumer of the recording
-* would have to implement. Ninety degrees per segment keeps the error
-* far under a tenth of a pixel at icon sizes.
+* The outset applies after the three are reconciled, growing the
+* rectangle by it on both sides, so it means the same thing however
+* the rectangle was described.
 */
-function arcToCurves(surface, x0, y0, rx, ry, rotation, largeArc, sweep, x1, y1) {
-	if (x0 === x1 && y0 === y1) return;
-	let radiusX = Math.abs(rx);
-	let radiusY = Math.abs(ry);
-	if (radiusX === 0 || radiusY === 0) {
-		surface.lineTo(x1, y1);
-		return;
-	}
-	const cos = Math.cos(rotation);
-	const sin = Math.sin(rotation);
-	const dx = (x0 - x1) / 2;
-	const dy = (y0 - y1) / 2;
-	const px = cos * dx + sin * dy;
-	const py = -sin * dx + cos * dy;
-	const lambda = px * px / (radiusX * radiusX) + py * py / (radiusY * radiusY);
-	if (lambda > 1) {
-		const grow = Math.sqrt(lambda);
-		radiusX *= grow;
-		radiusY *= grow;
-	}
-	const numerator = radiusX * radiusX * radiusY * radiusY - radiusX * radiusX * py * py - radiusY * radiusY * px * px;
-	const denominator = radiusX * radiusX * py * py + radiusY * radiusY * px * px;
-	const factor = (largeArc === sweep ? -1 : 1) * Math.sqrt(Math.max(0, numerator / denominator));
-	const cxPrime = factor * radiusX * py / radiusY;
-	const cyPrime = -factor * radiusY * px / radiusX;
-	const cx = cos * cxPrime - sin * cyPrime + (x0 + x1) / 2;
-	const cy = sin * cxPrime + cos * cyPrime + (y0 + y1) / 2;
-	const start = Math.atan2((py - cyPrime) / radiusY, (px - cxPrime) / radiusX);
-	let sweepAngle = Math.atan2((-py - cyPrime) / radiusY, (-px - cxPrime) / radiusX) - start;
-	if (!sweep && sweepAngle > 0) sweepAngle -= 2 * Math.PI;
-	else if (sweep && sweepAngle < 0) sweepAngle += 2 * Math.PI;
-	const segments = Math.max(1, Math.ceil(Math.abs(sweepAngle) / (Math.PI / 2)));
-	const step = sweepAngle / segments;
-	const handle = 4 / 3 * Math.tan(step / 4);
-	let angle = start;
-	for (let i = 0; i < segments; i++) {
-		const next = angle + step;
-		const cosA = Math.cos(angle);
-		const sinA = Math.sin(angle);
-		const cosB = Math.cos(next);
-		const sinB = Math.sin(next);
-		const p1 = onEllipse(cx, cy, radiusX, radiusY, cos, sin, cosA - handle * sinA, sinA + handle * cosA);
-		const p2 = onEllipse(cx, cy, radiusX, radiusY, cos, sin, cosB + handle * sinB, sinB - handle * cosB);
-		const p3 = onEllipse(cx, cy, radiusX, radiusY, cos, sin, cosB, sinB);
-		surface.bezierCurveTo(p1[0], p1[1], p2[0], p2[1], p3[0], p3[1]);
-		angle = next;
+function axis(origin, extent, near, size, far, outset) {
+	let start;
+	let length;
+	if (near === void 0 && size !== void 0 && far !== void 0) {
+		length = size;
+		start = extent - far - size;
+	} else {
+		start = near ?? 0;
+		length = size ?? extent - start - (far ?? 0);
 	}
+	return {
+		start: origin + start - outset,
+		size: Math.max(0, length + 2 * outset)
+	};
 }
-/** A point on the rotated ellipse, from its unit-circle coordinates. */
-function onEllipse(cx, cy, rx, ry, cos, sin, ux, uy) {
-	const x = rx * ux;
-	const y = ry * uy;
-	return [cx + cos * x - sin * y, cy + sin * x + cos * y];
+/**
+* A decoration's colour, resolved against the node it decorates.
+*
+* The same rule every colour prop follows: a palette name resolves
+* against whatever theme the node inherits, at paint. That is why
+* `focusRing()` never reads the theme — it names `focusRing` and the
+* node's environment decides what that is, so a ring inside a dark
+* card is the dark palette's without the modifier knowing there was a
+* card.
+*/
+function decorationColor(node, shape) {
+	return resolveColorValue(node, shape.color);
+}
+/** Whether a shape paints before the node's children or after them. */
+function paintsAfterChildren(shape) {
+	return shape.after === "children";
+}
+/** Whether any shape in the list paints in the given phase; lets a renderer skip a pass. */
+function hasDecorationPhase(shapes, after) {
+	for (const shape of shapes) if (paintsAfterChildren(shape) === after) return true;
+	return false;
 }
+//#endregion
+//#region src/rendering/ScaledImageCache.ts
 /**
-* A cursor over path data.
+* How many consecutive frames a size must hold before a copy is made.
 *
-* Path data is written without separators wherever it can be
-* (`M0 0l5-3.5`), so nothing here can split on whitespace: numbers are
-* read character by character, and the two arc flags are read as a
-* single digit each, which is the one place the grammar is not a plain
-* number list.
+* A morph transition scales its image every frame, so every frame
+* asks for a size no copy will ever be asked for again. Building one
+* anyway would add a blit to a frame that already had to resample,
+* making the one case that is most sensitive to frame time worse.
+* Two frames is enough to tell a settled layout from an animating
+* one, and costs an animation nothing it was not already paying.
 */
-var Scanner = class {
-	source;
-	index = 0;
-	constructor(source) {
-		this.source = source;
+const FRAMES_BEFORE_COPY = 2;
+/**
+* The largest copy worth keeping, in device pixels.
+*
+* A full-bleed image on a 3440x1440 display is about 5 megapixels
+* and 20MB as a copy, which is worth it: that image is the single
+* most expensive draw in the frame. Twice that is not, so the
+* ceiling sits above the largest real screen and below anything a
+* mistake would ask for.
+*/
+const MAX_COPY_PIXELS = 12e6;
+/**
+* How many copies to keep.
+*
+* One per image visible at once, near enough. A shelf of artwork
+* scrolls new images in and old ones out, and the cost of losing a
+* copy is one resampled draw plus one blit, so this only has to be
+* large enough that a screenful does not evict itself.
+*/
+const MAX_ENTRIES = 48;
+function defaultSurfaceFactory(width, height) {
+	return new OffscreenCanvas(width, height);
+}
+/**
+* Whether this environment can make a copy at all.
+*
+* `OffscreenCanvas` is the only synchronous way to resample: the
+* asynchronous `createImageBitmap(source, { resizeWidth })` cannot
+* be awaited inside a frame, and a copy that arrives a frame later
+* is a copy that arrives after the size it was made for has changed.
+*/
+function canScaleImages() {
+	return typeof OffscreenCanvas === "function";
+}
+var ScaledImageCache = class {
+	/**
+	* Insertion-ordered, which is what makes eviction least-recently-used:
+	* a hit deletes and re-sets its key, so the oldest entry is first.
+	*
+	* A `Map` rather than a `WeakMap` because eviction has to be able to
+	* find the entry it is dropping in order to close the copy it holds,
+	* and a weak collection cannot be walked. The strong reference to the
+	* source is bounded by `MAX_ENTRIES` and released on eviction.
+	*/
+	entries = /* @__PURE__ */ new Map();
+	/**
+	* A number per source, so an entry can be keyed by picture *and*
+	* size.
+	*
+	* One slot per source was a bug rather than a simplification. A
+	* picture on screen at two sizes at once — Segue's now-playing bar
+	* shows the same cover at 52px that its page shows at 340 — had the
+	* two draws fight over the single slot: each in turn held the size
+	* long enough to earn a copy, made it, and closed the other's. The
+	* smaller one then alternated between a crisp copy and a raw
+	* downsample of the source every few frames, which reads on screen as
+	* the picture shimmering. `ScaledImageCache.spec.ts` pins it.
+	*
+	* `WeakMap`, so a source that goes away takes its id with it; the
+	* entries themselves are still strongly held and evicted by count.
+	*/
+	sourceIds = /* @__PURE__ */ new WeakMap();
+	nextSourceId = 1;
+	createSurface;
+	enabled;
+	constructor(createSurface) {
+		this.enabled = createSurface !== void 0 || canScaleImages();
+		this.createSurface = createSurface ?? defaultSurfaceFactory;
 	}
-	get done() {
-		return this.index >= this.source.length;
+	/**
+	* The image to draw for a destination of `width` x `height` device
+	* pixels: a copy at that exact size when one is worth having and
+	* ready, and otherwise `source` unchanged.
+	*
+	* Always safe to draw the result at the destination rectangle the
+	* sizes came from. A copy is a resample of the same pixels, so the
+	* picture is the same either way; only which of the two resamples
+	* runs this frame differs.
+	*/
+	resolve(source, width, height) {
+		if (!this.enabled) return source;
+		const w = Math.round(width);
+		const h = Math.round(height);
+		if (w <= 0 || h <= 0 || w * h > MAX_COPY_PIXELS) return source;
+		if (source.width === w && source.height === h) return source;
+		const key = this.keyFor(source, w, h);
+		const entry = this.entries.get(key);
+		if (entry === void 0) {
+			this.insert(key, {
+				source,
+				bitmap: null,
+				width: w,
+				height: h,
+				stable: 1
+			});
+			return source;
+		}
+		this.entries.delete(key);
+		this.entries.set(key, entry);
+		if (entry.bitmap !== null) return entry.bitmap;
+		entry.stable++;
+		if (entry.stable < FRAMES_BEFORE_COPY) return source;
+		const copy = this.copy(source, w, h);
+		if (copy === null) return source;
+		entry.bitmap = copy;
+		return copy;
 	}
-	skipSeparators() {
-		while (this.index < this.source.length) {
-			const code = this.source.charCodeAt(this.index);
-			if (code === 32 || code === 9 || code === 10 || code === 13 || code === 12 || code === 44) {
-				this.index++;
-				continue;
-			}
-			return;
+	/** Drops every copy. Called when the renderer goes away. */
+	dispose() {
+		for (const entry of this.entries.values()) entry.bitmap?.close();
+		this.entries.clear();
+	}
+	/** How many picture-and-size pairs are tracked. For specs and the inspector. */
+	get size() {
+		return this.entries.size;
+	}
+	/**
+	* The cache key: this picture, at this size.
+	*
+	* A size that is asked for once and never again makes an entry that
+	* holds no copy and is evicted by count like any other, which is why
+	* a morph scaling every frame costs entries rather than copies.
+	*/
+	keyFor(source, width, height) {
+		let id = this.sourceIds.get(source);
+		if (id === void 0) {
+			id = this.nextSourceId++;
+			this.sourceIds.set(source, id);
 		}
+		return `${id}:${width}x${height}`;
 	}
-	/** The command letter here, consumed; undefined when a number is next. */
-	peekCommand() {
-		const char = this.source[this.index];
-		if (char === void 0 || !/[a-zA-Z]/.test(char)) return;
-		this.index++;
-		return char;
-	}
-	number() {
-		this.skipSeparators();
-		const start = this.index;
-		if (this.source[this.index] === "+" || this.source[this.index] === "-") this.index++;
-		while (this.isDigit()) this.index++;
-		if (this.source[this.index] === ".") {
-			this.index++;
-			while (this.isDigit()) this.index++;
-		}
-		const exponent = this.source[this.index];
-		if (exponent === "e" || exponent === "E") {
-			this.index++;
-			if (this.source[this.index] === "+" || this.source[this.index] === "-") this.index++;
-			while (this.isDigit()) this.index++;
+	insert(key, entry) {
+		if (this.entries.size >= MAX_ENTRIES) {
+			const oldest = this.entries.keys().next();
+			if (!oldest.done) {
+				this.entries.get(oldest.value)?.bitmap?.close();
+				this.entries.delete(oldest.value);
+			}
 		}
-		const value = Number.parseFloat(this.source.slice(start, this.index));
-		return Number.isNaN(value) ? 0 : value;
-	}
-	/** One character, `0` or `1`: the arc flags carry no separator. */
-	flag() {
-		this.skipSeparators();
-		const char = this.source[this.index];
-		this.index++;
-		return char === "1";
+		this.entries.set(key, entry);
 	}
-	isDigit() {
-		const code = this.source.charCodeAt(this.index);
-		return code >= 48 && code <= 57;
+	/**
+	* Resamples once, into a bitmap.
+	*
+	* Failure is not exceptional: a source that has been closed under
+	* us throws here, and the honest answer is to draw the original and
+	* let the next frame notice. So this reports null rather than
+	* letting a frame die over an image.
+	*/
+	copy(source, width, height) {
+		try {
+			const surface = this.createSurface(width, height);
+			const context = surface.getContext("2d");
+			if (context === null) return null;
+			context.drawImage(source, 0, 0, width, height);
+			return surface.transferToImageBitmap();
+		} catch {
+			return null;
+		}
 	}
 };
 //#endregion
@@ -20793,10 +21138,14 @@ function contentChanged(slot, key) {
 function matches(slot, key) {
 	return slot.width === key.box.width && slot.height === key.box.height && slot.scale === key.box.scale && slot.environment === key.environment && slot.clipPath === key.clipPath && slot.blur === key.blur && paintValuesEqual(slot.paint, key.paint) && pathValuesEqual(slot.path, key.path);
 }
-/** A painter's colour values, against the node's own theme. */
+/**
+* A painter's colour values, against the node's own theme. \`currentColor\`
+* is the node's text colour, inherited as CSS's is, so an icon drawn in
+* it takes the colour of the label beside it: white on a selected row.
+*/
 function resolverFor(node) {
 	return {
-		color: (value) => resolveColorValue(node, value),
+		color: (value) => value === "currentColor" ? resolveColor(node, UiProperties.color) ?? resolveColorValue(node, "text") : resolveColorValue(node, value),
 		gradient: (value) => resolveGradient(node, value)
 	};
 }
@@ -20854,7 +21203,7 @@ function offscreenPaintCanvas(width, height) {
 		take: () => canvas.transferToImageBitmap()
 	};
 }
-var PreciseContext = class {
+var PreciseContext = class PreciseContext {
 	inner;
 	dx = 0;
 	dy = 0;
@@ -20923,6 +21272,25 @@ var PreciseContext = class {
 		this.dy = 0;
 		this.inner.setTransform(a, b, c, d, e, f);
 	}
+	/**
+	* Takes another context's whole transform, a translation it holds
+	* back included, so a group layer draws exactly where the frame would
+	* have; less `offsetX`/`offsetY` device pixels, where the layer's
+	* corner lies on the frame. Read through `getTransform`, a held
+	* translation would come out as one large float, which is the
+	* precision this class exists to keep.
+	*/
+	adoptTransform(from, offsetX = 0, offsetY = 0) {
+		if (from instanceof PreciseContext) {
+			const m = from.inner.getTransform();
+			this.inner.setTransform(m.a, m.b, m.c, m.d, m.e - offsetX, m.f - offsetY);
+			this.dx = from.dx;
+			this.dy = from.dy;
+			return;
+		}
+		const m = from.getTransform();
+		this.setTransform(m.a, m.b, m.c, m.d, m.e - offsetX, m.f - offsetY);
+	}
 	/** Writes a held translation out for real, for a transform it does not commute with. */
 	flush() {
 		if (this.holding) {
@@ -21445,11 +21813,11 @@ var ScrollLayerCache = class {
 * all the way up.
 */
 function dirtyAbove(frame, node) {
-	for (let ancestor = node.parent; ancestor !== null; ancestor = ancestor.parent) if ((frame.dirtyFlagsFor(ancestor) & INHERITED) !== 0) return true;
+	for (let ancestor = node.parent; ancestor !== null; ancestor = ancestor.parent) if ((frame.dirtyFlagsFor(ancestor) & INHERITED$1) !== 0) return true;
 	return false;
 }
 /** What an ancestor's dirt can say about how its descendants look. */
-const INHERITED = 192;
+const INHERITED$1 = 192;
 /** Whether \`ancestor\` is above \`node\` in the tree. */
 function contains(ancestor, node) {
 	for (let current = node.parent; current !== null; current = current.parent) if (current === ancestor) return true;
@@ -21618,7 +21986,7 @@ var TextRasterCache = class {
 	}
 	/** Lets go of text not drawn lately: removed, scrolled far away, or hidden. */
 	endFrame() {
-		for (const [node, entry] of this.entries) if (this.frame - entry.used > IDLE_FRAMES) this.drop(node, entry);
+		for (const [node, entry] of this.entries) if (this.frame - entry.used > IDLE_FRAMES$1) this.drop(node, entry);
 	}
 	dropAll() {
 		for (const [node, entry] of this.entries) this.drop(node, entry);
@@ -21674,10 +22042,10 @@ var TextRasterCache = class {
 	redraw(node, previous, paint, box, measurer, scaleX, scaleY, offsetX, offsetY, width, height, extent) {
 		let entry = previous;
 		if (entry !== void 0) {
-			entry.churn = this.frame - entry.drawnAt <= CHURN_FRAMES ? entry.churn + 1 : 0;
-			if (entry.churn >= CHURN_LIMIT) {
+			entry.churn = this.frame - entry.drawnAt <= CHURN_FRAMES$1 ? entry.churn + 1 : 0;
+			if (entry.churn >= CHURN_LIMIT$1) {
 				entry.churn = 0;
-				entry.directUntil = this.frame + DIRECT_FRAMES;
+				entry.directUntil = this.frame + DIRECT_FRAMES$1;
 				entry.used = this.frame;
 				this.stats.direct++;
 				return null;
@@ -21716,10 +22084,10 @@ var TextRasterCache = class {
 	}
 	/** Makes room for `needed` more pixels, letting go of what was drawn least recently. */
 	make(needed) {
-		if (this.pixels + needed <= MAX_PIXELS) return;
+		if (this.pixels + needed <= MAX_PIXELS$1) return;
 		const byAge = [...this.entries].sort((a, b) => a[1].used - b[1].used);
 		for (const [node, entry] of byAge) {
-			if (this.pixels + needed <= MAX_PIXELS || entry.used === this.frame) break;
+			if (this.pixels + needed <= MAX_PIXELS$1 || entry.used === this.frame) break;
 			this.drop(node, entry);
 		}
 	}
@@ -21826,16 +22194,612 @@ const SAME_PLACE = 1 / 256;
 /** The largest single piece of text kept: a few screens of a long paragraph. */
 const MAX_ENTRY_PIXELS = 4e6;
 /** Everything kept, at most: about 128 MB. */
-const MAX_PIXELS = 32e6;
+const MAX_PIXELS$1 = 32e6;
 /** Frames text is kept for without being drawn: about two seconds at 60 Hz. */
-const IDLE_FRAMES = 120;
+const IDLE_FRAMES$1 = 120;
 /** Drawn again within this many frames of the last time counts toward churn. */
-const CHURN_FRAMES = 2;
+const CHURN_FRAMES$1 = 2;
 /** Times in a row text may churn before it is drawn directly. */
-const CHURN_LIMIT = 3;
+const CHURN_LIMIT$1 = 3;
 /** Frames churning text is drawn directly for before the cache tries it again. */
+const DIRECT_FRAMES$1 = 60;
+//#endregion
+//#region src/rendering/canvas2d/RasterCache.ts
+/**
+* Subtrees kept as pixels, for a node marked `rasterize`, and copied
+* onto the frame while only what is above them moves or scales.
+*
+* **Why.** A design tool's board is a camera over a few dozen frames,
+* each a whole screen of photographs, vector logos and text. Zooming
+* it changes nothing inside any frame, yet a full traversal draws every
+* one of them again on every step: in Atelier, twenty frames cost 10 to
+* 50 ms a step, most of it resampling the photographs and filling the
+* logos' paths at a scale they had not been drawn at before. Copied, a
+* frame is one `drawImage`.
+*
+* **What is kept.** What the node and its subtree paint, drawn once into
+* a canvas of its own at the device scale it is drawn at, over the
+* area its subtree may paint (its record's extent), relative to its own
+* corner: a node that moves without changing is copied where it is.
+*
+* **When it is drawn again.**
+*
+*   - At once, when what it shows may have changed: anything in the
+*     subtree was dirtied, an ancestor changed what it passes down, the
+*     node changed size, or the frame was not vouched for.
+*   - Once a zoom has settled, when the scale it is drawn at is not the
+*     one it was kept at. While the scale keeps changing the pixels it
+*     has are stretched, which is blurred or soft for a moment and keeps
+*     the frame rate; when the scale has held for `SETTLE_MS` it is
+*     drawn again, sharp, a few a frame, and `nextRepaint` asks the
+*     runtime for the frame that does it, since nothing else would.
+*   - Mid-zoom, when the stretch is past what still reads as the picture
+*     (`MAX_STRETCH`) and the frame has the time left for it, by what it
+*     took the last time; one that would drop the frame waits to settle.
+*
+* **When it is drawn directly instead.** A context that rotates or
+* skews; a node with a transform or a sticky shift of its own; a
+* subtree that would not fit in `MAX_RASTER_PIXELS` at the scale it is
+* drawn at (zoomed far into it, where only a part is on screen and
+* culling draws just that part); one whose pixels change without its
+* changes saying so (a caret, a fading scrollbar, a video) or which lifts
+* something to the top layer; and one drawn again on most of its recent
+* frames, which a cache would only draw twice.
+*/
+var RasterCache = class {
+	createCanvas;
+	settleMs;
+	entries = /* @__PURE__ */ new Map();
+	frame = 0;
+	pixels = 0;
+	open = false;
+	/** Pixels drawn again this frame for a sharper scale. */
+	spent = 0;
+	/** The frame's own size in device pixels; nothing larger is kept. */
+	surfacePixels = Infinity;
+	wanted = void 0;
+	/** Copies, draws into the cache, and draws left to the frame, since the last reset. For budget specs. */
+	stats = {
+		copied: 0,
+		drawn: 0,
+		direct: 0
+	};
+	constructor(createCanvas, settleMs = 120) {
+		this.createCanvas = createCanvas;
+		this.settleMs = settleMs;
+	}
+	/**
+	* Marks what the frame's changes leave out of date, before anything is
+	* drawn. A frame the caller could not vouch for, or one after a frame
+	* that never finished, leaves everything out of date.
+	*/
+	beginFrame(changes, surfacePixels = Infinity) {
+		this.surfacePixels = surfacePixels;
+		const interrupted = this.open;
+		this.open = true;
+		this.frame++;
+		this.spent = 0;
+		this.wanted = void 0;
+		if (this.entries.size === 0) return;
+		if (interrupted || changes === void 0) {
+			for (const entry of this.entries.values()) entry.stale = true;
+			return;
+		}
+		const frame = changes.frame;
+		for (const [node] of frame.entries()) for (let at = node; at !== null; at = at.parent) {
+			const entry = this.entries.get(at);
+			if (entry !== void 0) entry.stale = true;
+		}
+		for (const [node, entry] of this.entries) for (let ancestor = node.parent; ancestor !== null && !entry.stale; ancestor = ancestor.parent) if ((frame.dirtyFlagsFor(ancestor) & INHERITED) !== 0) entry.stale = true;
+	}
+	/** Lets go of what was not drawn lately: removed, culled for a while, or hidden. */
+	endFrame() {
+		this.open = false;
+		for (const [node, entry] of this.entries) if (this.frame - entry.used > IDLE_FRAMES) this.drop(node, entry);
+	}
+	dropAll() {
+		for (const [node, entry] of this.entries) this.drop(node, entry);
+	}
+	resetStats() {
+		this.stats.copied = 0;
+		this.stats.drawn = 0;
+		this.stats.direct = 0;
+	}
+	/**
+	* When the frame just drawn would like another though nothing changes:
+	* a zoom settling, whose kept pixels are then drawn again at the scale
+	* it stopped at. Undefined when nothing waits.
+	*/
+	get nextRepaint() {
+		return this.wanted;
+	}
+	/**
+	* Draws a node and its subtree from the cache, drawing them into it
+	* first when what it holds is out of date. `paint` draws them into the
+	* context it is handed, already placed, and answers whether what it
+	* drew may be kept (see the class comment). False when the node should
+	* be drawn directly.
+	*/
+	draw(ctx, node, rec, now, paint) {
+		const m = ctx.getTransform?.();
+		if (m === void 0 || m.b !== 0 || m.c !== 0 || !(m.a > 0) || !(m.d > 0)) return false;
+		let entry = this.entries.get(node);
+		if (entry !== void 0 && entry.directUntil > this.frame) {
+			entry.used = this.frame;
+			this.stats.direct++;
+			return false;
+		}
+		const left = rec.extentMinX - rec.x - SPARE;
+		const top = rec.extentMinY - rec.y - SPARE;
+		const width = rec.extentMaxX - rec.extentMinX + 2 * SPARE;
+		const height = rec.extentMaxY - rec.extentMinY + 2 * SPARE;
+		const fits = (scaleX, scaleY) => {
+			const canvasWidth = Math.ceil(width * scaleX) + 1;
+			const canvasHeight = Math.ceil(height * scaleY) + 1;
+			const pixels = canvasWidth * canvasHeight;
+			return canvasWidth <= MAX_SIDE && canvasHeight <= MAX_SIDE && pixels <= MAX_RASTER_PIXELS && pixels <= this.surfacePixels;
+		};
+		if (!(width > 0) || !(height > 0) || !fits(m.a, m.d)) {
+			if (entry !== void 0) entry.used = this.frame;
+			this.stats.direct++;
+			return false;
+		}
+		const x = m.a * (rec.x + left) + m.e;
+		const y = m.d * (rec.y + top) + m.f;
+		if (entry === void 0 || entry.stale || entry.width !== width || entry.height !== height || entry.left !== left || entry.top !== top) {
+			if (entry !== void 0) {
+				entry.churn = this.frame - entry.changedAt <= CHURN_FRAMES ? entry.churn + 1 : 0;
+				if (entry.churn >= CHURN_LIMIT) {
+					entry.churn = 0;
+					entry.directUntil = this.frame + DIRECT_FRAMES;
+					entry.used = this.frame;
+					this.stats.direct++;
+					return false;
+				}
+			}
+			const drawn = this.redraw(node, entry, m.a, m.d, x, y, rec.x + left, rec.y + top, left, top, width, height, paint);
+			if (drawn === null) {
+				this.stats.direct++;
+				return false;
+			}
+			drawn.changedAt = this.frame;
+			entry = drawn;
+		} else if (entry.scaleX !== m.a || entry.scaleY !== m.d) entry = this.resharpen(node, entry, m.a, m.d, x, y, rec.x + left, rec.y + top, now, paint);
+		const raster = entry;
+		raster.used = this.frame;
+		ctx.save();
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
+		if (raster.scaleX === m.a && raster.scaleY === m.d) ctx.drawImage(raster.host, Math.round(x - raster.fractionX), Math.round(y - raster.fractionY), raster.canvasWidth, raster.canvasHeight);
+		else {
+			const stretchX = m.a / raster.scaleX;
+			const stretchY = m.d / raster.scaleY;
+			ctx.drawImage(raster.host, x - raster.fractionX * stretchX, y - raster.fractionY * stretchY, raster.canvasWidth * stretchX, raster.canvasHeight * stretchY);
+		}
+		ctx.restore();
+		this.stats.copied++;
+		return true;
+	}
+	/**
+	* A subtree kept at another scale than it is drawn at: stretched while
+	* the scale is moving, drawn again once it has settled or when it is
+	* stretched too far, as the frame's budget allows.
+	*/
+	resharpen(node, entry, scaleX, scaleY, x, y, cornerX, cornerY, now, paint) {
+		if (entry.seenX !== scaleX || entry.seenY !== scaleY) {
+			entry.seenX = scaleX;
+			entry.seenY = scaleY;
+			entry.seenAt = now;
+		}
+		const stretch = Math.max(scaleX / entry.scaleX, scaleY / entry.scaleY, entry.scaleX / scaleX, entry.scaleY / scaleY);
+		const settled = now - entry.seenAt >= this.settleMs;
+		const pixels = (Math.ceil(entry.width * scaleX) + 1) * (Math.ceil(entry.height * scaleY) + 1);
+		if (settled ? this.spent === 0 || this.spent + pixels <= SETTLED_PIXELS : stretch > MAX_STRETCH && this.spent + pixels <= MOVING_PIXELS) {
+			this.spent += pixels;
+			const drawn = this.redraw(node, entry, scaleX, scaleY, x, y, cornerX, cornerY, entry.left, entry.top, entry.width, entry.height, paint);
+			if (drawn !== null) return drawn;
+			return this.entries.get(node) ?? entry;
+		}
+		this.want(settled ? now + 1 : entry.seenAt + this.settleMs);
+		return entry;
+	}
+	want(at) {
+		this.wanted = this.wanted === void 0 ? at : Math.min(this.wanted, at);
+	}
+	/**
+	* Draws the subtree into the node's canvas at a scale, its area's
+	* corner at (`cornerX`, `cornerY`) in layout pixels, with the
+	* fraction of a device pixel its corner lands on, so a copy at that
+	* scale is the direct draw's pixels. Null when no canvas could be had,
+	* or when what `paint` drew may not be kept; the entry then draws
+	* directly for a while, and this frame copies what was drawn.
+	*/
+	redraw(node, previous, scaleX, scaleY, x, y, cornerX, cornerY, left, top, width, height, paint) {
+		const canvasWidth = Math.ceil(width * scaleX) + 1;
+		const canvasHeight = Math.ceil(height * scaleY) + 1;
+		let entry = previous;
+		if (entry !== void 0) entry.used = this.frame;
+		if (entry === void 0 || entry.canvasWidth !== canvasWidth || entry.canvasHeight !== canvasHeight) {
+			const growth = canvasWidth * canvasHeight - (entry === void 0 ? 0 : entry.canvasWidth * entry.canvasHeight);
+			if (!this.make(growth)) return null;
+			if (entry === void 0) {
+				const host = this.createCanvas(canvasWidth, canvasHeight);
+				const raw = host?.getContext("2d");
+				if (host === null || raw === null || raw === void 0) return null;
+				entry = new Raster(host, raw);
+				this.entries.set(node, entry);
+			}
+			entry.host.width = canvasWidth;
+			entry.host.height = canvasHeight;
+			this.pixels += growth;
+			entry.canvasWidth = canvasWidth;
+			entry.canvasHeight = canvasHeight;
+		} else {
+			entry.raw.setTransform(1, 0, 0, 1, 0, 0);
+			entry.raw.clearRect(0, 0, canvasWidth, canvasHeight);
+		}
+		const fractionX = x - Math.floor(x);
+		const fractionY = y - Math.floor(y);
+		const target = entry.ctx.reset(entry.raw);
+		target.setTransform(scaleX, 0, 0, scaleY, fractionX - scaleX * cornerX, fractionY - scaleY * cornerY);
+		target.globalAlpha = 1;
+		const kept = paint(target, canvasWidth, canvasHeight);
+		entry.scaleX = entry.seenX = scaleX;
+		entry.scaleY = entry.seenY = scaleY;
+		entry.fractionX = fractionX;
+		entry.fractionY = fractionY;
+		entry.left = left;
+		entry.top = top;
+		entry.width = width;
+		entry.height = height;
+		entry.stale = false;
+		this.stats.drawn++;
+		if (!kept) {
+			entry.directUntil = this.frame + DIRECT_FRAMES;
+			entry.stale = true;
+		}
+		return entry;
+	}
+	/** Makes room for `needed` more pixels, letting go of what was drawn least recently; false when it cannot. */
+	make(needed) {
+		if (this.pixels + needed <= MAX_PIXELS) return true;
+		const byAge = [...this.entries].sort((a, b) => a[1].used - b[1].used);
+		for (const [node, entry] of byAge) {
+			if (this.pixels + needed <= MAX_PIXELS || entry.used === this.frame) break;
+			this.drop(node, entry);
+		}
+		return this.pixels + needed <= MAX_PIXELS;
+	}
+	drop(node, entry) {
+		this.entries.delete(node);
+		this.pixels -= entry.canvasWidth * entry.canvasHeight;
+		entry.host.width = 0;
+		entry.host.height = 0;
+	}
+};
+/** One subtree as pixels, and what they were drawn for. */
+var Raster = class {
+	host;
+	raw;
+	ctx;
+	canvasWidth = 0;
+	canvasHeight = 0;
+	/** The device scale it was drawn at, and the fraction of a pixel its corner sat at. */
+	scaleX = 0;
+	scaleY = 0;
+	fractionX = 0;
+	fractionY = 0;
+	/** The area kept, from the node's corner, in layout pixels. */
+	left = 0;
+	top = 0;
+	width = 0;
+	height = 0;
+	/** The scale it was last drawn at on the frame, and since when. */
+	seenX = 0;
+	seenY = 0;
+	seenAt = 0;
+	stale = false;
+	used = 0;
+	changedAt = 0;
+	churn = 0;
+	directUntil = 0;
+	constructor(host, raw) {
+		this.host = host;
+		this.raw = raw;
+		this.ctx = new PreciseContext(raw);
+	}
+};
+/** What an ancestor's dirt can say about how its descendants look. */
+const INHERITED = 192;
+/** How far kept pixels are stretched, either way, before they are drawn again mid-zoom. */
+const MAX_STRETCH = 3;
+/** How many pixels a frame draws again for sharpness while a zoom moves: a phone frame or two. */
+const MOVING_PIXELS = 5e5;
+/** The same once it has settled: about a screen's worth, and the rest the next frame. */
+const SETTLED_PIXELS = 8e6;
+/** Layout pixels kept past the extent on each side, for antialiasing. */
+const SPARE = 2;
+/** The most one subtree is kept at: 4096², 64 MB. */
+const MAX_RASTER_PIXELS = 16777216;
+/** The longest side a canvas is made with; engines refuse longer. */
+const MAX_SIDE = 8192;
+/** The most all of them are kept at: 192 MB. */
+const MAX_PIXELS = 50331648;
+/**
+* Frames an entry is kept without being drawn: long, since a zoom in
+* culls what a zoom back out shows again, and drawing all of that anew
+* on its way back is the stutter the cache is for. \`MAX_PIXELS\` is
+* what bounds the memory.
+*/
+const IDLE_FRAMES = 3600;
+/** Out of date this many frames apart, `CHURN_LIMIT` times running, and it is drawn directly. */
+const CHURN_FRAMES = 3;
+const CHURN_LIMIT = 3;
+/** How long a subtree that churned, or that cannot be kept, is drawn directly. */
 const DIRECT_FRAMES = 60;
 //#endregion
+//#region src/rendering/GroupOpacity.ts
+/**
+* Group opacity: `opacity` composites a node and its subtree as one
+* picture, as CSS does.
+*
+* A node at half opacity with a blue background and a white label is
+* a faded button whose label is as white as the button is faded: the
+* subtree is drawn opaque, then blended once. Multiplying the opacity
+* into each draw instead fades the label twice, once in its own draw
+* and again through the half-transparent background it lands on, and
+* a disabled button's label came out (202,207,213) over a white page
+* where CSS and Figma give (255,255,255).
+*
+* The two only agree when nothing in the subtree overlaps anything
+* else in it, and the one case that is cheap to know is the one that
+* matters: everything the subtree paints is a single draw. A faded
+* icon, a faded line of text, a fading box. That keeps multiplying,
+* which costs nothing; everything else gets a layer — an offscreen
+* canvas in Canvas2D, a render pass into a texture in WebGPU — and the
+* layer is blended at the opacity. The rule is shared so the two
+* backends agree on which nodes get one.
+*/
+/** A second scratch, so probing a child never overwrites the walk's. */
+const probe = createPaintState();
+/** Whether a node at `opacity < 1` must be drawn into a layer and blended once. */
+function opacityNeedsLayer(node, rec, paint, layout) {
+	return !paintsOnce(node, rec, paint, layout);
+}
+/**
+* Whether a subtree paints at most one draw, so that blending each draw
+* at the opacity is the same as blending the whole at it.
+*
+* Walks down a chain of nodes that paint nothing themselves and hold
+* one child each, the shape a wrapper takes, and stops at the first
+* node that paints or branches. Never longer than that chain.
+*/
+function paintsOnce(node, rec, paint, layout) {
+	const own = ownDraws(node, rec, paint);
+	if (own > 1) return false;
+	const child = onlyChild(node, layout);
+	if (child === null) return true;
+	if (child === void 0 || own > 0) return false;
+	const childRec = layout.recordFor(child);
+	return !childRec.lifted && paintsOnce(child, childRec, resolvePaintState(child, probe), layout);
+}
+/**
+* The one child that may paint, null for none, undefined for more than
+* one. Through fragments, which have no box; skipping what is hidden.
+*/
+function onlyChild(node, layout) {
+	let found = null;
+	for (let child = node.firstChild; child !== null; child = child.nextSibling) {
+		if (child.type === "fragment") {
+			const inner = onlyChild(child, layout);
+			if (inner === void 0 || inner !== null && found !== null) return;
+			found = inner ?? found;
+			continue;
+		}
+		if (layout.recordFor(child) === void 0 || !isPaintVisible(child)) continue;
+		if (found !== null) return;
+		found = child;
+	}
+	return found;
+}
+/**
+* How many draws a node makes of its own, counted only as far as two:
+* past one, the answer is already a layer.
+*/
+function ownDraws(node, rec, paint) {
+	let draws = paint.boxShadows.length;
+	if (paint.backgroundColor !== void 0) draws++;
+	if (paint.backgroundGradient !== void 0) draws++;
+	if (paint.image !== void 0 || paint.video !== void 0 || node.type === "paint") draws++;
+	if (paint.borderWidth > 0 && paint.borderColor !== void 0) draws++;
+	if (node.decorations !== null) draws += node.decorations.length;
+	if (rec.scrollable || rec.textScrollbars) draws++;
+	if (paint.editor !== void 0) draws += 2;
+	else if (paint.text !== void 0 && paint.text.length > 0) {
+		const plain = paint.textSelection === void 0 && paint.textMatches === void 0 && paint.spans === void 0 && paint.textDecoration === "none";
+		draws += plain ? 1 : 2;
+	}
+	return draws;
+}
+/**
+* How far past its device-pixel bounds a layer's region reaches: the
+* antialiased fringe of an edge, a scroll offset snapped to a device
+* pixel, and the ink of a glyph that overhangs its line box.
+*/
+const REGION_SLOP = 2;
+/**
+* The part of the surface an opacity group can paint, in whole device
+* pixels: where its layer is drawn and blended.
+*
+* Only that much, because a layer the size of the surface is what a
+* small faded button cannot afford. Blending one onto the frame costs a
+* copy of the whole layer in Chrome's Canvas2D, about a millisecond and
+* a half at 2400×1800 per group, while a layer the button's size costs
+* hundredths of one.
+*
+* Worked out before the subtree is drawn, from its records: every box
+* with its outer shadows, every decoration, through every transform,
+* sticky shift and scroll offset on the way down, cut to every clip on
+* the way down except for a lifted node, which escapes them. That is
+* where the backends draw, so nothing drawn lies outside it but text
+* overflowing its own box, which the region's slop does not cover past a
+* glyph's overhang; layout sizes a text node to its text, so that is a
+* box narrower than its words. `m` is the matrix the node is drawn
+* under, its own transform included. Clipped to the surface, and empty
+* when the group is entirely off it.
+*/
+function layerRegion(node, rec, m, layout, surfaceWidth, surfaceHeight, dpr) {
+	bounds.minX = Infinity;
+	bounds.minY = Infinity;
+	bounds.maxX = -Infinity;
+	bounds.maxY = -Infinity;
+	includeSubtree(node, rec, [
+		m.a,
+		m.b,
+		m.c,
+		m.d,
+		m.e,
+		m.f
+	], null, layout, dpr);
+	const left = Math.max(0, Math.floor(bounds.minX) - REGION_SLOP);
+	const top = Math.max(0, Math.floor(bounds.minY) - REGION_SLOP);
+	const right = Math.min(surfaceWidth, Math.ceil(bounds.maxX) + REGION_SLOP);
+	const bottom = Math.min(surfaceHeight, Math.ceil(bounds.maxY) + REGION_SLOP);
+	if (right <= left || bottom <= top) return {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	return {
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+/** What a region walk has covered so far; module scratch, as a walk is not re-entrant. */
+const bounds = {
+	minX: Infinity,
+	minY: Infinity,
+	maxX: -Infinity,
+	maxY: -Infinity
+};
+function includeSubtree(node, rec, m, clip, layout, dpr) {
+	includeRect(m, rec.x - rec.paintReachLeft, rec.y - rec.paintReachTop, rec.width + rec.paintReachLeft + rec.paintReachRight, rec.height + rec.paintReachTop + rec.paintReachBottom, clip);
+	if (node.decorations !== null) for (const shape of node.decorations) {
+		const r = decorationRect(shape, rec, 0);
+		const reach = shape.kind === "stroke" ? shape.lineWidth : 0;
+		includeRect(m, r.x - reach, r.y - reach, r.width + reach * 2, r.height + reach * 2, clip);
+	}
+	if (node.firstChild === null) return;
+	const childClip = rec.clips ? intersect(clip, rectThrough(m, rec.x, rec.y, rec.width, rec.height)) : clip;
+	includeChildren(node, rec.scrollable ? multiply(m, [
+		1,
+		0,
+		0,
+		1,
+		-snapScroll(rec.scrollX, dpr),
+		-snapScroll(rec.scrollY, dpr)
+	]) : m, childClip, layout, dpr);
+}
+function includeChildren(node, m, clip, layout, dpr) {
+	for (let child = node.firstChild; child !== null; child = child.nextSibling) {
+		if (child.type === "fragment") {
+			includeChildren(child, m, clip, layout, dpr);
+			continue;
+		}
+		const rec = layout.recordFor(child);
+		if (rec === void 0 || !isPaintVisible(child)) continue;
+		let cm = m;
+		if (rec.stickyOffsetX !== 0 || rec.stickyOffsetY !== 0) cm = multiply(cm, [
+			1,
+			0,
+			0,
+			1,
+			rec.stickyOffsetX,
+			rec.stickyOffsetY
+		]);
+		const raw = child.properties.get("transform");
+		const transform = raw === void 0 ? void 0 : parseTransform(raw);
+		if (transform !== void 0) cm = multiply(cm, ownTransform(rec, transform));
+		includeSubtree(child, rec, cm, rec.lifted ? null : clip, layout, dpr);
+	}
+}
+/**
+* A node's own transform, as both backends apply it: translated, then
+* turned and scaled about its origin. See `UiTransform`.
+*/
+function ownTransform(rec, t) {
+	const originX = rec.x + t.x;
+	const originY = rec.y + t.y;
+	const cos = Math.cos(t.rotation);
+	const sin = Math.sin(t.rotation);
+	const a = cos * t.scaleX;
+	const b = sin * t.scaleX;
+	const c = -sin * t.scaleY;
+	const d = cos * t.scaleY;
+	return [
+		a,
+		b,
+		c,
+		d,
+		originX - originX * a - originY * c + t.translateX,
+		originY - originX * b - originY * d + t.translateY
+	];
+}
+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]
+	];
+}
+/** The device-pixel bounds of a rectangle through a matrix. */
+function rectThrough(m, x, y, width, height) {
+	const x1 = x + width;
+	const y1 = y + height;
+	const ax = m[0] * x + m[2] * y + m[4];
+	const ay = m[1] * x + m[3] * y + m[5];
+	const bx = m[0] * x1 + m[2] * y + m[4];
+	const by = m[1] * x1 + m[3] * y + m[5];
+	const cx = m[0] * x + m[2] * y1 + m[4];
+	const cy = m[1] * x + m[3] * y1 + m[5];
+	const dx = m[0] * x1 + m[2] * y1 + m[4];
+	const dy = m[1] * x1 + m[3] * y1 + m[5];
+	const left = Math.min(ax, bx, cx, dx);
+	const top = Math.min(ay, by, cy, dy);
+	return {
+		x: left,
+		y: top,
+		width: Math.max(ax, bx, cx, dx) - left,
+		height: Math.max(ay, by, cy, dy) - top
+	};
+}
+function intersect(a, b) {
+	if (a === null) return b;
+	const left = Math.max(a.x, b.x);
+	const top = Math.max(a.y, b.y);
+	const right = Math.min(a.x + a.width, b.x + b.width);
+	const bottom = Math.min(a.y + a.height, b.y + b.height);
+	return {
+		x: left,
+		y: top,
+		width: Math.max(0, right - left),
+		height: Math.max(0, bottom - top)
+	};
+}
+function includeRect(m, x, y, width, height, clip) {
+	const r = clip === null ? rectThrough(m, x, y, width, height) : intersect(clip, rectThrough(m, x, y, width, height));
+	if (r.width <= 0 || r.height <= 0) return;
+	bounds.minX = Math.min(bounds.minX, r.x);
+	bounds.minY = Math.min(bounds.minY, r.y);
+	bounds.maxX = Math.max(bounds.maxX, r.x + r.width);
+	bounds.maxY = Math.max(bounds.maxY, r.y + r.height);
+}
+//#endregion
 //#region src/rendering/canvas2d/Canvas2DRenderer.ts
 /**
 * Canvas2D rendering backend.
@@ -21862,6 +22826,12 @@ const DIRECT_FRAMES = 60;
 * containers clip to their viewport and translate by
 * (-scrollX, -scrollY); node transforms compose on the current CTM.
 *
+* Opacity groups: a node at `opacity < 1` whose subtree paints more
+* than one draw is drawn into an offscreen layer and blended onto the
+* frame once, as CSS composites it (`GroupOpacity.ts`). One that
+* paints a single draw multiplies `globalAlpha` instead, which is the
+* same picture for nothing.
+*
 * State isolation: save()/restore() are used exactly when a node
 * introduces opacity, a transform, or a scroll viewport. Flat style
 * fields (fillStyle, font, lineWidth, ...) are assigned before each
@@ -21944,10 +22914,38 @@ var Canvas2DRenderer = class {
 	* not keep what it drew if it moved.
 	*/
 	volatileDraws = 0;
+	/**
+	* The canvases opacity groups are drawn in, one per depth of nesting,
+	* so a group inside a group never draws over what holds it. Each
+	* group sizes the one at its depth to its region (`layerRegion`).
+	*/
+	groups = [];
+	/** How many groups the walk is inside. */
+	groupDepth = 0;
 	constructor(options) {
 		this.options = options;
 		this.layers = new ScrollLayerCache(options.createLayerCanvas ?? offscreenLayerCanvas, options.scrollLayerSettleFrames);
 		this.textCache = options.textCache === false ? null : new TextRasterCache(options.createLayerCanvas ?? offscreenLayerCanvas);
+		this.rasters = options.rasterCache === false ? null : new RasterCache(options.createLayerCanvas ?? offscreenLayerCanvas, options.rasterSettleMs);
+	}
+	/** Subtrees marked \`rasterize\` kept as pixels; see \`RasterCache.ts\`. */
+	rasters;
+	/** How deep inside a kept subtree's own walk the traversal is. One is not kept inside another. */
+	rasterDepth = 0;
+	/**
+	* The device pixels the walk draws within: the surface's, or a kept
+	* subtree's canvas while it is drawn into. An opacity group's region is
+	* cut to them.
+	*/
+	boundsWidth = 0;
+	boundsHeight = 0;
+	/** What the raster cache did since the last reset, or null with it off. For budget specs. */
+	get rasterCacheStats() {
+		return this.rasters?.stats ?? null;
+	}
+	/** When a frame is wanted though nothing changes: a zoom settling, whose kept pixels are then drawn sharp. */
+	nextRepaint() {
+		return this.rasters?.nextRepaint;
 	}
 	/** Text kept as pixels; see `TextRasterCache.ts`. */
 	textCache;
@@ -21980,12 +22978,20 @@ var Canvas2DRenderer = class {
 	surfaceRestored() {
 		this.layers.dropAll();
 		this.textCache?.dropAll();
+		this.rasters?.dropAll();
+		this.groups.length = 0;
+	}
+	/** Kept subtrees were drawn with the fallback face. */
+	fontsChanged() {
+		this.rasters?.dropAll();
 	}
 	dispose() {
 		this.disposed = true;
 		this.scaledImages.dispose();
 		this.layers.dropAll();
 		this.textCache?.dropAll();
+		this.rasters?.dropAll();
+		this.groups.length = 0;
 	}
 	render(root, context) {
 		const raw = this.surface.getContext2D();
@@ -21999,13 +23005,19 @@ var Canvas2DRenderer = class {
 		this.liftedPass.length = 0;
 		this.paintOwner = null;
 		this.layerDepth = 0;
+		this.groupDepth = 0;
 		this.textCache?.beginFrame();
+		this.rasterDepth = 0;
+		this.boundsWidth = this.surface.physicalWidth;
+		this.boundsHeight = this.surface.physicalHeight;
+		this.rasters?.beginFrame(context.changes, this.surface.physicalWidth * this.surface.physicalHeight);
 		this.layers.beginFrame(this.options.scrollLayers === false ? void 0 : context.changes, this.surface.dpr, this.surface.physicalWidth, this.surface.physicalHeight);
 		this.renderNode(root, context, ctx, true, false);
 		this.renderLifted(context, ctx);
 		if (context.overlay !== void 0 && context.overlay.length > 0) drawOverlayShapes(ctx, context.overlay);
 		this.layers.endFrame();
 		this.textCache?.endFrame();
+		this.rasters?.endFrame();
 	}
 	/**
 	* Folds a node's style into the shared scratch and records that it
@@ -22029,58 +23041,137 @@ var Canvas2DRenderer = class {
 			return;
 		}
 		const sticky = rec.stickyOffsetX !== 0 || rec.stickyOffsetY !== 0;
-		if (cull && !this.intersectsCull(rec.extentMinX + rec.stickyOffsetX, rec.extentMinY + rec.stickyOffsetY, rec.extentMaxX - rec.extentMinX, rec.extentMaxY - rec.extentMinY)) return;
+		if (cull && !this.extentVisible(node, rec)) return;
+		if (this.rasters !== null && this.rasterDepth === 0 && !sticky && node.properties.get("rasterize") === true && this.drawKept(node, rec, context, ctx)) return;
 		const paint = this.resolvePaint(node);
 		const hasText = paint.text !== void 0;
+		const opacity = paint.opacity;
+		let draw = ctx;
+		let group = null;
+		let region = null;
 		let saves = 0;
 		if (paint.opacity < 1 || paint.hasTransform || sticky) {
 			ctx.save();
 			saves++;
 			if (sticky) ctx.translate(rec.stickyOffsetX, rec.stickyOffsetY);
-			if (paint.opacity < 1) ctx.globalAlpha *= paint.opacity;
+			group = paint.opacity < 1 && opacityNeedsLayer(node, rec, paint, context.layout) ? this.groupLayer(ctx) : null;
+			if (paint.opacity < 1 && group === null) ctx.globalAlpha *= paint.opacity;
 			if (paint.hasTransform) this.applyTransform(ctx, rec, paint);
+			if (group !== null) {
+				region = layerRegion(node, rec, ctx.getTransform(), context.layout, this.boundsWidth, this.boundsHeight, this.surface.dpr);
+				group.host.width = Math.max(1, region.width);
+				group.host.height = Math.max(1, region.height);
+				draw = group.ctx.reset(group.raw);
+				draw.save();
+				group.ctx.adoptTransform(ctx, region.x, region.y);
+				this.groupDepth++;
+			}
 		}
-		if (paint.boxShadows.length > 0) this.paintShadows(ctx, rec, paint, false);
-		this.paintBackground(ctx, rec, paint);
-		if (paint.boxShadows.length > 0) this.paintShadows(ctx, rec, paint, true);
-		this.paintImage(ctx, rec, paint);
-		if (node.type === "paint") this.paintPicture(ctx, node, rec);
-		this.paintBorder(ctx, rec, paint);
+		if (paint.boxShadows.length > 0) this.paintShadows(draw, rec, paint, false);
+		this.paintBackground(draw, rec, paint);
+		if (paint.boxShadows.length > 0) this.paintShadows(draw, rec, paint, true);
+		this.paintImage(draw, rec, paint);
+		if (node.type === "paint") this.paintPicture(draw, node, rec);
+		this.paintBorder(draw, rec, paint);
 		const decorations = node.decorations;
-		if (decorations !== null && hasDecorationPhase(decorations, false)) this.paintDecorations(ctx, node, rec, paint, decorations, false);
+		if (decorations !== null && hasDecorationPhase(decorations, false)) this.paintDecorations(draw, node, rec, paint, decorations, false);
+		const mapped = cull && (paint.hasTransform || sticky) && this.pushMappedCull(rec, paint, sticky);
+		const cullChildren = cull && (mapped || !paint.hasTransform && !sticky);
 		if (rec.clips) {
-			ctx.save();
-			if (!borderRadiusIsZero(paint.borderRadius)) traceRoundedRect(ctx, rec.x, rec.y, rec.width, rec.height, uniformBorderRadius(paint.borderRadius));
+			draw.save();
+			if (!borderRadiusIsZero(paint.borderRadius)) traceRoundedRect(draw, rec.x, rec.y, rec.width, rec.height, uniformBorderRadius(paint.borderRadius));
 			else {
-				ctx.beginPath();
-				ctx.rect(rec.x, rec.y, rec.width, rec.height);
+				draw.beginPath();
+				draw.rect(rec.x, rec.y, rec.width, rec.height);
 			}
-			ctx.clip();
+			draw.clip();
 			this.pushCull(rec);
 		}
 		const liftedBefore = this.liftedPass.length;
-		if (!rec.scrollable || !this.renderScrolledThroughLayer(node, rec, context, ctx)) {
+		if (!rec.scrollable || !this.renderScrolledThroughLayer(node, rec, context, draw)) {
 			if (rec.scrollable) {
-				ctx.save();
-				ctx.translate(-snapScroll(rec.scrollX, this.surface.dpr), -snapScroll(rec.scrollY, this.surface.dpr));
+				draw.save();
+				draw.translate(-snapScroll(rec.scrollX, this.surface.dpr), -snapScroll(rec.scrollY, this.surface.dpr));
 			}
-			this.renderChildren(node, context, ctx, cull && !paint.hasTransform && !sticky);
-			if (rec.scrollable) ctx.restore();
+			this.renderChildren(node, context, draw, cullChildren);
+			if (rec.scrollable) draw.restore();
 		}
 		if (rec.clips) this.popCull();
+		if (mapped) this.popCull();
 		if (hasText) {
 			if (this.paintOwner !== node) this.resolvePaint(node);
-			this.paintContent(ctx, node, rec, this.paint, context);
+			this.paintContent(draw, node, rec, this.paint, context);
+		}
+		if (rec.liftBoundary && this.liftedPass.length > liftedBefore) this.renderLifted(context, draw, liftedBefore, node);
+		if (rec.clips) draw.restore();
+		if (decorations !== null && hasDecorationPhase(decorations, true)) this.paintDecorations(draw, node, rec, this.paintOwner === node ? this.paint : this.resolvePaint(node), decorations, true);
+		if (rec.scrollable || rec.textScrollbars) this.paintScrollbars(draw, rec, context.now ?? performance.now());
+		if (group !== null) {
+			draw.restore();
+			this.groupDepth--;
+			if (region.width > 0 && region.height > 0) {
+				ctx.save();
+				ctx.setTransform(1, 0, 0, 1, 0, 0);
+				ctx.globalAlpha *= opacity;
+				ctx.drawImage(group.host, region.x, region.y, region.width, region.height);
+				ctx.restore();
+			}
 		}
-		if (rec.liftBoundary && this.liftedPass.length > liftedBefore) this.renderLifted(context, ctx, liftedBefore, node);
-		if (rec.clips) ctx.restore();
-		if (decorations !== null && hasDecorationPhase(decorations, true)) this.paintDecorations(ctx, node, rec, this.paintOwner === node ? this.paint : this.resolvePaint(node), decorations, true);
-		if (rec.scrollable || rec.textScrollbars) this.paintScrollbars(ctx, rec, context.now ?? performance.now());
 		while (saves > 0) {
 			ctx.restore();
 			saves--;
 		}
 	}
+	/**
+	* Draws a node marked \`rasterize\` from its kept pixels, drawing it
+	* into them first when they are out of date. False when it is to be
+	* drawn directly: a transform of its own, which its extent does not
+	* include, or anything \`RasterCache\` declines.
+	*/
+	drawKept(node, rec, context, ctx) {
+		if (node.properties.get("transform") !== void 0) return false;
+		return this.rasters.draw(ctx, node, rec, context.now ?? performance.now(), (target, width, height) => {
+			const volatile = this.volatileDraws;
+			const lifted = this.liftedPass.length;
+			const boundsWidth = this.boundsWidth;
+			const boundsHeight = this.boundsHeight;
+			this.boundsWidth = width;
+			this.boundsHeight = height;
+			this.rasterDepth++;
+			this.layerDepth++;
+			try {
+				this.renderNode(node, context, target, false, false);
+			} finally {
+				this.layerDepth--;
+				this.rasterDepth--;
+				this.boundsWidth = boundsWidth;
+				this.boundsHeight = boundsHeight;
+			}
+			return this.volatileDraws === volatile && this.liftedPass.length === lifted;
+		});
+	}
+	/**
+	* The canvas an opacity group at the current depth is drawn in, made
+	* the first time a group reaches that depth. Null where no canvas can
+	* be had, or where the frame's context cannot say what transform the
+	* layer should take on; the group then multiplies its opacity into
+	* each draw, as before.
+	*/
+	groupLayer(ctx) {
+		if (ctx.getTransform === void 0) return null;
+		const existing = this.groups[this.groupDepth];
+		if (existing !== void 0) return existing;
+		const host = (this.options.createLayerCanvas ?? offscreenLayerCanvas)(1, 1);
+		const raw = host?.getContext("2d");
+		if (host === null || raw === null || raw === void 0) return null;
+		const layer = {
+			host,
+			ctx: new PreciseContext(raw),
+			raw
+		};
+		this.groups[this.groupDepth] = layer;
+		return layer;
+	}
 	renderChildren(node, context, ctx, cull) {
 		const order = context.layout.recordFor(node)?.paintOrder;
 		if (order !== null && order !== void 0) {
@@ -22358,7 +23449,7 @@ var Canvas2DRenderer = class {
 				this.paintHighlightedText(ctx, paint, context);
 				return;
 			}
-			if (this.textCache?.draw(ctx, node, this.contentBox, paint, context.text) === true) return;
+			if (this.rasterDepth === 0 && this.textCache?.draw(ctx, node, this.contentBox, paint, context.text) === true) return;
 			drawText(ctx, this.contentBox, paint, context.text);
 		}
 	}
@@ -22577,6 +23668,34 @@ var Canvas2DRenderer = class {
 		if (transform.scaleX !== 1 || transform.scaleY !== 1) ctx.scale(transform.scaleX, transform.scaleY);
 		ctx.translate(-originX, -originY);
 	}
+	/**
+	* Whether where a node's subtree may paint meets the visible region,
+	* after its sticky shift and its own transform, which its extent does
+	* not include: a node a transform moves on screen from off it is
+	* drawn. One that turns is always drawn.
+	*/
+	extentVisible(node, rec) {
+		let left = rec.extentMinX;
+		let top = rec.extentMinY;
+		let right = rec.extentMaxX;
+		let bottom = rec.extentMaxY;
+		const raw = node.properties.get("transform");
+		const transform = raw === void 0 ? void 0 : parseTransform(raw);
+		if (transform !== void 0) {
+			if (transform.rotation !== 0) return true;
+			const originX = rec.x + transform.x;
+			const originY = rec.y + transform.y;
+			const x0 = transform.translateX + originX + transform.scaleX * (left - originX);
+			const x1 = transform.translateX + originX + transform.scaleX * (right - originX);
+			const y0 = transform.translateY + originY + transform.scaleY * (top - originY);
+			const y1 = transform.translateY + originY + transform.scaleY * (bottom - originY);
+			left = Math.min(x0, x1);
+			right = Math.max(x0, x1);
+			top = Math.min(y0, y1);
+			bottom = Math.max(y0, y1);
+		}
+		return this.intersectsCull(left + rec.stickyOffsetX, top + rec.stickyOffsetY, right - left, bottom - top);
+	}
 	intersectsCull(x, y, width, height) {
 		if (this.cullWidth <= 0 || this.cullHeight <= 0) return false;
 		return x < this.cullX + this.cullWidth && this.cullX < x + width && y < this.cullY + this.cullHeight && this.cullY < y + height;
@@ -22618,6 +23737,36 @@ var Canvas2DRenderer = class {
 		this.cullWidth = width;
 		this.cullHeight = height;
 	}
+	/**
+	* Takes the visible region back through a node's sticky shift and a
+	* transform that only moves and scales, into the coordinates its
+	* children are laid out in. False, with nothing pushed, for one that
+	* turns or flips.
+	*/
+	pushMappedCull(rec, paint, sticky) {
+		let shiftX = sticky ? rec.stickyOffsetX : 0;
+		let shiftY = sticky ? rec.stickyOffsetY : 0;
+		let scaleX = 1;
+		let scaleY = 1;
+		let originX = 0;
+		let originY = 0;
+		if (paint.hasTransform) {
+			const transform = paint.transform;
+			if (transform.rotation !== 0 || !(transform.scaleX > 0) || !(transform.scaleY > 0)) return false;
+			shiftX += transform.translateX;
+			shiftY += transform.translateY;
+			scaleX = transform.scaleX;
+			scaleY = transform.scaleY;
+			originX = rec.x + transform.x;
+			originY = rec.y + transform.y;
+		}
+		this.cullStack.push(this.cullX, this.cullY, this.cullWidth, this.cullHeight);
+		this.cullX = originX + (this.cullX - shiftX - originX) / scaleX;
+		this.cullY = originY + (this.cullY - shiftY - originY) / scaleY;
+		this.cullWidth /= scaleX;
+		this.cullHeight /= scaleY;
+		return true;
+	}
 	popCull() {
 		this.cullHeight = this.cullStack.pop() ?? 0;
 		this.cullWidth = this.cullStack.pop() ?? 0;
@@ -22806,6 +23955,6 @@ function createCanvasSurface(host) {
 	return new CanvasSurface(host);
 }
 //#endregion
-export { isImeKey as $, hasVisualState as $a, densityFactors as $i, CharacterCountTextMeasurer as $n, parseTransform as $r, clearFontStacks as $t, withOverrideSource as A, darkColors as Aa, UiInsetRegistry as Ai, pointerEventsOf as An, findPropertyDefinition as Ar, wordRangeIn as At, FlexDirection as B, rgba as Ba, themesEqual as Bi, EDITOR_PROP as Bn, UI_SEMANTIC_STATES as Br, applyCanvasTextStyle as Bt, SCROLLBAR_LINGER_MS as C, spanAtOffset as Ca, borderRadiusIsZero as Ci, isNodeFocusable as Cn, DEFAULT_LINE_HEIGHT_FACTOR as Cr, scrollsFromRight as Ct, formatExplanation as D, textSpansEqual as Da, defineProperty as Di, isNodeTabStop as Dn, resolvePropertyByName as Dr, paragraphGeometry as Dt, formatConstraints as E, textContentOf as Ea, uniformBorderRadius as Ei, isNodeSelectable as En, resolveProperty as Er, offsetAtPointIn as Et, clampSize as F, colorValuesEqual as Fa, bandOf as Fi, linkOf as Fn, propertyIsInherited as Fr, editingGroupOf as Ft, CrossAxisAlignment as G, DirtyNodeSet as Ga, noThemeExtensions as Gi, isMultiline as Gn, validateRole as Gr, layoutTextLines as Gt, placeGridItems as H, findEnvironmentKey as Ha, withDensity as Hi, editorFor as Hn, isUiSemanticState as Hr, createCanvasTextStyle as Ht, constraintsEqual as I, colorsEqual as Ia, containerBands as Ii, linkRunAtPointIn as In, propertyNarrowers as Ir, commandForKey as It, parseCrossAxisAlignment as J, resetOverrideWarnings as Ja, withThemeExtension as Ji, nextCaretToggle as Jn, validateSubgrid as Jr, spanOf as Jt, MainAxisAlignment as K, clearOverrideProperty as Ka, themeExtension as Ki, isReadOnly as Kn, validateStates as Kr, runCanvasStyleInto as Kt, tightenConstraints as L, normalizeColor as La, unknownContainerSize as Li, setLinkHover as Ln, propertyValuesEqualByName as Lr, detectEditingPlatform as Lt, contentOffset as M, UiBasicColors as Ma, noInsets as Mi, clearLinkHover as Mn, inheritedPropertyFlags as Mr, adjacentField as Mt, LayoutRecord as N, colorToHex as Na, observeViewportInsets as Ni, hasTextLinks as Nn, inheritedPropertyNames as Nr, comparePositions as Nt, formatNumber as O, textStylesEqual as Oa, propertyValuesEqual as Oi, isPressable as On, resolveString as Or, paragraphGeometryFrom as Ot, Constraints as P, colorToRgba as Pa, UiContainerSizeSource as Pi, linkHoverOf as Pn, propertyEffects as Pr, edgeField as Pt, capturePointer as Q, defaultVisualState as Qa, relativeLuminance as Qi, videoFrameSize as Qn, UiTransforms as Qr, bumpFontStack as Qt, MAX_MEASURES_PER_CHILD as R, parseColor as Ra, darkTheme as Ri, CARET_BLINK_MS as Rn, UiProperties as Rr, isPrintable as Rt, SCROLLBAR_FADE_MS as S, resolvedSpansOf as Sa, borderRadiusEqual as Si, setSelectionRange as Sn, UiGraph as Sr, scrollbarZoneAt as St, describeOverrides as T, spansDifferOnlyInPaint as Ta, normalizeBorderRadius as Ti, isNodeInert as Tn, resolveNumber as Tr, hasDrawnText as Tt, sizeGridTracks as U, UiEnvironment as Ua, defineThemeExtension as Ui, editorOf as Un, normalizeStates as Ur, drawText as Ut, parseFlexDirection as V, createEnvironmentKey as Va, withContrast as Vi, caretVisibleAt as Vn, isUiRole as Vr, buildFontString as Vt, AlignContent as W, UiNode as Wa, hasThemeExtension as Wi, isEditableNode as Wn, statesEqual as Wr, fillTextRects as Wt, CanvasPlatformSurface as X, writeOverrideProperty as Xa, highContrastColors as Xi, resolveColorValue as Xn, paintValuesEqual as Xr, textRunBackgrounds as Xt, parseMainAxisAlignment as Y, writeDeclaredProperty as Ya, contrastRatio as Yi, syncEditorValue as Yn, inputsEqual as Yr, textMeasureRequest as Yt, UiPlatformAdapter as Z, UiVisualState as Za, raiseContrast as Zi, isVideoSurface as Zn, pathValuesEqual as Zr, textRunDecorations as Zt, LABEL_PADDING_X as _, typographyEqual as _a, repeat as _i, TEXT_SELECTION_PROP as _n, noKeyModifiers as _o, nextGraphemeEnd as _r, scrollBounds as _t, PaintPictureCache as a, shadowsEqual as aa, gradientsEqual as ai, DEFAULT_TEXT_COLOR as an, UiEventType as ao, caretRectFor as ar, UiGestureRecognizer as at, snapScroll as b, flattenTextSpans as ba, borderRadius as bi, selectableTextOf as bn, DirtyFlags as bo, previousWordStart as br, scrollbarThumb as bt, EMPTY_RECORDING as c, boxShadowArraysEqual as ca, validateGradient as ci, createPaintState as cn, UiInputEvent as co, lineLimit as cr, isScrollContainer as ct, tracePathData as d, boxShadowsEqual as da, isAutoLength as di, normalizeVerticalAlign as dn, UiPinchEvent as do, offsetForVerticalMove as dr, UiFocusManager as dt, defaultSpacing as ea, transform as ei, fontStackFor as en, visualState as eo, ParagraphTextMeasurer as er, pointerDeviceOf as et, ScaledImageCache as f, defaultShapes as fa, isFrLength as fi, resolvePaintState as fn, UiPointerEvent as fo, selectionRects as fr, UiHitTester as ft, paintsAfterChildren as g, isTypographyRole as ga, percent as gi, setMatchRanges as gn, UiWheelEvent as go, lineStartAt as gr, SCROLLBAR_THICKNESS as gt, hasDecorationPhase as h, defaultTypography as ha, minmax as hi, matchRangesOf as hn, UiWheelDeltaMode as ho, lineEndAt as hr, SCROLLBAR_MIN_THUMB as ht, traceRoundedRect as i, defaultShadows as ia, gradientPaint as ii, DEFAULT_FONT_WEIGHT as in, UiCompositionEvent as io, proportionalFontMetrics as ir, UiTouchScroller as it, accumulatedOffsetTo as j, lightColors as ja, insetsEqual as ji, resolveCursor as jn, getPropertyNames as jr, textInputOf as jt, labelNode as k, colorsEqualPalette as ka, UiEnvironmentKeys as ki, isSubtreeInert as kn, closestPropertyName as kr, selectionRectsIn as kt, PaintRecorder as l, boxShadowRadius as la, auto as li, isPaintVisible as ln, UiKeyboardEvent as lo, offsetAtPoint as lr, UiKeyboardController as lt, decorationRect as m, shapesEqual as ma, isPercentLength as mi, clearMatchRanges as mn, UiTextChangeEvent as mo, graphemeBoundaries as mr, SCROLLBAR_INSET as mt, createCanvasSurface as n, spacingEqual as na, transformsEqual as ni, DEFAULT_FONT_FAMILY as nn, MOUSE_POINTER as no, ELLIPSIS as nr, touchActionFor as nt, paintPictures as o, BOX_SHADOW_BLUR_REACH as oa, linearGradient as oi, colorToCss as on, UiFocusEvent as oo, lineIndexAtY as or, UiPinchRecognizer as ot, decorationColor as p, isShapeName as pa, isMinMaxTrack as pi, TEXT_MATCHES_PROP as pn, UiSelectionChangeEvent as po, EditableTextModel as pr, SCROLLBAR_HOVER_ZONE as pt, parseAlignContent as q, overrideSources as qa, themeExtensionsEqual as qi, maskText as qn, UI_SUBGRID_AXES as qr, runFontString as qt, Canvas2DRenderer as r, spacingSteps as ra, MAX_GRADIENT_STOPS as ri, DEFAULT_FONT_SIZE as rn, UiBeforeInputEvent as ro, layoutParagraph as rr, UiEditingController as rt, PaintTarget as s, boxShadow as sa, radialGradient as si, computeObjectFitRect as sn, UiGestureEvent as so, lineIndexForOffset as sr, UiWheelController as st, CanvasSurface as t, scaleSpacing as ta, transformIsIdentity as ti, registerFontStack as tn, visualStatesEqual as to, spannedRunsFor as tr, prepareInputSurface as tt, replayPaint as u, boxShadowReach as ua, fr as ui, normalizeTextAlign as un, UiPasteEvent as uo, offsetAtX as ur, UiPointerController as ut, drawOverlayShapes as v, defaultTextStyle as va, resolveLength as vi, clearSelectionRange as vn, wheelDeltaYOf as vo, nextWordEnd as vr, scrollLeaderOf as vt, describeLength as w, spannedTextOf as wa, borderRadiusValuesEqual as wi, isNodeHitTestable as wn, resolveBoolean as wr, UiInputDispatcher as wt, LayoutEngine as x, hiddenRangesOf as xa, borderRadiusCorners as xi, selectionRangeOf as xn, UiBinding as xo, wordRangeAt as xr, scrollbarThumbs as xt, labelOrigin as y, editableSpansOf as ya, UiBorderRadiuses as yi, selectableTextNodes as yn, UiNodeType as yo, previousGraphemeStart as yr, scrollRange as yt, isLayoutProtocol as z, rgb8 as za, lightTheme as zi, CARET_WIDTH as zn, UI_ROLES as zr, EditableLayout as zt };
+export { UiPlatformAdapter as $, UiNode as $a, themeExtension as $i, isVideoSurface as $n, pathValuesEqual as $r, textRunDecorations as $t, formatNumber as A, hiddenRangesOf as Aa, propertyValuesEqual as Ai, isPressable as An, UiBinding as Ao, resolveString as Ar, paragraphGeometryFrom as At, MAX_MEASURES_PER_CHILD as B, lightColors as Ba, containerBands as Bi, CARET_BLINK_MS as Bn, UiProperties as Br, isPrintable as Bt, LayoutEngine as C, shapesEqual as Ca, borderRadiusCorners as Ci, selectionRangeOf as Cn, UiTextChangeEvent as Co, wordRangeAt as Cr, scrollbarThumbs as Ct, describeOverrides as D, defaultTextStyle as Da, normalizeBorderRadius as Di, isNodeInert as Dn, wheelDeltaYOf as Do, resolveNumber as Dr, hasDrawnText as Dt, describeLength as E, typographyEqual as Ea, borderRadiusValuesEqual as Ei, isNodeHitTestable as En, noKeyModifiers as Eo, resolveBoolean as Er, UiInputDispatcher as Et, LayoutRecord as F, textContentOf as Fa, insetsEqual as Fi, hasTextLinks as Fn, inheritedPropertyNames as Fr, comparePositions as Ft, sizeGridTracks as G, colorsEqual as Ga, withContrast as Gi, editorOf as Gn, normalizeStates as Gr, drawText as Gt, FlexDirection as H, colorToHex as Ha, darkTheme as Hi, EDITOR_PROP as Hn, UI_SEMANTIC_STATES as Hr, applyCanvasTextStyle as Ht, Constraints as I, textSpansEqual as Ia, noInsets as Ii, linkHoverOf as In, propertyEffects as Ir, edgeField as It, MainAxisAlignment as J, rgb8 as Ja, lengths as Ji, isReadOnly as Jn, validateStates as Jr, runCanvasStyleInto as Jt, AlignContent as K, normalizeColor as Ka, withDensity as Ki, isEditableNode as Kn, statesEqual as Kr, fillTextRects as Kt, clampSize as L, textStylesEqual as La, observeViewportInsets as Li, linkOf as Ln, propertyIsInherited as Lr, editingGroupOf as Lt, withOverrideSource as M, spanAtOffset as Ma, withPointer as Mi, pointerEventsOf as Mn, findPropertyDefinition as Mr, wordRangeIn as Mt, accumulatedOffsetTo as N, spannedTextOf as Na, UiEnvironmentKeys as Ni, resolveCursor as Nn, getPropertyNames as Nr, textInputOf as Nt, formatConstraints as O, editableSpansOf as Oa, uniformBorderRadius as Oi, isNodeSelectable as On, UiNodeType as Oo, resolveProperty as Or, offsetAtPointIn as Ot, contentOffset as P, spansDifferOnlyInPaint as Pa, UiInsetRegistry as Pi, clearLinkHover as Pn, inheritedPropertyFlags as Pr, adjacentField as Pt, CanvasPlatformSurface as Q, UiEnvironment as Qa, noThemeExtensions as Qi, resolveColorValue as Qn, paintValuesEqual as Qr, textRunBackgrounds as Qt, constraintsEqual as R, colorsEqualPalette as Ra, UiContainerSizeSource as Ri, linkRunAtPointIn as Rn, propertyNarrowers as Rr, commandForKey as Rt, tracePathData as S, isShapeName as Sa, borderRadius as Si, selectableTextOf as Sn, UiSelectionChangeEvent as So, previousWordStart as Sr, scrollbarThumb as St, SCROLLBAR_LINGER_MS as T, isTypographyRole as Ta, borderRadiusIsZero as Ti, isNodeFocusable as Tn, UiWheelEvent as To, DEFAULT_LINE_HEIGHT_FACTOR as Tr, scrollsFromRight as Tt, parseFlexDirection as U, colorToRgba as Ua, lightTheme as Ui, caretVisibleAt as Un, isUiRole as Ur, buildFontString as Ut, isLayoutProtocol as V, UiBasicColors as Va, unknownContainerSize as Vi, CARET_WIDTH as Vn, UI_ROLES as Vr, EditableLayout as Vt, placeGridItems as W, colorValuesEqual as Wa, themesEqual as Wi, editorFor as Wn, isUiSemanticState as Wr, createCanvasTextStyle as Wt, parseCrossAxisAlignment as X, createEnvironmentKey as Xa, defineThemeExtension as Xi, nextCaretToggle as Xn, validateSubgrid as Xr, spanOf as Xt, parseAlignContent as Y, rgba as Ya, unitsEqual as Yi, maskText as Yn, UI_SUBGRID_AXES as Yr, runFontString as Yt, parseMainAxisAlignment as Z, findEnvironmentKey as Za, hasThemeExtension as Zi, syncEditorValue as Zn, inputsEqual as Zr, textMeasureRequest as Zt, paintsAfterChildren as _, boxShadowReach as _a, minmax as _i, matchRangesOf as _n, UiInputEvent as _o, lineEndAt as _r, SCROLLBAR_MIN_THUMB as _t, layerRegion as a, relativeLuminance as aa, MAX_GRADIENT_STOPS as ai, DEFAULT_FONT_SIZE as an, writeOverrideProperty as ao, layoutParagraph as ar, UiEditingController as at, labelOrigin as b, shadowsOf as ba, resolveLength as bi, clearSelectionRange as bn, UiPinchEvent as bo, nextWordEnd as br, scrollLeaderOf as bt, paintPictures as c, scaleSpacing as ca, linearGradient as ci, colorToCss as cn, hasVisualState as co, lineIndexAtY as cr, UiPinchRecognizer as ct, PaintRecorder as d, defaultShadows as da, auto as di, isPaintVisible as dn, MOUSE_POINTER as do, offsetAtPoint as dr, UiKeyboardController as dt, themeExtensionsEqual as ea, UiTransforms as ei, bumpFontStack as en, DirtyNodeSet as eo, videoFrameSize as er, capturePointer as et, replayPaint as f, shadowsEqual as fa, fr as fi, normalizeTextAlign as fn, UiBeforeInputEvent as fo, offsetAtX as fr, UiPointerController as ft, hasDecorationPhase as g, boxShadowRadius as ga, isPercentLength as gi, clearMatchRanges as gn, UiGestureEvent as go, graphemeBoundaries as gr, SCROLLBAR_INSET as gt, decorationRect as h, boxShadowArraysEqual as ha, isMinMaxTrack as hi, TEXT_MATCHES_PROP as hn, UiFocusEvent as ho, EditableTextModel as hr, SCROLLBAR_HOVER_ZONE as ht, traceRoundedRect as i, raiseContrast as ia, transformsEqual as ii, DEFAULT_FONT_FAMILY as in, writeDeclaredProperty as io, ELLIPSIS as ir, touchActionFor as it, labelNode as j, resolvedSpansOf as ja, TOUCH_TARGET as ji, isSubtreeInert as jn, closestPropertyName as jr, selectionRectsIn as jt, formatExplanation as k, flattenTextSpans as ka, defineProperty as ki, isNodeTabStop as kn, DirtyFlags as ko, resolvePropertyByName as kr, paragraphGeometry as kt, PaintTarget as l, spacingEqual as la, radialGradient as li, computeObjectFitRect as ln, visualState as lo, lineIndexForOffset as lr, UiWheelController as lt, decorationColor as m, boxShadow as ma, isFrLength as mi, resolvePaintState as mn, UiEventType as mo, selectionRects as mr, UiHitTester as mt, createCanvasSurface as n, contrastRatio as na, transform as ni, fontStackFor as nn, overrideSources as no, ParagraphTextMeasurer as nr, pointerDeviceOf as nt, opacityNeedsLayer as o, densityFactors as oa, gradientPaint as oi, DEFAULT_FONT_WEIGHT as on, UiVisualState as oo, proportionalFontMetrics as or, UiTouchScroller as ot, ScaledImageCache as p, BOX_SHADOW_BLUR_REACH as pa, isAutoLength as pi, normalizeVerticalAlign as pn, UiCompositionEvent as po, offsetForVerticalMove as pr, UiFocusManager as pt, CrossAxisAlignment as q, parseColor as qa, defaultUnits as qi, isMultiline as qn, validateRole as qr, layoutTextLines as qt, Canvas2DRenderer as r, highContrastColors as ra, transformIsIdentity as ri, registerFontStack as rn, resetOverrideWarnings as ro, spannedRunsFor as rr, prepareInputSurface as rt, PaintPictureCache as s, defaultSpacing as sa, gradientsEqual as si, DEFAULT_TEXT_COLOR as sn, defaultVisualState as so, caretRectFor as sr, UiGestureRecognizer as st, CanvasSurface as t, withThemeExtension as ta, parseTransform as ti, clearFontStacks as tn, clearOverrideProperty as to, CharacterCountTextMeasurer as tr, isImeKey as tt, EMPTY_RECORDING as u, spacingSteps as ua, validateGradient as ui, createPaintState as un, visualStatesEqual as uo, lineLimit as ur, isScrollContainer as ut, LABEL_PADDING_X as v, boxShadowValuesEqual as va, percent as vi, setMatchRanges as vn, UiKeyboardEvent as vo, lineStartAt as vr, SCROLLBAR_THICKNESS as vt, SCROLLBAR_FADE_MS as w, defaultTypography as wa, borderRadiusEqual as wi, setSelectionRange as wn, UiWheelDeltaMode as wo, UiGraph as wr, scrollbarZoneAt as wt, snapScroll as x, defaultShapes as xa, UiBorderRadiuses as xi, selectableTextNodes as xn, UiPointerEvent as xo, previousGraphemeStart as xr, scrollRange as xt, drawOverlayShapes as y, boxShadowsEqual as ya, repeat as yi, TEXT_SELECTION_PROP as yn, UiPasteEvent as yo, nextGraphemeEnd as yr, scrollBounds as yt, tightenConstraints as z, darkColors as za, bandOf as zi, setLinkHover as zn, propertyValuesEqualByName as zr, detectEditingPlatform as zt };
 
-//# sourceMappingURL=CanvasSurface-CspYfnND.js.map
+//# sourceMappingURL=CanvasSurface-BpgbOku2.js.map