contour-deck 0.3.2 → 0.4.0

package/README.md

@@ -23,15 +23,15 @@ The design is in [docs/DESIGN.md](docs/DESIGN.md) (Traditional Chinese); the HTM
 
 | | |
 | --- | --- |
-| ![跨區塊移動：翻到區塊盡頭時拉遠再推進，位置列的圓點直接飛到另一個區塊](https://raw.githubusercontent.com/wayne930242/contour-deck/main/docs/media/move.gif) | ![3D 結構：輪廓傾斜、頁疊成層，仍可點進投影片](https://raw.githubusercontent.com/wayne930242/contour-deck/main/docs/media/structure.gif) |
-| 跨區塊移動：拉遠再推進，位置列的圓點直接飛到別的區塊 | 3D 結構：按 3，頁疊成層 |
+| ![跨區塊移動：翻到區塊盡頭時拉遠再推進，位置列的圓點直接飛到另一個區塊](https://raw.githubusercontent.com/wayne930242/contour-deck/main/docs/media/move.gif) | ![縱深桌面：每個區塊一列往後排，上下鍵或滾輪把下一列推到面前，仍可點進投影片](https://raw.githubusercontent.com/wayne930242/contour-deck/main/docs/media/structure.gif) |
+| 跨區塊移動：拉遠再推進，位置列的圓點直接飛到別的區塊 | 3D 縱深桌面：按 3，整份簡報一個畫面，上下換列 |
 | ![步驟：表格一列一列出現，步驟用完才換頁](https://raw.githubusercontent.com/wayne930242/contour-deck/main/docs/media/build.gif) | ![手機：講稿檢視、輪廓、舞台與往上滑的換頁](https://raw.githubusercontent.com/wayne930242/contour-deck/main/docs/media/phone.gif) |
 | 步驟：空白鍵讓表格一列一列出現 | 手機：講稿檢視與往上滑換頁 |
 
 | | |
 | --- | --- |
-| ![輪廓：七個區塊的縮圖牆](https://raw.githubusercontent.com/wayne930242/contour-deck/main/docs/media/overview.png) | ![3D 結構](https://raw.githubusercontent.com/wayne930242/contour-deck/main/docs/media/overview-3d.png) |
-| 輪廓 | 3D 結構 |
+| ![輪廓：七個區塊的縮圖牆](https://raw.githubusercontent.com/wayne930242/contour-deck/main/docs/media/overview.png) | ![3D 縱深桌面](https://raw.githubusercontent.com/wayne930242/contour-deck/main/docs/media/overview-3d.png) |
+| 輪廓（講過的投影片變淡） | 3D 縱深桌面 |
 | ![舞台旁的講稿面板](https://raw.githubusercontent.com/wayne930242/contour-deck/main/docs/media/notes.png) | ![淺色主題的舞台](https://raw.githubusercontent.com/wayne930242/contour-deck/main/docs/media/light.png) |
 | 講稿面板（按 N） | 淺色主題 |
 
@@ -100,7 +100,7 @@ A page that is not Astro gets the same behaviour from `mountAll()` in `contour-d
 | Option | Default | Meaning |
 | --- | --- | --- |
 | `paging` | `"snap"` | `"snap"`: one wheel or trackpad gesture moves one stop. `"free"`: native scrolling with proximity snap. |
-| `overview` | `"flat"` | `"3d"` opens the outline as the tilted 3D structure. |
+| `overview` | `"flat"` | `"3d"` opens the outline as the depth desk: one row per block, the current one in front, the rest receding behind it. |
 | `linear.skip` | `["appendix"]` | Block kinds the linear advance and the arrow keys never enter. |
 | `view` | from the URL | `"deck"` or `"notes"` (the speaker notes as a scrolling script, for a phone). |
 | `at` | from the URL | Entry position, such as `"4.4.2"` or a slide id. |
@@ -202,12 +202,12 @@ The phone must be able to open the page's URL, so a deck on `localhost` needs a
 | `Space`, `Enter`, `PageDown` | advance one step | open the current slide |
 | `Shift+Space`, `PageUp`, `Backspace` | back one step | |
 | `←` `→` | hide or show the current page's steps first, then the previous or next slide | move between thumbnails |
-| `↑` `↓` | previous, next stop | move between thumbnails |
-| `Home`, `End` | first, last slide of the block | |
+| `↑` `↓` | previous, next stop | move between thumbnails; in 3D, the previous or next row to the front |
+| `Home`, `End` | first, last slide of the block | in 3D, the first or last row to the front |
 | `N` | notes panel | |
 | `R` | remote panel (with the `remote` option) | remote panel |
 | `Esc`, `O` | outline | `Esc` leaves the deck (`exit`) |
-| `3` | | 3D structure |
+| `3` | | 3D: the depth desk |
 
 ### URL
 
@@ -220,6 +220,7 @@ The core removes both parameters in `destroy()` and leaves the others alone.
 
 - Set `--ct-bg`, `--ct-fg`, `--ct-accent`, `--ct-accent-fg`, `--ct-border`, `--ct-muted`, `--ct-mono`, and `--ct-measure` on `.ct-app`.
   By default the colours follow the site's `--background`, `--foreground`, `--accent`, `--accent-foreground`, `--border`, and `--muted-foreground`.
+- The depth desk (3D outline) reads `--ct-row-depth` (how far back each row stands, default `260px`) and `--ct-row-rise` (how much higher, default `26px`) on `.ct-app`.
 - A page keeps its content in a centred column of `--ct-measure` through its own side padding, so margins and widths the host sets on the content stay as written.
   The type of a page follows the size of the stage and never goes below `1rem`; sizes the host writes in `em` follow it, sizes in `rem` do not.
 - The open deck keeps its ancestors, so content styles that depend on them still apply.

package/dist/core/deck.js

@@ -39,6 +39,10 @@ export function createDeck(root, options = {}) {
     /** A slide change the deck itself started and whose scroll has not arrived yet. */
     let pending = null;
     let wakeLock = null;
+    /** The depth desk: the row the camera is headed for, and the camera move under way. */
+    let aim = 0;
+    let move = 0;
+    let endMove = null;
     /* ---- shell: bar, outline, stage, notes panel, notes view ---- */
     const app = h("div", "ct-app");
     const bar = app.appendChild(h("header", "ct-bar"));
@@ -146,6 +150,8 @@ export function createDeck(root, options = {}) {
         // The title first: its width moves the rail, and the marker is placed by layout offsets.
         titleEl.textContent = mode === "stage" ? blocks[pos.b].title : deckTitle;
         rail.mark(pos);
+        if (mode === "stage")
+            overview.seen(pos.b, pos.s);
         overview.ring(pos.b, pos.s);
         const height = slide.el.clientHeight || 1;
         const pages = boxes(slide);
@@ -328,8 +334,17 @@ export function createDeck(root, options = {}) {
     };
     const thumbRect = (at) => {
         const face = overview.faces[at.b][at.s];
-        face.scrollIntoView({ block: "nearest" });
-        return face.getBoundingClientRect();
+        if (!depthOn()) {
+            face.scrollIntoView({ block: "nearest" });
+            return face.getBoundingClientRect();
+        }
+        // On the depth desk the block's row comes to the front at once, and the rectangle is read where its sheets end up.
+        front(at.b, true);
+        const plane = face.closest(".ct-plane");
+        plane.setAttribute("data-ct-still", "");
+        const rect = face.getBoundingClientRect();
+        plane.removeAttribute("data-ct-still");
+        return rect;
     };
     const cancel = (animations) => animations.forEach(animation => animation.cancel());
     /** Outline to stage: the stage grows out of the slide's thumbnail. */
@@ -374,9 +389,21 @@ export function createDeck(root, options = {}) {
         stage.style.opacity = "0";
         cancel(out);
         place(at, end);
-        const thumb = thumbRect(pos);
-        render();
-        await wait(reduced() ? 80 : 400);
+        let thumb;
+        if (depthOn()) {
+            // On the depth desk the camera moves forward to the new block's row, then the stage grows out of it.
+            render();
+            await front(pos.b);
+            if (!alive)
+                return;
+            thumb = thumbRect(pos);
+            await wait(reduced() ? 80 : 160);
+        }
+        else {
+            thumb = thumbRect(pos);
+            render();
+            await wait(reduced() ? 80 : 400);
+        }
         if (!alive)
             return;
         const into = zoomStage(stage, root, thumb, "in", 460, reduced());
@@ -412,6 +439,8 @@ export function createDeck(root, options = {}) {
         if (mode === "stage")
             return close();
         mode = "overview";
+        if (depthOn())
+            front(pos.b, true);
         render();
     }
     function toScript() {
@@ -437,7 +466,62 @@ export function createDeck(root, options = {}) {
     }
     /* ---- input ---- */
     const press = (el, on) => el.setAttribute("aria-pressed", String(on));
-    const toggle3d = () => press(threeDButton, app.toggleAttribute("data-ct-3d"));
+    const depthOn = () => app.hasAttribute("data-ct-3d");
+    function toggle3d() {
+        const on = app.toggleAttribute("data-ct-3d");
+        press(threeDButton, on);
+        stopMove();
+        overview.depth(on);
+        if (on)
+            front(pos.b, true);
+        else {
+            overview.el.scrollTop = 0;
+            overview.faces[pos.b][pos.s].scrollIntoView({ block: "nearest" });
+        }
+    }
+    function stopMove() {
+        cancelAnimationFrame(move);
+        move = 0;
+        endMove?.();
+        endMove = null;
+    }
+    /** Brings a block's row to the front of the depth desk: the camera glides there, or jumps under reduced motion. */
+    function front(b, instant = reduced()) {
+        b = clamp(b, 0, blocks.length - 1);
+        if (move && aim === b && !instant)
+            return Promise.resolve();
+        stopMove();
+        aim = b;
+        const ov = overview.el;
+        const from = overview.camera();
+        if (instant || from === b) {
+            overview.camera(b);
+            ov.scrollTop = b * overview.step;
+            return Promise.resolve();
+        }
+        const started = performance.now();
+        const ms = clamp(240 + 80 * Math.abs(b - from), 240, 640);
+        return new Promise(resolve => {
+            endMove = resolve;
+            const tick = (now) => {
+                const t = Math.min(1, (now - started) / ms);
+                overview.camera(from + (b - from) * (1 - (1 - t) ** 3));
+                if (t < 1)
+                    return void (move = requestAnimationFrame(tick));
+                move = 0;
+                endMove = null;
+                ov.scrollTop = b * overview.step;
+                resolve();
+            };
+            move = requestAnimationFrame(tick);
+        });
+    }
+    /** A row on the depth desk, with the focus on its first thumbnail, or on the current one in the current block. */
+    function toRow(b) {
+        b = clamp(b, 0, blocks.length - 1);
+        overview.thumbs[b][b === pos.b ? pos.s : 0].focus({ preventScroll: true });
+        void front(b);
+    }
     /** The stage changed size: put the current slide and page back in view. */
     function align(p = pos.p) {
         if (busy)
@@ -460,11 +544,20 @@ export function createDeck(root, options = {}) {
     const exit = () => busy || listeners.exit.forEach(listener => listener());
     const remote = () => options.remote?.(api);
     const actions = { overview: toOverview, "3d": toggle3d, script: toScript, notes: toggleNotes, remote, prev, next, exit };
+    /** The row in front when the pointer went down: the focus that follows may already be bringing another row forward. */
+    let pressed = null;
+    overview.el.addEventListener("pointerdown", () => void (pressed = aim), { capture: true, signal });
     app.addEventListener("click", event => {
         const target = event.target;
         const action = target.closest("[data-ct-act]")?.dataset.ctAct;
         if (action)
             return void actions[action]?.();
+        // On the depth desk a click on a row behind brings it to the front; only the row in front opens.
+        const row = mode === "overview" && depthOn() ? overview.rowOf(target) : -1;
+        const wasFront = pressed ?? aim;
+        pressed = null;
+        if (row >= 0 && row !== wasFront)
+            return void front(row);
         const go = target.closest("[data-ct-go]")?.dataset.ctGo;
         if (!go)
             return;
@@ -473,7 +566,15 @@ export function createDeck(root, options = {}) {
     }, { signal });
     addEventListener("resize", () => {
         const p = pos.p;
-        requestAnimationFrame(() => alive && align(p));
+        requestAnimationFrame(() => {
+            if (!alive)
+                return;
+            if (depthOn()) {
+                overview.depth(true);
+                front(aim, true);
+            }
+            align(p);
+        });
     }, { signal });
     // The browser drops the screen wake lock when the page is hidden; the notes view asks again on return.
     document.addEventListener("visibilitychange", () => {
@@ -485,9 +586,25 @@ export function createDeck(root, options = {}) {
     function focusThumb(step) {
         const all = overview.thumbs.flat();
         const focused = all.indexOf(document.activeElement);
-        all[focused < 0 ? all.indexOf(overview.thumbs[pos.b][pos.s]) : clamp(focused + step, 0, all.length - 1)].focus();
+        all[focused < 0 ? all.indexOf(overview.thumbs[pos.b][pos.s]) : clamp(focused + step, 0, all.length - 1)].focus({ preventScroll: depthOn() });
     }
+    // On the depth desk the focus brings its row to the front: Tab, the arrow keys, a click.
+    overview.el.addEventListener("focusin", event => {
+        const row = depthOn() ? overview.rowOf(event.target) : -1;
+        if (row >= 0 && row !== aim)
+            void front(row);
+    }, { signal });
+    // Native scrolling (touch, the scroll bar) moves the camera; one snap stop per row.
+    overview.el.addEventListener("scroll", () => {
+        if (!depthOn() || move)
+            return;
+        const at = overview.el.scrollTop / overview.step;
+        const row = Math.round(at);
+        overview.camera(Math.abs(at - row) < 0.02 ? row : at);
+        aim = clamp(row, 0, blocks.length - 1);
+    }, { passive: true, signal });
     document.addEventListener("keydown", event => {
+        pressed = null;
         const target = event.target;
         if (event.metaKey || event.ctrlKey || event.altKey || busy || target.closest?.("input,textarea,select,[contenteditable]"))
             return;
@@ -498,10 +615,15 @@ export function createDeck(root, options = {}) {
         if (key === "r" && options.remote && mode !== "notes")
             run = remote;
         else if (mode === "overview") {
+            const rows = depthOn();
             if (key === "3")
                 run = toggle3d;
             else if (key === "Escape")
                 run = exit;
+            else if (rows && (key === "ArrowUp" || key === "ArrowDown"))
+                run = () => toRow(aim + (key === "ArrowDown" ? 1 : -1));
+            else if (rows && (key === "Home" || key === "End"))
+                run = () => toRow(key === "Home" ? 0 : blocks.length - 1);
             else if (key.startsWith("Arrow"))
                 run = () => focusThumb(key === "ArrowRight" || key === "ArrowDown" ? 1 : -1);
             else if (key === "PageDown" || (activates && !onControl))
@@ -547,6 +669,16 @@ export function createDeck(root, options = {}) {
                 stepV(step);
         }, { passive: false, signal });
     }
+    // The depth desk: one wheel gesture moves one row.
+    const rowStep = createWheelGate();
+    overview.el.addEventListener("wheel", event => {
+        if (!depthOn() || event.ctrlKey || Math.abs(event.deltaX) > Math.abs(event.deltaY))
+            return;
+        event.preventDefault();
+        const step = rowStep(event.deltaY * (event.deltaMode === 1 ? 16 : 1), performance.now(), busy);
+        if (step)
+            toRow(aim + step);
+    }, { passive: false, signal });
     /* ---- start ---- */
     const params = new URLSearchParams(useUrl ? location.search : "");
     const startAt = resolve(options.at ?? params.get("at") ?? "");
@@ -569,6 +701,7 @@ export function createDeck(root, options = {}) {
         alive = false;
         listeners.destroy.forEach(listener => listener());
         abort.abort();
+        stopMove();
         cancelAnimationFrame(frame);
         clearTimeout(idle);
         setCurrent(null);

package/dist/core/overview.d.ts

@@ -7,5 +7,15 @@ export interface Overview {
     thumbs: HTMLButtonElement[][];
     /** Moves the "you are here" ring onto a thumbnail. */
     ring(b: number, s: number, instant?: boolean): void;
+    /** Records that a slide has been on the stage: the outline shows it faded. */
+    seen(b: number, s: number): void;
+    /** Switches the depth desk on or off and fits its rows to the outline's size. */
+    depth(on: boolean): void;
+    /** The depth desk's camera: the row it stands at, fractional while it moves. Without an argument, reads it. */
+    camera(at?: number): number;
+    /** The block whose row is under `el`, or -1. */
+    rowOf(el: Element): number;
+    /** Scroll distance of one row on the depth desk. */
+    readonly step: number;
 }
 export declare function buildOverview(blocks: BlockNode[], labels: Labels): Overview;

package/dist/core/overview.js

@@ -1,5 +1,5 @@
-/** The outline: one panel per block, one schematic thumbnail per slide. */
-import { h, offsetIn } from "./dom.js";
+/** The outline: one panel per block, one schematic thumbnail per slide; in 3D, one row per block on the depth desk. */
+import { clamp, h, offsetIn } from "./dom.js";
 const FIGURE = "figure,img,picture,svg,canvas,video,iframe";
 function sketchType(el) {
     if (el.dataset.ctSk)
@@ -36,11 +36,24 @@ function sketch(page) {
 }
 export function buildOverview(blocks, labels) {
     const el = h("div", "ct-ov");
-    const plane = el.appendChild(h("div", "ct-plane"));
+    // In 3D the desk is the camera (sticky, clipped, with the perspective) and the plane the scene inside it;
+    // the snap points under them give each row a stop of native scrolling.
+    const desk = el.appendChild(h("div", "ct-desk"));
+    const plane = desk.appendChild(h("div", "ct-plane"));
+    const stops = el.appendChild(h("div", "ct-stops", "", { "aria-hidden": "true" }));
     const faces = [];
     const thumbs = [];
+    const tiles = [];
+    const visited = blocks.map(block => block.slides.map(() => false));
+    let depth = false;
+    let cam = 0;
+    let front = -1;
+    let here = null;
     blocks.forEach((block, b) => {
         const tile = plane.appendChild(h("section", "ct-tile"));
+        tile.style.setProperty("--i", String(b));
+        tiles.push(tile);
+        stops.append(h("i"));
         if (block.kind)
             tile.dataset.kind = block.kind;
         if (block.slides.length > 3)
@@ -80,13 +93,73 @@ export function buildOverview(blocks, labels) {
         });
     });
     const ringEl = plane.appendChild(h("div", "ct-ring", "", { "data-label": labels.here }));
-    return {
+    let ringAt = [0, 0];
+    /** Rows the camera has passed slide out and take no pointer; the row in front shows its stacks in depth. */
+    function setFront(row) {
+        if (row === front)
+            return;
+        front = row;
+        tiles.forEach((tile, b) => {
+            tile.toggleAttribute("data-ct-front", depth && b === row);
+            tile.toggleAttribute("data-ct-past", depth && b < row);
+        });
+    }
+    /** In 3D a row taller than six tenths of the outline is scaled down; all rows hang from one line that leaves room for the tallest. */
+    function fit() {
+        if (!depth)
+            return;
+        const height = el.clientHeight;
+        let tallest = 0;
+        for (const tile of tiles) {
+            const scale = Math.min(1, (height * 0.6) / (tile.offsetHeight || 1));
+            tile.style.setProperty("--fit", scale.toFixed(3));
+            tallest = Math.max(tallest, tile.offsetHeight * scale);
+        }
+        plane.style.setProperty("--ct-top", `${Math.round(clamp(height - tallest - 40, height * 0.36, height * 0.6))}px`);
+    }
+    const api = {
         el,
         faces,
         thumbs,
+        get step() {
+            return stops.firstElementChild.offsetHeight || 1;
+        },
+        depth(on) {
+            depth = on;
+            front = -1;
+            if (on)
+                fit();
+            setFront(on ? clamp(Math.round(cam), 0, tiles.length - 1) : -1);
+            api.ring(...ringAt, true);
+        },
+        camera(at) {
+            if (at === undefined)
+                return cam;
+            cam = at;
+            plane.style.setProperty("--ct-cam", String(+at.toFixed(4)));
+            setFront(depth ? clamp(Math.round(at), 0, tiles.length - 1) : -1);
+            return cam;
+        },
+        rowOf: target => tiles.findIndex(tile => tile.contains(target)),
+        seen(b, s) {
+            visited[b][s] = true;
+            thumbs[b][s].setAttribute("data-ct-seen", "");
+        },
         ring(b, s, instant) {
+            ringAt = [b, s];
+            // The current thumbnail stands out of the faded ones; a block is faded once all its slides were shown and it is not current.
+            here?.removeAttribute("aria-current");
+            here = thumbs[b][s];
+            here.setAttribute("aria-current", "true");
+            tiles.forEach((tile, i) => tile.toggleAttribute("data-ct-seen", i !== b && visited[i].every(Boolean)));
             const face = faces[b][s];
-            const { x, y } = offsetIn(face, plane);
+            // In 3D the ring rides in the row of its thumbnail, so it moves with that row.
+            const host = depth ? tiles[b] : plane;
+            if (ringEl.parentElement !== host) {
+                host.append(ringEl);
+                instant = true;
+            }
+            const { x, y } = offsetIn(face, host);
             const style = ringEl.style;
             if (instant)
                 style.transition = "none";
@@ -101,4 +174,5 @@ export function buildOverview(blocks, labels) {
             }
         },
     };
+    return api;
 }

package/dist/style.css

@@ -21,6 +21,8 @@ html[data-ct-open] {
     Menlo,
     Consolas,
     monospace;
+  --ct-row-depth: 260px;
+  --ct-row-rise: 26px;
 }
 .ct-app {
   --ct-panel: color-mix(in srgb, var(--ct-fg) 4%, var(--ct-bg));
@@ -186,7 +188,6 @@ html[data-ct-open] {
   max-width: 86rem;
   margin: 0 auto;
   transform-style: preserve-3d;
-  transition: transform .7s var(--ct-ease);
 }
 .ct-tile {
   border: 1px solid var(--ct-border);
@@ -383,23 +384,98 @@ html[data-ct-open] {
   color: var(--ct-accent-fg);
   white-space: nowrap;
 }
+.ct-plane {
+  --ct-ink: var(--ct-fg);
+  --ct-line: var(--ct-border);
+  --ct-dim: var(--ct-muted);
+}
+.ct-plane :is(.ct-tile, .ct-thumb) {
+  --ct-fade: min(80%, (var(--ct-fog, 0) + var(--ct-was, 0)) * 100%);
+  --ct-fg: color-mix(in srgb, var(--ct-bg) var(--ct-fade), var(--ct-ink));
+  --ct-border: color-mix(in srgb, var(--ct-bg) var(--ct-fade), var(--ct-line));
+  --ct-muted: color-mix(in srgb, var(--ct-bg) var(--ct-fade), var(--ct-dim));
+}
+.ct-app .ct-plane :is(.ct-tile, .ct-thumb) {
+  color: var(--ct-fg);
+}
+.ct-plane .ct-thumb {
+  --ct-was: 0;
+}
+.ct-plane :is(.ct-tile[data-ct-seen], .ct-thumb[data-ct-seen]:not([aria-current])) {
+  --ct-was: .5;
+}
+.ct-stops {
+  display: none;
+}
 .ct-app[data-ct-3d] .ct-ov {
-  overflow: hidden;
+  container-type: size;
+  padding: 0;
+  overflow: hidden auto;
+  scroll-snap-type: y mandatory;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+.ct-app[data-ct-3d] .ct-ov::-webkit-scrollbar {
+  display: none;
+}
+.ct-app[data-ct-3d] .ct-desk {
+  position: sticky;
+  top: 0;
+  height: 100cqh;
+  overflow: clip;
+  perspective: 1000px;
+  perspective-origin: 50% 0;
+  z-index: 1;
+}
+.ct-app[data-ct-3d] .ct-stops {
+  display: block;
+  margin-top: -100cqh;
+  pointer-events: none;
+}
+.ct-stops i {
+  display: block;
+  height: 120px;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+.ct-stops i:last-child {
+  height: 100cqh;
 }
 .ct-app[data-ct-3d] .ct-plane {
-  transform: translateY(-4%) rotateX(52deg) rotateZ(-24deg) scale(.86);
+  position: absolute;
+  inset: 0;
+  display: block;
+  max-width: none;
+  margin: 0;
+  pointer-events: none;
+}
+.ct-app[data-ct-3d] .ct-tile {
+  --ahead: max(var(--i) - var(--ct-cam, 0), 0);
+  --past: min(var(--i) - var(--ct-cam, 0), 0);
+  --ct-fog: min(var(--ahead) * .14, .56);
+  position: absolute;
+  left: 50%;
+  top: var(--ct-top, 40%);
+  width: min(100% - 2.4rem, 60rem);
+  transform-origin: 50% 0;
+  transform: translate3d(-50%, calc(var(--past) * -45cqh - min(var(--ahead), 4) * var(--ct-row-rise)), calc(var(--past) * -240px - var(--ahead) * var(--ct-row-depth))) scale(var(--fit, 1));
+  opacity: calc(1 + var(--past) * 1.6);
+  pointer-events: auto;
+}
+.ct-app[data-ct-3d] .ct-tile[data-ct-past] {
+  pointer-events: none;
 }
-.ct-app[data-ct-3d] .ct-layer {
-  transform: translateZ(calc((var(--n) - 1 - var(--k)) * var(--ct-lift)));
+.ct-app[data-ct-3d] .ct-tile:not([data-ct-front]) {
+  cursor: pointer;
 }
-.ct-app[data-ct-3d] .ct-face {
-  transform: translateZ(calc((var(--n) - 1) * var(--ct-lift)));
+.ct-app[data-ct-3d] [data-ct-front] .ct-layer {
+  transform: translate3d(calc(var(--k) * 3px), calc(var(--k) * 3px), calc((var(--n) - 1 - var(--k)) * var(--ct-lift)));
 }
-.ct-app[data-ct-3d] .ct-thumb:is(:hover, :focus-visible) {
-  transform: translateZ(22px);
+.ct-app[data-ct-3d] [data-ct-front] :is(.ct-face, .ct-ring) {
+  transform: translateZ(calc((var(--n) - 1) * var(--ct-lift)));
 }
-.ct-app[data-ct-3d] .ct-ring {
-  transform: translateZ(calc((var(--n) - 1) * var(--ct-lift) + 1px));
+.ct-plane[data-ct-still] :is(.ct-layer, .ct-face, .ct-ring, .ct-thumb) {
+  transition: none;
 }
 .ct-stage {
   position: absolute;
@@ -621,7 +697,7 @@ html[data-ct-open] {
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .ct-app :is(.ct-plane, .ct-layer, .ct-face, .ct-thumb, .ct-ring, .ct-rm, [data-ct-step]) {
+  .ct-app :is(.ct-layer, .ct-face, .ct-thumb, .ct-ring, .ct-rm, [data-ct-step]) {
     transition-duration: .01ms !important;
   }
 }

package/docs/CONTRACT.md

@@ -146,7 +146,7 @@ The core does not read them, and a host that calls `createDeck` itself needs non
 | `data-ct-host` | the wrapper of one deck element | The element the host script mounts. The deck may sit at any depth inside it. |
 | `data-ct-doc-class` | the wrapper | Space-separated classes the wrapper carries only while the deck is closed; the script removes them on opening and restores them on closing. |
 | `data-ct-paging` | the wrapper | `snap` or `free`: the `paging` option of the core. |
-| `data-ct-overview` | the wrapper | `flat` or `3d`: the `overview` option of the core. |
+| `data-ct-overview` | the wrapper | `flat` or `3d`: the `overview` option of the core. `3d` opens the outline as the depth desk, one row per block. |
 | `data-ct-legacy` | the wrapper | Accept old reveal.js links: `?view=slides&slide=h.v` is rewritten to `?view=deck&at=…` through `data-legacy` and `data-legacy-v`. |
 | `data-ct-start` | any control in the page | A click opens the deck; with the value `notes`, its notes view. Inside a wrapper it opens that deck, elsewhere the first deck of the page. |
 | `data-ct-remote` | the wrapper | The deck has the remote button and the `R` key (`contour-deck/remote`, loaded on first use). |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contour-deck",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Outline-first slide decks on real DOM: blocks, slides, pages.",
   "keywords": [
     "slides",

package/styles/deck.css

@@ -8,6 +8,9 @@
   --ct-muted: var(--muted-foreground, color-mix(in srgb, var(--ct-fg) 62%, var(--ct-bg)));
   --ct-measure: 62rem;
   --ct-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  /* the depth desk (3D outline): how far back each row stands, and how much higher */
+  --ct-row-depth: 260px;
+  --ct-row-rise: 26px;
 }
 .ct-app {
   --ct-panel: color-mix(in srgb, var(--ct-fg) 4%, var(--ct-bg));
@@ -51,7 +54,7 @@
 
 /* ---- outline ---- */
 .ct-ov { position: absolute; inset: 0; overflow: auto; padding: 1.1rem; }
-.ct-plane { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; max-width: 86rem; margin: 0 auto; transform-style: preserve-3d; transition: transform .7s var(--ct-ease); }
+.ct-plane { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; max-width: 86rem; margin: 0 auto; transform-style: preserve-3d; }
 .ct-tile { border: 1px solid var(--ct-border); background: var(--ct-bg); padding: .7rem .8rem .9rem; transform-style: preserve-3d; min-width: 0; }
 .ct-tile[data-kind="appendix"] { background: var(--ct-panel); }
 @media (min-width: 900px) { .ct-tile[data-wide] { grid-column: span 2; } }
@@ -84,13 +87,44 @@
 .ct-ring { position: absolute; left: 0; top: 0; pointer-events: none; outline: 2px solid var(--ct-accent); outline-offset: 3px; z-index: 3; transition: left .38s var(--ct-ease), top .38s var(--ct-ease), width .38s var(--ct-ease), height .38s var(--ct-ease), transform .7s var(--ct-ease); }
 .ct-ring::after { content: attr(data-label); position: absolute; left: -5px; top: calc(100% + 5px); font: 650 .56rem/1 var(--ct-mono); letter-spacing: .08em; padding: .2rem .3rem; background: var(--ct-accent); color: var(--ct-accent-fg); white-space: nowrap; }
 
-/* 3D structure: the plane tilts and every slide becomes a stack as high as its page count */
-.ct-app[data-ct-3d] .ct-ov { overflow: hidden; }
-.ct-app[data-ct-3d] .ct-plane { transform: translateY(-4%) rotateX(52deg) rotateZ(-24deg) scale(.86); }
-.ct-app[data-ct-3d] .ct-layer { transform: translateZ(calc((var(--n) - 1 - var(--k)) * var(--ct-lift))); }
-.ct-app[data-ct-3d] .ct-face { transform: translateZ(calc((var(--n) - 1) * var(--ct-lift))); }
-.ct-app[data-ct-3d] .ct-thumb:is(:hover, :focus-visible) { transform: translateZ(22px); }
-.ct-app[data-ct-3d] .ct-ring { transform: translateZ(calc((var(--n) - 1) * var(--ct-lift) + 1px)); }
+/* Faded: a slide already shown, a block already finished, and on the depth desk the rows far behind.
+   Colours mix toward the background instead of using opacity, which would flatten the 3D of a row. */
+.ct-plane { --ct-ink: var(--ct-fg); --ct-line: var(--ct-border); --ct-dim: var(--ct-muted); }
+.ct-plane :is(.ct-tile, .ct-thumb) {
+  --ct-fade: min(80%, (var(--ct-fog, 0) + var(--ct-was, 0)) * 100%);
+  --ct-fg: color-mix(in srgb, var(--ct-bg) var(--ct-fade), var(--ct-ink));
+  --ct-border: color-mix(in srgb, var(--ct-bg) var(--ct-fade), var(--ct-line));
+  --ct-muted: color-mix(in srgb, var(--ct-bg) var(--ct-fade), var(--ct-dim));
+}
+.ct-app .ct-plane :is(.ct-tile, .ct-thumb) { color: var(--ct-fg); }
+.ct-plane .ct-thumb { --ct-was: 0; }
+.ct-plane :is(.ct-tile[data-ct-seen], .ct-thumb[data-ct-seen]:not([aria-current])) { --ct-was: .5; }
+
+/* 3D, the depth desk: every block is a row facing the viewer. The camera stands at row --ct-cam (the scroll position, one
+   snap stop per row); rows ahead recede and rise, rows passed slide out toward the viewer. Only the row in front stacks its pages in depth. */
+.ct-stops { display: none; }
+.ct-app[data-ct-3d] .ct-ov { container-type: size; padding: 0; overflow: hidden auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
+.ct-app[data-ct-3d] .ct-ov::-webkit-scrollbar { display: none; }
+.ct-app[data-ct-3d] .ct-desk { position: sticky; top: 0; height: 100cqh; overflow: clip; perspective: 1000px; perspective-origin: 50% 0; z-index: 1; }
+.ct-app[data-ct-3d] .ct-stops { display: block; margin-top: -100cqh; pointer-events: none; }
+.ct-stops i { display: block; height: 120px; scroll-snap-align: start; scroll-snap-stop: always; }
+.ct-stops i:last-child { height: 100cqh; }
+/* The scene's own surface stands at depth 0, in front of every row behind: only the rows take the pointer. */
+.ct-app[data-ct-3d] .ct-plane { position: absolute; inset: 0; display: block; max-width: none; margin: 0; pointer-events: none; }
+.ct-app[data-ct-3d] .ct-tile {
+  --ahead: max(var(--i) - var(--ct-cam, 0), 0);
+  --past: min(var(--i) - var(--ct-cam, 0), 0);
+  --ct-fog: min(var(--ahead) * .14, .56);
+  position: absolute; left: 50%; top: var(--ct-top, 40%); width: min(100% - 2.4rem, 60rem); transform-origin: 50% 0;
+  transform: translate3d(-50%, calc(var(--past) * -45cqh - min(var(--ahead), 4) * var(--ct-row-rise)), calc(var(--past) * -240px - var(--ahead) * var(--ct-row-depth))) scale(var(--fit, 1));
+  opacity: calc(1 + var(--past) * 1.6);
+  pointer-events: auto;
+}
+.ct-app[data-ct-3d] .ct-tile[data-ct-past] { pointer-events: none; }
+.ct-app[data-ct-3d] .ct-tile:not([data-ct-front]) { cursor: pointer; }
+.ct-app[data-ct-3d] [data-ct-front] .ct-layer { transform: translate3d(calc(var(--k) * 3px), calc(var(--k) * 3px), calc((var(--n) - 1 - var(--k)) * var(--ct-lift))); }
+.ct-app[data-ct-3d] [data-ct-front] :is(.ct-face, .ct-ring) { transform: translateZ(calc((var(--n) - 1) * var(--ct-lift))); }
+.ct-plane[data-ct-still] :is(.ct-layer, .ct-face, .ct-ring, .ct-thumb) { transition: none; }
 
 /* ---- stage: one block is a left-right track; each slide scrolls by pages ---- */
 .ct-stage { position: absolute; inset: 0; background: var(--ct-bg); border: 1px solid var(--ct-border); transform-origin: 0 0; z-index: 2; overflow: hidden; outline: none; container-type: size; }
@@ -147,5 +181,5 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .ct-app :is(.ct-plane, .ct-layer, .ct-face, .ct-thumb, .ct-ring, .ct-rm, [data-ct-step]) { transition-duration: .01ms !important; }
+  .ct-app :is(.ct-layer, .ct-face, .ct-thumb, .ct-ring, .ct-rm, [data-ct-step]) { transition-duration: .01ms !important; }
 }