motion 12.27.3-alpha.2 → 12.27.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -81,7 +81,7 @@
81
81
  }
82
82
 
83
83
  /*#__NO_SIDE_EFFECTS__*/
84
- const noop$1 = (any) => any;
84
+ const noop = (any) => any;
85
85
 
86
86
  /**
87
87
  * Pipe
@@ -227,7 +227,7 @@
227
227
  function cubicBezier(mX1, mY1, mX2, mY2) {
228
228
  // If this is a linear gradient, return linear easing
229
229
  if (mX1 === mY1 && mX2 === mY2)
230
- return noop$1;
230
+ return noop;
231
231
  const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
232
232
  // If animation is at start/end, return t without easing
233
233
  return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
@@ -278,7 +278,7 @@
278
278
  const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
279
279
 
280
280
  const easingLookup = {
281
- linear: noop$1,
281
+ linear: noop,
282
282
  easeIn,
283
283
  easeInOut,
284
284
  easeOut,
@@ -479,7 +479,7 @@
479
479
  return { schedule, cancel, state, steps };
480
480
  }
481
481
 
482
- const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop$1, true);
482
+ const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
483
483
 
484
484
  let now;
485
485
  function clearTime() {
@@ -1429,7 +1429,7 @@
1429
1429
  for (let i = 0; i < numMixers; i++) {
1430
1430
  let mixer = mixerFactory(output[i], output[i + 1]);
1431
1431
  if (ease) {
1432
- const easingFunction = Array.isArray(ease) ? ease[i] || noop$1 : ease;
1432
+ const easingFunction = Array.isArray(ease) ? ease[i] || noop : ease;
1433
1433
  mixer = pipe(easingFunction, mixer);
1434
1434
  }
1435
1435
  mixers.push(mixer);
@@ -2491,7 +2491,7 @@
2491
2491
  this.animation.onfinish = null;
2492
2492
  if (timeline && supportsScrollTimeline()) {
2493
2493
  this.animation.timeline = timeline;
2494
- return noop$1;
2494
+ return noop;
2495
2495
  }
2496
2496
  else {
2497
2497
  return observe(this);
@@ -2783,7 +2783,7 @@
2783
2783
  : new JSAnimation(resolvedOptions);
2784
2784
  animation.finished.then(() => {
2785
2785
  this.notifyFinished();
2786
- }).catch(noop$1);
2786
+ }).catch(noop);
2787
2787
  if (this.pendingTimeline) {
2788
2788
  this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
2789
2789
  this.pendingTimeline = undefined;
@@ -5402,7 +5402,7 @@
5402
5402
  constructor(update, options = {}) {
5403
5403
  this.currentSubject = "root";
5404
5404
  this.targets = new Map();
5405
- this.notifyReady = noop$1;
5405
+ this.notifyReady = noop;
5406
5406
  this.readyPromise = new Promise((resolve) => {
5407
5407
  this.notifyReady = resolve;
5408
5408
  });
@@ -7457,7 +7457,7 @@
7457
7457
  : values.borderRadius;
7458
7458
  }
7459
7459
  const easeCrossfadeIn = /*@__PURE__*/ compress(0, 0.5, circOut);
7460
- const easeCrossfadeOut = /*@__PURE__*/ compress(0.5, 0.95, noop$1);
7460
+ const easeCrossfadeOut = /*@__PURE__*/ compress(0.5, 0.95, noop);
7461
7461
  function compress(min, max, easing) {
7462
7462
  return (p) => {
7463
7463
  // Could replace ifs with clamp
@@ -7575,13 +7575,6 @@
7575
7575
  const prevLead = this.lead;
7576
7576
  if (node === prevLead)
7577
7577
  return;
7578
- console.log("[projection] promote", {
7579
- layoutId: node.options.layoutId,
7580
- node: node.id,
7581
- prevLead: prevLead?.id,
7582
- prevLeadSnapshot: Boolean(prevLead?.snapshot),
7583
- prevLeadResumeFrom: Boolean(prevLead?.resumeFrom),
7584
- });
7585
7578
  this.prevLead = prevLead;
7586
7579
  this.lead = node;
7587
7580
  node.show();
@@ -7690,7 +7683,7 @@
7690
7683
  cancelTreeOptimisedTransformAnimations(parent);
7691
7684
  }
7692
7685
  }
7693
- function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
7686
+ function createProjectionNode$1({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
7694
7687
  return class ProjectionNode {
7695
7688
  constructor(latestValues = {}, parent = defaultParent?.()) {
7696
7689
  /**
@@ -9228,7 +9221,7 @@
9228
9221
  */
9229
9222
  const roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/")
9230
9223
  ? Math.round
9231
- : noop$1;
9224
+ : noop;
9232
9225
  function roundAxis(axis) {
9233
9226
  // Round to the nearest .5 pixels to support subpixel layouts
9234
9227
  axis.min = roundPoint(axis.min);
@@ -9247,7 +9240,7 @@
9247
9240
  return node !== node.root && node.scroll?.wasRoot;
9248
9241
  }
9249
9242
 
9250
- const DocumentProjectionNode = createProjectionNode({
9243
+ const DocumentProjectionNode = createProjectionNode$1({
9251
9244
  attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
9252
9245
  measureScroll: () => ({
9253
9246
  x: document.documentElement.scrollLeft || document.body.scrollLeft,
@@ -9282,7 +9275,7 @@
9282
9275
  const rootProjectionNode = {
9283
9276
  current: undefined,
9284
9277
  };
9285
- const HTMLProjectionNode = createProjectionNode({
9278
+ const HTMLProjectionNode = createProjectionNode$1({
9286
9279
  measureScroll: (instance) => ({
9287
9280
  x: instance.scrollLeft,
9288
9281
  y: instance.scrollTop,
@@ -9302,160 +9295,315 @@
9302
9295
  checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
9303
9296
  });
9304
9297
 
9305
- const layoutSelector = "[data-layout], [data-layout-id]";
9306
- const noop = () => { };
9307
- function snapshotFromTarget(projection) {
9308
- const target = projection.targetWithTransforms || projection.target;
9309
- if (!target)
9310
- return undefined;
9311
- const measuredBox = createBox();
9312
- const layoutBox = createBox();
9313
- copyBoxInto(measuredBox, target);
9314
- copyBoxInto(layoutBox, target);
9298
+ const LAYOUT_SELECTOR = "[data-layout], [data-layout-id]";
9299
+ function getLayoutElements(scope) {
9300
+ const elements = Array.from(scope.querySelectorAll(LAYOUT_SELECTOR));
9301
+ // Include scope itself if it's an Element (not Document) and has layout attributes
9302
+ if (scope instanceof Element && hasLayout(scope)) {
9303
+ elements.unshift(scope);
9304
+ }
9305
+ return elements;
9306
+ }
9307
+ function getLayoutId(element) {
9308
+ return element.getAttribute("data-layout-id");
9309
+ }
9310
+ function hasLayout(element) {
9311
+ return (element.hasAttribute("data-layout") ||
9312
+ element.hasAttribute("data-layout-id"));
9313
+ }
9314
+
9315
+ let scaleCorrectorAdded = false;
9316
+ /**
9317
+ * Track active projection nodes per element to handle animation interruption.
9318
+ * When a new animation starts on an element that already has an active animation,
9319
+ * we need to stop the old animation so the new one can start from the current
9320
+ * visual position.
9321
+ */
9322
+ const activeProjectionNodes = new WeakMap();
9323
+ function ensureScaleCorrectors() {
9324
+ if (scaleCorrectorAdded)
9325
+ return;
9326
+ scaleCorrectorAdded = true;
9327
+ addScaleCorrector({
9328
+ borderRadius: {
9329
+ ...correctBorderRadius,
9330
+ applyTo: [
9331
+ "borderTopLeftRadius",
9332
+ "borderTopRightRadius",
9333
+ "borderBottomLeftRadius",
9334
+ "borderBottomRightRadius",
9335
+ ],
9336
+ },
9337
+ borderTopLeftRadius: correctBorderRadius,
9338
+ borderTopRightRadius: correctBorderRadius,
9339
+ borderBottomLeftRadius: correctBorderRadius,
9340
+ borderBottomRightRadius: correctBorderRadius,
9341
+ boxShadow: correctBoxShadow,
9342
+ });
9343
+ }
9344
+ /**
9345
+ * Get DOM depth of an element
9346
+ */
9347
+ function getDepth(element) {
9348
+ let depth = 0;
9349
+ let current = element.parentElement;
9350
+ while (current) {
9351
+ depth++;
9352
+ current = current.parentElement;
9353
+ }
9354
+ return depth;
9355
+ }
9356
+ /**
9357
+ * Find the closest projection parent for an element
9358
+ */
9359
+ function findProjectionParent(element, nodeCache) {
9360
+ let parent = element.parentElement;
9361
+ while (parent) {
9362
+ const node = nodeCache.get(parent);
9363
+ if (node)
9364
+ return node;
9365
+ parent = parent.parentElement;
9366
+ }
9367
+ return undefined;
9368
+ }
9369
+ /**
9370
+ * Create or reuse a projection node for an element
9371
+ */
9372
+ function createProjectionNode(element, parent, options, transition) {
9373
+ // Check for existing active node - reuse it to preserve animation state
9374
+ const existingNode = activeProjectionNodes.get(element);
9375
+ if (existingNode) {
9376
+ const visualElement = existingNode.options.visualElement;
9377
+ // Update transition options for the new animation
9378
+ const nodeTransition = transition
9379
+ ? { duration: transition.duration, ease: transition.ease }
9380
+ : { duration: 0.3, ease: "easeOut" };
9381
+ existingNode.setOptions({
9382
+ ...existingNode.options,
9383
+ animate: true,
9384
+ transition: nodeTransition,
9385
+ ...options,
9386
+ });
9387
+ // Re-mount the node if it was previously unmounted
9388
+ // This re-adds it to root.nodes so didUpdate() will process it
9389
+ if (!existingNode.instance) {
9390
+ existingNode.mount(element);
9391
+ }
9392
+ return { node: existingNode, visualElement };
9393
+ }
9394
+ // No existing node - create a new one
9395
+ const latestValues = {};
9396
+ const visualElement = new HTMLVisualElement({
9397
+ visualState: {
9398
+ latestValues,
9399
+ renderState: {
9400
+ transformOrigin: {},
9401
+ transform: {},
9402
+ style: {},
9403
+ vars: {},
9404
+ },
9405
+ },
9406
+ presenceContext: null,
9407
+ props: {},
9408
+ });
9409
+ const node = new HTMLProjectionNode(latestValues, parent);
9410
+ // Convert AnimationOptions to transition format for the projection system
9411
+ const nodeTransition = transition
9412
+ ? { duration: transition.duration, ease: transition.ease }
9413
+ : { duration: 0.3, ease: "easeOut" };
9414
+ node.setOptions({
9415
+ visualElement,
9416
+ layout: true,
9417
+ animate: true,
9418
+ transition: nodeTransition,
9419
+ ...options,
9420
+ });
9421
+ node.mount(element);
9422
+ visualElement.projection = node;
9423
+ // Track this node as the active one for this element
9424
+ activeProjectionNodes.set(element, node);
9425
+ return { node, visualElement };
9426
+ }
9427
+ /**
9428
+ * Build a projection tree from a list of elements
9429
+ */
9430
+ function buildProjectionTree(elements, existingContext, options) {
9431
+ ensureScaleCorrectors();
9432
+ const nodes = existingContext?.nodes ?? new Map();
9433
+ const visualElements = existingContext?.visualElements ?? new Map();
9434
+ const group = existingContext?.group ?? nodeGroup();
9435
+ const defaultTransition = options?.defaultTransition;
9436
+ const sharedTransitions = options?.sharedTransitions;
9437
+ // Sort elements by DOM depth (parents before children)
9438
+ const sorted = [...elements].sort((a, b) => getDepth(a) - getDepth(b));
9439
+ let root = existingContext?.root;
9440
+ for (const element of sorted) {
9441
+ // Skip if already has a node
9442
+ if (nodes.has(element))
9443
+ continue;
9444
+ const parent = findProjectionParent(element, nodes);
9445
+ const layoutId = getLayoutId(element);
9446
+ const layoutMode = element.getAttribute("data-layout");
9447
+ const nodeOptions = {
9448
+ layoutId: layoutId ?? undefined,
9449
+ animationType: parseLayoutMode(layoutMode),
9450
+ };
9451
+ // Use layoutId-specific transition if available, otherwise use default
9452
+ const transition = layoutId && sharedTransitions?.get(layoutId)
9453
+ ? sharedTransitions.get(layoutId)
9454
+ : defaultTransition;
9455
+ const { node, visualElement } = createProjectionNode(element, parent, nodeOptions, transition);
9456
+ nodes.set(element, node);
9457
+ visualElements.set(element, visualElement);
9458
+ group.add(node);
9459
+ if (!root) {
9460
+ root = node.root;
9461
+ }
9462
+ }
9315
9463
  return {
9316
- animationId: projection.root?.animationId ?? 0,
9317
- measuredBox,
9318
- layoutBox,
9319
- latestValues: projection.animationValues || projection.latestValues || {},
9320
- source: projection.id,
9464
+ nodes,
9465
+ visualElements,
9466
+ group,
9467
+ root: root,
9321
9468
  };
9322
9469
  }
9470
+ /**
9471
+ * Parse the data-layout attribute value
9472
+ */
9473
+ function parseLayoutMode(value) {
9474
+ if (value === "position")
9475
+ return "position";
9476
+ if (value === "size")
9477
+ return "size";
9478
+ if (value === "preserve-aspect")
9479
+ return "preserve-aspect";
9480
+ return "both";
9481
+ }
9482
+ /**
9483
+ * Clean up projection nodes for specific elements.
9484
+ * If elementsToCleanup is provided, only those elements are cleaned up.
9485
+ * If not provided, all nodes are cleaned up.
9486
+ *
9487
+ * This allows persisting elements to keep their nodes between animations,
9488
+ * matching React's behavior where nodes persist for elements that remain in the DOM.
9489
+ */
9490
+ function cleanupProjectionTree(context, elementsToCleanup) {
9491
+ const elementsToProcess = elementsToCleanup
9492
+ ? [...context.nodes.entries()].filter(([el]) => elementsToCleanup.has(el))
9493
+ : [...context.nodes.entries()];
9494
+ for (const [element, node] of elementsToProcess) {
9495
+ context.group.remove(node);
9496
+ node.unmount();
9497
+ // Only clear from activeProjectionNodes if this is still the active node.
9498
+ // A newer animation might have already taken over.
9499
+ if (activeProjectionNodes.get(element) === node) {
9500
+ activeProjectionNodes.delete(element);
9501
+ }
9502
+ context.nodes.delete(element);
9503
+ context.visualElements.delete(element);
9504
+ }
9505
+ }
9506
+
9323
9507
  class LayoutAnimationBuilder {
9324
9508
  constructor(scope, updateDom, defaultOptions) {
9325
9509
  this.sharedTransitions = new Map();
9326
9510
  this.notifyReady = noop;
9327
- this.rejectReady = noop;
9511
+ this.executed = false;
9328
9512
  this.scope = scope;
9329
9513
  this.updateDom = updateDom;
9330
9514
  this.defaultOptions = defaultOptions;
9331
- this.readyPromise = new Promise((resolve, reject) => {
9515
+ this.readyPromise = new Promise((resolve) => {
9332
9516
  this.notifyReady = resolve;
9333
- this.rejectReady = reject;
9334
- });
9335
- frame.postRender(() => {
9336
- this.start().then(this.notifyReady).catch(this.rejectReady);
9337
9517
  });
9518
+ // Queue execution on microtask to allow builder methods to be called
9519
+ queueMicrotask(() => this.execute());
9338
9520
  }
9339
- shared(id, transition) {
9340
- this.sharedTransitions.set(id, transition);
9521
+ shared(id, options) {
9522
+ this.sharedTransitions.set(id, options);
9341
9523
  return this;
9342
9524
  }
9343
- then(resolve, reject) {
9344
- return this.readyPromise.then(resolve, reject);
9525
+ then(onfulfilled, onrejected) {
9526
+ return this.readyPromise.then(onfulfilled, onrejected);
9345
9527
  }
9346
- async start() {
9347
- const beforeElements = collectLayoutElements(this.scope);
9348
- const beforeRecords = this.buildRecords(beforeElements);
9349
- const exitCandidates = collectExitCandidates(beforeRecords);
9350
- beforeRecords.forEach(({ projection }) => {
9351
- const hasCurrentAnimation = Boolean(projection.currentAnimation);
9352
- const isSharedLayout = Boolean(projection.options.layoutId);
9353
- if (hasCurrentAnimation && isSharedLayout) {
9354
- const snapshot = snapshotFromTarget(projection);
9355
- if (snapshot) {
9356
- projection.snapshot = snapshot;
9357
- }
9358
- else if (projection.snapshot) {
9359
- projection.snapshot = undefined;
9360
- }
9361
- }
9362
- else if (projection.snapshot &&
9363
- (projection.currentAnimation || projection.isProjecting())) {
9364
- projection.snapshot = undefined;
9365
- }
9366
- projection.isPresent = true;
9367
- projection.willUpdate();
9368
- });
9369
- await this.updateDom();
9370
- const afterElements = collectLayoutElements(this.scope);
9371
- const afterRecords = this.buildRecords(afterElements);
9372
- const exitRecords = this.handleExitingElements(beforeRecords, afterRecords, exitCandidates);
9373
- afterRecords.forEach(({ projection }) => {
9374
- const instance = projection.instance;
9375
- const resumeFromInstance = projection.resumeFrom
9376
- ?.instance;
9377
- if (!instance || !resumeFromInstance)
9378
- return;
9379
- if (!("style" in instance))
9380
- return;
9381
- const currentTransform = instance.style.transform;
9382
- const resumeFromTransform = resumeFromInstance.style.transform;
9383
- if (currentTransform &&
9384
- resumeFromTransform &&
9385
- currentTransform === resumeFromTransform) {
9386
- instance.style.transform = "";
9387
- instance.style.transformOrigin = "";
9388
- }
9389
- });
9390
- afterRecords.forEach(({ projection }) => {
9391
- projection.isPresent = true;
9392
- });
9393
- const root = getProjectionRoot(afterRecords, beforeRecords);
9394
- root?.didUpdate();
9395
- await new Promise((resolve) => {
9396
- frame.postRender(() => resolve());
9397
- });
9398
- const animations = collectAnimations(afterRecords, exitRecords);
9399
- const animation = new GroupAnimation(animations);
9400
- if (exitRecords.length) {
9401
- const cleanup = () => {
9402
- exitRecords.forEach(({ element, visualElement }) => {
9403
- if (element.isConnected) {
9404
- element.remove();
9405
- }
9406
- visualElement.unmount();
9407
- visualElementStore.delete(element);
9408
- });
9409
- };
9410
- animation.finished.then(cleanup, cleanup);
9528
+ async execute() {
9529
+ if (this.executed)
9530
+ return;
9531
+ this.executed = true;
9532
+ let context;
9533
+ // Phase 1: Pre-mutation - Build projection tree and take snapshots
9534
+ const beforeElements = getLayoutElements(this.scope);
9535
+ if (beforeElements.length > 0) {
9536
+ context = buildProjectionTree(beforeElements, undefined, this.getBuildOptions());
9537
+ context.root.startUpdate();
9538
+ for (const node of context.nodes.values()) {
9539
+ node.isLayoutDirty = false;
9540
+ node.willUpdate();
9541
+ }
9542
+ }
9543
+ // Phase 2: Execute DOM update
9544
+ this.updateDom();
9545
+ // Phase 3: Post-mutation - Compare before/after elements
9546
+ const afterElements = getLayoutElements(this.scope);
9547
+ const beforeSet = new Set(beforeElements);
9548
+ const afterSet = new Set(afterElements);
9549
+ const entering = afterElements.filter((el) => !beforeSet.has(el));
9550
+ const exiting = beforeElements.filter((el) => !afterSet.has(el));
9551
+ // Build projection nodes for entering elements
9552
+ if (entering.length > 0) {
9553
+ context = buildProjectionTree(entering, context, this.getBuildOptions());
9554
+ }
9555
+ // No layout elements - return empty animation
9556
+ if (!context) {
9557
+ this.notifyReady(new GroupAnimation([]));
9558
+ return;
9411
9559
  }
9412
- return animation;
9413
- }
9414
- buildRecords(elements) {
9415
- const records = [];
9416
- const recordMap = new Map();
9417
- for (const element of elements) {
9418
- const parentRecord = findParentRecord(element, recordMap, this.scope);
9419
- const { layout, layoutId } = readLayoutAttributes(element);
9420
- const override = layoutId
9421
- ? this.sharedTransitions.get(layoutId)
9422
- : undefined;
9423
- const transition = override || this.defaultOptions;
9424
- const record = getOrCreateRecord(element, parentRecord?.projection, {
9425
- layout,
9426
- layoutId,
9427
- animationType: typeof layout === "string" ? layout : "both",
9428
- transition: transition,
9429
- });
9430
- recordMap.set(element, record);
9431
- records.push(record);
9560
+ // Handle shared elements
9561
+ for (const element of exiting) {
9562
+ const node = context.nodes.get(element);
9563
+ node?.getStack()?.remove(node);
9432
9564
  }
9433
- return records;
9434
- }
9435
- handleExitingElements(beforeRecords, afterRecords, exitCandidates) {
9436
- const afterElementsSet = new Set(afterRecords.map((record) => record.element));
9437
- const exiting = [];
9438
- beforeRecords.forEach((record) => {
9439
- if (afterElementsSet.has(record.element))
9440
- return;
9441
- const exitRecord = exitCandidates.get(record.element);
9442
- if (!exitRecord) {
9443
- record.visualElement.unmount();
9444
- visualElementStore.delete(record.element);
9445
- return;
9446
- }
9447
- if (!exitRecord.element.isConnected) {
9448
- reinstateExitElement(exitRecord);
9449
- }
9450
- record.projection.isPresent = false;
9451
- if (record.projection.options.layoutId) {
9452
- record.projection.relegate();
9565
+ for (const element of entering) {
9566
+ context.nodes.get(element)?.promote();
9567
+ }
9568
+ // Phase 4: Animate
9569
+ context.root.didUpdate();
9570
+ await new Promise((resolve) => frame.postRender(() => resolve()));
9571
+ const animations = [];
9572
+ for (const node of context.nodes.values()) {
9573
+ if (node.currentAnimation) {
9574
+ animations.push(node.currentAnimation);
9575
+ }
9576
+ }
9577
+ const groupAnimation = new GroupAnimation(animations);
9578
+ groupAnimation.finished.then(() => {
9579
+ // Only clean up nodes for elements no longer in the document.
9580
+ // Elements still in DOM keep their nodes so subsequent animations
9581
+ // can use the stored position snapshots (A→B→A pattern).
9582
+ const elementsToCleanup = new Set();
9583
+ for (const element of context.nodes.keys()) {
9584
+ if (!document.contains(element)) {
9585
+ elementsToCleanup.add(element);
9586
+ }
9453
9587
  }
9454
- exiting.push(record);
9588
+ cleanupProjectionTree(context, elementsToCleanup);
9455
9589
  });
9456
- return exiting;
9590
+ this.notifyReady(groupAnimation);
9591
+ }
9592
+ getBuildOptions() {
9593
+ return {
9594
+ defaultTransition: this.defaultOptions || {
9595
+ duration: 0.3,
9596
+ ease: "easeOut",
9597
+ },
9598
+ sharedTransitions: this.sharedTransitions.size > 0
9599
+ ? this.sharedTransitions
9600
+ : undefined,
9601
+ };
9457
9602
  }
9458
9603
  }
9604
+ /**
9605
+ * Parse arguments for animateLayout overloads
9606
+ */
9459
9607
  function parseAnimateLayoutArgs(scopeOrUpdateDom, updateDomOrOptions, options) {
9460
9608
  // animateLayout(updateDom)
9461
9609
  if (typeof scopeOrUpdateDom === "function") {
@@ -9469,125 +9617,11 @@
9469
9617
  const elements = resolveElements(scopeOrUpdateDom);
9470
9618
  const scope = elements[0] || document;
9471
9619
  return {
9472
- scope,
9620
+ scope: scope instanceof Document ? scope : scope,
9473
9621
  updateDom: updateDomOrOptions,
9474
9622
  defaultOptions: options,
9475
9623
  };
9476
9624
  }
9477
- function collectLayoutElements(scope) {
9478
- const elements = Array.from(scope.querySelectorAll(layoutSelector));
9479
- if (scope instanceof Element && scope.matches(layoutSelector)) {
9480
- if (!elements.includes(scope)) {
9481
- elements.unshift(scope);
9482
- }
9483
- }
9484
- return elements;
9485
- }
9486
- function readLayoutAttributes(element) {
9487
- const layoutId = element.getAttribute("data-layout-id") || undefined;
9488
- const rawLayout = element.getAttribute("data-layout");
9489
- let layout;
9490
- if (rawLayout === "" || rawLayout === "true") {
9491
- layout = true;
9492
- }
9493
- else if (rawLayout) {
9494
- layout = rawLayout;
9495
- }
9496
- return {
9497
- layout,
9498
- layoutId,
9499
- layoutExit: element.hasAttribute("data-layout-exit"),
9500
- };
9501
- }
9502
- function createVisualState() {
9503
- return {
9504
- latestValues: {},
9505
- renderState: {
9506
- transform: {},
9507
- transformOrigin: {},
9508
- style: {},
9509
- vars: {},
9510
- },
9511
- };
9512
- }
9513
- function getOrCreateRecord(element, parentProjection, projectionOptions) {
9514
- const existing = visualElementStore.get(element);
9515
- const visualElement = existing ??
9516
- new HTMLVisualElement({
9517
- props: {},
9518
- presenceContext: null,
9519
- visualState: createVisualState(),
9520
- }, { allowProjection: true });
9521
- if (!existing || !visualElement.projection) {
9522
- visualElement.projection = new HTMLProjectionNode(visualElement.latestValues, parentProjection);
9523
- }
9524
- visualElement.projection.setOptions({
9525
- ...projectionOptions,
9526
- visualElement,
9527
- });
9528
- if (!visualElement.current) {
9529
- visualElement.mount(element);
9530
- }
9531
- if (!existing) {
9532
- visualElementStore.set(element, visualElement);
9533
- }
9534
- return {
9535
- element,
9536
- visualElement,
9537
- projection: visualElement.projection,
9538
- };
9539
- }
9540
- function findParentRecord(element, recordMap, scope) {
9541
- let parent = element.parentElement;
9542
- while (parent) {
9543
- const record = recordMap.get(parent);
9544
- if (record)
9545
- return record;
9546
- if (parent === scope)
9547
- break;
9548
- parent = parent.parentElement;
9549
- }
9550
- return undefined;
9551
- }
9552
- function collectExitCandidates(records) {
9553
- const exitCandidates = new Map();
9554
- records.forEach((record) => {
9555
- const { layoutExit } = readLayoutAttributes(record.element);
9556
- if (!layoutExit)
9557
- return;
9558
- exitCandidates.set(record.element, {
9559
- ...record,
9560
- parent: record.element.parentNode,
9561
- nextSibling: record.element.nextSibling,
9562
- });
9563
- });
9564
- return exitCandidates;
9565
- }
9566
- function reinstateExitElement(record) {
9567
- if (!record.parent)
9568
- return;
9569
- if (record.nextSibling && record.nextSibling.parentNode === record.parent) {
9570
- record.parent.insertBefore(record.element, record.nextSibling);
9571
- }
9572
- else {
9573
- record.parent.appendChild(record.element);
9574
- }
9575
- }
9576
- function getProjectionRoot(afterRecords, beforeRecords) {
9577
- const record = afterRecords[0] || beforeRecords[0];
9578
- return record?.projection.root;
9579
- }
9580
- function collectAnimations(afterRecords, exitRecords) {
9581
- const animations = new Set();
9582
- const addAnimation = (record) => {
9583
- const animation = record.projection.currentAnimation;
9584
- if (animation)
9585
- animations.add(animation);
9586
- };
9587
- afterRecords.forEach(addAnimation);
9588
- exitRecords.forEach(addAnimation);
9589
- return Array.from(animations);
9590
- }
9591
9625
 
9592
9626
  /**
9593
9627
  * @deprecated
@@ -10481,7 +10515,7 @@
10481
10515
  const getEventTarget = (element) => element === document.scrollingElement ? window : element;
10482
10516
  function scrollInfo(onScroll, { container = document.scrollingElement, ...options } = {}) {
10483
10517
  if (!container)
10484
- return noop$1;
10518
+ return noop;
10485
10519
  let containerHandlers = onScrollHandlers.get(container);
10486
10520
  /**
10487
10521
  * Get the onScroll handlers for this container.
@@ -10609,7 +10643,7 @@
10609
10643
 
10610
10644
  function scroll(onScroll, { axis = "y", container = document.scrollingElement, ...options } = {}) {
10611
10645
  if (!container)
10612
- return noop$1;
10646
+ return noop;
10613
10647
  const optionsWithDefaults = { axis, container, ...options };
10614
10648
  return typeof onScroll === "function"
10615
10649
  ? attachToFunction(onScroll, optionsWithDefaults)
@@ -10770,7 +10804,7 @@
10770
10804
  exports.createBox = createBox;
10771
10805
  exports.createDelta = createDelta;
10772
10806
  exports.createGeneratorEasing = createGeneratorEasing;
10773
- exports.createProjectionNode = createProjectionNode;
10807
+ exports.createProjectionNode = createProjectionNode$1;
10774
10808
  exports.createRenderBatcher = createRenderBatcher;
10775
10809
  exports.createScopedAnimate = createScopedAnimate;
10776
10810
  exports.cubicBezier = cubicBezier;
@@ -10884,7 +10918,7 @@
10884
10918
  exports.motionValue = motionValue;
10885
10919
  exports.moveItem = moveItem;
10886
10920
  exports.nodeGroup = nodeGroup;
10887
- exports.noop = noop$1;
10921
+ exports.noop = noop;
10888
10922
  exports.number = number;
10889
10923
  exports.numberValueTypes = numberValueTypes;
10890
10924
  exports.observeTimeline = observeTimeline;