import {
  ChevronLeftIcon,
  ChevronRightIcon,
  ExpandIcon,
  FilePlus2Icon,
  MinusIcon,
  PlusIcon,
  Trash2Icon,
  TypeIcon,
} from "lucide-react";
import {
  type KeyboardEvent as ReactKeyboardEvent,
  type PointerEvent as ReactPointerEvent,
  type ReactNode,
  useCallback,
  useEffect,
  useId,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import type {
  Presentation,
  PresentationChart,
  PresentationElement,
  PresentationFill,
  PresentationGroup,
  PresentationGroupChild,
  PresentationImage,
  PresentationLine,
  PresentationPosition,
  PresentationShape,
  PresentationTable,
  PresentationTextStyle,
  Slide,
} from "@opengeni/artifact-tool/reference";

import { cn } from "../../lib/cn";
import { ArtifactSurface } from "./artifact-surface";
import { useOpenGeniText, type OpenGeniText } from "../../messages/runtime";

const MIN_ZOOM = 0.2;
const MAX_ZOOM = 4;
const RAIL_ITEM_HEIGHT = 116;
const RAIL_OVERSCAN = 3;
const DEFAULT_RAIL_HEIGHT = 640;
const MOBILE_RAIL_ITEM_HEIGHT = 44;
const MOBILE_RAIL_OVERSCAN = 3;
const DEFAULT_MOBILE_LIST_HEIGHT = 264;
const DEFAULT_VIEWPORT = { width: 960, height: 640 };
const SPATIAL_TILE = 256;
const MAX_SPATIAL_BUCKETS_PER_OBJECT = 1_024;
const CANVAS_OVERSCAN_PX = 96;
const MAX_CANVAS_EDGE = 8_192;
const MAX_CANVAS_PIXELS = 16_000_000;
const MAX_EDITOR_GEOMETRY = 1_000_000;
const MAX_TABLE_CELLS_PER_PAINT = 20_000;
const MAX_PROJECTION_SLIDES = 100_000;
const MAX_PROJECTION_ELEMENTS_PER_SLIDE = 100_000;
const MAX_PROJECTION_GROUP_DEPTH = 16;
const MAX_PROJECTION_TABLE_CELLS = 1_000_000;
const MAX_PROJECTION_TEXT = 1_000_000;

type PresentationObject = PresentationElement;
type PresentationObjectKind = "shape" | "chart" | "image" | "table" | "group";

type DisplayObject = {
  id: string;
  kind: PresentationObjectKind;
  object: PresentationObject;
  readOnly: boolean;
};

export type PresentationCommit =
  | {
      kind: "slide-insert";
      slideId: string;
      index: number;
      revision?: string | number;
    }
  | {
      kind: "slide-delete";
      slideId: string;
      index: number;
      revision?: string | number;
    }
  | {
      kind: "object-insert";
      slideId: string;
      objectId: string;
      index: number;
      position: PresentationPosition;
      revision?: string | number;
    }
  | {
      kind: "object-delete";
      slideId: string;
      objectId: string;
      revision?: string | number;
    }
  | {
      kind: "move" | "resize";
      slideId: string;
      objectId: string;
      before: PresentationPosition;
      after: PresentationPosition;
      revision?: string | number;
    }
  | {
      kind: "text";
      slideId: string;
      objectId: string;
      before: string;
      after: string;
      revision?: string | number;
    };

export type PresentationCommitHandler =
  | ((commit: PresentationCommit) => void)
  | ((commit: PresentationCommit) => Promise<void>);

export type PresentationProjectionPosition = Readonly<{
  left: number;
  top: number;
  width: number;
  height: number;
}>;

export type PresentationProjectionFill = string | Readonly<{ type?: "solid"; color: string }>;

export type PresentationProjectionLine = Readonly<{
  style?: "solid" | "dash" | "dot" | "none";
  fill?: PresentationProjectionFill;
  width?: number;
}>;

export type PresentationProjectionTextStyle = Readonly<{
  fontFamily?: string;
  fontSize?: number;
  bold?: boolean;
  italic?: boolean;
  underline?: boolean;
  color?: string;
  alignment?: "left" | "center" | "right" | "justify";
  verticalAlignment?: "top" | "middle" | "bottom";
}>;

export type PresentationProjectionTextRun = Readonly<{
  text: string;
  style: PresentationProjectionTextStyle;
  language?: string | null;
}>;

export type PresentationProjectionTextParagraph = Readonly<{
  runs: readonly PresentationProjectionTextRun[];
  alignment: "left" | "center" | "right" | "justify";
}>;

export type PresentationProjectionRichText = Readonly<{
  paragraphs: readonly PresentationProjectionTextParagraph[];
  verticalAlignment: "top" | "middle" | "bottom";
}>;

export type PresentationProjectionElementMetadata = Readonly<{
  nodeSource?: Readonly<{ kind: "master" | "layout" | "slide"; id: string }>;
  inherited?: boolean;
  parentId?: string | null;
  order?: number;
  /** Inherited master/layout nodes remain visible but cannot be edited in slide mode. */
  readOnly?: boolean;
}>;

export type PresentationProjectionShape = Readonly<{
  kind: "shape";
  id: string;
  name: string;
  geometry: "textbox" | "rect" | "roundRect" | "ellipse" | "triangle" | "rightArrow" | "line";
  position: PresentationProjectionPosition;
  fill?: PresentationProjectionFill;
  line?: PresentationProjectionLine;
  rotation?: number;
  borderRadius?: number | string;
  text: string;
  textStyle?: PresentationProjectionTextStyle;
  richText?: PresentationProjectionRichText;
}> &
  PresentationProjectionElementMetadata;

export type PresentationProjectionChartSeries = Readonly<{
  name: string;
  categories?: readonly string[];
  values: readonly number[];
  xValues?: readonly number[];
  bubbleSizes?: readonly number[];
  fill?: PresentationProjectionFill;
  line?: PresentationProjectionLine;
}>;

export type PresentationProjectionChart = Readonly<{
  kind: "chart";
  id: string;
  name: string;
  type: "bar" | "line" | "area" | "pie" | "doughnut" | "scatter" | "bubble" | "radar";
  position: PresentationProjectionPosition;
  title?: string;
  titleRichText?: PresentationProjectionRichText;
  hasLegend?: boolean;
  series: readonly PresentationProjectionChartSeries[];
  xAxis?: Readonly<{ visible?: boolean; title?: string; min?: number; max?: number }>;
  yAxis?: Readonly<{ visible?: boolean; title?: string; min?: number; max?: number }>;
  dataLabels?: Readonly<{
    showValue?: boolean;
    showSeriesName?: boolean;
    showCategoryName?: boolean;
    showPercent?: boolean;
    position?: "center" | "inEnd" | "outEnd";
  }>;
}> &
  PresentationProjectionElementMetadata;

export type PresentationProjectionImage = Readonly<{
  kind: "image";
  id: string;
  name: string;
  position: PresentationProjectionPosition;
  /** Host-resolved data/blob/same-origin URL. Arbitrary remote URLs are ignored. */
  source?: string;
  alt?: string;
  prompt?: string;
  fit?: "contain" | "cover";
  crop?: Readonly<{ left: number; top: number; right: number; bottom: number }>;
  geometry?: "rect" | "roundRect" | "ellipse";
  borderRadius?: number | string;
  rotation?: number;
  flipHorizontal?: boolean;
  flipVertical?: boolean;
  digest?: string;
  contentType?: string;
  intrinsicWidth?: number;
  intrinsicHeight?: number;
}> &
  PresentationProjectionElementMetadata;

export type PresentationProjectionTableCell = Readonly<{
  text: string;
  richText?: PresentationProjectionRichText;
  fill?: PresentationProjectionFill;
  textStyle?: PresentationProjectionTextStyle;
  rowSpan?: number;
  colSpan?: number;
}>;

export type PresentationProjectionTable = Readonly<{
  kind: "table";
  id: string;
  name: string;
  position: PresentationProjectionPosition;
  rows: readonly (readonly (PresentationProjectionTableCell | null)[])[];
  columnWidths?: readonly number[];
  rowHeights?: readonly number[];
  fill?: PresentationProjectionFill;
  line?: PresentationProjectionLine;
  textStyle?: PresentationProjectionTextStyle;
}> &
  PresentationProjectionElementMetadata;

export type PresentationProjectionGroup = Readonly<{
  kind: "group";
  id: string;
  name: string;
  position: PresentationProjectionPosition;
  childOffset: Readonly<{ left: number; top: number }>;
  childExtent: Readonly<{ width: number; height: number }>;
  rotation?: number;
  flipHorizontal?: boolean;
  flipVertical?: boolean;
  children: readonly PresentationProjectionElement[];
}> &
  PresentationProjectionElementMetadata;

export type PresentationProjectionConnector = Readonly<{
  kind: "connector";
  id: string;
  name: string;
  connectorKind: "straight" | "elbow" | "curved";
  position: PresentationProjectionPosition;
  start: Readonly<{ nodeId: string | null; x: number; y: number }>;
  end: Readonly<{ nodeId: string | null; x: number; y: number }>;
  line?: PresentationProjectionLine;
}> &
  PresentationProjectionElementMetadata;

export type PresentationProjectionElement =
  | PresentationProjectionShape
  | PresentationProjectionChart
  | PresentationProjectionImage
  | PresentationProjectionTable
  | PresentationProjectionGroup
  | PresentationProjectionConnector;

export type PresentationSlideProjection = Readonly<{
  id: string;
  title?: string;
  background?: PresentationProjectionFill;
  elements: readonly PresentationProjectionElement[];
  layout?: Readonly<{
    id: string;
    name: string;
    masterId: string | null;
    background: PresentationProjectionFill;
  }> | null;
  notes?: PresentationProjectionRichText | null;
}>;

/** Immutable render/edit projection; the host keeps the canonical deck off the React thread. */
export type PresentationEditorProjection = Readonly<{
  revision: string | number;
  slideSize: Readonly<{ width: number; height: number }>;
  slides: readonly PresentationSlideProjection[];
}>;

export type PresentationProjectionEditorProps = Omit<
  PresentationEditorProps,
  "presentation" | "revision" | "onSlideChange" | "onSelectionChange" | "onCommit"
> & {
  projection: PresentationEditorProjection;
  commit?: PresentationCommitHandler | undefined;
  onCommandError?: ((error: Error) => void) | undefined;
  onSlideChange?: ((slide: PresentationSlideProjection, index: number) => void) | undefined;
  onSelectionChange?:
    | ((object: PresentationProjectionElement | null, slide: PresentationSlideProjection) => void)
    | undefined;
};

export type PresentationProjectionArtifactSurfaceProps = PresentationProjectionEditorProps & {
  title?: string | undefined;
  showHeader?: boolean | undefined;
  subtitle?: ReactNode | undefined;
  actions?: ReactNode | undefined;
  busy?: boolean | undefined;
};

export type PresentationEditorProps = {
  presentation: Presentation;
  /** Increment/change after a host applies an out-of-band model mutation. */
  revision?: string | number | undefined;
  activeSlideId?: string | undefined;
  defaultActiveSlideId?: string | undefined;
  selectedObjectId?: string | null | undefined;
  defaultSelectedObjectId?: string | null | undefined;
  zoom?: number | undefined;
  defaultZoom?: number | undefined;
  readOnly?: boolean | undefined;
  /** Temporarily fence commands while keeping the current editor draft. */
  authoringBlockedReason?: "pending_conflict" | "prior_writer" | undefined;
  className?: string | undefined;
  onSlideChange?: ((slide: Slide, index: number) => void) | undefined;
  onSelectionChange?: ((object: PresentationObject | null, slide: Slide) => void) | undefined;
  onCommit?: PresentationCommitHandler | undefined;
  onCommandError?: ((error: Error) => void) | undefined;
  onZoomChange?: ((zoom: number) => void) | undefined;
};

export type PresentationArtifactSurfaceProps = PresentationEditorProps & {
  title?: string | undefined;
  showHeader?: boolean | undefined;
  subtitle?: ReactNode | undefined;
  actions?: ReactNode | undefined;
  busy?: boolean | undefined;
};

type ViewportMetrics = {
  scrollLeft: number;
  scrollTop: number;
  width: number;
  height: number;
  stageLeft: number;
  stageTop: number;
};

type DragState = {
  pointerId: number;
  mode: "move" | "resize";
  object: PresentationObject;
  rotation: number;
  start: { x: number; y: number };
  before: PresentationPosition;
};

type TextEdit = {
  slideId: string;
  shape: PresentationShape;
  before: string;
};

type DraftPosition = {
  objectId: string;
  position: PresentationPosition;
};

type SpatialIndex = {
  objects: DisplayObject[];
  bounds: PresentationPosition[];
  buckets: Map<string, number[]>;
  overflowObjects: number[];
};

type CanvasImageEntry = {
  image: HTMLImageElement;
  ready: boolean;
};

/** Compatibility adapter for the public authoring model. */
export function PresentationEditor(props: PresentationEditorProps) {
  return <PresentationEditorCore {...props} />;
}

/**
 * Projection-first editor. It creates only a disposable render view; all
 * durable mutations leave through the async command port.
 */
export function PresentationProjectionEditor({
  projection,
  commit,
  onCommandError,
  onSlideChange,
  onSelectionChange,
  readOnly = false,
  ...props
}: PresentationProjectionEditorProps) {
  const view = useMemo(() => presentationViewFromProjection(projection), [projection]);
  return (
    <PresentationEditorCore
      {...props}
      presentation={view.presentation}
      revision={projection.revision}
      readOnly={readOnly || !commit}
      onCommit={
        commit
          ? (command) => commit({ ...command, revision: projection.revision } as PresentationCommit)
          : undefined
      }
      onCommandError={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: string, activeIndex: number, length: number): number | null {
  if (length === 0) return null;
  if (key === "ArrowDown") return Math.min(length - 1, activeIndex + 1);
  if (key === "ArrowUp") return Math.max(0, activeIndex - 1);
  if (key === "Home") return 0;
  if (key === "End") return length - 1;
  return null;
}

function PresentationEditorCore({
  presentation,
  revision,
  activeSlideId: controlledSlideId,
  defaultActiveSlideId,
  selectedObjectId: controlledSelectionId,
  defaultSelectedObjectId = null,
  zoom: controlledZoom,
  defaultZoom = 0.75,
  readOnly = false,
  authoringBlockedReason,
  className,
  onSlideChange,
  onSelectionChange,
  onCommit,
  onCommandError,
  onZoomChange,
}: PresentationEditorProps) {
  const t = useOpenGeniText();
  const mutationsBlocked = readOnly || authoringBlockedReason !== undefined;
  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<string | null>(defaultSelectedObjectId);
  const selectedId = controlledSelectionId === undefined ? 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<{
    message: string;
    retry: () => void;
  } | null>(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<ViewportMetrics>({
    scrollLeft: 0,
    scrollTop: 0,
    ...DEFAULT_VIEWPORT,
    stageLeft: 0,
    stageTop: 0,
  });
  const [draftPosition, setDraftPosition] = useState<DraftPosition | null>(null);
  const [textEdit, setTextEdit] = useState<TextEdit | null>(null);
  const [textDraft, setTextDraft] = useState("");
  const [paintEpoch, setPaintEpoch] = useState(0);
  const railRef = useRef<HTMLDivElement>(null);
  const mobileSelectorTriggerRef = useRef<HTMLButtonElement>(null);
  const mobileSelectorPanelRef = useRef<HTMLDivElement>(null);
  const mobileRailRef = useRef<HTMLDivElement>(null);
  const viewportRef = useRef<HTMLDivElement>(null);
  const stageRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const overlayRef = useRef<SVGSVGElement>(null);
  const editorRef = useRef<HTMLTextAreaElement>(null);
  const dragRef = useRef<DragState | null>(null);
  const textEditRef = useRef<TextEdit | null>(null);
  const imageCacheRef = useRef(new Map<string, CanvasImageEntry>());
  const mountedRef = useRef(true);
  const commandScopeRef = useRef(0);
  const commandVersionsRef = useRef(new Map<string, number>());
  const pendingSlideIdRef = useRef<string | null>(null);
  const pendingObjectIdRef = useRef<string | null>(null);
  const mobileRailScrollOnOpenRef = useRef(0);
  const domId = useId().replaceAll(":", "");
  const selectionProxyId = `${domId}-presentation-selection`;
  const instructionsId = `${domId}-presentation-instructions`;

  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] as const)),
    [objects],
  );
  const objectIndexById = useMemo(
    () => new Map(objects.map((entry, index) => [entry.id, index] as const)),
    [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 === undefined &&
      slides.some((slide) => slide.id === pendingSlideId)
    ) {
      pendingSlideIdRef.current = null;
      setLocalSlideId(pendingSlideId);
      return;
    }
    if (
      activeSlide &&
      requestedSlideId !== activeSlide.id &&
      controlledSlideId === undefined &&
      pendingSlideId === null
    ) {
      setLocalSlideId(activeSlide.id);
    }
  }, [activeSlide, controlledSlideId, requestedSlideId, slides]);

  useEffect(() => {
    if (selectedId && !objectById.has(selectedId) && controlledSelectionId === undefined) {
      setLocalSelectionId(null);
    }
  }, [controlledSelectionId, objectById, selectedId]);

  useEffect(() => {
    const pendingObjectId = pendingObjectIdRef.current;
    if (pendingObjectId && controlledSelectionId === undefined && 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: PointerEvent) => {
      const target = event.target;
      if (!(target instanceof Node)) return;
      if (mobileSelectorTriggerRef.current?.contains(target)) return;
      if (mobileSelectorPanelRef.current?.contains(target)) return;
      setMobileSelectorOpen(false);
    };
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key !== "Escape") return;
      event.preventDefault();
      setMobileSelectorOpen(false);
      mobileSelectorTriggerRef.current?.focus();
    };
    document.addEventListener("pointerdown", onPointerDown);
    document.addEventListener("keydown", onKeyDown);
    return () => {
      document.removeEventListener("pointerdown", onPointerDown);
      document.removeEventListener("keydown", onKeyDown);
    };
  }, [mobileSelectorOpen]);

  useLayoutEffect(() => {
    const element = viewportRef.current;
    if (!element) return;
    const measure = () => {
      const stage = stageRef.current;
      const measuredWidth = element.clientWidth;
      const measuredHeight = element.clientHeight;
      const next: ViewportMetrics = {
        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 as PresentationShape).geometry !== "line"
    ) {
      const rebound = {
        ...edit,
        shape: currentEntry.object as PresentationShape,
      };
      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<PresentationPosition>(() => {
    const slideWidth = presentation.slideSize.width;
    const slideHeight = presentation.slideSize.height;
    const stageWidth = slideWidth * zoom;
    const stageHeight = slideHeight * zoom;
    if (stageWidth <= viewport.width && stageHeight <= 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: DisplayObject | null) => {
      textEditRef.current = null;
      setTextEdit(null);
      setDraftPosition(null);
      if (controlledSelectionId === undefined) setLocalSelectionId(entry?.id ?? null);
      if (activeSlide) onSelectionChange?.(entry?.object ?? null, activeSlide);
    },
    [activeSlide, controlledSelectionId, onSelectionChange],
  );

  const selectSlide = useCallback(
    (slide: Slide, index: number) => {
      if (controlledSlideId === undefined) setLocalSlideId(slide.id);
      selectObject(null);
      onSlideChange?.(slide, index);
    },
    [controlledSlideId, onSlideChange, selectObject],
  );

  const changeZoom = useCallback(
    (next: number) => {
      const clamped = clampZoom(next);
      setFitMode(false);
      if (clamped === zoom) return;
      if (controlledZoom === undefined) setLocalZoom(clamped);
      onZoomChange?.(clamped);
    },
    [controlledZoom, onZoomChange, zoom],
  );

  const applyFittedZoom = useCallback(() => {
    const next = fittedPresentationZoom(viewport, presentation.slideSize);
    if (next === zoom) return;
    if (controlledZoom === undefined) setLocalZoom(next);
    onZoomChange?.(next);
  }, [controlledZoom, onZoomChange, presentation.slideSize, viewport, zoom]);

  const fitSlide = useCallback(() => {
    setFitMode(true);
    applyFittedZoom();
  }, [applyFittedZoom]);

  useLayoutEffect(() => {
    if (!viewportMeasured || controlledZoom !== undefined) 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: string, command: PresentationCommit, rollback: () => void, retry: () => void) => {
      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: void | Promise<void>;
      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: DisplayObject, kind: "move" | "resize", next: PresentationPosition) => {
      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: PresentationCommit = {
        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: PresentationCommit = { 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: PresentationCommit = {
      kind: "slide-delete",
      slideId: activeSlide.id,
      index: activeIndex,
    };
    const submit = () =>
      runCommit(`slide-delete:${activeSlide.id}`, command, () => undefined, submit);
    submit();
  }, [activeIndex, activeSlide, mutationsBlocked, runCommit]);

  const insertTextBox = useCallback(() => {
    if (mutationsBlocked || !activeSlide) return;
    const objectId = randomPresentationId();
    const position = nextTextBoxPosition(objects, presentation.slideSize);
    const command: PresentationCommit = {
      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: PresentationCommit = {
      kind: "object-delete",
      slideId: activeSlide.id,
      objectId: selected.id,
    };
    const submit = () =>
      runCommit(`object-delete:${activeSlide.id}:${selected.id}`, command, () => undefined, submit);
    submit();
  }, [activeSlide, mutationsBlocked, runCommit, selected]);

  const startTextEdit = useCallback(
    (entry: DisplayObject | null) => {
      if (mutationsBlocked || !entry || entry.readOnly || entry.kind !== "shape") return;
      const shape = entry.object as PresentationShape;
      if (shape.geometry === "line") return;
      const before = shape.text.toString();
      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 !== undefined)) 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: PresentationCommit = {
        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: -1 | 1) => {
      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: -1 | 1) => {
      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: Slide, index: number) => {
      if (slide !== activeSlide) selectSlide(slide, index);
      setMobileSelectorOpen(false);
      mobileSelectorTriggerRef.current?.focus();
    },
    [activeSlide, selectSlide],
  );

  const handleCanvasKeyDown = useCallback(
    (event: ReactKeyboardEvent<SVGSVGElement>) => {
      if (event.metaKey || event.ctrlKey) {
        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: ReactPointerEvent<SVGElement>): { x: number; y: number } => {
      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: ReactPointerEvent<SVGElement>, entry: DisplayObject, mode: "move" | "resize") => {
      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: ReactPointerEvent<SVGSVGElement>) => {
      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: ReactPointerEvent<SVGSVGElement>) => {
      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: ReactPointerEvent<SVGSVGElement>, cancel = false) => {
      const drag = dragRef.current;
      if (
        !drag ||
        drag.pointerId !== event.pointerId ||
        (!cancel && authoringBlockedReason !== undefined)
      )
        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: ReactPointerEvent<SVGSVGElement>) => {
      const drag = dragRef.current;
      if (!drag || drag.pointerId !== event.pointerId || authoringBlockedReason !== undefined)
        return;
      dragRef.current = null;
      setDraftPosition(null);
    },
    [authoringBlockedReason],
  );

  const railStart = Math.max(0, Math.floor(rail.scrollTop / RAIL_ITEM_HEIGHT) - RAIL_OVERSCAN);
  const railEnd = Math.min(
    slides.length,
    Math.ceil((rail.scrollTop + rail.height) / RAIL_ITEM_HEIGHT) + RAIL_OVERSCAN,
  );
  const mobileRailStart = Math.max(
    0,
    Math.floor(mobileRail.scrollTop / MOBILE_RAIL_ITEM_HEIGHT) - MOBILE_RAIL_OVERSCAN,
  );
  const mobileRailEnd = Math.min(
    slides.length,
    Math.ceil((mobileRail.scrollTop + mobileRail.height) / MOBILE_RAIL_ITEM_HEIGHT) +
      MOBILE_RAIL_OVERSCAN,
  );
  const slideCountLabel =
    activeIndex >= 0 ? `${activeIndex + 1} / ${slides.length}` : `0 / ${slides.length}`;
  const stageWidth = presentation.slideSize.width * zoom;
  const stageHeight = presentation.slideSize.height * zoom;

  return (
    <div
      className={cn("flex size-full min-w-0 flex-col bg-og-surface-1", className)}
      style={{ minHeight: "22rem" }}
      data-og-presentation-editor
      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" : undefined
      }
    >
      <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"
      >
        <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto px-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
          <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"
          >
            <ChevronLeftIcon />
          </button>
          <button
            ref={mobileSelectorTriggerRef}
            type="button"
            aria-label={t("artifacts.presentationEditor.chooseSlide")}
            aria-haspopup="listbox"
            aria-expanded={mobileSelectorOpen}
            aria-controls={mobileSelectorOpen ? `${domId}-mobile-slides` : undefined}
            disabled={slides.length === 0}
            data-og-mobile-slide-selector
            onClick={toggleMobileSlideSelector}
            className="inline-flex min-h-11 min-w-16 shrink-0 items-center justify-center rounded-og-sm px-2 text-og-xs tabular-nums text-og-fg-muted hover:bg-og-surface-3 hover:text-og-fg disabled:opacity-35 sm:hidden"
          >
            <span>{slideCountLabel}</span>
          </button>
          <span className="hidden min-w-16 shrink-0 text-center text-og-xs tabular-nums text-og-fg-muted sm:inline">
            {slideCountLabel}
          </span>
          <button
            type="button"
            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"
          >
            <ChevronRightIcon />
          </button>
          <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"
          >
            <FilePlus2Icon />
          </button>
          <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"
          >
            <Trash2Icon />
          </button>
          <span className="mx-1 h-4 w-px shrink-0 bg-og-border" />
          <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"
          >
            <MinusIcon />
          </button>
          <span className="min-w-11 shrink-0 text-center text-og-xs tabular-nums text-og-fg-muted">
            {Math.round(zoom * 100)}%
          </span>
          <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"
          >
            <PlusIcon />
          </button>
          <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"
          >
            <ExpandIcon />
          </button>
          <span className="mx-1 h-4 w-px shrink-0 bg-og-border" />
          <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"
          >
            <TypeIcon />
          </button>
          <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"
          >
            <Trash2Icon />
          </button>
        </div>
        <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 ? " · View only" : ""}`
                      : t("artifacts.presentationEditor.selectAnObjectToEdit")
          }
        >
          {commandFailure
            ? t("artifacts.presentationEditor.changeNotSaved")
            : authoringStatus
              ? authoringStatus
              : pendingCommands > 0
                ? t("artifacts.presentationEditor.saving")
                : mutationsBlocked
                  ? t("artifacts.presentationEditor.viewOnly")
                  : selected
                    ? `${objectLabel(t, selected)}${selected.readOnly ? " · View only" : ""}`
                    : t("artifacts.presentationEditor.selectAnObjectToEdit")}
        </span>
      </div>

      <div role="status" aria-live="polite" className="sr-only">
        {commandFailure?.message ??
          authoringStatus ??
          (pendingCommands > 0 ? t("artifacts.presentationEditor.savingPresentationChanges") : "")}
      </div>

      <div className="relative flex min-h-0 min-w-0 flex-1">
        <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)}`
              : undefined
          }
          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
          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);
          }}
        >
          <div className="relative w-full" style={{ height: slides.length * RAIL_ITEM_HEIGHT }}>
            {slides.slice(railStart, railEnd).map((slide, offset) => {
              const index = railStart + offset;
              const active = slide === activeSlide;
              return (
                <button
                  key={slide.id}
                  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}
                >
                  <span className="w-5 shrink-0 pt-0.5 text-right text-og-xs tabular-nums text-og-fg-subtle">
                    {index + 1}
                  </span>
                  <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 }}
                  >
                    <SlideThumbnail
                      slide={slide}
                      width={presentation.slideSize.width}
                      height={presentation.slideSize.height}
                      paintRevision={`${String(revision ?? "")}:${modelEpoch}`}
                    />
                  </span>
                </button>
              );
            })}
          </div>
        </div>

        {mobileSelectorOpen ? (
          <div
            ref={mobileSelectorPanelRef}
            className="absolute left-2 top-2 z-40 max-w-56 overflow-hidden rounded-og-md border border-og-border bg-og-surface-1 shadow-og-md sm:hidden"
            style={{ width: "calc(100% - 1rem)" }}
          >
            <div
              ref={mobileRailRef}
              id={`${domId}-mobile-slides`}
              role="listbox"
              tabIndex={0}
              aria-label={t("artifacts.presentationEditor.slides")}
              aria-orientation="vertical"
              aria-activedescendant={
                activeSlide && activeIndex >= mobileRailStart && activeIndex < mobileRailEnd
                  ? `${domId}-mobile-slide-${safeDomId(activeSlide.id)}`
                  : undefined
              }
              className="max-h-72 overflow-y-auto outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent"
              data-og-mobile-slide-list
              data-og-window-start={mobileRailStart}
              data-og-window-end={mobileRailEnd}
              onScroll={(event) => {
                const scrollTop = event.currentTarget.scrollTop;
                const height = event.currentTarget.clientHeight;
                setMobileRail((current) => ({
                  scrollTop,
                  height: height || current.height,
                }));
              }}
              onKeyDown={(event) => {
                if (event.key === "Escape") {
                  event.preventDefault();
                  setMobileSelectorOpen(false);
                  mobileSelectorTriggerRef.current?.focus();
                  return;
                }
                const nextIndex = nextSlideIndexFromKey(event.key, activeIndex, slides.length);
                if (nextIndex === null) return;
                event.preventDefault();
                const next = slides[nextIndex];
                if (!next) return;
                if (next !== activeSlide) selectSlide(next, nextIndex);
                const list = event.currentTarget;
                const top = nextIndex * MOBILE_RAIL_ITEM_HEIGHT;
                const bottom = top + MOBILE_RAIL_ITEM_HEIGHT;
                if (top < list.scrollTop) list.scrollTop = top;
                else if (bottom > list.scrollTop + list.clientHeight) {
                  list.scrollTop = bottom - list.clientHeight;
                }
              }}
            >
              <div
                className="relative w-full"
                style={{ height: slides.length * MOBILE_RAIL_ITEM_HEIGHT }}
              >
                {slides.slice(mobileRailStart, mobileRailEnd).map((slide, offset) => {
                  const index = mobileRailStart + offset;
                  const active = slide === activeSlide;
                  return (
                    <button
                      key={slide.id}
                      id={`${domId}-mobile-slide-${safeDomId(slide.id)}`}
                      type="button"
                      role="option"
                      tabIndex={-1}
                      aria-selected={active}
                      aria-label={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}
                    >
                      <span className="w-7 shrink-0 text-right text-og-xs tabular-nums text-og-fg-subtle">
                        {index + 1}
                      </span>
                      <span className="min-w-0 flex-1 truncate text-og-sm">
                        {slide.title ||
                          t("artifacts.presentationEditor.slideIndex", { index: index + 1 })}
                      </span>
                    </button>
                  );
                })}
              </div>
            </div>
          </div>
        ) : null}

        <div
          ref={viewportRef}
          className="relative min-h-0 min-w-0 flex-1 overflow-auto bg-og-surface-3/60 p-6"
          onScroll={(event) => {
            const element = event.currentTarget;
            const width = element.clientWidth || viewport.width;
            const height = element.clientHeight || viewport.height;
            const next: ViewportMetrics = {
              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
        >
          {commandFailure ? (
            <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)" }}
            >
              <span className="truncate">{commandFailure.message}</span>
              <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"
              >
                {t("artifacts.presentationEditor.retry")}
              </button>
            </div>
          ) : null}
          {activeSlide ? (
            <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
              // The slide is white paper in both app themes, so its selection
              // chrome uses the light palette to stay visible on it.
              data-og-theme="light"
            >
              <canvas
                ref={canvasRef}
                aria-hidden
                className="absolute inset-0 size-full"
                style={{ width: stageWidth, height: stageHeight }}
              />
              <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 || undefined}
                viewBox={`0 0 ${presentation.slideSize.width} ${presentation.slideSize.height}`}
                className="absolute inset-0 size-full touch-none outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent"
                onKeyDown={handleCanvasKeyDown}
                onPointerDown={handlePointerDown}
                onPointerMove={handlePointerMove}
                onPointerUp={(event) => finishDrag(event)}
                onPointerCancel={(event) => finishDrag(event, true)}
                onLostPointerCapture={handleLostPointerCapture}
                onDoubleClick={() => startTextEdit(selected)}
              >
                {selected && effectiveSelectedPosition ? (
                  <g
                    data-og-presentation-object={selected.id}
                    transform={selectionTransform(selected, effectiveSelectedPosition)}
                  >
                    <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 ? (
                      <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}
                  </g>
                ) : null}
              </svg>

              {selected ? (
                <span id={selectionProxyId} role="status" aria-live="polite" className="sr-only">
                  {accessibleObjectLabel(t, selected)}
                </span>
              ) : null}

              <span id={instructionsId} className="sr-only">
                {t("artifacts.presentationEditor.useBracketKeysToSelect")}
              </span>

              {textEdit && selected?.id === textEdit.shape.id && effectiveSelectedPosition ? (
                <textarea
                  ref={editorRef}
                  aria-label={t("artifacts.presentationEditor.editName", {
                    name: textEdit.shape.name,
                  })}
                  value={textDraft}
                  readOnly={mutationsBlocked}
                  maxLength={1_000_000}
                  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
                        ? undefined
                        : `rotate(${textEdit.shape.rotation}deg)`,
                    transformOrigin: "center",
                  }}
                />
              ) : null}
            </div>
          ) : (
            <div className="grid size-full min-h-72 place-items-center text-og-sm text-og-fg-muted">
              {t("artifacts.presentationEditor.thisPresentationHasNoSlides")}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/** Artifact chrome plus the editor, for drop-in SDK embedding. */
export function PresentationArtifactSurface({
  presentation,
  title: titleProp,
  showHeader,
  subtitle,
  actions,
  busy,
  className,
  ...editorProps
}: PresentationArtifactSurfaceProps) {
  const t = useOpenGeniText();
  const title =
    titleProp === undefined ? t("artifacts.presentationEditor.presentation") : titleProp;
  const count = presentation.slides.items.length;
  return (
    <ArtifactSurface
      modality="presentation"
      title={title}
      showHeader={showHeader}
      subtitle={subtitle ?? t("counts.slides", { count })}
      actions={actions}
      busy={busy}
      className={className}
    >
      <PresentationEditor {...editorProps} presentation={presentation} />
    </ArtifactSurface>
  );
}

/** Artifact chrome over the projection-first editor. */
export function PresentationProjectionArtifactSurface({
  projection,
  title: titleProp,
  showHeader,
  subtitle,
  actions,
  busy,
  className,
  ...editorProps
}: PresentationProjectionArtifactSurfaceProps) {
  const t = useOpenGeniText();
  const title =
    titleProp === undefined ? t("artifacts.presentationEditor.presentation") : titleProp;
  const count = projection.slides.length;
  return (
    <ArtifactSurface
      modality="presentation"
      title={title}
      showHeader={showHeader}
      subtitle={subtitle ?? t("counts.slides", { count })}
      actions={actions}
      busy={busy}
      className={className}
    >
      <PresentationProjectionEditor {...editorProps} projection={projection} />
    </ArtifactSurface>
  );
}

function SlideThumbnail({
  slide,
  width,
  height,
  paintRevision,
}: {
  slide: Slide;
  width: number;
  height: number;
  paintRevision: string;
}) {
  const t = useOpenGeniText();
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const imageCacheRef = useRef(new Map<string, CanvasImageEntry>());
  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 = new Set<string>();
    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 <canvas ref={canvasRef} aria-hidden className="block size-full" />;
}

type PresentationProjectionView = {
  presentation: Presentation;
  slideById: Map<string, PresentationSlideProjection>;
  elementById: Map<string, PresentationProjectionElement>;
};

function presentationViewFromProjection(
  projection: PresentationEditorProjection,
): PresentationProjectionView {
  if (projection.slides.length > MAX_PROJECTION_SLIDES) {
    throw new Error(`Presentation projection exceeds ${MAX_PROJECTION_SLIDES} slides`);
  }
  const slideById = new Map<string, PresentationSlideProjection>();
  const elementById = new Map<string, PresentationProjectionElement>();
  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,
    } as unknown as Slide;
  });
  return {
    presentation: {
      slideSize,
      slides: { items: slides },
    } as unknown as Presentation,
    slideById,
    elementById,
  };
}

function presentationElementView(
  element: PresentationProjectionElement,
  byId: Map<string, PresentationProjectionElement>,
  depth: number,
): PresentationElement {
  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,
      } as unknown as PresentationShape;
    }
    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) : undefined,
            line: cloneProjectionLine(series.line),
          })),
        },
        xAxis: element.xAxis ? { ...element.xAxis } : undefined,
        yAxis: element.yAxis ? { ...element.yAxis } : undefined,
        dataLabels: element.dataLabels ? { ...element.dataLabels } : undefined,
      } as unknown as PresentationChart;
    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) : undefined,
        fit: element.fit ?? "contain",
        crop: element.crop ? { ...element.crop } : undefined,
        geometry: element.geometry ?? "rect",
        borderRadius: element.borderRadius,
        rotation: finite(element.rotation ?? 0, 0),
        flipHorizontal: element.flipHorizontal ?? false,
        flipVertical: element.flipVertical ?? false,
        sourceForSvg: () => source,
      } as unknown as PresentationImage;
    }
    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 ?? {}) },
      } as unknown as PresentationTable;
    }
    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)),
      } as unknown as PresentationGroup;
    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("", undefined),
      } as unknown as PresentationShape;
  }
}

function mutableProjectionText(
  initial: string,
  style: PresentationProjectionTextStyle | undefined,
): PresentationShape["text"] {
  let value = boundedProjectionText(initial);
  return {
    style: { ...(style ?? {}) },
    set(next: string) {
      value = boundedProjectionText(next);
    },
    toString() {
      return value;
    },
  } as PresentationShape["text"];
}

function cloneProjectionFill(fill: PresentationProjectionFill): PresentationFill {
  return typeof fill === "string" ? fill : { ...fill };
}

function cloneProjectionLine(line: PresentationProjectionLine | undefined): PresentationLine {
  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: string): string {
  return value.slice(0, MAX_PROJECTION_TEXT);
}

function boundedSpan(value: number | undefined): number {
  return Math.max(1, Math.min(10_000, Math.floor(finite(value ?? 1, 1))));
}

function safeProjectionImageSource(source: string | undefined): string | undefined {
  if (!source || source.length > 64 * 1024 * 1024) return undefined;
  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 undefined;
    const url = new URL(source, base);
    return url.origin === globalThis.location.origin && /^https?:$/.test(url.protocol)
      ? url.href
      : undefined;
  } catch {
    return undefined;
  }
}

function asPresentationError(cause: unknown): Error {
  return cause instanceof Error ? cause : new Error("Presentation change failed");
}

function listSlideObjects(slide: Slide): DisplayObject[] {
  return slide.elements.map(displayObjectFromElement);
}

function displayObjectFromElement(
  object: PresentationElement | PresentationGroupChild,
): DisplayObject {
  const readOnly =
    (object as PresentationElement & { __projectionReadOnly?: boolean }).__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: DisplayObject[],
  slideSize: { width: number; height: number },
): SpatialIndex {
  const buckets = new Map<string, number[]>();
  const overflowObjects: number[] = [];
  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: SpatialIndex, viewport: PresentationPosition): number[] {
  const seen = new Set<number>(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: OpenGeniText,
  options: {
    canvas: HTMLCanvasElement;
    slide: Slide;
    slideSize: { width: number; height: number };
    zoom: number;
    objects: DisplayObject[];
    objectIndexes: number[];
    renderRegion: PresentationPosition;
    draftPosition: DraftPosition | null;
    imageCache: Map<string, CanvasImageEntry>;
    requestRepaint: () => void;
  },
): void {
  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(
    0.0001,
    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 = new Set<string>();
  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: OpenGeniText,
  context: CanvasRenderingContext2D,
  entry: DisplayObject,
  position: PresentationPosition,
  imageCache: Map<string, CanvasImageEntry>,
  requestRepaint: () => void,
  renderRegion: PresentationPosition,
  pixelScale: number,
  usedImageSources: Set<string>,
): void {
  switch (entry.kind) {
    case "shape":
      drawShape(t, context, entry.object as PresentationShape, position);
      return;
    case "chart":
      drawChart(t, context, entry.object as PresentationChart, position);
      return;
    case "image": {
      const source = drawImage(
        t,
        context,
        entry.object as PresentationImage,
        position,
        imageCache,
        requestRepaint,
      );
      if (source) usedImageSources.add(source);
      return;
    }
    case "table":
      drawTable(t, context, entry.object as PresentationTable, position, renderRegion, pixelScale);
      return;
    case "group":
      drawGroup(
        t,
        context,
        entry.object as PresentationGroup,
        position,
        imageCache,
        requestRepaint,
        renderRegion,
        pixelScale,
        usedImageSources,
      );
  }
}

function drawTable(
  t: OpenGeniText,
  context: CanvasRenderingContext2D,
  table: PresentationTable,
  position: PresentationPosition,
  renderRegion: PresentationPosition,
  pixelScale: number,
): void {
  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: readonly number[], value: number): number {
  return Math.max(0, Math.min(offsets.length - 2, lowerBound(offsets, value) - 1));
}

function visibleTrackEnd(offsets: readonly number[], value: number): number {
  return Math.max(0, Math.min(offsets.length - 1, lowerBound(offsets, value) + 1));
}

function lowerBound(values: readonly number[], target: number): number {
  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: CanvasRenderingContext2D,
  table: PresentationTable,
  position: PresentationPosition,
  columnOffsets: readonly number[],
  rowOffsets: readonly number[],
  visible: { columnStart: number; columnEnd: number; rowStart: number; rowEnd: number },
): void {
  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 === undefined) 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 === undefined) continue;
    context.moveTo(position.left, y);
    context.lineTo(position.left + position.width, y);
  }
  applyFillAndLine(context, "none", table.line, true);
  context.restore();
}

function normalizeTableTracks(values: readonly number[], count: number, total: number): number[] {
  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: readonly number[], start: number): number[] {
  const offsets = [start];
  for (const track of tracks) offsets.push((offsets.at(-1) ?? start) + track);
  return offsets;
}

function drawGroup(
  t: OpenGeniText,
  context: CanvasRenderingContext2D,
  group: PresentationGroup,
  position: PresentationPosition,
  imageCache: Map<string, CanvasImageEntry>,
  requestRepaint: () => void,
  renderRegion: PresentationPosition,
  pixelScale: number,
  usedImageSources: Set<string>,
): void {
  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: PresentationGroup,
  position: PresentationPosition,
  region: PresentationPosition,
): PresentationPosition {
  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: OpenGeniText,
  context: CanvasRenderingContext2D,
  shape: PresentationShape,
  position: PresentationPosition,
): void {
  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: OpenGeniText,
  context: CanvasRenderingContext2D,
  chart: PresentationChart,
  position: PresentationPosition,
): void {
  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: number) =>
    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: CanvasRenderingContext2D,
  chart: PresentationChart,
  plot: PresentationPosition,
  baseline: number,
): void {
  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: CanvasRenderingContext2D,
  chart: PresentationChart,
  plot: PresentationPosition,
  palette: readonly string[],
): void {
  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: number, value: number) => {
    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: OpenGeniText,
  context: CanvasRenderingContext2D,
  image: PresentationImage,
  position: PresentationPosition,
  imageCache: Map<string, CanvasImageEntry>,
  requestRepaint: () => void,
): string | undefined {
  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: PresentationImage): string | undefined {
  try {
    return image.sourceForSvg();
  } catch {
    return undefined;
  }
}

function applyImageTransform(
  context: CanvasRenderingContext2D,
  image: PresentationImage,
  position: PresentationPosition,
): void {
  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: CanvasRenderingContext2D,
  image: PresentationImage,
  position: PresentationPosition,
): void {
  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: CanvasRenderingContext2D,
  source: HTMLImageElement,
  image: PresentationImage,
  position: PresentationPosition,
): void {
  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: Map<string, CanvasImageEntry>): void {
  for (const entry of cache.values()) disposeCanvasImageEntry(entry);
  cache.clear();
}

function disposeUnusedCanvasImages(
  cache: Map<string, CanvasImageEntry>,
  usedSources: ReadonlySet<string>,
): void {
  for (const [source, entry] of cache) {
    if (usedSources.has(source)) continue;
    disposeCanvasImageEntry(entry);
    cache.delete(source);
  }
}

function disposeCanvasImageEntry(entry: CanvasImageEntry): void {
  entry.image.onload = null;
  entry.image.onerror = null;
  entry.image.removeAttribute("src");
}

function drawText(
  t: OpenGeniText,
  context: CanvasRenderingContext2D,
  text: string,
  style: PresentationTextStyle,
  position: PresentationPosition,
): void {
  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: CanvasRenderingContext2D, text: string, width: number): string[] {
  const result: string[] = [];
  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: CanvasRenderingContext2D,
  fill: PresentationFill,
  line: PresentationLine,
  lineOnly: boolean,
): void {
  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: CanvasRenderingContext2D,
  x: number,
  y: number,
  width: number,
  height: number,
  radius: number,
): void {
  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: SpatialIndex, x: number, y: number): DisplayObject | null {
  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: DisplayObject, x: number, y: number): boolean {
  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: DisplayObject): PresentationPosition {
  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: DisplayObject): number {
  if (entry.kind === "shape") return finite((entry.object as PresentationShape).rotation, 0);
  if (entry.kind === "image") return finite((entry.object as PresentationImage).rotation, 0);
  if (entry.kind === "group") return finite((entry.object as PresentationGroup).rotation, 0);
  return 0;
}

function objectLabel(t: OpenGeniText, entry: DisplayObject): string {
  const object = entry.object;
  if (entry.kind === "shape") {
    const shape = object as PresentationShape;
    return shape.text.toString().trim() || shape.name || t("artifacts.presentationEditor.shape");
  }
  if (entry.kind === "chart")
    return (
      (object as PresentationChart).title || object.name || t("artifacts.presentationEditor.chart")
    );
  if (entry.kind === "image")
    return (
      (object as PresentationImage).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: OpenGeniText, entry: DisplayObject): string {
  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: readonly DisplayObject[],
  slideSize: Readonly<{ width: number; height: number }>,
): PresentationPosition {
  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: PresentationPosition | null = 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: PresentationPosition, b: PresentationPosition): number {
  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: PresentationPosition): PresentationPosition {
  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: number): number {
  return Math.max(-MAX_EDITOR_GEOMETRY, Math.min(MAX_EDITOR_GEOMETRY, value));
}

function positionFromDrag(drag: DragState, point: { x: number; y: number }): PresentationPosition {
  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: DisplayObject,
  position: PresentationPosition,
): string | undefined {
  const rotation = objectRotation(entry);
  if (rotation === 0) return undefined;
  const centerX = position.left + position.width / 2;
  const centerY = position.top + position.height / 2;
  return `rotate(${rotation} ${centerX} ${centerY})`;
}

function copyPosition(position: PresentationPosition): PresentationPosition {
  return {
    left: position.left,
    top: position.top,
    width: position.width,
    height: position.height,
  };
}

function samePosition(a: PresentationPosition, b: PresentationPosition): boolean {
  return a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height;
}

function sameViewport(a: ViewportMetrics, b: ViewportMetrics): boolean {
  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: PresentationPosition | undefined, b: PresentationPosition): boolean {
  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: number): number {
  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, finite(value, 0.75)));
}

function fittedPresentationZoom(
  viewport: Pick<ViewportMetrics, "width" | "height">,
  slideSize: Readonly<{ width: number; height: number }>,
): number {
  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: number, fallback: number): number {
  return Number.isFinite(value) ? value : fallback;
}

function safeDomId(value: string): string {
  return value.replaceAll(/[^a-zA-Z0-9_-]/g, "-");
}

function randomPresentationId(): string {
  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: number | string | undefined, position: PresentationPosition): number {
  if (typeof value === "number") return value;
  const min = Math.min(position.width, position.height);
  const preset = value?.startsWith("rounded-") ? value.slice("rounded-".length) : undefined;
  if (preset === "full") return min / 2;
  if (preset === "2xl") return 16;
  if (preset === "xl") return 12;
  if (preset === "lg") return 8;
  return 6;
}

const COLORS: Record<string, string> = {
  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: PresentationFill): string {
  const value = typeof fill === "string" ? fill : fill.color;
  return COLORS[value] ?? value;
}