@qualified-salesforce/web 0.0.1-oidc-bootstrap → 0.1.1

package/widget/multimodal_v2/components/chat/timeline/PresentDeckRenderer.js

@@ -1,12 +1,25 @@
-import { jsxRuntime_module_u, useComputed } from "../../../../../js/multimodal_v2.js";
-import { PlayIcon } from "../../../images/icons.js";
+import { jsxRuntime_module_u, preact_module_k, useComputed } from "../../../../../js/multimodal_v2.js";
+import { SlidesIcon } from "../../../images/icons.js";
 import "../../../styled-system/jsx/index.js";
-import { RichText } from "../../helpers/RichText.js";
 import { Button } from "../../shared/Button.js";
 import { MessageEntry } from "./MessageEntry.js";
 import { MaximizedState as types_MaximizedState, StartCallTrigger as types_StartCallTrigger } from "../../../types.js";
 import { styled } from "../../../styled-system/jsx/factory.js";
 
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
 
 /** @jsxImportSource preact */ 
 
@@ -14,246 +27,388 @@ import { styled } from "../../../styled-system/jsx/factory.js";
 
 
 
-
 /**
- * Renders a `present_deck` message in the timeline. Two modes:
+ * Renders a `present_deck` message in the timeline as one card, whatever has
+ * happened to the deck. Activating it either opens the slides for the visitor to
+ * step through themselves or starts a call for Piper to present them — see
+ * `usePresentDeckCard` for which.
  *
- * - Presented on a call: the deck's per-slide talk tracks are available, so we
- *   render the presentation as a formatted record — each slide thumbnail
- *   followed by its narration. This replaces the realtime API's one-turn
- *   transcript, which would otherwise arrive as a single wall of text (the raw
- *   transcript is folded into this message server-side and never shown).
- * - Off-call: a "join call" prompt whose button starts the presentation.
- *
- * The mode is a stable property of the message (talk tracks are only ever
- * populated for on-call presentations), so this dispatcher never calls hooks —
- * each sub-component owns its own.
+ * Navigation-only messages control the overlay without adding a card of their
+ * own, so they render nothing. Keeping that guard here leaves the card free to
+ * use hooks.
  */ const PresentDeckRenderer = (param)=>{
     let { item, context } = param;
-    var _item_slides;
-    const presentedSlides = ((_item_slides = item.slides) != null ? _item_slides : []).filter((slide)=>!!slide.talkTrack);
-    if (presentedSlides.length > 0) {
-        return /*#__PURE__*/ jsxRuntime_module_u(PresentDeckTranscript, {
-            item: item,
-            context: context
-        });
-    }
-    return /*#__PURE__*/ jsxRuntime_module_u(PresentDeckJoinCard, {
+    if (item.navigationOnly) return null;
+    return /*#__PURE__*/ jsxRuntime_module_u(PresentDeckCard, {
         item: item,
         context: context
     });
 };
-/**
- * The presentation record: each slide's thumbnail followed by its talk track.
- *
- * A presentation can span several `present_deck` messages — the initial share
- * plus any resume after an interruption, where the agent re-shares only the
- * remaining slides (e.g. interrupted on slide 3 of 5 → resume carries just 3-5).
- * Rendering each message on its own would show a fragment that appears to start
- * mid-deck. Instead we render ONE consolidated record on the LAST message for the
- * deck — the union of every slide shown across all its shares, each once, in
- * slide order — and nothing on the earlier ones. When a slide was shown more than
- * once (a resume re-covers the slide it picked up on), the latest share wins, so
- * the talk track reflects what was actually narrated on the resumed run.
- */ function PresentDeckTranscript(param) {
-    let { item, context } = param;
-    const record = useComputed(()=>{
-        var _forDeck_;
-        // All shares for this deck, oldest first. Include `item` itself in case it
-        // isn't in the message list yet (optimistic render / tests).
-        const forDeck = context.messages.value.filter((m)=>m.type === "present_deck" && m.deckId === item.deckId);
-        if (!forDeck.some((m)=>m.id === item.id)) forDeck.push(item);
-        forDeck.sort((a, b)=>new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
-        // Only the last share renders the consolidated record.
-        if (((_forDeck_ = forDeck[forDeck.length - 1]) == null ? void 0 : _forDeck_.id) !== item.id) return [];
-        const bySlideIndex = new Map();
-        for (const message of forDeck){
-            var _message_slides;
-            for (const slide of (_message_slides = message.slides) != null ? _message_slides : []){
-                if (slide.talkTrack) {
-                    bySlideIndex.set(slide.slideIndex, slide);
-                }
-            }
-        }
-        return [
-            ...bySlideIndex.values()
-        ].sort((a, b)=>a.slideIndex - b.slideIndex);
-    });
-    if (record.value.length === 0) return null;
-    return /*#__PURE__*/ jsxRuntime_module_u(MessageEntry, {
-        isOwn: false,
-        children: /*#__PURE__*/ jsxRuntime_module_u(Transcript, {
-            "data-component-name": "PresentDeckRenderer.Transcript",
-            children: record.value.map((slide)=>{
-                var _ref, _slide_pageTitle;
-                return /*#__PURE__*/ jsxRuntime_module_u(SlideBlock, {
-                    children: [
-                        /*#__PURE__*/ jsxRuntime_module_u(SlidePreview, {
-                            type: "button",
-                            "aria-label": context.translationStore.t("slides.viewSlide", {
-                                id: slide.slideIndex + 1
-                            }),
-                            onClick: ()=>context.revisitDeckSlide(item, slide.slideIndex, slide.pageTitle),
-                            children: /*#__PURE__*/ jsxRuntime_module_u(SlidePreviewImage, {
-                                crossOrigin: "anonymous",
-                                src: slide.imageUrl,
-                                alt: (_ref = (_slide_pageTitle = slide.pageTitle) != null ? _slide_pageTitle : item.deckTitle) != null ? _ref : ""
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime_module_u(RichText, {
-                            text: slide.talkTrack,
-                            animated: false,
-                            paragraphSpacing: false
-                        })
-                    ]
-                }, slide.pageId + "-" + slide.slideIndex);
-            })
-        })
-    });
-}
-/**
- * Off-call "join call" prompt. Mirrors PresentVideoRenderer — decks are
- * call-gated, so the deck itself only plays in the maximized overlay once a call
- * is in progress.
- */ function PresentDeckJoinCard(param) {
+function PresentDeckCard(param) {
     let { item, context } = param;
-    const { hidden, thumbnailUrl, ariaLabel, startLabel, handleStartDeck } = usePresentDeckJoinCard({
+    const { hidden, thumbnailUrl, cardLabel, actionLabel, slideCount, slideCountLabel, activate } = usePresentDeckCard({
         item,
         context
     });
     if (hidden) return null;
+    const stacked = slideCount > 1;
     return /*#__PURE__*/ jsxRuntime_module_u(MessageEntry, {
         isOwn: false,
         children: /*#__PURE__*/ jsxRuntime_module_u(Card, {
             "data-component-name": "PresentDeckRenderer.Card",
+            type: "button",
+            "aria-label": cardLabel,
+            onClick: activate,
             children: [
-                /*#__PURE__*/ jsxRuntime_module_u(ThumbnailFrame, {
-                    children: thumbnailUrl && // Every slide load must be crossorigin, here and everywhere else. The assets
-                    // origin only sends `Access-Control-Allow-Origin` (and `Vary: Origin`) when the
-                    // request carries an `Origin` header, so a plain <img> caches a response with
-                    // neither, and the browser then serves that ACAO-less entry to a later
-                    // crossorigin request for the same url, which fails the CORS check. This card
-                    // previews the deck's FIRST slide off-call, so it was the plain load that
-                    // poisoned slide 1 for the overlay and the perception capture that followed.
-                    /*#__PURE__*/ jsxRuntime_module_u(ThumbnailImage, {
-                        src: thumbnailUrl,
-                        alt: ariaLabel,
-                        crossOrigin: "anonymous"
-                    })
+                /*#__PURE__*/ jsxRuntime_module_u(ThumbnailStack, {
+                    "data-component-name": "PresentDeckRenderer.ThumbnailStack",
+                    children: [
+                        stacked && /*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime_module_u(StackSheet, {
+                                    depth: "far",
+                                    "aria-hidden": "true",
+                                    children: thumbnailUrl && /*#__PURE__*/ jsxRuntime_module_u(SheetTint, {
+                                        src: thumbnailUrl,
+                                        crossOrigin: "anonymous",
+                                        alt: ""
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime_module_u(StackSheet, {
+                                    depth: "near",
+                                    "aria-hidden": "true",
+                                    children: thumbnailUrl && /*#__PURE__*/ jsxRuntime_module_u(SheetTint, {
+                                        src: thumbnailUrl,
+                                        crossOrigin: "anonymous",
+                                        alt: ""
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime_module_u(ThumbnailFrame, {
+                            children: [
+                                thumbnailUrl && // Every slide load must be crossorigin, here and everywhere else. The assets
+                                // origin only sends `Access-Control-Allow-Origin` (and `Vary: Origin`) when the
+                                // request carries an `Origin` header, so a plain <img> caches a response with
+                                // neither, and the browser then serves that ACAO-less entry to a later
+                                // crossorigin request for the same url, which fails the CORS check. This card
+                                // previews the deck's FIRST slide off-call, so it was the plain load that
+                                // poisoned slide 1 for the overlay and the perception capture that followed.
+                                //
+                                // alt="": the card names the deck itself, and a title here as well would
+                                // put it into the card's announcement twice over.
+                                /*#__PURE__*/ jsxRuntime_module_u(ThumbnailImage, {
+                                    "data-component-name": "PresentDeckRenderer.Thumbnail",
+                                    src: thumbnailUrl,
+                                    alt: "",
+                                    crossOrigin: "anonymous"
+                                }),
+                                stacked && /*#__PURE__*/ jsxRuntime_module_u(SlideCountBadge, {
+                                    "aria-hidden": "true",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime_module_u(SlidesIcon, {}),
+                                        slideCountLabel
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                    as: "span",
                     variant: "primary",
                     size: "md",
-                    iconOnly: true,
-                    "aria-label": startLabel,
-                    onClick: handleStartDeck,
-                    children: /*#__PURE__*/ jsxRuntime_module_u(PlayIcon, {})
+                    fullWidth: true,
+                    visualOnly: true,
+                    css: {
+                        // The slide sets the card's width, so the label may have less room than a
+                        // translation of it needs, and the shared button never wraps. Wrapping and
+                        // growing beats a label hanging off the card's edge; that turns md's height
+                        // into a floor, so its block padding comes down to keep a one-line label the
+                        // 32px every other md button in the widget is.
+                        whiteSpace: "normal",
+                        height: "[auto]",
+                        minHeight: "[32px]",
+                        paddingBlock: "$xs"
+                    },
+                    children: actionLabel
                 })
             ]
         })
     });
 }
-function usePresentDeckJoinCard(param) {
+function usePresentDeckCard(param) {
     let { item, context } = param;
-    var _ref, _item_deckTitle;
+    var _ref, _item_totalSlides, _ref1, _item_deckTitle, _ref2;
+    var _item_slideImageUrls, _item_slideImageUrls1;
     const { t } = context.translationStore;
-    // The tool can fire multiple times for the same deck (navigating slides). Only
-    // show the card for the last message of a given deck — one "join call" prompt
-    // is enough. Walk backwards (no findLast — the widget runs in old browsers).
-    const lastPresentDeck = useComputed(()=>{
+    // The tool can fire several times for one deck (the initial share, a resume
+    // after an interruption, plain navigation). Only the last card for a deck is
+    // worth drawing — one entry point is enough. Navigation-only messages are
+    // skipped: they draw nothing themselves, so letting a trailing "go back to
+    // slide 2" win would swallow the deck's card entirely. Walk backwards (no
+    // findLast — the widget runs in old browsers).
+    const lastCard = useComputed(()=>{
         const visible = context.messages.visible.value;
         for(let i = visible.length - 1; i >= 0; i--){
             const m = visible[i];
-            if (m.type === "present_deck" && m.deckId === item.deckId) {
+            if (m.type === "present_deck" && m.deckId === item.deckId && !m.navigationOnly) {
                 return m;
             }
         }
         return undefined;
     });
-    // Hidden when: a deck is up in the overlay (where it plays on a call); text-only
-    // mode has no call capability; a call is already in progress; or this isn't the
-    // last card for the deck.
+    // Whether Piper has actually presented this deck. The server records the slides
+    // she reached when her narration turn ends, so a non-empty `presentedSlideIndexes`
+    // on any of the deck's shares means the presentation happened and is over. This
+    // asks the question directly rather than inferring it from a talk track, which
+    // says only that the slide has a caption.
+    //
+    // Read through `context.messages`, a signal, so this recomputes the moment the
+    // server records the presentation mid-call. That is load-bearing rather than
+    // incidental: `useComputed` re-runs only when a signal it read changes, and the
+    // re-broadcast that records the presentation reaches the card by replacing the
+    // message in `messages` (RootStore#updateMessage). Reading a plain property off
+    // `item` alone would leave the card offering a call for a deck Piper had just
+    // finished presenting.
+    const alreadyPresented = useComputed(()=>{
+        // `item` itself first, in case it isn't in the message list yet (optimistic
+        // render / tests) — the same allowance the presentation record used to make.
+        if (presented(item)) return true;
+        return context.messages.value.some((m)=>m.type === "present_deck" && m.deckId === item.deckId && presented(m));
+    });
+    // Is a call even possible? Mode and capability agree in production
+    // (UIStore#validateConversationMode forces the mode down to TEXT when voice and
+    // video are both disallowed), so this is the belt to that braces: without it a
+    // mid-call voice failover would leave the button offering a call that cannot
+    // start.
+    const callAvailable = useComputed(()=>context.uiStore.allowedConversationModes.voice.value || context.uiStore.allowedConversationModes.video.value);
+    // A conversation that could never have a call, which is a different question from
+    // which mode it is in right now — and the two come apart in exactly the direction
+    // that matters here. Dropping to TEXT leaves the modes it is allowed alone, so a
+    // visitor who left a call or whose connection attempt fell back to chat is in text
+    // mode with a call still on the table. Only configuration (no voice/avatar flag, a
+    // `text` modality preference) or the server's voice circuit breaker takes the call
+    // away, and that is what "text-only" means. The pairing the deck viewer weighs
+    // before offering its own switch to voice.
+    const textOnly = useComputed(()=>context.conversationMode.text.value && !callAvailable.value);
+    // Where the button goes, and with it which mode the deck opens in. Text-only has
+    // no call to join; an already-presented deck is a review of what Piper said, not a
+    // reason to present it again.
+    const opensSlides = useComputed(()=>context.conversationMode.text.value || alreadyPresented.value || !callAvailable.value);
+    // Hidden when the deck is already up in the overlay (the card would duplicate
+    // it), when a call is in progress with nothing presented yet (Piper is about to
+    // present it herself), or when this isn't the deck's last card. Text-only no
+    // longer hides it — there the card is the visitor's only way into the deck.
     const hidden = useComputed(()=>{
         var _context_artifact_message_value;
-        return context.maximizedState.value === types_MaximizedState.ARTIFACT && ((_context_artifact_message_value = context.artifact.message.value) == null ? void 0 : _context_artifact_message_value.type) === "present_deck" || context.conversationMode.text.value || context.callInProgress.value || lastPresentDeck.value != null && lastPresentDeck.value.id !== item.id;
+        return context.maximizedState.value === types_MaximizedState.ARTIFACT && ((_context_artifact_message_value = context.artifact.message.value) == null ? void 0 : _context_artifact_message_value.type) === "present_deck" || context.callInProgress.value && !alreadyPresented.value || lastCard.value != null && lastCard.value.id !== item.id;
     });
-    const handleStartDeck = ()=>{
+    const slideCount = (_ref = (_item_totalSlides = item.totalSlides) != null ? _item_totalSlides : (_item_slideImageUrls = item.slideImageUrls) == null ? void 0 : _item_slideImageUrls.length) != null ? _ref : 0;
+    const deckTitle = (_ref1 = (_item_deckTitle = item.deckTitle) != null ? _item_deckTitle : item.pageTitle) != null ? _ref1 : "";
+    // Which of `opensSlides`' three reasons is true decides the label, though none of
+    // them changes the behaviour. "Continue presentation" needs a presentation to
+    // continue, so only an already-presented deck earns it: the other two routes into
+    // the viewer open a deck nobody has presented, where it would name something that
+    // never happened.
+    //
+    // Text-only is then held back to "Start presentation" even for a deck Piper did
+    // present, on instruction. `textOnly` rather than the mode alone is the whole point
+    // of the distinction — a visitor who watched the presentation and then left the
+    // call is in text mode with voice still available, and there she is picking the
+    // presentation back up, so that case reads "Continue presentation".
+    const actionLabel = alreadyPresented.value && !textOnly.value ? t("presentation.continue") : t("presentation.start");
+    const activate = ()=>{
+        if (opensSlides.peek()) {
+            void context.presentSelfGuidedDeck(item);
+            return;
+        }
         if (context.callInProgress.peek()) return;
         context.getCallUiAdapter().actions.startCall({
-            trigger: {
+            trigger: _extends({
                 type: types_StartCallTrigger.StartDeck,
                 deckId: item.deckId,
                 slideIndex: item.slideIndex
-            }
+            }, item.presentationBrief && {
+                presentationBrief: item.presentationBrief
+            }, item.targetDurationSeconds && {
+                targetDurationSeconds: item.targetDurationSeconds
+            })
         });
     };
     return {
         hidden: hidden.value,
-        thumbnailUrl: item.imageUrl,
-        ariaLabel: (_ref = (_item_deckTitle = item.deckTitle) != null ? _item_deckTitle : item.pageTitle) != null ? _ref : "",
-        startLabel: t("presentation.start"),
-        handleStartDeck
+        // The deck's first slide, not the share's. `imageUrl` is whichever slide this
+        // share opened on, so a resume of slides 5-8 would put slide 5 on the card —
+        // the deck's cover is what the visitor is being offered either way.
+        thumbnailUrl: (_ref2 = (_item_slideImageUrls1 = item.slideImageUrls) == null ? void 0 : _item_slideImageUrls1[0]) != null ? _ref2 : item.imageUrl,
+        // The card is the control, so the card is what has to name both the deck on
+        // offer and what activating it does. Nothing reaches that name from the card's
+        // content — the thumbnail is decorative and the affordance is aria-hidden — so
+        // it is assembled here. Joined rather than looked up as one composed string: a
+        // separator needs no translating, and a key for it would have to be added to
+        // every locale to say nothing.
+        cardLabel: deckTitle ? deckTitle + ", " + actionLabel : actionLabel,
+        actionLabel,
+        slideCount,
+        slideCountLabel: t("presentation.slideCount", {
+            count: slideCount
+        }),
+        activate
     };
 }
-const Card = styled("div", {
+/**
+ * Whether a share records slides the conversation actually reached on a call.
+ *
+ * Decks presented before the server started sending `presentedSlideIndexes` have
+ * none, so their card offers a call instead of the slides until presented again.
+ */ function presented(message) {
+    var _message_presentedSlideIndexes;
+    return ((_message_presentedSlideIndexes = message.presentedSlideIndexes) != null ? _message_presentedSlideIndexes : []).length > 0;
+}
+// The whole card is the control, as it is on the offer card next to it in the
+// transcript (LinkPreviewCard, a card-wide <a>): the visitor is offered a deck, not
+// a button underneath one. A real <button> rather than a div wearing a role and a
+// keydown handler — this renders inside arbitrary customer pages, where the
+// platform's own activation, focus and screen-reader behaviour is worth more than
+// any of it reimplemented here.
+//
+// The hover lift matches the offer card's. It is duplicated rather than shared
+// because Panda only extracts style objects it can see in the file that uses them —
+// an imported one compiles to class names with no rules.
+//
+// It sits on the card rather than the thumbnail so the sheets behind the slide
+// come along: they are positioned against ThumbnailStack, which the transform
+// carries with the rest of the subtree, so the stack moves as one object.
+const Card = styled("button", {
     base: {
+        // Everything back that the element used to get for being a div. Preflight is
+        // off, so nothing else undoes the UA button: its own border, centred text and
+        // 13px system font, the ButtonText colour, the align-items that only shows once
+        // display is flex, and on Safari a native re-skin that only appearance stops.
+        // Padding, background and margin are covered by the card's own styles and the
+        // global reset.
+        appearance: "none",
+        // Prefixed as well: iOS Safari only dropped the prefix in 15.4, and it is the
+        // one that skins a button hardest.
+        WebkitAppearance: "none",
+        border: "none",
+        font: "inherit",
+        color: "[inherit]",
+        textAlign: "inherit",
+        alignItems: "stretch",
+        cursor: "pointer",
         display: "flex",
         flexDirection: "column",
-        gap: "$sm",
+        gap: "$md",
         padding: "$lg",
+        // The slide sets the card's width, so a wide one would otherwise stretch the
+        // card across the whole transcript.
+        maxWidth: "[320px]",
         borderRadius: "[8px]",
         outline: "1px solid token(colors.$gray.border)",
         outlineOffset: "-1px",
-        backgroundColor: "$white.solid"
+        backgroundColor: "$white.solid",
+        transition: "box-shadow 0.2s ease, transform 0.2s ease",
+        // The card's edge is an outline, so the focus ring is that same outline in the
+        // widget's own colour rather than a second ring outside it — the treatment the
+        // shared Button uses.
+        "&:focus-visible": {
+            outline: "2px solid token(colors.$primary)",
+            outlineOffset: "-2px"
+        },
+        "&:hover": {
+            boxShadow: "[0 4px 12px rgba(0, 0, 0, 0.1)]",
+            transform: "translateY(-2px)"
+        },
+        // The affordance inside is pointer-events: none and never focused, so it can
+        // never match its own :hover or :focus-visible. Without this it would sit inert
+        // under a lifted card, in the one place the visitor is aiming. Mirrors
+        // StyledButton's primary hover, which is the state being stood in for.
+        '&:is(:hover, :focus-visible) [data-component-name="Button.StyledButton"]': {
+            background: "[linear-gradient(token(colors.$button.hoverBackgroundColor), token(colors.$button.hoverBackgroundColor)) var(--q-button-hover-background-layer, #ffffff)]",
+            color: "$button.hoverTextColor",
+            borderColor: "$button.hoverBorderColor"
+        },
+        // The shadow stays and the travel goes: the card still answers the pointer.
+        "@media (prefers-reduced-motion: reduce)": {
+            "&:hover": {
+                transform: "none"
+            }
+        }
     }
 });
 Card.displayName = "PresentDeckCard";
-const Transcript = styled("div", {
-    base: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "$lg"
-    }
-});
-Transcript.displayName = "PresentDeckTranscript";
-const SlideBlock = styled("div", {
+// Holds the slide and the two sheets peeking out above it. The top padding is the
+// room those sheets sit in — without it they'd be clipped by the card instead of
+// reading as slides behind this one.
+const ThumbnailStack = styled("div", {
     base: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "$sm"
+        position: "relative",
+        paddingTop: "$md"
     }
 });
-SlideBlock.displayName = "PresentDeckSlideBlock";
-// Matches the slide-image preview size used elsewhere (SlidesThumbnail): a
-// fixed 200px width at the slide's natural aspect ratio, not a full-width crop.
-// A button so clicking re-opens the slide in the viewer.
-const SlidePreview = styled("button", {
+ThumbnailStack.displayName = "PresentDeckThumbnailStack";
+// A slide edge behind the top slide: inset from both sides and pushed up, so only
+// its rounded top shows. Two of them, the further one smaller and paler, which is
+// what makes the stack read as deep rather than as a double border. The colour
+// comes from SheetTint below; the fill here is what a deck with no image falls
+// back to.
+const StackSheet = styled("div", {
     base: {
-        width: "[200px]",
-        padding: "$none",
-        border: "none",
-        borderRadius: "md",
+        position: "absolute",
+        height: "[16px]",
         overflow: "hidden",
-        cursor: "pointer",
-        backgroundColor: "$gray"
+        borderTopLeftRadius: "[8px]",
+        borderTopRightRadius: "[8px]"
+    },
+    variants: {
+        depth: {
+            far: {
+                top: "[0]",
+                insetInline: "[16px]",
+                backgroundColor: "$primary.lighter",
+                opacity: 0.45
+            },
+            near: {
+                top: "[6px]",
+                insetInline: "[8px]",
+                backgroundColor: "$primary.lighter",
+                opacity: 0.75
+            }
+        }
     }
 });
-SlidePreview.displayName = "PresentDeckSlidePreview";
-const SlidePreviewImage = styled("img", {
+StackSheet.displayName = "PresentDeckStackSheet";
+// What gives each sheet its colour: the first slide again, blown past the sheet on
+// every side and blurred down to a smear, so the few pixels showing above the
+// thumbnail are that slide's own background rather than a fixed tint. The bleed
+// keeps the blur's soft fringe outside the sheet, which clips it back to a clean
+// rounded top; the sheet's own opacity still does the front-to-back progression.
+// An <img> rather than a CSS background, and crossorigin like every other slide
+// load: a background-image is fetched without an Origin header and would cache the
+// ACAO-less response that the overlay's crossorigin request then fails on.
+const SheetTint = styled("img", {
     base: {
-        width: "[100%]",
-        height: "[auto]",
-        display: "block"
+        position: "absolute",
+        top: "[-20px]",
+        insetInline: "[-20px]",
+        width: "[calc(100% + 40px)]",
+        height: "[calc(100% + 40px)]",
+        objectFit: "cover",
+        objectPosition: "top",
+        filter: "[blur(12px)]"
     }
 });
-SlidePreviewImage.displayName = "PresentDeckSlidePreviewImage";
-// Fits the slide at its natural aspect, like SlidePreview above. A fixed 16:9 frame
-// with an object-fit: cover image centre-cropped a portrait slide, cutting off its
-// title; a deck may contain pages of any shape, so the frame takes the slide's.
-// With no image to take a shape from, keep the 16:9 placeholder the frame used to
-// be so the card doesn't collapse to a bare button.
+SheetTint.displayName = "PresentDeckSheetTint";
+// Fits the slide at its natural aspect. A fixed 16:9 frame with an
+// object-fit: cover image centre-cropped a portrait slide, cutting off its title;
+// a deck may contain pages of any shape, so the frame takes the slide's. With no
+// image to take a shape from, keep a 16:9 placeholder so the card doesn't
+// collapse to a bare button.
 const ThumbnailFrame = styled("div", {
     base: {
+        position: "relative",
         width: "[100%]",
         overflow: "hidden",
         borderRadius: "[8px]",
@@ -272,6 +427,27 @@ const ThumbnailImage = styled("img", {
     }
 });
 ThumbnailImage.displayName = "PresentDeckThumbnailImage";
+const SlideCountBadge = styled("span", {
+    base: {
+        position: "absolute",
+        right: "$sm",
+        bottom: "$sm",
+        display: "flex",
+        alignItems: "center",
+        gap: "$xs",
+        paddingInline: "$sm",
+        paddingBlock: "$xs",
+        borderRadius: "sm",
+        backgroundColor: "$text.dark",
+        color: "$white.solid",
+        fontFamily: "$inter",
+        fontSize: "[12px]",
+        fontWeight: "$semibold",
+        lineHeight: "[16px]",
+        whiteSpace: "nowrap"
+    }
+});
+SlideCountBadge.displayName = "PresentDeckSlideCountBadge";
 /* export default */ const timeline_PresentDeckRenderer = (PresentDeckRenderer);
 
 var PresentDeckRenderer_PresentDeckRenderer = /* unused export */ undefined;