@lark-apaas/coding-registry-buildless 0.1.17 → 0.1.18-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-registry-buildless",
-  "version": "0.1.17",
+  "version": "0.1.18-beta.0",
   "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

@@ -130,6 +130,28 @@
   // Slide-authored controls that should keep a tap instead of it navigating.
   const INTERACTIVE_SEL = 'a[href], button, input, select, textarea, summary, label, video[controls], audio[controls], [role="button"], [onclick], [tabindex]:not([tabindex^="-"]), [contenteditable]:not([contenteditable="false" i])';
 
+  /* Custom element families whose thumbnail clones keep their tag instead of
+   * being neutered (see _materialize).
+   *
+   * A whitelist rather than repairing the replacement <div>: rewriting the tag
+   * drops every selector keyed on it at once — the type selector plus any
+   * combinator naming it, and cd-elements styles its elements exactly that way
+   * (`cd-image{display:contents}`) — so copying declarations back onto the div
+   * is unbounded and only ever partially right. Restoring `display` alone leaves
+   * `my-cols{display:grid;grid-template-columns:1fr 1fr}` a one-column grid.
+   *
+   * Admission needs both, since a whitelisted clone mounts once per thumbnail:
+   *   1. rendered content sits in the element's own light DOM, so cloneNode
+   *      already captured it and re-mounting adds nothing;
+   *   2. mounting is idempotent and side-effect-free.
+   * cd-* qualifies: <cd-image> inlines a real <img> carrying the computed
+   * src/srcset, and render() is an idempotent attribute pass over an <img> it
+   * 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-'];
+  const keepsCloneLive = (el) => KEEP_LIVE_PREFIXES.some((p) => el.localName.startsWith(p));
+
   // Mirrors the host platform's isMobile() (UA regex + iPad maxTouchPoints);
   // the product iframe is cross-origin, so the shared helper can't be
   // imported. Deliberately NOT viewport-based: the desktop workbench renders
@@ -865,16 +887,22 @@
           }
         });
       }, { root: this._rail, rootMargin: '400px 0px' });
-      // Tweaks typically change CSS vars / attrs OUTSIDE <deck-stage>
-      // (on <html>, <body>, a wrapper div, or a <style> tag), which
-      // _liveObserver can't see. Re-snapshot author CSS (constructable
-      // sheet is shared by reference, so one replaceSync updates every
-      // thumb shadow root) and re-sync each thumb host's attrs + custom
-      // properties. In-slide DOM mutations are _liveObserver's job.
-      // Debounced so slider drags don't thrash.
-      this._onTweakChange = () => {
-        clearTimeout(this._tweakTimer);
-        this._tweakTimer = setTimeout(() => {
+      // Whenever author CSS changes anywhere outside the slides, the thumbnail
+      // clones need it re-snapshotted: they read author styles through a
+      // separate constructable sheet, not through the document. _liveObserver
+      // only watches the slides, so it never sees a rule written on <html>,
+      // <body>, a wrapper div, or a <style>/<link> in head. Re-snapshot (the
+      // sheet is shared by reference, so one replaceSync updates every thumb
+      // shadow root), then re-sync each thumb host's attrs + custom properties
+      // — a freshly arrived sheet can define vars the mirrored values predate.
+      // In-slide DOM mutations stay _liveObserver's job.
+      //
+      // Every trigger shares this one debounce timer on purpose: two triggers
+      // landing together must collapse into ONE resync, or it costs two
+      // replaceSyncs plus two full passes of var mirroring across every thumb.
+      this._resyncAuthorCss = () => {
+        clearTimeout(this._authorCssTimer);
+        this._authorCssTimer = setTimeout(() => {
           this._snapshotAuthorCss();
           // One getComputedStyle for the whole batch — each
           // getPropertyValue read below reuses the same computed style
@@ -885,7 +913,42 @@
           });
         }, 120);
       };
+      // Trigger: the TweaksPanel's sliders/toggles, which write CSS vars
+      // outside <deck-stage>. Debouncing is what keeps a slider drag from
+      // thrashing the resync.
+      this._onTweakChange = () => this._resyncAuthorCss();
       window.addEventListener('tweakchange', this._onTweakChange);
+      // A <style>/<link> reaching document.head after the snapshot below has to
+      // re-enter it. That snapshot runs while <deck-stage> upgrades, which can
+      // precede a deferred or CDN-hosted SDK script injecting a rule the clones
+      // need — otherwise whichever <script src> won the race decides whether
+      // thumbnails are faithful. cd-elements is the live case: the first
+      // <cd-image>'s connectedCallback is what puts `cd-image{display:contents}`
+      // in head, and a KEEP_LIVE_PREFIXES clone that misses it renders as an
+      // unstyled `display:inline` element.
+      // Trigger: a sheet joining or leaving head. Same resync as any other
+      // author-CSS change, so it goes through the shared path above — no
+      // re-clone needed, and a tweak arriving alongside it collapses into one.
+      const restyling = (nodes) => {
+        for (const n of nodes) {
+          // The print-freeze <style> is head churn this component causes itself,
+          // carrying nothing a thumbnail needs.
+          if (n === this._freezeStyle) continue;
+          if (n.tagName === 'STYLE' || n.tagName === 'LINK') return true;
+        }
+        return false;
+      };
+      this._headObserver = new MutationObserver((records) => {
+        // Removals matter too: a theme switcher swapping one <link> for another
+        // would otherwise leave the dropped sheet's rules in the snapshot.
+        for (const r of records) {
+          if (restyling(r.addedNodes) || restyling(r.removedNodes)) {
+            this._resyncAuthorCss();
+            return;
+          }
+        }
+      });
+      this._headObserver.observe(document.head, { childList: true });
       this._snapshotAuthorCss();
       // Build the rail now that it's enabled — slotchange already fired,
       // so _renderRail's early-return skipped the initial build.
@@ -1081,7 +1144,7 @@
       if (this._dragGhost) { this._dragGhost.remove(); this._dragGhost = null; }
       this.removeEventListener('click', this._onTap);
       if (this._liveTimer) clearTimeout(this._liveTimer);
-      if (this._tweakTimer) clearTimeout(this._tweakTimer);
+      if (this._authorCssTimer) clearTimeout(this._authorCssTimer);
       if (this._railAnimTimer) clearTimeout(this._railAnimTimer);
       if (this._notesPersistTimer) clearTimeout(this._notesPersistTimer);
       clearTimeout(this._mobUiTimer);
@@ -1090,6 +1153,7 @@
       if (this._scaleRaf) cancelAnimationFrame(this._scaleRaf);
       if (this._liveObserver) this._liveObserver.disconnect();
       if (this._railObserver) this._railObserver.disconnect();
+      if (this._headObserver) this._headObserver.disconnect();
       (this._thumbs || []).forEach((t) => clearTimeout(t._canvasRecapTimer));
       if (this._onTweakChange) window.removeEventListener('tweakchange', this._onTweakChange);
     }
@@ -2377,7 +2441,8 @@
       });
       // Custom elements inside the slide would have their
       // connectedCallback fire when the clone is appended. Replace them
-      // with inert boxes so a component-heavy deck doesn't run N copies
+      // with inert boxes — except the KEEP_LIVE_PREFIXES families — so a
+      // component-heavy deck doesn't run N copies
       // of each component's mount logic in the rail. Children are
       // preserved so layout-wrapper elements (<my-column><h2>…</h2>)
       // still show their authored content; the querySelectorAll NodeList
@@ -2400,12 +2465,13 @@
         while (el.firstChild) box.appendChild(el.firstChild);
         return box;
       };
+      const needsNeuter = (el) => el.localName.includes('-') && !keepsCloneLive(el);
       // querySelectorAll('*') returns descendants only — a custom-element
       // slide root (<my-slide>…</my-slide>) would slip through and upgrade
       // on append. Swap the root first.
-      if (clone.tagName.includes('-')) clone = neuter(clone);
+      if (needsNeuter(clone)) clone = neuter(clone);
       clone.querySelectorAll('*').forEach((el) => {
-        if (el.tagName.includes('-')) el.replaceWith(neuter(el));
+        if (needsNeuter(el)) el.replaceWith(neuter(el));
       });
       clone.style.cssText += ';position:absolute;top:0;left:0;transform-origin:0 0;' +
         'pointer-events:none;width:' + dw + 'px;height:' + dh + 'px;' +