@vosjs/studio-core 0.22.0 → 0.22.1

package/dist/index.d.ts

@@ -2337,10 +2337,12 @@ declare function cameraModel(frame: {
     camera?: string | null;
 } | null | undefined): CameraModel;
 /**
- * How much of the level the stage camera spends pulling the focus to the
- * frame's centre: 0 at level 1 (the identity), fully centred from level
- * 1 + CAMERA_CENTRE_RAMP. A smoothstep, so a ramp that passes through the
- * band slides the card without a kink.
+ * The stage camera's centring is a component of the zoom TRACK (0 at rest,
+ * 1 at an apex, eased with the level), so the card's slide and its scale
+ * are one motion. This band is the FALLBACK for a track lowered before the
+ * component existed: centring as a smoothstep of the level over
+ * 1 .. 1 + CAMERA_CENTRE_RAMP. Keyed to the level it front-loaded the
+ * slide, since any ease crosses the band in its first frames (the twitch).
  */
 declare const CAMERA_CENTRE_RAMP = 0.3;
 /**
@@ -2372,7 +2374,14 @@ interface ZoomView {
     ox: number;
     oy: number;
 }
-declare function zoomView(level: number, cx: number, cy: number, layout: CardLayout, camera?: CameraModel): ZoomView;
+declare function zoomView(level: number, cx: number, cy: number, layout: CardLayout, camera?: CameraModel, 
+/**
+ * The stage camera's centring at this instant, 0..1: the zoom track's
+ * fourth component (0 at rest, 1 at an apex, eased with the level).
+ * Absent = the apex (1) under the stage camera, which is what a span's
+ * stored focus describes; always 0 under the magnifier.
+ */
+centring?: number): ZoomView;
 /**
  * The visible window as fractions of the canvas (x/y its top-left, w/h its
  * size, both 1/level): what the studio's aiming rect draws and what the
@@ -2380,7 +2389,7 @@ declare function zoomView(level: number, cx: number, cy: number, layout: CardLay
  * under the stage camera; it never does under the magnifier once the focus
  * is clamped.
  */
-declare function zoomViewport(level: number, cx: number, cy: number, layout: CardLayout, camera?: CameraModel): {
+declare function zoomViewport(level: number, cx: number, cy: number, layout: CardLayout, camera?: CameraModel, centring?: number): {
     x: number;
     y: number;
     w: number;
@@ -2392,7 +2401,7 @@ declare function zoomViewport(level: number, cx: number, cy: number, layout: Car
  * `level`. The aiming rect's corner drag re-derives its focus through this
  * so the rect stays under the pointer in either camera model.
  */
-declare function focusForViewportCentre(cX: number, cY: number, level: number, layout: CardLayout, camera?: CameraModel): {
+declare function focusForViewportCentre(cX: number, cY: number, level: number, layout: CardLayout, camera?: CameraModel, centring?: number): {
     cx: number;
     cy: number;
 };

package/dist/index.js

@@ -1168,8 +1168,13 @@ var ZOOM_STYLES = {
     rampOut: 0.5,
     chainGap: 3,
     pan: 0.55,
-    ease: "css-bezier(0.16, 1, 0.3, 1)",
-    panEase: "css-bezier(0.22, 1, 0.36, 1)",
+    // The reference's corner trace at 60 fps: a quarter of the move by a
+    // fifth of the time, two thirds by half, the rest a settle. That is
+    // CSS `ease` (0.25, 0.1, 0.25, 1), a small lead-in and a long tail;
+    // (0.16, 1, 0.3, 1) put half the move in the first sixty milliseconds
+    // and read as a twitch.
+    ease: "css-bezier(0.25, 0.1, 0.25, 1)",
+    panEase: "css-bezier(0.3, 0.05, 0.25, 1)",
     followSafeRatio: 0.45,
     followRecenter: 0.55,
     followLookahead: 0.4,
@@ -1964,19 +1969,19 @@ function cameraCentring(level) {
   const u = clamp013((level - 1) / CAMERA_CENTRE_RAMP);
   return u * u * (3 - 2 * u);
 }
-function zoomView(level, cx, cy, layout, camera = "card") {
+function zoomView(level, cx, cy, layout, camera = "card", centring) {
   const L = Math.max(1, level);
   const fx = layout.dx + cx * layout.dw;
   const fy = layout.dy + cy * layout.dh;
   const ox = layout.W / 2;
   const oy = layout.H / 2;
-  const t = camera === "stage" ? cameraCentring(L) : 0;
+  const t = camera === "stage" ? clamp013(centring ?? 1) : 0;
   const wcx = fx + (ox - fx) / L * (1 - t);
   const wcy = fy + (oy - fy) / L * (1 - t);
   return { level: L, fx, fy, wcx, wcy, ox, oy };
 }
-function zoomViewport(level, cx, cy, layout, camera = "card") {
-  const v = zoomView(level, cx, cy, layout, camera);
+function zoomViewport(level, cx, cy, layout, camera = "card", centring) {
+  const v = zoomView(level, cx, cy, layout, camera, centring);
   const size = 1 / v.level;
   return {
     x: (v.wcx - layout.W / (2 * v.level)) / layout.W,
@@ -1985,9 +1990,9 @@ function zoomViewport(level, cx, cy, layout, camera = "card") {
     h: size
   };
 }
-function focusForViewportCentre(cX, cY, level, layout, camera = "card") {
+function focusForViewportCentre(cX, cY, level, layout, camera = "card", centring) {
   const L = Math.max(1, level);
-  const t = camera === "stage" ? cameraCentring(L) : 0;
+  const t = camera === "stage" ? clamp013(centring ?? 1) : 0;
   const a = 1 - (1 - t) / L;
   if (a <= 1e-6) return { cx: 0.5, cy: 0.5 };
   const fx = (cX * layout.W - layout.W / 2 * (1 - t) / L) / a;
@@ -4655,13 +4660,13 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
   let chained = false;
   for (let i = 0; i < mapped.length; i++) {
     const { z, tIn, tOut } = mapped[i];
-    const entry = [clampZoomLevel(z.level), z.cx, z.cy];
+    const entry = [clampZoomLevel(z.level), z.cx, z.cy, 1];
     let cur = entry;
     const m = transitionMult(z.transition);
     if (!chained) {
       const start = push2(
         tIn - (style.rampIn - style.rampInOverlap) * m,
-        [1, z.cx, z.cy],
+        [1, z.cx, z.cy, 0],
         "none"
       );
       push2(start + style.rampIn * m, entry, spanEase(z.ease, style.ease));
@@ -4669,7 +4674,7 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
     for (const e of z.followEvents ?? []) {
       const eOut = sourceToTimeline(segments, e.t);
       if (eOut === null || eOut <= tIn || eOut >= tOut) continue;
-      const next2 = [cur[0], e.cx, e.cy];
+      const next2 = [cur[0], e.cx, e.cy, 1];
       push2(eOut, cur, "none");
       push2(Math.min(eOut + style.followRecenter, tOut), next2, panEase);
       cur = next2;
@@ -4678,7 +4683,7 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
     const next = mapped.at(i + 1);
     if (next && next.tIn - tOut <= style.chainGap) {
       const mNext = transitionMult(next.z.transition);
-      const nextValue = [clampZoomLevel(next.z.level), next.z.cx, next.z.cy];
+      const nextValue = [clampZoomLevel(next.z.level), next.z.cx, next.z.cy, 1];
       push2(
         Math.min(
           tOut + style.pan * mNext,
@@ -4691,7 +4696,7 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
     } else {
       push2(
         tOut + style.rampOut * m,
-        [1, cur[1], cur[2]],
+        [1, cur[1], cur[2], 0],
         spanEase(z.ease, style.ease)
       );
       chained = false;
@@ -5873,11 +5878,15 @@ var ON_FRAME = `(ctx, content, dt) => {
   // current zoom \u2014 a standard keyframe track in OUTPUT time (hold + arrival pairs
   // expanded by the lowering), sampled with the shared deterministic interpolator.
   // Sampled here, before the rect math, so a cover crop can follow it.
-  var lvl = 1, zx = 0.5, zy = 0.5
+  var lvl = 1, zx = 0.5, zy = 0.5, zc = -1
   var zt = d.zoomTrack
   if (zt && zt.keyframes && zt.keyframes.length) {
     var z = TL.sample(zt, tpT, TL.lerpArray)
     lvl = z[0]; zx = z[1]; zy = z[2]
+    // The stage camera's centring rides the track (0 rest, 1 apex, eased
+    // with the level); a three-component track (a document lowered before
+    // the component existed) falls back to the level band below.
+    if (z.length > 3) zc = z[3]
   }
   var barH = bar.kind && bar.kind !== 'none' ? (bar.height || 44) * s2 : 0
   var availW = Math.max(1, W - ipL - ipR), availH = Math.max(1, H - ipT - ipB - barH)
@@ -5940,8 +5949,11 @@ var ON_FRAME = `(ctx, content, dt) => {
   var wcx = fx, wcy = fy
   if (lvl > 1.001 && !d.zoomSuppressed) {
     if (camStage) {
-      var ctu = Math.max(0, Math.min(1, (lvl - 1) / ${CAMERA_CENTRE_RAMP}))
-      var ctt = ctu * ctu * (3 - 2 * ctu)
+      var ctt = zc
+      if (ctt < 0) {
+        var ctu = Math.max(0, Math.min(1, (lvl - 1) / ${CAMERA_CENTRE_RAMP}))
+        ctt = ctu * ctu * (3 - 2 * ctu)
+      }
       wcx = fx + ((W / 2 - fx) / lvl) * (1 - ctt)
       wcy = fy + ((H / 2 - fy) / lvl) * (1 - ctt)
       c.translate(W / 2, H / 2); c.scale(lvl, lvl); c.translate(-wcx, -wcy)