@lark-apaas/coding-registry-buildless 0.1.10 → 0.1.11-alpha.20260729134521

package/components/animations.jsx

@@ -14,9 +14,6 @@
 // ←/→ seek, space, and 0-to-reset controls, and persists the playhead.
 // Set the optional `poster` prop (seconds) to the moment your opening scene is
 // fully composed — the product thumbnail freezes on that frame (default ~1s).
-// Stage also exposes window.__stage — seek(t) / pause() / play() / time() /
-// playing() / duration — the deterministic way to drive the playhead from
-// outside (tooling, self-checks); never synthesize key/scrubber events for that.
 // Inside <Stage>, any child can call useTime() to read the current
 // playhead (seconds). Or wrap content in <Sprite start={1} end={4}>...</Sprite>
 // to only render during that window (outside it, children are unmounted from
@@ -439,24 +436,6 @@ function Stage({
     return () => window.removeEventListener('keydown', onKey);
   }, [duration]);
 
-  // Programmatic driver for tooling (preflight / screenshot-at-t): freezes the
-  // playhead on an exact frame, unlike synthesized key/scrubber events.
-  const timeRef = React.useRef(time);
-  timeRef.current = time;
-  const playingRef = React.useRef(playing);
-  playingRef.current = playing;
-  React.useEffect(() => {
-    window.__stage = {
-      duration,
-      seek: (t) => { setPlaying(false); setTime(clamp(t, 0, duration)); },
-      pause: () => setPlaying(false),
-      play: () => setPlaying(true),
-      time: () => timeRef.current,
-      playing: () => playingRef.current,
-    };
-    return () => { delete window.__stage; };
-  }, [duration]);
-
   const ctxValue = React.useMemo(
     () => ({ time, duration, playing, setTime, setPlaying }),
     [time, duration, playing]

package/components/design-canvas.jsx

@@ -847,10 +847,6 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
         // Clear the pan-tick guard so apply() re-posts the current scale
         // even if it's unchanged — the host just reset dcScale to 1.
         window.parent.postMessage({ type: 'miaoda:canvas:present' }, '*');
-        // Re-announce the upgrade capability too — the host's readyGen reset
-        // (fires on iframe 'load', which for image/font-heavy canvases lands
-        // after the mount-time announce) drops prior state, so re-declare here.
-        window.parent.postMessage({ type: 'miaoda:upgrade:available', kind: 'design-canvas' }, '*');
         lastPostedScale.current = undefined;
         apply();
       }
@@ -864,12 +860,6 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
     // effect's restore-path apply() may already have posted the restored
     // scale (before miaoda:canvas:present), so clear the guard to re-post it in order.
     window.parent.postMessage({ type: 'miaoda:canvas:present' }, '*');
-    // Generic "upgrade" capability signal — announce that this artifact offers
-    // an upgrade entry so the host can show/hide its upgrade button. Decoupled
-    // from the canvas zoom-proxy protocol above; any product may post the same
-    // message. Listener (onHostMsg) is already registered above → announce-after-
-    // register order holds. No client-side behavior here.
-    window.parent.postMessage({ type: 'miaoda:upgrade:available', kind: 'design-canvas' }, '*');
     lastPostedScale.current = undefined;
     apply();
 

package/components/ios-frame.jsx

@@ -141,12 +141,8 @@ function IOSDevice({
       <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10 }}>
         <IOSStatusBar dark={dark} />
       </div>
-      {/* content — isolate:isolate keeps the screen in its own stacking
-          context so any z-index authored inside it stays *below* the frame
-          chrome (status bar z:10, island z:50, home indicator z:60); a
-          sticky/opaque header with a high z-index can no longer paint over
-          the status bar. */}
-      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', isolation: 'isolate' }}>
+      {/* content */}
+      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
         <div style={{ flex: 1, overflow: 'auto' }}>{children}</div>
         {keyboard && <IOSKeyboard dark={dark} />}
       </div>

package/components/tweaks-panel.jsx

@@ -62,113 +62,107 @@
 /* END USAGE */
 // ─────────────────────────────────────────────────────────────────────────────
 
-// Palette follows the Arco/Semi neutral token system the 创意设计模式 "设计风格"
-// panel is designed in (Figma node 2008-22724): a solid white card on neutral
-// grays instead of the previous warm-glass look.
-//   text-1 #1F2329  text-2 #646A73  text-3 #86909C
-//   border #DEE0E3  fill #EBECEE / #F2F3F5  accent(selected/on) #1F2329
 const __TWEAKS_STYLE = `
-  .twk-panel{position:fixed;right:16px;top:16px;z-index:2147483646;width:280px;
+  .twk-panel{position:fixed;right:16px;bottom: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:top right;
-    background:#fff;color:#1F2329;
-    border:.5px solid #DEE0E3;border-radius:12px;
-    box-shadow:0 8px 24px 8px rgba(0,0,0,.04),0 6px 12px rgba(0,0,0,.04),0 2px 6px rgba(0,0,0,.04);
-    font:12px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
+    transform:scale(var(--dc-inv-zoom,1));transform-origin:bottom 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;
+    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
+    font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
   .twk-hd{display:flex;align-items:center;justify-content:space-between;
-    padding:12px 12px 12px 16px;cursor:move;user-select:none;
-    border-bottom:.5px solid #EBECEE}
-  .twk-hd b{font-size:14px;font-weight:600;letter-spacing:.01em;color:#1F2329}
-  .twk-x{appearance:none;border:0;background:transparent;color:#86909C;
-    width:24px;height:24px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
-  .twk-x:hover{background:#F2F3F5;color:#1F2329}
-  .twk-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:14px;
+    padding:10px 8px 10px 14px;cursor:move;user-select:none}
+  .twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
+  .twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
+    width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
+  .twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
+  .twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
     overflow-y:auto;overflow-x:hidden;min-height:0;
-    scrollbar-width:thin;scrollbar-color:#DEE0E3 transparent}
+    scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
   .twk-body::-webkit-scrollbar{width:8px}
   .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
-  .twk-body::-webkit-scrollbar-thumb{background:#DEE0E3;border-radius:4px;
+  .twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
     border:2px solid transparent;background-clip:content-box}
-  .twk-body::-webkit-scrollbar-thumb:hover{background:#C9CDD4;
+  .twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);
     border:2px solid transparent;background-clip:content-box}
-  .twk-row{display:flex;flex-direction:column;gap:8px}
+  .twk-row{display:flex;flex-direction:column;gap:5px}
   .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
   .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
-    color:#1F2329}
+    color:rgba(41,38,27,.72)}
   .twk-lbl>span:first-child{font-weight:500}
-  .twk-val{color:#646A73;font-variant-numeric:tabular-nums}
+  .twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
 
-  .twk-sect{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
-    color:#86909C;padding:10px 0 0}
+  .twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
+    color:rgba(41,38,27,.45);padding:10px 0 0}
   .twk-sect:first-child{padding-top:0}
 
-  .twk-field{appearance:none;box-sizing:border-box;width:100%;min-width:0;height:32px;padding:0 10px;
-    border:.5px solid #DEE0E3;border-radius:8px;
-    background:#fff;color:inherit;font:inherit;outline:none}
-  .twk-field:focus{border-color:#1F2329;box-shadow:0 0 0 2px rgba(31,35,41,.1)}
-  select.twk-field{padding-right:24px;
-    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%234E5969' d='M0 0h10L5 6z'/></svg>");
-    background-repeat:no-repeat;background-position:right 10px center}
+  .twk-field{appearance:none;box-sizing:border-box;width:100%;min-width:0;height:26px;padding:0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;
+    background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
+  .twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
+  select.twk-field{padding-right:22px;
+    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
+    background-repeat:no-repeat;background-position:right 8px center}
 
   .twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;
-    border-radius:999px;background:#EBECEE;outline:none}
+    border-radius:999px;background:rgba(0,0,0,.12);outline:none}
   .twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
-    width:16px;height:16px;border-radius:50%;background:#fff;
-    border:.5px solid #DEE0E3;box-shadow:0 1px 3px rgba(0,0,0,.16);cursor:default}
-  .twk-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
-    background:#fff;border:.5px solid #DEE0E3;box-shadow:0 1px 3px rgba(0,0,0,.16);cursor:default}
+    width:14px;height:14px;border-radius:50%;background:#fff;
+    border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
+  .twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
+    background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
 
   .twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;
-    background:#EBECEE;user-select:none}
+    background:rgba(0,0,0,.06);user-select:none}
   .twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;
-    background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);
+    background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);
     transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
   .twk-seg.dragging .twk-seg-thumb{transition:none}
   .twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
-    background:transparent;color:#646A73;font:inherit;font-weight:500;min-height:28px;
+    background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
     border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;
-    overflow-wrap:anywhere;transition:color .15s}
-  .twk-seg button[aria-checked="true"]{color:#1F2329}
-
-  .twk-toggle{position:relative;width:36px;height:20px;border:0;border-radius:999px;
-    background:#E4E6E8;transition:background .15s;cursor:default;padding:0}
-  .twk-toggle[data-on="1"]{background:#1F2329}
-  .twk-toggle i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
-    background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
-  .twk-toggle[data-on="1"] i{transform:translateX(16px)}
-
-  .twk-num{display:flex;align-items:center;box-sizing:border-box;min-width:0;height:32px;padding:0 0 0 10px;
-    border:.5px solid #DEE0E3;border-radius:8px;background:#fff}
-  .twk-num-lbl{font-weight:500;color:#646A73;cursor:ew-resize;
+    overflow-wrap:anywhere}
+
+  .twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;
+    background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}
+  .twk-toggle[data-on="1"]{background:#34c759}
+  .twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
+    background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
+  .twk-toggle[data-on="1"] i{transform:translateX(14px)}
+
+  .twk-num{display:flex;align-items:center;box-sizing:border-box;min-width:0;height:26px;padding:0 0 0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}
+  .twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;
     user-select:none;padding-right:8px}
   .twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;
-    font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 10px 0 0;
+    font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;
     outline:none;color:inherit;-moz-appearance:textfield}
   .twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{
     -webkit-appearance:none;margin:0}
-  .twk-num-unit{padding-right:10px;color:#86909C}
+  .twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}
 
-  .twk-btn{appearance:none;height:32px;padding:0 14px;border:0;border-radius:8px;
-    background:#1F2329;color:#fff;font:inherit;font-weight:500;cursor:default}
-  .twk-btn:hover{background:#333A44}
-  .twk-btn.secondary{background:#F2F3F5;color:#1F2329}
-  .twk-btn.secondary:hover{background:#E5E6EB}
+  .twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;
+    background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}
+  .twk-btn:hover{background:rgba(0,0,0,.88)}
+  .twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}
+  .twk-btn.secondary:hover{background:rgba(0,0,0,.1)}
 
-  .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:24px;
-    border:.5px solid #DEE0E3;border-radius:6px;padding:0;cursor:default;
+  .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;
     background:transparent;flex-shrink:0}
   .twk-swatch::-webkit-color-swatch-wrapper{padding:0}
   .twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}
   .twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}
 
-  .twk-chips{display:flex;gap:8px}
-  .twk-chip{position:relative;appearance:none;flex:1;min-width:0;height:40px;
+  .twk-chips{display:flex;gap:6px}
+  .twk-chip{position:relative;appearance:none;flex:1;min-width:0;height:46px;
     padding:0;border:0;border-radius:6px;overflow:hidden;cursor:default;
-    box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
+    box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06);
     transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s}
   .twk-chip:hover{transform:translateY(-1px);
-    box-shadow:0 0 0 .5px rgba(0,0,0,.14),0 4px 10px rgba(0,0,0,.1)}
-  .twk-chip[data-on="1"]{box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(0,0,0,.85),
+    box-shadow:0 0 0 .5px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.12)}
+  .twk-chip[data-on="1"]{box-shadow:0 0 0 1.5px rgba(0,0,0,.85),
     0 2px 6px rgba(0,0,0,.15)}
   .twk-chip>span{position:absolute;top:0;bottom:0;right:0;width:34%;
     display:flex;flex-direction:column;box-shadow:-1px 0 0 rgba(0,0,0,.1)}
@@ -208,10 +202,6 @@ 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;
 
@@ -220,13 +210,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 maxTop = Math.max(PAD, window.innerHeight - h - PAD);
+    const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);
     offsetRef.current = {
       x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),
-      y: Math.min(maxTop, Math.max(PAD, offsetRef.current.y)),
+      y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y)),
     };
     panel.style.right = offsetRef.current.x + 'px';
-    panel.style.top = offsetRef.current.y + 'px';
+    panel.style.bottom = offsetRef.current.y + 'px';
   }, []);
 
   React.useEffect(() => {
@@ -263,11 +253,11 @@ function TweaksPanel({ title = 'Tweaks', children }) {
     const r = panel.getBoundingClientRect();
     const sx = e.clientX, sy = e.clientY;
     const startRight = window.innerWidth - r.right;
-    const startTop = r.top;
+    const startBottom = window.innerHeight - r.bottom;
     const move = (ev) => {
       offsetRef.current = {
         x: startRight - (ev.clientX - sx),
-        y: startTop + (ev.clientY - sy),
+        y: startBottom - (ev.clientY - sy),
       };
       clampToViewport();
     };
@@ -284,7 +274,7 @@ function TweaksPanel({ title = 'Tweaks', children }) {
     <>
       <style>{__TWEAKS_STYLE}</style>
       <div ref={dragRef} className="twk-panel" data-miaoda-chrome=""
-           style={{ right: offsetRef.current.x, top: offsetRef.current.y }}>
+           style={{ right: offsetRef.current.x, bottom: offsetRef.current.y }}>
         <div className="twk-hd" onMouseDown={onDragStart}>
           <b>{title}</b>
           <button className="twk-x" aria-label="Close tweaks"
@@ -353,8 +343,8 @@ function TweakRadio({ label, value, options, onChange }) {
   valueRef.current = value;
 
   // Segments wrap mid-word once per-segment width runs out. The track is
-  // ~244px (280 panel − 32 body pad − 4 seg pad), each button loses 12px
-  // to its own padding, and 12px system-ui averages ~6.6px/char — so 2
+  // ~248px (280 panel − 28 body pad − 4 seg pad), each button loses 12px
+  // to its own padding, and 11.5px system-ui averages ~6.3px/char — so 2
   // options fit ~16 chars each, 3 fit ~10. Past that (or >3 options), fall
   // back to a dropdown rather than wrap.
   const labelLen = (o) => String(typeof o === 'object' ? o.label : o).length;
@@ -565,23 +555,23 @@ Object.assign(window, {
     @keyframes twk-blink{50%{opacity:0}}
     @keyframes twk-fadein{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:none}}
     .twk-sugg{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px;
-      background:#F7F8FA;border:.5px solid #EBECEE;transition:all .15s}
-    .twk-sugg:focus-within{background:#F2F3F5;border-color:#DEE0E3}
+      background:rgba(0,0,0,.04);border:.5px solid rgba(0,0,0,.06);transition:all .15s}
+    .twk-sugg:focus-within{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.12)}
     .twk-sugg-field{position:relative;flex:1;min-width:0}
     .twk-sugg-field input{width:100%;height:20px;border:0;background:transparent;
       font:inherit;outline:none;color:inherit}
     .twk-sugg-ghost{position:absolute;inset:0;display:flex;align-items:center;
-      color:#86909C;pointer-events:none;white-space:nowrap;overflow:hidden}
-    .twk-sugg-ghost.hint{color:#A9AEB8}
+      color:rgba(41,38,27,.42);pointer-events:none;white-space:nowrap;overflow:hidden}
+    .twk-sugg-ghost.hint{color:rgba(41,38,27,.28)}
     .twk-sugg-caret{display:inline-block;width:1px;height:13px;margin-left:1px;
       border-right:1.5px solid currentColor;opacity:.5;animation:twk-blink 1s step-end infinite}
     .twk-sugg-ideas{appearance:none;border:0;background:transparent;font:inherit;
-      font-size:10.5px;font-weight:600;color:#646A73;cursor:default;padding:0 2px;
+      font-size:10.5px;font-weight:600;color:rgba(41,38,27,.6);cursor:default;padding:0 2px;
       white-space:nowrap;animation:twk-fadein .25s ease}
-    .twk-sugg-ideas:hover{color:#1F2329}
+    .twk-sugg-ideas:hover{color:rgba(41,38,27,.85)}
     .twk-sugg-ideas svg{color:#D97757}
     .twk-sugg-send{appearance:none;border:0;height:20px;padding:0 8px;border-radius:5px;
-      background:#1F2329;color:#fff;font:inherit;font-size:10px;font-weight:600;cursor:default}
+      background:#29261b;color:#fff;font:inherit;font-size:10px;font-weight:600;cursor:default}
   `;
   document.head.appendChild(s);
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-registry-buildless",
-  "version": "0.1.10",
+  "version": "0.1.11-alpha.20260729134521",
   "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,11 +38,15 @@
  *      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 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).
+ *      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.
+ *  (h) preflight mode — add `?preflight=1` to the URL to enter
+ *      mobile-list layout on any device (including desktop). Identical to
+ *      mobile browse except the outer frame background is transparent,
+ *      preventing the model from confusing the frame background with slide
+ *      content during automated visual inspection.
  *
  * Slides are HIDDEN, not unmounted. Non-active slides stay in the DOM with
  * `visibility: hidden` + `opacity: 0`, so their state (videos, iframes,
@@ -140,7 +144,6 @@
   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');
 
@@ -433,6 +436,12 @@
        (The equivalent rule further down lives inside @media print only.) */
     :host([data-mobile-list]) ::slotted([data-deck-skip]) { display: none !important; }
 
+    /* ── Preflight (质检) mode: mobile-list layout with transparent outer
+       background so the model doesn't confuse the frame with slide content.
+       Activated by ?preflight=1 in the URL. ── */
+    :host([data-preflight]) { background: transparent; position: static; overflow: visible; }
+    :host([data-preflight]) .stage { background: transparent; position: static; overflow: visible; }
+
     /* ── Mobile presenting: CSS pseudo-landscape (no orientation.lock) ──
        Rotate only while the device is physically portrait. Once the user
        turns the phone (system auto-rotate) the viewport itself is landscape,
@@ -703,6 +712,7 @@
       // windowed margin/shadow, see _fit. A bare load with no #N hash starts at
       // slide 1, so ?thumbnail=1 alone yields a clean first-slide frame.
       this._snthumb = /[?&](_snthumb|thumbnail)=/.test(location.search);
+      this._preflight = /[?&]preflight=/.test(location.search);
       this._mobile = isMobileUA();
       // Layout-driven size signal. window.resize is unreliable inside
       // prerendered/reframed iOS WebViews and host-managed iframes — the
@@ -715,7 +725,14 @@
         this._mobSizeRo.observe(document.documentElement);
       }
       this._syncMobileMode();
-      if (this._mobile) this._syncMobFreezeRule();
+      if (this._mobile || this._preflight) this._syncMobFreezeRule();
+      if (this._preflight) {
+        this.setAttribute('data-preflight', '');
+        // Override page-level background set by LLM-authored CSS so the
+        // preflight screenshot doesn't pick up the theme's body color.
+        document.documentElement.style.background = '#fff';
+        document.body.style.background = '#fff';
+      }
       if (this._snthumb) this.setAttribute('no-rail', '');
       this._render();
       this._loadNotes();
@@ -1039,7 +1056,6 @@
       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);
     }
 
@@ -1367,38 +1383,26 @@
         'animation-play-state: running !important; transition-duration: 0s !important; } }';
     }
 
-    /** 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. */
+    /** 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 sel = 'deck-stage[data-mobile-list][data-mobile-list][data-mobile-list]';
       const tag = document.createElement('style');
       tag.id = id;
       tag.textContent =
-        sel + ' *, ' + sel + ' *::before, ' + sel + ' *::after {' +
-        ' animation-name: none !important;' +
+        '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; transition-delay: 0s !important; }';
+        ' animation-play-state: running !important; transition-duration: 0s !important; }';
       document.head.appendChild(tag);
     }
 
@@ -1546,11 +1550,11 @@
 
     // The two mobile presentations are mutually exclusive. noscale and
     // _snthumb are capture modes whose output must keep desktop geometry,
-    // so they opt out of both.
+    // so they opt out of both. ?preflight=1 forces mobile-list on desktop.
     _syncMobileMode() {
-      const eligible = this._mobile && !this.hasAttribute('noscale') && !this._snthumb;
+      const eligible = (this._mobile || this._preflight) && !this.hasAttribute('noscale') && !this._snthumb;
       this.toggleAttribute('data-mobile-list', eligible && !this._presenting);
-      this.toggleAttribute('data-mobile-present', eligible && !!this._presenting);
+      this.toggleAttribute('data-mobile-present', eligible && !!this._presenting && !this._preflight);
     }
 
     _fitMobileList() {
@@ -1956,7 +1960,7 @@
           // it scales clones by the rail's _thumbScale, so rewrite the
           // transform for this strip's fixed 132px frames.
           const entry = { slide: e2.slide, frame, host: null, clone: null };
-          this._materialize(entry, false); // throwaway entry (not in _thumbs) — skip the recap timer
+          this._materialize(entry);
           if (entry.clone) entry.clone.style.transform = 'scale(' + (132 / this.designWidth) + ')';
           return { el: t, i: e2.i };
         });
@@ -2078,7 +2082,6 @@
       // 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
@@ -2260,7 +2263,7 @@
     }
 
     /** Lazily build the clone for a thumb that has scrolled into view. */
-    _materialize(entry, scheduleRecap = true) {
+    _materialize(entry) {
       if (entry.host) return;
       const dw = this.designWidth, dh = this.designHeight;
       let clone = entry.slide.cloneNode(true);
@@ -2292,7 +2295,6 @@
       // 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;
@@ -2304,7 +2306,6 @@
             ';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
@@ -2369,30 +2370,6 @@
       // 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.
-      // scheduleRecap=false for callers whose entry isn't tracked in _thumbs
-      // (the mobile filmstrip builds throwaway entries the cleanup paths can't
-      // reach) — otherwise the timer leaks and, since that path clones the
-      // whole deck eagerly, N recaps would fire together as a toDataURL storm.
-      if (scheduleRecap && canvasImgs.length) {
-        clearTimeout(entry._canvasRecapTimer);
-        entry._canvasRecapTimer = setTimeout(() => {
-          entry._canvasRecapTimer = null;
-          if (entry.host !== host) return;
-          canvasImgs.forEach(({ orig, img }) => {
-            // orig.isConnected: if the app swapped the chart's <canvas> since,
-            // the detached node still reports nonzero width/height — skip it so
-            // we don't paint stale pixels (the swap already re-cloned the thumb).
-            if (!img.isConnected || !orig.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
@@ -2401,7 +2378,6 @@
     _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);