@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/dist/{chunk-PEI6RANI.js → chunk-PNY3JKBJ.js}

@@ -1,3 +1,6 @@
+import {
+  useLatestTaskRunner
+} from "./chunk-WEHMPOXK.js";
 import {
   ArtifactSurface,
   EditableArtifactMessage,
@@ -6,7 +9,7 @@ import {
   editableArtifactProjectionKey,
   editableArtifactStatusLabel,
   useEditableArtifactView
-} from "./chunk-KCGXPP5V.js";
+} from "./chunk-Y2PRMYLC.js";
 import {
   cn
 } from "./chunk-22KP6LR5.js";
@@ -37,6 +40,9 @@ var MAX_ZOOM = 4;
 var RAIL_ITEM_HEIGHT = 116;
 var RAIL_OVERSCAN = 3;
 var DEFAULT_RAIL_HEIGHT = 640;
+var MOBILE_RAIL_ITEM_HEIGHT = 44;
+var MOBILE_RAIL_OVERSCAN = 3;
+var DEFAULT_MOBILE_LIST_HEIGHT = 264;
 var DEFAULT_VIEWPORT = { width: 960, height: 640 };
 var SPATIAL_TILE = 256;
 var MAX_SPATIAL_BUCKETS_PER_OBJECT = 1024;
@@ -87,6 +93,14 @@ function PresentationProjectionEditor({
     }
   );
 }
+function nextSlideIndexFromKey(key, activeIndex, length) {
+  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,
@@ -97,6 +111,7 @@ function PresentationEditorCore({
   zoom: controlledZoom,
   defaultZoom = 0.75,
   readOnly = false,
+  authoringBlockedReason,
   className,
   onSlideChange,
   onSelectionChange,
@@ -104,6 +119,8 @@ function PresentationEditorCore({
   onCommandError,
   onZoomChange
 }) {
+  const mutationsBlocked = readOnly || authoringBlockedReason !== void 0;
+  const authoringStatus = readOnly ? null : authoringBlockedReason === "pending_conflict" ? "An earlier change needs attention" : authoringBlockedReason === "prior_writer" ? "Saving earlier changes\u2026" : null;
   const slides = presentation.slides.items;
   const firstSlideId = slides[0]?.id ?? null;
   const [localSlideId, setLocalSlideId] = useState(
@@ -125,6 +142,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({
     scrollLeft: 0,
     scrollTop: 0,
@@ -137,6 +159,9 @@ function PresentationEditorCore({
   const [textDraft, setTextDraft] = useState("");
   const [paintEpoch, setPaintEpoch] = useState(0);
   const railRef = useRef(null);
+  const mobileSelectorTriggerRef = useRef(null);
+  const mobileSelectorPanelRef = useRef(null);
+  const mobileRailRef = useRef(null);
   const viewportRef = useRef(null);
   const stageRef = useRef(null);
   const canvasRef = useRef(null);
@@ -150,6 +175,7 @@ function PresentationEditorCore({
   const commandVersionsRef = useRef(/* @__PURE__ */ new Map());
   const pendingSlideIdRef = useRef(null);
   const pendingObjectIdRef = useRef(null);
+  const mobileRailScrollOnOpenRef = useRef(0);
   const domId = useId().replaceAll(":", "");
   const selectionProxyId = `${domId}-presentation-selection`;
   const instructionsId = `${domId}-presentation-instructions`;
@@ -208,6 +234,44 @@ function PresentationEditorCore({
     observer.observe(element);
     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) => {
+      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) => {
+      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;
@@ -419,7 +483,7 @@ function PresentationEditorCore({
   ]);
   const runCommit = useCallback(
     (key, command, rollback, retry) => {
-      if (!onCommit) return;
+      if (mutationsBlocked || !onCommit) return;
       const version = (commandVersionsRef.current.get(key) ?? 0) + 1;
       commandVersionsRef.current.set(key, version);
       const scope = commandScopeRef.current;
@@ -455,11 +519,11 @@ function PresentationEditorCore({
         }
       );
     },
-    [onCommandError, onCommit]
+    [mutationsBlocked, onCommandError, onCommit]
   );
   const commitPosition = useCallback(
     (entry, kind, next) => {
-      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;
@@ -487,10 +551,10 @@ 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 = { kind: "slide-insert", slideId, index };
@@ -506,9 +570,9 @@ 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 = {
       kind: "slide-delete",
       slideId: activeSlide.id,
@@ -516,9 +580,9 @@ function PresentationEditorCore({
     };
     const submit = () => runCommit(`slide-delete:${activeSlide.id}`, command, () => void 0, 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 = {
@@ -540,9 +604,9 @@ 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 = {
       kind: "object-delete",
       slideId: activeSlide.id,
@@ -550,10 +614,10 @@ function PresentationEditorCore({
     };
     const submit = () => runCommit(`object-delete:${activeSlide.id}:${selected.id}`, command, () => void 0, submit);
     submit();
-  }, [activeSlide, readOnly, runCommit, selected]);
+  }, [activeSlide, mutationsBlocked, runCommit, selected]);
   const startTextEdit = useCallback(
     (entry) => {
-      if (readOnly || !entry || entry.readOnly || entry.kind !== "shape") return;
+      if (mutationsBlocked || !entry || entry.readOnly || entry.kind !== "shape") return;
       const shape = entry.object;
       if (shape.geometry === "line") return;
       const before = shape.text.toString();
@@ -563,7 +627,7 @@ function PresentationEditorCore({
       setTextEdit(edit);
       setTextDraft(before);
     },
-    [activeSlide, readOnly]
+    [activeSlide, mutationsBlocked]
   );
   useEffect(() => {
     if (!textEdit) return;
@@ -573,12 +637,12 @@ function PresentationEditorCore({
   const finishTextEdit = useCallback(
     (cancel = false) => {
       const edit = textEditRef.current;
-      if (!edit) return;
+      if (!edit || !cancel && authoringBlockedReason !== void 0) 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 = {
@@ -603,7 +667,7 @@ function PresentationEditorCore({
       );
       submit();
     },
-    [activeSlide, readOnly, runCommit, textDraft]
+    [activeSlide, authoringBlockedReason, mutationsBlocked, runCommit, textDraft]
   );
   const cycleObject = useCallback(
     (direction) => {
@@ -623,6 +687,32 @@ 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, index) => {
+      if (slide !== activeSlide) selectSlide(slide, index);
+      setMobileSelectorOpen(false);
+      mobileSelectorTriggerRef.current?.focus();
+    },
+    [activeSlide, selectSlide]
+  );
   const handleCanvasKeyDown = useCallback(
     (event) => {
       if (event.metaKey || event.ctrlKey) {
@@ -672,7 +762,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;
@@ -693,7 +783,7 @@ function PresentationEditorCore({
       commitPosition,
       cycleObject,
       fitSlide,
-      readOnly,
+      mutationsBlocked,
       selectObject,
       selected,
       startTextEdit,
@@ -717,7 +807,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 = {
@@ -731,7 +821,7 @@ function PresentationEditorCore({
       setDraftPosition({ objectId: entry.id, position: before });
       overlayRef.current?.setPointerCapture?.(event.pointerId);
     },
-    [pointFromPointer, readOnly, selectObject]
+    [pointFromPointer, mutationsBlocked, selectObject]
   );
   const handlePointerDown = useCallback(
     (event) => {
@@ -749,16 +839,17 @@ function PresentationEditorCore({
   const handlePointerMove = useCallback(
     (event) => {
       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, cancel = false) => {
       const drag = dragRef.current;
-      if (!drag || drag.pointerId !== event.pointerId) return;
+      if (!drag || drag.pointerId !== event.pointerId || !cancel && authoringBlockedReason !== void 0)
+        return;
       dragRef.current = null;
       const captureTarget = overlayRef.current;
       if (captureTarget?.hasPointerCapture?.(event.pointerId)) {
@@ -771,19 +862,32 @@ function PresentationEditorCore({
       const point = pointFromPointer(event);
       commitPosition(entry, drag.mode, positionFromDrag(drag, point));
     },
-    [commitPosition, objectById, pointFromPointer]
+    [authoringBlockedReason, commitPosition, objectById, pointFromPointer]
+  );
+  const handleLostPointerCapture = useCallback(
+    (event) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId || authoringBlockedReason !== void 0)
+        return;
+      dragRef.current = null;
+      setDraftPosition(null);
+    },
+    [authoringBlockedReason]
   );
-  const handleLostPointerCapture = useCallback((event) => {
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-    dragRef.current = null;
-    setDraftPosition(null);
-  }, []);
   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;
   return /* @__PURE__ */ jsxs(
@@ -793,8 +897,8 @@ function PresentationEditorCore({
       style: { minHeight: "22rem" },
       "data-og-presentation-editor": true,
       "data-og-painted-object-count": visibleObjectIndexes.length,
-      "data-og-command-state": commandFailure ? "error" : pendingCommands > 0 ? "pending" : "idle",
-      "aria-busy": pendingCommands > 0 ? "true" : void 0,
+      "data-og-command-state": commandFailure || authoringBlockedReason === "pending_conflict" ? "error" : pendingCommands > 0 || authoringBlockedReason === "prior_writer" ? "pending" : "idle",
+      "aria-busy": pendingCommands > 0 || authoringBlockedReason === "prior_writer" ? "true" : void 0,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -815,7 +919,23 @@ function PresentationEditorCore({
                     children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { className: "min-w-16 shrink-0 text-center text-og-xs tabular-nums text-og-fg-muted", children: activeIndex >= 0 ? `${activeIndex + 1} / ${slides.length}` : `0 / ${slides.length}` }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: mobileSelectorTriggerRef,
+                    type: "button",
+                    "aria-label": "Choose slide",
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": mobileSelectorOpen,
+                    "aria-controls": mobileSelectorOpen ? `${domId}-mobile-slides` : void 0,
+                    disabled: slides.length === 0,
+                    "data-og-mobile-slide-selector": true,
+                    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",
+                    children: /* @__PURE__ */ jsx("span", { children: slideCountLabel })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "hidden min-w-16 shrink-0 text-center text-og-xs tabular-nums text-og-fg-muted sm:inline", children: slideCountLabel }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -832,7 +952,7 @@ function PresentationEditorCore({
                   {
                     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",
                     children: /* @__PURE__ */ jsx(FilePlus2Icon, {})
@@ -843,7 +963,7 @@ function PresentationEditorCore({
                   {
                     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",
                     children: /* @__PURE__ */ jsx(Trash2Icon, {})
@@ -890,7 +1010,7 @@ function PresentationEditorCore({
                   {
                     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",
                     children: /* @__PURE__ */ jsx(TypeIcon, {})
@@ -901,7 +1021,7 @@ function PresentationEditorCore({
                   {
                     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",
                     children: /* @__PURE__ */ jsx(Trash2Icon, {})
@@ -912,15 +1032,15 @@ function PresentationEditorCore({
                 "span",
                 {
                   className: "hidden max-w-44 shrink-0 truncate border-l border-og-border px-2 text-og-xs text-og-fg-subtle sm:block",
-                  title: commandFailure ? "Change not saved" : pendingCommands > 0 ? "Saving\u2026" : readOnly ? "View only" : selected ? `${objectLabel(selected)}${selected.readOnly ? " \xB7 View only" : ""}` : "Select an object to edit",
-                  children: commandFailure ? "Change not saved" : pendingCommands > 0 ? "Saving\u2026" : readOnly ? "View only" : selected ? `${objectLabel(selected)}${selected.readOnly ? " \xB7 View only" : ""}` : "Select an object to edit"
+                  title: commandFailure ? "Change not saved" : authoringStatus ? authoringStatus : pendingCommands > 0 ? "Saving\u2026" : mutationsBlocked ? "View only" : selected ? `${objectLabel(selected)}${selected.readOnly ? " \xB7 View only" : ""}` : "Select an object to edit",
+                  children: commandFailure ? "Change not saved" : authoringStatus ? authoringStatus : pendingCommands > 0 ? "Saving\u2026" : mutationsBlocked ? "View only" : selected ? `${objectLabel(selected)}${selected.readOnly ? " \xB7 View only" : ""}` : "Select an object to edit"
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: commandFailure?.message ?? (pendingCommands > 0 ? "Saving presentation changes" : "") }),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: commandFailure?.message ?? authoringStatus ?? (pendingCommands > 0 ? "Saving presentation changes" : "") }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -943,12 +1063,7 @@ function PresentationEditorCore({
                 }));
               },
               onKeyDown: (event) => {
-                if (slides.length === 0) return;
-                let nextIndex = 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];
@@ -1001,6 +1116,96 @@ function PresentationEditorCore({
               }) })
             }
           ),
+          mobileSelectorOpen ? /* @__PURE__ */ jsx(
+            "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)" },
+              children: /* @__PURE__ */ jsx(
+                "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)}` : void 0,
+                  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": true,
+                  "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;
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "relative w-full",
+                      style: { height: slides.length * MOBILE_RAIL_ITEM_HEIGHT },
+                      children: slides.slice(mobileRailStart, mobileRailEnd).map((slide, offset) => {
+                        const index = mobileRailStart + offset;
+                        const active = slide === activeSlide;
+                        return /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            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,
+                            children: [
+                              /* @__PURE__ */ jsx("span", { className: "w-7 shrink-0 text-right text-og-xs tabular-nums text-og-fg-subtle", children: index + 1 }),
+                              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-og-sm", children: slide.title || `Slide ${index + 1}` })
+                            ]
+                          },
+                          slide.id
+                        );
+                      })
+                    }
+                  )
+                }
+              )
+            }
+          ) : null,
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1035,7 +1240,10 @@ function PresentationEditorCore({
                         "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",
                           children: "Retry"
                         }
@@ -1050,6 +1258,7 @@ function PresentationEditorCore({
                     className: "relative mx-auto shrink-0 overflow-hidden shadow-og-lg",
                     style: { width: stageWidth, height: stageHeight, backgroundColor: "#fff" },
                     "data-og-presentation-stage": true,
+                    "data-og-theme": "light",
                     children: [
                       /* @__PURE__ */ jsx(
                         "canvas",
@@ -1068,7 +1277,7 @@ function PresentationEditorCore({
                           tabIndex: 0,
                           "aria-label": `Slide ${activeIndex + 1} editor`,
                           "aria-describedby": selected ? `${instructionsId} ${selectionProxyId}` : instructionsId,
-                          "aria-readonly": readOnly || selected?.readOnly || void 0,
+                          "aria-readonly": mutationsBlocked || selected?.readOnly || void 0,
                           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,
@@ -1092,19 +1301,19 @@ 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 ? /* @__PURE__ */ jsx(
+                                !mutationsBlocked && !selected.readOnly ? /* @__PURE__ */ jsx(
                                   "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",
@@ -1125,9 +1334,14 @@ function PresentationEditorCore({
                           ref: editorRef,
                           "aria-label": `Edit ${textEdit.shape.name}`,
                           value: textDraft,
+                          readOnly: mutationsBlocked,
                           maxLength: 1e6,
-                          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") {
@@ -1170,6 +1384,7 @@ function PresentationEditorCore({
 function PresentationArtifactSurface({
   presentation,
   title = "Presentation",
+  showHeader,
   subtitle,
   actions,
   busy,
@@ -1182,6 +1397,7 @@ function PresentationArtifactSurface({
     {
       modality: "presentation",
       title,
+      showHeader,
       subtitle: subtitle ?? `${count} slide${count === 1 ? "" : "s"}`,
       actions,
       busy,
@@ -1193,6 +1409,7 @@ function PresentationArtifactSurface({
 function PresentationProjectionArtifactSurface({
   projection,
   title = "Presentation",
+  showHeader,
   subtitle,
   actions,
   busy,
@@ -1205,6 +1422,7 @@ function PresentationProjectionArtifactSurface({
     {
       modality: "presentation",
       title,
+      showHeader,
       subtitle: subtitle ?? `${count} slide${count === 1 ? "" : "s"}`,
       actions,
       busy,
@@ -2464,6 +2682,7 @@ var DEFAULT_PRESENTATION_TEXT_STYLE = Object.freeze({
 function EditablePresentationArtifactSurface({
   session,
   title = "Presentation",
+  showHeader,
   subtitle,
   readOnly = false,
   onCommit,
@@ -2479,30 +2698,34 @@ function EditablePresentationArtifactSurface({
     error: null
   });
   const loadGeneration = useRef2(0);
+  const scheduleLoad = useLatestTaskRunner(session);
   const sceneNodes = useRef2(/* @__PURE__ */ new Map());
   useEffect2(() => {
     const generation = ++loadGeneration.current;
     let cancelled = false;
     setState((current) => ({ ...current, loading: true, error: null }));
-    void composePresentationEditorProjection(session).then(
-      (composed) => {
-        if (cancelled || generation !== loadGeneration.current) return;
-        sceneNodes.current = new Map(composed.sceneNodes);
-        setState({ composed, loading: false, error: null });
-      },
-      (cause) => {
-        if (cancelled || generation !== loadGeneration.current) return;
-        setState({
-          composed: null,
-          loading: false,
-          error: asEditableArtifactError(cause, "Could not open this presentation")
-        });
-      }
-    );
+    scheduleLoad(async () => {
+      if (cancelled || generation !== loadGeneration.current) return;
+      await composePresentationEditorProjection(session).then(
+        (composed) => {
+          if (cancelled || generation !== loadGeneration.current) return;
+          sceneNodes.current = new Map(composed.sceneNodes);
+          setState({ composed, loading: false, error: null });
+        },
+        (cause) => {
+          if (cancelled || generation !== loadGeneration.current) return;
+          setState({
+            composed: null,
+            loading: false,
+            error: asEditableArtifactError(cause, "Could not open this presentation")
+          });
+        }
+      );
+    });
     return () => {
       cancelled = true;
     };
-  }, [invalidator, retryEpoch, session]);
+  }, [invalidator, retryEpoch, scheduleLoad, session]);
   const refresh = useCallback2(() => setRetryEpoch((value) => value + 1), []);
   const writable = !readOnly && view.writable;
   const applyCommit = useCallback2(
@@ -2510,6 +2733,7 @@ function EditablePresentationArtifactSurface({
       const composed = state.composed;
       if (!composed) throw new Error("Presentation projection is not ready");
       if (!writable) throw new Error("This presentation is read only");
+      if (view.authoringBlockedReason) throw new Error("An earlier change must settle first");
       if (commit.revision !== void 0 && String(commit.revision) !== String(composed.projection.revision)) {
         throw new Error("The presentation changed; retry this edit on the latest version");
       }
@@ -2619,7 +2843,15 @@ function EditablePresentationArtifactSurface({
       notifyPresentationCommit(onCommit, onCommandError, commit);
       refresh();
     },
-    [onCommandError, onCommit, refresh, session, state.composed, writable]
+    [
+      onCommandError,
+      onCommit,
+      refresh,
+      session,
+      state.composed,
+      view.authoringBlockedReason,
+      writable
+    ]
   );
   const projection = state.composed?.projection ?? null;
   const status = editableArtifactStatusLabel(view);
@@ -2629,10 +2861,12 @@ function EditablePresentationArtifactSurface({
     {
       ...surfaceProps,
       title,
+      showHeader,
       subtitle: subtitle ?? `${projection.slides.length} slide${projection.slides.length === 1 ? "" : "s"}${writable ? "" : " \xB7 Read only"}`,
       projection,
       commit: writable ? applyCommit : void 0,
       readOnly: !writable,
+      authoringBlockedReason: view.authoringBlockedReason,
       busy: state.loading,
       onCommandError
     }
@@ -2641,6 +2875,7 @@ function EditablePresentationArtifactSurface({
     {
       modality: "presentation",
       title,
+      showHeader,
       subtitle: subtitle ?? status,
       actions: surfaceProps.actions,
       busy: !accessRevoked && !state.error,
@@ -3231,4 +3466,4 @@ export {
   PresentationProjectionArtifactSurface,
   EditablePresentationArtifactSurface
 };
-//# sourceMappingURL=chunk-PEI6RANI.js.map
+//# sourceMappingURL=chunk-PNY3JKBJ.js.map