@lark-apaas/coding-registry-buildless 0.1.7 → 0.1.8-alpha.20260720141429

package/components/tweaks-panel.jsx

@@ -63,9 +63,9 @@
 // ─────────────────────────────────────────────────────────────────────────────
 
 const __TWEAKS_STYLE = `
-  .twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;
+  .twk-panel{position:fixed;right:16px;top:16px;z-index:2147483646;width:280px;
     max-height:calc(100vh - 32px);display:flex;flex-direction:column;
-    transform:scale(var(--dc-inv-zoom,1));transform-origin:bottom right;
+    transform:scale(var(--dc-inv-zoom,1));transform-origin:top right;
     background:rgba(250,249,247,.78);color:#29261b;
     -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
     border:.5px solid rgba(255,255,255,.6);border-radius:14px;
@@ -202,6 +202,10 @@ function useTweaks(defaults) {
 function TweaksPanel({ title = 'Tweaks', children }) {
   const [open, setOpen] = React.useState(false);
   const dragRef = React.useRef(null);
+  // x = distance from the viewport's right edge, y = distance from its TOP.
+  // The panel anchors top-right (right/top in CSS) so it clears the host's
+  // bottom toolbar; both axes still grow inward, so clamp/drag math is
+  // symmetric with the old bottom-right anchor.
   const offsetRef = React.useRef({ x: 16, y: 16 });
   const PAD = 16;
 
@@ -210,13 +214,13 @@ function TweaksPanel({ title = 'Tweaks', children }) {
     if (!panel) return;
     const w = panel.offsetWidth, h = panel.offsetHeight;
     const maxRight = Math.max(PAD, window.innerWidth - w - PAD);
-    const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);
+    const maxTop = Math.max(PAD, window.innerHeight - h - PAD);
     offsetRef.current = {
       x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),
-      y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y)),
+      y: Math.min(maxTop, Math.max(PAD, offsetRef.current.y)),
     };
     panel.style.right = offsetRef.current.x + 'px';
-    panel.style.bottom = offsetRef.current.y + 'px';
+    panel.style.top = offsetRef.current.y + 'px';
   }, []);
 
   React.useEffect(() => {
@@ -253,11 +257,11 @@ function TweaksPanel({ title = 'Tweaks', children }) {
     const r = panel.getBoundingClientRect();
     const sx = e.clientX, sy = e.clientY;
     const startRight = window.innerWidth - r.right;
-    const startBottom = window.innerHeight - r.bottom;
+    const startTop = r.top;
     const move = (ev) => {
       offsetRef.current = {
         x: startRight - (ev.clientX - sx),
-        y: startBottom - (ev.clientY - sy),
+        y: startTop + (ev.clientY - sy),
       };
       clampToViewport();
     };
@@ -274,7 +278,7 @@ function TweaksPanel({ title = 'Tweaks', children }) {
     <>
       <style>{__TWEAKS_STYLE}</style>
       <div ref={dragRef} className="twk-panel" data-miaoda-chrome=""
-           style={{ right: offsetRef.current.x, bottom: offsetRef.current.y }}>
+           style={{ right: offsetRef.current.x, top: offsetRef.current.y }}>
         <div className="twk-hd" onMouseDown={onDragStart}>
           <b>{title}</b>
           <button className="twk-x" aria-label="Close tweaks"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-registry-buildless",
-  "version": "0.1.7",
+  "version": "0.1.8-alpha.20260720141429",
   "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,10 +38,11 @@
  *      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.
+ *      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
+ *      visible end-state to be the base style (see Entrance animations
+ *      below).
  *
  * Slides are HIDDEN, not unmounted. Non-active slides stay in the DOM with
  * `visibility: hidden` + `opacity: 0`, so their state (videos, iframes,
@@ -139,6 +140,7 @@
   const MOB_RADIUS = 8;            // card corner radius
   const MOB_BADGE_IDLE_MS = 2000;  // scroll idle before the page badge fades
   const MOB_UI_HIDE_MS = 3000;     // presenting controls auto-hide
+  const CANVAS_RECAP_MS = 1200;    // re-snapshot canvas thumbs once chart entrance animations settle
 
   const pad2 = (n) => String(n).padStart(2, '0');
 
@@ -1037,6 +1039,7 @@
       if (this._scaleRaf) cancelAnimationFrame(this._scaleRaf);
       if (this._liveObserver) this._liveObserver.disconnect();
       if (this._railObserver) this._railObserver.disconnect();
+      (this._thumbs || []).forEach((t) => clearTimeout(t._canvasRecapTimer));
       if (this._onTweakChange) window.removeEventListener('tweakchange', this._onTweakChange);
     }
 
@@ -1364,26 +1367,38 @@
         '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. */
+    /** Mobile browse (data-mobile-list) renders each card's static BASE
+     *  state — the same semantic as the thumbnail rail, print and
+     *  reduced-motion. The USAGE authoring contract makes the base style the
+     *  visible end-state (hidden lives only inside keyframes' `from`, gated
+     *  on [data-deck-active]), so animation-name:none shows exactly the
+     *  intended slide. Freezing at the END state instead would key visible
+     *  styling to a flag that MOVES during scroll: keyframe properties
+     *  (transform especially — it replaces the base value outright) snap on
+     *  and off as [data-deck-active] arrives at and leaves each card,
+     *  jolting layout. The timing longhands stay as a backstop: an authored
+     *  `animation … !important` that out-cascades our name:none still
+     *  collapses to an instant run. The attribute selector is repeated to
+     *  out-rank authored !important rules — important-vs-important resolves
+     *  by specificity, and the common `[data-deck-active] .x` gate is only
+     *  (0,2,0). Document-level like the print rule: author animations style
+     *  light-DOM slide content that shadow CSS can't reach, and <deck-stage>
+     *  is a light-DOM element document CSS can key on. Presenting/desktop
+     *  keep their animations — the rule is keyed on the host attribute, no
+     *  JS toggling needed. */
     _syncMobFreezeRule() {
       const id = 'deck-stage-mob-freeze';
       if (document.getElementById(id)) return;
+      const sel = 'deck-stage[data-mobile-list][data-mobile-list][data-mobile-list]';
       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 {' +
+        sel + ' *, ' + sel + ' *::before, ' + sel + ' *::after {' +
+        ' animation-name: none !important;' +
         ' 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; }';
+        ' animation-play-state: running !important;' +
+        ' transition-duration: 0s !important; transition-delay: 0s !important; }';
       document.head.appendChild(tag);
     }
 
@@ -2063,6 +2078,7 @@
       // Orphans — slides removed since last render.
       bySlide.forEach((t) => {
         if (this._railObserver) this._railObserver.unobserve(t.frame);
+        clearTimeout(t._canvasRecapTimer);
         t.thumb.remove();
       });
       // Put thumbs into document order to match _slides. insertBefore on
@@ -2276,6 +2292,7 @@
       // drawings appear in the thumbnail instead of a blank rectangle.
       const origCanvases = entry.slide.querySelectorAll('canvas');
       const cloneCanvases = clone.querySelectorAll('canvas');
+      const canvasImgs = []; // {orig, img} pairs kept for the delayed re-snapshot below
       cloneCanvases.forEach((el, ci) => {
         const orig = origCanvases[ci];
         if (!orig || !orig.width || !orig.height) return;
@@ -2287,6 +2304,7 @@
             ';width:' + orig.offsetWidth + 'px;height:' + orig.offsetHeight + 'px;';
           img.className = el.className;
           el.replaceWith(img);
+          canvasImgs.push({ orig, img });
         } catch (e) {}
       });
       // Images: defer decode and let the browser pick the smallest
@@ -2351,6 +2369,23 @@
       // Once materialized the IO callback is a no-op early-return —
       // unobserve so scroll doesn't keep firing it.
       if (this._railObserver) this._railObserver.unobserve(entry.frame);
+      // Chart libraries (ECharts/Chart.js) animate their entrance over ~1s and
+      // draw straight to the canvas bitmap — no DOM mutation, so _liveObserver
+      // never sees the finished frame and the toDataURL snapshot above may have
+      // caught a blank or mid-animation canvas. Re-snapshot once after the
+      // animation settles and overwrite each <img>. Guarded so a thumb that was
+      // refreshed (host swapped) or removed (img detached) since is left alone.
+      if (canvasImgs.length) {
+        clearTimeout(entry._canvasRecapTimer);
+        entry._canvasRecapTimer = setTimeout(() => {
+          entry._canvasRecapTimer = null;
+          if (entry.host !== host) return;
+          canvasImgs.forEach(({ orig, img }) => {
+            if (!img.isConnected || !orig.width || !orig.height) return;
+            try { img.src = orig.toDataURL(); } catch (e) {}
+          });
+        }, CANVAS_RECAP_MS);
+      }
     }
 
     /** Re-clone a single thumb (live-update path). No-op if the thumb
@@ -2359,6 +2394,7 @@
     _refreshThumb(slide) {
       const entry = (this._thumbs || []).find((t) => t.slide === slide);
       if (!entry || !entry.host) return;
+      clearTimeout(entry._canvasRecapTimer);
       entry.host.remove();
       entry.host = entry.clone = null;
       this._materialize(entry);