@lark-apaas/coding-registry-buildless 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-registry-buildless",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "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

@@ -38,6 +38,10 @@
  *      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.
+ *      Browse mode renders authored CSS animations/transitions at their
+ *      end state (presenting keeps them) — design animations so the end
+ *      state is the complete slide; never gate content visibility on an
+ *      animation having played.
  *
  * Slides are HIDDEN, not unmounted. Non-active slides stay in the DOM with
  * `visibility: hidden` + `opacity: 0`, so their state (videos, iframes,
@@ -698,7 +702,18 @@
       // slide 1, so ?thumbnail=1 alone yields a clean first-slide frame.
       this._snthumb = /[?&](_snthumb|thumbnail)=/.test(location.search);
       this._mobile = isMobileUA();
+      // 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
+      // computed at a bogus early width in place forever. ResizeObserver
+      // fires from layout itself, so it catches every real size change.
+      // Mobile-only: desktop windows deliver resize dependably.
+      if (this._mobile && typeof ResizeObserver !== 'undefined') {
+        this._mobSizeRo = new ResizeObserver(() => this._onResize());
+        this._mobSizeRo.observe(document.documentElement);
+      }
       this._syncMobileMode();
+      if (this._mobile) this._syncMobFreezeRule();
       if (this._snthumb) this.setAttribute('no-rail', '');
       this._render();
       this._loadNotes();
@@ -875,6 +890,20 @@
      *  pendingOut (when provided) and leave a placeholder until the fetch lands. */
     _collectAuthorCss(pendingOut) {
       return Array.from(document.styleSheets).map((sh) => {
+        // Inline <style>: quote the author's source text instead of
+        // re-serializing the CSSOM. Chromium serializes a var()-carrying
+        // `background` shorthand into EMPTY longhands whenever the same
+        // rule also sets any background-* longhand — exactly the
+        // gradient-text idiom (background: linear-gradient(var(--accent)…);
+        // background-clip: text), whose headline then renders invisible
+        // (text-fill stays transparent, gradient gone). Empty textContent
+        // falls through to the CSSOM path: CSS-in-JS "speedy" injectors
+        // (emotion, styled-components) insertRule() into a blank <style>,
+        // so raw text would snapshot them as nothing.
+        const node = sh.ownerNode;
+        if (node && node.tagName === 'STYLE' && node.textContent.trim()) {
+          return node.textContent;
+        }
         try {
           return Array.from(sh.cssRules).map((r) => r.cssText).join('\n');
         } catch (e) {
@@ -906,19 +935,29 @@
       const authorCss = rawCss
         // The shadow host is featureless outside the functional :host(...)
         // form, so any compound on :root — [attr], .class, #id, :pseudo —
-        // must become :host(<compound>) not :host<compound>. Same for the
-        // html type selector (Tailwind class-strategy dark mode emits
-        // html.dark; Pico uses html[data-theme]), which has nothing to
-        // match inside the thumb's shadow tree.
+        // must become :host(<compound>) not :host<compound>. :root and
+        // :host are both pseudo-classes, so this pair is also
+        // specificity-neutral as written.
         .replace(/:root((?:\[[^\]]*\]|[.#][-\w]+|:[-\w]+(?:\([^)]*\))?)+)/g, ':host($1)')
         .replace(/:root\b/g, ':host')
-        .replace(/(^|[\s,>~+(}])html((?:\[[^\]]*\]|[.#][-\w]+|:[-\w]+(?:\([^)]*\))?)+)(?![-\w])/g, '$1:host($2)')
-        .replace(/(^|[\s,>~+(}])html(?![-\w])/g, '$1:host')
-        // Same rewrite for the deck-stage type selector (see the doc comment).
+        // html / deck-stage are TYPE selectors (0,0,1) while :host is a
+        // pseudo-class (0,1,0): aliasing to bare :host would silently
+        // promote every such rule a whole specificity level and flip the
+        // author's cascade — `deck-stage section { background }` written
+        // as a low-priority default would beat the per-slide `.slide-xxx`
+        // class that overrides it, washing thumbnails out while the stage
+        // renders correctly. :where(:host) zeroes the alias and
+        // :host(:where(…)) pins compounds at plain pseudo-class level, so
+        // a rewritten rule stays within one type-unit of its document
+        // specificity and can never jump past a class-level override.
+        // (html compounds appear in the wild: Tailwind class-strategy dark
+        // mode emits html.dark; Pico uses html[data-theme].)
+        .replace(/(^|[\s,>~+(}])html((?:\[[^\]]*\]|[.#][-\w]+|:[-\w]+(?:\([^)]*\))?)+)(?![-\w])/g, '$1:host(:where($2))')
+        .replace(/(^|[\s,>~+(}])html(?![-\w])/g, '$1:where(:host)')
         // The negative-lookahead (?![-\w]) keeps `.deck-stage-title` and the
         // `--deck-stage-*` custom-property names untouched.
-        .replace(/(^|[\s,>~+(}])deck-stage((?:\[[^\]]*\]|[.#][-\w]+|:[-\w]+(?:\([^)]*\))?)+)(?![-\w])/g, '$1:host($2)')
-        .replace(/(^|[\s,>~+(}])deck-stage(?![-\w])/g, '$1:host');
+        .replace(/(^|[\s,>~+(}])deck-stage((?:\[[^\]]*\]|[.#][-\w]+|:[-\w]+(?:\([^)]*\))?)+)(?![-\w])/g, '$1:host(:where($2))')
+        .replace(/(^|[\s,>~+(}])deck-stage(?![-\w])/g, '$1:where(:host)');
       // Every custom property the author references. _syncThumbHostAttrs
       // mirrors each one's *computed* value at <deck-stage> onto the
       // thumb host so the live value wins over the :host default above
@@ -977,6 +1016,7 @@
     }
 
     disconnectedCallback() {
+      if (this._mobSizeRo) { this._mobSizeRo.disconnect(); this._mobSizeRo = null; }
       window.removeEventListener('keydown', this._onKey);
       window.removeEventListener('resize', this._onResize);
       window.removeEventListener('message', this._onMessage);
@@ -1324,6 +1364,29 @@
         'animation-play-state: running !important; transition-duration: 0s !important; } }';
     }
 
+    /** Mobile browse (data-mobile-list) force-shows every card at once, so
+     *  authored CSS animations all fire together on load — and the ones gated
+     *  on [data-deck-active] re-fire as scrolling moves that flag between
+     *  cards. Freeze them at their end state while browsing. Same jump-to-end
+     *  recipe as the print rule above (NOT animation:none, so a deck that
+     *  keeps a hidden base state still renders its content), keyed on the
+     *  host attribute so presenting/desktop keep their animations and no JS
+     *  toggling is needed. Document-level like the print rule: author
+     *  animations style light-DOM slide content that shadow CSS can't reach,
+     *  and <deck-stage> itself is a light-DOM element document CSS can key on. */
+    _syncMobFreezeRule() {
+      const id = 'deck-stage-mob-freeze';
+      if (document.getElementById(id)) return;
+      const tag = document.createElement('style');
+      tag.id = id;
+      tag.textContent =
+        'deck-stage[data-mobile-list] *, deck-stage[data-mobile-list] *::before, deck-stage[data-mobile-list] *::after {' +
+        ' animation-delay: -99s !important; animation-duration: .001s !important;' +
+        ' animation-iteration-count: 1 !important; animation-fill-mode: both !important;' +
+        ' animation-play-state: running !important; transition-duration: 0s !important; }';
+      document.head.appendChild(tag);
+    }
+
     _onSlotChange() {
       // Rail mutations (delete/move) already reconcile synchronously and
       // emit slidechange with reason 'api'; skip the async slotchange that
@@ -1478,6 +1541,12 @@
     _fitMobileList() {
       const dw = this.designWidth, dh = this.designHeight;
       const vw = window.innerWidth;
+      // Hosts (in-app WebViews, portal iframes) can run us before our frame
+      // has a real size — committing a layout at a bogus width shrinks every
+      // card to near-zero, and the correcting resize event is NOT guaranteed
+      // to follow on iOS. Bail and let the documentElement ResizeObserver
+      // (registered in connectedCallback) re-run us when layout gets a size.
+      if (!vw || vw < 40) { this._mobLastVw = -1; return; }
       this._mobLastVw = vw; // baseline for _onResize's height-only skip
       const stage = this._canvas.parentElement;
       // Clear the stage inset the desktop _fit() wrote inline.