@lark-apaas/coding-registry-buildless 0.1.19 → 0.1.20-beta.0

package/package.json

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

@@ -152,6 +152,47 @@
   const KEEP_LIVE_PREFIXES = ['cd-'];
   const keepsCloneLive = (el) => KEEP_LIVE_PREFIXES.some((p) => el.localName.startsWith(p));
 
+  /* Why a clone needs a substrate rule of its own: _collectAuthorCss samples
+   * document.styleSheets, which never lists a shadow root's styles, so a clone
+   * gets 100% of the author's CSS and 0% of deck-stage's. That split is deliberate
+   * (no .rail / .thumb / .stage chrome inside a clone) but it halves a neutralising
+   * pair — author `html { background }` travels and _applyAuthorCss's :host alias
+   * lands it right under the clone, while the substrate that covers it on the
+   * stage cannot travel at all.
+   * Read off the live stage, never restated here: a second declaration stops
+   * matching the moment a mode selector or a theme moves the real one (the reason
+   * _syncThumbHostAttrs mirrors computed values rather than stylesheet text).
+   * !important costs the author every override of this one property, their own
+   * !important included. Intended: the substrate belongs to whoever renders the
+   * slide. Specificity can't carry it alone — the alias is zeroed to :where(:host)
+   * so a plain rule wins, but importance outranks specificity. Own sheet rather
+   * than appended to the author snapshot, so their CSS stays verbatim. */
+  const cloneBaseCss = (substrate) => ':host { background: ' + substrate + ' !important; }';
+
+  /* Alpha is pulled out of the serialisation, never pattern-matched at the end of
+   * the string: a trailing-", 0)" test also fires on every opaque colour whose
+   * blue channel is zero (rgb(255, 0, 0), rgb(0, 0, 0)), skipping a layer that
+   * does paint.
+   * Two serialisations to read, because computed background-color drops the
+   * authored notation only for sRGB: hex, named colours, hsl(), transparent and
+   * light-dark() all come back as rgb()/rgba() with comma-separated alpha, while
+   * anything wider keeps its own function and puts alpha after a slash —
+   * oklch(L C H / 0), color(srgb 1 0 0 / 0), oklab(…) from color-mix(). Only the
+   * host end of _slideSubstrate's chain is author-styleable, but that is enough
+   * for a transparent wide-gamut colour to reach here. Unknown shapes count as
+   * opaque: they at least give the clone a substrate. */
+  const alphaOf = (bg) => {
+    const slashed = /\/\s*([0-9.eE+-]+)(%?)\s*\)\s*$/.exec(bg);
+    if (slashed) return parseFloat(slashed[1]) / (slashed[2] ? 100 : 1);
+    const legacy = /^rgba?\(([^)]*)\)$/.exec(bg);
+    if (legacy) {
+      const parts = legacy[1].split(',');
+      if (parts.length === 4) return parseFloat(parts[3]);
+    }
+    return 1;
+  };
+  const paintsNothing = (bg) => !bg || bg === 'transparent' || alphaOf(bg) === 0;
+
   // 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
@@ -220,6 +261,7 @@
       position: relative;
       transform-origin: center center;
       flex-shrink: 0;
+      /* Sole declaration of the slide substrate; _slideSubstrate reads it back. */
       background: #fff;
       will-change: transform;
     }
@@ -1044,9 +1086,10 @@
      *  <deck-stage> ancestor, so a rule like `deck-stage section { background }`
      *  (the common per-slide default-background idiom) would never match and
      *  the clone renders with a transparent background — through which the
-     *  page-level html/body background (rewritten to :host above) leaks. The
-     *  thumb's own host IS the deck-stage from the clone's perspective, so
-     *  alias deck-stage → :host to restore the match. */
+     *  thumb host shows. The thumb's own host IS the deck-stage from the clone's
+     *  perspective, so alias deck-stage → :host to restore the match. The alias
+     *  also lands a page-level html/:root background right under the clone, a spot
+     *  it never occupies on the stage — _mountCloneStyles covers that. */
     _applyAuthorCss(rawCss) {
       const authorCss = rawCss
         // The shadow host is featureless outside the functional :host(...)
@@ -1090,6 +1133,42 @@
       }
     }
 
+    /** Not just .canvas: mobile browse and print clear it on purpose to expose the
+     *  layer behind, so walk the same layers the stage composites — and stop at the
+     *  host, because the next one up is the author's page background, the thing
+     *  that must never become a substrate. '' when nothing paints; only happens in
+     *  modes that render no clone, and the caller then adds no rule. */
+    _slideSubstrate() {
+      for (const el of [this._canvas, this._stage, this]) {
+        if (!el) continue;
+        const bg = getComputedStyle(el).backgroundColor;
+        if (!paintsNothing(bg)) return bg;
+      }
+      return '';
+    }
+
+    /** One base sheet shared by reference across every clone, so re-reading it on
+     *  each mount also re-levels clones built earlier — that is what carries a
+     *  mid-session theme change to thumbs already on screen. */
+    _mountCloneStyles(sr) {
+      const substrate = this._slideSubstrate();
+      const baseCss = substrate ? cloneBaseCss(substrate) : '';
+      if (this._adoptedSheet) {
+        if (!this._cloneBaseSheet) this._cloneBaseSheet = new CSSStyleSheet();
+        this._cloneBaseSheet.replaceSync(baseCss);
+        sr.adoptedStyleSheets = [this._adoptedSheet, this._cloneBaseSheet];
+        return;
+      }
+      // replaceSync threw — fall back to inline <style>, one per sheet so the
+      // author's text stays a verbatim block.
+      const author = document.createElement('style');
+      author.textContent = this._authorCss || '';
+      sr.appendChild(author);
+      const base = document.createElement('style');
+      base.textContent = baseCss;
+      sr.appendChild(base);
+    }
+
     _syncThumbHostAttrs(host, cs) {
       const de = document.documentElement;
       // setAttribute overwrites but can't delete — an attr removed from
@@ -2368,12 +2447,7 @@
       host.style.cssText = 'position:absolute;inset:0;';
       this._syncThumbHostAttrs(host);
       const sr = host.attachShadow({ mode: 'open' });
-      if (this._adoptedSheet) sr.adoptedStyleSheets = [this._adoptedSheet];
-      else {
-        const st = document.createElement('style');
-        st.textContent = this._authorCss || '';
-        sr.appendChild(st);
-      }
+      this._mountCloneStyles(sr);
       if (entry.clone) sr.appendChild(entry.clone.cloneNode(true));
       card.appendChild(host);
       wrap.appendChild(card);
@@ -2480,12 +2554,7 @@
       host.style.cssText = 'position:absolute;inset:0;';
       this._syncThumbHostAttrs(host);
       const sr = host.attachShadow({ mode: 'open' });
-      if (this._adoptedSheet) sr.adoptedStyleSheets = [this._adoptedSheet];
-      else {
-        const st = document.createElement('style');
-        st.textContent = this._authorCss || '';
-        sr.appendChild(st);
-      }
+      this._mountCloneStyles(sr);
       sr.appendChild(clone);
       entry.frame.appendChild(host);
       entry.host = host;