@opengeni/react 3.3.2 → 3.4.1-canary.38960406141001

package/src/components/artifacts/presentation-editor.tsx

@@ -44,6 +44,9 @@ const MAX_ZOOM = 4;
 const RAIL_ITEM_HEIGHT = 116;
 const RAIL_OVERSCAN = 3;
 const DEFAULT_RAIL_HEIGHT = 640;
+const MOBILE_RAIL_ITEM_HEIGHT = 44;
+const MOBILE_RAIL_OVERSCAN = 3;
+const DEFAULT_MOBILE_LIST_HEIGHT = 264;
 const DEFAULT_VIEWPORT = { width: 960, height: 640 };
 const SPATIAL_TILE = 256;
 const MAX_SPATIAL_BUCKETS_PER_OBJECT = 1_024;
@@ -331,6 +334,7 @@ export type PresentationProjectionEditorProps = Omit<
 
 export type PresentationProjectionArtifactSurfaceProps = PresentationProjectionEditorProps & {
   title?: string | undefined;
+  showHeader?: boolean | undefined;
   subtitle?: ReactNode | undefined;
   actions?: ReactNode | undefined;
   busy?: boolean | undefined;
@@ -347,6 +351,8 @@ export type PresentationEditorProps = {
   zoom?: number | undefined;
   defaultZoom?: number | undefined;
   readOnly?: boolean | undefined;
+  /** Temporarily fence commands while keeping the current editor draft. */
+  authoringBlockedReason?: "pending_conflict" | "prior_writer" | undefined;
   className?: string | undefined;
   onSlideChange?: ((slide: Slide, index: number) => void) | undefined;
   onSelectionChange?: ((object: PresentationObject | null, slide: Slide) => void) | undefined;
@@ -357,6 +363,7 @@ export type PresentationEditorProps = {
 
 export type PresentationArtifactSurfaceProps = PresentationEditorProps & {
   title?: string | undefined;
+  showHeader?: boolean | undefined;
   subtitle?: ReactNode | undefined;
   actions?: ReactNode | undefined;
   busy?: boolean | undefined;
@@ -450,6 +457,15 @@ export function PresentationProjectionEditor({
   );
 }
 
+function nextSlideIndexFromKey(key: string, activeIndex: number, length: number): number | null {
+  if (length === 0) return null;
+  if (key === "ArrowDown") return Math.min(length - 1, activeIndex + 1);
+  if (key === "ArrowUp") return Math.max(0, activeIndex - 1);
+  if (key === "Home") return 0;
+  if (key === "End") return length - 1;
+  return null;
+}
+
 function PresentationEditorCore({
   presentation,
   revision,
@@ -460,6 +476,7 @@ function PresentationEditorCore({
   zoom: controlledZoom,
   defaultZoom = 0.75,
   readOnly = false,
+  authoringBlockedReason,
   className,
   onSlideChange,
   onSelectionChange,
@@ -467,6 +484,14 @@ function PresentationEditorCore({
   onCommandError,
   onZoomChange,
 }: PresentationEditorProps) {
+  const mutationsBlocked = readOnly || authoringBlockedReason !== undefined;
+  const authoringStatus = readOnly
+    ? null
+    : authoringBlockedReason === "pending_conflict"
+      ? "An earlier change needs attention"
+      : authoringBlockedReason === "prior_writer"
+        ? "Saving earlier changes…"
+        : null;
   const slides = presentation.slides.items;
   const firstSlideId = slides[0]?.id ?? null;
   const [localSlideId, setLocalSlideId] = useState(
@@ -492,6 +517,11 @@ function PresentationEditorCore({
     scrollTop: 0,
     height: DEFAULT_RAIL_HEIGHT,
   });
+  const [mobileSelectorOpen, setMobileSelectorOpen] = useState(false);
+  const [mobileRail, setMobileRail] = useState({
+    scrollTop: 0,
+    height: DEFAULT_MOBILE_LIST_HEIGHT,
+  });
   const [viewport, setViewport] = useState<ViewportMetrics>({
     scrollLeft: 0,
     scrollTop: 0,
@@ -504,6 +534,9 @@ function PresentationEditorCore({
   const [textDraft, setTextDraft] = useState("");
   const [paintEpoch, setPaintEpoch] = useState(0);
   const railRef = useRef<HTMLDivElement>(null);
+  const mobileSelectorTriggerRef = useRef<HTMLButtonElement>(null);
+  const mobileSelectorPanelRef = useRef<HTMLDivElement>(null);
+  const mobileRailRef = useRef<HTMLDivElement>(null);
   const viewportRef = useRef<HTMLDivElement>(null);
   const stageRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -517,6 +550,7 @@ function PresentationEditorCore({
   const commandVersionsRef = useRef(new Map<string, number>());
   const pendingSlideIdRef = useRef<string | null>(null);
   const pendingObjectIdRef = useRef<string | null>(null);
+  const mobileRailScrollOnOpenRef = useRef(0);
   const domId = useId().replaceAll(":", "");
   const selectionProxyId = `${domId}-presentation-selection`;
   const instructionsId = `${domId}-presentation-instructions`;
@@ -596,6 +630,47 @@ function PresentationEditorCore({
     return () => observer.disconnect();
   }, []);
 
+  useLayoutEffect(() => {
+    if (!mobileSelectorOpen) return;
+    const element = mobileRailRef.current;
+    if (!element) return;
+    element.scrollTop = mobileRailScrollOnOpenRef.current;
+    element.focus();
+    const measure = () =>
+      setMobileRail((current) => ({
+        scrollTop: element.scrollTop,
+        height: element.clientHeight || current.height,
+      }));
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [mobileSelectorOpen]);
+
+  useEffect(() => {
+    if (!mobileSelectorOpen) return;
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (mobileSelectorTriggerRef.current?.contains(target)) return;
+      if (mobileSelectorPanelRef.current?.contains(target)) return;
+      setMobileSelectorOpen(false);
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      setMobileSelectorOpen(false);
+      mobileSelectorTriggerRef.current?.focus();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [mobileSelectorOpen]);
+
   useLayoutEffect(() => {
     const element = viewportRef.current;
     if (!element) return;
@@ -835,7 +910,7 @@ function PresentationEditorCore({
 
   const runCommit = useCallback(
     (key: string, command: PresentationCommit, rollback: () => void, retry: () => void) => {
-      if (!onCommit) return;
+      if (mutationsBlocked || !onCommit) return;
       const version = (commandVersionsRef.current.get(key) ?? 0) + 1;
       commandVersionsRef.current.set(key, version);
       const scope = commandScopeRef.current;
@@ -875,12 +950,12 @@ function PresentationEditorCore({
         },
       );
     },
-    [onCommandError, onCommit],
+    [mutationsBlocked, onCommandError, onCommit],
   );
 
   const commitPosition = useCallback(
     (entry: DisplayObject, kind: "move" | "resize", next: PresentationPosition) => {
-      if (!activeSlide || readOnly || entry.readOnly) return;
+      if (!activeSlide || mutationsBlocked || entry.readOnly) return;
       const before = copyPosition(entry.object.position);
       const after = normalizeEditorPosition(next);
       if (samePosition(before, after)) return;
@@ -909,11 +984,11 @@ function PresentationEditorCore({
         );
       submit();
     },
-    [activeSlide, readOnly, runCommit],
+    [activeSlide, mutationsBlocked, runCommit],
   );
 
   const insertSlide = useCallback(() => {
-    if (readOnly) return;
+    if (mutationsBlocked) return;
     const slideId = randomPresentationId();
     const index = activeIndex < 0 ? slides.length : activeIndex + 1;
     const command: PresentationCommit = { kind: "slide-insert", slideId, index };
@@ -929,10 +1004,10 @@ function PresentationEditorCore({
       );
     };
     submit();
-  }, [activeIndex, readOnly, runCommit, slides.length]);
+  }, [activeIndex, mutationsBlocked, runCommit, slides.length]);
 
   const deleteSlide = useCallback(() => {
-    if (readOnly || !activeSlide) return;
+    if (mutationsBlocked || !activeSlide) return;
     const command: PresentationCommit = {
       kind: "slide-delete",
       slideId: activeSlide.id,
@@ -941,10 +1016,10 @@ function PresentationEditorCore({
     const submit = () =>
       runCommit(`slide-delete:${activeSlide.id}`, command, () => undefined, submit);
     submit();
-  }, [activeIndex, activeSlide, readOnly, runCommit]);
+  }, [activeIndex, activeSlide, mutationsBlocked, runCommit]);
 
   const insertTextBox = useCallback(() => {
-    if (readOnly || !activeSlide) return;
+    if (mutationsBlocked || !activeSlide) return;
     const objectId = randomPresentationId();
     const position = nextTextBoxPosition(objects, presentation.slideSize);
     const command: PresentationCommit = {
@@ -966,10 +1041,10 @@ function PresentationEditorCore({
       );
     };
     submit();
-  }, [activeSlide, objects, presentation.slideSize, readOnly, runCommit]);
+  }, [activeSlide, objects, presentation.slideSize, mutationsBlocked, runCommit]);
 
   const deleteObject = useCallback(() => {
-    if (readOnly || !activeSlide || !selected || selected.readOnly) return;
+    if (mutationsBlocked || !activeSlide || !selected || selected.readOnly) return;
     const command: PresentationCommit = {
       kind: "object-delete",
       slideId: activeSlide.id,
@@ -978,11 +1053,11 @@ function PresentationEditorCore({
     const submit = () =>
       runCommit(`object-delete:${activeSlide.id}:${selected.id}`, command, () => undefined, submit);
     submit();
-  }, [activeSlide, readOnly, runCommit, selected]);
+  }, [activeSlide, mutationsBlocked, runCommit, selected]);
 
   const startTextEdit = useCallback(
     (entry: DisplayObject | null) => {
-      if (readOnly || !entry || entry.readOnly || entry.kind !== "shape") return;
+      if (mutationsBlocked || !entry || entry.readOnly || entry.kind !== "shape") return;
       const shape = entry.object as PresentationShape;
       if (shape.geometry === "line") return;
       const before = shape.text.toString();
@@ -992,7 +1067,7 @@ function PresentationEditorCore({
       setTextEdit(edit);
       setTextDraft(before);
     },
-    [activeSlide, readOnly],
+    [activeSlide, mutationsBlocked],
   );
 
   useEffect(() => {
@@ -1004,12 +1079,12 @@ function PresentationEditorCore({
   const finishTextEdit = useCallback(
     (cancel = false) => {
       const edit = textEditRef.current;
-      if (!edit) return;
+      if (!edit || (!cancel && authoringBlockedReason !== undefined)) return;
       textEditRef.current = null;
       setTextEdit(null);
       const { shape, before, slideId } = edit;
       if (!activeSlide || activeSlide.id !== slideId) return;
-      if (cancel || readOnly || before === textDraft) return;
+      if (cancel || mutationsBlocked || before === textDraft) return;
       shape.text.set(textDraft);
       setModelEpoch((value) => value + 1);
       const command: PresentationCommit = {
@@ -1035,7 +1110,7 @@ function PresentationEditorCore({
         );
       submit();
     },
-    [activeSlide, readOnly, runCommit, textDraft],
+    [activeSlide, authoringBlockedReason, mutationsBlocked, runCommit, textDraft],
   );
 
   const cycleObject = useCallback(
@@ -1058,6 +1133,34 @@ function PresentationEditorCore({
     [activeIndex, activeSlide, selectSlide, slides],
   );
 
+  const toggleMobileSlideSelector = useCallback(() => {
+    setMobileSelectorOpen((open) => {
+      if (open) return false;
+      const index = Math.max(0, activeIndex);
+      const height = DEFAULT_MOBILE_LIST_HEIGHT;
+      const maxScroll = Math.max(0, slides.length * MOBILE_RAIL_ITEM_HEIGHT - height);
+      const scrollTop = Math.max(
+        0,
+        Math.min(
+          maxScroll,
+          index * MOBILE_RAIL_ITEM_HEIGHT - height / 2 + MOBILE_RAIL_ITEM_HEIGHT / 2,
+        ),
+      );
+      mobileRailScrollOnOpenRef.current = scrollTop;
+      setMobileRail({ scrollTop, height });
+      return true;
+    });
+  }, [activeIndex, slides.length]);
+
+  const chooseMobileSlide = useCallback(
+    (slide: Slide, index: number) => {
+      if (slide !== activeSlide) selectSlide(slide, index);
+      setMobileSelectorOpen(false);
+      mobileSelectorTriggerRef.current?.focus();
+    },
+    [activeSlide, selectSlide],
+  );
+
   const handleCanvasKeyDown = useCallback(
     (event: ReactKeyboardEvent<SVGSVGElement>) => {
       if (event.metaKey || event.ctrlKey) {
@@ -1107,7 +1210,7 @@ function PresentationEditorCore({
       }
       if (!selected || !event.key.startsWith("Arrow")) return;
       event.preventDefault();
-      if (readOnly || selected.readOnly) return;
+      if (mutationsBlocked || selected.readOnly) return;
       const amount = event.shiftKey ? 10 : 1;
       const dx = event.key === "ArrowLeft" ? -amount : event.key === "ArrowRight" ? amount : 0;
       const dy = event.key === "ArrowUp" ? -amount : event.key === "ArrowDown" ? amount : 0;
@@ -1130,7 +1233,7 @@ function PresentationEditorCore({
       commitPosition,
       cycleObject,
       fitSlide,
-      readOnly,
+      mutationsBlocked,
       selectObject,
       selected,
       startTextEdit,
@@ -1157,7 +1260,7 @@ function PresentationEditorCore({
       event.preventDefault();
       event.stopPropagation();
       selectObject(entry);
-      if (readOnly || entry.readOnly) return;
+      if (mutationsBlocked || entry.readOnly) return;
       const start = pointFromPointer(event);
       const before = copyPosition(entry.object.position);
       dragRef.current = {
@@ -1171,7 +1274,7 @@ function PresentationEditorCore({
       setDraftPosition({ objectId: entry.id, position: before });
       overlayRef.current?.setPointerCapture?.(event.pointerId);
     },
-    [pointFromPointer, readOnly, selectObject],
+    [pointFromPointer, mutationsBlocked, selectObject],
   );
 
   const handlePointerDown = useCallback(
@@ -1191,17 +1294,22 @@ function PresentationEditorCore({
   const handlePointerMove = useCallback(
     (event: ReactPointerEvent<SVGSVGElement>) => {
       const drag = dragRef.current;
-      if (!drag || drag.pointerId !== event.pointerId) return;
+      if (!drag || drag.pointerId !== event.pointerId || mutationsBlocked) return;
       const point = pointFromPointer(event);
       setDraftPosition({ objectId: drag.object.id, position: positionFromDrag(drag, point) });
     },
-    [pointFromPointer],
+    [mutationsBlocked, pointFromPointer],
   );
 
   const finishDrag = useCallback(
     (event: ReactPointerEvent<SVGSVGElement>, cancel = false) => {
       const drag = dragRef.current;
-      if (!drag || drag.pointerId !== event.pointerId) return;
+      if (
+        !drag ||
+        drag.pointerId !== event.pointerId ||
+        (!cancel && authoringBlockedReason !== undefined)
+      )
+        return;
       dragRef.current = null;
       const captureTarget = overlayRef.current;
       if (captureTarget?.hasPointerCapture?.(event.pointerId)) {
@@ -1214,21 +1322,36 @@ function PresentationEditorCore({
       const point = pointFromPointer(event);
       commitPosition(entry, drag.mode, positionFromDrag(drag, point));
     },
-    [commitPosition, objectById, pointFromPointer],
+    [authoringBlockedReason, commitPosition, objectById, pointFromPointer],
   );
 
-  const handleLostPointerCapture = useCallback((event: ReactPointerEvent<SVGSVGElement>) => {
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-    dragRef.current = null;
-    setDraftPosition(null);
-  }, []);
+  const handleLostPointerCapture = useCallback(
+    (event: ReactPointerEvent<SVGSVGElement>) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId || authoringBlockedReason !== undefined)
+        return;
+      dragRef.current = null;
+      setDraftPosition(null);
+    },
+    [authoringBlockedReason],
+  );
 
   const railStart = Math.max(0, Math.floor(rail.scrollTop / RAIL_ITEM_HEIGHT) - RAIL_OVERSCAN);
   const railEnd = Math.min(
     slides.length,
     Math.ceil((rail.scrollTop + rail.height) / RAIL_ITEM_HEIGHT) + RAIL_OVERSCAN,
   );
+  const mobileRailStart = Math.max(
+    0,
+    Math.floor(mobileRail.scrollTop / MOBILE_RAIL_ITEM_HEIGHT) - MOBILE_RAIL_OVERSCAN,
+  );
+  const mobileRailEnd = Math.min(
+    slides.length,
+    Math.ceil((mobileRail.scrollTop + mobileRail.height) / MOBILE_RAIL_ITEM_HEIGHT) +
+      MOBILE_RAIL_OVERSCAN,
+  );
+  const slideCountLabel =
+    activeIndex >= 0 ? `${activeIndex + 1} / ${slides.length}` : `0 / ${slides.length}`;
   const stageWidth = presentation.slideSize.width * zoom;
   const stageHeight = presentation.slideSize.height * zoom;
 
@@ -1238,8 +1361,16 @@ function PresentationEditorCore({
       style={{ minHeight: "22rem" }}
       data-og-presentation-editor
       data-og-painted-object-count={visibleObjectIndexes.length}
-      data-og-command-state={commandFailure ? "error" : pendingCommands > 0 ? "pending" : "idle"}
-      aria-busy={pendingCommands > 0 ? "true" : undefined}
+      data-og-command-state={
+        commandFailure || authoringBlockedReason === "pending_conflict"
+          ? "error"
+          : pendingCommands > 0 || authoringBlockedReason === "prior_writer"
+            ? "pending"
+            : "idle"
+      }
+      aria-busy={
+        pendingCommands > 0 || authoringBlockedReason === "prior_writer" ? "true" : undefined
+      }
     >
       <div
         role="toolbar"
@@ -1256,8 +1387,22 @@ function PresentationEditorCore({
           >
             <ChevronLeftIcon />
           </button>
-          <span className="min-w-16 shrink-0 text-center text-og-xs tabular-nums text-og-fg-muted">
-            {activeIndex >= 0 ? `${activeIndex + 1} / ${slides.length}` : `0 / ${slides.length}`}
+          <button
+            ref={mobileSelectorTriggerRef}
+            type="button"
+            aria-label="Choose slide"
+            aria-haspopup="listbox"
+            aria-expanded={mobileSelectorOpen}
+            aria-controls={mobileSelectorOpen ? `${domId}-mobile-slides` : undefined}
+            disabled={slides.length === 0}
+            data-og-mobile-slide-selector
+            onClick={toggleMobileSlideSelector}
+            className="inline-flex min-h-11 min-w-16 shrink-0 items-center justify-center rounded-og-sm px-2 text-og-xs tabular-nums text-og-fg-muted hover:bg-og-surface-3 hover:text-og-fg disabled:opacity-35 sm:hidden"
+          >
+            <span>{slideCountLabel}</span>
+          </button>
+          <span className="hidden min-w-16 shrink-0 text-center text-og-xs tabular-nums text-og-fg-muted sm:inline">
+            {slideCountLabel}
           </span>
           <button
             type="button"
@@ -1271,7 +1416,7 @@ function PresentationEditorCore({
           <button
             type="button"
             aria-label="Add slide"
-            disabled={readOnly}
+            disabled={mutationsBlocked}
             onClick={insertSlide}
             className="ml-0.5 grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted hover:bg-og-surface-3 hover:text-og-fg disabled:opacity-35 [&>svg]:size-3.5"
           >
@@ -1280,7 +1425,7 @@ function PresentationEditorCore({
           <button
             type="button"
             aria-label="Delete slide"
-            disabled={readOnly || !activeSlide}
+            disabled={mutationsBlocked || !activeSlide}
             onClick={deleteSlide}
             className="grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted hover:bg-og-surface-3 hover:text-og-status-failed disabled:opacity-35 [&>svg]:size-3.5"
           >
@@ -1318,7 +1463,7 @@ function PresentationEditorCore({
           <button
             type="button"
             aria-label="Add text box"
-            disabled={readOnly || !activeSlide}
+            disabled={mutationsBlocked || !activeSlide}
             onClick={insertTextBox}
             className="grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted hover:bg-og-surface-3 hover:text-og-fg disabled:opacity-35 [&>svg]:size-3.5"
           >
@@ -1327,7 +1472,7 @@ function PresentationEditorCore({
           <button
             type="button"
             aria-label="Delete selected object"
-            disabled={readOnly || !selected || selected.readOnly}
+            disabled={mutationsBlocked || !selected || selected.readOnly}
             onClick={deleteObject}
             className="grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted hover:bg-og-surface-3 hover:text-og-status-failed disabled:opacity-35 [&>svg]:size-3.5"
           >
@@ -1339,32 +1484,38 @@ function PresentationEditorCore({
           title={
             commandFailure
               ? "Change not saved"
+              : authoringStatus
+                ? authoringStatus
+                : pendingCommands > 0
+                  ? "Saving…"
+                  : mutationsBlocked
+                    ? "View only"
+                    : selected
+                      ? `${objectLabel(selected)}${selected.readOnly ? " · View only" : ""}`
+                      : "Select an object to edit"
+          }
+        >
+          {commandFailure
+            ? "Change not saved"
+            : authoringStatus
+              ? authoringStatus
               : pendingCommands > 0
                 ? "Saving…"
-                : readOnly
+                : mutationsBlocked
                   ? "View only"
                   : selected
                     ? `${objectLabel(selected)}${selected.readOnly ? " · View only" : ""}`
-                    : "Select an object to edit"
-          }
-        >
-          {commandFailure
-            ? "Change not saved"
-            : pendingCommands > 0
-              ? "Saving…"
-              : readOnly
-                ? "View only"
-                : selected
-                  ? `${objectLabel(selected)}${selected.readOnly ? " · View only" : ""}`
-                  : "Select an object to edit"}
+                    : "Select an object to edit"}
         </span>
       </div>
 
       <div role="status" aria-live="polite" className="sr-only">
-        {commandFailure?.message ?? (pendingCommands > 0 ? "Saving presentation changes" : "")}
+        {commandFailure?.message ??
+          authoringStatus ??
+          (pendingCommands > 0 ? "Saving presentation changes" : "")}
       </div>
 
-      <div className="flex min-h-0 min-w-0 flex-1">
+      <div className="relative flex min-h-0 min-w-0 flex-1">
         <div
           ref={railRef}
           role="listbox"
@@ -1389,12 +1540,7 @@ function PresentationEditorCore({
             }));
           }}
           onKeyDown={(event) => {
-            if (slides.length === 0) return;
-            let nextIndex: number | null = null;
-            if (event.key === "ArrowDown") nextIndex = Math.min(slides.length - 1, activeIndex + 1);
-            else if (event.key === "ArrowUp") nextIndex = Math.max(0, activeIndex - 1);
-            else if (event.key === "Home") nextIndex = 0;
-            else if (event.key === "End") nextIndex = slides.length - 1;
+            const nextIndex = nextSlideIndexFromKey(event.key, activeIndex, slides.length);
             if (nextIndex === null) return;
             event.preventDefault();
             const next = slides[nextIndex];
@@ -1447,6 +1593,101 @@ function PresentationEditorCore({
           </div>
         </div>
 
+        {mobileSelectorOpen ? (
+          <div
+            ref={mobileSelectorPanelRef}
+            className="absolute left-2 top-2 z-40 max-w-56 overflow-hidden rounded-og-md border border-og-border bg-og-surface-1 shadow-og-md sm:hidden"
+            style={{ width: "calc(100% - 1rem)" }}
+          >
+            <div
+              ref={mobileRailRef}
+              id={`${domId}-mobile-slides`}
+              role="listbox"
+              tabIndex={0}
+              aria-label="Slides"
+              aria-orientation="vertical"
+              aria-activedescendant={
+                activeSlide && activeIndex >= mobileRailStart && activeIndex < mobileRailEnd
+                  ? `${domId}-mobile-slide-${safeDomId(activeSlide.id)}`
+                  : undefined
+              }
+              className="max-h-72 overflow-y-auto outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent"
+              data-og-mobile-slide-list
+              data-og-window-start={mobileRailStart}
+              data-og-window-end={mobileRailEnd}
+              onScroll={(event) => {
+                const scrollTop = event.currentTarget.scrollTop;
+                const height = event.currentTarget.clientHeight;
+                setMobileRail((current) => ({
+                  scrollTop,
+                  height: height || current.height,
+                }));
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Escape") {
+                  event.preventDefault();
+                  setMobileSelectorOpen(false);
+                  mobileSelectorTriggerRef.current?.focus();
+                  return;
+                }
+                const nextIndex = nextSlideIndexFromKey(event.key, activeIndex, slides.length);
+                if (nextIndex === null) return;
+                event.preventDefault();
+                const next = slides[nextIndex];
+                if (!next) return;
+                if (next !== activeSlide) selectSlide(next, nextIndex);
+                const list = event.currentTarget;
+                const top = nextIndex * MOBILE_RAIL_ITEM_HEIGHT;
+                const bottom = top + MOBILE_RAIL_ITEM_HEIGHT;
+                if (top < list.scrollTop) list.scrollTop = top;
+                else if (bottom > list.scrollTop + list.clientHeight) {
+                  list.scrollTop = bottom - list.clientHeight;
+                }
+              }}
+            >
+              <div
+                className="relative w-full"
+                style={{ height: slides.length * MOBILE_RAIL_ITEM_HEIGHT }}
+              >
+                {slides.slice(mobileRailStart, mobileRailEnd).map((slide, offset) => {
+                  const index = mobileRailStart + offset;
+                  const active = slide === activeSlide;
+                  return (
+                    <button
+                      key={slide.id}
+                      id={`${domId}-mobile-slide-${safeDomId(slide.id)}`}
+                      type="button"
+                      role="option"
+                      tabIndex={-1}
+                      aria-selected={active}
+                      aria-label={`Slide ${index + 1}${slide.title ? `: ${slide.title}` : ""}`}
+                      onClick={() => chooseMobileSlide(slide, index)}
+                      className={cn(
+                        "absolute left-0 flex min-h-11 w-full items-center gap-2 px-2 text-left",
+                        active
+                          ? "bg-og-surface-3 text-og-fg"
+                          : "text-og-fg-muted hover:bg-og-surface-3/70",
+                      )}
+                      style={{
+                        top: index * MOBILE_RAIL_ITEM_HEIGHT,
+                        height: MOBILE_RAIL_ITEM_HEIGHT,
+                      }}
+                      data-og-mobile-slide-index={index}
+                    >
+                      <span className="w-7 shrink-0 text-right text-og-xs tabular-nums text-og-fg-subtle">
+                        {index + 1}
+                      </span>
+                      <span className="min-w-0 flex-1 truncate text-og-sm">
+                        {slide.title || `Slide ${index + 1}`}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        ) : null}
+
         <div
           ref={viewportRef}
           className="relative min-h-0 min-w-0 flex-1 overflow-auto bg-og-surface-3/60 p-6"
@@ -1476,7 +1717,10 @@ function PresentationEditorCore({
               <span className="truncate">{commandFailure.message}</span>
               <button
                 type="button"
-                onClick={commandFailure.retry}
+                disabled={mutationsBlocked}
+                onClick={() => {
+                  if (!mutationsBlocked) commandFailure.retry();
+                }}
                 className="shrink-0 rounded-og-xs px-1.5 py-0.5 font-medium outline-hidden hover:bg-og-surface-3 focus-visible:ring-2 focus-visible:ring-og-accent"
               >
                 Retry
@@ -1489,6 +1733,9 @@ function PresentationEditorCore({
               className="relative mx-auto shrink-0 overflow-hidden shadow-og-lg"
               style={{ width: stageWidth, height: stageHeight, backgroundColor: "#fff" }}
               data-og-presentation-stage
+              // The slide is white paper in both app themes, so its selection
+              // chrome uses the light palette to stay visible on it.
+              data-og-theme="light"
             >
               <canvas
                 ref={canvasRef}
@@ -1504,7 +1751,7 @@ function PresentationEditorCore({
                 aria-describedby={
                   selected ? `${instructionsId} ${selectionProxyId}` : instructionsId
                 }
-                aria-readonly={readOnly || selected?.readOnly || undefined}
+                aria-readonly={mutationsBlocked || selected?.readOnly || undefined}
                 viewBox={`0 0 ${presentation.slideSize.width} ${presentation.slideSize.height}`}
                 className="absolute inset-0 size-full touch-none outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent"
                 onKeyDown={handleCanvasKeyDown}
@@ -1526,17 +1773,17 @@ function PresentationEditorCore({
                       width={effectiveSelectedPosition.width}
                       height={effectiveSelectedPosition.height}
                       fill="transparent"
-                      stroke="var(--og-accent, #3b82f6)"
+                      stroke="var(--og-color-accent-deep)"
                       strokeWidth={2}
                       vectorEffect="non-scaling-stroke"
                       pointerEvents="none"
                     />
-                    {!readOnly && !selected.readOnly ? (
+                    {!mutationsBlocked && !selected.readOnly ? (
                       <circle
                         cx={effectiveSelectedPosition.left + effectiveSelectedPosition.width}
                         cy={effectiveSelectedPosition.top + effectiveSelectedPosition.height}
                         r={6 / zoom}
-                        fill="var(--og-accent, #3b82f6)"
+                        fill="var(--og-color-accent-deep)"
                         stroke="white"
                         strokeWidth={1.5}
                         vectorEffect="non-scaling-stroke"
@@ -1564,9 +1811,14 @@ function PresentationEditorCore({
                   ref={editorRef}
                   aria-label={`Edit ${textEdit.shape.name}`}
                   value={textDraft}
+                  readOnly={mutationsBlocked}
                   maxLength={1_000_000}
-                  onChange={(event) => setTextDraft(event.currentTarget.value)}
-                  onInput={(event) => setTextDraft(event.currentTarget.value)}
+                  onChange={(event) => {
+                    if (!mutationsBlocked) setTextDraft(event.currentTarget.value);
+                  }}
+                  onInput={(event) => {
+                    if (!mutationsBlocked) setTextDraft(event.currentTarget.value);
+                  }}
                   onBlur={() => finishTextEdit()}
                   onKeyDown={(event) => {
                     if (event.key === "Escape") {
@@ -1614,6 +1866,7 @@ function PresentationEditorCore({
 export function PresentationArtifactSurface({
   presentation,
   title = "Presentation",
+  showHeader,
   subtitle,
   actions,
   busy,
@@ -1625,6 +1878,7 @@ export function PresentationArtifactSurface({
     <ArtifactSurface
       modality="presentation"
       title={title}
+      showHeader={showHeader}
       subtitle={subtitle ?? `${count} slide${count === 1 ? "" : "s"}`}
       actions={actions}
       busy={busy}
@@ -1639,6 +1893,7 @@ export function PresentationArtifactSurface({
 export function PresentationProjectionArtifactSurface({
   projection,
   title = "Presentation",
+  showHeader,
   subtitle,
   actions,
   busy,
@@ -1650,6 +1905,7 @@ export function PresentationProjectionArtifactSurface({
     <ArtifactSurface
       modality="presentation"
       title={title}
+      showHeader={showHeader}
       subtitle={subtitle ?? `${count} slide${count === 1 ? "" : "s"}`}
       actions={actions}
       busy={busy}