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

package/widget/multimodal_v2/components/decks/index.js

@@ -1,25 +1,76 @@
-import { jsxRuntime_module_u, utils_module_o, useSignalEffect } from "../../../../js/multimodal_v2.js";
+import { preact_module_k, useComputed, jsxRuntime_module_u, utils_module_o, useSignalEffect } from "../../../../js/multimodal_v2.js";
+import { SpeakNowMicIcon, ArrowRightIcon } from "../../images/icons.js";
 import "../../styled-system/jsx/index.js";
 import { slideZoomStyle } from "../../utils/slide_zoom.js";
+import { RichText } from "../helpers/RichText.js";
+import { Status } from "../multimodal/Status.js";
+import { Button } from "../shared/Button.js";
+import { DeckMode as types_DeckMode, 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 */ 
 
 
 
+
+
+
+
+
 /**
- * Deck is the entrypoint for the `present_deck` artifact.
- * Renders the current deck slide image when a deck is the active artifact.
+ * Prefix for every `data-component-name` this component emits, per mode.
+ *
+ * This is load-bearing, not cosmetic. `pointAtSlide` finds the element to zoom
+ * by querying `[data-component-name="Deck.SlideImage"]`
+ * (website_navigation_store), and the self-guided viewer must not be findable by
+ * it: the deck card stays available during a call once something has been
+ * presented, so the visitor can be reading slide 5 while Piper points at slide
+ * 2. Were the viewer's image named `Deck.SlideImage`, her focal point would be
+ * applied to whatever slide they happen to be browsing, mid-interaction.
+ *
+ * Every name goes through `componentName` below so the guarantee holds for the
+ * whole subtree rather than one attribute, and index.test.tsx asserts no
+ * `Deck.*` element exists in self-guided mode.
+ *
+ * The prefixes are a DOM contract rather than a mirror of `DeckMode`'s names:
+ * guided must stay exactly `Deck`, and the other prefix only has to be
+ * something that does not begin with `Deck.` — `SelfGuidedDeck.SlideImage`
+ * qualifies, since the query and the guard both match on that leading `Deck.`.
+ */ const COMPONENT_NAME_PREFIX = {
+    [types_DeckMode.Guided]: "Deck",
+    [types_DeckMode.SelfGuided]: "SelfGuidedDeck"
+};
+/**
+ * Deck is the entrypoint for the `present_deck` artifact, in either mode. Which
+ * mode is a property of the store's playback state.
  */ const Deck = (param)=>{
     let { rootStore } = param;
     var _ref, _currentDeck_pageTitle;
-    var _rootStore_decksStore_value;
+    const { t } = rootStore.translationStore;
     const zoomRef = utils_module_o(null);
     // Zoom the slide in place toward wherever Piper is pointing (see pointAtSlide + utils/slide_zoom),
     // mirroring the demo <video> (presentations/index.tsx). Applied to an inner layer so the <img>'s
     // static white-strip transform and SlideClip's shadow/rounding are left untouched by the zoom.
     // Only touches the style during a call (when the nav store exists).
+    //
+    // Safe to run in both modes only because of the early return: self-guided mode never renders
+    // SlideZoomLayer, so `layer` is null and this bails before reading `slideZoom` — never
+    // subscribing to it. Rendering the zoom layer in self-guided mode would break that.
     useSignalEffect(()=>{
         const layer = zoomRef.value;
         const navStore = rootStore.websiteNavigationStore.value;
@@ -30,37 +81,211 @@ import { styled } from "../../styled-system/jsx/factory.js";
         layer.style.clipPath = style.clipPath;
         layer.style.transition = style.transition;
     });
-    const currentDeck = (_rootStore_decksStore_value = rootStore.decksStore.value) == null ? void 0 : _rootStore_decksStore_value.currentDeck.value;
-    if (!currentDeck) return null;
-    const isSequence = currentDeck.sequenceLength > 1;
+    // Whether handing the deck back to Piper is on the table. Three things have to
+    // hold, and each closes off a different dead end:
+    //
+    // - A call has to be possible at all. 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 the mode's braces: without
+    //   it a mid-call voice failover would leave a button offering a call that cannot
+    //   start. The same pair PresentDeckRenderer weighs before offering its own call.
+    // - Text-only has no call to switch to.
+    // - Neither does a call already running, and that is a live state rather than a
+    //   theoretical one: the viewer stays open during a call, so the visitor can be
+    //   reading slide 5 while Piper points at slide 2.
+    //
+    // Above the early return because it is a hook, and computed rather than read
+    // straight so a failover mid-read takes the button away with it.
+    const voiceSwitchAvailable = useComputed(()=>(rootStore.uiStore.allowedConversationModes.voice.value || rootStore.uiStore.allowedConversationModes.video.value) && !rootStore.conversationMode.text.value && !rootStore.callInProgress.value);
+    // The message over the dimmed slide while the call is starting, in two phases:
+    // the call being established, then the presentation itself.
+    //
+    // The first phase is over when the call UI's own connecting state is over, on
+    // that state's signal rather than one of this overlay's choosing
+    // (ArtifactStore#deckPresentationConnecting wraps it). It borrows the call UI's
+    // words as well, so what the two surfaces say about one event is the same
+    // sentence, and neither the sentence nor the moment it stops being true can
+    // drift from the panel's.
+    //
+    // Live, with nothing latched on the way past: a label that held its phase could
+    // only hold the wrong one, which is what it did — Piper would start talking over
+    // an overlay still promising to connect the visitor to her. Following the signal
+    // means a reconnect takes the text back to connecting, which is the same thing
+    // the call UI does at that moment and so reads as one interface rather than two.
+    //
+    // A signal rather than a value read during render: passed straight to `Status`,
+    // the text advances without this component re-rendering, so the slide behind it
+    // is not even diffed, let alone remounted.
+    const startingMessage = useComputed(()=>{
+        var _rootStore_activeConversation_aiSdr_value;
+        if (!rootStore.artifactStore.deckPresentationConnecting.value) {
+            return t("presentation.starting");
+        }
+        const name = ((_rootStore_activeConversation_aiSdr_value = rootStore.activeConversation.aiSdr.value) == null ? void 0 : _rootStore_activeConversation_aiSdr_value.name) || t("video.yourAssistant");
+        return t("video.connectingTo", {
+            name
+        });
+    });
+    const decksStore = rootStore.decksStore.value;
+    const currentDeck = decksStore == null ? void 0 : decksStore.currentDeck.value;
+    if (!decksStore || !currentDeck) return null;
+    const { sequencePosition, sequenceLength, mode, starting } = currentDeck;
+    const componentName = (part)=>COMPONENT_NAME_PREFIX[mode] + "." + part;
+    // Guided mode is Piper already presenting, so there is nothing to hand back.
+    // Neither is there while the call that takes it off them is starting: the offer
+    // has been accepted, and the panel it lives on is gone for the duration.
+    const showVoiceSwitch = mode === types_DeckMode.SelfGuided && !starting && voiceSwitchAvailable.value;
+    // Hand the deck back to Piper from wherever the visitor has read to, not from
+    // the slide the share opened on — resuming where they are is the whole point of
+    // the switch. The brief and the target duration come off the share driving the
+    // viewer, which is the same message `currentDeck` is computed from (DecksStore),
+    // so the call opens with the intent the off-call share recorded, exactly as the
+    // timeline card's own call does (PresentDeckRenderer#activate).
+    const switchToVoice = ()=>{
+        if (rootStore.callInProgress.peek()) return;
+        const artifactMessage = rootStore.artifact.message.peek();
+        const share = (artifactMessage == null ? void 0 : artifactMessage.type) === "present_deck" ? artifactMessage : undefined;
+        rootStore.getCallUiAdapter().actions.startCall({
+            trigger: _extends({
+                type: types_StartCallTrigger.StartDeck,
+                deckId: currentDeck.deckId,
+                slideIndex: currentDeck.currentIndex
+            }, (share == null ? void 0 : share.presentationBrief) && {
+                presentationBrief: share.presentationBrief
+            }, (share == null ? void 0 : share.targetDurationSeconds) && {
+                targetDurationSeconds: share.targetDurationSeconds
+            })
+        });
+    };
+    const slideImage = /* Crossorigin like every other slide load: the assets origin only sends
+       `Access-Control-Allow-Origin` when the request carries an `Origin`
+       header, so a plain load here would cache an ACAO-less response and
+       fail the CORS check for the same url elsewhere. */ /*#__PURE__*/ jsxRuntime_module_u(SlideImage, {
+        mode: mode,
+        "data-component-name": componentName("SlideImage"),
+        crossOrigin: "anonymous",
+        src: currentDeck.slideImageUrls[currentDeck.currentIndex],
+        alt: (_ref = (_currentDeck_pageTitle = currentDeck.pageTitle) != null ? _currentDeck_pageTitle : currentDeck.deckTitle) != null ? _ref : "",
+        onLoad: ()=>decksStore.notifyCurrentSlideReady()
+    });
+    const progressDots = /*#__PURE__*/ jsxRuntime_module_u(ProgressDots, {
+        mode: mode,
+        "data-component-name": componentName("ProgressDots"),
+        // A bare div may not carry aria-label (axe: aria-prohibited-attr), and
+        // without the label the dots are announced as nothing at all.
+        role: "group",
+        "aria-label": t("presentation.slidePosition", {
+            current: sequencePosition + 1,
+            total: sequenceLength
+        }),
+        children: Array.from({
+            length: sequenceLength
+        }).map((_, index)=>/*#__PURE__*/ jsxRuntime_module_u(Dot, {
+                mode: mode,
+                "data-active": index === sequencePosition ? "true" : undefined
+            }, index))
+    });
     return /*#__PURE__*/ jsxRuntime_module_u(Layout, {
-        "data-component-name": "Deck.Layout",
+        mode: mode,
+        "data-component-name": componentName("Layout"),
         children: [
             /*#__PURE__*/ jsxRuntime_module_u(SlideFrame, {
-                "data-component-name": "Deck.SlideFrame",
-                children: /*#__PURE__*/ jsxRuntime_module_u(SlideClip, {
-                    "data-component-name": "Deck.SlideClip",
-                    children: /*#__PURE__*/ jsxRuntime_module_u(SlideZoomLayer, {
-                        ref: zoomRef,
-                        "data-component-name": "Deck.SlideZoomLayer",
-                        children: /*#__PURE__*/ jsxRuntime_module_u(SlideImage, {
-                            "data-component-name": "Deck.SlideImage",
-                            crossOrigin: "anonymous",
-                            src: currentDeck.slideImageUrls[currentDeck.currentIndex],
-                            alt: (_ref = (_currentDeck_pageTitle = currentDeck.pageTitle) != null ? _currentDeck_pageTitle : currentDeck.deckTitle) != null ? _ref : ""
+                mode: mode,
+                withVoiceSwitch: showVoiceSwitch,
+                starting: starting,
+                "data-component-name": componentName("SlideFrame"),
+                children: [
+                    mode === types_DeckMode.Guided ? // SlideClip owns the rounding and shadow, and SlideZoomLayer is the
+                    // element the zoom is applied to, kept apart so scaling the slide
+                    // leaves both of those and the image's own transform alone.
+                    /*#__PURE__*/ jsxRuntime_module_u(SlideClip, {
+                        "data-component-name": componentName("SlideClip"),
+                        children: /*#__PURE__*/ jsxRuntime_module_u(SlideZoomLayer, {
+                            ref: zoomRef,
+                            "data-component-name": componentName("SlideZoomLayer"),
+                            children: slideImage
                         })
+                    }) : slideImage,
+                    starting && /*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(Scrim, {
+                                "data-component-name": componentName("Scrim"),
+                                "aria-hidden": "true"
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(Progress, {
+                                "data-component-name": componentName("Progress"),
+                                role: "status",
+                                children: /*#__PURE__*/ jsxRuntime_module_u(Status, {
+                                    variant: "pill",
+                                    colorScheme: "overlayText",
+                                    mainText: startingMessage,
+                                    subText: undefined,
+                                    // The widget's own call-loading indicator, in the form it takes
+                                    // over a visual: the animated ellipsis it uses over blurred video
+                                    // (useMultimodal), rather than a second spinner of this
+                                    // component's.
+                                    loadingIndicator: "dots"
+                                })
+                            })
+                        ]
                     })
-                })
+                ]
             }),
-            isSequence && /*#__PURE__*/ jsxRuntime_module_u(ProgressDots, {
-                "data-component-name": "Deck.ProgressDots",
-                "aria-label": "Slide " + (currentDeck.sequencePosition + 1) + " of " + currentDeck.sequenceLength,
-                children: Array.from({
-                    length: currentDeck.sequenceLength
-                }).map((_, index)=>/*#__PURE__*/ jsxRuntime_module_u(Dot, {
-                        "data-active": index === currentDeck.sequencePosition ? "true" : undefined
-                    }, index))
-            })
+            mode === types_DeckMode.SelfGuided && !starting && /*#__PURE__*/ jsxRuntime_module_u(ControlPanel, {
+                withVoiceSwitch: showVoiceSwitch,
+                "data-component-name": componentName("ControlPanel"),
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(Caption, {
+                        "data-component-name": componentName("Caption"),
+                        children: currentDeck.caption && /*#__PURE__*/ jsxRuntime_module_u(RichText, {
+                            text: currentDeck.caption,
+                            animated: false,
+                            paragraphSpacing: false
+                        })
+                    }),
+                    showVoiceSwitch && /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                        variant: "primary",
+                        size: "md",
+                        "data-component-name": componentName("VoiceSwitch"),
+                        onClick: switchToVoice,
+                        css: {
+                            alignSelf: "flex-start",
+                            maxWidth: "[100%]"
+                        },
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(SpeakNowMicIcon, {}),
+                            t("presentation.switchToVoice")
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(Controls, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                                variant: "primary",
+                                size: "md",
+                                iconOnly: true,
+                                "aria-label": t("presentation.previousSlide"),
+                                disabled: sequencePosition === 0,
+                                onClick: ()=>decksStore.goToPreviousSlide(),
+                                css: {
+                                    transform: "rotate(180deg)"
+                                },
+                                children: /*#__PURE__*/ jsxRuntime_module_u(ArrowRightIcon, {})
+                            }),
+                            progressDots,
+                            /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                                variant: "primary",
+                                size: "md",
+                                iconOnly: true,
+                                "aria-label": t("presentation.nextSlide"),
+                                disabled: sequencePosition >= sequenceLength - 1,
+                                onClick: ()=>decksStore.goToNextSlide(),
+                                children: /*#__PURE__*/ jsxRuntime_module_u(ArrowRightIcon, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            mode === types_DeckMode.Guided && sequenceLength > 1 && progressDots
         ]
     });
 };
@@ -69,32 +294,148 @@ const Layout = styled("div", {
     base: {
         display: "flex",
         flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "[12px]",
         width: "[100%]",
-        height: "[100%]",
         minHeight: "[0]"
+    },
+    variants: {
+        mode: {
+            // Centred in whatever the overlay gives it, over the dark backdrop.
+            guided: {
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "[12px]",
+                height: "[100%]"
+            },
+            // A reading column: slide above, panel below, both full width, centred in
+            // the overlay when the two do not fill it. Takes the overlay's full height
+            // rather than shrink-wrapping so that height is a definite number the two
+            // can be divided against — SlideFrame's cap below is a percentage of it.
+            //
+            // Ungapped on purpose: the slide and the panel are stitched into one card,
+            // each rounding only its outer corners (see SlideFrame and ControlPanel),
+            // and a gap here would put a stripe of scrim through the seam.
+            self_guided: {
+                alignItems: "stretch",
+                justifyContent: "center",
+                height: "[100%]"
+            }
+        }
     }
 });
 Layout.displayName = "Layout";
 const SlideFrame = styled("div", {
     base: {
         display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: "[10px]",
-        width: "[auto]",
-        height: "[auto]",
-        maxWidth: "[100%]",
-        maxHeight: "[100%]",
         minHeight: "[0]"
+    },
+    variants: {
+        mode: {
+            // Shrink-wraps the slide at its intrinsic size; SlideClip inside does the
+            // white-strip clipping and carries the rounding.
+            guided: {
+                flexDirection: "column",
+                alignItems: "center",
+                gap: "[10px]",
+                width: "[auto]",
+                height: "[auto]",
+                maxWidth: "[100%]",
+                maxHeight: "[100%]"
+            },
+            // No SlideClip in this mode, so the frame itself clips the white strip and
+            // carries the rounding.
+            //
+            // Unshrinkable under a cap, which is what orders the squeeze: flex-shrink
+            // would take from both children at once, so the slide would start
+            // letterboxing while the panel still had room to give. Instead the frame is
+            // simply the smaller of the slide's natural height and everything the panel
+            // does not need, so the panel yields first and the slide only gives ground
+            // once the panel is at its floor. The subtrahend is that floor, the column
+            // being ungapped — change either and this has to follow. The floor itself
+            // moves with what the panel holds, which is what the variant below is for.
+            //
+            // Square along the bottom, where ControlPanel butts against it: the slide
+            // and its narration are one card, so only the pair's outer corners round.
+            // The slide's own bottom edge is what lands on that seam — the image is
+            // stretched to the frame's full height, so `contain` letterboxes it down
+            // the sides rather than under it, and it always reaches this edge.
+            //
+            // Squared for as long as there is a panel to meet, which is not the whole of
+            // this mode: the starting variant below has none and puts the rounding back.
+            //
+            // Deliberately unfilled: what the cap letterboxes shows the overlay's
+            // scrim, the same surround the slide has in guided mode.
+            self_guided: {
+                justifyContent: "center",
+                overflow: "hidden",
+                borderRadius: "lg",
+                borderBottomLeftRadius: "[0]",
+                borderBottomRightRadius: "[0]",
+                flexShrink: "0",
+                maxHeight: "[calc(100% - 124px)]"
+            }
+        },
+        // The panel's taller floor, subtracted the same way. Declared after `mode` so
+        // it wins the merge, and only ever true in self-guided, the one mode with a
+        // panel to subtract at all.
+        withVoiceSwitch: {
+            true: {
+                maxHeight: "[calc(100% - 172px)]"
+            }
+        },
+        // The panel is gone while the call starts, so the two things the self-guided
+        // frame owes it are gone with it. There is nothing to subtract — the caps
+        // above are arithmetic against a panel's contents, and holding 124px of empty
+        // scrim open under the slide is what inheriting one would do — and nothing
+        // butting against the bottom edge, so the slide is the whole card and every
+        // corner is an outer corner again. Both stated here rather than by touching
+        // the variants above, whose numbers belong to the state that has a panel.
+        //
+        // The bottom corners are named individually because that is how they were
+        // squared: a `borderRadius` shorthand cannot be relied on to beat the
+        // longhands above it, whichever order the variants are declared in. Through
+        // `token()` because only the shorthand takes the radii scale by name
+        // (panda.config's utilities), so this is `lg` said the long way round.
+        //
+        // `relative` for the scrim and the message, which are positioned against the
+        // slide. The slide's own width is unchanged either way, and for any slide
+        // wider than it is tall the width is what binds, so what the visitor sees
+        // across the hand-off is the panel going away rather than the slide resizing.
+        starting: {
+            true: {
+                position: "relative",
+                maxHeight: "[100%]",
+                borderRadius: "lg",
+                borderBottomLeftRadius: "[token(radii.lg)]",
+                borderBottomRightRadius: "[token(radii.lg)]"
+            }
+        }
     }
 });
 SlideFrame.displayName = "SlideFrame";
+// Dims the slide while the call starts, covering the frame it is positioned in.
+const Scrim = styled("div", {
+    base: {
+        position: "absolute",
+        inset: "[0]",
+        backgroundColor: "[rgba(0, 0, 0, 0.5)]"
+    }
+});
+Scrim.displayName = "Scrim";
+// Holds the starting message over the dimmed slide rather than under it. Under it
+// would need a strip of chrome to sit on, and that strip is the panel this state
+// exists without. Boxless past the positioning: Status' `pill` variant fills and
+// centres itself.
+const Progress = styled("div", {
+    base: {
+        position: "absolute",
+        inset: "[0]",
+        display: "flex"
+    }
+});
+Progress.displayName = "Progress";
 // Clips the ~2px white strip baked into the top of each rendered PDF page (a
 // Ghostscript rasterization artifact). Holds the rounded corners + shadow so
-// the scaled image inside is clipped cleanly.
+// the scaled image inside is clipped cleanly. Guided mode only.
 const SlideClip = styled("div", {
     base: {
         display: "flex",
@@ -109,7 +450,7 @@ const SlideClip = styled("div", {
 SlideClip.displayName = "SlideClip";
 // Shrink-wraps the slide image so the point-at-screen zoom (slideZoomStyle, applied imperatively in
 // Deck's effect) scales/clips the image in place without touching SlideClip's shadow + rounding or
-// the image's own white-strip transform.
+// the image's own white-strip transform. Guided mode only — see the effect's comment.
 const SlideZoomLayer = styled("div", {
     base: {
         display: "flex",
@@ -121,37 +462,150 @@ const SlideZoomLayer = styled("div", {
 SlideZoomLayer.displayName = "SlideZoomLayer";
 const SlideImage = styled("img", {
     base: {
-        width: "[auto]",
         height: "[auto]",
         maxWidth: "[100%]",
         maxHeight: "[100%]",
         minHeight: "[0]",
         objectFit: "contain",
         display: "block",
-        // Scale up a hair from the bottom so the top edge is pushed past SlideClip's
-        // overflow, hiding the baked-in white strip. Scales with any display size.
+        // Scale up a hair from the bottom so the top edge is pushed past the
+        // clipping ancestor's overflow, hiding the baked-in white strip. Scales with
+        // any display size.
         transform: "[scale(1.004)]",
         transformOrigin: "[bottom]"
+    },
+    variants: {
+        mode: {
+            // Intrinsic size, so the slide is never upscaled past its own resolution.
+            guided: {
+                width: "[auto]"
+            },
+            // Fills the reading column, whatever the slide's own size, leaving the base's
+            // `contain` to handle the one case where the frame is capped below the
+            // slide's natural height: it scales the whole slide down to fit rather than
+            // filling the frame with a piece of it.
+            self_guided: {
+                width: "[100%]"
+            }
+        }
     }
 });
 SlideImage.displayName = "SlideImage";
-const ProgressDots = styled("div", {
+// The white panel under the slide, holding the narration and the controls.
+// Self-guided mode only.
+//
+// Gives up its height to the slide before the slide gives up any, the caption
+// scrolling inside whatever is left. The floor is what the panel is still worth
+// reading at: $lg of padding twice, $lg of gap, the 32px control row, and two
+// 22px lines of caption under it — 124px. The voice-switch row adds a second $lg
+// gap and a second 32px row, taking the floor to 172px. The arrows and the switch
+// are outside the caption's scroll box, so they have to be counted here rather
+// than left to scroll. Stating a floor at all also replaces the automatic
+// minimum, which would otherwise pin this to its content and let nothing shrink.
+//
+// Square along the top, the other half of the stitch SlideFrame makes: the two
+// meet flush, so the rounding belongs on the pair's outer corners only.
+const ControlPanel = styled("div", {
     base: {
         display: "flex",
-        gap: "[8px]",
+        flexDirection: "column",
+        gap: "$lg",
+        padding: "$lg",
+        borderRadius: "lg",
+        borderTopLeftRadius: "[0]",
+        borderTopRightRadius: "[0]",
+        backgroundColor: "$white.solid",
+        minHeight: "[124px]"
+    },
+    variants: {
+        // Conditional, so the floor is too: fixed at the taller number it would hold
+        // 48px of empty panel open in text-only mode, where the switch never appears
+        // and the slide could have had the room.
+        withVoiceSwitch: {
+            true: {
+                minHeight: "[172px]"
+            }
+        }
+    }
+});
+ControlPanel.displayName = "ControlPanel";
+const Caption = styled("div", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "[14px]",
+        lineHeight: "[22px]",
+        color: "$text.dark",
+        flexGrow: "1",
+        overflowY: "auto",
+        // Spelt out rather than left to `overflow` to zero the automatic minimum:
+        // this is the only thing standing between a long talk track and a panel that
+        // refuses to shrink, taking the scrolling with it.
+        minHeight: "[0]",
+        "&:empty": {
+            display: "none"
+        }
+    }
+});
+Caption.displayName = "Caption";
+// Outside the caption's scroll box, so squeezing the panel scrolls the narration
+// rather than carrying the arrows off with it.
+const Controls = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "$md",
         flexShrink: "0"
     }
 });
+Controls.displayName = "Controls";
+const ProgressDots = styled("div", {
+    base: {
+        display: "flex"
+    },
+    variants: {
+        mode: {
+            // Sits alone under the slide.
+            guided: {
+                gap: "[8px]",
+                flexShrink: "0"
+            },
+            // Sits between the two nav buttons, and wraps rather than pushing them
+            // apart when the deck is long.
+            self_guided: {
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "$sm",
+                flexWrap: "wrap"
+            }
+        }
+    }
+});
 ProgressDots.displayName = "ProgressDots";
 const Dot = styled("span", {
     base: {
         width: "[8px]",
         height: "[8px]",
-        borderRadius: "[50%]",
-        backgroundColor: "[rgba(255, 255, 255, 0.4)]",
-        transition: "[background-color 0.2s ease]",
-        "&[data-active='true']": {
-            backgroundColor: "[rgba(255, 255, 255, 0.95)]"
+        transition: "[background-color 0.2s ease]"
+    },
+    variants: {
+        mode: {
+            // On the dark backdrop, so white at two opacities.
+            guided: {
+                borderRadius: "[50%]",
+                backgroundColor: "[rgba(255, 255, 255, 0.4)]",
+                "&[data-active='true']": {
+                    backgroundColor: "[rgba(255, 255, 255, 0.95)]"
+                }
+            },
+            // On the white panel, so the theme's grey and primary.
+            self_guided: {
+                borderRadius: "full",
+                backgroundColor: "$gray.border",
+                "&[data-active='true']": {
+                    backgroundColor: "$primary"
+                }
+            }
         }
     }
 });