gesso-core 0.7.0 → 0.8.1

package/dist/index.js

@@ -1,81 +1,5 @@
-import { $ as UiPlatformAdapter, $a as UiNode, $i as themeExtension, $n as isVideoSurface, $r as pathValuesEqual, $t as textRunDecorations, A as formatNumber, Aa as hiddenRangesOf, Ai as propertyValuesEqual, An as isPressable, Ao as UiBinding, Ar as resolveString, At as paragraphGeometryFrom, B as MAX_MEASURES_PER_CHILD, Ba as lightColors, Bi as containerBands, Bn as CARET_BLINK_MS, Br as UiProperties, Bt as isPrintable, C as LayoutEngine, Ca as shapesEqual, Ci as borderRadiusCorners, Cn as selectionRangeOf, Co as UiTextChangeEvent, Cr as wordRangeAt, Ct as scrollbarThumbs, D as describeOverrides, Da as defaultTextStyle, Di as normalizeBorderRadius, Dn as isNodeInert, Do as wheelDeltaYOf, Dr as resolveNumber, Dt as hasDrawnText, E as describeLength, Ea as typographyEqual, Ei as borderRadiusValuesEqual, En as isNodeHitTestable, Eo as noKeyModifiers, Er as resolveBoolean, Et as UiInputDispatcher, F as LayoutRecord, Fa as textContentOf, Fi as insetsEqual, Fn as hasTextLinks, Fr as inheritedPropertyNames, Ft as comparePositions, G as sizeGridTracks, Ga as colorsEqual, Gi as withContrast, Gn as editorOf, Gr as normalizeStates, Gt as drawText, H as FlexDirection, Ha as colorToHex, Hi as darkTheme, Hn as EDITOR_PROP, Hr as UI_SEMANTIC_STATES, Ht as applyCanvasTextStyle, I as Constraints, Ia as textSpansEqual, Ii as noInsets, In as linkHoverOf, Ir as propertyEffects, It as edgeField, J as MainAxisAlignment, Ja as rgb8, Ji as lengths, Jn as isReadOnly, Jr as validateStates, Jt as runCanvasStyleInto, K as AlignContent, Ka as normalizeColor, Ki as withDensity, Kn as isEditableNode, Kr as statesEqual, Kt as fillTextRects, L as clampSize, La as textStylesEqual, Li as observeViewportInsets, Ln as linkOf, Lr as propertyIsInherited, Lt as editingGroupOf, M as withOverrideSource, Ma as spanAtOffset, Mi as withPointer, Mn as pointerEventsOf, Mr as findPropertyDefinition, Mt as wordRangeIn, N as accumulatedOffsetTo, Na as spannedTextOf, Ni as UiEnvironmentKeys, Nn as resolveCursor, Nr as getPropertyNames, Nt as textInputOf, O as formatConstraints, Oa as editableSpansOf, Oi as uniformBorderRadius, On as isNodeSelectable, Oo as UiNodeType, Or as resolveProperty, Ot as offsetAtPointIn, P as contentOffset, Pa as spansDifferOnlyInPaint, Pi as UiInsetRegistry, Pn as clearLinkHover, Pr as inheritedPropertyFlags, Pt as adjacentField, Q as CanvasPlatformSurface, Qa as UiEnvironment, Qi as noThemeExtensions, Qn as resolveColorValue, Qr as paintValuesEqual, Qt as textRunBackgrounds, R as constraintsEqual, Ra as colorsEqualPalette, Ri as UiContainerSizeSource, Rn as linkRunAtPointIn, Rr as propertyNarrowers, Rt as commandForKey, S as tracePathData, Sa as isShapeName, Si as borderRadius, Sn as selectableTextOf, So as UiSelectionChangeEvent, Sr as previousWordStart, St as scrollbarThumb, T as SCROLLBAR_LINGER_MS, Ta as isTypographyRole, Ti as borderRadiusIsZero, Tn as isNodeFocusable, To as UiWheelEvent, Tr as DEFAULT_LINE_HEIGHT_FACTOR, Tt as scrollsFromRight, U as parseFlexDirection, Ua as colorToRgba, Ui as lightTheme, Un as caretVisibleAt, Ur as isUiRole, Ut as buildFontString, V as isLayoutProtocol, Va as UiBasicColors, Vi as unknownContainerSize, Vn as CARET_WIDTH, Vr as UI_ROLES, Vt as EditableLayout, W as placeGridItems, Wa as colorValuesEqual, Wi as themesEqual, Wn as editorFor, Wr as isUiSemanticState, Wt as createCanvasTextStyle, X as parseCrossAxisAlignment, Xa as createEnvironmentKey, Xi as defineThemeExtension, Xn as nextCaretToggle, Xr as validateSubgrid, Xt as spanOf, Y as parseAlignContent, Ya as rgba, Yi as unitsEqual, Yn as maskText, Yr as UI_SUBGRID_AXES, Yt as runFontString, Z as parseMainAxisAlignment, Za as findEnvironmentKey, Zi as hasThemeExtension, Zn as syncEditorValue, Zr as inputsEqual, Zt as textMeasureRequest, _ as paintsAfterChildren, _a as boxShadowReach, _i as minmax, _n as matchRangesOf, _o as UiInputEvent, _r as lineEndAt, _t as SCROLLBAR_MIN_THUMB, a as layerRegion, aa as relativeLuminance, ai as MAX_GRADIENT_STOPS, an as DEFAULT_FONT_SIZE, ao as writeOverrideProperty, ar as layoutParagraph, at as UiEditingController, b as labelOrigin, ba as shadowsOf, bi as resolveLength, bn as clearSelectionRange, bo as UiPinchEvent, br as nextWordEnd, bt as scrollLeaderOf, c as paintPictures, ca as scaleSpacing, ci as linearGradient, cn as colorToCss, co as hasVisualState, cr as lineIndexAtY, ct as UiPinchRecognizer, d as PaintRecorder, da as defaultShadows, di as auto, dn as isPaintVisible, do as MOUSE_POINTER, dr as offsetAtPoint, dt as UiKeyboardController, ea as themeExtensionsEqual, ei as UiTransforms, en as bumpFontStack, eo as DirtyNodeSet, er as videoFrameSize, et as capturePointer, f as replayPaint, fa as shadowsEqual, fi as fr, fn as normalizeTextAlign, fo as UiBeforeInputEvent, fr as offsetAtX, ft as UiPointerController, g as hasDecorationPhase, ga as boxShadowRadius, gi as isPercentLength, gn as clearMatchRanges, go as UiGestureEvent, gr as graphemeBoundaries, gt as SCROLLBAR_INSET, h as decorationRect, ha as boxShadowArraysEqual, hi as isMinMaxTrack, hn as TEXT_MATCHES_PROP, ho as UiFocusEvent, hr as EditableTextModel, ht as SCROLLBAR_HOVER_ZONE, i as traceRoundedRect, ia as raiseContrast, ii as transformsEqual, in as DEFAULT_FONT_FAMILY, io as writeDeclaredProperty, ir as ELLIPSIS, it as touchActionFor, j as labelNode, ja as resolvedSpansOf, ji as TOUCH_TARGET, jn as isSubtreeInert, jr as closestPropertyName, jt as selectionRectsIn, k as formatExplanation, ka as flattenTextSpans, ki as defineProperty, kn as isNodeTabStop, ko as DirtyFlags, kr as resolvePropertyByName, kt as paragraphGeometry, l as PaintTarget, la as spacingEqual, li as radialGradient, ln as computeObjectFitRect, lo as visualState, lr as lineIndexForOffset, lt as UiWheelController, m as decorationColor, ma as boxShadow, mi as isFrLength, mn as resolvePaintState, mo as UiEventType, mr as selectionRects, mt as UiHitTester, n as createCanvasSurface, na as contrastRatio, ni as transform, nn as fontStackFor, no as overrideSources, nr as ParagraphTextMeasurer, nt as pointerDeviceOf, o as opacityNeedsLayer, oa as densityFactors, oi as gradientPaint, on as DEFAULT_FONT_WEIGHT, oo as UiVisualState, or as proportionalFontMetrics, ot as UiTouchScroller, p as ScaledImageCache, pa as BOX_SHADOW_BLUR_REACH, pi as isAutoLength, pn as normalizeVerticalAlign, po as UiCompositionEvent, pr as offsetForVerticalMove, pt as UiFocusManager, q as CrossAxisAlignment, qa as parseColor, qi as defaultUnits, qn as isMultiline, qr as validateRole, qt as layoutTextLines, r as Canvas2DRenderer, ra as highContrastColors, ri as transformIsIdentity, rn as registerFontStack, ro as resetOverrideWarnings, rr as spannedRunsFor, rt as prepareInputSurface, s as PaintPictureCache, sa as defaultSpacing, si as gradientsEqual, sn as DEFAULT_TEXT_COLOR, so as defaultVisualState, sr as caretRectFor, st as UiGestureRecognizer, t as CanvasSurface, ta as withThemeExtension, ti as parseTransform, tn as clearFontStacks, to as clearOverrideProperty, tr as CharacterCountTextMeasurer, tt as isImeKey, u as EMPTY_RECORDING, ua as spacingSteps, ui as validateGradient, un as createPaintState, uo as visualStatesEqual, ur as lineLimit, ut as isScrollContainer, v as LABEL_PADDING_X, va as boxShadowValuesEqual, vi as percent, vn as setMatchRanges, vo as UiKeyboardEvent, vr as lineStartAt, vt as SCROLLBAR_THICKNESS, w as SCROLLBAR_FADE_MS, wa as defaultTypography, wi as borderRadiusEqual, wn as setSelectionRange, wo as UiWheelDeltaMode, wr as UiGraph, wt as scrollbarZoneAt, x as snapScroll, xa as defaultShapes, xi as UiBorderRadiuses, xn as selectableTextNodes, xo as UiPointerEvent, xr as previousGraphemeStart, xt as scrollRange, y as drawOverlayShapes, ya as boxShadowsEqual, yi as repeat, yn as TEXT_SELECTION_PROP, yo as UiPasteEvent, yr as nextGraphemeEnd, yt as scrollBounds, z as tightenConstraints, za as darkColors, zi as bandOf, zn as setLinkHover, zr as propertyValuesEqualByName, zt as detectEditingPlatform } from "./CanvasSurface-BpgbOku2.js";
+import { $ as UiPlatformAdapter, $a as boxShadowArraysEqual, $i as UiKeyboardEvent, $n as isVideoSurface, $r as pathValuesEqual, $t as textRunDecorations, A as formatNumber, Aa as withDensity, Ai as propertyValuesEqual, An as isPressable, Ao as colorsEqual, Ar as resolveString, At as paragraphGeometryFrom, B as MAX_MEASURES_PER_CHILD, Ba as contrastRatio, Bi as writeOverrideProperty, Bn as CARET_BLINK_MS, Bo as easings, Br as UiProperties, Bt as isPrintable, C as LayoutEngine, Ca as bandOf, Ci as borderRadiusCorners, Cn as selectionRangeOf, Co as colorsEqualPalette, Cr as wordRangeAt, Ct as scrollbarThumbs, D as describeOverrides, Da as lightTheme, Di as normalizeBorderRadius, Dn as isNodeInert, Do as colorToHex, Dr as resolveNumber, Dt as hasDrawnText, E as describeLength, Ea as darkTheme, Ei as borderRadiusValuesEqual, En as isNodeHitTestable, Eo as UiBasicColors, Er as resolveBoolean, Et as UiInputDispatcher, F as LayoutRecord, Fa as hasThemeExtension, Fi as DirtyNodeSet, Fn as hasTextLinks, Fo as createEnvironmentKey, Fr as inheritedPropertyNames, Ft as comparePositions, G as sizeGridTracks, Ga as defaultSpacing, Gi as visualStatesEqual, Gn as editorOf, Gr as normalizeStates, Gt as drawText, H as FlexDirection, Ha as raiseContrast, Hi as defaultVisualState, Hn as EDITOR_PROP, Ho as steps, Hr as UI_SEMANTIC_STATES, Ht as applyCanvasTextStyle, I as Constraints, Ia as noThemeExtensions, Ii as clearOverrideProperty, In as linkHoverOf, Io as findEnvironmentKey, Ir as propertyEffects, It as edgeField, J as MainAxisAlignment, Ja as spacingSteps, Ji as UiCompositionEvent, Jn as isReadOnly, Jr as validateStates, Jt as runCanvasStyleInto, K as AlignContent, Ka as scaleSpacing, Ki as MOUSE_POINTER, Kn as isEditableNode, Kr as statesEqual, Kt as fillTextRects, L as clampSize, La as themeExtension, Li as overrideSources, Ln as linkOf, Lo as provided, Lr as propertyIsInherited, Lt as editingGroupOf, M as withOverrideSource, Ma as lengths, Mi as withPointer, Mn as pointerEventsOf, Mo as parseColor, Mr as findPropertyDefinition, Mt as wordRangeIn, N as accumulatedOffsetTo, Na as unitsEqual, Ni as UiEnvironment, Nn as resolveCursor, No as rgb8, Nr as getPropertyNames, Nt as textInputOf, O as formatConstraints, Oa as themesEqual, Oi as uniformBorderRadius, On as isNodeSelectable, Oo as colorToRgba, Or as resolveProperty, Ot as offsetAtPointIn, P as contentOffset, Pa as defineThemeExtension, Pi as UiNode, Pn as clearLinkHover, Po as rgba, Pr as inheritedPropertyFlags, Pt as adjacentField, Q as CanvasPlatformSurface, Qa as boxShadow, Qi as UiInputEvent, Qn as resolveColorValue, Qr as paintValuesEqual, Qt as textRunBackgrounds, R as constraintsEqual, Ra as themeExtensionsEqual, Ri as resetOverrideWarnings, Rn as linkRunAtPointIn, Ro as cubicBezier, Rr as propertyNarrowers, Rt as commandForKey, S as tracePathData, Sa as UiContainerSizeSource, Si as borderRadius, Sn as selectableTextOf, So as textStylesEqual, Sr as previousWordStart, St as scrollbarThumb, T as SCROLLBAR_LINGER_MS, Ta as unknownContainerSize, Ti as borderRadiusIsZero, Tn as isNodeFocusable, To as lightColors, Tr as DEFAULT_LINE_HEIGHT_FACTOR, Tt as scrollsFromRight, U as parseFlexDirection, Ua as relativeLuminance, Ui as hasVisualState, Un as caretVisibleAt, Ur as isUiRole, Ut as buildFontString, V as isLayoutProtocol, Va as highContrastColors, Vi as UiVisualState, Vn as CARET_WIDTH, Vo as linear, Vr as UI_ROLES, Vt as EditableLayout, W as placeGridItems, Wa as densityFactors, Wi as visualState, Wn as editorFor, Wr as isUiSemanticState, Wt as createCanvasTextStyle, X as parseCrossAxisAlignment, Xa as shadowsEqual, Xi as UiFocusEvent, Xn as nextCaretToggle, Xr as validateSubgrid, Xt as spanOf, Y as parseAlignContent, Ya as defaultShadows, Yi as UiEventType, Yn as maskText, Yr as UI_SUBGRID_AXES, Yt as runFontString, Z as parseMainAxisAlignment, Za as BOX_SHADOW_BLUR_REACH, Zi as UiGestureEvent, Zn as syncEditorValue, Zr as inputsEqual, Zt as textMeasureRequest, _ as paintsAfterChildren, _a as springIn, _i as minmax, _n as matchRangesOf, _o as spanAtOffset, _r as lineEndAt, _t as SCROLLBAR_MIN_THUMB, a as layerRegion, aa as UiWheelDeltaMode, ai as MAX_GRADIENT_STOPS, an as DEFAULT_FONT_SIZE, ao as shadowsOf, ar as layoutParagraph, at as UiEditingController, b as labelOrigin, ba as noInsets, bi as resolveLength, bn as clearSelectionRange, bo as textContentOf, br as nextWordEnd, bt as scrollLeaderOf, c as paintPictures, ca as wheelDeltaYOf, ci as linearGradient, cn as colorToCss, co as shapesEqual, cr as lineIndexAtY, ct as UiPinchRecognizer, d as PaintRecorder, da as UiBinding, di as auto, dn as isPaintVisible, do as typographyEqual, dr as offsetAtPoint, dt as UiKeyboardController, ea as UiPasteEvent, ei as UiTransforms, en as bumpFontStack, eo as boxShadowRadius, er as videoFrameSize, et as capturePointer, f as replayPaint, fa as UiEnvironmentKeys, fi as fr, fn as normalizeTextAlign, fo as defaultTextStyle, fr as offsetAtX, ft as UiPointerController, g as hasDecorationPhase, ga as easingIn, gi as isPercentLength, gn as clearMatchRanges, go as resolvedSpansOf, gr as graphemeBoundaries, gt as SCROLLBAR_INSET, h as decorationRect, ha as durationIn, hi as isMinMaxTrack, hn as TEXT_MATCHES_PROP, ho as hiddenRangesOf, hr as EditableTextModel, ht as SCROLLBAR_HOVER_ZONE, i as traceRoundedRect, ia as UiTextChangeEvent, ii as transformsEqual, in as DEFAULT_FONT_FAMILY, io as fittedShadowRadius, ir as ELLIPSIS, it as touchActionFor, j as labelNode, ja as defaultUnits, ji as TOUCH_TARGET, jn as isSubtreeInert, jo as normalizeColor, jr as closestPropertyName, jt as selectionRectsIn, k as formatExplanation, ka as withContrast, ki as defineProperty, kn as isNodeTabStop, ko as colorValuesEqual, kr as resolvePropertyByName, kt as paragraphGeometry, l as PaintTarget, la as UiNodeType, li as radialGradient, ln as computeObjectFitRect, lo as defaultTypography, lr as lineIndexForOffset, lt as UiWheelController, m as decorationColor, ma as defineMotion, mi as isFrLength, mn as resolvePaintState, mo as flattenTextSpans, mr as selectionRects, mt as UiHitTester, n as createCanvasSurface, na as UiPointerEvent, ni as transform, nn as fontStackFor, no as boxShadowValuesEqual, nr as ParagraphTextMeasurer, nt as pointerDeviceOf, o as opacityNeedsLayer, oa as UiWheelEvent, oi as gradientPaint, on as DEFAULT_FONT_WEIGHT, oo as defaultShapes, or as proportionalFontMetrics, ot as UiTouchScroller, p as ScaledImageCache, pa as defaultMotion, pi as isAutoLength, pn as normalizeVerticalAlign, po as editableSpansOf, pr as offsetForVerticalMove, pt as UiFocusManager, q as CrossAxisAlignment, qa as spacingEqual, qi as UiBeforeInputEvent, qn as isMultiline, qr as validateRole, qt as layoutTextLines, r as Canvas2DRenderer, ra as UiSelectionChangeEvent, ri as transformIsIdentity, rn as registerFontStack, ro as boxShadowsEqual, rr as spannedRunsFor, rt as prepareInputSurface, s as PaintPictureCache, sa as noKeyModifiers, si as gradientsEqual, sn as DEFAULT_TEXT_COLOR, so as isShapeName, sr as caretRectFor, st as UiGestureRecognizer, t as CanvasSurface, ta as UiPinchEvent, ti as parseTransform, tn as clearFontStacks, to as boxShadowReach, tr as CharacterCountTextMeasurer, tt as isImeKey, u as EMPTY_RECORDING, ua as DirtyFlags, ui as validateGradient, un as createPaintState, uo as isTypographyRole, ur as lineLimit, ut as isScrollContainer, v as LABEL_PADDING_X, va as UiInsetRegistry, vi as percent, vn as setMatchRanges, vo as spannedTextOf, vr as lineStartAt, vt as SCROLLBAR_THICKNESS, w as SCROLLBAR_FADE_MS, wa as containerBands, wi as borderRadiusEqual, wn as setSelectionRange, wo as darkColors, wr as UiGraph, wt as scrollbarZoneAt, x as snapScroll, xa as observeViewportInsets, xi as UiBorderRadiuses, xn as selectableTextNodes, xo as textSpansEqual, xr as previousGraphemeStart, xt as scrollRange, y as drawOverlayShapes, ya as insetsEqual, yi as repeat, yn as TEXT_SELECTION_PROP, yo as spansDifferOnlyInPaint, yr as nextGraphemeEnd, yt as scrollBounds, z as tightenConstraints, za as withThemeExtension, zi as writeDeclaredProperty, zn as setLinkHover, zo as easingCss, zr as propertyValuesEqualByName, zt as detectEditingPlatform } from "./CanvasSurface-CkRHlmpu.js";
 import { BehaviorSubject, EMPTY, Subject, combineLatest, distinctUntilChanged, isObservable as isObservable$1, map, of } from "rxjs";
-//#region src/animation/UiEasing.ts
-/** Progress equals time. What a spinner and a sweep want. */
-const linear = (t) => t;
-/**
-* A cubic Bézier easing, in the CSS `cubic-bezier(x1, y1, x2, y2)`
-* sense: the curve runs from (0, 0) to (1, 1) through the two control
-* points, and the easing is y at the t where x equals the input.
-*
-* Solved by Newton's method with a bisection fallback, which is what
-* every browser engine does; eight iterations is well past the point
-* where the result stops moving in a float.
-*/
-function cubicBezier(x1, y1, x2, y2) {
-	const ax = 3 * x1 - 3 * x2 + 1;
-	const bx = 3 * x2 - 6 * x1;
-	const cx = 3 * x1;
-	const ay = 3 * y1 - 3 * y2 + 1;
-	const by = 3 * y2 - 6 * y1;
-	const cy = 3 * y1;
-	const sampleX = (t) => ((ax * t + bx) * t + cx) * t;
-	const sampleY = (t) => ((ay * t + by) * t + cy) * t;
-	const slopeX = (t) => (3 * ax * t + 2 * bx) * t + cx;
-	return (input) => {
-		if (input <= 0) return 0;
-		if (input >= 1) return 1;
-		let t = input;
-		for (let i = 0; i < 8; i++) {
-			const error = sampleX(t) - input;
-			if (Math.abs(error) < 1e-6) return sampleY(t);
-			const slope = slopeX(t);
-			if (Math.abs(slope) < 1e-6) break;
-			t -= error / slope;
-		}
-		let low = 0;
-		let high = 1;
-		t = input;
-		for (let i = 0; i < 24; i++) {
-			const x = sampleX(t);
-			if (Math.abs(x - input) < 1e-6) break;
-			if (x > input) high = t;
-			else low = t;
-			t = (low + high) / 2;
-		}
-		return sampleY(t);
-	};
-}
-/**
-* An easing that only takes `count` distinct values.
-*
-* The reason it exists is the `Spinner`: eight blades have eight
-* positions promised the F4 version would keep a
-* turn at eight writes a second rather than sixty. Paired with an
-* animation's `stepMs`, this is how that promise is kept — the value
-* is stepped and the frames are too.
-*/
-function steps(count) {
-	if (!(count >= 1)) throw new Error(`steps() needs at least one step, got ${count}.`);
-	return (t) => Math.min(count - 1, Math.floor(t * count)) / count;
-}
-/**
-* The named curves a motion vocabulary is built from.
-*
-* `standard` is the one to reach for: something entering and leaving
-* at a natural pace. `decelerate` is for something arriving (it starts
-* fast and settles), `accelerate` for something leaving. `emphasized`
-* is `standard` with more of a lean, for the one movement on a screen
-* that should be noticed.
-*/
-const easings = {
-	linear,
-	standard: cubicBezier(.2, 0, 0, 1),
-	decelerate: cubicBezier(0, 0, 0, 1),
-	accelerate: cubicBezier(.3, 0, 1, 1),
-	emphasized: cubicBezier(.05, .7, .1, 1)
-};
-//#endregion
 //#region src/animation/Interpolate.ts
 const interpolateNumber = (from, to, t) => from + (to - from) * t;
 /**
@@ -283,7 +207,8 @@ var UiAnimation = class {
 		this.begin(previous.lastAdvancedAt);
 	}
 	onBegin() {}
-	advance(now) {
+	/** `hold`: at its end, stay there, unfinished, to be sampled again at an earlier time (`UiClock.holding`). */
+	advance(now, hold = false) {
 		if (this.finished) return;
 		this.begin(now);
 		this.lastAdvancedAt = now;
@@ -296,7 +221,7 @@ var UiAnimation = class {
 			this.cell.value = value;
 			this.subject.next(value);
 		}
-		if (done) this.finish();
+		if (done && !hold) this.finish();
 	}
 	/**
 	* Moves the ideal timeline on by one step.
@@ -519,40 +444,6 @@ function createTween(cell, to, options) {
 	return new UiTween(cell, to, options, interpolate);
 }
 //#endregion
-//#region src/environment/UiMotion.ts
-const defaultMotion = {
-	durations: {
-		/** No motion. What `reducedMotion` turns everything else into. */
-		instant: 0,
-		/** A control acknowledging a press; too short to watch. */
-		fast: 120,
-		/** The default: something appearing, moving or changing colour. */
-		normal: 200,
-		/** A panel or a dialog, which is bigger and travels further. */
-		slow: 320,
-		/** A movement meant to be followed by the eye. Rare. */
-		deliberate: 500
-	},
-	easings,
-	springs: {
-		gentle: {
-			stiffness: 120,
-			damping: 20,
-			mass: 1
-		},
-		snappy: {
-			stiffness: 220,
-			damping: 24,
-			mass: 1
-		},
-		stiff: {
-			stiffness: 400,
-			damping: 32,
-			mass: 1
-		}
-	}
-};
-//#endregion
 //#region src/animation/UiTransition.ts
 /** A tween of `duration` milliseconds along `easing`. */
 function tween(duration, options = {}) {
@@ -571,12 +462,12 @@ function tween(duration, options = {}) {
 function spring(spec = "snappy", options = {}) {
 	return {
 		kind: "spring",
-		spring: typeof spec === "string" ? defaultMotion.springs[spec] : spec,
+		spring: spec,
 		...options
 	};
 }
 function normalizeTransition(value) {
-	return typeof value === "number" ? {
+	return typeof value === "number" || typeof value === "string" ? {
 		kind: "tween",
 		duration: value
 	} : value;
@@ -598,11 +489,18 @@ function assertTransitionMap(nodeId, value, isKnownProperty) {
 			});
 			continue;
 		}
+		if (typeof entry === "string" && entry !== "") {
+			specs.set(property, {
+				kind: "tween",
+				duration: entry
+			});
+			continue;
+		}
 		if (typeof entry === "object" && entry !== null && (entry.kind === "tween" || entry.kind === "spring")) {
 			specs.set(property, entry);
 			continue;
 		}
-		throw new Error(`The 'transition' for '${property}' on node '${nodeId}' must be a duration in milliseconds or a spec built by tween() or spring(), got ${describe$1(entry)}.`);
+		throw new Error(`The 'transition' for '${property}' on node '${nodeId}' must be a duration in milliseconds or by name, or a spec built by tween() or spring(), got ${describe$1(entry)}.`);
 	}
 	return specs;
 }
@@ -632,8 +530,13 @@ function erase(animation) {
 */
 var AnimationDriver = class {
 	running = /* @__PURE__ */ new Map();
+	/** The clock each running animation was started on, when it was not real time; see `UiClock`. */
+	clocks = /* @__PURE__ */ new Map();
+	/** Each clock's `moves` as last drawn: one moved since (a seek) is drawn at its new time at once. */
+	seenMoves = /* @__PURE__ */ new WeakMap();
 	reducedMotion = false;
 	hidden = false;
+	advancing = false;
 	wake = null;
 	/**
 	* Called when an animation enters the running set on an idle driver.
@@ -648,6 +551,14 @@ var AnimationDriver = class {
 	setWakeListener(listener) {
 		this.wake = listener;
 	}
+	/**
+	* Whether a frame of the running animations is being written now: a
+	* value written meanwhile is a step of an animation, not a change for
+	* a transition to animate again.
+	*/
+	get isAdvancing() {
+		return this.advancing;
+	}
 	/** Whether anything is running, so the `ticks` phase can report 0. */
 	get isRunning() {
 		return this.running.size > 0;
@@ -669,8 +580,8 @@ var AnimationDriver = class {
 	* animation says its movement is the information rather than the
 	* decoration.
 	*/
-	lands(policy) {
-		return policy === "snap" && (this.reducedMotion || this.hidden);
+	lands(policy, clock) {
+		return clock?.settled === true || policy === "snap" && (this.reducedMotion || this.hidden);
 	}
 	/**
 	* Starts an animation, replacing whatever was driving its cell.
@@ -682,16 +593,18 @@ var AnimationDriver = class {
 	* So a reduced-motion app runs no animation frames, rather than
 	* running them and drawing the same thing sixty times.
 	*/
-	start(animation) {
+	start(animation, clock = null) {
 		const cell = animation.cell;
 		this.running.get(cell)?.cancel();
 		this.running.delete(cell);
-		if (this.lands(animation.reducedMotionPolicy)) {
+		this.clocks.delete(cell);
+		if (this.lands(animation.reducedMotionPolicy, clock ?? void 0)) {
 			animation.snap();
 			return animation.values;
 		}
 		const wasIdle = this.running.size === 0;
 		this.running.set(cell, erase(animation));
+		if (clock !== null) this.clocks.set(cell, clock);
 		if (wasIdle) this.wake?.();
 		return animation.values;
 	}
@@ -711,12 +624,14 @@ var AnimationDriver = class {
 		const animation = this.running.get(cell);
 		if (animation === void 0) return false;
 		this.running.delete(cell);
+		this.clocks.delete(cell);
 		animation.cancel();
 		return true;
 	}
 	stopAll() {
 		const animations = [...this.running.values()];
 		this.running.clear();
+		this.clocks.clear();
 		for (const animation of animations) animation.cancel();
 	}
 	/**
@@ -770,8 +685,9 @@ var AnimationDriver = class {
 	}
 	/** Puts everything that may be landed where it was going. */
 	landRunning() {
-		for (const [cell, animation] of this.running) if (this.lands(animation.reducedMotionPolicy)) {
+		for (const [cell, animation] of this.running) if (this.lands(animation.reducedMotionPolicy, this.clocks.get(cell))) {
 			this.running.delete(cell);
+			this.clocks.delete(cell);
 			animation.snap();
 		}
 	}
@@ -788,8 +704,14 @@ var AnimationDriver = class {
 	*/
 	nextTickAt(now) {
 		let earliest;
-		for (const animation of this.running.values()) {
-			const due = animation.dueAt(now) - animation.dueSlackMs;
+		for (const [cell, animation] of this.running) {
+			const clock = this.clocks.get(cell);
+			if (clock?.settled === true) return now;
+			if (clock !== void 0 && clock.moves !== (this.seenMoves.get(clock) ?? 0)) return now;
+			const at = clock === void 0 ? now : clock.local(now);
+			const dueAt = animation.dueAt(at) - animation.dueSlackMs;
+			const due = clock === void 0 ? dueAt : clock.real(dueAt);
+			if (!Number.isFinite(due)) continue;
 			if (earliest === void 0 || due < earliest) earliest = due;
 		}
 		return earliest;
@@ -805,14 +727,144 @@ var AnimationDriver = class {
 	* behind.
 	*/
 	advance(now) {
+		this.advancing = true;
+		try {
+			this.advanceRunning(now);
+		} finally {
+			this.advancing = false;
+		}
+	}
+	advanceRunning(now) {
+		const moved = [...new Set(this.clocks.values())].filter((clock) => clock.moves !== (this.seenMoves.get(clock) ?? 0));
+		this.advanceEach(now);
+		for (const clock of moved) this.seenMoves.set(clock, clock.moves);
+	}
+	advanceEach(now) {
 		for (const [cell, animation] of this.running) {
-			if (animation.dueAt(now) - animation.dueSlackMs > now) continue;
-			animation.advance(now);
-			if (animation.isFinished && this.running.get(cell) === animation) this.running.delete(cell);
+			const clock = this.clocks.get(cell);
+			if (clock?.settled === true) {
+				this.running.delete(cell);
+				this.clocks.delete(cell);
+				animation.snap();
+				continue;
+			}
+			const at = clock === void 0 ? now : clock.local(now);
+			if (!(clock !== void 0 && clock.moves !== (this.seenMoves.get(clock) ?? 0)) && animation.dueAt(at) - animation.dueSlackMs > at) continue;
+			animation.advance(at, clock?.holding === true);
+			if (animation.isFinished && this.running.get(cell) === animation) {
+				this.running.delete(cell);
+				this.clocks.delete(cell);
+			}
 		}
 	}
 };
 //#endregion
+//#region src/animation/UiClock.ts
+/**
+* How time passes for the animations under a node: at a speed of its
+* own, or not at all.
+*
+* A node provides one to its subtree,
+* `provide={[provided(UiEnvironmentKeys.clock, clock)]}`, and every
+* animation started there runs on it: a transition, a `motion` state,
+* hover and press, and `AnimationService.animate` given the node it
+* animates `on`. Nothing provided is real time.
+*
+* What a design tool needs to show one screen two ways at once. The
+* frames on its board are pictures: under a `settled` clock every
+* animation lands where it is going the moment it starts, and a loop
+* holds still. The screen it plays runs at the person's own speed, a
+* quarter of it to watch a press closely, or paused. Reduced motion and
+* a hidden page are the whole app's; this is one part of it.
+*
+* An animation takes all its time from the driver, which hands each
+* the local time of its clock, so nothing inside a tween or a spring
+* knows; and the driver asks for the next frame in real time, so a
+* slowed clock asks for frames as often as it needs them and a paused
+* one asks for none.
+*/
+var UiClock = class {
+	rate;
+	/** A real time and the local time it was, from the last change of speed: where local time is measured from. */
+	anchor = null;
+	/** The real time last asked about, where a change of speed takes effect. */
+	lastReal = null;
+	/** Every animation lands where it is going, and none runs. */
+	settled;
+	/**
+	* Animations that reach their end stay, held there, rather than
+	* finishing: so moving the time back (`seek`) plays them back. What a
+	* design tool scrubs a transition with; let go, they finish as they
+	* would have. A spring, which is worked out step by step rather than
+	* from the time, holds but does not run back.
+	*/
+	holding = false;
+	/** Bumped by `seek`, so a driver knows to draw again at the new time. */
+	moves = 0;
+	constructor(options = {}) {
+		this.rate = checkedSpeed(options.speed ?? 1);
+		this.settled = options.settled ?? false;
+	}
+	/** How fast time passes: 1 is real time, 0.25 a quarter of it, 0 paused. */
+	get speed() {
+		return this.rate;
+	}
+	set speed(next) {
+		const speed = checkedSpeed(next);
+		if (this.anchor !== null && this.lastReal !== null) this.anchor = {
+			real: this.lastReal,
+			local: this.local(this.lastReal)
+		};
+		this.rate = speed;
+	}
+	/** The local time now, as last asked: where a seek is measured from. */
+	get now() {
+		return this.lastReal === null ? 0 : this.local(this.lastReal);
+	}
+	/**
+	* Puts local time at `at`, from now on: forward, or back to replay
+	* what is held (`holding`). Paused, it stays there; running, it goes
+	* on from there.
+	*/
+	seek(at) {
+		const real = this.lastReal ?? 0;
+		this.anchor = {
+			real,
+			local: at
+		};
+		this.moves += 1;
+	}
+	/** The local time at real time `now`. The first time asked, the two agree. */
+	local(now) {
+		this.anchor ??= {
+			real: now,
+			local: now
+		};
+		this.lastReal = now;
+		return this.anchor.local + (now - this.anchor.real) * this.rate;
+	}
+	/** The real time at which local time `at` comes; Infinity while paused. */
+	real(at) {
+		if (this.anchor === null) return at;
+		if (this.rate === 0) return Infinity;
+		return this.anchor.real + (at - this.anchor.local) / this.rate;
+	}
+};
+function checkedSpeed(speed) {
+	if (!(speed >= 0) || !Number.isFinite(speed)) throw new Error(`A clock's speed is a number of 0 or more (0 is paused, 1 real time), not ${speed}.`);
+	return speed;
+}
+/** The motion vocabulary names resolve to under `node`: the nearest provided above it, or Gesso's. */
+function motionOf(node) {
+	for (let at = node ?? null; at !== null; at = at.parent) if (at.environment !== null) return at.environment.get(UiEnvironmentKeys.motion);
+	return UiEnvironmentKeys.motion.defaultValue;
+}
+/** The clock the animations under `node` run on: the nearest one provided above it, or null for real time. */
+function clockOf(node) {
+	for (let at = node ?? null; at !== null; at = at.parent) if (at.environment !== null) return at.environment.get(UiEnvironmentKeys.clock);
+	return null;
+}
+//#endregion
 //#region src/animation/UiSharedElements.ts
 /**
 * Who currently owns each shared-element name, and where they were.
@@ -1099,9 +1151,7 @@ var UiChildrenBinding = class {
 	handleValue(value) {
 		const definitions = Array.isArray(value) ? value : [value];
 		const fragment = this.graph.requireNode(this.fragmentId);
-		this.builder.reconcileChildren(fragment, definitions);
-		const parent = this.graph.requireNode(this.parentId);
-		this.graph.markDirty(parent, 16);
+		if (this.builder.reconcileChildren(fragment, definitions).changed) this.graph.markDirty(this.graph.requireNode(this.parentId), 16);
 	}
 };
 //#endregion
@@ -1211,6 +1261,19 @@ function isUiModifier(value) {
 }
 //#endregion
 //#region src/modifiers/interaction.ts
+/**
+* Draws what is under a node as though it were hovered, pressed or
+* focused: every `interactive` modifier there shows its hover or press
+* look, and every `focusRing` its ring. What a design tool draws a
+* component's pointer states with, beside its other states, where no
+* pointer is over it. Read as each modifier attaches, so a node drawn
+* under it starts so and stays so; the pointer still adds its own.
+* Pressed is hovered too, as a press under a pointer is.
+*/
+const ShownAsKey = createEnvironmentKey({
+	name: "gesso.shownAs",
+	defaultValue: null
+});
 const BOTH = Object.freeze({
 	hover: true,
 	press: true
@@ -1228,19 +1291,25 @@ const kind$5 = defineModifier({
 	attach(host, options) {
 		let hovered = false;
 		let pressed = false;
+		const shown = host.environment(ShownAsKey);
+		const shownPressed = shown === "pressed";
+		const shownHovered = shownPressed || shown === "hovered";
 		const styled = /* @__PURE__ */ new Set([...Object.keys(options.hovered ?? {}), ...Object.keys(options.pressed ?? {})]);
 		const sync = () => {
+			const isHovered = hovered || shownHovered;
+			const isPressed = pressed || shownPressed;
 			const states = /* @__PURE__ */ new Set();
-			if (hovered) states.add("hovered");
-			if (pressed) states.add("pressed");
+			if (isHovered) states.add("hovered");
+			if (isPressed) states.add("pressed");
 			if (states.size === 0) states.add("normal");
 			if (!sameStates(host.get("visualState"), states)) host.set("visualState", states);
 			for (const property of styled) {
-				const value = (pressed ? options.pressed?.[property] : void 0) ?? (hovered ? options.hovered?.[property] : void 0);
+				const value = (isPressed ? options.pressed?.[property] : void 0) ?? (isHovered ? options.hovered?.[property] : void 0);
 				if (value === void 0) host.clear(property);
 				else host.set(property, value);
 			}
 		};
+		if (shownHovered) sync();
 		if (options.hover) {
 			host.on("pointerenter", () => {
 				hovered = true;
@@ -1337,7 +1406,7 @@ const measureFlow = defineModifier({
 			target.next(box);
 		};
 		report();
-		host.onLayout(report);
+		host.onFlowLayout(report);
 	}
 });
 //#endregion
@@ -1618,6 +1687,13 @@ var UiModifierSet = class {
 	get names() {
 		return this.attached.map((entry) => entry.kind.name);
 	}
+	/** What is attached, each kind with its current arguments, in order: for a tool reading what a node does. */
+	get modifiers() {
+		return this.attached.map((entry) => ({
+			kind: entry.kind,
+			args: entry.args
+		}));
+	}
 	get size() {
 		return this.attached.length;
 	}
@@ -1815,6 +1891,17 @@ var Host = class {
 		}
 		this.own(layout.onLayout(this.node, listener));
 	}
+	onFlowLayout(listener) {
+		const layout = this.services.layout;
+		if (layout === void 0) {
+			warnMissingLayout(this.name);
+			return;
+		}
+		this.own(layout.onFlowLayout === void 0 ? layout.onLayout(this.node, () => {
+			const box = layout.flowBox(this.node);
+			if (box !== null) listener(box);
+		}) : layout.onFlowLayout(this.node, listener));
+	}
 	environment(key, of = this.node) {
 		const environment = this.services.environment;
 		if (environment === void 0) return key.defaultValue;
@@ -1863,7 +1950,7 @@ var Host = class {
 			return EMPTY;
 		}
 		this.animated.add(cell);
-		return driver.start(tween);
+		return driver.start(tween, clockOf(this.node));
 	}
 	spring(cell, to, options) {
 		const driver = this.services.animations;
@@ -1878,7 +1965,7 @@ var Host = class {
 		return driver.start(new UiSpring(cell, to, {
 			...options,
 			velocity
-		}));
+		}), clockOf(this.node));
 	}
 	own(teardown) {
 		this.teardowns.push(teardown);
@@ -2063,6 +2150,10 @@ var NodeTransitions = class {
 	write(property, value, flags) {
 		const spec = this.specs.get(property);
 		if (spec === void 0) return false;
+		if (this.driver.isAdvancing) {
+			this.stopProperty(property);
+			return false;
+		}
 		if (!this.node.properties.has(property)) return false;
 		const current = this.node.properties.get(property);
 		if (Object.is(current, value)) return false;
@@ -2082,6 +2173,12 @@ var NodeTransitions = class {
 		this.targets.clear();
 		this.specs = /* @__PURE__ */ new Map();
 	}
+	cancel(property) {
+		this.stopProperty(property);
+	}
+	get declared() {
+		return this.specs;
+	}
 	stopProperty(property) {
 		const cell = this.cells.get(property);
 		if (cell !== void 0) {
@@ -2095,10 +2192,9 @@ var NodeTransitions = class {
 	* node: the driver keys its running set by cell identity, so a fresh
 	* adapter per write would leave the previous animation running.
 	*
-	* Writing goes through `updateNodePropertyNow`, which is the path a
-	* plain write takes minus this class — so a modifier's override still
-	* sits on top of an animated value, exactly as it sits on top of a
-	* bound one.
+	* It writes what is drawn (`applyAnimatedValue`): the target already
+	* is the value the element and any modifier over it settled on, so a
+	* frame of the way there goes onto the node as it is.
 	*/
 	cellFor(property, flags) {
 		let cell = this.cells.get(property);
@@ -2110,7 +2206,7 @@ var NodeTransitions = class {
 				return node.properties.get(property);
 			},
 			set value(next) {
-				graph.updateNodePropertyNow(node, property, next, flags);
+				graph.applyAnimatedValue(node, property, next, flags);
 			}
 		};
 		this.cells.set(property, cell);
@@ -2125,16 +2221,17 @@ var NodeTransitions = class {
 			const previous = this.driver.animationFor(cell);
 			const velocity = previous instanceof UiSpring ? previous.currentVelocity : 0;
 			this.driver.start(new UiSpring(cell, to, {
-				spring: spec.spring,
+				spring: springIn(motionOf(this.node), spec.spring),
 				velocity,
 				restDelta: spec.restDelta,
 				reducedMotion: spec.reducedMotion
-			}));
+			}), clockOf(this.node));
 			return true;
 		}
+		const motion = motionOf(this.node);
 		const tween = createTween(cell, to, {
-			duration: spec.duration,
-			easing: spec.easing,
+			duration: durationIn(motion, spec.duration),
+			easing: easingIn(motion, spec.easing),
 			stepMs: spec.stepMs,
 			reducedMotion: spec.reducedMotion
 		});
@@ -2142,7 +2239,7 @@ var NodeTransitions = class {
 			warnNotInterpolable(property);
 			return false;
 		}
-		this.driver.start(tween);
+		this.driver.start(tween, clockOf(this.node));
 		return true;
 	}
 };
@@ -2327,7 +2424,11 @@ var UiGraphBuilder = class {
 		const deferred = this.deferredChildren.get(parent);
 		if (deferred !== void 0) {
 			this.deferredChildren.delete(parent);
-			return this.reconcileChildren(parent, deferred);
+			const again = this.reconcileChildren(parent, deferred);
+			return {
+				nodes: again.nodes,
+				changed: result.changed || again.changed
+			};
 		}
 		if (this.reconcileDepth === 0) this.components?.flushMounts();
 		return result;
@@ -2457,9 +2558,18 @@ var UiGraphBuilder = class {
 			this.graph.insertBefore(parent, anchor, cursor);
 		} else {
 			matched.add(anchor);
-			if (this.reconciledFrom.get(anchor) === element) return anchor;
+			const previous = this.reconciledFrom.get(anchor);
+			if (previous === element) return anchor;
+			if (previous !== void 0 && isComponentLikeElement(previous) && previous.component !== element.component) {
+				resolver.release(anchorId);
+				for (let child = anchor.firstChild; child !== null;) {
+					const next = child.nextSibling;
+					this.removeSubtree(child);
+					child = next;
+				}
+			}
 		}
-		this.reconcileChildren(anchor, [resolver.resolve(element, anchorId)]);
+		this.reconcileChildren(anchor, [resolver.resolve(element, anchorId, anchor)]);
 		this.reconciledFrom.set(anchor, element);
 		return anchor;
 	}
@@ -3572,7 +3682,7 @@ const sizeContainer = defineModifier({
 			const vertical = inset("paddingTop", "paddingY") + inset("paddingBottom", "paddingY");
 			args.source.report(Math.max(0, box.width - horizontal), Math.max(0, box.height - vertical));
 		};
-		host.onLayout(report);
+		host.onFlowLayout(report);
 		report();
 	}
 });
@@ -3617,7 +3727,7 @@ const breakpoint = defineModifier({
 			}
 			for (const [name, value] of written) host.set(name, value);
 		};
-		host.onLayout(apply);
+		host.onFlowLayout(apply);
 		apply();
 	}
 });
@@ -5457,6 +5567,12 @@ function dragSessionFor(node) {
 var LayoutNotifier = class {
 	listeners = /* @__PURE__ */ new Map();
 	last = /* @__PURE__ */ new Map();
+	/**
+	* Listeners told about the node's place in the layout and its scroll
+	* offset, and not about where it is drawn (`addFlow`).
+	*/
+	flowListeners = /* @__PURE__ */ new Map();
+	flowLast = /* @__PURE__ */ new Map();
 	/** Registers a listener; the returned function removes it. */
 	add(node, listener) {
 		let forNode = this.listeners.get(node);
@@ -5475,36 +5591,73 @@ var LayoutNotifier = class {
 			}
 		};
 	}
+	/**
+	* Registers a listener told when the node's laid-out box or its own
+	* scroll offset changes, and not when a scroll or a transform above it
+	* moves it on screen; the returned function removes it.
+	*
+	* Most listeners are this kind: a size container, a breakpoint, a
+	* layout animation, a scroll position read only the node's own box
+	* and offset. Told of every move on screen, each of them was asked
+	* on every step of a pan over a design tool's board, 2,600 of them,
+	* to find nothing it reads had changed; and each answer was where
+	* the node was drawn, worked out through every ancestor. Its place in
+	* the layout is its record, read at once.
+	*/
+	addFlow(node, listener) {
+		let forNode = this.flowListeners.get(node);
+		if (forNode === void 0) {
+			forNode = /* @__PURE__ */ new Set();
+			this.flowListeners.set(node, forNode);
+		}
+		forNode.add(listener);
+		return () => {
+			const set = this.flowListeners.get(node);
+			if (set === void 0) return;
+			set.delete(listener);
+			if (set.size === 0) {
+				this.flowListeners.delete(node);
+				this.flowLast.delete(node);
+			}
+		};
+	}
 	get size() {
-		return this.listeners.size;
+		return this.listeners.size + this.flowListeners.size;
 	}
 	/** Whether anything is listening, so a frame can skip the walk. */
 	isEmpty() {
-		return this.listeners.size === 0;
+		return this.listeners.size === 0 && this.flowListeners.size === 0;
 	}
 	/**
 	* Calls the listeners of every watched node whose box or scroll
 	* offset differs from what it was last told about.
 	*/
-	notify(read) {
-		for (const [node, listeners] of this.listeners) {
-			const current = read(node);
-			const previous = this.last.get(node);
-			if (previous !== void 0 && sameLayout(previous, current)) continue;
-			this.last.set(node, {
-				box: { ...current.box },
-				scrollX: current.scrollX,
-				scrollY: current.scrollY
-			});
-			for (const listener of listeners) listener(current.box);
-		}
+	notify(read, readFlow = read) {
+		notifyEach(this.listeners, this.last, read);
+		notifyEach(this.flowListeners, this.flowLast, readFlow);
 	}
 	/** Drops a removed node's listeners, so nothing keeps it alive. */
 	handleNodeRemoved(node) {
 		this.listeners.delete(node);
 		this.last.delete(node);
+		this.flowListeners.delete(node);
+		this.flowLast.delete(node);
 	}
 };
+/** Calls the listeners of each node whose layout, as `read` gives it, differs from what they were last told. */
+function notifyEach(listeners, last, read) {
+	for (const [node, forNode] of listeners) {
+		const current = read(node);
+		const previous = last.get(node);
+		if (previous !== void 0 && sameLayout(previous, current)) continue;
+		last.set(node, {
+			box: { ...current.box },
+			scrollX: current.scrollX,
+			scrollY: current.scrollY
+		});
+		for (const listener of forNode) listener(current.box);
+	}
+}
 function sameLayout(a, b) {
 	return a.scrollX === b.scrollX && a.scrollY === b.scrollY && sameBox(a.box, b.box);
 }
@@ -5615,8 +5768,9 @@ const kind$4 = defineModifier({
 	name: "focusRing",
 	attach(host, options) {
 		const shapes = ringShapes(options);
+		const shown = host.environment(ShownAsKey) === "focused";
 		const sync = () => {
-			host.decorate(host.isFocused() && host.isFocusVisible() ? shapes : null);
+			host.decorate(shown || host.isFocused() && host.isFocusVisible() ? shapes : null);
 		};
 		sync();
 		host.onFocusChange(sync);
@@ -5772,7 +5926,7 @@ const kind$3 = defineModifier({
 	name: "autoFocus",
 	attach(host, options) {
 		let done = false;
-		host.onLayout(() => {
+		host.onFlowLayout(() => {
 			if (done) return;
 			done = true;
 			host.focus(options);
@@ -6098,7 +6252,7 @@ var DropTarget = class {
 	}
 	attach() {
 		this.registration.sync();
-		this.host.onLayout(() => this.registration.sync());
+		this.host.onFlowLayout(() => this.registration.sync());
 		this.host.own(() => {
 			this.stopScrolling();
 			this.registration.dispose();
@@ -6825,7 +6979,7 @@ var LayoutAnimation = class {
 			this.baseScaleY = numberOr(declared.scaleY, 1);
 			this.baseRotation = numberOr(declared.rotation, 0);
 		}
-		this.host.onLayout(() => this.handleLayout());
+		this.host.onFlowLayout(() => this.handleLayout());
 	}
 	makeCell(read, write) {
 		return {
@@ -6902,7 +7056,7 @@ var LayoutAnimation = class {
 		}
 		const named = this.options.spring ?? "snappy";
 		this.host.spring(cell, 0, {
-			spring: typeof named === "string" ? defaultMotion.springs[named] : named,
+			spring: springIn(motionOf(this.host.node), named),
 			restDelta: .5
 		});
 	}
@@ -7053,15 +7207,11 @@ const UNSUPPORTED_ELEMENTS = /* @__PURE__ */ new Set([
 	"text",
 	"image",
 	"foreignObject",
-	"mask",
-	"filter",
 	"pattern",
 	"marker"
 ]);
 /** Attributes that point at one of those. */
 const UNSUPPORTED_ATTRIBUTES = {
-	mask: "mask",
-	filter: "filter",
 	"marker-start": "marker",
 	"marker-mid": "marker",
 	"marker-end": "marker"
@@ -7082,10 +7232,21 @@ function parseSvg(source) {
 		if (id !== void 0 && !ids.has(id)) ids.set(id, element);
 		if (name === "style") rules.push(...parseStyleSheet(element.text));
 		if (UNSUPPORTED_ELEMENTS.has(name)) unsupported.add(name);
+		if (name === "filter" && dropShadowOf(element) === void 0) unsupported.add("filter");
 		for (const [attribute, feature] of Object.entries(UNSUPPORTED_ATTRIBUTES)) if (element.attributes[attribute] !== void 0 && element.attributes[attribute] !== "none") unsupported.add(feature);
+		for (const attribute of ["mask", "filter"]) {
+			const value = element.attributes[attribute];
+			if (value !== void 0 && value !== "none") references.push([attribute, value]);
+		}
 		element.children.forEach(visit);
 	};
+	const references = [];
 	visit(root);
+	for (const [attribute, value] of references) {
+		const id = referencedId(value);
+		const target = id === void 0 ? void 0 : ids.get(id);
+		if (target === void 0 || localName(target.name) !== attribute) unsupported.add(attribute);
+	}
 	const viewBox = parseViewBox(root.attributes.viewBox);
 	const width = absoluteLength(root.attributes.width) ?? viewBox?.width ?? 300;
 	const height = absoluteLength(root.attributes.height) ?? viewBox?.height ?? 150;
@@ -7104,6 +7265,28 @@ function parseSvg(source) {
 		unsupported: [...unsupported]
 	};
 }
+/** The id a value of the form `url(#id)` names, or undefined for anything else. */
+function referencedId(value) {
+	return /^\s*url\(\s*['"]?#([^'")]+)['"]?\s*\)\s*$/.exec(value)?.[1];
+}
+/**
+* The `<feDropShadow>` a `<filter>` is, when it is exactly one drop
+* shadow of the element itself; undefined for any other filter, which
+* is not drawn.
+*/
+function dropShadowOf(filter) {
+	const primitives = filter.children.filter((child) => !NOT_PRIMITIVES.has(localName(child.name)));
+	const [primitive] = primitives;
+	if (primitives.length !== 1 || localName(primitive.name) !== "feDropShadow") return;
+	const input = primitive.attributes.in;
+	return input === void 0 || input === "SourceGraphic" ? primitive : void 0;
+}
+/** What a `<filter>` may hold that is not a step of it. */
+const NOT_PRIMITIVES = /* @__PURE__ */ new Set([
+	"title",
+	"desc",
+	"metadata"
+]);
 /** An element's name without its namespace prefix: `svg:path` is `path`. */
 function localName(name) {
 	const colon = name.indexOf(":");
@@ -7328,24 +7511,201 @@ function drawElement(element, inherited, viewport, context) {
 	const opacity = unit(declared.opacity);
 	if (opacity < 1) surface.alpha(opacity);
 	if (declared["clip-path"] !== void 0) clipTo(declared["clip-path"], viewport, context);
+	const content = (at) => {
+		switch (name) {
+			case "g":
+			case "a":
+			case "switch":
+				drawChildren(element, style, viewport, at);
+				break;
+			case "svg":
+				drawNested(element, style, viewport, at);
+				break;
+			case "use":
+				drawUse(element, style, viewport, at);
+				break;
+			default: {
+				const shape = shapeOf(element, name, viewport);
+				if (shape !== null && style.visible) paintShape(shape, style, viewport, at);
+			}
+		}
+	};
+	const filtered = () => {
+		const filter = declared.filter === void 0 ? void 0 : referencedElement(declared.filter, "filter", context);
+		const shadow = filter === void 0 ? void 0 : dropShadowOf(filter);
+		if (filter === void 0 || shadow === void 0) content(context);
+		else drawWithShadow(element, filter, shadow, style, viewport, context, content);
+	};
+	const mask = declared.mask === void 0 ? void 0 : referencedElement(declared.mask, "mask", context);
+	if (mask === void 0 || context.using.has(mask)) filtered();
+	else drawMasked(element, mask, viewport, context, filtered);
+	surface.restore();
+}
+/** The element of a kind that a `url(#id)` value names, if it is one. */
+function referencedElement(value, kind, context) {
+	const id = referencedId(value);
+	const target = id === void 0 ? void 0 : context.document.ids.get(id);
+	return target !== void 0 && localName(target.name) === kind ? target : void 0;
+}
+/**
+* Draws an element through a `<mask>`: its drawing is a layer, and the
+* mask's children, drawn into the layer's mask, say how much of it
+* shows. By their luminance, or by their alpha for `mask-type: alpha`.
+*
+* The mask's region and its content are placed in the element's user
+* space or in fractions of its bounding box, as `maskUnits` and
+* `maskContentUnits` say; the region is cut to as the layer is.
+*/
+function drawMasked(element, mask, viewport, context, draw) {
+	const { surface } = context;
+	const attributes = mask.attributes;
+	const declared = declarationsOf(mask, context.document);
+	const bounds = attributes.maskUnits === "userSpaceOnUse" && attributes.maskContentUnits !== "objectBoundingBox" ? void 0 : elementBounds(element, viewport, context);
+	const region = regionOf(attributes, attributes.maskUnits === "userSpaceOnUse", bounds, viewport);
+	surface.beginMaskedLayer(region.x, region.y, region.width, region.height);
+	draw();
+	surface.layerMask(declared["mask-type"] === "alpha" ? "alpha" : "luminance");
+	if (attributes.maskContentUnits === "objectBoundingBox") surface.transform(bounds.width, 0, 0, bounds.height, bounds.x, bounds.y);
+	const root = cascade(INITIAL_STYLE, declarationsOf(context.document.root, context.document), context);
+	context.using.add(mask);
+	drawChildren(mask, cascade(root, declared, context), viewport, {
+		...context,
+		flood: void 0
+	});
+	context.using.delete(mask);
+	surface.endMaskedLayer();
+}
+/**
+* Draws an element with the drop shadow its filter is, and then the
+* element over it, both cut to the filter's region as a filter's result
+* is.
+*
+* The shadow is the element again, every paint of it the flood colour,
+* moved by `dx` and `dy` and blurred by `stdDeviation`: its alpha in
+* the flood colour, which is what `<feDropShadow>` makes. It is drawn
+* as a layer composited at the flood opacity, so where two of a group's
+* shapes overlap their shadow is not darker; a host without layers
+* draws it shape by shape, which differs only there.
+*/
+function drawWithShadow(element, filter, shadow, style, viewport, context, draw) {
+	const { surface } = context;
+	const attributes = filter.attributes;
+	const userSpace = attributes.filterUnits === "userSpaceOnUse";
+	const primitivesInBox = attributes.primitiveUnits === "objectBoundingBox";
+	const bounds = userSpace && !primitivesInBox ? void 0 : elementBounds(element, viewport, context);
+	const region = regionOf(attributes, userSpace, bounds, viewport);
+	if (!(region.width > 0) || !(region.height > 0)) return;
+	const declared = declarationsOf(shadow, context.document);
+	const number = (value, fallback) => {
+		const parsed = value === void 0 ? NaN : parseFloat(value);
+		return Number.isFinite(parsed) ? parsed : fallback;
+	};
+	let dx = number(declared.dx, 2);
+	let dy = number(declared.dy, 2);
+	const [sx, sy] = numbersIn(declared.stdDeviation ?? "2");
+	let deviation = Math.max(0, sy === void 0 ? sx ?? 2 : ((sx ?? 0) + sy) / 2);
+	if (primitivesInBox) {
+		dx *= bounds.width;
+		dy *= bounds.height;
+		deviation *= Math.sqrt((bounds.width ** 2 + bounds.height ** 2) / 2);
+	}
+	const color = colorValue(declared["flood-color"] ?? "black", style, context) ?? BLACK_COLOR;
+	const opacity = unit(declared["flood-opacity"]);
+	surface.save();
+	surface.beginPath();
+	surface.rect(region.x, region.y, region.width, region.height);
+	surface.clip();
+	if (opacity > 0) {
+		surface.save();
+		if (opacity < 1) surface.alpha(opacity);
+		surface.beginMaskedLayer(region.x, region.y, region.width, region.height);
+		surface.translate(dx, dy);
+		if (deviation > 0) surface.blur(deviation);
+		draw({
+			...context,
+			flood: color
+		});
+		surface.endMaskedLayer();
+		surface.restore();
+	}
+	draw(context);
+	surface.restore();
+}
+/**
+* A mask's or a filter's region: its `x`, `y`, `width` and `height` in
+* user space, or in fractions of the element's bounding box, which is
+* where they are by default and where they default to a tenth beyond
+* it on every side.
+*/
+function regionOf(attributes, userSpace, bounds, viewport) {
+	if (userSpace) return {
+		x: length(attributes.x ?? "-10%", viewport.width),
+		y: length(attributes.y ?? "-10%", viewport.height),
+		width: length(attributes.width ?? "120%", viewport.width),
+		height: length(attributes.height ?? "120%", viewport.height)
+	};
+	const box = bounds;
+	return {
+		x: box.x + fraction(attributes.x ?? "-10%") * box.width,
+		y: box.y + fraction(attributes.y ?? "-10%") * box.height,
+		width: fraction(attributes.width ?? "120%") * box.width,
+		height: fraction(attributes.height ?? "120%") * box.height
+	};
+}
+/** A fraction written as a number or a percentage: `0.5` and `50%` alike. */
+function fraction(value) {
+	const trimmed = value.trim();
+	const parsed = trimmed.endsWith("%") ? parseFloat(trimmed) / 100 : parseFloat(trimmed);
+	return Number.isFinite(parsed) ? parsed : 0;
+}
+/**
+* An element's bounding box in its own user space, as `getBBox` gives
+* it: its geometry and its children's through their transforms, without
+* a stroke and without its own transform.
+*/
+function elementBounds(element, viewport, context) {
+	const bounds = new BoundsSurface();
+	addBounds(element, IDENTITY$1, viewport, context, bounds, /* @__PURE__ */ new Set());
+	return bounds.bounds();
+}
+function addBounds(element, matrix, viewport, context, bounds, using) {
+	const name = localName(element.name);
+	const into = new TransformedSurface(bounds, matrix);
+	/** A child, or a used element, under its own transform. */
+	const add = (child, at) => {
+		const declared = declarationsOf(child, context.document);
+		if (declared.display === "none") return;
+		addBounds(child, declared.transform === void 0 ? at : multiply(at, parseTransform$1(declared.transform)), viewport, context, bounds, using);
+	};
 	switch (name) {
 		case "g":
 		case "a":
 		case "switch":
-			drawChildren(element, style, viewport, context);
-			break;
+			for (const child of element.children) if (!NOT_DRAWN.has(localName(child.name))) add(child, matrix);
+			return;
+		case "use": {
+			const target = referenced(element, context.document);
+			if (target === void 0 || using.has(element)) return;
+			using.add(element);
+			add(target, multiply(matrix, [
+				1,
+				0,
+				0,
+				1,
+				length(element.attributes.x, viewport.width),
+				length(element.attributes.y, viewport.height)
+			]));
+			using.delete(element);
+			return;
+		}
 		case "svg":
-			drawNested(element, style, viewport, context);
-			break;
-		case "use":
-			drawUse(element, style, viewport, context);
-			break;
-		default: {
-			const shape = shapeOf(element, name, viewport);
-			if (shape !== null && style.visible) paintShape(shape, style, viewport, context);
+		case "symbol": {
+			const a = element.attributes;
+			into.rect(length(a.x, viewport.width), length(a.y, viewport.height), length(a.width ?? "100%", viewport.width), length(a.height ?? "100%", viewport.height));
+			return;
 		}
+		default: shapeOf(element, name, viewport)?.trace(into);
 	}
-	surface.restore();
 }
 /** A nested `<svg>`: a viewport of its own, at its x and y. */
 function drawNested(element, style, viewport, context) {
@@ -7475,6 +7835,11 @@ function paintShape(shape, style, viewport, context) {
 */
 function setPaint(paint, role, shape, style, viewport, context) {
 	if (paint.kind === "none") return false;
+	if (context.flood !== void 0) {
+		if (role === "fill") context.surface.fillColor(context.flood);
+		else context.surface.strokeColor(context.flood);
+		return true;
+	}
 	if (paint.kind === "color") {
 		if (role === "fill") context.surface.fillColor(paint.color);
 		else context.surface.strokeColor(paint.color);
@@ -8477,14 +8842,14 @@ var MotionLayer = class {
 	}
 	drive(cell, to, timing) {
 		if (timing.spring !== void 0) return this.host.spring(cell, to, {
-			spring: springSpec(timing.spring),
+			spring: springIn(motionOf(this.host.node), timing.spring),
 			delay: timing.delay,
 			reducedMotion: timing.reducedMotion,
 			restDelta: .002
 		});
 		return this.host.animate(cell, to, {
-			duration: resolveDuration(timing.duration),
-			easing: resolveEasing(timing.easing),
+			duration: durationIn(motionOf(this.host.node), timing.duration),
+			easing: easingIn(motionOf(this.host.node), timing.easing),
 			delay: timing.delay,
 			reducedMotion: timing.reducedMotion
 		});
@@ -8500,17 +8865,6 @@ var MotionLayer = class {
 function channelEpsilon(channel) {
 	return channel === "x" || channel === "y" ? .01 : 1e-4;
 }
-function springSpec(spring) {
-	return typeof spring === "string" ? defaultMotion.springs[spring] : spring;
-}
-function resolveDuration(duration) {
-	if (duration === void 0) return defaultMotion.durations.normal;
-	return typeof duration === "number" ? duration : defaultMotion.durations[duration];
-}
-function resolveEasing(easing) {
-	if (easing === void 0) return easings.standard;
-	return typeof easing === "function" ? easing : easings[easing] ?? easings.standard;
-}
 /**
 * Moves an element to a visual state, and optionally in from another.
 *
@@ -8553,7 +8907,7 @@ var MotionController = class {
 	attach() {
 		this.layer.measure(this.host.flowBox());
 		if (this.args.initial !== void 0) this.layer.snapTo(resolveMotionState(this.args.initial));
-		this.host.onLayout(() => this.layer.measure(this.host.flowBox()));
+		this.host.onFlowLayout(() => this.layer.measure(this.host.flowBox()));
 		this.aim();
 	}
 	update(args) {
@@ -8849,13 +9203,13 @@ var SharedElementController = class {
 			const cell = geometry.cell(field);
 			const to = targets[field];
 			(timing.spring !== void 0 ? this.host.spring(cell, to, {
-				spring: springSpec(timing.spring),
+				spring: springIn(motionOf(this.host.node), timing.spring),
 				delay: timing.delay,
 				reducedMotion: timing.reducedMotion,
 				restDelta: .5
 			}) : this.host.animate(cell, to, {
-				duration: resolveDuration(timing.duration),
-				easing: resolveEasing(timing.easing),
+				duration: durationIn(motionOf(this.host.node), timing.duration),
+				easing: easingIn(motionOf(this.host.node), timing.easing),
 				delay: timing.delay,
 				reducedMotion: timing.reducedMotion
 			})).subscribe({ complete: done });
@@ -9377,7 +9731,7 @@ const scrollPosition = defineModifier({
 				if (settling === 1) args.onSettled?.(offset);
 			} });
 		};
-		host.onLayout(() => {
+		host.onFlowLayout(() => {
 			const offset = host.scrollOffset();
 			if (offset === null || last !== null && last.x === offset.x && last.y === offset.y) return;
 			last = offset;
@@ -9427,7 +9781,7 @@ const publishInset = defineModifier({
 			if (write === null) write = source.publish(insets);
 			else write(insets);
 		};
-		host.onLayout(publish);
+		host.onFlowLayout(publish);
 		publish();
 		host.own(() => {
 			write?.();
@@ -12116,7 +12470,7 @@ function pushInstance(out, x, y, width, height, color, radius, opacity, borderWi
 */
 function pushShadows(out, rec, paint, opacity, transform, clip, inset) {
 	const shadows = paint.boxShadows;
-	const radius = borderRadiusIsZero(paint.borderRadius) ? 0 : uniformBorderRadius(paint.borderRadius);
+	const radius = borderRadiusIsZero(paint.borderRadius) ? 0 : fittedShadowRadius(uniformBorderRadius(paint.borderRadius), rec.width, rec.height);
 	for (let i = shadows.length - 1; i >= 0; i--) {
 		const shadow = shadows[i];
 		if (shadow.inset === true !== inset || shadow.color.a <= 0) continue;
@@ -16033,6 +16387,12 @@ const MAX_CADENCE_MS = 50;
 const WATCH_REFRESHES = 2;
 const IDLE_TICKS_BEFORE_STOP = 4;
 /**
+* How long a frame waits for this thread's own refresh before a timer
+* draws it instead; see `watchLocal`. Far longer than any display's
+* refresh, so it never stands in for one that is coming.
+*/
+const LOCAL_WATCH_MS = 250;
+/**
 * Timer-backed clock that works in the browser main thread,
 * in a Worker, and in Node.
 */
@@ -16146,6 +16506,8 @@ const MAX_QUEUED_REFRESHES = 8;
 const RETRY_LOCAL_MS = 2e3;
 /** The most refreshes a frame is given: two, sixty at 120 Hz; slower than that is no smoother. */
 const MAX_STRIDE = 2;
+/** How many times faster than the display measured at start a refined beat may read before it is not believed. */
+const MAX_STRIDE_OFF = 4;
 function localAnimationFrame() {
 	const host = globalThis;
 	return typeof host.requestAnimationFrame === "function" ? host.requestAnimationFrame.bind(host) : null;
@@ -16191,6 +16553,10 @@ var UiHostFrameClock = class {
 	/** This thread's own `requestAnimationFrame`, or null where there is none. */
 	local;
 	localHandle = null;
+	/** This thread's own refreshes so far, which `watchLocal` counts on. */
+	localRefreshes = 0;
+	/** The timer standing by for a refresh that does not come; see `watchLocal`. */
+	localWatch = null;
 	/** Whether the page is hidden, when this thread's refreshes do not come. */
 	hidden = false;
 	timeOrigin;
@@ -16243,8 +16609,10 @@ var UiHostFrameClock = class {
 				this.armTimer();
 				return;
 			}
+			this.watchLocal();
 			if (this.localHandle === null) this.localHandle = this.local((time) => {
 				this.localHandle = null;
+				this.localRefreshes++;
 				this.recordLocal(time);
 				if (this.pending) {
 					const started = this.now();
@@ -16258,6 +16626,42 @@ var UiHostFrameClock = class {
 		this.armTimer();
 	}
 	/**
+	* Draws a wanted frame on a timer when this thread's own refreshes
+	* have stopped coming on a page that says it is shown.
+	*
+	* They do stop. A window that is shown but not composited (a browser
+	* pane hidden inside a desktop app, a window behind others on some
+	* systems) refreshes a page once a second or not at all, while
+	* `document.visibilityState` stays `visible`, so `setHidden` never
+	* hears of it; and a worker whose canvas the compositor is behind on
+	* is not given another refresh until it catches up. A frame asked for
+	* then waited for a refresh that did not come, and with no timer on
+	* this path, nothing else drew it: the application stopped answering,
+	* with its last frame on screen.
+	*
+	* One timer, a quarter of a second long, armed while frames are wanted
+	* and never more than one: it draws a frame only when not one refresh
+	* came in the whole of it. A compositor that is answering, however
+	* slowly the frames themselves run, always beats it, so it never
+	* stands in for a refresh that is coming (see the spec about a blocked
+	* host thread); it costs four wake-ups a second while something
+	* animates, against one per refresh for a per-frame watch.
+	*/
+	watchLocal() {
+		if (this.localWatch !== null) return;
+		const seen = this.localRefreshes;
+		this.localWatch = setTimeout(() => {
+			this.localWatch = null;
+			if (!this.pending || this.local === null) return;
+			if (this.localRefreshes === seen) {
+				this.localHandle = null;
+				this.deliver(this.now());
+				if (!this.pending) return;
+			}
+			this.watchLocal();
+		}, LOCAL_WATCH_MS);
+	}
+	/**
 	* The page was hidden or shown. While it is hidden this thread's own
 	* refreshes stop, so a frame asked for is paced by the timer, as a
 	* hosted clock is when its host stops ticking; one already waiting
@@ -16390,6 +16794,7 @@ var UiHostFrameClock = class {
 		const cadence = this.cadenceMs();
 		let interval = cadence !== null && Math.abs(cadence - this.display.interval) > this.display.interval * NEW_DISPLAY ? cadence : this.display.interval;
 		for (let pass = 0; pass < BEAT_PASSES; pass++) interval = this.refineInterval(interval);
+		if (!(interval >= this.display.interval / MAX_STRIDE_OFF && interval <= MAX_CADENCE_MS)) interval = this.display.interval;
 		const latest = this.refreshes[this.refreshes.length - 1];
 		let earliest = Infinity;
 		for (const time of this.refreshes) {
@@ -16435,7 +16840,8 @@ var UiHostFrameClock = class {
 	deliverOnBeat(time) {
 		const beat = this.beat();
 		let refresh = time - ((time - beat.start) % beat.interval + beat.interval) % beat.interval;
-		while (refresh < this.lastLocked + (this.stride - .5) * beat.interval) refresh += beat.interval;
+		const after = this.lastLocked + (this.stride - .5) * beat.interval;
+		if (refresh < after) refresh += Math.ceil((after - refresh) / beat.interval) * beat.interval;
 		this.lastLocked = refresh;
 		this.refreshesSinceFrame = 0;
 		const started = this.now();
@@ -16571,8 +16977,37 @@ var UiHostFrameClock = class {
 		const cadence = this.cadenceMs();
 		return cadence === null ? this.fallbackMs : Math.max(1, Math.min(this.fallbackMs, cadence));
 	}
+	/**
+	* Draws the pending frame now, on this clock's timeline, and nothing
+	* when none is pending (`FrameService.flush`): for a tool that changed
+	* the screen and must read it drawn, in a window that may be sent no
+	* refreshes. It is not a refresh, so it teaches the clock nothing about
+	* the display. Handed to `tick` as one, with this thread's time, which
+	* is not the host's, it took the beat backwards; see `tick`.
+	*/
+	flush() {
+		if (this.pending) this.drawNow();
+	}
+	/**
+	* Draws the pending frame now, without waiting for a refresh: on the
+	* display's beat when frames are timed on it, so its time is the next
+	* refresh's and never one already drawn for; else at this moment, on
+	* the timeline the clock's frames are on.
+	*/
+	drawNow() {
+		this.clearFallback();
+		if (this.locked && this.display !== null && this.refreshes.length > 0 && this.lastTickTime !== null) {
+			this.deliverOnBeat(this.lastTickTime);
+			return;
+		}
+		this.deliver(this.local !== null ? this.now() : this.hostTime());
+	}
 	cancelFrame() {
 		this.pending = false;
+		if (this.localWatch !== null) {
+			clearTimeout(this.localWatch);
+			this.localWatch = null;
+		}
 		this.clearFallback();
 		if (this.local === null) this.setActive(false);
 	}
@@ -16592,11 +17027,19 @@ var UiHostFrameClock = class {
 	* it is needed rather than negotiating every frame.
 	*/
 	tick(time) {
+		const backwards = this.lastTickTime !== null && time < this.lastTickTime;
+		if (backwards && this.pending) {
+			this.idleTicks = 0;
+			this.drawNow();
+			return;
+		}
 		this.hosted = true;
 		this.stalled = false;
-		this.hostOffset = time - this.now();
-		this.recordCadence(time);
-		if (this.locked && this.display !== null) {
+		if (!backwards) {
+			this.hostOffset = time - this.now();
+			this.recordCadence(time);
+		}
+		if (this.locked && this.display !== null && !backwards) {
 			this.refreshes.push(time);
 			if (this.refreshes.length > BEAT_SAMPLES) this.refreshes.shift();
 			this.refreshesSinceFrame++;
@@ -16605,6 +17048,7 @@ var UiHostFrameClock = class {
 				this.idleTicks = 0;
 				const queued = this.now() - this.toLocal(time) > this.display.interval;
 				if (this.refreshesSinceFrame >= this.stride && (!queued || this.refreshesSinceFrame >= MAX_QUEUED_REFRESHES)) this.deliverOnBeat(time);
+				else this.armTimer();
 				return;
 			}
 		}
@@ -17598,6 +18042,6 @@ function recordsEqual(a, b) {
 	return true;
 }
 //#endregion
-export { AlignContent, AnimationDriver, BOX_SHADOW_BLUR_REACH, BUTTON_INTERACTION, Box, Button, CARET_BLINK_MS, CARET_WIDTH, CLIP_STRIDE_BYTES, CLIP_STRIDE_FLOATS, Canvas2DRenderer, CanvasPlatformSurface, CanvasSurface, CanvasTextMeasurer, CharacterCountTextMeasurer, Column, CommandKind, Constraints, CrossAxisAlignment, DEFAULT_BLOCK_SIZE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_WEIGHT, DEFAULT_LINE_HEIGHT_FACTOR, DEFAULT_TEXT_COLOR, DefaultImageResolver, DefaultSvgResolver, DefaultVideoResolver, DirtyFlags, DirtyNodeSet, EDITOR_PROP, ELLIPSIS, EMPTY_RECORDING, EXTERNAL_FILES, EditableLayout, EditableText, EditableTextModel, EnvironmentNotifier, FlexDirection, FocusNotifier, GLYPH_SUBPIXEL_PHASES, GlyphShaper, Grid, INSPECTOR_HEAT_MS, INSTANCE_STRIDE_BYTES, INSTANCE_STRIDE_FLOATS, IconRasterizer, LABEL_PADDING_X, LayoutEngine, LayoutInspector, LayoutNotifier, LayoutRecord, LazyColumn, LazyGrid, LazyRow, LazySheet, MARK_PREFIX, MAX_GRADIENT_STOPS, MAX_MEASURES_PER_CHILD, MOTION_CHANNELS, MOTION_REST, MOUSE_POINTER, MainAxisAlignment, Mp3Frames, NO_CLIP_INDEX, NodeTransitions, Paint, PaintPictureCache, PaintRecorder, PaintTarget, ParagraphTextMeasurer, PrimitiveKind, Responsive, Row, SCROLLBAR_FADE_MS, SCROLLBAR_HOVER_ZONE, SCROLLBAR_INSET, SCROLLBAR_LINGER_MS, SCROLLBAR_MIN_THUMB, SCROLLBAR_THICKNESS, ScrollView, Stack, TEXTURED_STRIDE_BYTES, TEXTURED_STRIDE_FLOATS, TEXT_MATCHES_PROP, TEXT_RUN_ID_SEPARATOR, TEXT_SELECTION_PROP, TOUCH_TARGET, Text, UI_ROLES, UI_SEMANTIC_STATES, UI_SUBGRID_AXES, UiAnimation, UiAnimationFrameClock, UiBasicColors, UiBeforeInputEvent, UiBinding, UiBorderRadiuses, UiChildrenBinding, UiCompositionEvent, UiContainerSizeSource, UiDragSession, UiEditingController, UiEnvironment, UiEnvironmentKeys, UiEventBinding, UiEventType, UiFindController, UiFocusEvent, UiFocusManager, UiFrame, UiGestureEvent, UiGestureRecognizer, UiGraph, UiGraphBuilder, UiHitTester, UiHostFrameClock, UiInputDispatcher, UiInputEvent, UiInsetRegistry, UiKeyboardController, UiKeyboardEvent, UiManualFrameClock, UiModifierSet, UiNode, UiNodeType, UiPasteEvent, UiPinchEvent, UiPinchRecognizer, UiPlatformAdapter, UiPointerController, UiPointerEvent, UiProperties, UiScheduler, UiSelectionChangeEvent, UiSelectionController, UiSharedElements, UiShortcutRegistry, UiSpring, UiTextChangeEvent, UiTimerFrameClock, UiTouchScroller, UiTransforms, UiTween, UiUnknownModifierPropertyError, UiVirtualSheet, UiVirtualWindow, UiVisualState, UiWheelController, UiWheelDeltaMode, UiWheelEvent, VIRTUAL_INDEX_PROP, VIRTUAL_LEAD_PROP, VIRTUAL_SHEET_PROP, VIRTUAL_WINDOW_PROP, WebGPUError, WebGPUGlyphAtlas, WebGPUGlyphPages, WebGPURenderer, WebGPUSurface, WebGPUTextureCache, accumulatedOffsetTo, adjacentField, animateLayout, applyCanvasTextStyle, assertModifierList, assertTransitionMap, auto, autoFocus, bandOf, borderRadius, borderRadiusCorners, borderRadiusEqual, borderRadiusIsZero, borderRadiusValuesEqual, borderShapes, borders, boxShadow, boxShadowArraysEqual, boxShadowRadius, boxShadowReach, boxShadowValuesEqual, boxShadowsEqual, breakpoint, bufferSource, buildFontString, buildRenderList, buildSemanticsSubtree, buildSemanticsTree, bumpFontStack, bundle, canDecodeVideo, capturePointer, caretRectFor, caretVisibleAt, clampSize, clearFontStacks, clearLinkHover, clearMatchRanges, clearOverrideProperty, clearSelectionRange, clickOutside, closestPropertyName, colorToCss, colorToHex, colorToRgba, colorValuesEqual, colorsEqual, colorsEqualPalette, commandForKey, comparePositions, computeObjectFitRect, constraintsEqual, containerBands, contentOffset, contextMenu, contrastRatio, createCanvasSurface, createCanvasTextStyle, createElement, createEnvironmentKey, createPaintState, createTextCache, createTween, createWebGPUSurface, cubicBezier, cueAt, darkColors, darkTheme, decorated, decorationColor, decorationRect, defaultMotion, defaultShadows, defaultShapes, defaultSpacing, defaultTextStyle, defaultTypography, defaultUnits, defaultVisualState, defineModifier, defineProperty, defineThemeExtension, demuxMp4Audio, demuxMp4Video, densityFactors, describeLength, describeOverrides, describeShortcut, detectEditingPlatform, diffSemantics, dragSessionFor, dragSource, draggable, drawOverlayShapes, drawSvg, drawText, dropIndexShifts, dropTarget, easings, edgeField, editableSpansOf, editingGroupOf, editorFor, editorOf, fade, fillTextRects, findEnvironmentKey, findMatchesIn, findPropertyDefinition, flattenTextSpans, focusRing, fontStackFor, formatConstraints, formatExplanation, formatShortcut, fr, getPropertyNames, glyphCount, gradientPaint, gradientsEqual, graphemeBoundaries, hasDecorationPhase, hasDrawnText, hasTextLinks, hasThemeExtension, hasVisualState, hiddenRangesOf, highContrastColors, hoverable, iconKey, iconSource, imageSource, inheritedPropertyFlags, inheritedPropertyNames, initializeWebGPU, inputsEqual, insetPadding, insetsEqual, interactive, interpolateColor, interpolateNumber, interpolateTransform, interpolatorFor, isAutoLength, isComponentLikeElement, isEditableNode, isFrLength, isImeKey, isLayoutProtocol, isMinMaxTrack, isMotionRest, isMultiline, isNodeFocusable, isNodeHitTestable, isNodeInert, isNodeSelectable, isNodeTabStop, isObservable, isPaintVisible, isPercentLength, isPrintable, isReadOnly, isScrollContainer, isShapeName, isSubtreeInert, isSvgSource, isTypographyRole, isUiChild, isUiElement, isUiModifier, isUiRole, isUiSemanticState, isVideoSurface, isWebGPUAvailable, labelNode, labelOrigin, layoutParagraph, layoutTextLines, lazySource, lengths, lightColors, lightTheme, lineEndAt, lineIndexAtY, lineIndexForOffset, lineLimit, lineStartAt, linear, linearGradient, linkHoverOf, linkOf, linkRunAtPointIn, markInstant, markNow, matchRangesOf, measure, measureFlow, measureSpan, mediaLoadsInFlight, minmax, motion, nextCaretToggle, nextGraphemeEnd, nextWordEnd, noInsets, noKeyModifiers, noModifiers, noThemeExtensions, normalizeBorderRadius, normalizeColor, normalizeStates, normalizeTextAlign, normalizeTransition, normalizeVerticalAlign, observeViewportInsets, offsetAtPoint, offsetAtPointIn, offsetAtX, offsetForVerticalMove, overrideSources, paintPictures, paintValuesEqual, paintsAfterChildren, paragraphGeometry, paragraphGeometryFrom, parseAlignContent, parseColor, parseCrossAxisAlignment, parseFlexDirection, parseMainAxisAlignment, parseShortcut, parseSvg, parseTransform, parseWebVtt, pathValuesEqual, percent, performanceMarksEnabled, pinchable, placeGridItems, pointerDeviceOf, pointerEventsOf, pop, prepareInputSurface, pressable, previousGraphemeStart, previousWordStart, propertyEffects, propertyIsInherited, propertyNarrowers, propertyValuesEqual, propertyValuesEqualByName, proportionalFontMetrics, provideEnvironment, publishInset, radialGradient, raiseContrast, rangeSource, readMp3Header, recordsEqual, registerFontStack, relativeLuminance, reorderable, repeat, replayPaint, resetOverrideWarnings, resetTransitionWarnings, resolveBoolean, resolveCursor, resolveLength, resolveMotionState, resolveNumber, resolvePaintState, resolveProperty, resolvePropertyByName, resolveString, resolvedSpansOf, rewalkSemantics, rgb8, rgba, rotateFrom, runCanvasStyleInto, runFontString, sameArgs, scaleFrom, scaleSpacing, scrollBounds, scrollLeaderOf, scrollPosition, scrollRange, scrollbarThumb, scrollbarThumbs, scrollbarZoneAt, scrollsFromRight, selectableTextNodes, selectableTextOf, selectionRangeOf, selectionRects, selectionRectsIn, semanticsInertAbove, semanticsMemory, setLinkHover, setMatchRanges, setPerformanceMarks, setSelectionRange, shadowsEqual, shadowsOf, shapesEqual, sharedElement, sheetSource, shortcut, shortcutKeyCaps, shortcuts, sizeContainer, sizeGridTracks, slideDown, slideFrom, slideUp, spacingEqual, spacingSteps, spanAtOffset, spannedRunsFor, spannedTextOf, spansDifferOnlyInPaint, splitMp3Frames, spring, statesEqual, steps, svgPaint, syncEditorValue, textContentOf, textInputOf, textRunBackgrounds, textRunDecorations, textRunOfRecordId, textRuns, textSpansEqual, textStylesEqual, themeExtension, themeExtensionsEqual, themeTokens, themesEqual, tightenConstraints, touchActionFor, tracePathData, traceRoundedRect, transform, transformIsIdentity, transformsEqual, tween, typographyEqual, uniformBorderRadius, unitsEqual, unknownContainerSize, validateGradient, validateRole, validateStates, validateSubgrid, videoFrameSize, videoSource, visualState, visualStatesEqual, wheelDeltaYOf, withContrast, withDensity, withOverrideSource, withPointer, withThemeExtension, wordRangeAt, wordRangeIn, writeDeclaredProperty, writeOverrideProperty };
+export { AlignContent, AnimationDriver, BOX_SHADOW_BLUR_REACH, BUTTON_INTERACTION, Box, Button, CARET_BLINK_MS, CARET_WIDTH, CLIP_STRIDE_BYTES, CLIP_STRIDE_FLOATS, Canvas2DRenderer, CanvasPlatformSurface, CanvasSurface, CanvasTextMeasurer, CharacterCountTextMeasurer, Column, CommandKind, Constraints, CrossAxisAlignment, DEFAULT_BLOCK_SIZE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_WEIGHT, DEFAULT_LINE_HEIGHT_FACTOR, DEFAULT_TEXT_COLOR, DefaultImageResolver, DefaultSvgResolver, DefaultVideoResolver, DirtyFlags, DirtyNodeSet, EDITOR_PROP, ELLIPSIS, EMPTY_RECORDING, EXTERNAL_FILES, EditableLayout, EditableText, EditableTextModel, EnvironmentNotifier, FlexDirection, FocusNotifier, GLYPH_SUBPIXEL_PHASES, GlyphShaper, Grid, INSPECTOR_HEAT_MS, INSTANCE_STRIDE_BYTES, INSTANCE_STRIDE_FLOATS, IconRasterizer, LABEL_PADDING_X, LayoutEngine, LayoutInspector, LayoutNotifier, LayoutRecord, LazyColumn, LazyGrid, LazyRow, LazySheet, MARK_PREFIX, MAX_GRADIENT_STOPS, MAX_MEASURES_PER_CHILD, MOTION_CHANNELS, MOTION_REST, MOUSE_POINTER, MainAxisAlignment, Mp3Frames, NO_CLIP_INDEX, NodeTransitions, Paint, PaintPictureCache, PaintRecorder, PaintTarget, ParagraphTextMeasurer, PrimitiveKind, Responsive, Row, SCROLLBAR_FADE_MS, SCROLLBAR_HOVER_ZONE, SCROLLBAR_INSET, SCROLLBAR_LINGER_MS, SCROLLBAR_MIN_THUMB, SCROLLBAR_THICKNESS, ScrollView, ShownAsKey, Stack, TEXTURED_STRIDE_BYTES, TEXTURED_STRIDE_FLOATS, TEXT_MATCHES_PROP, TEXT_RUN_ID_SEPARATOR, TEXT_SELECTION_PROP, TOUCH_TARGET, Text, UI_ROLES, UI_SEMANTIC_STATES, UI_SUBGRID_AXES, UiAnimation, UiAnimationFrameClock, UiBasicColors, UiBeforeInputEvent, UiBinding, UiBorderRadiuses, UiChildrenBinding, UiClock, UiCompositionEvent, UiContainerSizeSource, UiDragSession, UiEditingController, UiEnvironment, UiEnvironmentKeys, UiEventBinding, UiEventType, UiFindController, UiFocusEvent, UiFocusManager, UiFrame, UiGestureEvent, UiGestureRecognizer, UiGraph, UiGraphBuilder, UiHitTester, UiHostFrameClock, UiInputDispatcher, UiInputEvent, UiInsetRegistry, UiKeyboardController, UiKeyboardEvent, UiManualFrameClock, UiModifierSet, UiNode, UiNodeType, UiPasteEvent, UiPinchEvent, UiPinchRecognizer, UiPlatformAdapter, UiPointerController, UiPointerEvent, UiProperties, UiScheduler, UiSelectionChangeEvent, UiSelectionController, UiSharedElements, UiShortcutRegistry, UiSpring, UiTextChangeEvent, UiTimerFrameClock, UiTouchScroller, UiTransforms, UiTween, UiUnknownModifierPropertyError, UiVirtualSheet, UiVirtualWindow, UiVisualState, UiWheelController, UiWheelDeltaMode, UiWheelEvent, VIRTUAL_INDEX_PROP, VIRTUAL_LEAD_PROP, VIRTUAL_SHEET_PROP, VIRTUAL_WINDOW_PROP, WebGPUError, WebGPUGlyphAtlas, WebGPUGlyphPages, WebGPURenderer, WebGPUSurface, WebGPUTextureCache, accumulatedOffsetTo, adjacentField, animateLayout, applyCanvasTextStyle, assertModifierList, assertTransitionMap, auto, autoFocus, bandOf, borderRadius, borderRadiusCorners, borderRadiusEqual, borderRadiusIsZero, borderRadiusValuesEqual, borderShapes, borders, boxShadow, boxShadowArraysEqual, boxShadowRadius, boxShadowReach, boxShadowValuesEqual, boxShadowsEqual, breakpoint, bufferSource, buildFontString, buildRenderList, buildSemanticsSubtree, buildSemanticsTree, bumpFontStack, bundle, canDecodeVideo, capturePointer, caretRectFor, caretVisibleAt, clampSize, clearFontStacks, clearLinkHover, clearMatchRanges, clearOverrideProperty, clearSelectionRange, clickOutside, clockOf, closestPropertyName, colorToCss, colorToHex, colorToRgba, colorValuesEqual, colorsEqual, colorsEqualPalette, commandForKey, comparePositions, computeObjectFitRect, constraintsEqual, containerBands, contentOffset, contextMenu, contrastRatio, createCanvasSurface, createCanvasTextStyle, createElement, createEnvironmentKey, createPaintState, createTextCache, createTween, createWebGPUSurface, cubicBezier, cueAt, darkColors, darkTheme, decorated, decorationColor, decorationRect, defaultMotion, defaultShadows, defaultShapes, defaultSpacing, defaultTextStyle, defaultTypography, defaultUnits, defaultVisualState, defineModifier, defineMotion, defineProperty, defineThemeExtension, demuxMp4Audio, demuxMp4Video, densityFactors, describeLength, describeOverrides, describeShortcut, detectEditingPlatform, diffSemantics, dragSessionFor, dragSource, draggable, drawOverlayShapes, drawSvg, drawText, dropIndexShifts, dropTarget, durationIn, easingCss, easingIn, easings, edgeField, editableSpansOf, editingGroupOf, editorFor, editorOf, fade, fillTextRects, findEnvironmentKey, findMatchesIn, findPropertyDefinition, fittedShadowRadius, flattenTextSpans, focusRing, fontStackFor, formatConstraints, formatExplanation, formatShortcut, fr, getPropertyNames, glyphCount, gradientPaint, gradientsEqual, graphemeBoundaries, hasDecorationPhase, hasDrawnText, hasTextLinks, hasThemeExtension, hasVisualState, hiddenRangesOf, highContrastColors, hoverable, iconKey, iconSource, imageSource, inheritedPropertyFlags, inheritedPropertyNames, initializeWebGPU, inputsEqual, insetPadding, insetsEqual, interactive, interpolateColor, interpolateNumber, interpolateTransform, interpolatorFor, isAutoLength, isComponentLikeElement, isEditableNode, isFrLength, isImeKey, isLayoutProtocol, isMinMaxTrack, isMotionRest, isMultiline, isNodeFocusable, isNodeHitTestable, isNodeInert, isNodeSelectable, isNodeTabStop, isObservable, isPaintVisible, isPercentLength, isPrintable, isReadOnly, isScrollContainer, isShapeName, isSubtreeInert, isSvgSource, isTypographyRole, isUiChild, isUiElement, isUiModifier, isUiRole, isUiSemanticState, isVideoSurface, isWebGPUAvailable, labelNode, labelOrigin, layoutParagraph, layoutTextLines, lazySource, lengths, lightColors, lightTheme, lineEndAt, lineIndexAtY, lineIndexForOffset, lineLimit, lineStartAt, linear, linearGradient, linkHoverOf, linkOf, linkRunAtPointIn, markInstant, markNow, matchRangesOf, measure, measureFlow, measureSpan, mediaLoadsInFlight, minmax, motion, motionOf, nextCaretToggle, nextGraphemeEnd, nextWordEnd, noInsets, noKeyModifiers, noModifiers, noThemeExtensions, normalizeBorderRadius, normalizeColor, normalizeStates, normalizeTextAlign, normalizeTransition, normalizeVerticalAlign, observeViewportInsets, offsetAtPoint, offsetAtPointIn, offsetAtX, offsetForVerticalMove, overrideSources, paintPictures, paintValuesEqual, paintsAfterChildren, paragraphGeometry, paragraphGeometryFrom, parseAlignContent, parseColor, parseCrossAxisAlignment, parseFlexDirection, parseMainAxisAlignment, parseShortcut, parseSvg, parseTransform, parseWebVtt, pathValuesEqual, percent, performanceMarksEnabled, pinchable, placeGridItems, pointerDeviceOf, pointerEventsOf, pop, prepareInputSurface, pressable, previousGraphemeStart, previousWordStart, propertyEffects, propertyIsInherited, propertyNarrowers, propertyValuesEqual, propertyValuesEqualByName, proportionalFontMetrics, provideEnvironment, provided, publishInset, radialGradient, raiseContrast, rangeSource, readMp3Header, recordsEqual, registerFontStack, relativeLuminance, reorderable, repeat, replayPaint, resetOverrideWarnings, resetTransitionWarnings, resolveBoolean, resolveCursor, resolveLength, resolveMotionState, resolveNumber, resolvePaintState, resolveProperty, resolvePropertyByName, resolveString, resolvedSpansOf, rewalkSemantics, rgb8, rgba, rotateFrom, runCanvasStyleInto, runFontString, sameArgs, scaleFrom, scaleSpacing, scrollBounds, scrollLeaderOf, scrollPosition, scrollRange, scrollbarThumb, scrollbarThumbs, scrollbarZoneAt, scrollsFromRight, selectableTextNodes, selectableTextOf, selectionRangeOf, selectionRects, selectionRectsIn, semanticsInertAbove, semanticsMemory, setLinkHover, setMatchRanges, setPerformanceMarks, setSelectionRange, shadowsEqual, shadowsOf, shapesEqual, sharedElement, sheetSource, shortcut, shortcutKeyCaps, shortcuts, sizeContainer, sizeGridTracks, slideDown, slideFrom, slideUp, spacingEqual, spacingSteps, spanAtOffset, spannedRunsFor, spannedTextOf, spansDifferOnlyInPaint, splitMp3Frames, spring, springIn, statesEqual, steps, svgPaint, syncEditorValue, textContentOf, textInputOf, textRunBackgrounds, textRunDecorations, textRunOfRecordId, textRuns, textSpansEqual, textStylesEqual, themeExtension, themeExtensionsEqual, themeTokens, themesEqual, tightenConstraints, touchActionFor, tracePathData, traceRoundedRect, transform, transformIsIdentity, transformsEqual, tween, typographyEqual, uniformBorderRadius, unitsEqual, unknownContainerSize, validateGradient, validateRole, validateStates, validateSubgrid, videoFrameSize, videoSource, visualState, visualStatesEqual, wheelDeltaYOf, withContrast, withDensity, withOverrideSource, withPointer, withThemeExtension, wordRangeAt, wordRangeIn, writeDeclaredProperty, writeOverrideProperty };
 
 //# sourceMappingURL=index.js.map