@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-DXBYWSL5.js

@@ -0,0 +1,3550 @@
+"use client";
+import {
+  useLatestTaskRunner
+} from "./chunk-2DDJ6YH6.js";
+import {
+  ArtifactSubmissionProvider,
+  ArtifactSurface,
+  EditableArtifactDownloadButton,
+  EditableArtifactMessage,
+  artifactSubmissionSessionKey,
+  asEditableArtifactError,
+  editableArtifactAccessRevoked,
+  editableArtifactProjectionKey,
+  editableArtifactStatusLabel,
+  useArtifactSubmissions,
+  useEditableArtifactView
+} from "./chunk-7VMZGLYI.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+import {
+  useOpenGeniText
+} from "./chunk-7T2ZE3VT.js";
+
+// src/components/artifacts/presentation-editor.tsx
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ExpandIcon,
+  FilePlus2Icon,
+  MinusIcon,
+  PlusIcon,
+  Trash2Icon,
+  TypeIcon
+} from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MIN_ZOOM = 0.2;
+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;
+var CANVAS_OVERSCAN_PX = 96;
+var MAX_CANVAS_EDGE = 8192;
+var MAX_CANVAS_PIXELS = 16e6;
+var MAX_EDITOR_GEOMETRY = 1e6;
+var MAX_TABLE_CELLS_PER_PAINT = 2e4;
+var MAX_PROJECTION_SLIDES = 1e5;
+var MAX_PROJECTION_ELEMENTS_PER_SLIDE = 1e5;
+var MAX_PROJECTION_GROUP_DEPTH = 16;
+var MAX_PROJECTION_TABLE_CELLS = 1e6;
+var MAX_PROJECTION_TEXT = 1e6;
+function PresentationEditor(props) {
+  return /* @__PURE__ */ jsx(PresentationEditorCore, { ...props });
+}
+function PresentationProjectionEditor({
+  projection,
+  commit,
+  onCommandError,
+  onSlideChange,
+  onSelectionChange,
+  readOnly = false,
+  ...props
+}) {
+  const view = useMemo(() => presentationViewFromProjection(projection), [projection]);
+  return /* @__PURE__ */ jsx(
+    PresentationEditorCore,
+    {
+      ...props,
+      presentation: view.presentation,
+      revision: projection.revision,
+      readOnly: readOnly || !commit,
+      onCommit: commit ? (command) => commit({ ...command, revision: projection.revision }) : void 0,
+      onCommandError,
+      onSlideChange: (slide, index) => {
+        const projected = view.slideById.get(slide.id);
+        if (projected) onSlideChange?.(projected, index);
+      },
+      onSelectionChange: (object, slide) => {
+        const projectedSlide = view.slideById.get(slide.id);
+        if (!projectedSlide) return;
+        onSelectionChange?.(
+          object ? view.elementById.get(object.id) ?? null : null,
+          projectedSlide
+        );
+      }
+    }
+  );
+}
+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,
+  activeSlideId: controlledSlideId,
+  defaultActiveSlideId,
+  selectedObjectId: controlledSelectionId,
+  defaultSelectedObjectId = null,
+  zoom: controlledZoom,
+  defaultZoom = 0.75,
+  readOnly = false,
+  authoringBlockedReason,
+  className,
+  onSlideChange,
+  onSelectionChange,
+  onCommit,
+  onCommandError,
+  onZoomChange
+}) {
+  const t = useOpenGeniText();
+  const mutationsBlocked = readOnly || authoringBlockedReason !== void 0;
+  const authoringStatus = readOnly ? null : authoringBlockedReason === "pending_conflict" ? t("artifacts.presentationEditor.anEarlierChangeNeedsAttention") : authoringBlockedReason === "prior_writer" ? t("artifacts.presentationEditor.savingEarlierChanges") : null;
+  const slides = presentation.slides.items;
+  const firstSlideId = slides[0]?.id ?? null;
+  const [localSlideId, setLocalSlideId] = useState(
+    defaultActiveSlideId ?? controlledSlideId ?? firstSlideId
+  );
+  const requestedSlideId = controlledSlideId ?? localSlideId;
+  const activeSlide = slides.find((slide) => slide.id === requestedSlideId) ?? slides[0] ?? null;
+  const activeIndex = activeSlide ? slides.indexOf(activeSlide) : -1;
+  const [localSelectionId, setLocalSelectionId] = useState(defaultSelectedObjectId);
+  const selectedId = controlledSelectionId === void 0 ? localSelectionId : controlledSelectionId;
+  const [localZoom, setLocalZoom] = useState(() => clampZoom(defaultZoom));
+  const zoom = clampZoom(controlledZoom ?? localZoom);
+  const [fitMode, setFitMode] = useState(false);
+  const [viewportMeasured, setViewportMeasured] = useState(false);
+  const [modelEpoch, setModelEpoch] = useState(0);
+  const [pendingCommands, setPendingCommands] = useState(0);
+  const [commandFailure, setCommandFailure] = useState(null);
+  const [rail, setRail] = useState({
+    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,
+    ...DEFAULT_VIEWPORT,
+    stageLeft: 0,
+    stageTop: 0
+  });
+  const [draftPosition, setDraftPosition] = useState(null);
+  const [textEdit, setTextEdit] = useState(null);
+  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);
+  const overlayRef = useRef(null);
+  const editorRef = useRef(null);
+  const dragRef = useRef(null);
+  const textEditRef = useRef(null);
+  const imageCacheRef = useRef(/* @__PURE__ */ new Map());
+  const mountedRef = useRef(true);
+  const commandScopeRef = useRef(0);
+  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`;
+  const objects = useMemo(
+    () => activeSlide ? listSlideObjects(activeSlide) : [],
+    // revision is a deliberate host invalidation token; modelEpoch covers local commits.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [activeSlide, modelEpoch, revision]
+  );
+  const objectById = useMemo(
+    () => new Map(objects.map((entry) => [entry.id, entry])),
+    [objects]
+  );
+  const objectIndexById = useMemo(
+    () => new Map(objects.map((entry, index) => [entry.id, index])),
+    [objects]
+  );
+  const selected = selectedId ? objectById.get(selectedId) ?? null : null;
+  const spatialIndex = useMemo(
+    () => buildSpatialIndex(objects, presentation.slideSize),
+    [objects, presentation.slideSize]
+  );
+  const effectiveSelectedPosition = selected && draftPosition?.objectId === selected.id ? draftPosition.position : selected ? copyPosition(selected.object.position) : null;
+  useEffect(() => {
+    const pendingSlideId = pendingSlideIdRef.current;
+    if (pendingSlideId && controlledSlideId === void 0 && slides.some((slide) => slide.id === pendingSlideId)) {
+      pendingSlideIdRef.current = null;
+      setLocalSlideId(pendingSlideId);
+      return;
+    }
+    if (activeSlide && requestedSlideId !== activeSlide.id && controlledSlideId === void 0 && pendingSlideId === null) {
+      setLocalSlideId(activeSlide.id);
+    }
+  }, [activeSlide, controlledSlideId, requestedSlideId, slides]);
+  useEffect(() => {
+    if (selectedId && !objectById.has(selectedId) && controlledSelectionId === void 0) {
+      setLocalSelectionId(null);
+    }
+  }, [controlledSelectionId, objectById, selectedId]);
+  useEffect(() => {
+    const pendingObjectId = pendingObjectIdRef.current;
+    if (pendingObjectId && controlledSelectionId === void 0 && objectById.has(pendingObjectId)) {
+      pendingObjectIdRef.current = null;
+      setLocalSelectionId(pendingObjectId);
+    }
+  }, [controlledSelectionId, objectById]);
+  useLayoutEffect(() => {
+    const element = railRef.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const measure = () => setRail((current) => ({
+      scrollTop: element.scrollTop,
+      height: element.clientHeight || current.height
+    }));
+    measure();
+    const observer = new ResizeObserver(measure);
+    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;
+    const measure = () => {
+      const stage = stageRef.current;
+      const measuredWidth = element.clientWidth;
+      const measuredHeight = element.clientHeight;
+      const next = {
+        scrollLeft: element.scrollLeft,
+        scrollTop: element.scrollTop,
+        width: measuredWidth || DEFAULT_VIEWPORT.width,
+        height: measuredHeight || DEFAULT_VIEWPORT.height,
+        stageLeft: stage?.offsetLeft ?? 0,
+        stageTop: stage?.offsetTop ?? 0
+      };
+      setViewport((current) => sameViewport(current, next) ? current : next);
+      if (measuredWidth > 0 && measuredHeight > 0) setViewportMeasured(true);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    if (stageRef.current) observer.observe(stageRef.current);
+    return () => observer.disconnect();
+  }, [activeSlide?.id, presentation.slideSize.height, presentation.slideSize.width, zoom]);
+  useLayoutEffect(() => {
+    const imageCache = imageCacheRef.current;
+    return () => disposeCanvasImageCache(imageCache);
+  }, [activeSlide]);
+  useEffect(() => {
+    const edit = textEditRef.current;
+    const currentEntry = edit ? objectById.get(edit.shape.id) : null;
+    if (edit && activeSlide?.id === edit.slideId && currentEntry?.kind === "shape" && !currentEntry.readOnly && currentEntry.object.geometry !== "line") {
+      const rebound = {
+        ...edit,
+        shape: currentEntry.object
+      };
+      textEditRef.current = rebound;
+      setTextEdit(rebound);
+    } else {
+      textEditRef.current = null;
+      setTextEdit(null);
+    }
+  }, [activeSlide?.id, objectById]);
+  useEffect(() => {
+    dragRef.current = null;
+    setDraftPosition(null);
+    commandScopeRef.current += 1;
+    commandVersionsRef.current.clear();
+    setPendingCommands(0);
+    setCommandFailure(null);
+  }, [activeSlide?.id, revision]);
+  useEffect(() => {
+    const edit = textEditRef.current;
+    if (edit && edit.shape.id !== selectedId) {
+      textEditRef.current = null;
+      setTextEdit(null);
+    }
+    const drag = dragRef.current;
+    if (drag && drag.object.id !== selectedId) {
+      dragRef.current = null;
+      setDraftPosition(null);
+    }
+  }, [selectedId]);
+  useEffect(() => {
+    if (!readOnly) return;
+    dragRef.current = null;
+    setDraftPosition(null);
+    textEditRef.current = null;
+    setTextEdit(null);
+  }, [readOnly]);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      dragRef.current = null;
+      textEditRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    const element = railRef.current;
+    if (!element || activeIndex < 0) return;
+    const top = activeIndex * RAIL_ITEM_HEIGHT;
+    const bottom = top + RAIL_ITEM_HEIGHT;
+    const height = element.clientHeight || rail.height;
+    if (top >= element.scrollTop && bottom <= element.scrollTop + height) return;
+    const nextTop = Math.max(0, top - height / 2);
+    element.scrollTop = nextTop;
+    setRail((current) => ({ ...current, scrollTop: nextTop }));
+  }, [activeIndex, rail.height]);
+  const visibleSlideRegion = useMemo(() => {
+    const slideWidth = presentation.slideSize.width;
+    const slideHeight = presentation.slideSize.height;
+    const stageWidth2 = slideWidth * zoom;
+    const stageHeight2 = slideHeight * zoom;
+    if (stageWidth2 <= viewport.width && stageHeight2 <= viewport.height) {
+      return { left: 0, top: 0, width: slideWidth, height: slideHeight };
+    }
+    const overscan = CANVAS_OVERSCAN_PX / zoom;
+    const visibleLeft = Math.max(0, (viewport.scrollLeft - viewport.stageLeft) / zoom);
+    const visibleTop = Math.max(0, (viewport.scrollTop - viewport.stageTop) / zoom);
+    const left = Math.max(0, visibleLeft - overscan);
+    const top = Math.max(0, visibleTop - overscan);
+    return {
+      left,
+      top,
+      width: Math.max(0, Math.min(slideWidth - left, viewport.width / zoom + overscan * 2)),
+      height: Math.max(0, Math.min(slideHeight - top, viewport.height / zoom + overscan * 2))
+    };
+  }, [presentation.slideSize.height, presentation.slideSize.width, viewport, zoom]);
+  const visibleObjectIndexes = useMemo(() => {
+    if (!activeSlide) return [];
+    if (visibleSlideRegion.left === 0 && visibleSlideRegion.top === 0 && visibleSlideRegion.width === presentation.slideSize.width && visibleSlideRegion.height === presentation.slideSize.height) {
+      return objects.map((_, index) => index);
+    }
+    const visible = querySpatialIndex(spatialIndex, visibleSlideRegion);
+    const selectedIndex = selectedId ? objectIndexById.get(selectedId) ?? -1 : -1;
+    if (selectedIndex >= 0 && !visible.includes(selectedIndex)) visible.push(selectedIndex);
+    const draftIndex = draftPosition ? objectIndexById.get(draftPosition.objectId) ?? -1 : -1;
+    if (draftIndex >= 0 && !visible.includes(draftIndex)) visible.push(draftIndex);
+    return visible.sort((a, b) => a - b);
+  }, [
+    activeSlide,
+    objects,
+    objectIndexById,
+    presentation.slideSize,
+    draftPosition,
+    selectedId,
+    spatialIndex,
+    visibleSlideRegion
+  ]);
+  useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !activeSlide) return;
+    paintSlideCanvas(t, {
+      canvas,
+      slide: activeSlide,
+      slideSize: presentation.slideSize,
+      zoom,
+      objects,
+      objectIndexes: visibleObjectIndexes,
+      renderRegion: visibleSlideRegion,
+      draftPosition,
+      imageCache: imageCacheRef.current,
+      requestRepaint: () => setPaintEpoch((value) => value + 1)
+    });
+  }, [
+    activeSlide,
+    draftPosition,
+    objects,
+    paintEpoch,
+    presentation.slideSize,
+    visibleObjectIndexes,
+    visibleSlideRegion,
+    zoom,
+    t
+  ]);
+  const selectObject = useCallback(
+    (entry) => {
+      textEditRef.current = null;
+      setTextEdit(null);
+      setDraftPosition(null);
+      if (controlledSelectionId === void 0) setLocalSelectionId(entry?.id ?? null);
+      if (activeSlide) onSelectionChange?.(entry?.object ?? null, activeSlide);
+    },
+    [activeSlide, controlledSelectionId, onSelectionChange]
+  );
+  const selectSlide = useCallback(
+    (slide, index) => {
+      if (controlledSlideId === void 0) setLocalSlideId(slide.id);
+      selectObject(null);
+      onSlideChange?.(slide, index);
+    },
+    [controlledSlideId, onSlideChange, selectObject]
+  );
+  const changeZoom = useCallback(
+    (next) => {
+      const clamped = clampZoom(next);
+      setFitMode(false);
+      if (clamped === zoom) return;
+      if (controlledZoom === void 0) setLocalZoom(clamped);
+      onZoomChange?.(clamped);
+    },
+    [controlledZoom, onZoomChange, zoom]
+  );
+  const applyFittedZoom = useCallback(() => {
+    const next = fittedPresentationZoom(viewport, presentation.slideSize);
+    if (next === zoom) return;
+    if (controlledZoom === void 0) setLocalZoom(next);
+    onZoomChange?.(next);
+  }, [controlledZoom, onZoomChange, presentation.slideSize, viewport, zoom]);
+  const fitSlide = useCallback(() => {
+    setFitMode(true);
+    applyFittedZoom();
+  }, [applyFittedZoom]);
+  useLayoutEffect(() => {
+    if (!viewportMeasured || controlledZoom !== void 0) return;
+    const fitted = fittedPresentationZoom(viewport, presentation.slideSize);
+    if (!fitMode && zoom <= fitted) return;
+    if (!fitMode) setFitMode(true);
+    applyFittedZoom();
+  }, [
+    applyFittedZoom,
+    controlledZoom,
+    fitMode,
+    presentation.slideSize,
+    viewport,
+    viewportMeasured,
+    zoom
+  ]);
+  const runCommit = useCallback(
+    (key, command, rollback, retry) => {
+      if (mutationsBlocked || !onCommit) return;
+      const version = (commandVersionsRef.current.get(key) ?? 0) + 1;
+      commandVersionsRef.current.set(key, version);
+      const scope = commandScopeRef.current;
+      setCommandFailure(null);
+      let result;
+      try {
+        result = onCommit(command);
+      } catch (cause) {
+        if (!mountedRef.current || commandScopeRef.current !== scope || commandVersionsRef.current.get(key) !== version) {
+          return;
+        }
+        rollback();
+        const error = asPresentationError(cause);
+        setCommandFailure({ message: error.message, retry });
+        onCommandError?.(error);
+        return;
+      }
+      if (!result || typeof result.then !== "function") return;
+      setPendingCommands((current) => current + 1);
+      void Promise.resolve(result).then(
+        () => {
+          if (!mountedRef.current || commandScopeRef.current !== scope) return;
+          setPendingCommands((current) => Math.max(0, current - 1));
+        },
+        (cause) => {
+          if (!mountedRef.current || commandScopeRef.current !== scope) return;
+          setPendingCommands((current) => Math.max(0, current - 1));
+          if (commandVersionsRef.current.get(key) !== version) return;
+          rollback();
+          const error = asPresentationError(cause);
+          setCommandFailure({ message: error.message, retry });
+          onCommandError?.(error);
+        }
+      );
+    },
+    [mutationsBlocked, onCommandError, onCommit]
+  );
+  const commitPosition = useCallback(
+    (entry, kind, next) => {
+      if (!activeSlide || mutationsBlocked || entry.readOnly) return;
+      const before = copyPosition(entry.object.position);
+      const after = normalizeEditorPosition(next);
+      if (samePosition(before, after)) return;
+      entry.object.position = after;
+      setModelEpoch((value) => value + 1);
+      const command = {
+        kind,
+        slideId: activeSlide.id,
+        objectId: entry.id,
+        before,
+        after
+      };
+      const submit = () => runCommit(
+        `position:${activeSlide.id}:${entry.id}`,
+        command,
+        () => {
+          entry.object.position = before;
+          setModelEpoch((value) => value + 1);
+        },
+        () => {
+          entry.object.position = after;
+          setModelEpoch((value) => value + 1);
+          submit();
+        }
+      );
+      submit();
+    },
+    [activeSlide, mutationsBlocked, runCommit]
+  );
+  const insertSlide = useCallback(() => {
+    if (mutationsBlocked) return;
+    const slideId = randomPresentationId();
+    const index = activeIndex < 0 ? slides.length : activeIndex + 1;
+    const command = { kind: "slide-insert", slideId, index };
+    const submit = () => {
+      pendingSlideIdRef.current = slideId;
+      runCommit(
+        `slide-insert:${slideId}`,
+        command,
+        () => {
+          if (pendingSlideIdRef.current === slideId) pendingSlideIdRef.current = null;
+        },
+        submit
+      );
+    };
+    submit();
+  }, [activeIndex, mutationsBlocked, runCommit, slides.length]);
+  const deleteSlide = useCallback(() => {
+    if (mutationsBlocked || !activeSlide) return;
+    const command = {
+      kind: "slide-delete",
+      slideId: activeSlide.id,
+      index: activeIndex
+    };
+    const submit = () => runCommit(`slide-delete:${activeSlide.id}`, command, () => void 0, submit);
+    submit();
+  }, [activeIndex, activeSlide, mutationsBlocked, runCommit]);
+  const insertTextBox = useCallback(() => {
+    if (mutationsBlocked || !activeSlide) return;
+    const objectId = randomPresentationId();
+    const position = nextTextBoxPosition(objects, presentation.slideSize);
+    const command = {
+      kind: "object-insert",
+      slideId: activeSlide.id,
+      objectId,
+      index: activeSlide.elements.length,
+      position
+    };
+    const submit = () => {
+      pendingObjectIdRef.current = objectId;
+      runCommit(
+        `object-insert:${activeSlide.id}:${objectId}`,
+        command,
+        () => {
+          if (pendingObjectIdRef.current === objectId) pendingObjectIdRef.current = null;
+        },
+        submit
+      );
+    };
+    submit();
+  }, [activeSlide, objects, presentation.slideSize, mutationsBlocked, runCommit]);
+  const deleteObject = useCallback(() => {
+    if (mutationsBlocked || !activeSlide || !selected || selected.readOnly) return;
+    const command = {
+      kind: "object-delete",
+      slideId: activeSlide.id,
+      objectId: selected.id
+    };
+    const submit = () => runCommit(`object-delete:${activeSlide.id}:${selected.id}`, command, () => void 0, submit);
+    submit();
+  }, [activeSlide, mutationsBlocked, runCommit, selected]);
+  const startTextEdit = useCallback(
+    (entry) => {
+      if (mutationsBlocked || !entry || entry.readOnly || entry.kind !== "shape") return;
+      const shape = entry.object;
+      if (shape.geometry === "line") return;
+      const before = shape.text.toString();
+      if (!activeSlide) return;
+      const edit = { slideId: activeSlide.id, shape, before };
+      textEditRef.current = edit;
+      setTextEdit(edit);
+      setTextDraft(before);
+    },
+    [activeSlide, mutationsBlocked]
+  );
+  useEffect(() => {
+    if (!textEdit) return;
+    editorRef.current?.focus();
+    editorRef.current?.select();
+  }, [textEdit]);
+  const finishTextEdit = useCallback(
+    (cancel = false) => {
+      const edit = textEditRef.current;
+      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 || mutationsBlocked || before === textDraft) return;
+      shape.text.set(textDraft);
+      setModelEpoch((value) => value + 1);
+      const command = {
+        kind: "text",
+        slideId,
+        objectId: shape.id,
+        before,
+        after: textDraft
+      };
+      const submit = () => runCommit(
+        `text:${slideId}:${shape.id}`,
+        command,
+        () => {
+          shape.text.set(before);
+          setModelEpoch((value) => value + 1);
+        },
+        () => {
+          shape.text.set(textDraft);
+          setModelEpoch((value) => value + 1);
+          submit();
+        }
+      );
+      submit();
+    },
+    [activeSlide, authoringBlockedReason, mutationsBlocked, runCommit, textDraft]
+  );
+  const cycleObject = useCallback(
+    (direction) => {
+      if (objects.length === 0) return;
+      const current = selected ? objects.indexOf(selected) : direction === 1 ? -1 : 0;
+      const next = (current + direction + objects.length) % objects.length;
+      selectObject(objects[next] ?? null);
+    },
+    [objects, selectObject, selected]
+  );
+  const changeSlideBy = useCallback(
+    (amount) => {
+      if (activeIndex < 0) return;
+      const nextIndex = Math.max(0, Math.min(slides.length - 1, activeIndex + amount));
+      const next = slides[nextIndex];
+      if (next && next !== activeSlide) selectSlide(next, nextIndex);
+    },
+    [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) {
+        if (event.key === "+" || event.key === "=") {
+          event.preventDefault();
+          changeZoom(zoom * 1.15);
+        } else if (event.key === "-") {
+          event.preventDefault();
+          changeZoom(zoom / 1.15);
+        } else if (event.key === "0") {
+          event.preventDefault();
+          fitSlide();
+        }
+        return;
+      }
+      if (event.key === "]") {
+        event.preventDefault();
+        cycleObject(1);
+        return;
+      }
+      if (event.key === "[") {
+        event.preventDefault();
+        cycleObject(-1);
+        return;
+      }
+      if (event.key === "PageDown") {
+        event.preventDefault();
+        changeSlideBy(1);
+        return;
+      }
+      if (event.key === "PageUp") {
+        event.preventDefault();
+        changeSlideBy(-1);
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        selectObject(null);
+        return;
+      }
+      if (event.key === "Enter" || event.key === "F2") {
+        if (selected?.kind === "shape") {
+          event.preventDefault();
+          startTextEdit(selected);
+        }
+        return;
+      }
+      if (!selected || !event.key.startsWith("Arrow")) return;
+      event.preventDefault();
+      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;
+      const before = selected.object.position;
+      commitPosition(
+        selected,
+        event.altKey ? "resize" : "move",
+        event.altKey ? {
+          ...before,
+          width: Math.max(8, before.width + dx),
+          height: Math.max(8, before.height + dy)
+        } : { ...before, left: before.left + dx, top: before.top + dy }
+      );
+    },
+    [
+      changeSlideBy,
+      changeZoom,
+      commitPosition,
+      cycleObject,
+      fitSlide,
+      mutationsBlocked,
+      selectObject,
+      selected,
+      startTextEdit,
+      zoom
+    ]
+  );
+  const pointFromPointer = useCallback(
+    (event) => {
+      const rect = overlayRef.current?.getBoundingClientRect() ?? event.currentTarget.getBoundingClientRect();
+      const width = rect.width || presentation.slideSize.width * zoom;
+      const height = rect.height || presentation.slideSize.height * zoom;
+      return {
+        x: (event.clientX - rect.left) / Math.max(1, width) * presentation.slideSize.width,
+        y: (event.clientY - rect.top) / Math.max(1, height) * presentation.slideSize.height
+      };
+    },
+    [presentation.slideSize.height, presentation.slideSize.width, zoom]
+  );
+  const beginDrag = useCallback(
+    (event, entry, mode) => {
+      event.preventDefault();
+      event.stopPropagation();
+      selectObject(entry);
+      if (mutationsBlocked || entry.readOnly) return;
+      const start = pointFromPointer(event);
+      const before = copyPosition(entry.object.position);
+      dragRef.current = {
+        pointerId: event.pointerId,
+        mode,
+        object: entry.object,
+        rotation: objectRotation(entry),
+        start,
+        before
+      };
+      setDraftPosition({ objectId: entry.id, position: before });
+      overlayRef.current?.setPointerCapture?.(event.pointerId);
+    },
+    [pointFromPointer, mutationsBlocked, selectObject]
+  );
+  const handlePointerDown = useCallback(
+    (event) => {
+      if (event.button !== 0) return;
+      const point = pointFromPointer(event);
+      const hit = hitTest(spatialIndex, point.x, point.y);
+      if (!hit) {
+        selectObject(null);
+        return;
+      }
+      beginDrag(event, hit, "move");
+    },
+    [beginDrag, pointFromPointer, selectObject, spatialIndex]
+  );
+  const handlePointerMove = useCallback(
+    (event) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId || mutationsBlocked) return;
+      const point = pointFromPointer(event);
+      setDraftPosition({ objectId: drag.object.id, position: positionFromDrag(drag, point) });
+    },
+    [mutationsBlocked, pointFromPointer]
+  );
+  const finishDrag = useCallback(
+    (event, cancel = false) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId || !cancel && authoringBlockedReason !== void 0)
+        return;
+      dragRef.current = null;
+      const captureTarget = overlayRef.current;
+      if (captureTarget?.hasPointerCapture?.(event.pointerId)) {
+        captureTarget.releasePointerCapture(event.pointerId);
+      }
+      setDraftPosition(null);
+      if (cancel) return;
+      const entry = objectById.get(drag.object.id);
+      if (!entry) return;
+      const point = pointFromPointer(event);
+      commitPosition(entry, drag.mode, positionFromDrag(drag, point));
+    },
+    [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 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(
+    "div",
+    {
+      className: cn("flex size-full min-w-0 flex-col bg-og-surface-1", className),
+      style: { minHeight: "22rem" },
+      "data-og-presentation-editor": true,
+      "data-og-painted-object-count": visibleObjectIndexes.length,
+      "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",
+          {
+            role: "toolbar",
+            "aria-label": t("artifacts.presentationEditor.presentationControls"),
+            className: "flex h-10 shrink-0 items-center border-b border-og-border bg-og-surface-2",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto px-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t("artifacts.presentationEditor.previousSlide"),
+                    disabled: activeIndex <= 0,
+                    onClick: () => changeSlideBy(-1),
+                    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(ChevronLeftIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: mobileSelectorTriggerRef,
+                    type: "button",
+                    "aria-label": t("artifacts.presentationEditor.chooseSlide"),
+                    "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",
+                  {
+                    type: "button",
+                    "aria-label": t("artifacts.presentationEditor.nextSlide"),
+                    disabled: activeIndex < 0 || activeIndex >= slides.length - 1,
+                    onClick: () => changeSlideBy(1),
+                    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(ChevronRightIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t("artifacts.presentationEditor.addSlide"),
+                    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, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t("artifacts.presentationEditor.deleteSlide"),
+                    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, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "mx-1 h-4 w-px shrink-0 bg-og-border" }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t("artifacts.presentationEditor.zoomOut"),
+                    onClick: () => changeZoom(zoom / 1.15),
+                    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 [&>svg]:size-3.5",
+                    children: /* @__PURE__ */ jsx(MinusIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "min-w-11 shrink-0 text-center text-og-xs tabular-nums text-og-fg-muted", children: [
+                  Math.round(zoom * 100),
+                  "%"
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t("artifacts.presentationEditor.zoomIn"),
+                    onClick: () => changeZoom(zoom * 1.15),
+                    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 [&>svg]:size-3.5",
+                    children: /* @__PURE__ */ jsx(PlusIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t("artifacts.presentationEditor.fitSlide"),
+                    onClick: fitSlide,
+                    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 [&>svg]:size-3.5",
+                    children: /* @__PURE__ */ jsx(ExpandIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "mx-1 h-4 w-px shrink-0 bg-og-border" }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t("artifacts.presentationEditor.addTextBox"),
+                    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, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t("artifacts.presentationEditor.deleteSelectedObject"),
+                    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, {})
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "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 ? t("artifacts.presentationEditor.changeNotSaved") : authoringStatus ? authoringStatus : pendingCommands > 0 ? t("artifacts.presentationEditor.saving") : mutationsBlocked ? t("artifacts.presentationEditor.viewOnly") : selected ? `${objectLabel(t, selected)}${selected.readOnly ? " \xB7 View only" : ""}` : t("artifacts.presentationEditor.selectAnObjectToEdit"),
+                  children: commandFailure ? t("artifacts.presentationEditor.changeNotSaved") : authoringStatus ? authoringStatus : pendingCommands > 0 ? t("artifacts.presentationEditor.saving") : mutationsBlocked ? t("artifacts.presentationEditor.viewOnly") : selected ? `${objectLabel(t, selected)}${selected.readOnly ? " \xB7 View only" : ""}` : t("artifacts.presentationEditor.selectAnObjectToEdit")
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: commandFailure?.message ?? authoringStatus ?? (pendingCommands > 0 ? t("artifacts.presentationEditor.savingPresentationChanges") : "") }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: railRef,
+              role: "listbox",
+              tabIndex: 0,
+              "aria-label": t("artifacts.presentationEditor.slides"),
+              "aria-orientation": "vertical",
+              "aria-activedescendant": activeSlide && activeIndex >= railStart && activeIndex < railEnd ? `${domId}-slide-${safeDomId(activeSlide.id)}` : void 0,
+              className: "relative hidden w-40 shrink-0 overflow-y-auto border-r border-og-border bg-og-surface-2/70 outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent sm:block",
+              "data-og-slide-rail": true,
+              "data-og-window-start": railStart,
+              "data-og-window-end": railEnd,
+              onScroll: (event) => {
+                const scrollTop = event.currentTarget.scrollTop;
+                const height = event.currentTarget.clientHeight;
+                setRail((current) => ({
+                  scrollTop,
+                  height: height || current.height
+                }));
+              },
+              onKeyDown: (event) => {
+                const nextIndex = nextSlideIndexFromKey(event.key, activeIndex, slides.length);
+                if (nextIndex === null) return;
+                event.preventDefault();
+                const next = slides[nextIndex];
+                if (next && next !== activeSlide) selectSlide(next, nextIndex);
+              },
+              children: /* @__PURE__ */ jsx("div", { className: "relative w-full", style: { height: slides.length * RAIL_ITEM_HEIGHT }, children: slides.slice(railStart, railEnd).map((slide, offset) => {
+                const index = railStart + offset;
+                const active = slide === activeSlide;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    id: `${domId}-slide-${safeDomId(slide.id)}`,
+                    type: "button",
+                    role: "option",
+                    tabIndex: -1,
+                    "aria-selected": active,
+                    "aria-label": t("artifacts.presentationEditor.slideIndexValue", {
+                      index: index + 1,
+                      value: slide.title ? `: ${slide.title}` : ""
+                    }),
+                    onClick: () => selectSlide(slide, index),
+                    className: cn(
+                      "absolute left-0 flex w-full items-start gap-2 px-2 py-2 text-left transition-colors",
+                      active ? "bg-og-surface-3 text-og-fg" : "text-og-fg-muted hover:bg-og-surface-3/70"
+                    ),
+                    style: { top: index * RAIL_ITEM_HEIGHT, height: 116 },
+                    "data-og-slide-index": index,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0 pt-0.5 text-right text-og-xs tabular-nums text-og-fg-subtle", children: index + 1 }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "block min-w-0 flex-1 overflow-hidden border bg-white shadow-og-sm",
+                            active ? "border-og-accent" : "border-og-border"
+                          ),
+                          style: { aspectRatio: "16 / 9", borderRadius: 3 },
+                          children: /* @__PURE__ */ jsx(
+                            SlideThumbnail,
+                            {
+                              slide,
+                              width: presentation.slideSize.width,
+                              height: presentation.slideSize.height,
+                              paintRevision: `${String(revision ?? "")}:${modelEpoch}`
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  },
+                  slide.id
+                );
+              }) })
+            }
+          ),
+          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": t("artifacts.presentationEditor.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": t("artifacts.presentationEditor.slideIndexValue", {
+                              index: index + 1,
+                              value: 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 || t("artifacts.presentationEditor.slideIndex", { index: index + 1 }) })
+                            ]
+                          },
+                          slide.id
+                        );
+                      })
+                    }
+                  )
+                }
+              )
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: viewportRef,
+              className: "relative min-h-0 min-w-0 flex-1 overflow-auto bg-og-surface-3/60 p-6",
+              onScroll: (event) => {
+                const element = event.currentTarget;
+                const width = element.clientWidth || viewport.width;
+                const height = element.clientHeight || viewport.height;
+                const next = {
+                  scrollLeft: element.scrollLeft,
+                  scrollTop: element.scrollTop,
+                  width,
+                  height,
+                  stageLeft: stageRef.current?.offsetLeft ?? 0,
+                  stageTop: stageRef.current?.offsetTop ?? 0
+                };
+                setViewport((current) => sameViewport(current, next) ? current : next);
+                if (element.clientWidth > 0 && element.clientHeight > 0) setViewportMeasured(true);
+              },
+              "data-og-presentation-viewport": true,
+              children: [
+                commandFailure ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    role: "alert",
+                    className: "absolute left-2 top-2 z-30 flex w-fit items-center gap-2 rounded-og-sm border border-og-status-failed/30 bg-og-surface-1/95 px-2 py-1 text-og-xs text-og-status-failed shadow-og-sm",
+                    style: { maxWidth: "calc(100% - 1rem)" },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: commandFailure.message }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          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: t("artifacts.presentationEditor.retry")
+                        }
+                      )
+                    ]
+                  }
+                ) : null,
+                activeSlide ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ref: stageRef,
+                    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",
+                        {
+                          ref: canvasRef,
+                          "aria-hidden": true,
+                          className: "absolute inset-0 size-full",
+                          style: { width: stageWidth, height: stageHeight }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          ref: overlayRef,
+                          role: "application",
+                          tabIndex: 0,
+                          "aria-label": t("artifacts.presentationEditor.slideActiveindexEditor", {
+                            activeIndex: activeIndex + 1
+                          }),
+                          "aria-describedby": selected ? `${instructionsId} ${selectionProxyId}` : instructionsId,
+                          "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,
+                          onPointerDown: handlePointerDown,
+                          onPointerMove: handlePointerMove,
+                          onPointerUp: (event) => finishDrag(event),
+                          onPointerCancel: (event) => finishDrag(event, true),
+                          onLostPointerCapture: handleLostPointerCapture,
+                          onDoubleClick: () => startTextEdit(selected),
+                          children: selected && effectiveSelectedPosition ? /* @__PURE__ */ jsxs(
+                            "g",
+                            {
+                              "data-og-presentation-object": selected.id,
+                              transform: selectionTransform(selected, effectiveSelectedPosition),
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  "rect",
+                                  {
+                                    x: effectiveSelectedPosition.left,
+                                    y: effectiveSelectedPosition.top,
+                                    width: effectiveSelectedPosition.width,
+                                    height: effectiveSelectedPosition.height,
+                                    fill: "transparent",
+                                    stroke: "var(--og-color-accent-deep)",
+                                    strokeWidth: 2,
+                                    vectorEffect: "non-scaling-stroke",
+                                    pointerEvents: "none"
+                                  }
+                                ),
+                                !mutationsBlocked && !selected.readOnly ? /* @__PURE__ */ jsx(
+                                  "circle",
+                                  {
+                                    cx: effectiveSelectedPosition.left + effectiveSelectedPosition.width,
+                                    cy: effectiveSelectedPosition.top + effectiveSelectedPosition.height,
+                                    r: 6 / zoom,
+                                    fill: "var(--og-color-accent-deep)",
+                                    stroke: "white",
+                                    strokeWidth: 1.5,
+                                    vectorEffect: "non-scaling-stroke",
+                                    className: "cursor-nwse-resize",
+                                    onPointerDown: (event) => beginDrag(event, selected, "resize")
+                                  }
+                                ) : null
+                              ]
+                            }
+                          ) : null
+                        }
+                      ),
+                      selected ? /* @__PURE__ */ jsx("span", { id: selectionProxyId, role: "status", "aria-live": "polite", className: "sr-only", children: accessibleObjectLabel(t, selected) }) : null,
+                      /* @__PURE__ */ jsx("span", { id: instructionsId, className: "sr-only", children: t("artifacts.presentationEditor.useBracketKeysToSelect") }),
+                      textEdit && selected?.id === textEdit.shape.id && effectiveSelectedPosition ? /* @__PURE__ */ jsx(
+                        "textarea",
+                        {
+                          ref: editorRef,
+                          "aria-label": t("artifacts.presentationEditor.editName", {
+                            name: textEdit.shape.name
+                          }),
+                          value: textDraft,
+                          readOnly: mutationsBlocked,
+                          maxLength: 1e6,
+                          onChange: (event) => {
+                            if (!mutationsBlocked) setTextDraft(event.currentTarget.value);
+                          },
+                          onInput: (event) => {
+                            if (!mutationsBlocked) setTextDraft(event.currentTarget.value);
+                          },
+                          onBlur: () => finishTextEdit(),
+                          onKeyDown: (event) => {
+                            if (event.key === "Escape") {
+                              event.preventDefault();
+                              finishTextEdit(true);
+                            } else if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+                              event.preventDefault();
+                              finishTextEdit();
+                            }
+                          },
+                          className: "absolute resize-none overflow-hidden border-2 border-og-accent p-1 outline-hidden",
+                          style: {
+                            left: effectiveSelectedPosition.left * zoom,
+                            top: effectiveSelectedPosition.top * zoom,
+                            width: effectiveSelectedPosition.width * zoom,
+                            height: effectiveSelectedPosition.height * zoom,
+                            backgroundColor: "#fffffff2",
+                            color: resolveColor(textEdit.shape.text.style.color ?? "slate-950"),
+                            fontFamily: textEdit.shape.text.style.fontFamily ?? "Arial, sans-serif",
+                            fontSize: Math.max(8, (textEdit.shape.text.style.fontSize ?? 18) * zoom),
+                            fontWeight: textEdit.shape.text.style.bold ? 700 : 400,
+                            fontStyle: textEdit.shape.text.style.italic ? "italic" : "normal",
+                            textAlign: textEdit.shape.text.style.alignment ?? "left",
+                            transform: textEdit.shape.rotation === 0 ? void 0 : `rotate(${textEdit.shape.rotation}deg)`,
+                            transformOrigin: "center"
+                          }
+                        }
+                      ) : null
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "grid size-full min-h-72 place-items-center text-og-sm text-og-fg-muted", children: t("artifacts.presentationEditor.thisPresentationHasNoSlides") })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function PresentationArtifactSurface({
+  presentation,
+  title: titleProp,
+  showHeader,
+  subtitle,
+  actions,
+  busy,
+  className,
+  ...editorProps
+}) {
+  const t = useOpenGeniText();
+  const title = titleProp === void 0 ? t("artifacts.presentationEditor.presentation") : titleProp;
+  const count = presentation.slides.items.length;
+  return /* @__PURE__ */ jsx(
+    ArtifactSurface,
+    {
+      modality: "presentation",
+      title,
+      showHeader,
+      subtitle: subtitle ?? t("counts.slides", { count }),
+      actions,
+      busy,
+      className,
+      children: /* @__PURE__ */ jsx(PresentationEditor, { ...editorProps, presentation })
+    }
+  );
+}
+function PresentationProjectionArtifactSurface({
+  projection,
+  title: titleProp,
+  showHeader,
+  subtitle,
+  actions,
+  busy,
+  className,
+  ...editorProps
+}) {
+  const t = useOpenGeniText();
+  const title = titleProp === void 0 ? t("artifacts.presentationEditor.presentation") : titleProp;
+  const count = projection.slides.length;
+  return /* @__PURE__ */ jsx(
+    ArtifactSurface,
+    {
+      modality: "presentation",
+      title,
+      showHeader,
+      subtitle: subtitle ?? t("counts.slides", { count }),
+      actions,
+      busy,
+      className,
+      children: /* @__PURE__ */ jsx(PresentationProjectionEditor, { ...editorProps, projection })
+    }
+  );
+}
+function SlideThumbnail({
+  slide,
+  width,
+  height,
+  paintRevision
+}) {
+  const t = useOpenGeniText();
+  const canvasRef = useRef(null);
+  const imageCacheRef = useRef(/* @__PURE__ */ new Map());
+  const [paintEpoch, setPaintEpoch] = useState(0);
+  useLayoutEffect(() => {
+    const imageCache = imageCacheRef.current;
+    return () => disposeCanvasImageCache(imageCache);
+  }, []);
+  useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) return;
+    const displayWidth = 112;
+    const scale = displayWidth / width;
+    canvas.width = Math.max(1, Math.round(width * scale));
+    canvas.height = Math.max(1, Math.round(height * scale));
+    context.setTransform(scale, 0, 0, scale, 0, 0);
+    context.fillStyle = resolveColor(slide.background.fill);
+    context.fillRect(0, 0, width, height);
+    const objects = listSlideObjects(slide);
+    const usedImageSources = /* @__PURE__ */ new Set();
+    for (const entry of objects) {
+      drawObject(
+        t,
+        context,
+        entry,
+        entry.object.position,
+        imageCacheRef.current,
+        () => setPaintEpoch((value) => value + 1),
+        { left: 0, top: 0, width, height },
+        scale,
+        usedImageSources
+      );
+    }
+    disposeUnusedCanvasImages(imageCacheRef.current, usedImageSources);
+  }, [height, paintEpoch, paintRevision, slide, width, t]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": true, className: "block size-full" });
+}
+function presentationViewFromProjection(projection) {
+  if (projection.slides.length > MAX_PROJECTION_SLIDES) {
+    throw new Error(`Presentation projection exceeds ${MAX_PROJECTION_SLIDES} slides`);
+  }
+  const slideById = /* @__PURE__ */ new Map();
+  const elementById = /* @__PURE__ */ new Map();
+  const slideSize = {
+    width: Math.min(MAX_EDITOR_GEOMETRY, Math.max(1, finite(projection.slideSize.width, 1))),
+    height: Math.min(MAX_EDITOR_GEOMETRY, Math.max(1, finite(projection.slideSize.height, 1)))
+  };
+  const slides = projection.slides.map((slideProjection) => {
+    if (slideProjection.elements.length > MAX_PROJECTION_ELEMENTS_PER_SLIDE) {
+      throw new Error(
+        `Slide ${slideProjection.id} exceeds ${MAX_PROJECTION_ELEMENTS_PER_SLIDE} projected objects`
+      );
+    }
+    slideById.set(slideProjection.id, slideProjection);
+    const elements = slideProjection.elements.map(
+      (element) => presentationElementView(element, elementById, 0)
+    );
+    return {
+      id: slideProjection.id,
+      title: boundedProjectionText(slideProjection.title ?? ""),
+      background: { fill: cloneProjectionFill(slideProjection.background ?? "white") },
+      elements
+    };
+  });
+  return {
+    presentation: {
+      slideSize,
+      slides: { items: slides }
+    },
+    slideById,
+    elementById
+  };
+}
+function presentationElementView(element, byId, depth) {
+  if (depth > MAX_PROJECTION_GROUP_DEPTH) {
+    throw new Error(`Presentation group depth exceeds ${MAX_PROJECTION_GROUP_DEPTH}`);
+  }
+  byId.set(element.id, element);
+  const position = normalizeEditorPosition(element.position);
+  switch (element.kind) {
+    case "shape": {
+      const text = mutableProjectionText(element.text, element.textStyle);
+      return {
+        id: element.id,
+        name: boundedProjectionText(element.name),
+        __projectionReadOnly: element.readOnly ?? false,
+        geometry: element.geometry,
+        position,
+        fill: cloneProjectionFill(
+          element.fill ?? (element.geometry === "textbox" ? "none" : "white")
+        ),
+        line: cloneProjectionLine(element.line),
+        rotation: finite(element.rotation ?? 0, 0),
+        borderRadius: element.borderRadius,
+        text
+      };
+    }
+    case "chart":
+      return {
+        id: element.id,
+        name: boundedProjectionText(element.name),
+        __projectionReadOnly: element.readOnly ?? false,
+        type: element.type,
+        position,
+        title: boundedProjectionText(element.title ?? ""),
+        series: {
+          items: element.series.map((series) => ({
+            name: boundedProjectionText(series.name),
+            categories: (series.categories ?? []).map(boundedProjectionText),
+            values: series.values.map((value) => finite(value, 0)),
+            xValues: (series.xValues ?? []).map((value) => finite(value, 0)),
+            bubbleSizes: (series.bubbleSizes ?? []).map((value) => finite(value, 0)),
+            fill: series.fill ? cloneProjectionFill(series.fill) : void 0,
+            line: cloneProjectionLine(series.line)
+          }))
+        },
+        xAxis: element.xAxis ? { ...element.xAxis } : void 0,
+        yAxis: element.yAxis ? { ...element.yAxis } : void 0,
+        dataLabels: element.dataLabels ? { ...element.dataLabels } : void 0
+      };
+    case "image": {
+      const source = safeProjectionImageSource(element.source);
+      return {
+        id: element.id,
+        name: boundedProjectionText(element.name),
+        __projectionReadOnly: element.readOnly ?? false,
+        position,
+        alt: boundedProjectionText(element.alt ?? ""),
+        prompt: element.prompt ? boundedProjectionText(element.prompt) : void 0,
+        fit: element.fit ?? "contain",
+        crop: element.crop ? { ...element.crop } : void 0,
+        geometry: element.geometry ?? "rect",
+        borderRadius: element.borderRadius,
+        rotation: finite(element.rotation ?? 0, 0),
+        flipHorizontal: element.flipHorizontal ?? false,
+        flipVertical: element.flipVertical ?? false,
+        sourceForSvg: () => source
+      };
+    }
+    case "table": {
+      const columns = element.rows[0]?.length ?? 0;
+      if (columns <= 0 || element.rows.some((row) => row.length !== columns) || element.rows.length * columns > MAX_PROJECTION_TABLE_CELLS) {
+        throw new Error(`Table ${element.id} has an invalid or oversized projected grid`);
+      }
+      return {
+        id: element.id,
+        name: boundedProjectionText(element.name),
+        __projectionReadOnly: element.readOnly ?? false,
+        position,
+        rows: element.rows.map(
+          (row) => row.map(
+            (cell) => cell ? {
+              text: mutableProjectionText(cell.text, cell.textStyle),
+              fill: cloneProjectionFill(cell.fill ?? "white"),
+              rowSpan: boundedSpan(cell.rowSpan),
+              colSpan: boundedSpan(cell.colSpan)
+            } : null
+          )
+        ),
+        columnWidths: [...element.columnWidths ?? []],
+        rowHeights: [...element.rowHeights ?? []],
+        fill: cloneProjectionFill(element.fill ?? "white"),
+        line: cloneProjectionLine(element.line),
+        textStyle: { ...element.textStyle ?? {} }
+      };
+    }
+    case "group":
+      return {
+        id: element.id,
+        name: boundedProjectionText(element.name),
+        __projectionReadOnly: element.readOnly ?? false,
+        position,
+        childOffset: {
+          left: finite(element.childOffset.left, 0),
+          top: finite(element.childOffset.top, 0)
+        },
+        childExtent: {
+          width: Math.max(1, finite(element.childExtent.width, 1)),
+          height: Math.max(1, finite(element.childExtent.height, 1))
+        },
+        rotation: finite(element.rotation ?? 0, 0),
+        flipHorizontal: element.flipHorizontal ?? false,
+        flipVertical: element.flipVertical ?? false,
+        children: element.children.map((child) => presentationElementView(child, byId, depth + 1))
+      };
+    case "connector":
+      return {
+        id: element.id,
+        name: boundedProjectionText(element.name),
+        __projectionReadOnly: element.readOnly ?? false,
+        geometry: "line",
+        position,
+        fill: "none",
+        line: cloneProjectionLine(element.line),
+        rotation: 0,
+        text: mutableProjectionText("", void 0)
+      };
+  }
+}
+function mutableProjectionText(initial, style) {
+  let value = boundedProjectionText(initial);
+  return {
+    style: { ...style ?? {} },
+    set(next) {
+      value = boundedProjectionText(next);
+    },
+    toString() {
+      return value;
+    }
+  };
+}
+function cloneProjectionFill(fill) {
+  return typeof fill === "string" ? fill : { ...fill };
+}
+function cloneProjectionLine(line) {
+  return {
+    style: line?.style ?? "solid",
+    fill: line?.fill ? cloneProjectionFill(line.fill) : "slate-900",
+    width: Math.max(0, finite(line?.width ?? 1, 1))
+  };
+}
+function boundedProjectionText(value) {
+  return value.slice(0, MAX_PROJECTION_TEXT);
+}
+function boundedSpan(value) {
+  return Math.max(1, Math.min(1e4, Math.floor(finite(value ?? 1, 1))));
+}
+function safeProjectionImageSource(source) {
+  if (!source || source.length > 64 * 1024 * 1024) return void 0;
+  if (/^data:image\/(?:png|jpeg|gif|webp);base64,/i.test(source) || source.startsWith("blob:")) {
+    return source;
+  }
+  try {
+    const base = globalThis.location?.href;
+    if (!base) return void 0;
+    const url = new URL(source, base);
+    return url.origin === globalThis.location.origin && /^https?:$/.test(url.protocol) ? url.href : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function asPresentationError(cause) {
+  return cause instanceof Error ? cause : new Error("Presentation change failed");
+}
+function listSlideObjects(slide) {
+  return slide.elements.map(displayObjectFromElement);
+}
+function displayObjectFromElement(object) {
+  const readOnly = object.__projectionReadOnly === true;
+  if ("geometry" in object && "text" in object)
+    return { id: object.id, kind: "shape", object, readOnly };
+  if ("series" in object) return { id: object.id, kind: "chart", object, readOnly };
+  if ("sourceForSvg" in object) return { id: object.id, kind: "image", object, readOnly };
+  if ("rows" in object) return { id: object.id, kind: "table", object, readOnly };
+  return { id: object.id, kind: "group", object, readOnly };
+}
+function buildSpatialIndex(objects, slideSize) {
+  const buckets = /* @__PURE__ */ new Map();
+  const overflowObjects = [];
+  const bounds = objects.map(objectBounds);
+  const maxX = Math.max(0, Math.ceil(slideSize.width / SPATIAL_TILE) - 1);
+  const maxY = Math.max(0, Math.ceil(slideSize.height / SPATIAL_TILE) - 1);
+  for (const [index, entry] of objects.entries()) {
+    const objectBound = bounds[index] ?? entry.object.position;
+    if (!intersects(objectBound, { left: 0, top: 0, ...slideSize })) continue;
+    const left = Math.max(0, Math.floor(objectBound.left / SPATIAL_TILE));
+    const top = Math.max(0, Math.floor(objectBound.top / SPATIAL_TILE));
+    const right = Math.min(maxX, Math.floor((objectBound.left + objectBound.width) / SPATIAL_TILE));
+    const bottom = Math.min(
+      maxY,
+      Math.floor((objectBound.top + objectBound.height) / SPATIAL_TILE)
+    );
+    const bucketCount = (right - left + 1) * (bottom - top + 1);
+    if (!Number.isSafeInteger(bucketCount) || bucketCount > MAX_SPATIAL_BUCKETS_PER_OBJECT) {
+      overflowObjects.push(index);
+      continue;
+    }
+    for (let y = top; y <= bottom; y += 1) {
+      for (let x = left; x <= right; x += 1) {
+        const key = `${x}:${y}`;
+        const bucket = buckets.get(key);
+        if (bucket) bucket.push(index);
+        else buckets.set(key, [index]);
+      }
+    }
+  }
+  return { objects, bounds, buckets, overflowObjects };
+}
+function querySpatialIndex(index, viewport) {
+  const seen = new Set(index.overflowObjects);
+  const left = Math.floor(viewport.left / SPATIAL_TILE);
+  const top = Math.floor(viewport.top / SPATIAL_TILE);
+  const right = Math.floor((viewport.left + viewport.width) / SPATIAL_TILE);
+  const bottom = Math.floor((viewport.top + viewport.height) / SPATIAL_TILE);
+  for (let y = top; y <= bottom; y += 1) {
+    for (let x = left; x <= right; x += 1) {
+      for (const objectIndex of index.buckets.get(`${x}:${y}`) ?? []) {
+        if (intersects(index.bounds[objectIndex], viewport)) seen.add(objectIndex);
+      }
+    }
+  }
+  return [...seen].filter((objectIndex) => {
+    return !!index.objects[objectIndex] && intersects(index.bounds[objectIndex], viewport);
+  }).sort((a, b) => a - b);
+}
+function paintSlideCanvas(t, options) {
+  const { canvas, slide, slideSize, zoom } = options;
+  const context = canvas.getContext("2d");
+  if (!context) return;
+  const cssWidth = slideSize.width * zoom;
+  const cssHeight = slideSize.height * zoom;
+  const ratio = Math.max(
+    1e-4,
+    Math.min(
+      2,
+      Math.max(1, globalThis.devicePixelRatio || 1),
+      MAX_CANVAS_EDGE / Math.max(1, cssWidth),
+      MAX_CANVAS_EDGE / Math.max(1, cssHeight),
+      Math.sqrt(MAX_CANVAS_PIXELS / Math.max(1, cssWidth * cssHeight))
+    )
+  );
+  const pixelWidth = Math.max(1, Math.round(slideSize.width * zoom * ratio));
+  const pixelHeight = Math.max(1, Math.round(slideSize.height * zoom * ratio));
+  if (canvas.width !== pixelWidth) canvas.width = pixelWidth;
+  if (canvas.height !== pixelHeight) canvas.height = pixelHeight;
+  context.setTransform(zoom * ratio, 0, 0, zoom * ratio, 0, 0);
+  context.clearRect(0, 0, slideSize.width, slideSize.height);
+  context.fillStyle = resolveColor(slide.background.fill);
+  context.fillRect(0, 0, slideSize.width, slideSize.height);
+  const usedImageSources = /* @__PURE__ */ new Set();
+  for (const index of options.objectIndexes) {
+    const entry = options.objects[index];
+    if (!entry) continue;
+    const position = entry.id === options.draftPosition?.objectId ? options.draftPosition.position : entry.object.position;
+    drawObject(
+      t,
+      context,
+      entry,
+      position,
+      options.imageCache,
+      options.requestRepaint,
+      options.renderRegion,
+      zoom * ratio,
+      usedImageSources
+    );
+  }
+  disposeUnusedCanvasImages(options.imageCache, usedImageSources);
+}
+function drawObject(t, context, entry, position, imageCache, requestRepaint, renderRegion, pixelScale, usedImageSources) {
+  switch (entry.kind) {
+    case "shape":
+      drawShape(t, context, entry.object, position);
+      return;
+    case "chart":
+      drawChart(t, context, entry.object, position);
+      return;
+    case "image": {
+      const source = drawImage(
+        t,
+        context,
+        entry.object,
+        position,
+        imageCache,
+        requestRepaint
+      );
+      if (source) usedImageSources.add(source);
+      return;
+    }
+    case "table":
+      drawTable(t, context, entry.object, position, renderRegion, pixelScale);
+      return;
+    case "group":
+      drawGroup(
+        t,
+        context,
+        entry.object,
+        position,
+        imageCache,
+        requestRepaint,
+        renderRegion,
+        pixelScale,
+        usedImageSources
+      );
+  }
+}
+function drawTable(t, context, table, position, renderRegion, pixelScale) {
+  const rowCount = table.rows.length;
+  const columnCount = table.rows[0]?.length ?? 0;
+  if (rowCount === 0 || columnCount === 0 || !intersects(position, renderRegion)) return;
+  const columnWidths = normalizeTableTracks(table.columnWidths, columnCount, position.width);
+  const rowHeights = normalizeTableTracks(table.rowHeights, rowCount, position.height);
+  const columnOffsets = cumulativeOffsets(columnWidths, position.left);
+  const rowOffsets = cumulativeOffsets(rowHeights, position.top);
+  const columnStart = visibleTrackStart(columnOffsets, renderRegion.left);
+  const columnEnd = visibleTrackEnd(columnOffsets, renderRegion.left + renderRegion.width);
+  const rowStart = visibleTrackStart(rowOffsets, renderRegion.top);
+  const rowEnd = visibleTrackEnd(rowOffsets, renderRegion.top + renderRegion.height);
+  const visibleCellCount = (rowEnd - rowStart) * (columnEnd - columnStart);
+  if (visibleCellCount > MAX_TABLE_CELLS_PER_PAINT) {
+    drawTableOverview(context, table, position, columnOffsets, rowOffsets, {
+      columnStart,
+      columnEnd,
+      rowStart,
+      rowEnd
+    });
+    return;
+  }
+  context.save();
+  for (let rowIndex = rowStart; rowIndex < rowEnd; rowIndex += 1) {
+    const row = table.rows[rowIndex];
+    if (!row) continue;
+    for (let columnIndex = columnStart; columnIndex < columnEnd; columnIndex += 1) {
+      const cell = row[columnIndex];
+      if (!cell) continue;
+      const rightIndex = Math.min(columnCount, columnIndex + cell.colSpan);
+      const bottomIndex = Math.min(rowCount, rowIndex + cell.rowSpan);
+      const left = columnOffsets[columnIndex] ?? position.left;
+      const top = rowOffsets[rowIndex] ?? position.top;
+      const right = columnOffsets[rightIndex] ?? position.left + position.width;
+      const bottom = rowOffsets[bottomIndex] ?? position.top + position.height;
+      const width = Math.max(1, right - left);
+      const height = Math.max(1, bottom - top);
+      context.beginPath();
+      context.rect(left, top, width, height);
+      applyFillAndLine(context, cell.fill, table.line, false);
+      if (width * pixelScale >= 8 && height * pixelScale >= 8) {
+        drawText(t, context, cell.text.toString(), cell.text.style, {
+          left: left + 4,
+          top: top + 2,
+          width: Math.max(1, width - 8),
+          height: Math.max(1, height - 4)
+        });
+      }
+    }
+  }
+  context.restore();
+}
+function visibleTrackStart(offsets, value) {
+  return Math.max(0, Math.min(offsets.length - 2, lowerBound(offsets, value) - 1));
+}
+function visibleTrackEnd(offsets, value) {
+  return Math.max(0, Math.min(offsets.length - 1, lowerBound(offsets, value) + 1));
+}
+function lowerBound(values, target) {
+  let low = 0;
+  let high = values.length;
+  while (low < high) {
+    const middle = low + Math.floor((high - low) / 2);
+    if ((values[middle] ?? Number.POSITIVE_INFINITY) < target) low = middle + 1;
+    else high = middle;
+  }
+  return low;
+}
+function drawTableOverview(context, table, position, columnOffsets, rowOffsets, visible) {
+  context.save();
+  context.beginPath();
+  context.rect(position.left, position.top, position.width, position.height);
+  applyFillAndLine(context, table.fill, table.line, false);
+  const columnStep = Math.max(1, Math.ceil((visible.columnEnd - visible.columnStart) / 96));
+  const rowStep = Math.max(1, Math.ceil((visible.rowEnd - visible.rowStart) / 96));
+  context.beginPath();
+  for (let index = visible.columnStart; index <= visible.columnEnd; index += columnStep) {
+    const x = columnOffsets[index];
+    if (x === void 0) continue;
+    context.moveTo(x, position.top);
+    context.lineTo(x, position.top + position.height);
+  }
+  for (let index = visible.rowStart; index <= visible.rowEnd; index += rowStep) {
+    const y = rowOffsets[index];
+    if (y === void 0) continue;
+    context.moveTo(position.left, y);
+    context.lineTo(position.left + position.width, y);
+  }
+  applyFillAndLine(context, "none", table.line, true);
+  context.restore();
+}
+function normalizeTableTracks(values, count, total) {
+  if (values.length !== count) return Array.from({ length: count }, () => total / count);
+  const sum = values.reduce((value, next) => value + next, 0);
+  if (!Number.isFinite(sum) || sum <= 0) {
+    return Array.from({ length: count }, () => total / count);
+  }
+  return values.map((value) => value / sum * total);
+}
+function cumulativeOffsets(tracks, start) {
+  const offsets = [start];
+  for (const track of tracks) offsets.push((offsets.at(-1) ?? start) + track);
+  return offsets;
+}
+function drawGroup(t, context, group, position, imageCache, requestRepaint, renderRegion, pixelScale, usedImageSources) {
+  const scaleX = position.width / group.childExtent.width;
+  const scaleY = position.height / group.childExtent.height;
+  const translatedX = position.left - group.childOffset.left * scaleX;
+  const translatedY = position.top - group.childOffset.top * scaleY;
+  const centerX = position.left + position.width / 2;
+  const centerY = position.top + position.height / 2;
+  context.save();
+  context.translate(centerX, centerY);
+  context.rotate(group.rotation * Math.PI / 180);
+  context.scale(group.flipHorizontal ? -1 : 1, group.flipVertical ? -1 : 1);
+  context.translate(-centerX, -centerY);
+  context.translate(translatedX, translatedY);
+  context.scale(scaleX, scaleY);
+  const childRenderRegion = inverseGroupRegion(group, position, renderRegion);
+  for (const child of group.children) {
+    const entry = displayObjectFromElement(child);
+    if (!intersects(objectBounds(entry), childRenderRegion)) continue;
+    drawObject(
+      t,
+      context,
+      entry,
+      child.position,
+      imageCache,
+      requestRepaint,
+      childRenderRegion,
+      pixelScale * Math.min(Math.abs(scaleX), Math.abs(scaleY)),
+      usedImageSources
+    );
+  }
+  context.restore();
+}
+function inverseGroupRegion(group, position, region) {
+  const scaleX = position.width / group.childExtent.width;
+  const scaleY = position.height / group.childExtent.height;
+  const translatedX = position.left - group.childOffset.left * scaleX;
+  const translatedY = position.top - group.childOffset.top * scaleY;
+  const centerX = position.left + position.width / 2;
+  const centerY = position.top + position.height / 2;
+  const radians = -group.rotation * Math.PI / 180;
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  const points = [
+    [region.left, region.top],
+    [region.left + region.width, region.top],
+    [region.left, region.top + region.height],
+    [region.left + region.width, region.top + region.height]
+  ].map(([x = 0, y = 0]) => {
+    const dx = x - centerX;
+    const dy = y - centerY;
+    const rotatedX = dx * cos - dy * sin;
+    const rotatedY = dx * sin + dy * cos;
+    const unflippedX = rotatedX * (group.flipHorizontal ? -1 : 1) + centerX;
+    const unflippedY = rotatedY * (group.flipVertical ? -1 : 1) + centerY;
+    return {
+      x: (unflippedX - translatedX) / scaleX,
+      y: (unflippedY - translatedY) / scaleY
+    };
+  });
+  const xs = points.map((point) => point.x);
+  const ys = points.map((point) => point.y);
+  const left = Math.min(...xs);
+  const right = Math.max(...xs);
+  const top = Math.min(...ys);
+  const bottom = Math.max(...ys);
+  return { left, top, width: right - left, height: bottom - top };
+}
+function drawShape(t, context, shape, position) {
+  context.save();
+  context.translate(position.left + position.width / 2, position.top + position.height / 2);
+  context.rotate(shape.rotation * Math.PI / 180);
+  const x = -position.width / 2;
+  const y = -position.height / 2;
+  context.beginPath();
+  switch (shape.geometry) {
+    case "ellipse":
+      context.ellipse(0, 0, position.width / 2, position.height / 2, 0, 0, Math.PI * 2);
+      break;
+    case "triangle":
+      context.moveTo(0, y);
+      context.lineTo(x + position.width, y + position.height);
+      context.lineTo(x, y + position.height);
+      context.closePath();
+      break;
+    case "rightArrow": {
+      const body = position.width * 0.65;
+      context.moveTo(x, y + position.height * 0.25);
+      context.lineTo(x + body, y + position.height * 0.25);
+      context.lineTo(x + body, y);
+      context.lineTo(x + position.width, 0);
+      context.lineTo(x + body, y + position.height);
+      context.lineTo(x + body, y + position.height * 0.75);
+      context.lineTo(x, y + position.height * 0.75);
+      context.closePath();
+      break;
+    }
+    case "line":
+      context.moveTo(x, y);
+      context.lineTo(x + position.width, y + position.height);
+      break;
+    case "roundRect":
+      roundedRect(
+        context,
+        x,
+        y,
+        position.width,
+        position.height,
+        resolveRadius(shape.borderRadius, position)
+      );
+      break;
+    default:
+      context.rect(x, y, position.width, position.height);
+  }
+  applyFillAndLine(context, shape.fill, shape.line, shape.geometry === "line");
+  const text = shape.text.toString();
+  if (text)
+    drawText(t, context, text, shape.text.style, {
+      left: x,
+      top: y,
+      width: position.width,
+      height: position.height
+    });
+  context.restore();
+}
+function drawChart(t, context, chart, position) {
+  context.save();
+  context.fillStyle = "#ffffff";
+  context.strokeStyle = "#e2e8f0";
+  context.lineWidth = 1;
+  context.fillRect(position.left, position.top, position.width, position.height);
+  context.strokeRect(position.left, position.top, position.width, position.height);
+  if (chart.title) {
+    drawText(
+      t,
+      context,
+      chart.title,
+      { fontSize: 18, bold: true, alignment: "center" },
+      {
+        left: position.left + 16,
+        top: position.top + 8,
+        width: Math.max(1, position.width - 32),
+        height: 28
+      }
+    );
+  }
+  const plot = {
+    left: position.left + 36,
+    top: position.top + (chart.title ? 46 : 20),
+    width: Math.max(1, position.width - 56),
+    height: Math.max(1, position.height - (chart.title ? 72 : 48))
+  };
+  const values = chart.series.items.flatMap((series) => series.values).filter(Number.isFinite);
+  const minValue = Math.min(0, chart.yAxis?.min ?? Math.min(...values, 0));
+  const maxValue = Math.max(1, chart.yAxis?.max ?? Math.max(...values, 1));
+  const valueRange = Math.max(Number.EPSILON, maxValue - minValue);
+  const yForValue = (value) => plot.top + plot.height - (value - minValue) / valueRange * plot.height;
+  const palette = ["#2563eb", "#0f766e", "#f59e0b", "#dc2626", "#7c3aed"];
+  if (chart.type === "pie" || chart.type === "doughnut") {
+    const series = chart.series.items[0];
+    const slices = series?.values.map((value) => Math.max(0, value)) ?? [];
+    const total = slices.reduce((sum, value) => sum + value, 0);
+    let angle = -Math.PI / 2;
+    const radius = Math.min(plot.width, plot.height) * 0.42;
+    const cx = plot.left + plot.width / 2;
+    const cy = plot.top + plot.height / 2;
+    slices.forEach((value, index) => {
+      const next = angle + (total > 0 ? value / total * Math.PI * 2 : 0);
+      context.beginPath();
+      context.moveTo(cx, cy);
+      context.arc(cx, cy, radius, angle, next);
+      context.closePath();
+      context.fillStyle = palette[index % palette.length] ?? "#2563eb";
+      context.fill();
+      angle = next;
+    });
+    if (chart.type === "doughnut") {
+      context.beginPath();
+      context.arc(cx, cy, radius * 0.55, 0, Math.PI * 2);
+      context.fillStyle = "#ffffff";
+      context.fill();
+    }
+  } else if (chart.type === "line" || chart.type === "area") {
+    drawChartAxes(context, chart, plot, yForValue(0));
+    chart.series.items.forEach((series, seriesIndex) => {
+      if (series.values.length === 0) return;
+      const points = series.values.map((value, index) => ({
+        x: plot.left + index / Math.max(1, series.values.length - 1) * plot.width,
+        y: yForValue(value)
+      }));
+      const color = resolveColor(
+        series.line?.fill ?? series.fill ?? palette[seriesIndex % palette.length] ?? "#2563eb"
+      );
+      if (chart.type === "area") {
+        context.beginPath();
+        context.moveTo(points[0]?.x ?? plot.left, yForValue(0));
+        for (const point of points) context.lineTo(point.x, point.y);
+        context.lineTo(points.at(-1)?.x ?? plot.left + plot.width, yForValue(0));
+        context.closePath();
+        context.globalAlpha = 0.22;
+        context.fillStyle = color;
+        context.fill();
+        context.globalAlpha = 1;
+      }
+      context.beginPath();
+      points.forEach((point, index) => {
+        if (index === 0) context.moveTo(point.x, point.y);
+        else context.lineTo(point.x, point.y);
+      });
+      context.strokeStyle = color;
+      context.lineWidth = series.line?.width ?? 3;
+      context.stroke();
+      for (const point of points) {
+        context.beginPath();
+        context.arc(point.x, point.y, 3, 0, Math.PI * 2);
+        context.fillStyle = color;
+        context.fill();
+      }
+    });
+  } else if (chart.type === "scatter" || chart.type === "bubble") {
+    drawChartAxes(context, chart, plot, yForValue(0));
+    const xValues = chart.series.items.flatMap(
+      (series) => series.values.map((_value, index) => series.xValues[index] ?? index)
+    );
+    const minX = chart.xAxis?.min ?? Math.min(...xValues, 0);
+    const maxX = chart.xAxis?.max ?? Math.max(...xValues, 1);
+    const xRange = Math.max(Number.EPSILON, maxX - minX);
+    chart.series.items.forEach((series, seriesIndex) => {
+      context.fillStyle = resolveColor(
+        series.fill ?? palette[seriesIndex % palette.length] ?? "#2563eb"
+      );
+      series.values.forEach((value, index) => {
+        const xValue = series.xValues[index] ?? index;
+        const x = plot.left + (xValue - minX) / xRange * plot.width;
+        const radius = chart.type === "bubble" ? Math.max(3, Math.sqrt(Math.max(0, series.bubbleSizes[index] ?? 9))) : 4;
+        context.beginPath();
+        context.arc(x, yForValue(value), radius, 0, Math.PI * 2);
+        context.fill();
+      });
+    });
+  } else if (chart.type === "radar") {
+    drawRadarChart(context, chart, plot, palette);
+  } else {
+    drawChartAxes(context, chart, plot, yForValue(0));
+    const count = Math.max(1, ...chart.series.items.map((series) => series.values.length));
+    const groupWidth = plot.width / count;
+    const barWidth = groupWidth * 0.72 / Math.max(1, chart.series.items.length);
+    const baseline = yForValue(0);
+    chart.series.items.forEach((series, seriesIndex) => {
+      series.values.forEach((value, valueIndex) => {
+        const valueY = yForValue(value);
+        const height = Math.abs(baseline - valueY);
+        context.fillStyle = resolveColor(
+          series.fill ?? palette[seriesIndex % palette.length] ?? "#2563eb"
+        );
+        const left = plot.left + valueIndex * groupWidth + groupWidth * 0.14 + seriesIndex * barWidth;
+        context.fillRect(left, Math.min(baseline, valueY), Math.max(1, barWidth), height);
+        if (chart.dataLabels?.showValue) {
+          drawText(
+            t,
+            context,
+            String(value),
+            { fontSize: 11, alignment: "center" },
+            {
+              left,
+              top: Math.max(plot.top, Math.min(baseline, valueY) - 14),
+              width: Math.max(1, barWidth),
+              height: 14
+            }
+          );
+        }
+      });
+    });
+  }
+  context.restore();
+}
+function drawChartAxes(context, chart, plot, baseline) {
+  context.save();
+  context.strokeStyle = "#94a3b8";
+  context.lineWidth = 1;
+  if (chart.xAxis?.visible !== false) {
+    context.beginPath();
+    context.moveTo(plot.left, Math.max(plot.top, Math.min(plot.top + plot.height, baseline)));
+    context.lineTo(
+      plot.left + plot.width,
+      Math.max(plot.top, Math.min(plot.top + plot.height, baseline))
+    );
+    context.stroke();
+  }
+  if (chart.yAxis?.visible !== false) {
+    context.beginPath();
+    context.moveTo(plot.left, plot.top);
+    context.lineTo(plot.left, plot.top + plot.height);
+    context.stroke();
+  }
+  context.restore();
+}
+function drawRadarChart(context, chart, plot, palette) {
+  const count = Math.max(3, ...chart.series.items.map((series) => series.values.length));
+  const maximum = Math.max(
+    1,
+    ...chart.series.items.flatMap((series) => series.values.map((value) => Math.max(0, value)))
+  );
+  const centerX = plot.left + plot.width / 2;
+  const centerY = plot.top + plot.height / 2;
+  const radius = Math.min(plot.width, plot.height) * 0.42;
+  const point = (index, value) => {
+    const angle = -Math.PI / 2 + index / count * Math.PI * 2;
+    const scaled = Math.max(0, value) / maximum * radius;
+    return { x: centerX + Math.cos(angle) * scaled, y: centerY + Math.sin(angle) * scaled };
+  };
+  context.save();
+  context.strokeStyle = "#cbd5e1";
+  for (let ring = 1; ring <= 4; ring += 1) {
+    context.beginPath();
+    for (let index = 0; index < count; index += 1) {
+      const next = point(index, maximum * ring / 4);
+      if (index === 0) context.moveTo(next.x, next.y);
+      else context.lineTo(next.x, next.y);
+    }
+    context.closePath();
+    context.stroke();
+  }
+  chart.series.items.forEach((series, seriesIndex) => {
+    const color = resolveColor(series.fill ?? palette[seriesIndex % palette.length] ?? "#2563eb");
+    context.beginPath();
+    for (let index = 0; index < count; index += 1) {
+      const next = point(index, series.values[index] ?? 0);
+      if (index === 0) context.moveTo(next.x, next.y);
+      else context.lineTo(next.x, next.y);
+    }
+    context.closePath();
+    context.globalAlpha = 0.18;
+    context.fillStyle = color;
+    context.fill();
+    context.globalAlpha = 1;
+    context.strokeStyle = color;
+    context.lineWidth = series.line?.width ?? 2;
+    context.stroke();
+  });
+  context.restore();
+}
+function drawImage(t, context, image, position, imageCache, requestRepaint) {
+  context.save();
+  applyImageTransform(context, image, position);
+  imageClipPath(context, image, position);
+  context.clip();
+  context.fillStyle = "#f1f5f9";
+  context.fillRect(position.left, position.top, position.width, position.height);
+  const source = imageSourceForCanvas(image);
+  if (source && typeof Image !== "undefined") {
+    let cached = imageCache.get(source);
+    if (!cached) {
+      const element = new Image();
+      cached = { image: element, ready: false };
+      imageCache.set(source, cached);
+      element.onload = () => {
+        const current = imageCache.get(source);
+        if (!current || current.image !== element) return;
+        current.ready = true;
+        requestRepaint();
+      };
+      element.onerror = () => {
+        const current = imageCache.get(source);
+        if (current?.image === element) current.ready = false;
+      };
+      element.src = source;
+    }
+    if (cached.ready && cached.image.naturalWidth > 0 && cached.image.naturalHeight > 0) {
+      drawFittedImage(context, cached.image, image, position);
+      context.restore();
+      return source;
+    }
+  }
+  context.strokeStyle = "#94a3b8";
+  context.lineWidth = 1;
+  context.setLineDash([8, 6]);
+  imageClipPath(context, image, position);
+  context.stroke();
+  context.setLineDash([]);
+  drawText(
+    t,
+    context,
+    image.alt || image.prompt || t("artifacts.presentationEditor.image"),
+    { fontSize: 14, color: "slate-600" },
+    {
+      left: position.left + 12,
+      top: position.top + 12,
+      width: Math.max(1, position.width - 24),
+      height: Math.max(1, position.height - 24)
+    }
+  );
+  context.restore();
+  return source;
+}
+function imageSourceForCanvas(image) {
+  try {
+    return image.sourceForSvg();
+  } catch {
+    return void 0;
+  }
+}
+function applyImageTransform(context, image, position) {
+  const centerX = position.left + position.width / 2;
+  const centerY = position.top + position.height / 2;
+  context.translate(centerX, centerY);
+  context.rotate(image.rotation * Math.PI / 180);
+  context.scale(image.flipHorizontal ? -1 : 1, image.flipVertical ? -1 : 1);
+  context.translate(-centerX, -centerY);
+}
+function imageClipPath(context, image, position) {
+  context.beginPath();
+  if (image.geometry === "ellipse") {
+    context.ellipse(
+      position.left + position.width / 2,
+      position.top + position.height / 2,
+      position.width / 2,
+      position.height / 2,
+      0,
+      0,
+      Math.PI * 2
+    );
+  } else if (image.geometry === "roundRect") {
+    roundedRect(
+      context,
+      position.left,
+      position.top,
+      position.width,
+      position.height,
+      resolveRadius(image.borderRadius, position)
+    );
+  } else {
+    context.rect(position.left, position.top, position.width, position.height);
+  }
+  context.closePath();
+}
+function drawFittedImage(context, source, image, position) {
+  const crop = image.crop ?? { left: 0, top: 0, right: 0, bottom: 0 };
+  const sourceX = source.naturalWidth * crop.left;
+  const sourceY = source.naturalHeight * crop.top;
+  const sourceWidth = source.naturalWidth * (1 - crop.left - crop.right);
+  const sourceHeight = source.naturalHeight * (1 - crop.top - crop.bottom);
+  if (sourceWidth <= 0 || sourceHeight <= 0) return;
+  const scale = image.fit === "cover" ? Math.max(position.width / sourceWidth, position.height / sourceHeight) : Math.min(position.width / sourceWidth, position.height / sourceHeight);
+  const width = sourceWidth * scale;
+  const height = sourceHeight * scale;
+  const left = position.left + (position.width - width) / 2;
+  const top = position.top + (position.height - height) / 2;
+  context.drawImage(source, sourceX, sourceY, sourceWidth, sourceHeight, left, top, width, height);
+}
+function disposeCanvasImageCache(cache) {
+  for (const entry of cache.values()) disposeCanvasImageEntry(entry);
+  cache.clear();
+}
+function disposeUnusedCanvasImages(cache, usedSources) {
+  for (const [source, entry] of cache) {
+    if (usedSources.has(source)) continue;
+    disposeCanvasImageEntry(entry);
+    cache.delete(source);
+  }
+}
+function disposeCanvasImageEntry(entry) {
+  entry.image.onload = null;
+  entry.image.onerror = null;
+  entry.image.removeAttribute("src");
+}
+function drawText(t, context, text, style, position) {
+  const fontSize = style.fontSize ?? 18;
+  const fontStyle = style.italic ? "italic " : "";
+  const fontWeight = style.bold ? "700 " : "400 ";
+  context.font = `${fontStyle}${fontWeight}${fontSize}px ${style.fontFamily ?? t("artifacts.presentationEditor.arialSansSerif")}`;
+  context.fillStyle = resolveColor(style.color ?? "slate-950");
+  context.textAlign = style.alignment === "center" ? "center" : style.alignment === "right" ? "right" : "left";
+  context.textBaseline = "top";
+  const x = style.alignment === "center" ? position.left + position.width / 2 : style.alignment === "right" ? position.left + position.width : position.left;
+  const lineHeight = fontSize * 1.2;
+  const lines = wrapCanvasText(context, text, position.width);
+  const totalHeight = lines.length * lineHeight;
+  const top = style.verticalAlignment === "middle" ? position.top + (position.height - totalHeight) / 2 : style.verticalAlignment === "bottom" ? position.top + position.height - totalHeight : position.top;
+  context.save();
+  context.beginPath();
+  context.rect(position.left, position.top, position.width, position.height);
+  context.clip();
+  lines.forEach((line, index) => context.fillText(line, x, top + index * lineHeight));
+  context.restore();
+}
+function wrapCanvasText(context, text, width) {
+  const result = [];
+  for (const paragraph of text.split("\n")) {
+    const words = paragraph.split(/\s+/).filter(Boolean);
+    if (words.length === 0) {
+      result.push("");
+      continue;
+    }
+    let line = words[0] ?? "";
+    for (let index = 1; index < words.length; index += 1) {
+      const word = words[index] ?? "";
+      const candidate = `${line} ${word}`;
+      if (context.measureText(candidate).width <= width || line.length === 0) line = candidate;
+      else {
+        result.push(line);
+        line = word;
+      }
+    }
+    result.push(line);
+  }
+  return result;
+}
+function applyFillAndLine(context, fill, line, lineOnly) {
+  if (!lineOnly && resolveColor(fill) !== "transparent") {
+    context.fillStyle = resolveColor(fill);
+    context.fill();
+  }
+  if (line.style !== "none" && resolveColor(line.fill ?? "slate-900") !== "transparent" && (line.width ?? 1) > 0) {
+    context.strokeStyle = resolveColor(line.fill ?? "slate-900");
+    context.lineWidth = line.width ?? 1;
+    context.setLineDash(line.style === "dash" ? [8, 5] : line.style === "dot" ? [2, 4] : []);
+    context.stroke();
+    context.setLineDash([]);
+  }
+}
+function roundedRect(context, x, y, width, height, radius) {
+  const r = Math.min(Math.max(0, radius), width / 2, height / 2);
+  context.moveTo(x + r, y);
+  context.lineTo(x + width - r, y);
+  context.quadraticCurveTo(x + width, y, x + width, y + r);
+  context.lineTo(x + width, y + height - r);
+  context.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+  context.lineTo(x + r, y + height);
+  context.quadraticCurveTo(x, y + height, x, y + height - r);
+  context.lineTo(x, y + r);
+  context.quadraticCurveTo(x, y, x + r, y);
+  context.closePath();
+}
+function hitTest(index, x, y) {
+  const candidates = querySpatialIndex(index, { left: x, top: y, width: 0, height: 0 });
+  for (let candidateIndex = candidates.length - 1; candidateIndex >= 0; candidateIndex -= 1) {
+    const entry = index.objects[candidates[candidateIndex] ?? -1];
+    if (entry && objectContainsPoint(entry, x, y)) return entry;
+  }
+  return null;
+}
+function objectContainsPoint(entry, x, y) {
+  const position = entry.object.position;
+  const rotation = objectRotation(entry);
+  if (rotation === 0) {
+    return x >= position.left && x <= position.left + position.width && y >= position.top && y <= position.top + position.height;
+  }
+  const centerX = position.left + position.width / 2;
+  const centerY = position.top + position.height / 2;
+  const radians = -rotation * Math.PI / 180;
+  const dx = x - centerX;
+  const dy = y - centerY;
+  const localX = dx * Math.cos(radians) - dy * Math.sin(radians) + centerX;
+  const localY = dx * Math.sin(radians) + dy * Math.cos(radians) + centerY;
+  return localX >= position.left && localX <= position.left + position.width && localY >= position.top && localY <= position.top + position.height;
+}
+function objectBounds(entry) {
+  const position = entry.object.position;
+  const rotation = objectRotation(entry);
+  if (rotation === 0) return position;
+  const radians = rotation * Math.PI / 180;
+  const width = Math.abs(position.width * Math.cos(radians)) + Math.abs(position.height * Math.sin(radians));
+  const height = Math.abs(position.width * Math.sin(radians)) + Math.abs(position.height * Math.cos(radians));
+  return {
+    left: position.left + (position.width - width) / 2,
+    top: position.top + (position.height - height) / 2,
+    width,
+    height
+  };
+}
+function objectRotation(entry) {
+  if (entry.kind === "shape") return finite(entry.object.rotation, 0);
+  if (entry.kind === "image") return finite(entry.object.rotation, 0);
+  if (entry.kind === "group") return finite(entry.object.rotation, 0);
+  return 0;
+}
+function objectLabel(t, entry) {
+  const object = entry.object;
+  if (entry.kind === "shape") {
+    const shape = object;
+    return shape.text.toString().trim() || shape.name || t("artifacts.presentationEditor.shape");
+  }
+  if (entry.kind === "chart")
+    return object.title || object.name || t("artifacts.presentationEditor.chart");
+  if (entry.kind === "image")
+    return object.alt || object.name || t("artifacts.presentationEditor.image");
+  if (entry.kind === "table") return object.name || t("artifacts.presentationEditor.table");
+  return object.name || t("artifacts.presentationEditor.group");
+}
+function accessibleObjectLabel(t, entry) {
+  const position = entry.object.position;
+  return `${objectLabel(t, entry)}. Position ${Math.round(position.left)}, ${Math.round(position.top)}. Size ${Math.round(position.width)} by ${Math.round(position.height)}.`;
+}
+function nextTextBoxPosition(objects, slideSize) {
+  const width = slideSize.width * 0.6;
+  const height = Math.max(48, slideSize.height * 0.16);
+  const lefts = [0.2, 0.08, 0.32].map(
+    (ratio) => Math.max(0, Math.min(slideSize.width - width, slideSize.width * ratio))
+  );
+  const tops = [0.2, 0.42, 0.64, 0.06].map(
+    (ratio) => Math.max(0, Math.min(slideSize.height - height, slideSize.height * ratio))
+  );
+  const occupied = objects.map(objectBounds);
+  let best = null;
+  let bestOverlap = Number.POSITIVE_INFINITY;
+  for (const left of lefts) {
+    for (const top of tops) {
+      const candidate = normalizeEditorPosition({ left, top, width, height });
+      const overlap = occupied.reduce(
+        (total, bounds) => total + intersectionArea(candidate, bounds),
+        0
+      );
+      if (overlap < bestOverlap) {
+        best = candidate;
+        bestOverlap = overlap;
+        if (overlap === 0) return candidate;
+      }
+    }
+  }
+  return best ?? normalizeEditorPosition({ left: 0, top: 0, width, height });
+}
+function intersectionArea(a, b) {
+  const width = Math.max(
+    0,
+    Math.min(a.left + a.width, b.left + b.width) - Math.max(a.left, b.left)
+  );
+  const height = Math.max(0, Math.min(a.top + a.height, b.top + b.height) - Math.max(a.top, b.top));
+  return width * height;
+}
+function normalizeEditorPosition(position) {
+  return {
+    left: clampGeometry(finite(position.left, 0)),
+    top: clampGeometry(finite(position.top, 0)),
+    width: Math.min(MAX_EDITOR_GEOMETRY, Math.max(8, finite(position.width, 8))),
+    height: Math.min(MAX_EDITOR_GEOMETRY, Math.max(8, finite(position.height, 8)))
+  };
+}
+function clampGeometry(value) {
+  return Math.max(-MAX_EDITOR_GEOMETRY, Math.min(MAX_EDITOR_GEOMETRY, value));
+}
+function positionFromDrag(drag, point) {
+  const dx = point.x - drag.start.x;
+  const dy = point.y - drag.start.y;
+  const radians = -drag.rotation * Math.PI / 180;
+  const resizeDx = dx * Math.cos(radians) - dy * Math.sin(radians);
+  const resizeDy = dx * Math.sin(radians) + dy * Math.cos(radians);
+  return normalizeEditorPosition(
+    drag.mode === "move" ? {
+      ...drag.before,
+      left: drag.before.left + dx,
+      top: drag.before.top + dy
+    } : {
+      ...drag.before,
+      width: Math.max(8, drag.before.width + resizeDx),
+      height: Math.max(8, drag.before.height + resizeDy)
+    }
+  );
+}
+function selectionTransform(entry, position) {
+  const rotation = objectRotation(entry);
+  if (rotation === 0) return void 0;
+  const centerX = position.left + position.width / 2;
+  const centerY = position.top + position.height / 2;
+  return `rotate(${rotation} ${centerX} ${centerY})`;
+}
+function copyPosition(position) {
+  return {
+    left: position.left,
+    top: position.top,
+    width: position.width,
+    height: position.height
+  };
+}
+function samePosition(a, b) {
+  return a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height;
+}
+function sameViewport(a, b) {
+  return a.scrollLeft === b.scrollLeft && a.scrollTop === b.scrollTop && a.width === b.width && a.height === b.height && a.stageLeft === b.stageLeft && a.stageTop === b.stageTop;
+}
+function intersects(a, b) {
+  return !!a && a.left <= b.left + b.width && a.left + a.width >= b.left && a.top <= b.top + b.height && a.top + a.height >= b.top;
+}
+function clampZoom(value) {
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, finite(value, 0.75)));
+}
+function fittedPresentationZoom(viewport, slideSize) {
+  const horizontalRoom = Math.max(1, viewport.width - 48);
+  const verticalRoom = Math.max(1, viewport.height - 48);
+  return clampZoom(Math.min(horizontalRoom / slideSize.width, verticalRoom / slideSize.height));
+}
+function finite(value, fallback) {
+  return Number.isFinite(value) ? value : fallback;
+}
+function safeDomId(value) {
+  return value.replaceAll(/[^a-zA-Z0-9_-]/g, "-");
+}
+function randomPresentationId() {
+  for (; ; ) {
+    const bytes = crypto.getRandomValues(new Uint8Array(16));
+    if (bytes.some((byte) => byte !== 0)) {
+      return [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+    }
+  }
+}
+function resolveRadius(value, position) {
+  if (typeof value === "number") return value;
+  const min = Math.min(position.width, position.height);
+  const preset = value?.startsWith("rounded-") ? value.slice("rounded-".length) : void 0;
+  if (preset === "full") return min / 2;
+  if (preset === "2xl") return 16;
+  if (preset === "xl") return 12;
+  if (preset === "lg") return 8;
+  return 6;
+}
+var COLORS = {
+  none: "transparent",
+  transparent: "transparent",
+  white: "#ffffff",
+  black: "#000000",
+  "slate-50": "#f8fafc",
+  "slate-100": "#f1f5f9",
+  "slate-200": "#e2e8f0",
+  "slate-300": "#cbd5e1",
+  "slate-400": "#94a3b8",
+  "slate-500": "#64748b",
+  "slate-600": "#475569",
+  "slate-700": "#334155",
+  "slate-800": "#1e293b",
+  "slate-900": "#0f172a",
+  "slate-950": "#020617"
+};
+function resolveColor(fill) {
+  const value = typeof fill === "string" ? fill : fill.color;
+  return COLORS[value] ?? value;
+}
+
+// src/components/artifacts/editable-presentation.tsx
+import {
+  PRESENTATION_ARTIFACT_COMMAND_VERSION,
+  PRESENTATION_ARTIFACT_QUERY_MAX_NODES,
+  PRESENTATION_ARTIFACT_QUERY_MAX_SLIDES,
+  PRESENTATION_ARTIFACT_QUERY_MAX_TEXT_BYTES,
+  PRESENTATION_ARTIFACT_QUERY_RESPONSE_MAX_BYTES
+} from "@opengeni/sdk/editable-artifacts";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var EMU_PER_CSS_PIXEL = 9525;
+var PRESENTATION_CATALOG_PAGE = 128;
+var PRESENTATION_MAX_INTERACTIVE_SLIDES = 256;
+var PRESENTATION_MAX_INTERACTIVE_NODES = 16384;
+var PRESENTATION_MAX_INTERACTIVE_TEXT_BYTES = 4 * 1024 * 1024;
+var PRESENTATION_MAX_CATALOG_PAGES = 32;
+var PRESENTATION_SCENE_CONCURRENCY = 4;
+var PRESENTATION_COMPOSITION_ATTEMPTS = 3;
+var DEFAULT_PRESENTATION_TEXT_STYLE = Object.freeze({
+  fontFamily: "Arial",
+  fontSizeCentipoints: 1800,
+  color: 255,
+  bold: false,
+  italic: false,
+  underline: false,
+  language: null
+});
+function EditablePresentationArtifactSurface(props) {
+  return /* @__PURE__ */ jsx2(ArtifactSubmissionProvider, { children: /* @__PURE__ */ jsx2(EditablePresentationArtifactSurfaceSession, { ...props }) }, artifactSubmissionSessionKey(props.session));
+}
+function EditablePresentationArtifactSurfaceSession({
+  session,
+  title: titleProp,
+  showHeader,
+  subtitle,
+  readOnly = false,
+  onCommit,
+  onCommandError,
+  download,
+  actions: actionsProp,
+  ...surfaceProps
+}) {
+  const t = useOpenGeniText();
+  const title = titleProp === void 0 ? t("artifacts.editablePresentation.presentation") : titleProp;
+  const view = useEditableArtifactView(session);
+  const submissions = useArtifactSubmissions();
+  const invalidator = editableArtifactProjectionKey(view);
+  const [retryEpoch, setRetryEpoch] = useState2(0);
+  const [state, setState] = useState2({
+    composed: null,
+    loading: true,
+    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 }));
+    scheduleLoad(async () => {
+      if (cancelled || generation !== loadGeneration.current) return;
+      await composePresentationEditorProjection(t, 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,
+              t("artifacts.editablePresentation.couldNotOpenThisPresentation")
+            )
+          });
+        }
+      );
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [invalidator, retryEpoch, scheduleLoad, session, t]);
+  const refresh = useCallback2(() => setRetryEpoch((value) => value + 1), []);
+  const writable = !readOnly && view.writable;
+  const applyCommit = useCallback2(
+    async (commit) => {
+      const composed = state.composed;
+      if (!composed) throw new Error("Presentation projection is not ready");
+      if (!writable)
+        throw new Error(t("artifacts.editablePresentation.thisPresentationIsReadOnly"));
+      if (view.authoringBlockedReason)
+        throw new Error(t("artifacts.editablePresentation.anEarlierChangeMustSettle"));
+      if (commit.revision !== void 0 && String(commit.revision) !== String(composed.projection.revision)) {
+        throw new Error(t("artifacts.editablePresentation.thePresentationChangedRetryThis"));
+      }
+      if (commit.kind === "slide-insert") {
+        await session.createPresentationSlide({
+          slideId: commit.slideId,
+          index: commit.index
+        });
+        notifyPresentationCommit(t, onCommit, onCommandError, commit);
+        refresh();
+        return;
+      }
+      if (commit.kind === "slide-delete") {
+        await session.applyPresentationCommands({
+          version: PRESENTATION_ARTIFACT_COMMAND_VERSION,
+          commands: [{ kind: "slide.delete", id: commit.slideId }]
+        });
+        notifyPresentationCommit(t, onCommit, onCommandError, commit);
+        refresh();
+        return;
+      }
+      if (commit.kind === "object-insert") {
+        await session.applyPresentationCommands({
+          version: PRESENTATION_ARTIFACT_COMMAND_VERSION,
+          commands: [
+            {
+              kind: "node.insert",
+              owner: { kind: "slide", id: commit.slideId },
+              parentId: null,
+              index: commit.index,
+              node: {
+                id: commit.objectId,
+                name: "Text box",
+                bounds: {
+                  x: canonicalCoordinate(commit.position.left),
+                  y: canonicalCoordinate(commit.position.top),
+                  width: Math.max(1, canonicalCoordinate(commit.position.width)),
+                  height: Math.max(1, canonicalCoordinate(commit.position.height))
+                },
+                transform: { rotation: 0, flipHorizontal: false, flipVertical: false },
+                content: {
+                  kind: "shape",
+                  geometry: "text-box",
+                  fill: { kind: "none" },
+                  line: { fill: { kind: "none" }, width: 0, dash: "solid" },
+                  text: emptyPresentationText(),
+                  placeholder: null
+                }
+              }
+            }
+          ]
+        });
+        notifyPresentationCommit(t, onCommit, onCommandError, commit);
+        refresh();
+        return;
+      }
+      if (commit.kind === "object-delete") {
+        await session.applyPresentationCommands({
+          version: PRESENTATION_ARTIFACT_COMMAND_VERSION,
+          commands: [{ kind: "node.delete", id: commit.objectId }]
+        });
+        notifyPresentationCommit(t, onCommit, onCommandError, commit);
+        refresh();
+        return;
+      }
+      const key = sceneNodeKey(commit.slideId, commit.objectId);
+      const node = sceneNodes.current.get(key);
+      if (!node) throw new Error(t("artifacts.editablePresentation.theEditedPresentationObjectIs"));
+      if (node.inherited || node.source.kind !== "slide" || node.source.id !== commit.slideId) {
+        throw new Error(t("artifacts.editablePresentation.inheritedMasterAndLayoutObjects"));
+      }
+      let command;
+      let nextNode;
+      if (commit.kind === "text") {
+        if (node.content.kind !== "shape" || node.content.text === null) {
+          throw new Error(t("artifacts.editablePresentation.thisPresentationObjectDoesNot"));
+        }
+        if (flattenPresentationRichText(node.content.text) !== commit.before) {
+          throw new Error(t("artifacts.editablePresentation.thePresentationTextChangedRetry"));
+        }
+        const text = replacePresentationRichText(node.content.text, commit.before, commit.after);
+        const content = Object.freeze({ ...node.content, text });
+        command = { kind: "node.content.set", id: node.id, content };
+        nextNode = Object.freeze({ ...node, content });
+      } else {
+        const current = normalizeProjectedEditorPosition(projectPosition(node.bounds));
+        if (!sameProjectedPosition(current, commit.before)) {
+          throw new Error(t("artifacts.editablePresentation.thePresentationObjectChangedRetry"));
+        }
+        const bounds = commit.kind === "move" ? Object.freeze({
+          ...node.bounds,
+          x: canonicalCoordinate(commit.after.left),
+          y: canonicalCoordinate(commit.after.top)
+        }) : Object.freeze({
+          ...node.bounds,
+          width: Math.max(1, canonicalCoordinate(commit.after.width)),
+          height: Math.max(1, canonicalCoordinate(commit.after.height))
+        });
+        command = { kind: "node.bounds.set", id: node.id, bounds };
+        nextNode = Object.freeze({ ...node, bounds });
+      }
+      await session.applyPresentationCommands({
+        version: PRESENTATION_ARTIFACT_COMMAND_VERSION,
+        commands: [command]
+      });
+      sceneNodes.current.set(key, nextNode);
+      notifyPresentationCommit(t, onCommit, onCommandError, commit);
+      refresh();
+    },
+    [
+      onCommandError,
+      onCommit,
+      refresh,
+      session,
+      state.composed,
+      view.authoringBlockedReason,
+      writable,
+      t
+    ]
+  );
+  const submitCommit = useCallback2(
+    (commit) => submissions.run(() => applyCommit(commit)),
+    [applyCommit, submissions]
+  );
+  const actions = download ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+    actionsProp,
+    /* @__PURE__ */ jsx2(
+      EditableArtifactDownloadButton,
+      {
+        session,
+        title,
+        download,
+        format: "pptx"
+      }
+    )
+  ] }) : actionsProp;
+  const projection = state.composed?.projection ?? null;
+  const status = editableArtifactStatusLabel(t, view);
+  const accessRevoked = editableArtifactAccessRevoked(view);
+  return projection && !accessRevoked ? /* @__PURE__ */ jsx2(
+    PresentationProjectionArtifactSurface,
+    {
+      ...surfaceProps,
+      title,
+      showHeader,
+      actions,
+      subtitle: subtitle ?? writable ? t("counts.slides", { count: projection.slides.length }) : t("artifacts.readOnlySubtitle", {
+        subtitle: t("counts.slides", { count: projection.slides.length })
+      }),
+      projection,
+      commit: writable ? submitCommit : void 0,
+      readOnly: !writable,
+      authoringBlockedReason: view.authoringBlockedReason,
+      busy: state.loading,
+      onCommandError
+    }
+  ) : /* @__PURE__ */ jsx2(
+    ArtifactSurface,
+    {
+      modality: "presentation",
+      title,
+      showHeader,
+      subtitle: subtitle ?? status,
+      actions: accessRevoked ? actionsProp : actions,
+      busy: !accessRevoked && !state.error,
+      className: surfaceProps.className,
+      children: /* @__PURE__ */ jsx2(
+        EditableArtifactMessage,
+        {
+          title: accessRevoked ? t("artifacts.editablePresentation.accessChanged") : state.error ? t("artifacts.editablePresentation.couldNotOpenThisPresentation") : t("artifacts.editablePresentation.openingPresentation"),
+          detail: accessRevoked ? status : state.error?.message ?? status,
+          retry: !accessRevoked && state.error ? refresh : void 0
+        }
+      )
+    }
+  );
+}
+async function composePresentationEditorProjection(t, session) {
+  if (session.modality !== "presentation") {
+    throw new Error("Expected a presentation artifact session");
+  }
+  let lastRevisionError = null;
+  for (let attempt = 0; attempt < PRESENTATION_COMPOSITION_ATTEMPTS; attempt += 1) {
+    try {
+      return await composePresentationAttempt(session);
+    } catch (cause) {
+      const error = asEditableArtifactError(
+        cause,
+        t("artifacts.editablePresentation.couldNotProjectThisPresentation")
+      );
+      if (!isPresentationRevisionDrift(error) || attempt === PRESENTATION_COMPOSITION_ATTEMPTS - 1) {
+        throw error;
+      }
+      lastRevisionError = error;
+    }
+  }
+  throw lastRevisionError ?? new Error("Presentation changed while it was opening");
+}
+async function composePresentationAttempt(session) {
+  const metadata = await session.queryPresentation({
+    kind: "metadata",
+    maxBytes: PRESENTATION_ARTIFACT_QUERY_RESPONSE_MAX_BYTES
+  });
+  if (metadata.kind !== "metadata") throw new Error("Presentation metadata response is malformed");
+  if (metadata.slides > PRESENTATION_MAX_INTERACTIVE_SLIDES) {
+    throw new Error(
+      `Presentation exceeds the interactive limit of ${PRESENTATION_MAX_INTERACTIVE_SLIDES} slides`
+    );
+  }
+  const catalog = await collectSlideCatalog(session, metadata.revision, metadata.slides);
+  const scenes = [];
+  for (let start = 0; start < catalog.length; start += PRESENTATION_SCENE_CONCURRENCY) {
+    const batch = catalog.slice(start, start + PRESENTATION_SCENE_CONCURRENCY);
+    const projected = await Promise.all(
+      batch.map(
+        (slide) => session.queryPresentationEditorSlide({
+          kind: "editor-slide",
+          slideId: slide.id,
+          maxNodes: PRESENTATION_ARTIFACT_QUERY_MAX_NODES,
+          maxTextBytes: PRESENTATION_ARTIFACT_QUERY_MAX_TEXT_BYTES,
+          maxBytes: PRESENTATION_ARTIFACT_QUERY_RESPONSE_MAX_BYTES
+        })
+      )
+    );
+    for (const scene of projected) {
+      if (scene.revision !== metadata.revision) {
+        throw new Error("Presentation projection revision drifted");
+      }
+      if (scene.truncated) {
+        throw new Error(`Slide ${scene.slide.index + 1} exceeds the bounded editor projection`);
+      }
+      scenes.push(scene);
+    }
+  }
+  const totalNodes = scenes.reduce((sum, scene) => sum + scene.nodes.length, 0);
+  const totalText = scenes.reduce((sum, scene) => sum + scene.projectedTextBytes, 0);
+  if (totalNodes > PRESENTATION_MAX_INTERACTIVE_NODES) {
+    throw new Error(
+      `Presentation exceeds the interactive limit of ${PRESENTATION_MAX_INTERACTIVE_NODES} scene nodes`
+    );
+  }
+  if (totalText > PRESENTATION_MAX_INTERACTIVE_TEXT_BYTES) {
+    throw new Error(
+      `Presentation exceeds the interactive limit of ${PRESENTATION_MAX_INTERACTIVE_TEXT_BYTES} text bytes`
+    );
+  }
+  if (scenes.length !== catalog.length) {
+    throw new Error("Presentation slides changed while they were opening");
+  }
+  const sceneNodeMap = /* @__PURE__ */ new Map();
+  const slides = scenes.map((scene, index) => {
+    if (scene.slide.id !== catalog[index]?.id || scene.slide.index !== index) {
+      throw new Error("Presentation slide catalog changed while it was opening");
+    }
+    for (const node of scene.nodes) {
+      sceneNodeMap.set(sceneNodeKey(scene.slide.id, node.id), node);
+    }
+    return projectPresentationSlide(scene);
+  });
+  return Object.freeze({
+    projection: Object.freeze({
+      revision: metadata.revision.toString(),
+      slideSize: Object.freeze({
+        width: displayCoordinate(metadata.slideSize.width),
+        height: displayCoordinate(metadata.slideSize.height)
+      }),
+      slides: Object.freeze(slides)
+    }),
+    sceneNodes: sceneNodeMap
+  });
+}
+async function collectSlideCatalog(session, revision, expectedSlides) {
+  const slides = [];
+  let startSlide = 0;
+  let projectedText = 0;
+  for (let page = 0; page < PRESENTATION_MAX_CATALOG_PAGES; page += 1) {
+    const response = await session.queryPresentationSlideCatalog({
+      kind: "slide-catalog",
+      startSlide,
+      maxSlides: Math.min(
+        PRESENTATION_CATALOG_PAGE,
+        PRESENTATION_ARTIFACT_QUERY_MAX_SLIDES,
+        Math.max(1, expectedSlides - slides.length)
+      ),
+      maxTextBytes: PRESENTATION_ARTIFACT_QUERY_MAX_TEXT_BYTES,
+      maxBytes: PRESENTATION_ARTIFACT_QUERY_RESPONSE_MAX_BYTES
+    });
+    if (response.revision !== revision) {
+      throw new Error("Presentation projection revision drifted");
+    }
+    if (response.startSlide !== startSlide) {
+      throw new Error("Presentation slide catalog cursor is malformed");
+    }
+    if (response.slides.some((slide, offset) => slide.index !== startSlide + offset)) {
+      throw new Error("Presentation slide catalog order is malformed");
+    }
+    slides.push(...response.slides);
+    projectedText += response.projectedTextBytes;
+    if (slides.length > PRESENTATION_MAX_INTERACTIVE_SLIDES || projectedText > PRESENTATION_MAX_INTERACTIVE_TEXT_BYTES) {
+      throw new Error("Presentation slide catalog exceeds its interactive limit");
+    }
+    if (response.nextSlide === null) {
+      if (response.truncated || slides.length !== expectedSlides) {
+        throw new Error("Presentation slide catalog is incomplete");
+      }
+      return slides;
+    }
+    if (!response.truncated || response.nextSlide <= startSlide || response.nextSlide !== startSlide + response.slides.length || response.slides.length === 0) {
+      throw new Error("Presentation slide catalog did not advance");
+    }
+    startSlide = response.nextSlide;
+  }
+  throw new Error(`Presentation catalog exceeds ${PRESENTATION_MAX_CATALOG_PAGES} pages`);
+}
+function projectPresentationSlide(scene) {
+  const byId = new Map(scene.nodes.map((node) => [node.id, node]));
+  if (byId.size !== scene.nodes.length)
+    throw new Error("Presentation slide contains duplicate IDs");
+  const children = /* @__PURE__ */ new Map();
+  for (const node of scene.nodes) {
+    const entries = children.get(node.parentId) ?? [];
+    entries.push(node);
+    children.set(node.parentId, entries);
+  }
+  for (const entries of children.values()) {
+    entries.sort((left, right) => left.order - right.order || left.id.localeCompare(right.id));
+  }
+  const visited = /* @__PURE__ */ new Set();
+  const stack = /* @__PURE__ */ new Set();
+  const projectNode = (node) => {
+    if (stack.has(node.id)) throw new Error("Presentation group hierarchy contains a cycle");
+    if (visited.has(node.id)) throw new Error("Presentation node appears more than once");
+    stack.add(node.id);
+    visited.add(node.id);
+    const directChildren = children.get(node.id) ?? [];
+    let orderedChildren = directChildren;
+    if (node.content.kind === "group") {
+      const directIds = new Set(directChildren.map((child) => child.id));
+      if (node.content.children.length !== directChildren.length || node.content.children.some((id) => !directIds.has(id))) {
+        throw new Error(`Presentation group ${node.id} hierarchy is inconsistent`);
+      }
+      orderedChildren = node.content.children.map((id) => byId.get(id));
+    } else if (directChildren.length > 0) {
+      throw new Error(`Presentation non-group node ${node.id} contains children`);
+    }
+    const result = projectPresentationNode(node, orderedChildren.map(projectNode));
+    stack.delete(node.id);
+    return result;
+  };
+  const elements = (children.get(null) ?? []).map(projectNode);
+  if (visited.size !== scene.nodes.length) {
+    throw new Error("Presentation slide contains orphaned hierarchy nodes");
+  }
+  return Object.freeze({
+    id: scene.slide.id,
+    title: scene.slide.title,
+    background: projectFill(scene.slide.background),
+    elements: Object.freeze(elements),
+    layout: scene.slide.layout ? Object.freeze({
+      id: scene.slide.layout.id,
+      name: scene.slide.layout.name,
+      masterId: scene.slide.layout.masterId,
+      background: projectFill(scene.slide.layout.background)
+    }) : null,
+    notes: scene.notes ? projectRichText(scene.notes) : null
+  });
+}
+function projectPresentationNode(node, children) {
+  const metadata = {
+    nodeSource: { ...node.source },
+    inherited: node.inherited,
+    parentId: node.parentId,
+    order: node.order,
+    readOnly: node.inherited || node.source.kind !== "slide"
+  };
+  const position = projectPosition(node.bounds);
+  const rotation = node.transform.rotation / 6e4;
+  const content = node.content;
+  if (content.kind === "shape") {
+    const richText = content.text ? projectRichText(content.text) : void 0;
+    const textStyle = richText ? firstTextStyle(richText) : void 0;
+    return Object.freeze({
+      ...metadata,
+      kind: "shape",
+      id: node.id,
+      name: node.name,
+      geometry: projectShapeGeometry(content.geometry),
+      position,
+      fill: projectFill(content.fill),
+      line: projectLine(content.line),
+      rotation,
+      text: content.text ? flattenPresentationRichText(content.text) : "",
+      ...richText ? { richText } : {},
+      ...textStyle ? { textStyle } : {}
+    });
+  }
+  if (content.kind === "group") {
+    return Object.freeze({
+      ...metadata,
+      kind: "group",
+      id: node.id,
+      name: node.name,
+      position,
+      childOffset: Object.freeze({
+        left: displayCoordinate(content.childOffsetX),
+        top: displayCoordinate(content.childOffsetY)
+      }),
+      childExtent: Object.freeze({
+        width: displayCoordinate(content.childExtentWidth),
+        height: displayCoordinate(content.childExtentHeight)
+      }),
+      rotation,
+      flipHorizontal: node.transform.flipHorizontal,
+      flipVertical: node.transform.flipVertical,
+      children: Object.freeze([...children])
+    });
+  }
+  if (content.kind === "connector") {
+    return Object.freeze({
+      ...metadata,
+      kind: "connector",
+      id: node.id,
+      name: node.name,
+      connectorKind: content.connectorKind,
+      position,
+      start: Object.freeze({
+        nodeId: content.start.nodeId,
+        x: displayCoordinate(content.start.x),
+        y: displayCoordinate(content.start.y)
+      }),
+      end: Object.freeze({
+        nodeId: content.end.nodeId,
+        x: displayCoordinate(content.end.x),
+        y: displayCoordinate(content.end.y)
+      }),
+      line: projectLine(content.line)
+    });
+  }
+  if (content.kind === "chart") {
+    const titleRichText = projectRichText(content.title);
+    return Object.freeze({
+      ...metadata,
+      kind: "chart",
+      id: node.id,
+      name: node.name,
+      type: content.chartType,
+      position,
+      title: flattenPresentationRichText(content.title),
+      titleRichText,
+      hasLegend: content.hasLegend,
+      series: Object.freeze(
+        content.series.map((series) => ({
+          name: series.name,
+          categories: Object.freeze([...series.categories]),
+          values: Object.freeze([...series.values]),
+          xValues: Object.freeze([...series.xValues]),
+          bubbleSizes: Object.freeze([...series.bubbleSizes])
+        }))
+      )
+    });
+  }
+  if (content.kind === "table") {
+    return Object.freeze({
+      ...metadata,
+      kind: "table",
+      id: node.id,
+      name: node.name,
+      position,
+      rows: Object.freeze(
+        content.rows.map(
+          (row) => Object.freeze(
+            row.map(
+              (cell) => cell ? Object.freeze({
+                text: flattenPresentationRichText(cell.text),
+                richText: projectRichText(cell.text),
+                fill: projectFill(cell.fill),
+                rowSpan: cell.rowSpan,
+                colSpan: cell.columnSpan
+              }) : null
+            )
+          )
+        )
+      ),
+      columnWidths: Object.freeze(content.columnWidths.map(displayCoordinate)),
+      rowHeights: Object.freeze(content.rowHeights.map(displayCoordinate)),
+      line: projectLine(content.line)
+    });
+  }
+  return Object.freeze({
+    ...metadata,
+    kind: "image",
+    id: node.id,
+    name: node.name,
+    position,
+    alt: content.altText,
+    fit: content.fit,
+    rotation,
+    flipHorizontal: node.transform.flipHorizontal,
+    flipVertical: node.transform.flipVertical,
+    digest: bytesToHex(content.digest),
+    contentType: content.contentType,
+    intrinsicWidth: content.intrinsicWidth,
+    intrinsicHeight: content.intrinsicHeight
+  });
+}
+function projectRichText(text) {
+  return Object.freeze({
+    verticalAlignment: text.verticalAlignment,
+    paragraphs: Object.freeze(
+      text.paragraphs.map(
+        (paragraph) => Object.freeze({
+          alignment: paragraph.alignment,
+          runs: Object.freeze(
+            paragraph.runs.map(
+              (run) => Object.freeze({
+                text: run.text,
+                style: projectTextStyle(run.style, paragraph.alignment, text.verticalAlignment),
+                language: run.style.language
+              })
+            )
+          )
+        })
+      )
+    )
+  });
+}
+function projectTextStyle(style, alignment, verticalAlignment) {
+  return Object.freeze({
+    fontFamily: style.fontFamily,
+    fontSize: style.fontSizeCentipoints / 100,
+    color: rgbaCss(style.color),
+    bold: style.bold,
+    italic: style.italic,
+    underline: style.underline,
+    ...alignment ? { alignment } : {},
+    ...verticalAlignment ? { verticalAlignment } : {}
+  });
+}
+function firstTextStyle(text) {
+  return text.paragraphs[0]?.runs[0]?.style;
+}
+function projectFill(fill) {
+  return fill.kind === "none" ? "none" : Object.freeze({ type: "solid", color: rgbaCss(fill.color) });
+}
+function projectLine(line) {
+  return Object.freeze({
+    style: line.dash,
+    fill: projectFill(line.fill),
+    width: displayCoordinate(line.width)
+  });
+}
+function projectPosition(bounds) {
+  return Object.freeze({
+    left: displayCoordinate(bounds.x),
+    top: displayCoordinate(bounds.y),
+    width: displayCoordinate(bounds.width),
+    height: displayCoordinate(bounds.height)
+  });
+}
+function displayCoordinate(value) {
+  return value / EMU_PER_CSS_PIXEL;
+}
+function normalizeProjectedEditorPosition(position) {
+  const clamp = (value) => Math.max(-1e6, Math.min(1e6, value));
+  return {
+    left: clamp(position.left),
+    top: clamp(position.top),
+    width: Math.min(1e6, Math.max(8, position.width)),
+    height: Math.min(1e6, Math.max(8, position.height))
+  };
+}
+function canonicalCoordinate(value) {
+  if (!Number.isFinite(value)) throw new Error("Presentation coordinate must be finite");
+  const canonical = Math.round(value * EMU_PER_CSS_PIXEL);
+  if (!Number.isSafeInteger(canonical)) throw new Error("Presentation coordinate is out of range");
+  return canonical;
+}
+function sameProjectedPosition(left, right) {
+  return canonicalCoordinate(left.left) === canonicalCoordinate(right.left) && canonicalCoordinate(left.top) === canonicalCoordinate(right.top) && canonicalCoordinate(left.width) === canonicalCoordinate(right.width) && canonicalCoordinate(left.height) === canonicalCoordinate(right.height);
+}
+function projectShapeGeometry(geometry) {
+  return {
+    "text-box": "textbox",
+    rectangle: "rect",
+    "rounded-rectangle": "roundRect",
+    ellipse: "ellipse",
+    triangle: "triangle",
+    "right-arrow": "rightArrow",
+    line: "line"
+  }[geometry];
+}
+function emptyPresentationText() {
+  return Object.freeze({
+    verticalAlignment: "middle",
+    paragraphs: Object.freeze([
+      Object.freeze({
+        alignment: "left",
+        runs: Object.freeze([Object.freeze({ text: "", style: DEFAULT_PRESENTATION_TEXT_STYLE })])
+      })
+    ])
+  });
+}
+function flattenPresentationRichText(text) {
+  return text.paragraphs.map((paragraph) => paragraph.runs.map((run) => run.text).join("")).join("\n");
+}
+function replacePresentationRichText(richText, before, after) {
+  const canonicalBefore = flattenPresentationRichText(richText);
+  if (canonicalBefore !== before) throw new Error("Presentation rich text does not match its edit");
+  if (before === after) return richText;
+  const diff = textReplacementRange(before, after);
+  const spans = presentationStyleSpans(richText);
+  const paragraphStarts = presentationParagraphStarts(richText);
+  const insertionStyle = styleAtOffset(spans, diff.start) ?? DEFAULT_PRESENTATION_TEXT_STYLE;
+  const insertionAlignment = alignmentAtOffset(richText, paragraphStarts, diff.start);
+  const paragraphs = [];
+  let newOffset = 0;
+  for (const paragraphText of after.split("\n")) {
+    const alignment = alignmentForNewOffset(
+      richText,
+      paragraphStarts,
+      diff,
+      newOffset,
+      insertionAlignment
+    );
+    const runs = [];
+    let localOffset = 0;
+    for (const character of paragraphText) {
+      const offset = newOffset + localOffset;
+      const oldOffset = oldOffsetForNewOffset(diff, offset);
+      const style = oldOffset === null ? insertionStyle : styleAtOffset(spans, oldOffset) ?? insertionStyle;
+      const previous = runs.at(-1);
+      if (previous && samePresentationTextStyle(previous.style, style)) previous.text += character;
+      else runs.push({ text: character, style });
+      localOffset += character.length;
+    }
+    paragraphs.push(
+      Object.freeze({
+        alignment,
+        runs: Object.freeze(
+          runs.map(
+            (run) => Object.freeze({ text: run.text, style: Object.freeze({ ...run.style }) })
+          )
+        )
+      })
+    );
+    newOffset += paragraphText.length + 1;
+  }
+  return Object.freeze({
+    verticalAlignment: richText.verticalAlignment,
+    paragraphs: Object.freeze(paragraphs)
+  });
+}
+function textReplacementRange(before, after) {
+  let start = 0;
+  while (start < before.length && start < after.length && before.charCodeAt(start) === after.charCodeAt(start)) {
+    start += 1;
+  }
+  while (start > 0 && (splitsSurrogate(before, start) || splitsSurrogate(after, start))) start -= 1;
+  let suffix = 0;
+  while (suffix < before.length - start && suffix < after.length - start && before.charCodeAt(before.length - suffix - 1) === after.charCodeAt(after.length - suffix - 1)) {
+    suffix += 1;
+  }
+  while (suffix > 0 && (splitsSurrogate(before, before.length - suffix) || splitsSurrogate(after, after.length - suffix))) {
+    suffix -= 1;
+  }
+  const oldEnd = before.length - suffix;
+  const newEnd = after.length - suffix;
+  return { start, oldEnd, newEnd, delta: oldEnd - newEnd };
+}
+function oldOffsetForNewOffset(diff, offset) {
+  if (offset < diff.start) return offset;
+  if (offset >= diff.newEnd) return offset + diff.delta;
+  return null;
+}
+function presentationStyleSpans(text) {
+  const spans = [];
+  let offset = 0;
+  text.paragraphs.forEach((paragraph, paragraphIndex) => {
+    for (const run of paragraph.runs) {
+      spans.push({ start: offset, end: offset + run.text.length, style: run.style });
+      offset += run.text.length;
+    }
+    if (paragraphIndex < text.paragraphs.length - 1) offset += 1;
+  });
+  return spans;
+}
+function presentationParagraphStarts(text) {
+  const starts = [];
+  let offset = 0;
+  text.paragraphs.forEach((paragraph, index) => {
+    starts.push(offset);
+    offset += paragraph.runs.reduce((sum, run) => sum + run.text.length, 0);
+    if (index < text.paragraphs.length - 1) offset += 1;
+  });
+  return starts;
+}
+function styleAtOffset(spans, offset) {
+  const containing = spans.find((span) => offset >= span.start && offset < span.end);
+  if (containing) return containing.style;
+  const before = [...spans].reverse().find((span) => span.end <= offset);
+  return before?.style ?? spans[0]?.style ?? null;
+}
+function alignmentAtOffset(text, starts, offset) {
+  let index = 0;
+  while (index + 1 < starts.length && (starts[index + 1] ?? Number.POSITIVE_INFINITY) <= offset) {
+    index += 1;
+  }
+  return text.paragraphs[index]?.alignment ?? "left";
+}
+function alignmentForNewOffset(text, starts, diff, newOffset, fallback) {
+  const oldOffset = oldOffsetForNewOffset(diff, newOffset);
+  return oldOffset === null ? fallback : alignmentAtOffset(text, starts, oldOffset);
+}
+function samePresentationTextStyle(left, right) {
+  return left.fontFamily === right.fontFamily && left.fontSizeCentipoints === right.fontSizeCentipoints && left.color === right.color && left.bold === right.bold && left.italic === right.italic && left.underline === right.underline && left.language === right.language;
+}
+function splitsSurrogate(value, index) {
+  if (index <= 0 || index >= value.length) return false;
+  const left = value.charCodeAt(index - 1);
+  const right = value.charCodeAt(index);
+  return left >= 55296 && left <= 56319 && right >= 56320 && right <= 57343;
+}
+function rgbaCss(value) {
+  const hex = (value >>> 0).toString(16).padStart(8, "0");
+  return hex.endsWith("ff") ? `#${hex.slice(0, 6)}` : `#${hex}`;
+}
+function bytesToHex(value) {
+  return [...value].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+function sceneNodeKey(slideId, nodeId) {
+  return `${slideId}:${nodeId}`;
+}
+function isPresentationRevisionDrift(error) {
+  return error.message.includes("changed while") || error.message.includes("revision drifted");
+}
+function notifyPresentationCommit(t, observer, onError, commit) {
+  try {
+    const result = observer?.(commit);
+    if (result && typeof result.then === "function") {
+      void Promise.resolve(result).catch(
+        (cause) => onError?.(
+          asEditableArtifactError(
+            cause,
+            t("artifacts.editablePresentation.presentationCommitObserverFailed")
+          )
+        )
+      );
+    }
+  } catch (cause) {
+    onError?.(
+      asEditableArtifactError(
+        cause,
+        t("artifacts.editablePresentation.presentationCommitObserverFailed")
+      )
+    );
+  }
+}
+
+export {
+  PresentationEditor,
+  PresentationProjectionEditor,
+  PresentationArtifactSurface,
+  PresentationProjectionArtifactSurface,
+  EditablePresentationArtifactSurface
+};
+//# sourceMappingURL=chunk-DXBYWSL5.js.map