@lark-apaas/coding-registry-buildless 0.1.22 → 0.1.24-alpha.20260902135158

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-registry-buildless",
-  "version": "0.1.22",
+  "version": "0.1.24-alpha.20260902135158",
   "description": "Miaoda registry (buildless runtime) — shadcn-style copy-in SDKs (globals + CDN-pinned, browser Babel) for buildless static HTML stacks",
   "type": "module",
   "files": [

package/scripts/deck-stage.js

@@ -35,9 +35,10 @@
  *      a `deckchange`
  *      CustomEvent on the element: detail = {action, from, to, slide}.
  *  (g) mobile — on mobile devices the same deck automatically renders as
- *      a scrollable vertical card list (browse) and a rotated fullscreen
- *      presenting mode. This needs NO authoring changes: never hand-roll
- *      mobile/responsive slide layouts. Desktop behaviour is unchanged.
+ *      a scrollable vertical card list (browse) and a fullscreen presenting
+ *      mode, pseudo-landscape or upright as the host asks. This needs NO
+ *      authoring changes: never hand-roll mobile/responsive slide layouts.
+ *      Desktop behaviour is unchanged.
  *      Browse mode renders each slide's static base state and never fires
  *      entrance animations — exactly like the thumbnail rail and print
  *      (presenting keeps animations). One more surface that requires the
@@ -100,16 +101,22 @@
  *     content genuinely needs interactive behaviour static HTML can't express.
  *   - Do NOT set position/inset/width/height on the slide <section> elements —
  *     the component absolutely positions every slotted child for you.
- *   - Entrance animations: make the visible end-state the base style and
- *     animate *from* hidden. The thumbnail rail, print, and reduced-motion
- *     render each slide's static base state and never fire the animation, so
- *     a hidden base (opacity:0 on the rule itself) renders blank there while
- *     the live slide looks fine. Keep the hidden state only in the keyframes
- *     `from`, and gate the animation on [data-deck-active] and the motion
- *     query, e.g.:
+ *   - Entrance animations: the base style IS the finished slide — keyframes
+ *     only describe the path into it. Litmus test: delete every `animation`
+ *     declaration and the resting picture must not change by a pixel. The
+ *     thumbnail rail, print, and reduced-motion render exactly that
+ *     animation-less base state, so any divergence makes them disagree with
+ *     the live slide. The two frequent violations, one per direction: a
+ *     hidden base (opacity:0 on the rule itself) blanks those surfaces; and
+ *     a keyframed transform REPLACES the base transform wholesale — an
+ *     element centered via `transform: translateY(-50%)` given a scale()
+ *     entrance loses its centering on the active slide only. Keep start
+ *     states in `from` only and omit `to`: omitted properties converge on
+ *     the base value by construction. Gate on [data-deck-active] and the
+ *     motion query, e.g.:
  *       .fade-up { opacity: 1 }
  *       @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 } }
+ *       @keyframes fadeUp { from{ opacity:0; translate:0 24px } }
  *     Avoid infinite decorative loops on slide content.
  *
  * window.__miaodaMirror (defined below) is Magic-Share sync plumbing between
@@ -615,11 +622,13 @@
        Rotate only while the device is physically portrait. Once the user
        turns the phone (system auto-rotate) the viewport itself is landscape,
        and stacking another 90° would render slides sideways — so landscape
-       falls back to a plain full-bleed fit. _fitMobilePresent and
-       _mobPresentZone branch on the same orientation test. */
+       falls back to a plain full-bleed fit. data-present-portrait is the
+       host asking for an upright presentation, which suppresses the rotation
+       on a portrait device too. This selector is the third copy of the
+       predicate in _presentRotated — keep all three in phase. */
     :host([data-mobile-present]) .stage { background: #000; }
     @media (orientation: portrait) {
-      :host([data-mobile-present]) .stage {
+      :host([data-mobile-present]:not([data-present-portrait])) .stage {
         inset: auto;
         left: 50%;
         top: 50%;
@@ -890,6 +899,10 @@
       this._snthumb = /[?&](_snthumb|thumbnail)=/.test(location.search);
       this._preflight = /[?&]preflight=/.test(location.search);
       this._mobile = isMobileUA();
+      // Orientation the host asked presenting to enter in. Sticky: only a
+      // message that actually carries `orientation` moves it, so replays and
+      // any other bare {on} message leave the current orientation alone.
+      this._presentPortrait = false;
       // Layout-driven size signal. window.resize is unreliable inside
       // prerendered/reframed iOS WebViews and host-managed iframes — the
       // frame can change size without any resize event, leaving a layout
@@ -1904,7 +1917,17 @@
     _syncMobileMode() {
       const eligible = (this._mobile || this._preflight) && !this.hasAttribute('noscale') && !this._snthumb;
       this.toggleAttribute('data-mobile-list', eligible && !this._presenting);
-      this.toggleAttribute('data-mobile-present', eligible && !!this._presenting && !this._preflight);
+      const present = eligible && !!this._presenting && !this._preflight;
+      this.toggleAttribute('data-mobile-present', present);
+      this.toggleAttribute('data-present-portrait', present && this._presentPortrait);
+    }
+
+    // Single source of truth for "is the presenting stage CSS-rotated?".
+    // Read by the fit and the tap zones; the @media (orientation: portrait)
+    // rule above is the same predicate spelled in CSS, reached through the
+    // data-present-portrait attribute _syncMobileMode derives from this state.
+    _presentRotated() {
+      return !this._presentPortrait && window.innerHeight >= window.innerWidth;
     }
 
     _fitMobileList() {
@@ -2045,12 +2068,12 @@
       this.removeAttribute('data-windowed');
       this._canvas.style.width = this.designWidth + 'px';
       this._canvas.style.height = this.designHeight + 'px';
-      // Portrait: the stage is CSS-rotated, so its logical size is the
-      // swapped viewport. Landscape (user physically rotated): no rotation,
-      // plain fit. The CSS branches on the same orientation query.
-      const portrait = window.innerHeight >= window.innerWidth;
-      const lw = portrait ? window.innerHeight : window.innerWidth;
-      const lh = portrait ? window.innerWidth : window.innerHeight;
+      // Rotated: the stage is CSS-rotated, so its logical size is the swapped
+      // viewport. Otherwise (device already landscape, or the host asked for
+      // an upright presentation) it is a plain fit into the viewport.
+      const rotated = this._presentRotated();
+      const lw = rotated ? window.innerHeight : window.innerWidth;
+      const lh = rotated ? window.innerWidth : window.innerHeight;
       const s = Math.min(lw / this.designWidth, lh / this.designHeight);
       this._canvas.style.transform = 'scale(' + s + ')';
     }
@@ -2129,13 +2152,25 @@
     _onMessage(e) {
       const d = e.data;
       if (d && d.type === 'miaoda:deck:presenting' && typeof d.on === 'boolean') {
+        // orientation is optional and sticky — the host owns it end to end, and
+        // a message that omits it (a mirror replay, or a host that predates the
+        // field) means "unchanged", never "back to landscape". Absent field on
+        // a fresh deck therefore keeps the historical rotate-on-portrait
+        // behaviour, which is what the default has to be.
+        const portrait = d.orientation === 'portrait';
+        const flipped = d.orientation != null && portrait !== this._presentPortrait;
+        if (d.orientation != null) this._presentPortrait = portrait;
         // 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;
+        // undefined, so the first message always lands. The one same-value
+        // case that still has to land is an orientation flip while presenting:
+        // it carries the same `on` but needs the relayout.
+        if (d.on === this._presenting && !(flipped && d.on)) return;
         this._presenting = d.on;
         this._syncMobileMode();
-        if (!d.on) this._toggleMobUi(false);
+        // Leaving presenting, or flipping to upright (which has no control
+        // layer at all), both have to take an open one down with them.
+        if (!d.on || this._presentPortrait) this._toggleMobUi(false);
         this._syncRailHidden();
         this._syncNotesHidden();
         this._closeMenu();
@@ -2229,8 +2264,12 @@
       e.preventDefault();
       if (this.hasAttribute('data-mobile-present')) {
         const zone = this._mobPresentZone(e);
-        if (zone === 'menu') this._toggleMobUi();
-        else {
+        if (zone === 'menu') {
+          // Upright presenting ships no control layer: the host owns the exit
+          // chrome and the page navigation there, so the middle third stays
+          // inert rather than offering a second, conflicting way in.
+          if (!this._presentPortrait) this._toggleMobUi();
+        } else {
           this._advance(zone === 'prev' ? -1 : 1, 'tap');
           if (this.hasAttribute('data-mob-ui')) this._toggleMobUi(true);
         }
@@ -2246,10 +2285,9 @@
     // these comparisons — single point of change).
     _mobPresentZone(e) {
       const rect = this._stage.getBoundingClientRect();
-      // Portrait = stage is rotated, visual x comes from viewport y;
-      // landscape = no rotation, viewport x directly. Same branch as the fit.
-      const portrait = window.innerHeight >= window.innerWidth;
-      const x = portrait
+      // Rotated stage = the visual x axis comes from viewport y; unrotated =
+      // viewport x directly. Same predicate as the fit.
+      const x = this._presentRotated()
         ? (e.clientY - rect.top) / Math.max(1, rect.height)
         : (e.clientX - rect.left) / Math.max(1, rect.width);
       return x < 1 / 3 ? 'prev' : x > 2 / 3 ? 'next' : 'menu';