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

package/components/design-canvas.jsx

@@ -28,6 +28,10 @@
 // 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 devices the canvas automatically becomes a browse-only surface
+// (touch pan/zoom, editing disabled). This needs NO authoring changes:
+// never add custom touch handling or mobile-specific layouts.
 /* END USAGE */
 
 const DC = {
@@ -40,6 +44,16 @@ const DC = {
   font: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
 };
 
+// Mirrors the host platform's isMobile() (UA regex + iPad maxTouchPoints);
+// the product iframe is cross-origin, so the shared helper can't be imported.
+// Deliberately NOT viewport-based: the desktop workbench shows canvases in a
+// narrow preview iframe that a width breakpoint would misread as mobile.
+// Evaluated once at load. Keep the regex in sync with deck-stage.js's copy.
+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 a drag
+    // starting on selectable text never reaches the pan.
+    '.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 a pan could
+    // never start there. 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,110 @@ 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;         // finger distance as of the last applied frame
+    let pinchMid = null;       // last-applied midpoint
+    let panApplied = null;     // pointer position as of the last applied pan frame
+    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(); // apply any pending pan frame before rebasing as a pinch
+        mobMode = 'pinch';
+        const g = pinchGeom();
+        pinchDist = g.d;
+        pinchMid = { x: g.mx, y: g.my };
+        try { vp.setPointerCapture(e.pointerId); } catch {}
+      }
+    };
+    // rAF-coalesced application: move handlers only record pointer
+    // positions; geometry is applied at most once per frame. pointermove can
+    // far outrun the render rate (120Hz touch sampling, fast pinches), and
+    // running the full zoomAt/apply per event creates engine-heap garbage
+    // faster than mobile WebKit reclaims it — which reads as unbounded
+    // memory growth on device. Only the last position per frame can ever
+    // be painted anyway.
+    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(); // apply the pending frame first so the gesture tail isn't lost
+      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 +863,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 +920,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 +968,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 +1220,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 +1274,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.20260717111512",
   "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,8 @@
  *      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 (not in mobile browse mode — 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 +34,10 @@
  *      (≤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 devices the same deck automatically renders as
+ *      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.
  *
  * Slides are HIDDEN, not unmounted. Non-active slides stay in the DOM with
  * `visibility: hidden` + `opacity: 0`, so their state (videos, iframes,
@@ -116,6 +120,22 @@
   // 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])';
 
+  // Mirrors the host platform's isMobile() (UA regex + iPad maxTouchPoints);
+  // the product iframe is cross-origin, so the shared helper can't be
+  // imported. Deliberately NOT viewport-based: the desktop workbench renders
+  // decks in a narrow preview iframe that a width breakpoint would misread
+  // as mobile. Keep the regex in sync with design-canvas.jsx's copy.
+  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);
+  // Mobile visual metrics (values from the platform's mobile design spec).
+  const MOB_MARGIN = 12;           // card-stream edge margin
+  const MOB_GAP = 8;               // gap between cards
+  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 pad2 = (n) => String(n).padStart(2, '0');
 
   // Label precedence: data-label → data-screen-label (number stripped) → first heading → "Slide".
@@ -380,6 +400,145 @@
     .rail[data-presenting] + .rail-resize,
     .rail[data-user-hidden] + .rail-resize { display: none; }
 
+    /* ── Mobile browse: vertical card stream ── */
+    :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; }
+
+    /* ── 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,
+       and stacking another 90° would render slides sideways — so landscape
+       falls back to a plain full-bleed fit. _fitMobilePresent and
+       _mobPresentZone branch on the same orientation test. */
+    :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);
+      }
+    }
+
+    /* ── Mobile page badge ── */
+    .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; }
+
+    /* ── Mobile presenting controls (back button + filmstrip) ── */
+    .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));
+      /* Transparent: thumbnails carry their own white frames, and a solid
+         strip would blanket the slide behind the overlay. */
+      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;
+      /* The strip floats over the (dark) presenting stage — numbers must be light. */
+      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 +697,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 +991,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 +1009,7 @@
         if (this._rail) {
           this._rail.style.setProperty('--deck-aspect', this.designWidth + '/' + this.designHeight);
         }
+        this._syncMobileMode();
         this._fit();
         this._scaleThumbs();
         this._syncPrintPageRule();
@@ -870,6 +1035,17 @@
       canvas.appendChild(slot);
       stage.appendChild(canvas);
 
+      this._onMobScroll = this._onMobScroll.bind(this);
+      stage.addEventListener('scroll', this._onMobScroll, { passive: true });
+
+      // Per-slide placement rules for the mobile card stream; rebuilt by _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 +1186,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 +1461,162 @@
         }));
       }
 
+      if (this.hasAttribute('data-mob-ui')) this._syncMobStrip();
+
       this._prevIndex = curr;
     }
 
+    // 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.
+    _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; // baseline for _onResize's height-only skip
+      const stage = this._canvas.parentElement;
+      // Clear the stage inset the desktop _fit() wrote inline.
+      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;' +
+          // Radius/border are pre-divided by the scale so the slide's transform
+          // lands them at 8px / 0.5px on screen.
+          ' 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;
+      });
+      // Screen-only: these per-slide rules out-specify the print block's
+      // ::slotted reset, so unwrapped they would drag the card-stream
+      // transforms into the paginated print output.
+      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;
+
+      // Badge geometry is fully determined by _mobCards, so badges are laid
+      // out directly — no IntersectionObserver needed.
+      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;
+
+      // Programmatic scrolls count as scrolling too — either source means
+      // "the position is changing", which is what the badge signals.
+      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; // keep tracking even while suppressed
+        if (this._mobProgUntil && performance.now() < this._mobProgUntil) {
+          // Events are still streaming from a programmatic scroll: extend
+          // the window so any animation length is covered. It expires 120ms
+          // after the stream stops; user scrolls then resume inference.
+          this._mobProgUntil = Math.max(this._mobProgUntil, performance.now() + 120);
+          return;
+        }
+        if (moved < 1) return; // no real displacement (synthetic/terminal event)
+        // A pure viewport-centre rule can never select the first/last page:
+        // 16:9 cards are far shorter than half a portrait viewport, so their
+        // centring targets clamp. Clamp at the extremes, centre in between.
+        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;
+          // Broadcast through the existing core (hash + slide-changed +
+          // slidechange). data-deck-active toggling is visually inert here.
+          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));
+      // Suppress scroll-position inference while a programmatic scroll is
+      // in flight: goto/deep-link already set _index directly, and the
+      // centring targets of several edge cards clamp to the same scrollTop,
+      // so the position alone cannot tell those pages apart.
+      this._mobProgUntil = performance.now() + (smooth ? 800 : 200);
+      // Seed the baseline with the target: a scrollTo that lands where the
+      // stage already is fires no scroll event, and a null baseline would
+      // make the next no-op event read as a real first displacement.
+      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';
+      // Portrait: the stage is CSS-rotated, so its logical size is the
+      // swapped viewport. Landscape (user physically rotated): no rotation,
+      // plain fit. The CSS branches on the same orientation query.
+      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() {
+      // Card-stream geometry depends only on viewport width, and mobile
+      // browser URL bars fire height-only resizes as they collapse/expand —
+      // a full refit would rebuild everything and yank the list back to the
+      // current page mid-scroll. Width changes (rotate/split) refit as usual.
+      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,122 @@
         if (n === this._stage) break;
         if (n.matches && n.matches(INTERACTIVE_SEL)) return;
       }
+      // Mobile browse is a scroll list — taps must not navigate.
+      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');
     }
 
+    // After rotate(90deg) the visual-landscape x axis maps onto viewport y
+    // (direction confirmed on device; if prev/next ever read reversed, flip
+    // these comparisons — single point of change).
+    _mobPresentZone(e) {
+      const rect = this._stage.getBoundingClientRect();
+      // Portrait = stage is rotated, visual x comes from viewport y;
+      // landscape = no rotation, viewport x directly. Same branch as the fit.
+      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;
+      // Rebuild only when opening from hidden: the strip is a static
+      // snapshot outside _liveObserver's refresh pipeline, so reopening is
+      // what absorbs slide edits/reorders/skips. Calls while already open
+      // (thumbnail taps resetting the timer) only re-highlight — rebuilding
+      // on that hot path would clone every slide per tap.
+      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() {
+      // A pure-viewer host may never send rail-enabled, so the author-CSS
+      // snapshot (normally built by _enableRail) can be missing and the
+      // clones would render unstyled — build it here as a fallback.
+      // _snapshotAuthorCss is re-entrant and generation-guarded.
+      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); // reset the auto-hide timer, keep the overlay up
+          });
+          strip.appendChild(t);
+          // _materialize provides the full clone pipeline (media neutralised,
+          // canvas snapshots) and mounts a host into entry.frame itself — but
+          // 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);
+          if (entry.clone) entry.clone.style.transform = 'scale(' + (132 / this.designWidth) + ')';
+          return { el: t, i: e2.i };
+        });
+      // Clicks inside the overlay must not bubble into tap navigation.
+      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 +1930,18 @@
     _go(i, reason = 'api') {
       if (!this._slides.length) return;
       const clamped = Math.max(0, Math.min(this._slides.length - 1, i));
+      // Mobile browse: navigation sets _index directly (desktop parity) and
+      // the scroll is only a visual follow. Inferring the page back from the
+      // scroll position is unreliable here — edge cards' centring targets
+      // clamp to the same scrollTop.
+      if (this.hasAttribute('data-mobile-list')) {
+        const changed = clamped !== this._index;
+        this._index = clamped;
+        // Same-page goto doesn't rebroadcast (desktop parity) but still recentres.
+        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 +2179,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) => {