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

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.20260720122519",
   "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,
@@ -1364,26 +1365,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);
     }