@lark-apaas/coding-registry-buildless 0.1.4 → 0.1.5-alpha.20260717102042

package/components/design-canvas.jsx

@@ -28,6 +28,11 @@
 // When placing a device frame inside a DCArtboard, pass chromeless to
 // suppress the card chrome and let the artboard size to its content:
 //   <DCArtboard chromeless><IOSDevice>…</IOSDevice></DCArtboard>
+//
+// On mobile (UA-detected) the canvas is browse-only: one-finger drag pans
+// (starting on artboards too), two-finger pinch zooms, the zoom control is
+// hidden, and drag-reorder / inline-rename are disabled. Tap on an artboard
+// label still opens the focus overlay.
 /* END USAGE */
 
 const DC = {
@@ -40,6 +45,15 @@ const DC = {
   font: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
 };
 
+// ── 移动端判定：复刻主仓 @apaas-ai/global-states isMobile() 的 UA 语义
+// （跨域产物 iframe 无法 import 该包，同 deck-stage 的先例）。刻意不用视口
+// 断点——桌面工作台的预览 iframe 本身就窄，视口宽度会把桌面预览误判成移动端。
+// 启动时一次性判定，不随 resize 抖动。
+const DC_MOBILE_UA_RE = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i;
+const dcIsMobile = typeof navigator !== 'undefined' &&
+  (DC_MOBILE_UA_RE.test(navigator.userAgent) ||
+    (/iPad|Tab|Tablet/i.test(navigator.userAgent) && !!navigator.maxTouchPoints && navigator.maxTouchPoints > 1));
+
 // One-time CSS injection (classes are dc-prefixed so they don't collide with
 // the hosted design's own styles).
 if (typeof document !== 'undefined' && !document.getElementById('dc-styles')) {
@@ -92,6 +106,39 @@ if (typeof document !== 'undefined' && !document.getElementById('dc-styles')) {
     // can't be reveal-on-hover and tends to stick visible after a tap — hide it
     // entirely on mobile. The grip + label stay for per-screen context.
     '@media (hover: none){.dc-btns{display:none}}',
+    // Mobile (UA-detected, .dc-mobile on the viewport root) is browse-only:
+    // drag-reorder is disabled there, so the grip is dead weight — hide it.
+    '.dc-mobile .dc-grip{display:none}',
+    // Mobile is browse-only: kill text selection + iOS long-press callout
+    // inside the canvas. iOS interprets a drag over selectable TEXT as a
+    // selection gesture and steals the pointer (pointercancel) — touch-action
+    // only suppresses native pan/zoom, not selection — so text-dense
+    // artboards became un-pannable while image-heavy ones panned fine.
+    '.dc-mobile, .dc-mobile *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}',
+    // Prototype content routinely carries inner scrollers (the device/window
+    // frames all have overflow:auto bodies). On iOS a touch starting inside a
+    // scrollable element is consumed by THAT scroller (native scroll attempt
+    // + pointercancel), so pans could never start on those artboards while
+    // plain-HTML cards panned fine. Mobile canvas is browse-only: kill native
+    // touch handling on everything inside the cards so gestures always reach
+    // the viewport state machine. Desktop (no .dc-mobile) keeps inner scroll.
+    '.dc-mobile [data-dc-slot] *{touch-action:none !important}',
+    // Pinch updates --dc-inv-zoom per frame (PC semantics: chrome size AND
+    // section spacing stay constant). The per-frame relayout that implies
+    // white-flashed on WKWebView when the whole world was one paint layer —
+    // every head resize invalidated and re-rasterized ALL content. Promote
+    // each card (and head) to its own compositing layer: relayout then only
+    // MOVES card layers (compositor, no repaint) and repaints just the tiny
+    // head layers. contain:paint bounds invalidation to the card box.
+    // contain:paint must live on .dc-card, NOT the slot: .dc-header is an
+    // abs-positioned slot child sitting entirely ABOVE the slot box
+    // (bottom:100%) — paint containment on the slot would clip it out of
+    // rendering AND hit-testing, killing the label tap that is mobile's only
+    // focus-overlay entry. will-change (the layer-promotion half of the
+    // white-flash fix) stays on the slot so header + card share one layer.
+    '.dc-mobile [data-dc-slot]{will-change:transform}',
+    '.dc-mobile .dc-card{contain:paint}',
+    '.dc-mobile .dc-sectionhead{will-change:transform}',
     '[data-dc-slot]:hover .dc-card.chromeless>*,  [data-dc-slot]:hover .dc-card:not(.chromeless){box-shadow:0 4px 8px -8px rgba(0, 0, 0, 0.06), 0 6px 12px 0 rgba(0, 0, 0, 0.04), 0 8px 24px 8px rgba(0, 0, 0, 0.04)}',
     '.dc-expand,.dc-kebab{width:22px;height:22px;border-radius:6px;border:none;cursor:pointer;padding:0;',
     '  background:transparent;color:#646A73;display:flex;align-items:center;justify-content:center;',
@@ -127,7 +174,13 @@ if (typeof document !== 'undefined' && !document.getElementById('dc-styles')) {
     // space gap and overlap the artboard headers at low zoom.
     '.dc-header{width:calc((100% + 4px) / var(--dc-inv-zoom,1));',
     '  transform:scale(var(--dc-inv-zoom,1));transform-origin:bottom left;will-change:transform}',
-    '.dc-sectionhead{zoom:var(--dc-inv-zoom,1)}',
+    // Section heads counter-scale via calc()'d font metrics (see DCSection),
+    // NOT CSS zoom: zoom was only standardized in 2024 and legacy WebKit
+    // builds (older iOS WKWebViews) mis-apply it — text renders unscaled
+    // while layout inflates, tearing the title/subtitle apart at small
+    // canvas scales. calc(px * var()) lengths are interop-safe everywhere
+    // and keep the same in-flow layout semantics (box grows with the text,
+    // space below stays reserved).
     // On-canvas zoom control (bottom-right pill). Stays screen-fixed because
     // it renders outside worldRef. z-index 50 keeps it above world content but
     // below the focus overlay (z-index 100). The dropdown reuses .dc-menu and
@@ -439,7 +492,10 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
     el.style.setProperty('--dc-inv-zoom', String(1 / scale));
     // Keep the on-canvas zoom control's % readout in sync. React bails out on
     // an unchanged rounded value, so pan ticks (scale unchanged) don't render.
-    setScalePct(Math.round(scale * 100));
+    // Mobile renders no zoom control — a per-frame setState during pinch
+    // would re-render the whole subtree every frame (visible repaint flicker
+    // on phones) for a readout nobody consumes, so skip it there entirely.
+    if (!dcIsMobile) setScalePct(Math.round(scale * 100));
     // Keep the host toolbar's % readout in sync with the canvas scale. Pan
     // ticks leave scale unchanged — skip the cross-frame post for those.
     if (lastPostedScale.current !== scale) {
@@ -490,7 +546,9 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
     const slots = world.querySelectorAll('[data-dc-slot]');
     if (!slots.length) return; // content not mounted yet — wait for the ready commit
     const heads = world.querySelectorAll('.dc-sectionhead');
-    const PAD = 64;
+    // Fit margin from the screen edges. Mobile screens are narrow — 64px a
+    // side eats a third of the width, so fit flush-ish at 16px there.
+    const PAD = dcIsMobile ? 16 : 64;
 
     // Content bounding box in WORLD space at the currently applied transform.
     // X extent from cards only (section-head blocks are full width and would
@@ -556,8 +614,8 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
       const t = tf.current;
       const next = Math.min(maxScale, Math.max(minScale, t.scale * factor));
       const k = next / t.scale;
-      // --dc-inv-zoom consumers (.dc-sectionhead's CSS zoom, each section's
-      // marginBottom) reflow on every scale change, vertically shifting the
+      // --dc-inv-zoom consumers (.dc-sectionhead's calc()'d font metrics,
+      // each section's marginBottom) reflow on every scale change, vertically shifting the
       // world layout — so a world point mathematically pinned under the cursor
       // drifts as you zoom (content creeps up on zoom-in, down on zoom-out).
       // Anchor the DOM element under the cursor instead: record its screen Y,
@@ -630,11 +688,18 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
     // better feel there. No-ops on other browsers. Safari also fires
     // ctrlKey wheel events during the same pinch — isGesturing makes
     // onWheel drop those entirely so they neither zoom nor pan.
+    //
+    // On mobile the pointer-based two-finger pinch below is the single zoom
+    // source. iOS fires BOTH pointer events and these WebKit gesture* events
+    // for the same two fingers — zooming from both would double-apply, so on
+    // mobile gesture* degrades to preventDefault only (still suppressing the
+    // native page zoom).
     let gsBase = 1;
     let isGesturing = false;
     const onGestureStart = (e) => { e.preventDefault(); isGesturing = true; gsBase = tf.current.scale; };
     const onGestureChange = (e) => {
       e.preventDefault();
+      if (dcIsMobile) return;
       zoomAt(e.clientX, e.clientY, (gsBase * e.scale) / tf.current.scale);
     };
     const onGestureEnd = (e) => { e.preventDefault(); isGesturing = false; };
@@ -664,6 +729,108 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
       vp.style.cursor = '';
     };
 
+    // ── Mobile touch gestures (replaces the desktop pointer mapping above):
+    // one-finger drag pans — starting on artboards too, since cards fill a
+    // phone viewport and background is scarce; two-finger pinch zooms about
+    // the midpoint while the midpoint's own travel pans (Figma semantics, one
+    // gesture frames the view). A tap/pan slop keeps label taps working: no
+    // capture happens within the slop, so a clean tap still clicks through to
+    // focus; past it the viewport captures the pointer and the click retargets
+    // harmlessly. No fling/inertia — release stops the canvas (spec §8).
+    const touches = new Map(); // pointerId -> last {x, y}
+    let mobMode = null;        // null | 'tap' | 'pan' | 'pinch'
+    let tapStart = null;       // down point for slop arbitration
+    let pinchDist = 0;         // last-applied finger distance (rAF 帧粒度)
+    let pinchMid = null;       // last-applied midpoint
+    let panApplied = null;     // 单指 pan 最近一次已应用的触点位置
+    const MOB_SLOP = 9;        // px of travel before a tap becomes a pan
+
+    // First two insertion-ordered touches define the pinch; a third finger is
+    // tracked but inert (its moves shift neither midpoint nor distance).
+    const pinchGeom = () => {
+      const [a, b] = [...touches.values()];
+      return { d: Math.hypot(a.x - b.x, a.y - b.y), mx: (a.x + b.x) / 2, my: (a.y + b.y) / 2 };
+    };
+
+    const onTouchDown = (e) => {
+      touches.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      if (touches.size === 1) {
+        mobMode = 'tap';
+        tapStart = { x: e.clientX, y: e.clientY };
+      } else if (touches.size === 2) {
+        mobFlushNow(); // 单指 pan 有待应用的帧则先落账，再切 pinch 基准
+        mobMode = 'pinch';
+        const g = pinchGeom();
+        pinchDist = g.d;
+        pinchMid = { x: g.mx, y: g.my };
+        try { vp.setPointerCapture(e.pointerId); } catch {}
+      }
+    };
+    // ── rAF 合帧：move 事件只更新触点坐标，几何应用每帧至多一次。
+    // 高刷屏/快速捏合时 pointermove 频率可远超渲染帧率，逐事件全量跑
+    // zoomAt/apply（布局读写 + 样式失效 + postMessage）会以超过引擎回收
+    // 节奏的速度制造 WebKit 堆垃圾——真机快速捏合表现为内存持续攀升
+    // （vmmap 定位在 WebKit Malloc；帧率化应用后实测完全回收）。
+    let mobRaf = 0;
+    const mobFlushFrame = () => {
+      mobRaf = 0;
+      if (mobMode === 'pan') {
+        const [t] = [...touches.values()];
+        if (!t) return;
+        tf.current.x += t.x - panApplied.x;
+        tf.current.y += t.y - panApplied.y;
+        panApplied = { x: t.x, y: t.y };
+        apply();
+      } else if (mobMode === 'pinch' && touches.size >= 2) {
+        const g = pinchGeom();
+        tf.current.x += g.mx - pinchMid.x;
+        tf.current.y += g.my - pinchMid.y;
+        pinchMid = { x: g.mx, y: g.my };
+        // zoomAt applies the pan mutation above too; degenerate distances
+        // (fingers together) skip the zoom but still need the pan applied.
+        // Same full zoomAt as the desktop trackpad-pinch path (gesturechange):
+        // per-frame --dc-inv-zoom keeps chrome size AND section spacing
+        // constant throughout the gesture, with the same drift compensation.
+        if (pinchDist > 0 && g.d > 0) zoomAt(g.mx, g.my, g.d / pinchDist);
+        else apply();
+        pinchDist = g.d;
+      }
+    };
+    const mobSchedule = () => { if (!mobRaf) mobRaf = requestAnimationFrame(mobFlushFrame); };
+    const mobFlushNow = () => { if (mobRaf) { cancelAnimationFrame(mobRaf); mobFlushFrame(); } };
+
+    const onTouchMove = (e) => {
+      const t = touches.get(e.pointerId);
+      if (!t) return;
+      t.x = e.clientX; t.y = e.clientY;
+      if (mobMode === 'tap' && Math.hypot(t.x - tapStart.x, t.y - tapStart.y) > MOB_SLOP) {
+        mobMode = 'pan';
+        panApplied = { x: t.x, y: t.y };
+        try { vp.setPointerCapture(e.pointerId); } catch {}
+      }
+      if (mobMode === 'pan' || mobMode === 'pinch') mobSchedule();
+    };
+    const onTouchUp = (e) => {
+      mobFlushNow(); // 抬指前把最后一个待应用帧落账，避免尾部位移丢失
+      if (!touches.delete(e.pointerId)) return;
+      try { vp.releasePointerCapture(e.pointerId); } catch {}
+      if (touches.size === 0) {
+        mobMode = null;
+      } else if (touches.size === 1) {
+        // Pinch collapsing to one finger hands off to pan with the surviving
+        // finger as the new baseline — no jump.
+        mobMode = 'pan';
+        const [t] = [...touches.values()];
+        panApplied = { x: t.x, y: t.y };
+      } else if (mobMode === 'pinch') {
+        // 3+ fingers losing one: re-baseline so the new leading pair doesn't
+        // read as a sudden midpoint/distance delta.
+        const g = pinchGeom();
+        pinchDist = g.d;
+        pinchMid = { x: g.mx, y: g.my };
+      }
+    };
+
     // Host-driven zoom (toolbar % menu). Zooms around viewport centre so the
     // visible midpoint stays fixed — matching the host's iframe-zoom feel.
     const onHostMsg = (e) => {
@@ -694,31 +861,38 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
     lastPostedScale.current = undefined;
     apply();
 
+    // Mobile swaps the desktop pointer mapping (bg-only pan) for the touch
+    // state machine; wheel/gesture listeners stay on both (harmless without
+    // the hardware, and a bluetooth mouse on Android still pans via wheel).
+    const pd = dcIsMobile ? onTouchDown : onPointerDown;
+    const pm = dcIsMobile ? onTouchMove : onPointerMove;
+    const pu = dcIsMobile ? onTouchUp : onPointerUp;
     vp.addEventListener('wheel', onWheel, { passive: false });
     vp.addEventListener('gesturestart', onGestureStart, { passive: false });
     vp.addEventListener('gesturechange', onGestureChange, { passive: false });
     vp.addEventListener('gestureend', onGestureEnd, { passive: false });
-    vp.addEventListener('pointerdown', onPointerDown);
-    vp.addEventListener('pointermove', onPointerMove);
-    vp.addEventListener('pointerup', onPointerUp);
-    vp.addEventListener('pointercancel', onPointerUp);
+    vp.addEventListener('pointerdown', pd);
+    vp.addEventListener('pointermove', pm);
+    vp.addEventListener('pointerup', pu);
+    vp.addEventListener('pointercancel', pu);
     return () => {
       window.removeEventListener('message', onHostMsg);
       vp.removeEventListener('wheel', onWheel);
       vp.removeEventListener('gesturestart', onGestureStart);
       vp.removeEventListener('gesturechange', onGestureChange);
       vp.removeEventListener('gestureend', onGestureEnd);
-      vp.removeEventListener('pointerdown', onPointerDown);
-      vp.removeEventListener('pointermove', onPointerMove);
-      vp.removeEventListener('pointerup', onPointerUp);
-      vp.removeEventListener('pointercancel', onPointerUp);
+      vp.removeEventListener('pointerdown', pd);
+      vp.removeEventListener('pointermove', pm);
+      vp.removeEventListener('pointerup', pu);
+      vp.removeEventListener('pointercancel', pu);
+      if (mobRaf) cancelAnimationFrame(mobRaf);
     };
   }, [apply, minScale, maxScale]);
 
   return (
     <div
       ref={vpRef}
-      className="design-canvas"
+      className={dcIsMobile ? 'design-canvas dc-mobile' : 'design-canvas'}
       style={{
         height: '100vh', width: '100vw',
         background: DC.bg,
@@ -744,12 +918,16 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
       >
         {children}
       </div>
-      <DCZoomControl
-        scalePct={scalePct}
-        minScale={minScale}
-        maxScale={maxScale}
-        onZoomTo={(pct) => zoomCenteredRef.current?.(pct / 100)}
-      />
+      {/* Mobile zooms by pinch — the control is not rendered at all (host
+          set-zoom messages still work; the protocol is independent of it). */}
+      {!dcIsMobile && (
+        <DCZoomControl
+          scalePct={scalePct}
+          minScale={minScale}
+          maxScale={maxScale}
+          onZoomTo={(pct) => zoomCenteredRef.current?.(pct / 100)}
+        />
+      )}
     </div>
   );
 }
@@ -788,11 +966,16 @@ function DCSection({ id, title, subtitle, children, gap = 48 }) {
     <div data-dc-section={sid}
       style={{ marginBottom: 'calc(80px * var(--dc-inv-zoom, 1))', position: 'relative' }}>
       <div style={{ padding: '0 60px' }}>
-        <div className="dc-sectionhead" style={{ paddingBottom: 36 }}>
+        <div className="dc-sectionhead" style={{ paddingBottom: 'calc(36px * var(--dc-inv-zoom, 1))' }}>
           <DCEditable tag="div" value={sec.title ?? title}
             onChange={(v) => ctx && sid && ctx.patchSection(sid, { title: v })}
-            style={{ fontSize: 20, fontWeight: 600, color: DC.title, letterSpacing: -0.4, marginBottom: 2, display: 'inline-block', lineHeight: '28px' }} />
-          {subtitle && <div style={{ fontSize: 14, color: DC.subtitle, lineHeight: '22px' }}>{subtitle}</div>}
+            style={{
+              fontSize: 'calc(20px * var(--dc-inv-zoom, 1))', fontWeight: 600, color: DC.title,
+              letterSpacing: 'calc(-0.4px * var(--dc-inv-zoom, 1))',
+              marginBottom: 'calc(2px * var(--dc-inv-zoom, 1))',
+              display: 'inline-block', lineHeight: 'calc(28px * var(--dc-inv-zoom, 1))',
+            }} />
+          {subtitle && <div style={{ fontSize: 'calc(14px * var(--dc-inv-zoom, 1))', color: DC.subtitle, lineHeight: 'calc(22px * var(--dc-inv-zoom, 1))' }}>{subtitle}</div>}
         </div>
       </div>
       <div style={{ display: 'flex', gap, padding: '0 60px', alignItems: 'flex-start', width: 'max-content' }}>
@@ -1035,14 +1218,17 @@ function DCArtboardFrame({ sectionId, artboard, label, order, onRename, onReorde
 
   return (
     <div ref={ref} data-dc-slot={id} style={{ position: 'relative', flexShrink: 0 }}>
-      <div className="dc-header" data-miaoda-chrome="" style={{ color: DC.label }} onPointerDown={(e) => e.stopPropagation()}>
+      {/* Desktop stops pointerdown so header interactions never start a
+          bg-pan; mobile pans FROM chrome too (slop arbitration keeps label
+          taps working), so the event must bubble to the viewport there. */}
+      <div className="dc-header" data-miaoda-chrome="" style={{ color: DC.label }} onPointerDown={dcIsMobile ? undefined : (e) => e.stopPropagation()}>
         <div className="dc-labelrow">
-          <div className="dc-grip" onPointerDown={onGripDown} title="Drag to reorder">
+          <div className="dc-grip" onPointerDown={dcIsMobile ? undefined : onGripDown} title="Drag to reorder">
             <svg width="9" height="13" viewBox="0 0 9 13" fill="currentColor"><circle cx="2" cy="2" r="1.1"/><circle cx="7" cy="2" r="1.1"/><circle cx="2" cy="6.5" r="1.1"/><circle cx="7" cy="6.5" r="1.1"/><circle cx="2" cy="11" r="1.1"/><circle cx="7" cy="11" r="1.1"/></svg>
           </div>
           <div className="dc-labeltext" onClick={onFocus} title="Click to focus">
             <DCEditable value={label} onChange={onRename} onClick={(e) => e.stopPropagation()}
-              style={{ fontSize: 14, fontWeight: 300, color: DC.label, lineHeight: '22px' }} />
+              style={{ fontSize: 14, fontWeight: 400, color: DC.label, lineHeight: '22px' }} />
           </div>
         </div>
         <div className="dc-btns">
@@ -1086,6 +1272,13 @@ function DCArtboardFrame({ sectionId, artboard, label, order, onRename, onReorde
 // Inline rename — commits on blur or Enter.
 function DCEditable({ value, onChange, style, tag = 'span', onClick }) {
   const T = tag;
+  // Mobile is browse-only: render plain text — no contentEditable (a tap
+  // would pop the soft keyboard), no stopPropagation (pans start on labels
+  // too), and no onClick swallow (desktop uses it to keep an edit-click from
+  // bubbling; on mobile the tap should bubble so a label tap opens focus).
+  if (dcIsMobile) {
+    return <T className="dc-editable" style={style}>{value}</T>;
+  }
   return (
     <T className="dc-editable" contentEditable suppressContentEditableWarning
       onClick={onClick}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-registry-buildless",
-  "version": "0.1.4",
+  "version": "0.1.5-alpha.20260717102042",
   "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

@@ -12,8 +12,9 @@
  *      hidden while presenting / in preview / on narrow / noscale / no-rail.
  *  (b) keyboard navigation — ←/→, PgUp/PgDn, Space, Home/End, number keys.
  *      On touch devices, tapping the left/right half of the stage goes
- *      prev/next — taps on links, buttons and other interactive slide
- *      content are left alone.
+ *      prev/next (desktop / presenting mode; mobile browse mode scrolls
+ *      instead — see (g)) — taps on links, buttons and other interactive
+ *      slide content are left alone.
  *  (c) press R to reset to slide 0.
  *  (d) auto-scaling — inner canvas is a fixed design size (default 1920×1080)
  *      scaled with `transform: scale()` to fit the viewport, letterboxed.
@@ -34,6 +35,18 @@
  *      (≤640px), and via the `no-rail` attribute. Rail mutations dispatch
  *      a `deckchange`
  *      CustomEvent on the element: detail = {action, from, to, slide}.
+ *  (g) mobile — on mobile UA (mirrors the host platform's isMobile()
+ *      semantics: UA regex + iPad maxTouchPoints, never viewport width),
+ *      browse mode renders slides as a vertical card stream (12px margin,
+ *      8px gap, 8px radius) with native scrolling; a per-card page badge
+ *      fades in while scrolling (16|20×12, ink 20% bg, fixed 8px digits)
+ *      and fades out 2s after scrolling stops. Presenting mode
+ *      (miaoda:deck:presenting) rotates the stage 90° (CSS pseudo-
+ *      landscape, no orientation.lock): tap left/right third to navigate,
+ *      tap center to toggle the controls overlay (back button +
+ *      filmstrip; auto-hides after 3s). The back button exits presenting
+ *      and posts miaoda:deck:presenting-dismissed to the parent.
+ *      Desktop behaviour is unchanged.
  *
  * Slides are HIDDEN, not unmounted. Non-active slides stay in the DOM with
  * `visibility: hidden` + `opacity: 0`, so their state (videos, iframes,
@@ -116,6 +129,21 @@
   // 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])';
 
+  // ── 移动端（复刻主仓 @apaas-ai/global-states isMobile() 的 UA 语义；
+  //    跨域产物 iframe 无法 import 该包）。刻意不用视口断点：桌面工作台的
+  //    预览 iframe 本身就窄，视口宽度会把桌面预览误判成移动端。
+  //    mode=desktop 逃生阀只作用于壳层自身 location、不透传到本 iframe，不实现。
+  const MOBILE_UA_RE = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i;
+  const isMobileUA = () =>
+    MOBILE_UA_RE.test(navigator.userAgent) ||
+    (/iPad|Tab|Tablet/i.test(navigator.userAgent) && !!navigator.maxTouchPoints && navigator.maxTouchPoints > 1);
+  // 移动端视觉常量（Figma node 2965:32138 / 2965:32047 / 2965:34386 已确认）
+  const MOB_MARGIN = 12;        // 竖排卡片页边距
+  const MOB_GAP = 8;            // 卡片间距
+  const MOB_RADIUS = 8;         // 卡片圆角
+  const MOB_BADGE_IDLE_MS = 2000;  // 滚动停止 → 徽标淡出（UX 确认 2s）
+  const MOB_UI_HIDE_MS = 3000;     // 播放控件层自动收起
+
   const pad2 = (n) => String(n).padStart(2, '0');
 
   // Label precedence: data-label → data-screen-label (number stripped) → first heading → "Slide".
@@ -380,6 +408,143 @@
     .rail[data-presenting] + .rail-resize,
     .rail[data-user-hidden] + .rail-resize { display: none; }
 
+    /* ── 移动端竖排浏览 ─────────────────────────────────────── */
+    :host([data-mobile-list]) .stage {
+      display: block;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      background: #F8F9FA;
+    }
+    :host([data-mobile-list]) .canvas {
+      transform: none !important;
+      background: transparent;
+      will-change: auto;
+    }
+    :host([data-mobile-list][data-windowed]) .canvas { border: none; box-shadow: none; }
+    :host([data-mobile-list]) .rail, :host([data-mobile-list]) .rail-resize { display: none; }
+    :host([data-mobile-list]) ::slotted(*) {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+      transform-origin: 0 0;
+      box-sizing: border-box;
+    }
+    /* Skipped slides get no nth-child placement rule from _fitMobileList —
+       without this they'd fall back to the base inset:0 stacking rule and,
+       now force-visible, paint over the whole list canvas and swallow taps.
+       (The equivalent rule further down lives inside @media print only.) */
+    :host([data-mobile-list]) ::slotted([data-deck-skip]) { display: none !important; }
+
+    /* ── 移动端播放：CSS 旋转伪横屏（不依赖 orientation.lock）────
+       只在设备物理竖屏时旋转；用户顺势把手机转成横屏（系统自动旋转）
+       后，视口本身已是横屏，再叠 90° 会让画面侧躺——此时退化为常规
+       full-bleed 适配，_fitMobilePresent/_mobPresentZone 同步按
+       orientation 分支换轴。 */
+    :host([data-mobile-present]) .stage { background: #000; }
+    @media (orientation: portrait) {
+      :host([data-mobile-present]) .stage {
+        inset: auto;
+        left: 50%;
+        top: 50%;
+        width: 100vh;
+        height: 100vw;
+        transform: translate(-50%, -50%) rotate(90deg);
+      }
+    }
+
+    /* ── 移动端页码徽标（规格：Figma 2965:32047）────────────── */
+    .mob-badges { display: none; }
+    :host([data-mobile-list]) .mob-badges {
+      display: block;
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      z-index: 10;
+    }
+    .mob-badge {
+      position: absolute;
+      height: 12px;
+      box-sizing: border-box;
+      padding: 0 2px;
+      border-radius: 3px;
+      background: rgba(31, 35, 41, 0.2);
+      color: #fff;
+      font-family: 'PingFang SC', -apple-system, system-ui, sans-serif;
+      font-size: 8px;
+      line-height: 12px;
+      text-align: center;
+      opacity: 0;
+      transition: opacity 0.1s linear;
+    }
+    :host([data-mob-scrolling]) .mob-badge { opacity: 1; }
+
+    /* ── 移动端播放控件层（规格：Figma 2965:34386）──────────── */
+    .mob-ui { display: none; }
+    :host([data-mobile-present][data-mob-ui]) .mob-ui {
+      display: block;
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      z-index: 20;
+    }
+    .mob-back {
+      position: absolute;
+      left: max(16px, env(safe-area-inset-left));
+      top: 12px;
+      pointer-events: auto;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      border: none;
+      border-radius: 999px;
+      padding: 6px 14px;
+      background: rgba(0, 0, 0, 0.4);
+      color: #fff;
+      font-family: 'PingFang SC', -apple-system, system-ui, sans-serif;
+      font-size: 15px;
+      font-weight: 500;
+      cursor: pointer;
+    }
+    .mob-strip {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: auto;
+      display: flex;
+      gap: 8px;
+      padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
+      /* 透明浮在 slide 上（验收对齐设计稿）——缩略图自带白底+描边已足够区分 */
+      background: transparent;
+      overflow-x: auto;
+    }
+    .mob-strip .mthumb { flex: 0 0 132px; cursor: pointer; }
+    .mob-strip .mframe {
+      width: 132px;
+      height: 72px;
+      border-radius: 8px;
+      border: 0.5px solid #DEE0E3;
+      overflow: hidden;
+      position: relative;
+      background: #fff;
+    }
+    .mob-strip .mthumb[data-current] .mframe {
+      outline: 1px solid #336DF4;
+      outline-offset: 2px;
+      border-radius: 10px;
+    }
+    .mob-strip .mnum {
+      margin-top: 2px;
+      text-align: center;
+      font-family: 'PingFang SC', -apple-system, system-ui, sans-serif;
+      font-size: 12px;
+      line-height: 20px;
+      font-weight: 500;
+      /* 条带透明、底衬通常是播放态黑底/slide 内容——页码用白色（对齐设计稿） */
+      color: rgba(255, 255, 255, 0.9);
+    }
+    .mob-strip .mthumb[data-current] .mnum { color: #336DF4; }
+
     /* ── Speaker-notes dock ──────────────────────────────────────────────
        Bottom panel spanning the non-rail width in edit mode: a resize grip
        (drag to set height, persisted to localStorage) + an editable textarea
@@ -538,6 +703,8 @@
       // 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._mobile = isMobileUA();
+      this._syncMobileMode();
       if (this._snthumb) this.setAttribute('no-rail', '');
       this._render();
       this._loadNotes();
@@ -830,6 +997,9 @@
       if (this._tweakTimer) clearTimeout(this._tweakTimer);
       if (this._railAnimTimer) clearTimeout(this._railAnimTimer);
       if (this._notesPersistTimer) clearTimeout(this._notesPersistTimer);
+      clearTimeout(this._mobUiTimer);
+      clearTimeout(this._mobScrollIdleTimer);
+      if (this._mobScrollRaf) { cancelAnimationFrame(this._mobScrollRaf); this._mobScrollRaf = null; }
       if (this._scaleRaf) cancelAnimationFrame(this._scaleRaf);
       if (this._liveObserver) this._liveObserver.disconnect();
       if (this._railObserver) this._railObserver.disconnect();
@@ -845,6 +1015,7 @@
         if (this._rail) {
           this._rail.style.setProperty('--deck-aspect', this.designWidth + '/' + this.designHeight);
         }
+        this._syncMobileMode();
         this._fit();
         this._scaleThumbs();
         this._syncPrintPageRule();
@@ -870,6 +1041,17 @@
       canvas.appendChild(slot);
       stage.appendChild(canvas);
 
+      this._onMobScroll = this._onMobScroll.bind(this);
+      stage.addEventListener('scroll', this._onMobScroll, { passive: true });
+
+      // 移动竖排的逐页定位规则（::slotted(:nth-child(i))），_fitMobileList 重建。
+      this._mobStyle = document.createElement('style');
+
+      this._mobBadges = document.createElement('div');
+      this._mobBadges.className = 'mob-badges export-hidden';
+      this._mobBadges.setAttribute('data-miaoda-chrome', '');
+      canvas.appendChild(this._mobBadges);
+
       // Thumbnail rail + context menu. Thumbnails are populated in
       // _renderRail() after _collectSlides().
       const rail = document.createElement('div');
@@ -1010,7 +1192,7 @@
       // the note instead of navigating slides (same trick as the thumb keydown).
       notesBody.addEventListener('keydown', (e) => e.stopPropagation());
 
-      this._root.append(style, rail, resize, stage, notes, menu);
+      this._root.append(style, this._mobStyle, rail, resize, stage, notes, menu);
       this._canvas = canvas;
       this._stage = stage;
       this._slot = slot;
@@ -1285,9 +1467,156 @@
         }));
       }
 
+      if (this.hasAttribute('data-mob-ui')) this._syncMobStrip();
+
       this._prevIndex = curr;
     }
 
+    // 移动端两种呈现互斥：竖排浏览（list）/ 旋转横屏播放（present）。
+    // noscale / _snthumb（导出与演讲者缩略图捕获）必须保持桌面几何。
+    _syncMobileMode() {
+      const eligible = this._mobile && !this.hasAttribute('noscale') && !this._snthumb;
+      this.toggleAttribute('data-mobile-list', eligible && !this._presenting);
+      this.toggleAttribute('data-mobile-present', eligible && !!this._presenting);
+    }
+
+    _fitMobileList() {
+      const dw = this.designWidth, dh = this.designHeight;
+      const vw = window.innerWidth;
+      this._mobLastVw = vw; // _onResize 高度变化跳过的基线
+      const stage = this._canvas.parentElement;
+      // 清掉桌面 _fit 写过的 inset 内联值
+      if (stage) { stage.style.left = '0'; stage.style.right = '0'; stage.style.top = '0'; stage.style.bottom = '0'; }
+      this.removeAttribute('data-windowed');
+      const cardW = vw - 2 * MOB_MARGIN;
+      const s = cardW / dw;
+      const cardH = dh * s;
+      const kids = Array.prototype.slice.call(this.children);
+      const rules = [];
+      const cards = [];
+      let y = MOB_MARGIN;
+      this._slides.forEach((slide, i) => {
+        if (slide.hasAttribute('data-deck-skip')) return;
+        const nth = kids.indexOf(slide) + 1;
+        if (nth <= 0) return;
+        rules.push(
+          ':host([data-mobile-list]) ::slotted(:nth-child(' + nth + ')) {' +
+          ' inset: auto !important; top: 0 !important; left: 0 !important;' +
+          ' width: ' + dw + 'px !important; height: ' + dh + 'px !important;' +
+          ' transform: translate(' + MOB_MARGIN + 'px, ' + y + 'px) scale(' + s + ') !important;' +
+          // 圆角/描边随 scale 反向放大，落地后视觉为 8px / 0.5px
+          ' border-radius: ' + (MOB_RADIUS / s) + 'px; overflow: hidden !important;' +
+          ' border: ' + (0.5 / s) + 'px solid #DEE0E3; }'
+        );
+        cards.push({ slide, i, y, h: cardH });
+        y += cardH + MOB_GAP;
+      });
+      // 竖排规则只作用于屏幕媒体——print 的 ::slotted 分页规则特异性更低，
+      // 否则每页会带着列表位移/缩放进入打印流。
+      this._mobStyle.textContent = '@media screen {\n' + rules.join('\n') + '\n}';
+      this._canvas.style.transform = 'none';
+      this._canvas.style.width = vw + 'px';
+      this._canvas.style.height = Math.max(y - MOB_GAP + MOB_MARGIN, 0) + 'px';
+      this._mobCards = cards;
+      this._mobScale = s;
+
+      // 徽标：每卡片左下角内 6px；宽度按位数 16/16/20。布局是确定性的，
+      // 直接按 _mobCards 几何摆放，无需 IntersectionObserver。
+      this._mobBadges.textContent = '';
+      cards.forEach((c, ordinal) => {
+        const b = document.createElement('div');
+        b.className = 'mob-badge';
+        const n = ordinal + 1;
+        b.textContent = String(n);
+        b.style.width = (String(n).length >= 3 ? 20 : 16) + 'px';
+        b.style.left = (MOB_MARGIN + 6) + 'px';
+        b.style.top = (c.y + c.h - 6 - 12) + 'px';
+        this._mobBadges.appendChild(b);
+      });
+
+      this._mobScrollTo(this._index, false);
+    }
+
+    _onMobScroll() {
+      if (!this.hasAttribute('data-mobile-list') || !this._mobCards || !this._mobCards.length) return;
+
+      // 徽标显隐：程序化滚动也算"滚动"，两种来源都给可见性反馈。
+      this.setAttribute('data-mob-scrolling', '');
+      clearTimeout(this._mobScrollIdleTimer);
+      this._mobScrollIdleTimer = setTimeout(
+        () => this.removeAttribute('data-mob-scrolling'), MOB_BADGE_IDLE_MS);
+
+      if (this._mobScrollRaf) return;
+      this._mobScrollRaf = requestAnimationFrame(() => {
+        this._mobScrollRaf = null;
+        const stage = this._canvas.parentElement;
+        const top = stage.scrollTop;
+        const moved = this._mobLastTop == null ? Infinity : Math.abs(top - this._mobLastTop);
+        this._mobLastTop = top; // 抑制期间也持续跟踪位置
+        if (this._mobProgUntil && performance.now() < this._mobProgUntil) {
+          // 程序化滚动事件流仍在到达：续期窗口，动画多长都盖得住；
+          // 事件停止 120ms 后窗口自然过期，之后才恢复用户滚动反推。
+          this._mobProgUntil = Math.max(this._mobProgUntil, performance.now() + 120);
+          return;
+        }
+        if (moved < 1) return; // 无真实位移（合成事件/终点回调）不反推
+        // 纯视口中心公式在卡片高 < 半视口时到不了首/末页（卡片高 ~= 0.5625 * 宽,
+        // 竖屏视口高通常远大于宽的一半），两端改用 clamp，中段维持视口中心语义。
+        const max = stage.scrollHeight - stage.clientHeight;
+        let cur;
+        if (max <= 0 || stage.scrollTop <= 1) {
+          cur = this._mobCards[0];
+        } else if (stage.scrollTop >= max - 1) {
+          cur = this._mobCards[this._mobCards.length - 1];
+        } else {
+          const center = stage.scrollTop + stage.clientHeight / 2;
+          cur = this._mobCards[0];
+          for (const c of this._mobCards) {
+            if (center >= c.y) cur = c; else break;
+          }
+        }
+        if (cur.i !== this._index) {
+          this._index = cur.i;
+          // 广播走现有内核：hash 同步 + slide-changed + slidechange 事件。
+          // data-deck-active 的切换在竖排 CSS 下无视觉副作用。
+          this._applyIndex({ broadcast: true, reason: 'api' });
+        }
+      });
+    }
+
+    _mobScrollTo(i, smooth) {
+      const card = (this._mobCards || []).find((c) => c.i === i);
+      if (!card) return;
+      const stage = this._canvas.parentElement;
+      const top = Math.max(0, card.y - Math.max(0, (stage.clientHeight - card.h) / 2));
+      // 程序化滚动期间抑制 _onMobScroll 的反推——goto/deep-link 已直接设定
+      // _index，多张边缘卡片的居中目标会被 clamp 到同一个 scrollTop，
+      // 反推无法区分它们对应哪一页，故导航直接落 index、反推只处理真实
+      // 用户位移。
+      this._mobProgUntil = performance.now() + (smooth ? 800 : 200);
+      // 目标位置立为基线：即便这次 scrollTo 因目标已等于当前位置（如居中
+      // 目标 clamp 到 0）而不产生真实 scroll 事件，_mobLastTop 也不会停留
+      // 在 null——避免之后任意一次无位移事件被当成"首次滚动"误判有位移。
+      this._mobLastTop = top;
+      stage.scrollTo({ top, behavior: smooth ? 'smooth' : 'auto' });
+    }
+
+    _fitMobilePresent() {
+      const stage = this._canvas.parentElement;
+      if (stage) { stage.style.left = ''; stage.style.right = ''; stage.style.top = ''; stage.style.bottom = ''; }
+      this.removeAttribute('data-windowed');
+      this._canvas.style.width = this.designWidth + 'px';
+      this._canvas.style.height = this.designHeight + 'px';
+      // 物理竖屏：CSS 旋转 90°，stage 逻辑尺寸 = (innerHeight × innerWidth)；
+      // 物理横屏（用户顺势转了手机）：不旋转，按真实视口常规适配。
+      // CSS 侧由 @media (orientation) 同步分支。
+      const portrait = window.innerHeight >= window.innerWidth;
+      const lw = portrait ? window.innerHeight : window.innerWidth;
+      const lh = portrait ? window.innerWidth : window.innerHeight;
+      const s = Math.min(lw / this.designWidth, lh / this.designHeight);
+      this._canvas.style.transform = 'scale(' + s + ')';
+    }
+
     _railWidth() {
       // State-based, no offsetWidth: the first _fit() can run before the
       // rail has had layout on some load paths, and a 0 there paints the
@@ -1301,6 +1630,8 @@
 
     _fit() {
       if (!this._canvas) return;
+      if (this.hasAttribute('data-mobile-list')) return this._fitMobileList();
+      if (this.hasAttribute('data-mobile-present')) return this._fitMobilePresent();
       const stage = this._canvas.parentElement;
       // PPTX export sets noscale so the DOM capture sees authored-size
       // geometry — the scaled canvas is in shadow DOM, so the exporter's
@@ -1311,6 +1642,8 @@
         if (stage) { stage.style.left = '0'; stage.style.right = '0'; stage.style.top = '0'; stage.style.bottom = '0'; }
         return;
       }
+      this._canvas.style.width = this.designWidth + 'px';
+      this._canvas.style.height = this.designHeight + 'px';
       const rw = this._railWidth();
       const nh = this._notesHeight();
       // Windowed (20px margin + card shadow) in edit/preview; full-bleed while
@@ -1336,6 +1669,14 @@
     }
 
     _onResize() {
+      // 竖排列表几何只依赖视口宽度。移动浏览器地址栏收起/展开只改高度，
+      // 若照常全量 refit（重建规则/徽标 + 无条件回中当前页），用户滚动中
+      // 会被可见地"拽"一下——纯高度变化直接跳过。宽度变化（旋转/分屏）
+      // 照常走完整 refit。
+      if (this.hasAttribute('data-mobile-list')) {
+        if (this._mobLastVw === window.innerWidth) return;
+        this._mobLastVw = window.innerWidth;
+      }
       this._fit();
       // Crossing the narrow-viewport breakpoint reveals the rail — rerun the
       // thumbnail scale the same way _setRailWidth does.
@@ -1351,6 +1692,8 @@
       const d = e.data;
       if (d && d.type === 'miaoda:deck:presenting' && typeof d.on === 'boolean') {
         this._presenting = d.on;
+        this._syncMobileMode();
+        if (!d.on) this._toggleMobUi(false);
         this._syncRailHidden();
         this._syncNotesHidden();
         this._closeMenu();
@@ -1431,12 +1774,118 @@
         if (n === this._stage) break;
         if (n.matches && n.matches(INTERACTIVE_SEL)) return;
       }
+      // 竖排浏览是滚动列表，tap 不翻页（spec 决策 #5）
+      if (this.hasAttribute('data-mobile-list')) return;
       e.preventDefault();
+      if (this.hasAttribute('data-mobile-present')) {
+        const zone = this._mobPresentZone(e);
+        if (zone === 'menu') this._toggleMobUi();
+        else {
+          this._advance(zone === 'prev' ? -1 : 1, 'tap');
+          if (this.hasAttribute('data-mob-ui')) this._toggleMobUi(true);
+        }
+        return;
+      }
       const rw = this._railWidth();
       const mid = rw + (window.innerWidth - rw) / 2;
       this._advance(e.clientX < mid ? -1 : 1, 'tap');
     }
 
+    // rotate(90deg) 后视觉横屏的 x 轴对应视口 y 轴。方向以真机/仿真实测为准：
+    // 若实测发现 prev/next 颠倒，翻转此处的比较符（保持单点修改）。
+    _mobPresentZone(e) {
+      const rect = this._stage.getBoundingClientRect();
+      // 物理竖屏 = stage 被 CSS 旋转 90°，视觉横屏 x 轴对应视口 y 轴；
+      // 物理横屏 = 无旋转，直接用视口 x 轴。与 _fitMobilePresent 同分支。
+      const portrait = window.innerHeight >= window.innerWidth;
+      const x = portrait
+        ? (e.clientY - rect.top) / Math.max(1, rect.height)
+        : (e.clientX - rect.left) / Math.max(1, rect.width);
+      return x < 1 / 3 ? 'prev' : x > 2 / 3 ? 'next' : 'menu';
+    }
+
+    _toggleMobUi(force) {
+      const wasOpen = this.hasAttribute('data-mob-ui');
+      const on = force != null ? !!force : !wasOpen;
+      this.toggleAttribute('data-mob-ui', on);
+      clearTimeout(this._mobUiTimer);
+      if (!on) return;
+      // 从隐藏态唤出才全量重建（吸收直编/重排/skip 变化——strip 是静态
+      // 快照、不接 _liveObserver 刷新管线）；已展开时的调用（缩略图点击/
+      // 翻页重置计时）只同步高亮，避免高频路径 O(页数) 重建。
+      if (!wasOpen || !this._mobUi) {
+        if (this._mobUi) { this._mobUi.remove(); this._mobUi = null; }
+        this._buildMobUi();
+      }
+      this._syncMobStrip();
+      this._mobUiTimer = setTimeout(() => this._toggleMobUi(false), MOB_UI_HIDE_MS);
+    }
+
+    _buildMobUi() {
+      // 移动 viewer 语境 host 可能从不发 rail-enabled，author-CSS 快照
+      // （_enableRail 才建）不存在时缩略图克隆会裸渲染——此处兜底建一次。
+      // _snapshotAuthorCss 可重入且带 generation guard。
+      if (!this._adoptedSheet && this._authorCss == null) this._snapshotAuthorCss();
+      const ui = document.createElement('div');
+      ui.className = 'mob-ui export-hidden';
+      ui.setAttribute('data-miaoda-chrome', '');
+      const back = document.createElement('button');
+      back.className = 'mob-back';
+      back.type = 'button';
+      back.textContent = '‹ 演示模式';
+      back.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this._presenting = false;
+        this._syncMobileMode();
+        this._syncRailHidden();
+        this._syncNotesHidden();
+        this._fit();
+        this._toggleMobUi(false);
+        try { window.parent.postMessage({ type: 'miaoda:deck:presenting-dismissed' }, '*'); } catch (err) {}
+      });
+      const strip = document.createElement('div');
+      strip.className = 'mob-strip';
+      this._mobStripEntries = this._slides
+        .map((slide, i) => ({ slide, i }))
+        .filter((e2) => !e2.slide.hasAttribute('data-deck-skip'))
+        .map((e2, ordinal) => {
+          const t = document.createElement('div');
+          t.className = 'mthumb';
+          const frame = document.createElement('div');
+          frame.className = 'mframe';
+          const num = document.createElement('div');
+          num.className = 'mnum';
+          num.textContent = String(ordinal + 1);
+          t.append(frame, num);
+          t.addEventListener('click', (ev) => {
+            ev.stopPropagation();
+            this._go(e2.i, 'click');
+            this._toggleMobUi(true); // 重置自动收起计时，保持控件层可见
+          });
+          strip.appendChild(t);
+          // 复用 _materialize 的克隆管线（media 熄火、canvas 快照、custom
+          // element 中性化）：它会自建 host/shadow 并直接挂进 entry.frame，
+          // 所以这里不需要再手工搭 host——只需在其后把统一走 _thumbScale
+          // （rail 宽度）算出的缩放，改写成本条带 132px 专属的缩放。
+          const entry = { slide: e2.slide, frame, host: null, clone: null };
+          this._materialize(entry);
+          if (entry.clone) entry.clone.style.transform = 'scale(' + (132 / this.designWidth) + ')';
+          return { el: t, i: e2.i };
+        });
+      // 控件层内任何点击不冒泡成翻页 tap
+      ui.addEventListener('click', (e) => e.stopPropagation());
+      ui.append(back, strip);
+      this._stage.appendChild(ui);
+      this._mobUi = ui;
+    }
+
+    _syncMobStrip() {
+      (this._mobStripEntries || []).forEach((en) => {
+        en.el.toggleAttribute('data-current', en.i === this._index);
+        if (en.i === this._index) en.el.scrollIntoView({ block: 'nearest', inline: 'center' });
+      });
+    }
+
     _onKey(e) {
       // Ignore when the user is typing.
       const t = e.target;
@@ -1477,6 +1926,17 @@
     _go(i, reason = 'api') {
       if (!this._slides.length) return;
       const clamped = Math.max(0, Math.min(this._slides.length - 1, i));
+      // 竖排浏览：导航直接落 index（与桌面语义一致），滚动只是视觉跟随；
+      // 不再依赖 _onMobScroll 从滚动位置反推——多张边缘卡片的居中滚动目标
+      // 会被 clamp 到同一个 scrollTop，反推无法区分它们是哪一页。
+      if (this.hasAttribute('data-mobile-list')) {
+        const changed = clamped !== this._index;
+        this._index = clamped;
+        // 同页 goto 不重复广播（与桌面分支语义一致），但仍需重新居中滚动。
+        if (changed) this._applyIndex({ broadcast: true, reason });
+        this._mobScrollTo(clamped, true);
+        return;
+      }
       if (clamped === this._index) return;
       this._index = clamped;
       this._applyIndex({ broadcast: true, reason });
@@ -1714,9 +2174,12 @@
       if (entry.host) return;
       const dw = this.designWidth, dh = this.designHeight;
       let clone = entry.slide.cloneNode(true);
-      clone.removeAttribute('id');
+      // Keep ids: the clone lives in its own shadow root, so duplicate ids
+      // can't clash with the document (getElementById doesn't pierce shadow
+      // roots), while id-keyed author styles (#slide-01 { background: … })
+      // MUST keep matching — stripping ids rendered such decks as blank
+      // white thumbnails (styles all failed to match).
       clone.removeAttribute('data-deck-active');
-      clone.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id'));
       // Neuter heavy media; replace <video> with its poster so the box
       // keeps a visual. <iframe>/<audio> become empty placeholders.
       clone.querySelectorAll('iframe, audio, object, embed').forEach((el) => {