@lark-apaas/coding-registry-buildless 0.1.20 → 0.1.22

package/scripts/deck-stage.js

@@ -111,11 +111,86 @@
  *       @media (prefers-reduced-motion:no-preference){ [data-deck-active] .fade-up{ animation: fadeUp .5s both } }
  *       @keyframes fadeUp { from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
  *     Avoid infinite decorative loops on slide content.
+ *
+ * window.__miaodaMirror (defined below) is Magic-Share sync plumbing between
+ * this component and the miaoda host — internal; do not call it from slide
+ * code or remove it.
  */
 /* END USAGE */
 
 (() => {
   if (typeof window === 'undefined') return;
+
+  // ── Mirror sync singleton ──────────────────────────────────────────────────
+  // Shared by every buildless script on the page (first one to load defines
+  // it). Inlined per script rather than shipped as its own registry file:
+  // call sites use the global bare, so inlining is what guarantees
+  // definition-before-use — a separate copy-in file would add a whole "SDK
+  // copied but <script> tag missing" failure mode. Keep this block identical
+  // across deck-stage.js / design-canvas.jsx / animations.jsx — same
+  // convention as the mobile-UA regex. Two halves of
+  // the 妙享 (Magic Share) mirror protocol:
+  //   emit(msg, opts)   — stamps msg.__mirror so the host relay treats the
+  //                       message as a broadcastable UI-state snapshot;
+  //                       unstamped messages are never mirrored. opts.key is
+  //                       the sync channel (maps to the share SDK's
+  //                       actionType): late joiners receive only the LATEST
+  //                       snapshot per key, so states that overwrite each
+  //                       other must share one key. opts.throttle is the
+  //                       suggested host-side coalescing interval in ms —
+  //                       snapshots make dropped intermediate frames
+  //                       lossless, so hint it on any continuous gesture.
+  //   onApply(type, fn) — replay entry for a message type this script itself
+  //                       emits. The host sends {type:'miaoda:mirror:apply',
+  //                       uuid, message, latencyMs} and needs
+  //                       {type:'miaoda:mirror:apply-result', uuid, result}
+  //                       back to drive the SDK's retry: result.type
+  //                       'failed' means retry (use it for transient
+  //                       not-ready states), 'ignored' is terminal (not
+  //                       applicable / bad payload), 'applied' is success.
+  //                       Unregistered types stay silent on purpose —
+  //                       another script on the page may own them, and the
+  //                       host's timeout is the backstop.
+  if (!window.__miaodaMirror) {
+    const appliers = new Map(); // message.type -> Set<fn>
+    window.__miaodaMirror = {
+      emit(msg, opts) {
+        try { window.parent.postMessage(Object.assign({}, msg, { __mirror: Object.assign({ v: 1 }, opts) }), '*'); } catch (e) {}
+      },
+      onApply(type, fn) {
+        if (!appliers.has(type)) appliers.set(type, new Set());
+        appliers.get(type).add(fn);
+        return () => { const s = appliers.get(type); if (s) s.delete(fn); };
+      },
+    };
+    window.addEventListener('message', async (e) => {
+      // Replays are accepted from the host frame only — generated pages embed
+      // arbitrary third-party iframes, any of which could otherwise forge an
+      // apply and drive state (plus its persisted side effects).
+      if (e.source !== window.parent) return;
+      const d = e.data;
+      if (!d || d.type !== 'miaoda:mirror:apply' || !d.message || !d.message.type) return;
+      const fns = appliers.get(d.message.type);
+      if (!fns || !fns.size) return;
+      // Merge across handlers (multi-instance case): one success is enough.
+      // Instances share a channel, so a sibling that can't apply yet (a lazily
+      // slotted second deck returning 'failed') must not poison an applied
+      // result into an SDK retry storm of no-ops — 'failed' only stands when
+      // nobody applied. Every handler still runs (no short-circuit) so each
+      // sibling instance gets the state.
+      let result = { type: 'ignored', reason: 'no applier result' };
+      for (const fn of Array.from(fns)) {
+        let r;
+        try { r = await fn(d.message, { latencyMs: d.latencyMs, uuid: d.uuid }); }
+        catch (err) { r = { type: 'failed', reason: String((err && err.message) || err) }; }
+        if (!r) continue;
+        if (r.type === 'applied') result = r;
+        else if (result.type !== 'applied' && (r.type === 'failed' || result.type !== 'failed')) result = r;
+      }
+      try { window.parent.postMessage({ type: 'miaoda:mirror:apply-result', uuid: d.uuid, result }, '*'); } catch (e2) {}
+    });
+  }
+
   const DESIGN_W_DEFAULT = 1920;
   const DESIGN_H_DEFAULT = 1080;
   // Safe margin around the scaled slide in edit/preview (non-presenting) mode,
@@ -149,7 +224,15 @@
    * reuses. It costs one thing — render() also resets that img's `sizes`,
    * discarding the rail-width hint _materialize sets; the URL still matches the
    * slide's, so the thumb reuses the slide's decoded bitmap. */
-  const KEEP_LIVE_PREFIXES = ['cd-'];
+  /* The device frames (ios-/android-/macos-/browser-) get in on the *other* half
+   * of the rule. Their content lives in a shadow root, so cloneNode captures none
+   * of it — for them re-mounting is not "adds nothing", it is the only way to get
+   * the content at all. They do satisfy clause 2: purely presentational, read
+   * attributes and paint the shadow, no storage and no messages.
+   * design-canvas is deliberately NOT on this list — it reads localStorage,
+   * fetches its sidecar and posts to the host on mount, so running it once per
+   * thumbnail would corrupt the real state. */
+  const KEEP_LIVE_PREFIXES = ['cd-', 'ios-', 'android-', 'macos-', 'browser-'];
   const keepsCloneLive = (el) => KEEP_LIVE_PREFIXES.some((p) => el.localName.startsWith(p));
 
   /* Why a clone needs a substrate rule of its own: _collectAuthorCss samples
@@ -880,6 +963,57 @@
       });
       // Announce to the host that this product IS a deck scene.
       try { window.parent.postMessage({ type: 'miaoda:deck:available' }, '*'); } catch (e) {}
+      // Magic Share replay entries — each consumes the very message type this
+      // component emits, so the emit↔apply contract lives in one file and is
+      // version-consistent on both ends of a share by construction. Replays
+      // route through the same internal paths as local interaction (_go, the
+      // miaoda:deck:* inbound handlers); the re-emit those paths produce is
+      // the host role gate's to drop (the protocol's first anti-echo layer).
+      // Synthetic replays through _onMessage run under _applyingMirror so the
+      // handlers can tell "presenter state to render" from "this viewer's own
+      // choice to persist" (see the rail localStorage guard).
+      const applyViaOnMessage = (data) => {
+        this._applyingMirror = true;
+        try { this._onMessage({ data }); } finally { this._applyingMirror = false; }
+      };
+      // Capture iframes navigate on their own — the emit side stays unstamped
+      // there for exactly that reason, and the replay entries stay
+      // unregistered symmetrically so a (mis)forwarded apply can't steer a
+      // pinned thumbnail either.
+      this._mirrorOff = this._snthumb ? [] : [
+        window.__miaodaMirror.onApply('miaoda:deck:slide-changed', (m) => {
+          // isFinite, not typeof: NaN|0 would silently land on slide 1.
+          if (!Number.isFinite(m.index) || m.index < 0) return { type: 'ignored', reason: 'bad index' };
+          // Slides are collected by slotchange AFTER connectedCallback, so a
+          // late joiner's replay can beat them — that's transient, and only
+          // 'failed' makes the SDK retry ('ignored' would strand the joiner
+          // on slide 1).
+          if (!this._slides.length) return { type: 'failed', reason: 'no slides yet' };
+          const requested = m.index | 0;
+          const clamped = Math.max(0, Math.min(this._slides.length - 1, requested));
+          if (clamped !== requested) {
+            // Fewer slides than the presenter (reload lag after an agent
+            // edit): show the nearest page as best effort, but answer
+            // 'failed' so the SDK keeps retrying until the slide exists —
+            // 'applied' here would strand this end on the clamped page.
+            if (clamped !== this._index) this._go(clamped, 'api');
+            return { type: 'failed', reason: 'requested slide not present yet' };
+          }
+          if (clamped === this._index) return { type: 'applied' };
+          this._go(clamped, 'api');
+          return this._index === clamped ? { type: 'applied' } : { type: 'failed', reason: 'goto did not land' };
+        }),
+        window.__miaodaMirror.onApply('miaoda:deck:presenting-changed', (m) => {
+          if (typeof m.on !== 'boolean') return { type: 'ignored', reason: 'no on' };
+          applyViaOnMessage({ type: 'miaoda:deck:presenting', on: m.on });
+          return { type: 'applied' };
+        }),
+        window.__miaodaMirror.onApply('miaoda:deck:rail-visible-changed', (m) => {
+          if (typeof m.on !== 'boolean') return { type: 'ignored', reason: 'no on' };
+          applyViaOnMessage({ type: 'miaoda:deck:rail-visible', on: m.on });
+          return { type: 'applied' };
+        }),
+      ];
     }
 
     _enableRail() {
@@ -1235,6 +1369,8 @@
       if (this._headObserver) this._headObserver.disconnect();
       (this._thumbs || []).forEach((t) => clearTimeout(t._canvasRecapTimer));
       if (this._onTweakChange) window.removeEventListener('tweakchange', this._onTweakChange);
+      (this._mirrorOff || []).forEach((off) => off());
+      this._mirrorOff = null;
     }
 
     attributeChangedCallback() {
@@ -1689,6 +1825,16 @@
       if (n >= 0 && n !== this._index) this._go(n, 'api');
     }
 
+    // Single home for the capture-iframe rule: presenter-popup thumbnails
+    // (_snthumb) navigate on their own, so nothing they post may carry the
+    // Magic Share stamp — a stamped emit from a pinned N±1 thumbnail would
+    // broadcast conflicting state. Route every stamp through here so a new
+    // emit site can't forget the rule.
+    _stampMirror(msg, key) {
+      if (!this._snthumb) msg.__mirror = { v: 1, key: key };
+      return msg;
+    }
+
     _applyIndex({ broadcast = true, reason = 'init' } = {}) {
       if (!this._slides.length) return;
       const prev = this._prevIndex == null ? -1 : this._prevIndex;
@@ -1718,8 +1864,14 @@
       this._syncNotesBody();
 
       if (broadcast) {
-        // (1) Parent-window postMessage for speaker-notes renderers.
-        try { window.parent.postMessage({ type: 'miaoda:deck:slide-changed', index: curr, total: this._slides.length, skipped: this._skippedIndices() }, '*'); } catch (e) {}
+        // (1) Parent-window postMessage for speaker-notes renderers, stamped
+        //     __mirror for Magic Share. Capture iframes (presenter-popup
+        //     thumbnails pinned to N±1) navigate on their own — stamping them
+        //     would broadcast conflicting indices, so they stay unstamped.
+        try {
+          const msg = { type: 'miaoda:deck:slide-changed', index: curr, total: this._slides.length, skipped: this._skippedIndices() };
+          window.parent.postMessage(this._stampMirror(msg, 'deck:slide'), '*');
+        } catch (e) {}
 
         // (2) In-page CustomEvent on the <deck-stage> element itself.
         //     Bubbles and composes out of shadow DOM so slide code can listen:
@@ -1977,6 +2129,10 @@
     _onMessage(e) {
       const d = e.data;
       if (d && d.type === 'miaoda:deck:presenting' && typeof d.on === 'boolean') {
+        // Same-value messages (incl. mirror replays routed back through here)
+        // must not re-run the layout work or re-emit. _presenting starts
+        // undefined, so the first message always lands.
+        if (d.on === this._presenting) return;
         this._presenting = d.on;
         this._syncMobileMode();
         if (!d.on) this._toggleMobUi(false);
@@ -1985,6 +2141,9 @@
         this._closeMenu();
         this._fit();
         this._scaleThumbs();
+        // Presenting is host-driven, so the inbound handler is the one place
+        // the state settles — snapshot it out for Magic Share from here.
+        try { window.parent.postMessage(this._stampMirror({ type: 'miaoda:deck:presenting-changed', on: d.on }, 'deck:presenting'), '*'); } catch (e) {}
       }
       // Host's Preview segment (ViewerMode='none'): the rail's drag-reorder /
       // right-click skip-delete affordances are editing chrome, so hide it
@@ -2007,9 +2166,14 @@
       if (d && d.type === 'miaoda:deck:rail-visible' && typeof d.on === 'boolean') {
         if (d.on === this._railVisible) return;
         this._railVisible = d.on;
-        try { localStorage.setItem('deck-stage.railVisible', d.on ? '1' : '0'); } catch (e) {}
+        // Rail visibility is a per-viewer preference — a mirror replay drives
+        // the visual state but must not overwrite what this viewer chose for
+        // themselves after the share ends.
+        if (!this._applyingMirror) {
+          try { localStorage.setItem('deck-stage.railVisible', d.on ? '1' : '0'); } catch (e) {}
+        }
         // Notify the parent so its toolbar state stays in sync.
-        try { window.parent.postMessage({ type: 'miaoda:deck:rail-visible-changed', on: d.on }, '*'); } catch (e) {}
+        try { window.parent.postMessage(this._stampMirror({ type: 'miaoda:deck:rail-visible-changed', on: d.on }, 'deck:rail-visible'), '*'); } catch (e) {}
         // Arm the transition, commit it, then flip state — otherwise the
         // browser coalesces both writes and nothing animates on show.
         this.setAttribute('data-rail-anim', '');
@@ -2132,6 +2296,9 @@
         this._fit();
         this._toggleMobUi(false);
         try { window.parent.postMessage({ type: 'miaoda:deck:presenting-dismissed' }, '*'); } catch (err) {}
+        // The mobile back button flips presenting locally (no host round-trip),
+        // so mirror the settled state from here too.
+        try { window.parent.postMessage(this._stampMirror({ type: 'miaoda:deck:presenting-changed', on: false }, 'deck:presenting'), '*'); } catch (e) {}
       });
       const strip = document.createElement('div');
       strip.className = 'mob-strip';
@@ -2742,7 +2909,10 @@
       this._emitDeckChange({ action: on ? 'skip' : 'unskip', from: i, slide });
       // Re-broadcast so the presenter popup's prev/next thumbnails re-pick
       // the nearest non-skipped slide without waiting for a nav event.
-      try { window.parent.postMessage({ type: 'miaoda:deck:slide-changed', index: this._index, total: this._slides.length, skipped: this._skippedIndices() }, '*'); } catch (e) {}
+      try {
+        const msg = { type: 'miaoda:deck:slide-changed', index: this._index, total: this._slides.length, skipped: this._skippedIndices() };
+        window.parent.postMessage(this._stampMirror(msg, 'deck:slide'), '*');
+      } catch (e) {}
     }
 
     _skippedIndices() {