@ethlete/cli 3.0.0-next.24 → 3.0.0-next.25

package/design/motion-runtime.ts

@@ -105,14 +105,23 @@ const measure = (root: Element) => {
   };
 };
 
-/** What a switch of `root` to `markup` does: `motion` names its `play` and `viewTransition`, `clock` the time `ctx.at` runs on. */
-export type StateSwitch = { root: Element; markup: string; motion?: Motion; clock?: MotionClock };
+/**
+ * What a switch of `root` to `markup` does: `motion` names its `play` and `viewTransition`, `clock` the time `ctx.at`
+ * runs on, and `transitioned` hears the View Transition when one starts.
+ */
+export type StateSwitch = {
+  root: Element;
+  markup: string;
+  motion?: Motion;
+  clock?: MotionClock;
+  transitioned?: (transition: ViewTransition) => void;
+};
 
 /**
  * Morphs `root` to `markup`, inside a View Transition when the motion asks for one and the browser has it, then runs
  * the motion's `play`. `ctx.rect` measures in the DOM before the morph. Resolves once `play` has run.
  */
-export const switchState = ({ root, markup, motion, clock }: StateSwitch): Promise<void> => {
+export const switchState = ({ root, markup, motion, clock, transitioned }: StateSwitch): Promise<void> => {
   const rect = motion?.play ? measure(root) : null;
   const apply = () => morph(root, markup);
   const play = () => {
@@ -125,8 +134,13 @@ export const switchState = ({ root, markup, motion, clock }: StateSwitch): Promi
   };
   const document = root.ownerDocument;
 
-  if (motion?.viewTransition && typeof document.startViewTransition === 'function')
-    return document.startViewTransition(apply).updateCallbackDone.then(play);
+  if (motion?.viewTransition && typeof document.startViewTransition === 'function') {
+    const transition = document.startViewTransition(apply);
+
+    transitioned?.(transition);
+
+    return transition.updateCallbackDone.then(play);
+  }
 
   apply();
   play();
@@ -134,6 +148,199 @@ export const switchState = ({ root, markup, motion, clock }: StateSwitch): Promi
   return Promise.resolve();
 };
 
+/** One animation of a motion, in ms from the start of the motion. `iterations` and `end` are `null` when it never ends. */
+export type MotionTrack = {
+  element: string;
+  kind: 'transition' | 'animation' | 'script';
+  name?: string;
+  properties: string[];
+  start: number;
+  delay: number;
+  duration: number;
+  iterations: number | null;
+  easing: string;
+  end: number | null;
+};
+
+/** A motion paused at its start: `seek` moves it forward to a time in ms, `tracks` lists what ran so far. */
+export type SteppedMotion = {
+  seek: (ms: number) => void;
+  tracks: () => MotionTrack[];
+  end: () => number;
+  bounds: () => MotionBox;
+};
+
+/** A rectangle in page coordinates. */
+export type MotionBox = { left: number; top: number; right: number; bottom: number };
+
+const KEYFRAME_FIELDS = new Set(['offset', 'computedOffset', 'easing', 'composite']);
+
+const elementOf = (element: Element | null | undefined) =>
+  element?.hasAttribute('data-et-key')
+    ? `[data-et-key="${element.getAttribute('data-et-key')}"]`
+    : element
+      ? [
+          element.tagName.toLowerCase(),
+          element.id ? `#${element.id}` : '',
+          ...[...element.classList].map((name) => `.${name}`),
+        ].join('')
+      : '';
+
+const trackOf = (animation: Animation, start: number): MotionTrack => {
+  const effect = animation.effect as KeyframeEffect | null;
+  const timing = effect?.getComputedTiming();
+  const keyframes = effect && typeof effect.getKeyframes === 'function' ? effect.getKeyframes() : [];
+  const own = effect?.getTiming().easing ?? 'linear';
+  const keyed = keyframes.find((frame) => frame.easing && frame.easing !== 'linear')?.easing;
+  const iterations = timing?.iterations ?? 1;
+  const endTime = Number(timing?.endTime ?? 0);
+  const properties = [
+    ...new Set(
+      keyframes.flatMap((frame) =>
+        Object.keys(frame)
+          .filter((field) => !KEYFRAME_FIELDS.has(field))
+          .map((field) => field.replace(/[A-Z]/gu, (letter) => `-${letter.toLowerCase()}`)),
+      ),
+    ),
+  ];
+  const kind = 'transitionProperty' in animation ? 'transition' : 'animationName' in animation ? 'animation' : 'script';
+
+  return {
+    element: `${elementOf(effect?.target)}${effect?.pseudoElement ?? ''}`,
+    kind,
+    ...(kind === 'animation' ? { name: String((animation as CSSAnimation).animationName) } : {}),
+    properties: kind === 'transition' ? [String((animation as CSSTransition).transitionProperty)] : properties,
+    start,
+    delay: Number(timing?.delay ?? 0),
+    duration: Number(timing?.duration ?? 0),
+    iterations: Number.isFinite(iterations) ? iterations : null,
+    easing: own === 'linear' ? (keyed ?? own) : own,
+    end: Number.isFinite(endTime) ? start + endTime : null,
+  };
+};
+
+/**
+ * Switches `root` to `markup` with `motion` as `switchState` does, on a manual clock, and pauses every animation it
+ * starts, so a caller can step through the motion and draw it at any time from its start. A motion with `interrupt`
+ * switches back to `reverse.markup` at that time, with `reverse.motion` (its `ctx.at` counts from the interrupt and a
+ * View Transition is not used); a forward `ctx.at` step after it is dropped and a cancelled animation ends there.
+ */
+export const stepMotion = (options: {
+  root: Element;
+  markup: string;
+  motion: Motion;
+  reverse?: { markup: string; motion?: Motion };
+}): Promise<SteppedMotion> => {
+  const { root, markup, motion, reverse } = options;
+  const document = root.ownerDocument;
+  const clock = manualClock();
+  const started = new Map<Animation, MotionTrack>();
+  const cut = new Set<Animation>();
+  const interrupt = motion.interrupt;
+  let interrupted = false;
+  let lastTask = 0;
+  let ready: Promise<unknown> = Promise.resolve();
+
+  if (interrupt !== undefined && !reverse)
+    throw new Error('design-explore: a motion with interrupt needs the markup of its from state to switch back to');
+
+  const collect = (start: number) => {
+    for (const animation of started.keys()) {
+      const track = started.get(animation);
+
+      if (cut.has(animation) || animation.playState !== 'idle' || !track) continue;
+
+      cut.add(animation);
+      track.end = Math.min(track.end ?? start, start);
+    }
+
+    for (const animation of document.getAnimations()) {
+      if (started.has(animation)) continue;
+
+      animation.pause();
+      started.set(animation, trackOf(animation, start));
+    }
+  };
+
+  const pose = (ms: number) => {
+    for (const [animation, track] of started)
+      if (!cut.has(animation)) animation.currentTime = Math.max(0, ms - track.start);
+  };
+
+  const timedFrom = (offset: number, live: () => boolean): MotionClock => ({
+    ...clock,
+    at: (ms, fn) =>
+      clock.at(offset + ms, () => {
+        if (!live()) return;
+
+        lastTask = Math.max(lastTask, offset + ms);
+        pose(offset + ms);
+        fn();
+        collect(offset + ms);
+      }),
+  });
+  const timed = timedFrom(0, () => !interrupted);
+
+  return switchState({
+    root,
+    markup,
+    motion,
+    clock: timed,
+    transitioned: (transition) => {
+      ready = transition.ready.catch(() => undefined);
+    },
+  })
+    .then(() => ready)
+    .then(() => {
+      collect(0);
+
+      if (interrupt !== undefined && reverse) {
+        clock.at(interrupt, () => {
+          interrupted = true;
+          lastTask = Math.max(lastTask, interrupt);
+          pose(interrupt);
+          void switchState({
+            root,
+            markup: reverse.markup,
+            motion: reverse.motion ? { ...reverse.motion, viewTransition: false } : undefined,
+            clock: timedFrom(interrupt, () => true),
+          });
+          collect(interrupt);
+        });
+      }
+
+      return {
+        seek: (ms) => {
+          if (ms < clock.now())
+            throw new Error(`design-explore: a motion steps forward only, from ${clock.now()} ms to ${ms} ms`);
+
+          clock.advance(ms - clock.now());
+
+          pose(ms);
+        },
+        tracks: () => [...started.values()],
+        end: () => Math.max(lastTask, ...[...started.values()].map((track) => track.end ?? 0)),
+        bounds: () => {
+          const view = document.defaultView;
+          const boxes = [
+            root,
+            ...[...started.keys()].map((animation) => (animation.effect as KeyframeEffect | null)?.target),
+          ]
+            .filter((element): element is Element => !!element)
+            .map((element) => element.getBoundingClientRect())
+            .filter((rect, index) => index === 0 || rect.width > 0 || rect.height > 0);
+
+          return {
+            left: Math.min(...boxes.map((rect) => rect.left)) + (view?.scrollX ?? 0),
+            top: Math.min(...boxes.map((rect) => rect.top)) + (view?.scrollY ?? 0),
+            right: Math.max(...boxes.map((rect) => rect.right)) + (view?.scrollX ?? 0),
+            bottom: Math.max(...boxes.map((rect) => rect.bottom)) + (view?.scrollY ?? 0),
+          };
+        },
+      };
+    });
+};
+
 /**
  * How `runRules` reaches the part: the state drawn first, its `rules` and `motions`, and the markup of a state. `clock`
  * makes the clock of each switch, `switched` hears each finished switch and `failed` each error.

package/design/spring.ts

@@ -0,0 +1,53 @@
+/** A spring as a CSS easing: `easing` is a `linear(...)` function, `duration` the ms until it settles; as a string, `<duration>ms <easing>`. */
+export type Spring = { easing: string; duration: number; toString: () => string };
+
+const SETTLED = 0.001;
+const LONGEST_MS = 10000;
+
+const positionOf = (damping: number, frequency: number) => {
+  const natural = 2 * Math.PI * frequency;
+
+  if (damping < 1) {
+    const damped = natural * Math.sqrt(1 - damping * damping);
+    const decay = damping * natural;
+
+    return (seconds: number) =>
+      1 - Math.exp(-decay * seconds) * (Math.cos(damped * seconds) + (decay / damped) * Math.sin(damped * seconds));
+  }
+
+  if (damping === 1) return (seconds: number) => 1 - Math.exp(-natural * seconds) * (1 + natural * seconds);
+
+  const root = Math.sqrt(damping * damping - 1);
+  const slow = -natural * (damping - root);
+  const fast = -natural * (damping + root);
+
+  return (seconds: number) => 1 - (fast * Math.exp(slow * seconds) - slow * Math.exp(fast * seconds)) / (fast - slow);
+};
+
+/**
+ * Samples a spring that moves from 0 to 1 at rest, for a motion token in `foundations`, e.g.
+ * `--motion-capsule: ${spring({ damping: 0.6, frequency: 2 })}`. `damping` is the damping ratio (below 1 it
+ * overshoots) and `frequency` the undamped frequency in Hz.
+ */
+export const spring = (options: { damping: number; frequency: number }): Spring => {
+  const { damping, frequency } = options;
+
+  if (!(damping > 0) || !(frequency > 0) || !Number.isFinite(damping) || !Number.isFinite(frequency))
+    throw new Error(
+      `design-explore: spring() needs a damping and a frequency above 0, got ${damping} and ${frequency}`,
+    );
+
+  const position = positionOf(damping, frequency);
+  let last = 0;
+
+  for (let ms = 0; ms <= LONGEST_MS; ms++) if (Math.abs(1 - position(ms / 1000)) >= SETTLED) last = ms;
+
+  const duration = Math.max(1, last + 1);
+  const count = Math.min(200, Math.max(10, Math.ceil(duration / 16)));
+  const points = Array.from({ length: count + 1 }, (_, index) =>
+    index === count ? 1 : Math.round(position(((index / count) * duration) / 1000) * 10000) / 10000,
+  );
+  const easing = `linear(${points.join(', ')})`;
+
+  return { easing, duration, toString: () => `${duration}ms ${easing}` };
+};

package/design/token-sheet.ts

@@ -0,0 +1,87 @@
+import { Drawing, html } from './define-call';
+
+export type TokenSheetOptions = {
+  title: string;
+  note?: string;
+  scope?: string;
+  css: string;
+  sample: string;
+  sampleOf: (name: string) => string;
+  sampleClass?: string;
+  only?: (name: string) => boolean;
+  pixels?: boolean;
+  styles?: string;
+  setup?: (root: HTMLElement) => void;
+};
+
+const SHEET_STYLES = `
+  .ts-root { position: relative; display: flex; flex-direction: column; gap: var(--space-4, 1.6rem); width: 960px; padding: var(--space-6, 2.4rem); box-sizing: border-box; background: var(--surface, oklch(0.17 0 0)); color: var(--text, oklch(0.94 0 0)); font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); font-size: var(--text-md, 1.3rem); line-height: var(--text-md-line, 1.8rem); }
+  .ts-title { margin: 0; font-size: var(--text-xl, 1.7rem); line-height: var(--text-xl-line, 2.2rem); font-weight: var(--weight-strong, 600); }
+  .ts-note { margin: 0; max-width: 64rem; color: var(--text-muted, oklch(0.72 0 0)); }
+  .ts-panel { margin: 0; padding: var(--space-4, 1.6rem); background: var(--surface, oklch(0.17 0 0)); border: 1px solid var(--surface-border, oklch(0.34 0 0)); border-radius: var(--radius-control-lg, 1rem); }
+  .ts-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-1, 0.4rem); }
+  .ts-row { display: grid; grid-template-columns: 200px 240px 1fr; align-items: center; gap: var(--space-3, 1.2rem); min-height: var(--row, 2.4rem); }
+  .ts-name { font-family: var(--font-code, ui-monospace, "SF Mono", Menlo, Consolas, monospace); font-size: var(--text-sm, 1.15rem); line-height: var(--text-sm-line, 1.6rem); color: var(--text-muted, oklch(0.72 0 0)); }
+  .ts-value { font-family: var(--font-code, ui-monospace, "SF Mono", Menlo, Consolas, monospace); font-size: var(--text-sm, 1.15rem); line-height: var(--text-sm-line, 1.6rem); overflow-wrap: anywhere; }
+  .ts-sample { display: flex; align-items: center; min-width: 0; }
+  .ts-probe { position: absolute; left: 0; top: 0; height: 0; visibility: hidden; }
+`;
+
+const tokenNamesOf = (css: string, only: (name: string) => boolean) => [
+  ...new Set([...css.matchAll(/^\s*--([\w-]+):/gmu)].map(([, name]) => name ?? '').filter(only)),
+];
+
+const fillTokenValues = (root: HTMLElement, pixels: boolean) => {
+  const sheet = root.querySelector<HTMLElement>('.ts-root') ?? root;
+  const style = getComputedStyle(sheet);
+  const probe = sheet.querySelector<HTMLElement>('.ts-probe');
+
+  for (const cell of sheet.querySelectorAll<HTMLElement>('[data-token]')) {
+    const value = style.getPropertyValue(`--${cell.dataset['token']}`).trim();
+    let suffix = '';
+    if (pixels && probe && /^[\d.]+rem$/u.test(value)) {
+      probe.style.width = value;
+      suffix = ` · ${Math.round(probe.getBoundingClientRect().width * 10) / 10}px`;
+    }
+    cell.textContent = value + suffix;
+  }
+};
+
+/**
+ * Draws a foundation sheet: a sample panel, then one row per custom property declared in `css` (narrowed by `only`)
+ * with its value as the drawing resolves it, in px too for rem values when `pixels` is set.
+ * `scope` adds classes to the sheet root, so tokens scoped to a theme class resolve; `note` is markup under the title.
+ */
+export const tokenSheet = ({
+  title,
+  note,
+  scope,
+  css,
+  sample,
+  sampleOf,
+  sampleClass = '',
+  only = () => true,
+  pixels = false,
+  styles = '',
+  setup,
+}: TokenSheetOptions): Drawing => ({
+  body: html`<div class="ts-root${scope ? ` ${scope}` : ''}">
+    <h2 class="ts-title">${title}</h2>
+    ${note && html`<p class="ts-note">${note}</p>`}
+    <section class="ts-panel ${sampleClass}">${sample}</section>
+    <ul class="ts-panel ts-list">
+      ${tokenNamesOf(css, only)
+        .map(
+          (name) =>
+            html`<li class="ts-row">
+              <span class="ts-name">--${name}</span><span class="ts-value" data-token="${name}"></span
+              ><span class="ts-sample">${sampleOf(name)}</span>
+            </li>`,
+        )
+        .join('')}
+    </ul>
+    <span class="ts-probe"></span>
+  </div>`,
+  styles: `${SHEET_STYLES}${styles}`,
+  setup: [(root: HTMLElement) => fillTokenValues(root, pixels), ...(setup ? [setup] : [])],
+});

package/design/web/frame.ts

@@ -1,7 +1,7 @@
-import { CallVariant, Drawing, mountDrawing, placeOverlays } from '../define-call';
+import { CallVariant, Drawing, fitOutOfFlow, mountDrawing, placeOverlays } from '../define-call';
 import { Part } from '../define-part';
-import { fitEmbed } from '../embed-page';
-import { runRules } from '../motion-runtime';
+import { applyEmbed, fitEmbed } from '../embed-page';
+import { runRules, stepMotion, SteppedMotion } from '../motion-runtime';
 import { calls } from 'virtual:design-explore';
 import { loadEnv, loadProductEnv } from 'virtual:design-explore/env';
 import { parts, sketchParts, sketchTokens, tokens } from 'virtual:design-explore/system';
@@ -17,6 +17,8 @@ const fit = product !== null && params.has('fit');
 const interaction = product ? params.get('interaction') : null;
 const propsSketch = product ? params.get('props') : null;
 const propsVariant = params.get('props-variant') ?? '';
+const motionName = product ? params.get('motion') : null;
+const flowTo = product ? params.get('flow-to') : null;
 
 // Listens before the drawing loads, so an error it throws while loading counts; `report` exists only once `reporting` is set.
 let errored = false;
@@ -79,6 +81,17 @@ const showSetupError = (message: string) => {
 
 const messageOf = (error: unknown) => (error instanceof Error ? error.message : String(error));
 
+const RETRY_DELAYS = [300, 1500];
+
+// A part file that changes while frames load can fail its import once; Chromium fetches a failed module again.
+const retried = <T>(load: () => Promise<T>, attempt = 0): Promise<T> =>
+  load().catch((error: unknown) => {
+    const delay = RETRY_DELAYS[attempt];
+    if (delay === undefined) throw error;
+
+    return new Promise<void>((resolve) => setTimeout(resolve, delay)).then(() => retried(load, attempt + 1));
+  });
+
 let drawnPart: { part: Part<unknown>; states: Record<string, unknown> } | null = null;
 
 const drawCall = async (): Promise<Drawing | null> => {
@@ -110,7 +123,7 @@ const drawPart = async (name: string): Promise<Drawing | null> => {
     );
 
   try {
-    const [{ default: part }, { default: holder }] = await Promise.all([load(), loadProps()]);
+    const [{ default: part }, { default: holder }] = await Promise.all([retried(load), retried(loadProps)]);
 
     if (!(key in holder.states)) return fail(`design-explore: part "${partKey}" has no state "${key}"`);
 
@@ -141,7 +154,7 @@ const force = (element: Element, name: string) => {
 };
 
 const forced = async (css: string) => {
-  if (!/:(?:hover|focus-visible|active)/iu.test(css)) return css;
+  if (!/:(?:hover|focus-visible|active|focus-within)/iu.test(css)) return css;
 
   const response = await fetch('/__design/force', { method: 'POST', body: css }).catch(() => null);
 
@@ -168,27 +181,123 @@ const report = () => {
   );
 };
 
-const runPartRules = ({ part, states }: NonNullable<typeof drawnPart>, styles: string) => {
+const stateMarkupOf = ({ part, states }: NonNullable<typeof drawnPart>, styles: string) => {
   const sheets = new Set([styles]);
 
+  return (state: string) =>
+    Promise.resolve(part.render(states[state])).then((drawn) =>
+      sheets.has(drawn.styles)
+        ? drawn.body
+        : forced(drawn.styles).then((css) => {
+            const style = document.createElement('style');
+
+            sheets.add(drawn.styles);
+            style.textContent = css;
+            document.head.append(style);
+
+            return drawn.body;
+          }),
+    );
+};
+
+const exposeStepped = (options: { start: () => Promise<SteppedMotion>; interrupt: number | null }) => {
+  let stepped: SteppedMotion | null = null;
+  const steppedOf = () => {
+    if (!stepped) throw new Error('design-explore: start the motion first');
+
+    return stepped;
+  };
+
+  Object.assign(window, {
+    etMotion: {
+      start: () =>
+        options.start().then((started) => {
+          stepped = started;
+
+          return true;
+        }),
+      seek: (ms: number) => steppedOf().seek(ms),
+      bounds: () => steppedOf().bounds(),
+      timeline: () => ({ end: steppedOf().end(), tracks: steppedOf().tracks(), interrupt: options.interrupt }),
+    },
+  });
+};
+
+const exposeMotion = (options: { drawn: NonNullable<typeof drawnPart>; name: string; styles: string }) => {
+  const { drawn, name, styles } = options;
+  const motion = drawn.part.motions?.[name];
+
+  if (!motion) {
+    const known = Object.keys(drawn.part.motions ?? {});
+
+    showSetupError(`design-explore: part "${partKey}" has no motion "${name}" - it has: ${known.join(', ') || 'none'}`);
+
+    return;
+  }
+
+  const markupOf = stateMarkupOf(drawn, styles);
+
+  exposeStepped({
+    interrupt: motion.interrupt ?? null,
+    start: () =>
+      Promise.all([markupOf(motion.to), motion.interrupt === undefined ? null : markupOf(motion.from)]).then(
+        ([markup, back]) =>
+          stepMotion({
+            root,
+            markup,
+            motion,
+            ...(back === null
+              ? {}
+              : {
+                  reverse: {
+                    markup: back,
+                    motion: Object.values(drawn.part.motions ?? {}).find(
+                      (other) => other.from === motion.to && other.to === motion.from,
+                    ),
+                  },
+                }),
+          }),
+      ),
+  });
+};
+
+const exposeFlowLine = (options: { product: string; to: string; styles: string }) => {
+  const [toPart = '', toState = ''] = options.to.split('#');
+  const load = parts[options.product]?.[toPart];
+
+  if (!load) {
+    showSetupError(`design-explore: product "${options.product}" has no part "${toPart}"`);
+
+    return;
+  }
+
+  exposeStepped({
+    interrupt: null,
+    start: () =>
+      retried(load).then(({ default: part }) => {
+        const states = (part as Part<unknown>).states;
+
+        if (!(toState in states)) throw new Error(`design-explore: part "${toPart}" has no state "${toState}"`);
+
+        // The styles of the to page ride in the markup: in <head> they would restyle the from page before the View Transition captures it.
+
+        return Promise.resolve((part as Part<unknown>).render(states[toState]))
+          .then((drawn) =>
+            drawn.styles === options.styles
+              ? drawn.body
+              : forced(drawn.styles).then((css) => `<style>${css}</style>${drawn.body}`),
+          )
+          .then((markup) => stepMotion({ root, markup, motion: { from: key, to: toState, viewTransition: true } }));
+      }),
+  });
+};
+
+const runPartRules = (drawn: NonNullable<typeof drawnPart>, styles: string) => {
   runRules(root, {
     state: key,
-    rules: part.rules ?? [],
-    motions: part.motions,
-    render: (state) =>
-      Promise.resolve(part.render(states[state])).then((drawn) =>
-        sheets.has(drawn.styles)
-          ? drawn.body
-          : forced(drawn.styles).then((css) => {
-              const style = document.createElement('style');
-
-              sheets.add(drawn.styles);
-              style.textContent = css;
-              document.head.append(style);
-
-              return drawn.body;
-            }),
-      ),
+    rules: drawn.part.rules ?? [],
+    motions: drawn.part.motions,
+    render: stateMarkupOf(drawn, styles),
     switched: () => {
       const partRoot = partRootOf(root);
 
@@ -225,10 +334,16 @@ const drawFrame = async () => {
     if (error)
       showSetupError(`design-explore: setup of ${product ? 'state' : 'variant'} "${key}" failed\n${messageOf(error)}`);
 
-    if (drawnPart?.part.rules?.length) runPartRules(drawnPart, loaded.styles ?? '');
+    if (flowTo && product) exposeFlowLine({ product, to: flowTo, styles: loaded.styles ?? '' });
+    else if (motionName && drawnPart) exposeMotion({ drawn: drawnPart, name: motionName, styles: loaded.styles ?? '' });
+    else if (drawnPart?.part.rules?.length) runPartRules(drawnPart, loaded.styles ?? '');
   }
 
-  const place = () => placeOverlays(root);
+  const place = () => {
+    applyEmbed(frameElement, root);
+    placeOverlays(root);
+    fitOutOfFlow(root, { sideways: fit });
+  };
 
   new MutationObserver(place).observe(root, { childList: true, subtree: true });
   new ResizeObserver(place).observe(root);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/cli",
-  "version": "3.0.0-next.24",
+  "version": "3.0.0-next.25",
   "repository": {
     "type": "git",
     "url": "https://github.com/ethlete-io/ethdk",

package/src/lib/design/calls-tsconfig.js

@@ -24,12 +24,11 @@ exports.DRAWING_COMPILER_OPTIONS = {
  * tsconfig an editor finds for a call file.
  */
 const writeCallsTsconfig = (target) => {
-    var _a, _b, _c;
     const work = (0, paths_1.workRootOf)(target);
     const path = (0, path_1.resolve)(work, 'tsconfig.json');
     const defineCall = (0, path_1.resolve)((0, paths_1.installedAssetRoot)(), 'define-call.ts');
     const inlineCss = (0, path_1.resolve)((0, paths_1.installedAssetRoot)(), 'css-inline.d.ts');
-    const typePaths = (0, render_packages_1.typePathsOf)({ packages: (_c = (_b = (_a = (0, paths_1.readConfig)(target)) === null || _a === void 0 ? void 0 : _a.render) === null || _b === void 0 ? void 0 : _b.packages) !== null && _c !== void 0 ? _c : {}, target });
+    const typePaths = (0, render_packages_1.typePathsOf)({ packages: (0, render_packages_1.renderPackagesOf)({ target, config: (0, paths_1.readConfig)(target) }), target });
     const config = {
         compilerOptions: Object.assign(Object.assign({}, exports.DRAWING_COMPILER_OPTIONS), { paths: Object.assign(Object.assign({}, typePaths), { '@design-explore': [defineCall] }) }),
         include: [`${(0, paths_1.callsRootOf)(target)}/**/*.ts`, defineCall, inlineCss],

package/src/lib/design/calls-tsconfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"calls-tsconfig.js","sourceRoot":"","sources":["../../../../../libs/cli/src/lib/design/calls-tsconfig.ts"],"names":[],"mappings":";;;AAAA,2BAA8C;AAC9C,+BAAwC;AACxC,mCAA8F;AAC9F,uDAAgD;AAEnC,QAAA,wBAAwB,GAAG;IACtC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,UAAU;IAClB,gBAAgB,EAAE,SAAS;IAC3B,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;IACtB,MAAM,EAAE,IAAI;IACZ,wBAAwB,EAAE,IAAI;IAC9B,eAAe,EAAE,IAAI;IACrB,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF;;;;;GAKG;AACI,MAAM,kBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE;;IACnD,MAAM,IAAI,GAAG,IAAA,kBAAU,EAAC,MAAM,CAAC,CAAC;IAChC,MAAM,IAAI,GAAG,IAAA,cAAO,EAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,IAAA,cAAO,EAAC,IAAA,0BAAkB,GAAE,EAAE,gBAAgB,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,IAAA,cAAO,EAAC,IAAA,0BAAkB,GAAE,EAAE,iBAAiB,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,IAAA,6BAAW,EAAC,EAAE,QAAQ,EAAE,MAAA,MAAA,MAAA,IAAA,kBAAU,EAAC,MAAM,CAAC,0CAAE,MAAM,0CAAE,QAAQ,mCAAI,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IAEhG,MAAM,MAAM,GAAG;QACb,eAAe,kCACV,gCAAwB,KAC3B,KAAK,kCAAO,SAAS,KAAE,iBAAiB,EAAE,CAAC,UAAU,CAAC,MACvD;QACD,OAAO,EAAE,CAAC,GAAG,IAAA,mBAAW,EAAC,MAAM,CAAC,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC;KACnE,CAAC;IAEF,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC;IACpD,MAAM,UAAU,GAAG,IAAA,cAAO,EAAC,MAAM,EAAE,kBAAU,EAAE,eAAe,CAAC,CAAC;IAEhE,IAAA,cAAS,EAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACrC,IAAA,kBAAa,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC1B,IAAA,cAAS,EAAC,IAAA,cAAO,EAAC,UAAU,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,IAAA,kBAAa,EAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAEhC,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAxBW,QAAA,kBAAkB,sBAwB7B"}
+{"version":3,"file":"calls-tsconfig.js","sourceRoot":"","sources":["../../../../../libs/cli/src/lib/design/calls-tsconfig.ts"],"names":[],"mappings":";;;AAAA,2BAA8C;AAC9C,+BAAwC;AACxC,mCAA8F;AAC9F,uDAAkE;AAErD,QAAA,wBAAwB,GAAG;IACtC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,UAAU;IAClB,gBAAgB,EAAE,SAAS;IAC3B,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;IACtB,MAAM,EAAE,IAAI;IACZ,wBAAwB,EAAE,IAAI;IAC9B,eAAe,EAAE,IAAI;IACrB,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF;;;;;GAKG;AACI,MAAM,kBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE;IACnD,MAAM,IAAI,GAAG,IAAA,kBAAU,EAAC,MAAM,CAAC,CAAC;IAChC,MAAM,IAAI,GAAG,IAAA,cAAO,EAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,IAAA,cAAO,EAAC,IAAA,0BAAkB,GAAE,EAAE,gBAAgB,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,IAAA,cAAO,EAAC,IAAA,0BAAkB,GAAE,EAAE,iBAAiB,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,IAAA,6BAAW,EAAC,EAAE,QAAQ,EAAE,IAAA,kCAAgB,EAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAA,kBAAU,EAAC,MAAM,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAE9G,MAAM,MAAM,GAAG;QACb,eAAe,kCACV,gCAAwB,KAC3B,KAAK,kCAAO,SAAS,KAAE,iBAAiB,EAAE,CAAC,UAAU,CAAC,MACvD;QACD,OAAO,EAAE,CAAC,GAAG,IAAA,mBAAW,EAAC,MAAM,CAAC,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC;KACnE,CAAC;IAEF,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC;IACpD,MAAM,UAAU,GAAG,IAAA,cAAO,EAAC,MAAM,EAAE,kBAAU,EAAE,eAAe,CAAC,CAAC;IAEhE,IAAA,cAAS,EAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACrC,IAAA,kBAAa,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC1B,IAAA,cAAS,EAAC,IAAA,cAAO,EAAC,UAAU,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,IAAA,kBAAa,EAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAEhC,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAxBW,QAAA,kBAAkB,sBAwB7B"}