@lark-apaas/coding-registry-buildless 0.1.2-alpha.0 → 0.1.2-beta.1

package/scripts/deck-stage.js

@@ -4,25 +4,29 @@
  *
  * Handles:
  *  (a) speaker notes — reads <script type="application/json" id="speaker-notes">
- *      and posts miaoda:deck:slide-changed to the parent window on nav.
+ *      (a JSON array of per-slide note strings), shows the current slide's
+ *      note in an editable bottom dock (edit mode only; drag its grip to
+ *      resize, height persisted to localStorage), posts miaoda:deck:slide-changed
+ *      to the parent on nav, and posts miaoda:deck:notes-changed (the full
+ *      array) when a note is edited so the host can persist it. The dock is
+ *      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.
- *  (c) press R to reset to slide 0 (with a tasteful keyboard hint).
- *  (d) bottom-center overlay showing slide count + hints, fades out on idle.
- *  (e) auto-scaling — inner canvas is a fixed design size (default 1920×1080)
+ *  (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.
  *      Set the `noscale` attribute to render at authored size (1:1) — the
  *      PPTX exporter sets this so its DOM capture sees unscaled geometry.
- *  (f) print — `@media print` lays every slide out as its own page at the
+ *  (e) print — `@media print` lays every slide out as its own page at the
  *      design size, so the browser's Print → Save as PDF produces a clean
  *      one-page-per-slide PDF with no extra setup.
- *  (g) thumbnail rail — resizable left-hand column of per-slide thumbnails
+ *  (f) thumbnail rail — resizable left-hand column of per-slide thumbnails
  *      (static clones). Click to navigate; ↑/↓ with a thumbnail focused to
  *      step between slides; drag to reorder; right-click for
- *      Skip / Move up / Move down / Delete (opens a Cancel/Delete confirm
- *      dialog). Drag the rail's right edge to resize; width persists to
+ *      Skip / Move up / Move down / Delete. Drag the rail's right edge
+ *      to resize; width persists to
  *      localStorage. Skipped slides carry `data-deck-skip`, are dimmed in
  *      the rail, omitted from prev/next navigation, and hidden at print.
  *      The rail is suppressed in presenting mode, in the host's Preview
@@ -83,9 +87,15 @@
  *   - Do NOT set position/inset/width/height on the slide <section> elements —
  *     the component absolutely positions every slotted child for you.
  *   - Entrance animations: make the visible end-state the base style and
- *     animate *from* hidden, so print and reduced-motion show content.
- *     Gate the animation on [data-deck-active] and the motion query, e.g.
- *     `@media (prefers-reduced-motion:no-preference){ [data-deck-active] .x{animation:fade-in .5s both} }`.
+ *     animate *from* hidden. The thumbnail rail, print, and reduced-motion
+ *     render each slide's static base state and never fire the animation, so
+ *     a hidden base (opacity:0 on the rule itself) renders blank there while
+ *     the live slide looks fine. Keep the hidden state only in the keyframes
+ *     `from`, and gate the animation on [data-deck-active] and the motion
+ *     query, e.g.:
+ *       .fade-up { opacity: 1 }
+ *       @media (prefers-reduced-motion:no-preference){ [data-deck-active] .fade-up{ animation: fadeUp .5s both } }
+ *       @keyframes fadeUp { from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
  *     Avoid infinite decorative loops on slide content.
  */
 /* END USAGE */
@@ -94,7 +104,12 @@
   if (typeof window === 'undefined') return;
   const DESIGN_W_DEFAULT = 1920;
   const DESIGN_H_DEFAULT = 1080;
-  const OVERLAY_HIDE_MS = 1800;
+  // Safe margin around the scaled slide in edit/preview (non-presenting) mode,
+  // giving the canvas a floating "card" look with a drop-shadow.
+  const DECK_MARGIN = 20;
+  // TEMP: presenter-notes dock is hidden for now. Flip back to false to restore
+  // the editable speaker-notes panel (all notes logic below stays intact).
+  const NOTES_DISABLED = true;
   const VALIDATE_ATTR = 'no_overflowing_text,no_overlapping_text,slide_sized_text';
   const FINE_POINTER_MQ = matchMedia('(hover: hover) and (pointer: fine)');
   const NARROW_MQ = matchMedia('(max-width: 640px)');
@@ -123,8 +138,7 @@
       position: fixed;
       inset: 0;
       display: block;
-      background: #fff;
-      color: #fff;
+      background: #F8F9FA;
       font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
       overflow: hidden;
       -webkit-tap-highlight-color: transparent;
@@ -136,7 +150,8 @@
      * Only the stage/rail hide — the black :host background stays, so the
      * iframe doesn't flash the page's default white. */
     :host([data-fonts-pending]) .stage,
-    :host([data-fonts-pending]) .rail { opacity: 0; pointer-events: none; }
+    :host([data-fonts-pending]) .rail,
+    :host([data-fonts-pending]) .notes { opacity: 0; pointer-events: none; }
 
     .stage {
       position: absolute;
@@ -144,8 +159,9 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background: #F8F9FA;
+      background: transparent;
     }
+    :host(:not([data-windowed])) .stage { background: #000; }
 
     .canvas {
       position: relative;
@@ -154,6 +170,13 @@
       background: #fff;
       will-change: transform;
     }
+    /* Floating card drop-shadow — only when the stage is windowed (20px
+       margin), i.e. edit/preview. Full-bleed presenting / noscale / _snthumb
+       carry no shadow (_fit toggles data-windowed). */
+    :host([data-windowed]) .canvas {
+      border: 0.882px solid #DEE0E3;
+      box-shadow: 0 0 7.052px 0 rgba(31, 35, 41, 0.06), 0 0 15.867px 0 rgba(31, 35, 41, 0.04), 0 0 22.919px 7.052px rgba(31, 35, 41, 0.04);
+    }
 
     /* Slides live in light DOM (via <slot>) so authored CSS still applies.
        We absolutely position each slotted child to stack them. */
@@ -174,104 +197,6 @@
       visibility: visible;
     }
 
-    .overlay {
-      position: fixed;
-      left: 50%;
-      bottom: 22px;
-      transform: translate(-50%, 6px) scale(0.92);
-      filter: blur(6px);
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px;
-      background: #000;
-      color: #fff;
-      border-radius: 999px;
-      font-size: 12px;
-      font-feature-settings: "tnum" 1;
-      letter-spacing: 0.01em;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 260ms ease, transform 260ms cubic-bezier(.2,.8,.2,1), filter 260ms ease;
-      transform-origin: center bottom;
-      z-index: 2147483000;
-      user-select: none;
-    }
-    .overlay[data-visible] {
-      opacity: 1;
-      pointer-events: auto;
-      transform: translate(-50%, 0) scale(1);
-      filter: blur(0);
-    }
-
-    .btn {
-      appearance: none;
-      -webkit-appearance: none;
-      background: transparent;
-      border: 0;
-      margin: 0;
-      padding: 0;
-      color: inherit;
-      font: inherit;
-      cursor: default;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      height: 28px;
-      min-width: 28px;
-      border-radius: 999px;
-      color: rgba(255,255,255,0.72);
-      transition: background 140ms ease, color 140ms ease;
-      -webkit-tap-highlight-color: transparent;
-    }
-    .btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
-    .btn:active { background: rgba(255,255,255,0.18); }
-    .btn:focus { outline: none; }
-    .btn:focus-visible { outline: none; }
-    .btn::-moz-focus-inner { border: 0; }
-    .btn svg { width: 14px; height: 14px; display: block; }
-    .btn.reset {
-      font-size: 11px;
-      font-weight: 500;
-      letter-spacing: 0.02em;
-      padding: 0 10px 0 12px;
-      gap: 6px;
-      color: rgba(255,255,255,0.72);
-    }
-    .btn.reset .kbd {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 16px;
-      height: 16px;
-      padding: 0 4px;
-      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-      font-size: 10px;
-      line-height: 1;
-      color: rgba(255,255,255,0.88);
-      background: rgba(255,255,255,0.12);
-      border-radius: 4px;
-    }
-
-    .count {
-      font-variant-numeric: tabular-nums;
-      color: #fff;
-      font-weight: 500;
-      padding: 0 8px;
-      min-width: 42px;
-      text-align: center;
-      font-size: 12px;
-    }
-    .count .sep { color: rgba(255,255,255,0.45); margin: 0 3px; font-weight: 400; }
-    .count .total { color: rgba(255,255,255,0.55); }
-
-    .divider {
-      width: 1px;
-      height: 14px;
-      background: rgba(255,255,255,0.18);
-      margin: 0 2px;
-    }
-
     /* ── Thumbnail rail ──────────────────────────────────────────────────
        Fixed column on the left; each thumbnail is a static deep-clone of
        the light-DOM slide scaled into a 16:9 (or design-aspect) frame. The
@@ -287,11 +212,12 @@
       border-right: 0.5px solid #DEE0E3;
       overflow-y: auto;
       overflow-x: hidden;
-      padding: 16px 10px;
+      transform: translate3d(0, 0, 0);
+      padding: 20px 15px 20px 10px;
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: 18px;
       z-index: 2147482500;
       scrollbar-width: thin;
       scrollbar-color: rgba(0,0,0,0.18) transparent;
@@ -319,36 +245,30 @@
        popping. Transitions are gated on :host([data-rail-anim]) — set only
        for the 200ms around the toggle — so window-resize and rail-width
        drag (which also call _fit) don't lag behind the cursor. */
-    .rail[data-user-hidden] { transform: translateX(-100%); }
+    .rail[data-user-hidden] { transform: translate3d(-100%, 0, 0); }
     :host([data-rail-anim]) .rail { transition: transform 200ms cubic-bezier(.3,.7,.4,1); }
     :host([data-rail-anim]) .stage { transition: left 200ms cubic-bezier(.3,.7,.4,1); }
     :host([data-rail-anim]) .canvas { transition: transform 200ms cubic-bezier(.3,.7,.4,1); }
-    /* transition shorthand replaces rather than merges — repeat the base
-       .overlay opacity/transform/filter transitions so visibility changes
-       during the 200ms toggle window still fade instead of popping. */
-    :host([data-rail-anim]) .overlay {
-      transition: margin-left 200ms cubic-bezier(.3,.7,.4,1),
-                  opacity 260ms ease,
-                  transform 260ms cubic-bezier(.2,.8,.2,1),
-                  filter 260ms ease;
-    }
+    :host([data-rail-anim]) .notes { transition: left 200ms cubic-bezier(.3,.7,.4,1); }
 
     .thumb {
       position: relative;
       display: flex;
       align-items: flex-start;
-      gap: 8px;
+      gap: 9px;
       cursor: pointer;
       user-select: none;
     }
+    .thumb[data-dragging] { cursor: grabbing; }
     .thumb .num {
-      width: 16px;
+      width: 14px;
       flex-shrink: 0;
       font-size: 12px;
+      line-height: 1;
       font-weight: 400;
-      text-align: right;
+      text-align: center;
       color: #646A73;
-      padding-top: 2px;
+      padding-top: 8px;
       font-variant-numeric: tabular-nums;
     }
     .thumb .frame {
@@ -357,18 +277,32 @@
       min-width: 0;
       aspect-ratio: var(--deck-aspect);
       background: #fff;
-      border-radius: 4px;
+      border-radius: 6px;
+      /* Default hairline as a box-shadow, not a border: the frame is the
+         absolutely-positioned origin for the cloned slide, so a real border
+         would shift the clone; box-shadow doesn't affect layout, so
+         _scaleThumbs' frame.offsetWidth read stays correct. */
+      box-shadow: 0 0 0 1px #DEE0E3;
       outline: 2px solid transparent;
-      outline-offset: 0;
+      outline-offset: 2px;
       overflow: hidden;
-      transition: outline-color 120ms ease;
+      transition: outline-color 120ms ease, box-shadow 120ms ease;
     }
-    .thumb:hover .frame { outline-color: rgba(0,0,0,0.15); }
+    .thumb:hover .frame { outline-color: #1f23290d; }
     .thumb { outline: none; }
-    .thumb:focus-visible .frame { outline-color: #336DF4; }
-    .thumb[data-current] .num { color: #1F2329; }
+    .thumb:focus-visible .frame { outline-color: #1f23290d; }
+    .thumb[data-current] .num { color: #1F2329; font-weight: 500; }
     .thumb[data-current] .frame { outline-color: #1F2329; }
-    .thumb[data-dragging] { opacity: 0.35; }
+    /* Elevated "picked up" look on the *stationary* source while dragging
+       (outline hidden, card lifted); the ::before drop-line marks the landing
+       position. The floating ghost under the cursor is a separate custom
+       drag-image built in _makeDragGhost — the browser's native snapshot of
+       .thumb clipped this frame's outside-offset ring and carried the number
+       gutter, so we no longer let it draw the ghost. */
+    .thumb[data-dragging] .frame {
+      outline-color: transparent;
+      box-shadow: 0 8px 24px rgba(31,35,41,0.22), 0 0 0 1px rgba(31,35,41,0.08);
+    }
     .thumb::before {
       content: '';
       position: absolute;
@@ -382,32 +316,30 @@
     }
     .thumb[data-drop="before"]::before { top: -8px; opacity: 1; }
     .thumb[data-drop="after"]::before { bottom: -8px; opacity: 1; }
-    .thumb[data-skip] .frame { opacity: 0.35; }
-    .thumb[data-skip] .frame::after {
-      content: '已跳过';
+    .thumb .skip-icon {
+      display: none;
       position: absolute;
       inset: 0;
-      display: flex;
       align-items: center;
       justify-content: center;
-      background: rgba(0,0,0,0.45);
-      color: #fff;
-      font-size: 10px;
-      font-weight: 500;
-      letter-spacing: 0.04em;
+      background: rgba(255,255,255,0.6);
+      z-index: 1;
     }
+    .thumb[data-skip] .skip-icon { display: flex; }
 
     .ctxmenu {
       position: fixed;
-      min-width: 150px;
+      min-width: 160px;
       padding: 4px;
-      background: #242424;
-      border: 1px solid rgba(255,255,255,0.12);
-      border-radius: 7px;
-      box-shadow: 0 8px 24px rgba(0,0,0,0.45);
+      background: #fff;
+      color: #1F2329;
+      border: 0.5px solid #D2D5D8;
+      border-radius: 6px;
+      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);
       z-index: 2147483100;
       display: none;
-      font-size: 12px;
+      font-size: 14px;
+      line-height: 22px;
     }
     .ctxmenu[data-open] { display: block; }
     .ctxmenu button {
@@ -416,19 +348,19 @@
       appearance: none;
       border: 0;
       background: transparent;
-      color: #e8e8e8;
+      color: #1F2329;
       font: inherit;
       text-align: left;
-      padding: 6px 10px;
+      padding: 6px 8px;
       border-radius: 4px;
       cursor: pointer;
     }
-    .ctxmenu button:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
+    .ctxmenu button:hover:not(:disabled) { background: #F2F3F5; }
     .ctxmenu button:disabled { opacity: 0.35; cursor: default; }
     .ctxmenu hr {
       border: 0;
-      border-top: 1px solid rgba(255,255,255,0.1);
-      margin: 4px 2px;
+      border-top: 0.5px solid #D2D5D8;
+      margin: 4px -4px;
     }
 
     .rail-resize {
@@ -448,67 +380,65 @@
     .rail[data-presenting] + .rail-resize,
     .rail[data-user-hidden] + .rail-resize { display: none; }
 
-    /* Delete-confirm popup — matches the SPA's ConfirmDialog layout
-       (title + message body, depressed footer with Cancel / Delete). */
-    .confirm-backdrop {
+    /* ── 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
+       bound to the current slide's note. Hidden while presenting / preview /
+       narrow / noscale / no-rail / print — same editing-chrome gating as the
+       rail. Its left edge is set to the live rail width by _fit. */
+    .notes {
       position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.45);
-      z-index: 2147483200;
-      display: none;
-      align-items: center;
-      justify-content: center;
-    }
-    .confirm-backdrop[data-open] { display: flex; }
-    .confirm {
-      width: 320px;
-      max-width: calc(100vw - 32px);
-      background: #2a2a2a;
-      color: #e8e8e8;
-      border: 1px solid rgba(255,255,255,0.12);
-      border-radius: 12px;
-      box-shadow: 0 12px 32px rgba(0,0,0,0.5);
-      overflow: hidden;
-      font-family: inherit;
-      animation: deck-confirm-in 0.18s ease;
-    }
-    @keyframes deck-confirm-in {
-      from { opacity: 0; transform: scale(0.96); }
-      to { opacity: 1; transform: scale(1); }
-    }
-    .confirm .body { padding: 20px 20px 16px; }
-    .confirm .title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
-    .confirm .msg { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.65); }
-    .confirm .footer {
-      padding: 14px 20px;
-      background: #1f1f1f;
-      border-top: 1px solid rgba(255,255,255,0.08);
+      left: var(--deck-rail-w, 192px);
+      right: 20px;
+      bottom: 0;
+      height: var(--deck-notes-h, 160px);
+      background: #fff;
+      border: 0.5px solid #D2D5D8;
+      border-bottom: none;
+      border-radius: 12px 12px 0 0;
+      box-shadow: 0 2px 4px -4px rgba(31, 35, 41, 0.02), 0 4px 8px 0 rgba(31, 35, 41, 0.02), 0 4px 16px 4px rgba(31, 35, 41, 0.03);
+      box-sizing: border-box;
       display: flex;
-      justify-content: flex-end;
-      gap: 8px;
+      flex-direction: column;
+      z-index: 2147482400;
     }
-    .confirm button {
-      appearance: none;
-      font: inherit;
-      font-size: 13px;
-      font-weight: 500;
-      padding: 8px 16px;
-      border-radius: 8px;
-      cursor: pointer;
+    :host([no-rail]) .notes,
+    :host([noscale]) .notes { display: none; }
+    .notes[data-hidden] { display: none; }
+    @media (max-width: 640px) { .notes { display: none; } }
+    .notes-handle {
+      flex-shrink: 0;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: row-resize;
+      color: #8F959E;
+      font-size: 18px;
+      line-height: 20px;
+      letter-spacing: 2px;
+      user-select: none;
+      touch-action: none;
     }
-    .confirm .cancel {
-      background: transparent;
+    .notes-handle:hover,
+    .notes-handle[data-dragging] { color: #646A73; }
+    .notes-body {
+      flex: 1;
+      min-height: 0;
+      width: 100%;
+      box-sizing: border-box;
       border: 0;
-      color: rgba(255,255,255,0.8);
-    }
-    .confirm .cancel:hover { background: rgba(255,255,255,0.08); }
-    .confirm .danger {
-      background: #c96442;
-      border: 1px solid rgba(0,0,0,0.15);
-      color: #fff;
-      box-shadow: 0 1px 3px rgba(166,50,68,0.3), 0 2px 6px rgba(166,50,68,0.18);
+      outline: none;
+      resize: none;
+      background: transparent;
+      color: #1F2329;
+      font: inherit;
+      font-size: 14px;
+      line-height: 1.6;
+      padding: 4px 24px 12px;
+      overflow-y: auto;
     }
-    .confirm .danger:hover { background: #b5563a; }
+    .notes-body::placeholder { color: #8F959E; }
 
     /* ── Print: one page per slide, no chrome ────────────────────────────
        The screen layout stacks every slide at inset:0 inside a scaled
@@ -532,6 +462,9 @@
         height: auto !important;
         background: none;
         will-change: auto;
+        /* !important: :host([data-windowed]) .canvas (0,2,0) outranks a bare
+           .canvas rule inside this media query. */
+        box-shadow: none !important;
       }
       ::slotted(*) {
         position: relative !important;
@@ -557,7 +490,7 @@
         page-break-after: auto;
       }
       ::slotted([data-deck-skip]) { display: none !important; }
-      .overlay, .rail, .rail-resize, .ctxmenu, .confirm-backdrop { display: none !important; }
+      .rail, .rail-resize, .ctxmenu, .notes { display: none !important; }
     }
   `;
 
@@ -570,16 +503,15 @@
       this._index = 0;
       this._slides = [];
       this._notes = [];
-      this._hideTimer = null;
-      this._mouseIdleTimer = null;
       this._menuIndex = -1;
+      this._notesPersistTimer = null;
 
       this._onKey = this._onKey.bind(this);
       this._onResize = this._onResize.bind(this);
       this._onSlotChange = this._onSlotChange.bind(this);
-      this._onMouseMove = this._onMouseMove.bind(this);
       this._onTap = this._onTap.bind(this);
       this._onMessage = this._onMessage.bind(this);
+      this._onHashChange = this._onHashChange.bind(this);
       // Capture-phase close so a click anywhere dismisses the menu, but
       // ignore clicks that land inside the menu itself — otherwise the
       // capture handler runs before the menu's own (bubble) handler and
@@ -598,17 +530,22 @@
     }
 
     connectedCallback() {
-      // Presenter-view popup loads deckUrl?_snthumb=...#N for its prev/cur/
-      // next thumbnails — the rail has no business rendering inside those
-      // (wrong scale, and it offsets the stage so the thumb shows a gutter).
-      if (/[?&]_snthumb=/.test(location.search)) this.setAttribute('no-rail', '');
+      // Capture modes that render a clean full-bleed single slide, both routed
+      // through the same no-rail path: the host's pre-screenshot ?thumbnail=1
+      // (product thumbnail — slide 1) and the presenter-view popup's
+      // ?_snthumb=...#N (prev/cur/next thumbnails). Both drop the rail (wrong
+      // scale, offsets the stage into a gutter) and render full-bleed — no
+      // 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);
+      if (this._snthumb) this.setAttribute('no-rail', '');
       this._render();
       this._loadNotes();
       this._syncPrintPageRule();
       window.addEventListener('keydown', this._onKey);
       window.addEventListener('resize', this._onResize);
-      window.addEventListener('mousemove', this._onMouseMove, { passive: true });
       window.addEventListener('message', this._onMessage);
+      window.addEventListener('hashchange', this._onHashChange);
       window.addEventListener('click', this._onDocClick, true);
       this.addEventListener('click', this._onTap);
       // Print lays every slide out as its own page, so [data-deck-active]-
@@ -625,7 +562,7 @@
         this._slides.forEach((s) => s.setAttribute('data-deck-active', ''));
       };
       this._onAfterPrint = () => {
-        this._applyIndex({ showOverlay: false, broadcast: false });
+        this._applyIndex({ broadcast: false });
         if (this._freezeStyle) { this._freezeStyle.remove(); this._freezeStyle = null; }
       };
       window.addEventListener('beforeprint', this._onBeforePrint);
@@ -648,6 +585,8 @@
           new Promise((r) => setTimeout(r, 2000)),
         ]).then(reveal, reveal);
       });
+      // Announce to the host that this product IS a deck scene.
+      try { window.parent.postMessage({ type: 'miaoda:deck:available' }, '*'); } catch (e) {}
     }
 
     _enableRail() {
@@ -724,26 +663,86 @@
       this._syncRailHidden();
       this._renderRail();
       this._fit();
+      // The notes dock is editing chrome too — show it and load the current
+      // slide's note now that the rail feature is enabled.
+      this._syncNotesHidden();
+      this._syncNotesBody();
     }
 
     /** Snapshot document stylesheets into a constructable sheet that each
      *  thumbnail's nested shadow root adopts — so author CSS styles the
      *  cloned slide content without touching this component's chrome.
-     *  Cross-origin sheets throw on .cssRules — skip them. Re-callable:
-     *  the existing constructable sheet is reused via replaceSync so every
-     *  already-adopted shadow root picks up the fresh CSS without re-adopt. */
+     *  Re-callable: the constructable sheet is reused via replaceSync so
+     *  every already-adopted shadow root picks up the fresh CSS.
+     *
+     *  Cross-origin sheets (a CDN styles.css) throw SecurityError on
+     *  .cssRules — the rules style the light DOM but CSSOM won't expose them,
+     *  so the snapshot comes back empty and thumbnail clones render unstyled.
+     *  Re-fetch those sheets' source and re-apply when it lands; the shared
+     *  adopted sheet means one replaceSync restyles every clone (no re-clone).
+     *  The fetch is CORS-gated — a CDN without Access-Control-Allow-Origin
+     *  fails it and we degrade to an unstyled clone, no worse than before. */
     _snapshotAuthorCss() {
-      // :root in an adopted sheet inside a shadow root matches nothing
-      // (only the document root qualifies), so author rules like
-      // `:root[data-voice="modern"] .serif` never reach the clones.
-      // Rewrite :root → :host and mirror <html>'s data-*/class/lang onto
-      // each thumb host (see _syncThumbHostAttrs) so the same selectors
-      // match inside the thumbnail's shadow tree.
-      const authorCss = Array.from(document.styleSheets).map((sh) => {
+      // Generation guard: a stale fetch (from a snapshot a newer call has
+      // superseded) must not clobber the current adopted CSS.
+      const gen = (this._cssGen = (this._cssGen || 0) + 1);
+      if (!this._xoCssCache) this._xoCssCache = new Map(); // href → fetched text ('' = failed)
+      const pending = [];
+      this._applyAuthorCss(this._collectAuthorCss(pending));
+      if (!pending.length) return;
+      Promise.all(pending.map((href) =>
+        fetch(href).then((r) => (r.ok ? r.text() : '')).catch(() => '')
+          .then((text) => { this._xoCssCache.set(href, text); })
+      )).then(() => {
+        if (this._cssGen !== gen) return;
+        this._applyAuthorCss(this._collectAuthorCss(null));
+        if (this._adoptedSheet) {
+          // Shared sheet already restyled every clone — just re-mirror vars.
+          const cs = getComputedStyle(this);
+          (this._thumbs || []).forEach((t) => { if (t.host) this._syncThumbHostAttrs(t.host, cs); });
+        } else {
+          // Fallback (no constructable sheets): each clone baked its own
+          // <style> at materialize, so re-clone to pick up the fetched CSS.
+          (this._thumbs || []).forEach((t) => { if (t.host) this._refreshThumb(t.slide); });
+        }
+      });
+    }
+
+    /** Concatenate every document stylesheet's rules in document order. A
+     *  cross-origin sheet whose .cssRules throws is unreadable via CSSOM:
+     *  substitute its re-fetched source if cached, else push its href to
+     *  pendingOut (when provided) and leave a placeholder until the fetch lands. */
+    _collectAuthorCss(pendingOut) {
+      return Array.from(document.styleSheets).map((sh) => {
         try {
           return Array.from(sh.cssRules).map((r) => r.cssText).join('\n');
-        } catch (e) { return ''; }
-      }).join('\n')
+        } catch (e) {
+          const href = sh.href;
+          if (!href) return '';
+          if (this._xoCssCache.has(href)) return this._xoCssCache.get(href);
+          if (pendingOut) pendingOut.push(href);
+          return '';
+        }
+      }).join('\n');
+    }
+
+    /** Rewrite raw author CSS so its document-scoped selectors match inside a
+     *  thumbnail's shadow root, then (re)load it into the shared adopted sheet.
+     *  :root in an adopted sheet inside a shadow root matches nothing (only the
+     *  document root qualifies), so author rules like
+     *  `:root[data-voice="modern"] .serif` never reach the clones. Rewrite
+     *  :root → :host and mirror <html>'s data-*, class and lang onto each thumb
+     *  host (see _syncThumbHostAttrs) so the same selectors match inside it.
+     *  The <deck-stage> type selector gets the same treatment: from a clone's
+     *  point of view inside an isolated thumb shadow root there is no real
+     *  <deck-stage> ancestor, so a rule like `deck-stage section { background }`
+     *  (the common per-slide default-background idiom) would never match and
+     *  the clone renders with a transparent background — through which the
+     *  page-level html/body background (rewritten to :host above) leaks. The
+     *  thumb's own host IS the deck-stage from the clone's perspective, so
+     *  alias deck-stage → :host to restore the match. */
+    _applyAuthorCss(rawCss) {
+      const authorCss = rawCss
         // The shadow host is featureless outside the functional :host(...)
         // form, so any compound on :root — [attr], .class, #id, :pseudo —
         // must become :host(<compound>) not :host<compound>. Same for the
@@ -753,7 +752,12 @@
         .replace(/:root((?:\[[^\]]*\]|[.#][-\w]+|:[-\w]+(?:\([^)]*\))?)+)/g, ':host($1)')
         .replace(/:root\b/g, ':host')
         .replace(/(^|[\s,>~+(}])html((?:\[[^\]]*\]|[.#][-\w]+|:[-\w]+(?:\([^)]*\))?)+)(?![-\w])/g, '$1:host($2)')
-        .replace(/(^|[\s,>~+(}])html(?![-\w])/g, '$1:host');
+        .replace(/(^|[\s,>~+(}])html(?![-\w])/g, '$1:host')
+        // Same rewrite for the deck-stage type selector (see the doc comment).
+        // The negative-lookahead (?![-\w]) keeps `.deck-stage-title` and the
+        // `--deck-stage-*` custom-property names untouched.
+        .replace(/(^|[\s,>~+(}])deck-stage((?:\[[^\]]*\]|[.#][-\w]+|:[-\w]+(?:\([^)]*\))?)+)(?![-\w])/g, '$1:host($2)')
+        .replace(/(^|[\s,>~+(}])deck-stage(?![-\w])/g, '$1:host');
       // Every custom property the author references. _syncThumbHostAttrs
       // mirrors each one's *computed* value at <deck-stage> onto the
       // thumb host so the live value wins over the :host default above
@@ -814,18 +818,18 @@
     disconnectedCallback() {
       window.removeEventListener('keydown', this._onKey);
       window.removeEventListener('resize', this._onResize);
-      window.removeEventListener('mousemove', this._onMouseMove);
       window.removeEventListener('message', this._onMessage);
+      window.removeEventListener('hashchange', this._onHashChange);
       window.removeEventListener('click', this._onDocClick, true);
       window.removeEventListener('beforeprint', this._onBeforePrint);
       window.removeEventListener('afterprint', this._onAfterPrint);
       if (this._freezeStyle) { this._freezeStyle.remove(); this._freezeStyle = null; }
+      if (this._dragGhost) { this._dragGhost.remove(); this._dragGhost = null; }
       this.removeEventListener('click', this._onTap);
-      if (this._hideTimer) clearTimeout(this._hideTimer);
-      if (this._mouseIdleTimer) clearTimeout(this._mouseIdleTimer);
       if (this._liveTimer) clearTimeout(this._liveTimer);
       if (this._tweakTimer) clearTimeout(this._tweakTimer);
       if (this._railAnimTimer) clearTimeout(this._railAnimTimer);
+      if (this._notesPersistTimer) clearTimeout(this._notesPersistTimer);
       if (this._scaleRaf) cancelAnimationFrame(this._scaleRaf);
       if (this._liveObserver) this._liveObserver.disconnect();
       if (this._railObserver) this._railObserver.disconnect();
@@ -866,28 +870,6 @@
       canvas.appendChild(slot);
       stage.appendChild(canvas);
 
-      // Overlay: compact, solid black, with clickable controls.
-      const overlay = document.createElement('div');
-      overlay.className = 'overlay export-hidden';
-      overlay.setAttribute('role', 'toolbar');
-      overlay.setAttribute('aria-label', 'Deck controls');
-      overlay.setAttribute('data-miaoda-chrome', '');
-      overlay.innerHTML = `
-        <button class="btn prev" type="button" aria-label="Previous slide" title="上一页（←）">
-          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 3L5 8l5 5"/></svg>
-        </button>
-        <span class="count" aria-live="polite"><span class="current">1</span><span class="sep">/</span><span class="total">1</span></span>
-        <button class="btn next" type="button" aria-label="Next slide" title="下一页（→）">
-          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
-        </button>
-        <span class="divider"></span>
-        <button class="btn reset" type="button" aria-label="Reset to first slide" title="重置（R）">重置<span class="kbd">R</span></button>
-      `;
-
-      overlay.querySelector('.prev').addEventListener('click', () => this._advance(-1, 'click'));
-      overlay.querySelector('.next').addEventListener('click', () => this._advance(1, 'click'));
-      overlay.querySelector('.reset').addEventListener('click', () => this._go(0, 'click'));
-
       // Thumbnail rail + context menu. Thumbnails are populated in
       // _renderRail() after _collectSlides().
       const rail = document.createElement('div');
@@ -900,23 +882,51 @@
       // (ramped by edge proximity) is enough — no rAF loop needed.
       rail.addEventListener('dragover', (e) => {
         if (this._dragFrom == null) return;
+        // preventDefault makes the whole rail — including the gaps between
+        // thumbs, where the drop-line actually renders — a valid drop target.
+        // Without it a release in a gap is rejected and the slide snaps back
+        // even though the indicator was showing.
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
         const r = rail.getBoundingClientRect();
         const EDGE = 40;
         const dt = e.clientY - r.top;
         const db = r.bottom - e.clientY;
         if (dt < EDGE) rail.scrollTop -= Math.ceil((EDGE - dt) / 3);
         else if (db < EDGE) rail.scrollTop += Math.ceil((EDGE - db) / 3);
+        // Over a thumb its own dragover set the indicator (O(1)); over a gap
+        // no thumb handler fires, so resolve the nearest slot here.
+        const overThumb = e.target && e.target.closest && e.target.closest('.thumb');
+        if (!overThumb) {
+          const tgt = this._railDropTarget(e.clientY);
+          if (tgt) this._setDrop(tgt.i, tgt.pos);
+        }
+      });
+      rail.addEventListener('drop', (e) => {
+        // A drop over a thumb is handled by the thumb's own handler, which
+        // nulls _dragFrom before the event bubbles here — so this branch only
+        // runs for releases that land in a gap / the rail padding. It commits
+        // to whatever slot the indicator is currently showing.
+        if (this._dragFrom == null) return;
+        e.preventDefault();
+        const on = this._dropOn;
+        const from = this._dragFrom;
+        this._dragFrom = null;
+        let to = on ? (this._dropWhere === 'after' ? on.i + 1 : on.i) : from;
+        if (from < to) to--;
+        this._clearDrop();
+        if (on && to !== from) this._moveSlide(from, to);
       });
 
       const menu = document.createElement('div');
       menu.className = 'ctxmenu export-hidden';
       menu.setAttribute('data-miaoda-chrome', '');
       menu.innerHTML = `
-        <button type="button" data-act="skip">跳过此页</button>
+        <button type="button" data-act="skip">隐藏此页</button>
         <button type="button" data-act="up">上移</button>
         <button type="button" data-act="down">下移</button>
         <hr>
-        <button type="button" data-act="delete">删除此页</button>
+        <button type="button" data-act="delete">删除</button>
       `;
       menu.addEventListener('click', (e) => {
         const act = e.target && e.target.getAttribute && e.target.getAttribute('data-act');
@@ -926,7 +936,7 @@
         if (act === 'skip') this._toggleSkip(i);
         else if (act === 'up') this._moveSlide(i, i - 1);
         else if (act === 'down') this._moveSlide(i, i + 1);
-        else if (act === 'delete') this._openConfirm(i);
+        else if (act === 'delete') this._deleteSlide(i);
       });
       menu.addEventListener('contextmenu', (e) => e.preventDefault());
 
@@ -952,43 +962,64 @@
         resize.addEventListener('pointercancel', up);
       });
 
-      // Delete-confirm dialog — mirrors the SPA's ConfirmDialog layout.
-      const confirm = document.createElement('div');
-      confirm.className = 'confirm-backdrop export-hidden';
-      confirm.setAttribute('data-miaoda-chrome', '');
-      confirm.innerHTML = `
-        <div class="confirm" role="dialog" aria-modal="true">
-          <div class="body">
-            <div class="title">删除此页？</div>
-            <div class="msg">该页将从演示文稿中移除。</div>
-          </div>
-          <div class="footer">
-            <button type="button" class="cancel">取消</button>
-            <button type="button" class="danger">删除</button>
-          </div>
-        </div>
-      `;
-      confirm.addEventListener('click', (e) => {
-        if (e.target === confirm) this._closeConfirm();
+      // Speaker-notes dock — a resize grip + an editable textarea bound to the
+      // current slide's note. Chrome (export-hidden / data-miaoda-chrome) like
+      // the rail/overlay so it's excluded from PPTX/screenshot capture.
+      const notes = document.createElement('div');
+      notes.className = 'notes export-hidden';
+      notes.setAttribute('data-miaoda-chrome', '');
+      const notesHandle = document.createElement('div');
+      notesHandle.className = 'notes-handle';
+      notesHandle.innerHTML = '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.3008 11.4434C13.3008 10.822 13.8045 10.3184 14.4258 10.3184C15.047 10.3185 15.5508 10.8221 15.5508 11.4434C15.5508 12.0646 15.047 12.5682 14.4258 12.5684C13.8045 12.5684 13.3008 12.0647 13.3008 11.4434ZM13.3008 6.55664C13.3008 5.93532 13.8045 5.43164 14.4258 5.43164C15.047 5.43179 15.5508 5.93541 15.5508 6.55664C15.5508 7.17787 15.047 7.68149 14.4258 7.68164C13.8045 7.68164 13.3008 7.17796 13.3008 6.55664ZM7.875 11.4434C7.875 10.822 8.37868 10.3184 9 10.3184C9.62132 10.3184 10.125 10.822 10.125 11.4434C10.125 12.0647 9.62132 12.5684 9 12.5684C8.37868 12.5684 7.875 12.0647 7.875 11.4434ZM7.875 6.55664C7.875 5.93532 8.37868 5.43164 9 5.43164C9.62132 5.43164 10.125 5.93532 10.125 6.55664C10.125 7.17796 9.62132 7.68164 9 7.68164C8.37868 7.68164 7.875 7.17796 7.875 6.55664ZM2.44922 11.4434C2.44922 10.822 2.9529 10.3184 3.57422 10.3184C4.19554 10.3184 4.69922 10.822 4.69922 11.4434C4.69922 12.0647 4.19554 12.5684 3.57422 12.5684C2.9529 12.5684 2.44922 12.0647 2.44922 11.4434ZM2.44922 6.55664C2.44922 5.93532 2.9529 5.43164 3.57422 5.43164C4.19554 5.43164 4.69922 5.93532 4.69922 6.55664C4.69922 7.17796 4.19554 7.68164 3.57422 7.68164C2.9529 7.68164 2.44922 7.17796 2.44922 6.55664Z" fill="currentColor"/></svg>';
+      notesHandle.setAttribute('title', '拖动调整高度');
+      const notesBody = document.createElement('textarea');
+      notesBody.className = 'notes-body';
+      notesBody.setAttribute('placeholder', '点击添加演示者备注');
+      notesBody.setAttribute('aria-label', '演示者备注');
+      notesBody.setAttribute('spellcheck', 'false');
+      notes.append(notesHandle, notesBody);
+
+      // Drag the grip to resize the dock height (mirror the rail-resize
+      // pattern); persist to localStorage so it survives reloads.
+      notesHandle.addEventListener('pointerdown', (e) => {
+        e.preventDefault();
+        notesHandle.setPointerCapture(e.pointerId);
+        notesHandle.setAttribute('data-dragging', '');
+        const move = (ev) => this._setNotesHeight(window.innerHeight - ev.clientY);
+        const up = () => {
+          notesHandle.removeEventListener('pointermove', move);
+          notesHandle.removeEventListener('pointerup', up);
+          notesHandle.removeEventListener('pointercancel', up);
+          notesHandle.removeAttribute('data-dragging');
+          try { localStorage.setItem('deck-stage.notesHeight', String(this._notesPx)); } catch (err) {}
+        };
+        notesHandle.addEventListener('pointermove', move);
+        notesHandle.addEventListener('pointerup', up);
+        notesHandle.addEventListener('pointercancel', up);
       });
-      confirm.querySelector('.cancel').addEventListener('click', () => this._closeConfirm());
-      confirm.querySelector('.danger').addEventListener('click', () => {
-        const i = this._confirmIndex;
-        this._closeConfirm();
-        this._deleteSlide(i);
+
+      // Edit → write the current slide's note + debounced persist.
+      notesBody.addEventListener('input', () => {
+        if (!Array.isArray(this._notes)) this._notes = [];
+        this._notes[this._index] = notesBody.value;
+        this._scheduleNotesPersist();
       });
+      // At window scope the keydown target is retargeted to the host
+      // <deck-stage> (not this textarea), so _onKey's INPUT/TEXTAREA guard
+      // never matches — stop propagation here so typing (space/arrows/…) edits
+      // 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, overlay, menu, confirm);
+      this._root.append(style, rail, resize, stage, notes, menu);
       this._canvas = canvas;
       this._stage = stage;
       this._slot = slot;
-      this._overlay = overlay;
       this._rail = rail;
       this._resize = resize;
       this._menu = menu;
-      this._confirm = confirm;
-      this._countEl = overlay.querySelector('.current');
-      this._totalEl = overlay.querySelector('.total');
+      this._notesPanel = notes;
+      this._notesHandle = notesHandle;
+      this._notesBody = notesBody;
 
       // Restore persisted rail width.
       let rw = 192;
@@ -998,6 +1029,15 @@
       } catch (err) {}
       this._setRailWidth(rw);
       this._syncRailHidden();
+
+      // Restore persisted notes-dock height.
+      let nh = 160;
+      try {
+        const s = localStorage.getItem('deck-stage.notesHeight');
+        if (s) nh = parseInt(s, 10) || nh;
+      } catch (err) {}
+      this._setNotesHeight(nh);
+      this._syncNotesHidden();
     }
 
     _setRailWidth(px) {
@@ -1016,6 +1056,74 @@
       }
     }
 
+    // ── Speaker-notes dock ────────────────────────────────────────────────
+
+    _setNotesHeight(px) {
+      const max = Math.max(120, Math.round(window.innerHeight * 0.5));
+      const h = Math.max(58, Math.min(max, Math.round(px)));
+      this._notesPx = h;
+      this.style.setProperty('--deck-notes-h', h + 'px');
+      this._fit();
+    }
+
+    _notesVisible() {
+      if (NOTES_DISABLED) return false;
+      return !!this._hasNotesTag && !!this._railEnabled
+        && !this._presenting && !this._previewMode
+        && !this.hasAttribute('noscale') && !this.hasAttribute('no-rail')
+        && !NARROW_MQ.matches;
+    }
+
+    /** Height _fit subtracts from the stage region. Clamped so a tall dock on
+     *  a short window still leaves ~160px of canvas (no negative/NaN scale). */
+    _notesHeight() {
+      if (!this._notesVisible()) return 0;
+      return Math.min(this._notesPx || 0, Math.max(0, window.innerHeight - 160));
+    }
+
+    _syncNotesHidden() {
+      if (!this._notesPanel) return;
+      // Static conditions (no-rail/noscale/narrow/print) live in CSS; toggle
+      // only the runtime-dynamic hide (presenting / preview / rail disabled).
+      const hide = NOTES_DISABLED || !this._hasNotesTag || !this._railEnabled || this._presenting || this._previewMode;
+      this._notesPanel.toggleAttribute('data-hidden', hide);
+      this._notesPanel.inert = !this._notesVisible(); // keep textarea out of tab order when hidden
+    }
+
+    /** Load the current slide's note into the body (no-op if unchanged so it
+     *  doesn't disturb an in-progress edit). */
+    _syncNotesBody() {
+      if (!this._notesBody) return;
+      const val = (Array.isArray(this._notes) && this._notes[this._index]) || '';
+      if (this._notesBody.value !== val) this._notesBody.value = val;
+    }
+
+    /** this._notes with holes → '' and length preserved (safe to JSON). */
+    _notesForEmit() {
+      const src = Array.isArray(this._notes) ? this._notes : [];
+      return Array.from(src, (v) => (typeof v === 'string' ? v : (v == null ? '' : String(v))));
+    }
+
+    _scheduleNotesPersist() {
+      clearTimeout(this._notesPersistTimer);
+      this._notesPersistTimer = setTimeout(() => this._emitNotesChange(), 300);
+    }
+
+    /** Persist a pure text edit: mirror the in-DOM #speaker-notes tag (if any)
+     *  for in-iframe consumers, and post the full array to the parent so the
+     *  host writes it to disk — the tag lives OUTSIDE <deck-stage>, so the
+     *  deck-changed outerHTML path can't carry notes. */
+    _emitNotesChange() {
+      const notes = this._notesForEmit();
+      this._notes = notes;
+      const tag = document.getElementById('speaker-notes');
+      if (tag) tag.textContent = JSON.stringify(notes);
+      this.dispatchEvent(new CustomEvent('noteschange', {
+        detail: { notes, index: this._index }, bubbles: true, composed: true,
+      }));
+      try { window.parent.postMessage({ type: 'miaoda:deck:notes-changed', index: this._index, notes }, '*'); } catch (e) {}
+    }
+
     /** @page must live in the document stylesheet — it's a no-op inside
      *  shadow DOM. Inject/update a single <head> style tag so the print
      *  sheet matches the design size and Save-as-PDF yields one slide per
@@ -1047,7 +1155,7 @@
       if (this._squelchSlotChange) { this._squelchSlotChange = false; return; }
       this._collectSlides();
       this._restoreIndex();
-      this._applyIndex({ showOverlay: false, broadcast: true, reason: 'init' });
+      this._applyIndex({ broadcast: true, reason: 'init' });
       this._fit();
     }
 
@@ -1072,7 +1180,6 @@
         slide.setAttribute('data-deck-slide', String(i));
       });
 
-      if (this._totalEl) this._totalEl.textContent = String(this._slides.length || 1);
       if (this._index >= this._slides.length) this._index = Math.max(0, this._slides.length - 1);
       this._markLastVisible();
       this._renderRail();
@@ -1092,6 +1199,7 @@
 
     _loadNotes() {
       const tag = document.getElementById('speaker-notes');
+      this._hasNotesTag = !!tag;
       if (!tag) { this._notes = []; return; }
       try {
         const parsed = JSON.parse(tag.textContent || '[]');
@@ -1102,18 +1210,38 @@
       }
     }
 
+    /** Parse a `#<int>` fragment (1-indexed) into a 0-based slide index, or
+     *  -1 when the hash is absent/malformed or points outside the deck.
+     *  Shared by _restoreIndex (load time) and _onHashChange (runtime). */
+    _slideFromHash() {
+      const h = (location.hash || '').match(/^#(\d+)$/);
+      if (!h) return -1;
+      const n = parseInt(h[1], 10) - 1;
+      return n >= 0 && n < this._slides.length ? n : -1;
+    }
+
     _restoreIndex() {
       // The host's ?slide= param is delivered as a #<int> hash (1-indexed) on
       // the iframe src. No hash → slide 1; the deck itself keeps no position
       // state across loads.
-      const h = (location.hash || '').match(/^#(\d+)$/);
-      if (h) {
-        const n = parseInt(h[1], 10) - 1;
-        if (n >= 0 && n < this._slides.length) this._index = n;
-      }
+      const n = this._slideFromHash();
+      if (n >= 0) this._index = n;
     }
 
-    _applyIndex({ showOverlay = true, broadcast = true, reason = 'init' } = {}) {
+    _onHashChange() {
+      // Runtime counterpart to _restoreIndex, which only reads the fragment
+      // once (at connectedCallback). A same-document fragment change — a deep
+      // link edited in the address bar, or an automation/screenshot tool that
+      // navigates to #N without a full reload — fires hashchange but never
+      // re-runs connectedCallback, so honor it here too. The deck's own
+      // navigation writes the fragment via history.replaceState, which does
+      // NOT fire hashchange, so this can't feed back into a loop; the index
+      // guard also makes a redundant fragment a no-op.
+      const n = this._slideFromHash();
+      if (n >= 0 && n !== this._index) this._go(n, 'api');
+    }
+
+    _applyIndex({ broadcast = true, reason = 'init' } = {}) {
       if (!this._slides.length) return;
       const prev = this._prevIndex == null ? -1 : this._prevIndex;
       const curr = this._index;
@@ -1125,13 +1253,13 @@
         if (i === curr) s.setAttribute('data-deck-active', '');
         else s.removeAttribute('data-deck-active');
       });
-      if (this._countEl) this._countEl.textContent = String(curr + 1);
       // Follow-scroll on every navigation (init deep-link, keyboard, click,
       // tap, external goTo) — the only time we *don't* want the rail to
       // track current is after a rail-internal mutation, where _renderRail
       // has already restored the user's scroll position and yanking back to
       // current would undo it.
       this._syncRail(reason !== 'mutation');
+      this._syncNotesBody();
 
       if (broadcast) {
         // (1) Parent-window postMessage for speaker-notes renderers.
@@ -1158,19 +1286,6 @@
       }
 
       this._prevIndex = curr;
-      if (showOverlay) this._flashOverlay();
-    }
-
-    _flashOverlay() {
-      // Host posts miaoda:deck:presenting while in fullscreen/tab presentation
-      // mode — suppress the nav footer entirely (both hover and slide-change
-      // flash) so the audience sees clean slides.
-      if (!this._overlay || this._presenting) return;
-      this._overlay.setAttribute('data-visible', '');
-      if (this._hideTimer) clearTimeout(this._hideTimer);
-      this._hideTimer = setTimeout(() => {
-        this._overlay.removeAttribute('data-visible');
-      }, OVERLAY_HIDE_MS);
     }
 
     _railWidth() {
@@ -1192,18 +1307,30 @@
       // resetTransformSelector can't reach .canvas.style.transform directly.
       if (this.hasAttribute('noscale')) {
         this._canvas.style.transform = 'none';
-        if (stage) stage.style.left = '0';
-        if (this._overlay) this._overlay.style.marginLeft = '0';
+        this.removeAttribute('data-windowed');
+        if (stage) { stage.style.left = '0'; stage.style.right = '0'; stage.style.top = '0'; stage.style.bottom = '0'; }
         return;
       }
       const rw = this._railWidth();
-      if (stage) stage.style.left = rw + 'px';
-      // Overlay is centred on the viewport via left:50% + translate(-50%);
-      // marginLeft shifts the centre by rw/2 so it lands in the middle of
-      // the [rw, innerWidth] stage region.
-      if (this._overlay) this._overlay.style.marginLeft = (rw / 2) + 'px';
-      const vw = window.innerWidth - rw;
-      const vh = window.innerHeight;
+      const nh = this._notesHeight();
+      // Windowed (20px margin + card shadow) in edit/preview; full-bleed while
+      // presenting or inside presenter-thumbnail iframes (_snthumb).
+      const windowed = !this._presenting && !this._snthumb;
+      const m = windowed ? DECK_MARGIN : 0;
+      this.toggleAttribute('data-windowed', windowed);
+      // Explicit four-side inset shrinks the flex box to the safe region; the
+      // design-size canvas centres in it, then scale() shrinks it around the
+      // centre — so it stays inside the inset with equal margins on all sides.
+      if (stage) {
+        stage.style.left = (rw + m) + 'px';
+        stage.style.right = m + 'px';
+        stage.style.top = m + 'px';
+        stage.style.bottom = (m + nh) + 'px';
+      }
+      // The notes dock spans the non-rail width; its left edge tracks the rail.
+      if (this._notesPanel) this._notesPanel.style.left = (rw + DECK_MARGIN) + 'px';
+      const vw = window.innerWidth - rw - 2 * m;
+      const vh = window.innerHeight - nh - 2 * m;
       const s = Math.min(vw / this.designWidth, vh / this.designHeight);
       this._canvas.style.transform = `scale(${s})`;
     }
@@ -1220,22 +1347,13 @@
       }
     }
 
-    _onMouseMove() {
-      // Keep overlay visible while mouse moves; hide after idle.
-      this._flashOverlay();
-    }
-
     _onMessage(e) {
       const d = e.data;
       if (d && d.type === 'miaoda:deck:presenting' && typeof d.on === 'boolean') {
         this._presenting = d.on;
-        if (this._presenting && this._overlay) {
-          this._overlay.removeAttribute('data-visible');
-          if (this._hideTimer) clearTimeout(this._hideTimer);
-        }
         this._syncRailHidden();
+        this._syncNotesHidden();
         this._closeMenu();
-        this._closeConfirm();
         this._fit();
         this._scaleThumbs();
       }
@@ -1248,8 +1366,8 @@
         if (d.on === this._previewMode) return;
         this._previewMode = d.on;
         this._syncRailHidden();
+        this._syncNotesHidden();
         this._closeMenu();
-        this._closeConfirm();
         this._fit();
         this._scaleThumbs();
       }
@@ -1295,8 +1413,11 @@
     }
 
     _onTap(e) {
-      // Touch-only — keyboard + the overlay toolbar cover nav on desktop.
-      if (FINE_POINTER_MQ.matches) return;
+      // Touch-only for normal browse/edit — on desktop there, keyboard + the
+      // overlay toolbar cover nav. But in presenting mode the overlay is hidden
+      // and click-to-advance is the expected gesture (Keynote/PPT), so allow it
+      // on fine pointers too.
+      if (FINE_POINTER_MQ.matches && !this._presenting) return;
       // Only taps that land on the stage (slide content or letterbox); the
       // overlay / rail / menus are siblings with their own click handlers.
       const path = e.composedPath();
@@ -1320,13 +1441,6 @@
       // Ignore when the user is typing.
       const t = e.target;
       if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName))) return;
-      // Confirm dialog swallows nav keys while open; Escape cancels. Enter
-      // is left to the focused button's native activation so Tab→Cancel
-      // →Enter activates Cancel, not the window-level confirm path.
-      if (this._confirm && this._confirm.hasAttribute('data-open')) {
-        if (e.key === 'Escape') { this._closeConfirm(); e.preventDefault(); }
-        return;
-      }
       if (e.key === 'Escape' && this._menu && this._menu.hasAttribute('data-open')) {
         this._closeMenu();
         e.preventDefault();
@@ -1337,9 +1451,9 @@
       const key = e.key;
       let handled = true;
 
-      if (key === 'ArrowRight' || key === 'PageDown' || key === ' ' || key === 'Spacebar') {
+      if (key === 'ArrowRight' || key === 'ArrowDown' || key === 'PageDown' || key === ' ' || key === 'Spacebar') {
         this._advance(1, 'keyboard');
-      } else if (key === 'ArrowLeft' || key === 'PageUp') {
+      } else if (key === 'ArrowLeft' || key === 'ArrowUp' || key === 'PageUp') {
         this._advance(-1, 'keyboard');
       } else if (key === 'Home') {
         this._go(0, 'keyboard');
@@ -1357,31 +1471,26 @@
 
       if (handled) {
         e.preventDefault();
-        this._flashOverlay();
       }
     }
 
     _go(i, reason = 'api') {
       if (!this._slides.length) return;
       const clamped = Math.max(0, Math.min(this._slides.length - 1, i));
-      if (clamped === this._index) {
-        this._flashOverlay();
-        return;
-      }
+      if (clamped === this._index) return;
       this._index = clamped;
-      this._applyIndex({ showOverlay: true, broadcast: true, reason });
+      this._applyIndex({ broadcast: true, reason });
     }
 
-    /** Step forward/back skipping any slide marked data-deck-skip. Falls
-     *  back to _go's clamp-at-ends behaviour (flash overlay) when there's
-     *  nothing further in that direction. */
+    /** Step forward/back skipping any slide marked data-deck-skip. Clamps at
+     *  the ends (no-op past the first/last non-skipped slide). */
     _advance(dir, reason) {
       if (!this._slides.length) return;
       let i = this._index + dir;
       while (i >= 0 && i < this._slides.length && this._slides[i].hasAttribute('data-deck-skip')) {
         i += dir;
       }
-      if (i < 0 || i >= this._slides.length) { this._flashOverlay(); return; }
+      if (i < 0 || i >= this._slides.length) return;
       this._go(i, reason);
     }
 
@@ -1476,6 +1585,10 @@
       num.className = 'num';
       const frame = document.createElement('div');
       frame.className = 'frame';
+      const skipIcon = document.createElement('div');
+      skipIcon.className = 'skip-icon';
+      skipIcon.innerHTML = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.8447 1.82978C2.16723 1.50736 2.68943 1.51112 3.0119 1.8336L18.3385 17.1606C18.6638 17.4859 18.6637 18.0136 18.3384 18.3389C18.0131 18.6641 17.4855 18.6643 17.1602 18.339L1.83317 3.01234C1.51069 2.68986 1.50692 2.16767 1.82935 1.84514C1.83447 1.84002 1.83958 1.8349 1.8447 1.82978ZM3.33085 6.27753L6.68668 9.63337C6.63272 10.1199 6.68658 10.6123 6.84443 11.0757C7.00228 11.5391 7.26025 11.962 7.60001 12.3144C7.93976 12.6668 8.35296 12.94 8.81024 13.1147C9.26753 13.2894 9.75767 13.3612 10.2458 13.325L10.3667 13.3134L13.3529 16.2996C12.2833 16.8225 11.1604 17.0838 9.98626 17.0838C6.65746 17.0838 3.75395 14.9833 1.27539 10.7819C0.991215 10.3003 0.987158 9.70269 1.26629 9.21806C1.91897 8.08486 2.60738 7.10484 3.33085 6.27753ZM13.3333 10.0005C13.3334 9.54197 13.2389 9.08841 13.0556 8.66813C12.8724 8.24784 12.6045 7.86987 12.2686 7.55784C11.9327 7.24581 11.536 7.00644 11.1033 6.85468C10.6707 6.70293 10.2114 6.64205 9.75418 6.67587L9.63293 6.68712L6.6246 3.67878C7.67308 3.17422 8.82227 2.91381 9.98585 2.91712C13.3783 2.91712 16.2919 5.01573 18.7276 9.21295C19.0101 9.6999 19.0068 10.3018 18.7193 10.7858C18.0552 11.9035 17.3618 12.8724 16.6388 13.693L13.3133 10.3675C13.3267 10.2467 13.3333 10.1246 13.3333 10.0005Z" fill="#646A73"/></svg>';
+      frame.append(skipIcon);
       thumb.append(num, frame);
 
       const entry = { thumb, num, frame, slide, clone: null, host: null, i: -1 };
@@ -1508,11 +1621,23 @@
         thumb.setAttribute('data-dragging', '');
         e.dataTransfer.effectAllowed = 'move';
         try { e.dataTransfer.setData('text/plain', String(this._dragFrom)); } catch (err) {}
+        // Hand the browser a clean elevated card instead of its raw .thumb
+        // bitmap; anchor it under the cursor at the grab point (no jump).
+        try {
+          const g = this._makeDragGhost(entry);
+          if (g) {
+            const r = frame.getBoundingClientRect();
+            const gx = g.pad + Math.max(0, Math.min(g.w, e.clientX - r.left));
+            const gy = g.pad + Math.max(0, Math.min(g.h, e.clientY - r.top));
+            e.dataTransfer.setDragImage(g.el, gx, gy);
+          }
+        } catch (err) {}
       });
       thumb.addEventListener('dragend', () => {
         thumb.removeAttribute('data-dragging');
         this._clearDrop();
         this._dragFrom = null;
+        if (this._dragGhost) { this._dragGhost.remove(); this._dragGhost = null; }
       });
       thumb.addEventListener('dragover', (e) => {
         if (this._dragFrom == null) return;
@@ -1539,6 +1664,51 @@
       return entry;
     }
 
+    /** Build the floating drag-image for a rail thumb.
+     *  The browser's default drag-image is a raw bitmap of the whole .thumb:
+     *  it includes the number gutter and clips the current-slide's dark ring
+     *  (which sits 2px outside the frame via outline-offset) at the bitmap
+     *  edge. Instead we hand setDragImage a purpose-built card — just the
+     *  slide frame, rounded, with a soft drop-shadow, transparent around it.
+     *  The card lives inside a transparent padded wrapper because the bitmap
+     *  crops to the element's border-box, so the shadow needs room inside the
+     *  box or it clips too. Returns { el, pad, w, h } for the anchor math, or
+     *  null if the frame has no size yet. */
+    _makeDragGhost(entry) {
+      if (this._dragGhost) { this._dragGhost.remove(); this._dragGhost = null; }
+      this._materialize(entry);
+      const w = entry.frame.offsetWidth, h = entry.frame.offsetHeight;
+      if (!w || !h) return null;
+      const pad = 36; // ≥ the shadow's blur + offset so it stays in the bitmap
+      const wrap = document.createElement('div');
+      wrap.style.cssText =
+        'position:fixed;top:0;left:-100000px;pointer-events:none;' +
+        'background:transparent;box-sizing:content-box;padding:' + pad + 'px;';
+      const card = document.createElement('div');
+      // Drop-shadow only — no hairline ring (the 0 0 0 1px shadow reads as a
+      // border, which we don't want on the floating card).
+      card.style.cssText =
+        'position:relative;width:' + w + 'px;height:' + h + 'px;background:#fff;' +
+        'border-radius:6px;overflow:hidden;' +
+        'box-shadow:0 6px 10px 0 rgba(31, 35, 41, 0.20);cursor:grabbing;';
+      const host = document.createElement('div');
+      host.style.cssText = 'position:absolute;inset:0;';
+      this._syncThumbHostAttrs(host);
+      const sr = host.attachShadow({ mode: 'open' });
+      if (this._adoptedSheet) sr.adoptedStyleSheets = [this._adoptedSheet];
+      else {
+        const st = document.createElement('style');
+        st.textContent = this._authorCss || '';
+        sr.appendChild(st);
+      }
+      if (entry.clone) sr.appendChild(entry.clone.cloneNode(true));
+      card.appendChild(host);
+      wrap.appendChild(card);
+      (this.shadowRoot || document.body).appendChild(wrap);
+      this._dragGhost = wrap;
+      return { el: wrap, pad, w, h };
+    }
+
     /** Lazily build the clone for a thumb that has scrolled into view. */
     _materialize(entry) {
       if (entry.host) return;
@@ -1670,6 +1840,25 @@
       });
     }
 
+    /** Nearest reorder slot for a Y coordinate anywhere in the rail — used when
+     *  the pointer is over a gap, where no thumb dragover fires. Returns
+     *  { i, pos } matching _setDrop's contract, or null. Mirrors the thumb
+     *  handler's midpoint test so the gap indicator lines up with the thumbs. */
+    _railDropTarget(clientY) {
+      const ts = this._thumbs;
+      if (!ts || !ts.length) return null;
+      for (let k = 0; k < ts.length; k++) {
+        const r = ts[k].thumb.getBoundingClientRect();
+        if (clientY < r.top + r.height / 2) return { i: ts[k].i, pos: 'before' };
+        const next = ts[k + 1];
+        if (!next) return { i: ts[k].i, pos: 'after' };
+        const nr = next.thumb.getBoundingClientRect();
+        if (clientY < nr.top + nr.height / 2) return { i: ts[k].i, pos: 'after' };
+      }
+      const last = ts[ts.length - 1];
+      return { i: last.i, pos: 'after' };
+    }
+
     _setDrop(i, where) {
       // dragover fires at pointer-event rate; touch only the previous
       // and new target rather than sweeping all N thumbs.
@@ -1679,11 +1868,15 @@
       }
       if (t) t.thumb.setAttribute('data-drop', where);
       this._dropOn = t || null;
+      // Remembered so a drop that lands in a gap (rail handler) can commit to
+      // the slot the indicator is showing without re-deriving before/after.
+      this._dropWhere = t ? where : null;
     }
 
     _clearDrop() {
       if (this._dropOn) this._dropOn.thumb.removeAttribute('data-drop');
       this._dropOn = null;
+      this._dropWhere = null;
     }
 
     _syncRail(follow) {
@@ -1705,7 +1898,7 @@
       this._menuIndex = i;
       const slide = this._slides[i];
       const skip = slide && slide.hasAttribute('data-deck-skip');
-      this._menu.querySelector('[data-act="skip"]').textContent = skip ? '取消跳过' : '跳过此页';
+      this._menu.querySelector('[data-act="skip"]').textContent = skip ? '取消隐藏' : '隐藏此页';
       this._menu.querySelector('[data-act="up"]').disabled = i <= 0;
       this._menu.querySelector('[data-act="down"]').disabled = i >= this._slides.length - 1;
       this._menu.querySelector('[data-act="delete"]').disabled = this._slides.length <= 1;
@@ -1725,21 +1918,12 @@
       this._menuIndex = -1;
     }
 
-    _openConfirm(i) {
-      if (!this._confirm) return;
-      this._confirmIndex = i;
-      this._confirm.querySelector('.title').textContent = '删除第 ' + (i + 1) + ' 页？';
-      this._confirm.setAttribute('data-open', '');
-      const btn = this._confirm.querySelector('.danger');
-      if (btn && btn.focus) btn.focus();
-    }
-
-    _closeConfirm() {
-      if (this._confirm) this._confirm.removeAttribute('data-open');
-      this._confirmIndex = -1;
-    }
-
     _emitDeckChange(detail) {
+      // A structural edit carries the (possibly reindexed) notes array so the
+      // host writes deck-stage + speaker-notes in ONE file write. Cancel any
+      // pending text-edit notes-changed so the two never race two writes at
+      // the same file (etag conflict would drop the second).
+      clearTimeout(this._notesPersistTimer);
       this.dispatchEvent(new CustomEvent('deckchange', {
         detail, bubbles: true, composed: true,
       }));
@@ -1751,6 +1935,7 @@
           type: 'miaoda:deck:deck-changed',
           action: detail.action, from: detail.from, to: detail.to,
           html: this.outerHTML,
+          notes: this._notesForEmit(),
         }, '*');
       } catch (e) {}
     }
@@ -1762,9 +1947,11 @@
       if (i < this._index || (wasCurrent && i === this._slides.length - 1)) this._index--;
       this._squelchSlotChange = true;
       slide.remove();
+      // Keep the per-slide-indexed notes array aligned with the deck.
+      if (Array.isArray(this._notes)) this._notes.splice(i, 1);
       this._emitDeckChange({ action: 'delete', from: i, slide });
       this._collectSlides();
-      this._applyIndex({ showOverlay: true, broadcast: true, reason: 'mutation' });
+      this._applyIndex({ broadcast: true, reason: 'mutation' });
     }
 
     _toggleSkip(i) {
@@ -1804,9 +1991,14 @@
       else if (i > cur && j <= cur) this._index = cur + 1;
       this._squelchSlotChange = true;
       this.insertBefore(slide, ref);
+      // Move the note entry in lockstep so notes stay aligned to slides.
+      if (Array.isArray(this._notes)) {
+        const [n] = this._notes.splice(i, 1);
+        this._notes.splice(j, 0, n === undefined ? '' : n);
+      }
       this._emitDeckChange({ action: 'move', from: i, to: j, slide });
       this._collectSlides();
-      this._applyIndex({ showOverlay: false, broadcast: true, reason: 'mutation' });
+      this._applyIndex({ broadcast: true, reason: 'mutation' });
     }
 
     // Public API ------------------------------------------------------------