@cardstack/boxel-cli 0.13.0-unstable.5 → 0.13.0-unstable.6

package/bundled-types/choreo/run.ts

@@ -78,6 +78,15 @@ const loopKey = (cue: Cue) =>
     .sort()
     .join(',');
 
+/** where releaseForMeasure stands a transform a tween is carrying */
+const TRANSFORM_REST: Record<string, PropValue> = {
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  x: 0,
+  y: 0,
+};
+
 /** a tween a replacement pass carries on: see Run.midfade */
 export interface Fade {
   /** score ms until it starts (0 when it is already running) */
@@ -147,6 +156,8 @@ export interface Run {
   reassert(): void;
   /** put every element this run has touched back to its resting layout NOW */
   releaseForMeasure(): void;
+  /** stand back up rested tween values the replacement drives itself (see ChoreoRun.restoreRested) */
+  restoreRested(drives: (ve: VisualElement, key: string) => boolean): void;
   /**
    * One build backwards — Keynote's rule. Land PARKED at the previous
    * gate with everything ahead re-closed, and HOLD: a retreat never
@@ -495,7 +506,9 @@ export class ChoreoRun implements Run {
       value: unknown;
       ve: VisualElement;
     }[];
-  } = { borrowed: [], moved: [] };
+    /** transforms in-flight tweens carry, rested for the measure */
+    tweened: { key: string; value: unknown; ve: VisualElement }[];
+  } = { borrowed: [], moved: [], tweened: [] };
   private owned: { el: HTMLElement; key: string; ve: VisualElement }[] = [];
   private cancelled = false;
   private ended = false;
@@ -2965,7 +2978,7 @@ export class ChoreoRun implements Run {
       this.dropCameraAnimation(t);
     }
     const touched = new Set<VisualElement>();
-    this.retired = { borrowed: [], moved: [] };
+    this.retired = { borrowed: [], moved: [], tweened: [] };
     for (const { ve, el, key, prior } of this.borrowedValues.splice(0)) {
       this.retired.borrowed.push({
         el,
@@ -2992,6 +3005,63 @@ export class ChoreoRun implements Run {
       ve.getValue(key)?.jump(rest ?? 0);
       touched.add(ve);
     }
+    // A transform a tween or spring is still carrying (an entrance's scale,
+    // a slide's y) is part of the picture, not of the layout: measured with
+    // it on, the final box would be the one it paints mid-way, and a move
+    // the next score plays from it would land short and snap. So it rests
+    // for the measurement too. A kept run stands it back up (reassert); a
+    // replacement either moves the sprite from its painted box, carries it
+    // on to rest (the region's continuity cues), or, when a new tween drives
+    // the same value, stands it back up for that tween to carry on from
+    // (restoreRested). A cancelled run is past measuring: its values stay
+    // where they are painted for whatever takes them over.
+    const now = this.master;
+    const rested = new Set<string>();
+    for (const t of this.cancelled ? [] : this.tracks) {
+      const { cue } = t;
+      const ve = cue.sprite.node.visualElement;
+      if (
+        !ve ||
+        t.passed ||
+        t.end <= now ||
+        cue.loop ||
+        (cue.kind !== 'tween' && cue.kind !== 'spring') ||
+        !cue.target
+      ) {
+        continue;
+      }
+      for (const key of Object.keys(cue.target)) {
+        const rest = TRANSFORM_REST[key];
+        const seen = `${cue.sprite.node.layoutKey}:${key}`;
+        if (rest === undefined || rested.has(seen) || !ve.hasValue(key)) {
+          continue;
+        }
+        rested.add(seen);
+        const value = ve.getValue(key)!;
+        this.retired.tweened.push({ key, value: value.get(), ve });
+        value.jump(rest);
+        touched.add(ve);
+      }
+    }
+    touched.forEach((ve) => ve.render());
+  }
+
+  /**
+   * Stand back up the in-flight tween values the last measure rested, where
+   * the replacement score drives the same value with a tween or spring of
+   * its own: that tween starts from the value on the element, which has to
+   * be the one painted, not its rest. Values nothing new drives stay
+   * rested, for a continuation to carry on (restoring those too would
+   * compound a continuation's scaleX/scaleY with a restored scale).
+   */
+  restoreRested(drives: (ve: VisualElement, key: string) => boolean) {
+    const touched = new Set<VisualElement>();
+    for (const { key, value, ve } of this.retired.tweened) {
+      if (value !== undefined && drives(ve, key)) {
+        ve.getValue(key)?.jump(value as PropValue);
+        touched.add(ve);
+      }
+    }
     touched.forEach((ve) => ve.render());
   }
 
@@ -3011,8 +3081,14 @@ export class ChoreoRun implements Run {
    * run's own clock, so a keep is invisible rather than a restart.
    */
   reassert() {
-    const { borrowed, moved } = this.retired;
-    this.retired = { borrowed: [], moved: [] };
+    const { borrowed, moved, tweened } = this.retired;
+    this.retired = { borrowed: [], moved: [], tweened: [] };
+    // first, so a value a move also writes ends on the move's own
+    for (const { key, value, ve } of tweened) {
+      if (value !== undefined) {
+        ve.getValue(key)?.jump(value as PropValue);
+      }
+    }
     for (const { el, key, prior, value, ve } of borrowed) {
       if (value !== undefined) {
         ve.getValue(key, value as PropValue)!.jump(value as PropValue);

package/bundled-types/host-app/components/operator-mode/motion/stack-motion.gts

@@ -1,4 +1,3 @@
-import { array } from '@ember/helper';
 import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 
@@ -72,28 +71,85 @@ const reducesMotion = () =>
   typeof matchMedia === 'function' &&
   matchMedia('(prefers-reduced-motion: reduce)').matches;
 
-// How small a card starts as it scales in. Text and card content should not
-// scale in motion (§1.5), so it starts near its full size and the fade
-// carries the entrance. The slight growth is what says the card arrives on
-// top of the stack, over the cards under it, where a rise would read as
-// arriving from below.
-const SCALE_FROM = 0.96;
+// Every positional value here is ONE transform string, never separate x, y
+// or scale values and never a size: a whole transform keyframe pair rides
+// the platform's own animation (WAAPI, off the main thread), where separate
+// values and sizes are written by script every frame and a size re-lays out
+// the card's content each time. That is what keeps the stack smooth while
+// the card under the motion is still rendering.
 
-const scaleInOnTop: PropSource = (sprite, changeset) =>
-  isTopCard(sprite, changeset) ? [SCALE_FROM, 1] : [1, 1];
+/** the translation a card is painted with right now, mid-flight or at rest */
+const paintedTranslation = (sprite: Sprite) => {
+  const matrix = new DOMMatrixReadOnly(
+    getComputedStyle(sprite.element).transform,
+  );
+  return { x: matrix.m41, y: matrix.m42 };
+};
+
+const STILL = ['none', 'none'];
+
+// An opened card lifts into place from just below it as it fades in. Text
+// and card content should not scale in motion (§1.5), so the entrance moves
+// it, a short distance, and the fade carries the arrival.
+const LIFT = 24;
+const liftInOnTop: PropSource = (sprite, changeset) =>
+  isTopCard(sprite, changeset) && !reducesMotion()
+    ? [`translate(0px, ${LIFT}px)`, 'none']
+    : STILL;
 const fadeInOnTop: PropSource = (sprite, changeset) =>
   isTopCard(sprite, changeset) ? [0, 1] : [1, 1];
-// A phone card slides up from below the viewport: its own height.
+// A phone card slides up from below the viewport: its own height. Under
+// reduced motion it fades in where it stands instead.
 const slideUpOnTop: PropSource = (sprite, changeset) =>
-  isTopCard(sprite, changeset) ? [sprite.final?.page.height ?? 0, 0] : [0, 0];
-// Under reduced motion the slide lands at once, so a phone card fades in
-// where it stands instead.
+  isTopCard(sprite, changeset) && !reducesMotion()
+    ? [`translate(0px, ${sprite.final?.page.height ?? 0}px)`, 'none']
+    : STILL;
 const fadeInOnTopWhenReduced: PropSource = (sprite, changeset) =>
   reducesMotion() ? fadeInOnTop(sprite, changeset) : [1, 1];
-// A leaving card sinks by its own height as it fades; under reduced motion
-// it fades where it stood.
-const sinkOut: PropSource = (sprite) =>
-  reducesMotion() ? [0, 0] : [0, sprite.initial?.page.height ?? 0];
+
+// A leaving card drops a little below where it is painted as it fades, so
+// a card closed mid-glide drops from where it is, not to a fixed place. It
+// eases in, as a leaving element should (ADR 007 §1.5). Under reduced
+// motion it fades where it stood.
+const DROP = 18;
+const dropOut: PropSource = (sprite) => {
+  const { x, y } = paintedTranslation(sprite);
+  const from = `translate(${x}px, ${y}px)`;
+  return reducesMotion()
+    ? [from, from]
+    : [from, `translate(${x}px, ${y + DROP}px)`];
+};
+
+/**
+ * A card whose place changed (covered, uncovered, expanded) glides from the
+ * center it was painted at to its new one, by transform alone. Its size
+ * lands at once: the card is laid out once at its new width, and only
+ * travels, so its content never re-lays out frame by frame. Center to
+ * center, because the stack centers its cards: a card that narrows stays
+ * under its own middle. Measured against the painted translation, so a
+ * card caught mid-flight (or measured with its transform still on) carries
+ * on from where it is seen.
+ *
+ * Under reduced motion it lands at once. The region's reduced motion lands
+ * only the separate positional values (x, y, scale, width, height); a whole
+ * transform string is not one of them, so this value has to stand still
+ * itself, as the entrance and the exit do.
+ */
+const reflow: PropSource = (sprite, changeset) => {
+  const from = sprite.initial?.page;
+  const to = sprite.final?.page;
+  if (!from || !to || reducesMotion()) {
+    return STILL;
+  }
+  const painted = paintedTranslation(sprite);
+  const zoom = changeset.measureZoom || 1;
+  const x =
+    painted.x + (from.x + from.width / 2 - (to.x + to.width / 2)) / zoom;
+  const y = painted.y + (from.y - to.y) / zoom;
+  return Math.abs(x) < 0.5 && Math.abs(y) < 0.5
+    ? STILL
+    : [`translate(${x}px, ${y}px)`, 'none'];
+};
 
 // How long a phone card stays in view under a card opening over it, read by
 // the stylesheet as a transition delay (see stack-item.gts). The slide runs
@@ -120,17 +176,19 @@ interface Signature {
  * 300–500 ms), and the cards under it move on the same clock, so the stack
  * reads as one change.
  *
- * - the inserted top card scales in and fades in, easing out; on a phone it
- *   slides up from below the viewport instead;
- * - a departing card fades and sinks, easing in over the exit duration;
- * - a card whose box changed (uncovered, covered, or expanded) moves by
- *   transform to its new place. Its width and height animate as layout, not
- *   by scale, so its text is never scaled (§1.5); the frame reflows under
- *   the card's content, the way a width transition does.
+ * - the inserted top card lifts into place and fades in, easing out; on a
+ *   phone it slides up from below the viewport instead;
+ * - a departing card fades and drops a little, over the exit duration;
+ * - a card whose box changed (uncovered, covered, or expanded) takes its
+ *   new size at once and glides by transform from the center it was painted
+ *   at to its new one, so its content is laid out once and only travels.
+ *   A fade the card was still playing (an entrance cut short) is carried on
+ *   by the region itself, so this step names only the transform.
  *
- * Under reduced motion the region's MotionConfig ('user') lands every move
- * at once, and a card fades in or out where it stands, on a phone as on a
- * wide screen (§1.5).
+ * Under reduced motion every move lands at once, and a card fades in or out
+ * where it stands, on a phone as on a wide screen (§1.5). Each transform
+ * value here checks for it itself: the region's MotionConfig ('user') lands
+ * separate positional values, never a whole transform string.
  */
 export default class StackMotion extends Component<Signature> {
   private enabled = motionEnabled('boxel-stack-motion');
@@ -148,7 +206,7 @@ export default class StackMotion extends Component<Signature> {
           {{#if @phone}}
             <c.Tween
               @of={{c.inserted STACK_ITEM_ROLE}}
-              @y={{slideUpOnTop}}
+              @transform={{slideUpOnTop}}
               @opacity={{fadeInOnTopWhenReduced}}
               @duration={{DURATION.space}}
               @ease={{EASE}}
@@ -156,7 +214,7 @@ export default class StackMotion extends Component<Signature> {
           {{else}}
             <c.Tween
               @of={{c.inserted STACK_ITEM_ROLE}}
-              @scale={{scaleInOnTop}}
+              @transform={{liftInOnTop}}
               @opacity={{fadeInOnTop}}
               @duration={{DURATION.space}}
               @ease={{EASE}}
@@ -164,13 +222,14 @@ export default class StackMotion extends Component<Signature> {
           {{/if}}
           <c.Tween
             @of={{DEPARTED}}
-            @opacity={{array 1 0}}
-            @y={{sinkOut}}
+            @opacity={{0}}
+            @transform={{dropOut}}
             @duration={{DURATION.exit}}
             @ease={{EASE_IN}}
           />
-          <c.Move
-            @of={{c.moved STACK_ITEM_ROLE}}
+          <c.Tween
+            @of={{c.kept STACK_ITEM_ROLE}}
+            @transform={{reflow}}
             @duration={{DURATION.space}}
             @ease={{EASE}}
           />

package/bundled-types/host-app/components/operator-mode/stack-item.gts

@@ -1033,7 +1033,7 @@ export default class OperatorModeStackItem extends Component<Signature> {
         justify-self: center;
         position: absolute;
         width: 89%;
-        height: inherit;
+        height: 100%;
         z-index: 0;
         pointer-events: none;
       }
@@ -1114,7 +1114,7 @@ export default class OperatorModeStackItem extends Component<Signature> {
       /* When the top card is expanded, fade out the underlying
          buried cards so the user isn't visually distracted by the
          stack history behind the expanded surface. Sibling selector
-         within .operator-mode-stack > .inner; uses :has() to match
+         within the stack's cards wrapper (.stack-cards); uses :has() to match
          buried items that have an expanded sibling AFTER them in the
          DOM (top card = last in DOM order). */
       .item:not(.expanded, .phone-layout):has(~ .item.expanded) {

package/bundled-types/host-app/components/operator-mode/stack.gts

@@ -77,31 +77,38 @@ export default class OperatorModeStack extends Component<Signature> {
   };
 
   <template>
-    <div
-      class={{cn
-        'operator-mode-stack'
-        stack-medium-padding-top=(eq @stackItems.length 2)
-        stack-small-padding-top=(gte @stackItems.length 3)
-      }}
-      ...attributes
-    >
+    <div class='operator-mode-stack' ...attributes>
       {{! the stack's motion region: its cards are the participants (motion/stack-motion.gts) }}
       <StackMotion
         class='inner'
         @phone={{this.operatorModeStateService.isMobileViewport}}
       >
-        {{#each @stackItems as |item i|}}
-          <OperatorModeStackItem
-            @item={{item}}
-            @index={{i}}
-            @stackItems={{@stackItems}}
-            @toolContext={{@toolContext}}
-            @dismissStackedCardsAbove={{this.dismissStackedCardsAbove}}
-            @requestDeleteCard={{@deleteCard}}
-            @close={{@close}}
-            @setupStackItem={{@setupStackItem}}
-          />
-        {{/each}}
+        {{! The cards' top padding follows how many cards stand in the stack,
+        so it is set here, inside the region: the region measures the cards
+        before a render patches anything inside it, and a padding set
+        outside it would already have changed by then, so a card would jump
+        by the difference instead of moving. }}
+        <div
+          class={{cn
+            'stack-cards'
+            stack-medium-padding-top=(eq @stackItems.length 2)
+            stack-small-padding-top=(gte @stackItems.length 3)
+          }}
+          data-test-stack-cards
+        >
+          {{#each @stackItems as |item i|}}
+            <OperatorModeStackItem
+              @item={{item}}
+              @index={{i}}
+              @stackItems={{@stackItems}}
+              @toolContext={{@toolContext}}
+              @dismissStackedCardsAbove={{this.dismissStackedCardsAbove}}
+              @requestDeleteCard={{@deleteCard}}
+              @close={{@close}}
+              @setupStackItem={{@setupStackItem}}
+            />
+          {{/each}}
+        </div>
       </StackMotion>
     </div>
 
@@ -124,7 +131,6 @@ export default class OperatorModeStack extends Component<Signature> {
         width: 100%;
         background-position: center;
         background-size: cover;
-        padding-top: var(--stack-padding-top);
         padding-inline: var(--stack-padding-inline);
         padding-bottom: var(--stack-padding-bottom);
         z-index: 0;
@@ -132,13 +138,13 @@ export default class OperatorModeStack extends Component<Signature> {
       /* The padding follows the cards standing in the stack: a leaving card
          is kept in the region's orphan layer while it fades, and must not
          hold the padding it had */
-      .stack-medium-padding-top:not(:has(> .inner > .item.expanded)) {
+      .stack-medium-padding-top:not(:has(> .item.expanded)) {
         --stack-padding-top: var(--stack-md-padding-top);
       }
-      .stack-small-padding-top:not(:has(> .inner > .item.expanded)) {
+      .stack-small-padding-top:not(:has(> .item.expanded)) {
         --stack-padding-top: var(--stack-sm-padding-top);
       }
-      .operator-mode-stack:has(> .inner > .item.expanded) {
+      .operator-mode-stack:has(> .inner > .stack-cards > .item.expanded) {
         --stack-padding-inline: 0;
         --stack-padding-bottom: 0;
       }
@@ -153,9 +159,14 @@ export default class OperatorModeStack extends Component<Signature> {
         width: 100%;
         height: 100%;
         position: relative;
+        margin: 0 auto;
+      }
+      .stack-cards {
+        position: relative;
+        height: calc(100% - var(--stack-padding-top));
+        margin-top: var(--stack-padding-top);
         display: flex;
         justify-content: center;
-        margin: 0 auto;
         border-bottom-left-radius: var(--boxel-border-radius);
         border-bottom-right-radius: var(--boxel-border-radius);
       }

package/bundled-types/host-app/components/operator-mode/submode-layout.gts

@@ -710,8 +710,8 @@ export default class SubmodeLayout extends Component<Signature> {
         max-width: 100%;
         container-type: inline-size;
         /* Lock outer box to exactly var(--stack-padding-top) — the
-           same value .operator-mode-stack uses for its padding-top
-           offset. Any content the bar contains (workspace button,
+           same value the stack's cards wrapper (.stack-cards in
+           stack.gts) uses for its top margin. Any content the bar contains (workspace button,
            submode switcher, portaled expanded-card-header pill,
            etc.) renders WITHIN this fixed height; nothing the slot
            contents do can push the bar taller. This is what lets

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardstack/boxel-cli",
-  "version": "0.13.0-unstable.5",
+  "version": "0.13.0-unstable.6",
   "license": "MIT",
   "description": "CLI tools for Boxel workspace management",
   "main": "./dist/index.js",

package/bundled-test-harness/assets/choreo-Ci5dG5fv.js

@@ -1,2 +0,0 @@
-import { t as Choreo } from "./choreo-D1K9RyjM.js";
-export { Choreo, Choreo as default };

package/bundled-test-harness/assets/clip-CycGr0Lf.js

@@ -1,2 +0,0 @@
-import { t as Clip } from "./clip-CsRtHZiN.js";
-export { Clip };

package/bundled-test-harness/assets/film-D25Y0ED6.js

@@ -1,2 +0,0 @@
-import { r as TICK, t as Film } from "./film-D97U-ydx.js";
-export { Film, TICK };

package/bundled-test-harness/assets/plate-DeoQd99m.js

@@ -1,2 +0,0 @@
-import { t as Plate } from "./plate-DAr_pvwC.js";
-export { Plate };

package/bundled-test-harness/assets/player-BvXGBItd.js

@@ -1,2 +0,0 @@
-import { n as Menu, r as Player, t as Burst } from "./player-CAVQUyKk.js";
-export { Burst, Menu, Player };

package/bundled-test-harness/assets/titles-DKHNLVwC.js

@@ -1,2 +0,0 @@
-import { n as Gate, t as EndCard } from "./titles-0a1luoTq.js";
-export { EndCard, Gate };