@cardstack/boxel-cli 0.11.0-unstable.1 → 0.11.0-unstable.3

package/bundled-types/choreo/choreo.gts

@@ -206,6 +206,35 @@ interface Signature {
     /** outline the region and its participants; console.table each run */
     debug?: boolean;
     id?: string;
+    /**
+     * Sit this region out of render passes: while true it takes no snapshot
+     * and joins no barrier, so it plays nothing and costs nothing, and its
+     * participants stay registered and its block stays rendered. A page with
+     * many regions of which few can change at once (a message per region in
+     * a long transcript) keeps the rest idle; the pass that sets it back to
+     * false is the first one the region watches again.
+     */
+    idle?: boolean;
+    /**
+     * Wire only what can be seen: the region measures and animates only the
+     * participants inside its scroller's view, or close enough to it
+     * (`@inViewMargin` views beyond each edge, default 1) that a move may
+     * bring them on screen. The rest are left to layout: no snapshot, no
+     * measuring, no motion. A participant coming within the margin is wired
+     * and one leaving it unwired, and neither counts as an arrival or a
+     * removal. A pass that moves something farther than the margin is a
+     * jump, not a change, and lands as layout puts it: animating it would
+     * fly blocks past ones that were never wired.
+     */
+    inView?: boolean;
+    inViewMargin?: number;
+    /**
+     * The most animation time, in ms, one painted frame may advance: a run
+     * behind a long frame slows down instead of skipping ahead, so nothing
+     * jumps on a busy page. Unset, a frame advances by the time since the
+     * last one (up to 40 ms).
+     */
+    maxFrameStep?: number;
     /**
      * A `c.Camera3D` cue moved the shot. Called every frame it changes —
      * scrubs included, since the pose is sampled from the score — with a
@@ -353,6 +382,29 @@ function reducesMotion(root: Element): boolean {
   );
 }
 
+/** whether an element scrolls its content on either axis */
+function scrolls(el: Element): boolean {
+  const { overflowX, overflowY } = getComputedStyle(el);
+  return [overflowX, overflowY].some(
+    (o) => o === 'auto' || o === 'scroll' || o === 'overlay',
+  );
+}
+
+/** the nearest ancestor that scrolls vertically: what `@inView` calls the view */
+function scrollerOf(el: Element): HTMLElement | null {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const overflow = getComputedStyle(p).overflowY;
+    if (
+      overflow === 'auto' ||
+      overflow === 'scroll' ||
+      overflow === 'overlay'
+    ) {
+      return p;
+    }
+  }
+  return null;
+}
+
 /**
  * The barrier books one post-render callback for every region taking part in a
  * pass. `joinPass(this)` is where the region's PassHost contract (measurePass /
@@ -392,6 +444,9 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
   private arrived = new Set<ChoreoNode>();
   /** destroyed before the pass that removed them has been processed */
   private claimed = new Set<ChoreoNode>();
+  /** every beacon name this region's score has read, so a pass measures
+   *  those beacons and not the whole page's */
+  readonly beaconNames = new Set<string>();
   /** removed participants this region is keeping alive in its orphan layer */
   private orphans = new Set<ChoreoNode>();
   /** participants whose Presence is letting them go: removed once, not on every pass while they leave */
@@ -443,6 +498,7 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
       this.run = undefined;
       // a quiet region must not take its pause to the grave
       this.unquiet();
+      this.viewObserver?.disconnect();
       for (const node of [...this.orphans, ...this.claimed]) {
         this.drop(node);
       }
@@ -474,6 +530,7 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
   register(node: ChoreoNode) {
     this.participants.add(node);
     this.arrived.add(node);
+    this.watchView(node);
     if (this.args.debug && node.element) {
       (node.element as HTMLElement).style.outline = '1px dotted #16a34a';
       // the seam lints (§5.3): inside a region the timeline is the only
@@ -495,9 +552,120 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
       // a destroyed participant may still be claimed (below); the sets that decide that survive until drop()
       this.participants.delete(node);
       this.arrived.delete(node);
+      this.unwatchView(node);
     };
   }
 
+  /** sat out a pass since the last one it watched (`@idle`) */
+  private slept = false;
+
+  /* ---- @inView: what is wired ---- */
+
+  /** participants inside the view or its margin, as the observer last saw them */
+  private nearView = new Set<ChoreoNode>();
+  /** what the last pass animated: kept wired until a pass lets it go, so a
+   *  block that leaves the margin mid-flight is not cut loose halfway */
+  private flying = new Set<ChoreoNode>();
+  private viewNodes = new WeakMap<Element, ChoreoNode>();
+  private viewObserver?: IntersectionObserver;
+  private viewRoot: HTMLElement | null = null;
+  /** the `@inViewMargin` the current observer was made with */
+  private viewMarginUsed?: number;
+
+  private get viewMargin() {
+    return this.args.inViewMargin ?? 1;
+  }
+
+  private watchView(node: ChoreoNode) {
+    const el = node.element;
+    if (!this.args.inView || !el) {
+      return;
+    }
+    if (!this.viewObserver) {
+      this.viewRoot = this.element ? scrollerOf(this.element) : null;
+      this.viewMarginUsed = this.viewMargin;
+      this.viewObserver = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            const seen = this.viewNodes.get(entry.target);
+            if (!seen) {
+              continue;
+            }
+            if (entry.isIntersecting) {
+              this.nearView.add(seen);
+            } else {
+              this.nearView.delete(seen);
+            }
+          }
+        },
+        {
+          root: this.viewRoot,
+          rootMargin: `${this.viewMargin * 100}% 0px`,
+        },
+      );
+    }
+    this.viewNodes.set(el, node);
+    this.viewObserver.observe(el);
+  }
+
+  /**
+   * `@inView` and `@inViewMargin` can change after participants registered:
+   * switched on (or given a new margin), the region observes every current
+   * participant and wires the ones already near the view now (the observer
+   * reports only after the next frame); switched off, it lets the observer
+   * go and wires everything again.
+   */
+  private syncViewWatch() {
+    if (
+      this.args.inView &&
+      this.viewObserver &&
+      this.viewMarginUsed !== this.viewMargin
+    ) {
+      // the observer's margin is fixed when it is made: a new margin makes a
+      // new observer
+      this.viewObserver.disconnect();
+      this.viewObserver = undefined;
+      this.nearView.clear();
+    }
+    if (this.args.inView && !this.viewObserver) {
+      for (const node of this.participants) {
+        this.watchView(node);
+      }
+      if (this.viewObserver) {
+        const near = this.nearViewBand();
+        for (const node of this.participants) {
+          const r = node.element?.getBoundingClientRect();
+          if (r && r.bottom >= near.top && r.top <= near.bottom) {
+            this.nearView.add(node);
+          }
+        }
+      }
+    } else if (!this.args.inView && this.viewObserver) {
+      this.viewObserver.disconnect();
+      this.viewObserver = undefined;
+      this.viewRoot = null;
+      this.nearView.clear();
+      this.flying.clear();
+    }
+  }
+
+  private unwatchView(node: ChoreoNode) {
+    this.nearView.delete(node);
+    if (node.element) {
+      this.viewObserver?.unobserve(node.element);
+    }
+  }
+
+  /** the view and its margin, in viewport px; read once per pass */
+  private nearViewBand() {
+    const r = this.viewRoot
+      ? this.viewRoot.getBoundingClientRect()
+      : { bottom: window.innerHeight, top: 0 };
+    const height = r.bottom - r.top;
+    const margin = height * this.viewMargin;
+    return { bottom: r.bottom + margin, margin, top: r.top - margin };
+  }
+
   claim(node: ChoreoNode) {
     if (this.orphans.has(node)) {
       return true;
@@ -520,8 +688,20 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
     // (`layout` / `layoutId`) snapshot here too, so `{{motion layout=true}}`
     // works inside a <Choreo> without a <LayoutGroup> wrapped around it.
     snapshotOnRender();
+    if (this.args.idle) {
+      this.slept = true;
+      return undefined;
+    }
+    if (this.slept) {
+      // what arrived while the region sat out was never watched arriving:
+      // waking must not replay it. This pass's own arrivals register after
+      // this, as its modifiers install.
+      this.slept = false;
+      this.arrived.clear();
+    }
     if (!this.passPending) {
       this.passPending = true;
+      this.syncViewWatch();
       this.snapshot();
       // every region announces here, while Glimmer is still rendering, so the
       // barrier knows the whole cast before anybody measures
@@ -534,9 +714,14 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
   private snapshot() {
     this.snapshots.clear();
     this.rootSnapshot = this.element?.getBoundingClientRect();
+    const wired = this.args.inView ? this.nearView : undefined;
     for (const node of this.participants) {
       const el = node.element;
-      if (el?.isConnected && !this.orphans.has(node)) {
+      if (
+        el?.isConnected &&
+        !this.orphans.has(node) &&
+        (!wired || wired.has(node) || this.flying.has(node))
+      ) {
         this.snapshots.set(node, measure(el));
       }
     }
@@ -601,6 +786,7 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
       role: node.role,
       type,
     });
+    const near = this.args.inView ? this.nearViewBand() : undefined;
     const candidates = new Set([
       ...this.participants,
       ...this.claimed,
@@ -617,6 +803,15 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
         const prior = this.orphanBounds.get(node);
         removed.push(sprite(node, 'removed', prior));
       } else if (this.arrived.has(node)) {
+        if (near) {
+          const r = el.getBoundingClientRect();
+          if (r.bottom < near.top || r.top > near.bottom) {
+            // it lands out of reach of the view: layout places it
+            continue;
+          }
+          // wired now: the observer reports only after the next frame
+          this.nearView.add(node);
+        }
         inserted.push(
           sprite(node, 'inserted', undefined, bounds(measure(el), after)),
         );
@@ -667,6 +862,24 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
           };
       }
     }
+    // a jump: something moved farther than the margin, past blocks that
+    // were never wired. It lands as layout puts it; what was leaving goes now.
+    if (near && kept.some((s) => Math.abs(s.delta?.y ?? 0) > near.margin)) {
+      for (const s of removed) {
+        this.drop(s.node);
+      }
+      inserted.length = 0;
+      kept.length = 0;
+      removed.length = 0;
+    }
+    if (near) {
+      this.flying = new Set(
+        [
+          ...inserted,
+          ...kept.filter((s) => s.delta && (s.delta.x || s.delta.y)),
+        ].map((s) => s.node),
+      );
+    }
     this.arrived.clear();
     this.snapshots.clear();
     const claimed = [...this.claimed];
@@ -725,7 +938,10 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
       [...kept, ...inserted.filter((s) => s.type === 'kept')],
       // measured in the same window as `final`, and re-measured every pass: a
       // beacon can move without this region rendering at all
-      measureBeacons(after),
+      // the beacons this score has asked for before, measured now; a name it
+      // asks for the first time is measured when the step reads it (Glimmer
+      // reads a step's args as it compiles, after this)
+      measureBeacons(after, this.beaconNames),
       measureZoom,
       // the frame's own size in the same final layout, local pixels — the
       // camera's centre reference, so aim terms are internally consistent
@@ -733,7 +949,11 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
         height: after.height / measureZoom,
         width: after.width / measureZoom,
       },
-      groundOf(root),
+      () => groundOf(root),
+      (name) => {
+        this.beaconNames.add(name);
+        return measureBeacons(after, [name]).get(name) ?? null;
+      },
     );
     this.changeset = changeset;
 
@@ -860,6 +1080,9 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
       // aloft, kept-motion cannot justify a recompile either: the score it
       // would produce is the degraded one above.
       (this.orphans.size > 0 || !changeset.sprites({ type: 'moved' }).length) &&
+      // …and only while the layout it compiled in still stands: a reflow or
+      // a scroll under a leaver still aloft is a real move, not noise
+      this.layoutOf() === this.layoutPrint &&
       // …but an EDITED timeline is never noise: a changed tree replays,
       // exactly as it would with no orphans aloft (the build-order
       // transport's delay nudge, made while a leaver is frozen mid-park)
@@ -1010,6 +1233,7 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
       // arriving, and every one it can see on its way out. A region in that
       // state is not watching a departure, it is inside one — see `park`.
       doomed: !kept.length && !inserted.length && removed.length > 0,
+      maxFrameStep: this.args.maxFrameStep,
     });
 
     if (this.args.quiet) {
@@ -1082,6 +1306,24 @@ export class Choreo extends Component<Signature> implements ChoreoHost {
           `${el.offsetWidth},${el.offsetHeight}`,
       );
     }
+    // A scroll moves every participant in page space and none of them in
+    // the offsets above, so the scroll offset of the scroller the region
+    // sits in is part of where its participants stand: a follow settled into
+    // a pass mid-run is a real move, and the run is recompiled to carry it.
+    // The walk stops at that scroller (the document's own scroll counts only
+    // when no element scroller holds the region), so scrolling an outer
+    // scroller or the page around it does not cancel the region's runs, for
+    // the same reason the offset walk above stops at the region's edge.
+    let sx = 0;
+    let sy = 0;
+    for (let a = root?.parentElement; a; a = a.parentElement) {
+      sx += a.scrollLeft;
+      sy += a.scrollTop;
+      if (a !== document.documentElement && scrolls(a)) {
+        break;
+      }
+    }
+    parts.push(`scroll@${Math.round(sx)},${Math.round(sy)}`);
     return parts.join('|');
   }
 

package/bundled-types/choreo/far.ts

@@ -103,11 +103,50 @@ export function setBeforeMeasure(fn: () => void) {
   beforeMeasure = fn;
 }
 
+/**
+ * SETTLE: state that the pass implies but that is not markup, settled after
+ * this pass's mounts and before any region measures. A scroll owner (a list
+ * that keeps its scroll at the newest content, or holds a row in place while
+ * rows above it change) holds its anchor here: a scroll position is state,
+ * so it lands in the same pass as the change that moved it, and every region
+ * measures the page as the reader will see it. An element the scroll kept
+ * still then reads as not moved and gets no motion; only what really moved
+ * on screen does.
+ *
+ * A settler only runs inside a barrier, and a barrier runs only when a
+ * region joins a pass: with no region mounted, every region idle, or motion
+ * off, no settler runs. So the owner sets its scroll through its own path as
+ * well (on render or on resize, as it would with no Choreo on the page), and
+ * the settler only makes that happen before regions measure. State never
+ * depends on a settler (ADR 007 §1.1).
+ *
+ * Settlers run in registration order; one that throws is reported and the
+ * pass goes on. Returns the unregister function.
+ */
+const settlers = new Set<() => void>();
+export function registerSettle(fn: () => void): () => void {
+  settlers.add(fn);
+  return () => {
+    settlers.delete(fn);
+  };
+}
+
 function runBarrier() {
   booked = false;
   const hosts = [...intents];
   intents.clear();
   beforeMeasure();
+  for (const settle of [...settlers]) {
+    // a settler is app code: one that throws must not keep the regions that
+    // joined this pass from measuring, or they would stay pending for good
+    try {
+      settle();
+    } catch (e) {
+      queueMicrotask(() => {
+        throw e;
+      });
+    }
+  }
   const passes: Pass[] = [];
   for (const host of hosts) {
     const pass = host.measurePass();

package/bundled-types/choreo/index.ts

@@ -11,10 +11,12 @@ export type { Arming, ArmingOptions, ArmingRegion } from './arming.ts';
 export { createArming } from './arming.ts';
 export { beacon } from './beacon.ts';
 export type { BeaconRef } from './beacons.ts';
+export { registerBeacon } from './beacons.ts';
 export type { Changeset } from './changeset.ts';
 export type { ChoreoContext } from './choreo.gts';
 export { Choreo } from './choreo.gts';
 export { easeIn, easeInAndOut, easeOut } from './easings.ts';
+export { registerSettle } from './far.ts';
 export type { GestureRef } from './gesture.ts';
 export {
   type ChoreoHost,

package/bundled-types/choreo/run.ts

@@ -184,6 +184,13 @@ interface RunOptions {
   inherit?: Velocities;
   /** where the prior run's ambient loops stood, to carry them on from */
   loops?: LoopPhases;
+  /**
+   * The most animation time, in ms, one painted frame may advance. Unset,
+   * a frame advances by the time since the last one (the frame loop caps
+   * that at 40 ms). Set, a run behind a long frame slows down rather than
+   * skipping: it lands later, and no frame jumps.
+   */
+  maxFrameStep?: number;
   /** a camera step landed or the run ended: the frame's new resting state */
   onCamera?(state: CameraState): void;
   /**
@@ -396,6 +403,18 @@ interface Track {
   wire?: SVGPathElement;
 }
 
+let warnedPrivateFields = false;
+/** @maxFrameStep reads motion-dom's private animation fields; say once when they are gone */
+function warnPrivateFieldsMoved() {
+  if (warnedPrivateFields) {
+    return;
+  }
+  warnedPrivateFields = true;
+  console.warn(
+    '@cardstack/choreo: motion-dom no longer exposes the animation fields @maxFrameStep reads (_animation, startTime, holdTime); a long frame will skip tweens ahead instead of slowing them',
+  );
+}
+
 export class ChoreoRun implements Run {
   cues: Cue[];
   velocities: Velocities = new Map();
@@ -454,6 +473,17 @@ export class ChoreoRun implements Run {
   private ended = false;
   private resolveFinished!: () => void;
   private ticking = false;
+  /**
+   * The next tick is the first since the clock started (or resumed): it
+   * paints the run where it stands and advances nothing. The frame loop's
+   * delta on that tick is the time since ITS last frame, up to 40 ms, so a
+   * run started by a render pass would otherwise open with that whole step
+   * on its own clock: every cue the clock starts, gates, or drives frame by
+   * frame (a camera, a wire, a later cue's start) would begin that far in.
+   */
+  private freshClock = false;
+  /** the frame timestamp holdBack saw last, while a maxFrameStep applies */
+  private lastStamp: number | undefined;
   private autoTimer: ReturnType<typeof setTimeout> | undefined;
 
   constructor(compiled: Compiled, options: RunOptions) {
@@ -895,6 +925,12 @@ export class ChoreoRun implements Run {
       return;
     }
     this.ticking = true;
+    this.freshClock = true;
+    this.lastStamp = undefined;
+    if (this.options.maxFrameStep) {
+      // read runs before update: the animations tick after the hold-back
+      frame.read(this.holdBack, true);
+    }
     frame.update(this.tick, true);
   }
 
@@ -902,15 +938,82 @@ export class ChoreoRun implements Run {
     if (this.ticking) {
       this.ticking = false;
       cancelFrame(this.tick);
+      cancelFrame(this.holdBack);
     }
   }
 
+  /**
+   * maxFrameStep for the animations themselves. The run's own clock is
+   * capped in tick; the tweens and springs it started run on motion-dom's
+   * frame clock, which takes the real time since their start, so a long
+   * frame would still skip that much of them. Before they update, each one
+   * driven on the main thread has its start moved on by the time past the
+   * cap: it resumes from where the last frame left it, plus one step.
+   * Animations on the compositor (WAAPI) kept playing through the long
+   * frame and are left alone.
+   */
+  private holdBack = (data: FrameData) => {
+    const step = this.options.maxFrameStep;
+    const last = this.lastStamp;
+    this.lastStamp = data.timestamp;
+    if (!step) {
+      return;
+    }
+    // The first frame: an animation the render pass started takes its start
+    // from motion-dom's clock, which holds one time for a whole task, so a
+    // pass late in a long render would date it back to the task's start and
+    // its first frame would skip that far. Its start moves to this frame.
+    // After that: the time past the cap since the last frame.
+    for (const t of this.tracks) {
+      for (const c of t.controls ?? []) {
+        // the wrapper's resolved animation, read without the getter that
+        // flushes pending keyframes. These are motion-dom's private fields
+        // (VENDORED.md lists them for a bump to check): past the first frame
+        // every control has resolved, so a control without them means the
+        // fields moved and the cap no longer reaches the tweens.
+        const inner = (c as unknown as { _animation?: object })._animation as
+          | { holdTime?: number | null; startTime?: number | null }
+          | undefined;
+        if (
+          last !== undefined &&
+          (!inner ||
+            (!('animation' in inner) &&
+              !('startTime' in inner && 'holdTime' in inner)))
+        ) {
+          warnPrivateFieldsMoved();
+        }
+        if (
+          !inner ||
+          'animation' in inner ||
+          typeof inner.startTime !== 'number' ||
+          inner.holdTime !== null
+        ) {
+          continue;
+        }
+        if (last === undefined) {
+          if (data.timestamp - inner.startTime > step) {
+            inner.startTime = data.timestamp;
+          }
+        } else if (data.timestamp - last > step) {
+          inner.startTime += data.timestamp - last - step;
+        }
+      }
+    }
+  };
+
   private tick = (data: FrameData) => {
     if (!this.playing || this.cancelled || this.ended) {
       this.stopTicking();
       return;
     }
-    const next = this.master + data.delta * this.rate;
+    const step = this.options.maxFrameStep;
+    const delta = this.freshClock
+      ? 0
+      : step
+        ? Math.min(data.delta, step)
+        : data.delta;
+    this.freshClock = false;
+    const next = this.master + delta * this.rate;
     const gate = this.gates.find(
       (g) => !g.opened && g.at >= this.master && g.at <= next,
     );

package/bundled-types/host-app/lib/realm-runner/worker.ts

@@ -5,6 +5,12 @@ import {
   shouldInterruptAfterDeadline,
 } from 'quickjs-emscripten';
 
+import {
+  describeScriptError,
+  REALM_RUNNER_SCRIPT_FILE_NAME,
+  wrapRealmRunnerScript,
+} from '@cardstack/runtime-common/realm-runner-script';
+
 import type {
   RealmRunnerCallMethod,
   RealmRunnerRequest,
@@ -106,55 +112,6 @@ const BOOTSTRAP = `
   })();
 `;
 
-const SCRIPT_FILE_NAME = 'realm-code.js';
-// The script runs inside `(async () => {\n … \n})()`, so its first line is
-// line 2 of what QuickJS evaluates.
-const WRAPPER_LINES = 1;
-
-// Turns an error from the script itself into a message the model can act on:
-// the error, the line of its own script it points at with the lines around
-// it, and, for the error that comes up most, what usually causes it. Errors
-// from realm calls and the time-limit interrupt keep their own message.
-function describeScriptError(dumped: unknown, code: string): string {
-  let error = (dumped ?? {}) as {
-    name?: string;
-    message?: string;
-    lineNumber?: number;
-  };
-  let message = error.message ?? String(dumped);
-  let name = error.name ?? 'Error';
-  if (
-    !['SyntaxError', 'TypeError', 'ReferenceError', 'RangeError'].includes(name)
-  ) {
-    return message;
-  }
-  let lines = code.split('\n');
-  let line =
-    typeof error.lineNumber === 'number'
-      ? error.lineNumber - WRAPPER_LINES
-      : undefined;
-  let parts = [
-    `${name} in the script${line ? ` at line ${line}` : ''}: ${message}`,
-  ];
-  if (line && line >= 1 && line <= lines.length) {
-    let from = Math.max(1, line - 2);
-    let to = Math.min(lines.length, line + 1);
-    let excerpt = [];
-    for (let n = from; n <= to; n++) {
-      excerpt.push(
-        `${n === line ? '>' : ' '} ${n} | ${lines[n - 1].slice(0, 200)}`,
-      );
-    }
-    parts.push(excerpt.join('\n'));
-  }
-  if (name === 'SyntaxError' && code.includes('`')) {
-    parts.push(
-      "If a file's content is inside a template literal, a backtick or ${ in that content ends the string or is interpolated. Escape them in the content as \\` and \\${, or build the content without a template literal.",
-    );
-  }
-  return parts.join('\n');
-}
-
 const METHODS = new Set<RealmRunnerCallMethod>([
   'fs.readText',
   'fs.exists',
@@ -273,8 +230,8 @@ worker.onmessage = async (event: MessageEvent<RealmRunnerRequest>) => {
     context.unwrapResult(context.evalCode(BOOTSTRAP)).dispose();
 
     let evaluated = context.evalCode(
-      `(async () => {\n${request.code}\n})()`,
-      SCRIPT_FILE_NAME,
+      wrapRealmRunnerScript(request.code),
+      REALM_RUNNER_SCRIPT_FILE_NAME,
     );
     if (evaluated.error) {
       let dumped = context.dump(evaluated.error);

package/bundled-types/runtime-common/realm-runner-script.d.ts

@@ -0,0 +1,3 @@
+export declare function wrapRealmRunnerScript(code: string): string;
+export declare const REALM_RUNNER_SCRIPT_FILE_NAME = "realm-code.js";
+export declare function describeScriptError(dumped: unknown, code: string): string;

package/package.json

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

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

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

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

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

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

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

package/bundled-test-harness/assets/plate-66qnQ-M9.js

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

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

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