From bd7960ee9649cd59d29eea0661d6a285fdb10cae Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Mon, 4 May 2026 16:17:50 +0200
Subject: [PATCH 1/5] =?UTF-8?q?=E2=AC=86=EF=B8=8F(frontend)=20bump=20cunni?=
 =?UTF-8?q?ngham-react=20and=20ui-kit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update @gouvfr-lasuite/cunningham-react from 4.2.0 to 4.3.0 and
@gouvfr-lasuite/ui-kit from 0.19.10 to 0.20.1, and regenerate the
cunningham design tokens accordingly. The new ui-kit drops the
"black" font weight and ships rounded form border-radius defaults.
---
 src/frontend/yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index ba392297d5..fb100c06c7 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -771,7 +771,7 @@
     "@babel/helper-module-transforms" "^7.27.1"
     "@babel/helper-plugin-utils" "^7.27.1"
 
-"@babel/plugin-transform-modules-systemjs@7.29.4", "@babel/plugin-transform-modules-systemjs@^7.27.1":
+"@babel/plugin-transform-modules-systemjs@^7.27.1":
   version "7.29.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.29.4.tgz#f621105da99919c15cf4bde6fcc7346ef95e7b20"
   integrity sha512-N7QmZ0xRZfjHOfZeQLJjwgX2zS9pdGHSVl/cjSGlo4dXMqvurfxXDMKY4RqEKzPozV78VMcd0lxyG13mlbKc4w==

From c29ef83194da4ca6da1f365ceb5e386715dad93c Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Mon, 4 May 2026 16:17:56 +0200
Subject: [PATCH 2/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20adapt=20moda?=
 =?UTF-8?q?ls=20to=20ModalDefaultVariantProps?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

cunningham-react 4.3.0 splits Modal props per variant. Switch
AlertModal and SideModal from the now-removed ModalProps alias to
the more precise ModalDefaultVariantProps type so the modal
wrappers keep type-checking against the new API.
---
 .../apps/impress/src/components/modal/SideModal.tsx    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/frontend/apps/impress/src/components/modal/SideModal.tsx b/src/frontend/apps/impress/src/components/modal/SideModal.tsx
index 9e6047c120..93ca9e18a8 100644
--- a/src/frontend/apps/impress/src/components/modal/SideModal.tsx
+++ b/src/frontend/apps/impress/src/components/modal/SideModal.tsx
@@ -1,5 +1,9 @@
-import { Modal, ModalSize } from '@gouvfr-lasuite/cunningham-react';
-import { ComponentPropsWithRef, PropsWithChildren } from 'react';
+import {
+  Modal,
+  ModalDefaultVariantProps,
+  ModalSize,
+} from '@gouvfr-lasuite/cunningham-react';
+import { PropsWithChildren } from 'react';
 import { createGlobalStyle } from 'styled-components';
 
 interface SideModalStyleProps {
@@ -35,7 +39,7 @@ const SideModalStyle = createGlobalStyle<SideModalStyleProps>`
   }
 `;
 
-type SideModalType = Omit<ComponentPropsWithRef<typeof Modal>, 'size'>;
+type SideModalType = Omit<ModalDefaultVariantProps, 'size'>;
 
 type SideModalProps = SideModalType & Partial<SideModalStyleProps>;
 

From 9dfb2203547961e4cf0702d52035f2a045d78c4f Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Mon, 4 May 2026 16:18:07 +0200
Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20presenter=20mod?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a presenter overlay that turns the current document into a
slide deck. The editor's blocks are snapshot at open time and
split into slides on each divider; navigation is driven by
keyboard shortcuts and a floating bar with browser fullscreen
support. The overlay is wired to the doc header toolbox via a
new "Present" entry, lazy-loaded to keep the editor bundle lean.
---
 CHANGELOG.md                                  |   6 +-
 .../docs/doc-header/components/DocToolBox.tsx |  28 ++
 .../components/PresenterFloatingBar.tsx       | 118 +++++++
 .../components/PresenterOverlay.tsx           | 159 +++++++++
 .../components/PresenterSlide.tsx             | 141 ++++++++
 .../features/docs/doc-presenter/constants.ts  |  44 +++
 .../hooks/useBrowserFullscreen.ts             |  89 +++++
 .../docs/doc-presenter/hooks/useFitScale.ts   | 307 ++++++++++++++++++
 .../hooks/usePresenterShortcuts.ts            |  99 ++++++
 .../docs/doc-presenter/hooks/useSlides.ts     |  81 +++++
 .../src/features/docs/doc-presenter/index.ts  |   1 +
 11 files changed, 1069 insertions(+), 4 deletions(-)
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-presenter/components/PresenterFloatingBar.tsx
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-presenter/components/PresenterOverlay.tsx
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-presenter/components/PresenterSlide.tsx
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-presenter/constants.ts
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/useBrowserFullscreen.ts
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/useFitScale.ts
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/usePresenterShortcuts.ts
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/useSlides.ts
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-presenter/index.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc118a1298..e7b131f667 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,11 +13,13 @@ and this project adheres to
 - ✨(buildpack) add PaaS deployment support, tested with Scalingo #2293
 - 🔧(backend) allow configuring settings OIDC_OP_USER_ENDPOINT_FORMAT
 - ⚡️(helm) create a dedicated svc and deployment for yprovider converter #2368
+- ✨(frontend) add the presenter mode
 
 ### Changed
 
 - ♻️(backend) allow global search in sub documents
 - ✨(backend) add a breadcrumb in the search response
+- ♿️(frontend) add aria-hidden to decorative avatar SVGs in share modal #2324
 
 ### Fixed
 
@@ -25,10 +27,6 @@ and this project adheres to
 - 🐛(backend) prevent admins/owners from overwriting other users comments
 - 🐛(backend) use computed_link_reach in handle_onboarding_document #2305
 
-### Changed
-
-- ♿️(frontend) add aria-hidden to decorative avatar SVGs in share modal #2324
-
 ## [v5.1.0] - 2026-05-11
 
 ### Added
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
index 19973d6c28..af1a1f4557 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
@@ -1,5 +1,6 @@
 import { Button, useModal } from '@gouvfr-lasuite/cunningham-react';
 import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
+import { Present } from '@gouvfr-lasuite/ui-kit/icons';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
@@ -79,6 +80,14 @@ const ModalExport =
       )
     : null;
 
+const PresenterOverlay = dynamic(
+  () =>
+    import('@/docs/doc-presenter').then((mod) => ({
+      default: mod.PresenterOverlay,
+    })),
+  { ssr: false },
+);
+
 interface DocToolBoxProps {
   doc: Doc;
 }
@@ -93,6 +102,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
 
   const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
   const [isModalExportOpen, setIsModalExportOpen] = useState(false);
+  const [isPresenterOpen, setIsPresenterOpen] = useState(false);
   const selectHistoryModal = useModal();
   const modalShare = useModal();
 
@@ -176,6 +186,15 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       showSeparator: true,
       show: !emoji && doc.abilities.partial_update && !isTopRoot,
     },
+    {
+      label: t('Present'),
+      icon: <Present />,
+      callback: () => {
+        setIsPresenterOpen(true);
+      },
+      show: !doc.deleted_at && !isSmallMobile,
+      testId: `docs-actions-present-${doc.id}`,
+    },
     {
       label: t('Copy link'),
       icon: <AddLinkSVG width={24} height={24} aria-hidden="true" />,
@@ -320,6 +339,15 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
           doc={doc}
         />
       )}
+      {isPresenterOpen && (
+        <PresenterOverlay
+          doc={doc}
+          onClose={() => {
+            setIsPresenterOpen(false);
+            restoreFocus();
+          }}
+        />
+      )}
     </Box>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-presenter/components/PresenterFloatingBar.tsx b/src/frontend/apps/impress/src/features/docs/doc-presenter/components/PresenterFloatingBar.tsx
new file mode 100644
index 0000000000..4dd7ded552
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-presenter/components/PresenterFloatingBar.tsx
@@ -0,0 +1,118 @@
+import { Button } from '@gouvfr-lasuite/cunningham-react';
+import {
+  ChevronLeft,
+  ChevronRight,
+  Maximize,
+  XMark,
+} from '@gouvfr-lasuite/ui-kit/icons';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box, Text } from '@/components';
+
+interface PresenterFloatingBarProps {
+  index: number;
+  total: number;
+  isFullscreen: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+  onToggleFullscreen: () => void;
+  onClose: () => void;
+}
+
+const barCss = css`
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  flex-direction: row !important;
+  align-items: center;
+  gap: 0.25rem;
+  padding: var(--c--globals--spacings--3xs, 4px);
+  border-radius: 8px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--c--contextuals--content--semantic--neutral--secondary);
+  border: 1px solid var(--c--contextuals--border--surface--primary);
+  background: var(--c--contextuals--background--surface--primary);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+`;
+
+const separatorCss = css`
+  width: 1px;
+  height: 1.25rem;
+  background: var(--c--theme--colors--greyscale-200, #e5e5e5);
+  margin: 0 0.25rem;
+`;
+
+export const PresenterFloatingBar = ({
+  index,
+  total,
+  isFullscreen,
+  onPrev,
+  onNext,
+  onToggleFullscreen,
+  onClose,
+}: PresenterFloatingBarProps) => {
+  const { t } = useTranslation();
+  const isFirst = index <= 0;
+  const isLast = index >= total - 1;
+
+  return (
+    <Box
+      $direction="row"
+      $align="center"
+      $css={barCss}
+      role="toolbar"
+      aria-label={t('Presenter controls')}
+    >
+      <Button
+        size="small"
+        color="neutral"
+        variant="tertiary"
+        disabled={isFirst}
+        onClick={onPrev}
+        aria-label={t('Previous slide')}
+        icon={<ChevronLeft />}
+      />
+      <Text
+        as="span"
+        $size="sm"
+        $color="neutral"
+        aria-label={t('Slide {{current}} of {{total}}', {
+          current: index + 1,
+          total,
+        })}
+      >
+        {index + 1} / {total}
+      </Text>
+      <Button
+        size="small"
+        color="neutral"
+        variant="tertiary"
+        disabled={isLast}
+        onClick={onNext}
+        aria-label={t('Next slide')}
+        icon={<ChevronRight />}
+      />
+      <Box $css={separatorCss} aria-hidden />
+      <Button
+        size="small"
+        color="neutral"
+        variant="tertiary"
+        onClick={onToggleFullscreen}
+        aria-label={isFullscreen ? t('Exit fullscreen') : t('Enter fullscreen')}
+        icon={<Maximize />}
+      />
+      <Button
+        size="small"
+        color="neutral"
+        variant="tertiary"
+        onClick={onClose}
+        aria-label={t('Close presenter')}
+        icon={<XMark />}
+      />
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-presenter/components/PresenterOverlay.tsx b/src/frontend/apps/impress/src/features/docs/doc-presenter/components/PresenterOverlay.tsx
new file mode 100644
index 0000000000..a4d3af33fe
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-presenter/components/PresenterOverlay.tsx
@@ -0,0 +1,159 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box } from '@/components';
+import { useEditorStore } from '@/docs/doc-editor/stores';
+import { Doc } from '@/docs/doc-management';
+import { useFocusStore } from '@/stores';
+
+import { PRESENTER_WINDOW_RADIUS } from '../constants';
+import { useBrowserFullscreen } from '../hooks/useBrowserFullscreen';
+import { usePresenterShortcuts } from '../hooks/usePresenterShortcuts';
+import { useSlides } from '../hooks/useSlides';
+
+import { PresenterFloatingBar } from './PresenterFloatingBar';
+import { PresenterSlide } from './PresenterSlide';
+
+interface PresenterOverlayProps {
+  doc: Doc;
+  onClose: () => void;
+}
+
+const overlayCss = css`
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: white;
+  display: flex;
+  flex-direction: column;
+`;
+
+const slideAreaCss = css`
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background: white;
+`;
+
+export const PresenterOverlay = ({
+  doc: _doc,
+  onClose,
+}: PresenterOverlayProps) => {
+  const { t } = useTranslation();
+  const editor = useEditorStore((state) => state.editor);
+  const { addLastFocus } = useFocusStore();
+
+  // Snapshot the editor's blocks once at mount. Subsequent collaborator
+  // edits do not affect the ongoing presentation (by design).
+  const snapshotRef = useRef<unknown[] | null>(null);
+  if (snapshotRef.current === null) {
+    snapshotRef.current = editor ? [...editor.document] : [];
+  }
+  const snapshotBlocks = snapshotRef.current;
+
+  // The presenter is opened from a dropdown menu item which doesn't expose
+  // its trigger to the click handler — so we capture the previously focused
+  // element here, on mount, after the dropdown has restored focus to its
+  // trigger button. `restoreFocus()` is then called by the parent on close.
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    addLastFocus(document.activeElement as HTMLElement | null);
+  }, [addLastFocus]);
+
+  const slides = useSlides(snapshotBlocks as { type: string }[]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const total = slides.length;
+  const clamp = useCallback(
+    (i: number) => Math.max(0, Math.min(i, total - 1)),
+    [total],
+  );
+
+  const goPrev = useCallback(
+    () => setCurrentIndex((i) => clamp(i - 1)),
+    [clamp],
+  );
+  const goNext = useCallback(
+    () => setCurrentIndex((i) => clamp(i + 1)),
+    [clamp],
+  );
+  const goFirst = useCallback(() => setCurrentIndex(0), []);
+  const goLast = useCallback(
+    () => setCurrentIndex(clamp(total - 1)),
+    [clamp, total],
+  );
+
+  const { isFullscreen, enter, exitIfOwned, toggle } = useBrowserFullscreen();
+
+  useEffect(() => {
+    void enter();
+    return () => {
+      void exitIfOwned();
+    };
+  }, [enter, exitIfOwned]);
+
+  usePresenterShortcuts({
+    onPrev: goPrev,
+    onNext: goNext,
+    onFirst: goFirst,
+    onLast: goLast,
+    onToggleFullscreen: () => void toggle(),
+    onClose,
+    isFullscreen,
+  });
+
+  const mountedIndices = useMemo(() => {
+    const from = Math.max(0, currentIndex - PRESENTER_WINDOW_RADIUS);
+    const to = Math.min(total - 1, currentIndex + PRESENTER_WINDOW_RADIUS);
+    const indices: number[] = [];
+    for (let i = from; i <= to; i += 1) {
+      indices.push(i);
+    }
+    return indices;
+  }, [currentIndex, total]);
+
+  const frameRef = useRef<HTMLDivElement>(null);
+
+  if (typeof document === 'undefined') {
+    return null;
+  }
+
+  return createPortal(
+    <Box
+      $css={overlayCss}
+      role="dialog"
+      aria-modal="true"
+      aria-label={t('Presenter mode')}
+    >
+      <Box ref={frameRef} $css={slideAreaCss}>
+        {mountedIndices.map((i) => (
+          <PresenterSlide
+            key={i}
+            blocks={slides[i] as unknown[]}
+            frameRef={frameRef}
+            isCurrent={i === currentIndex}
+            ariaLabel={t('Slide {{current}} of {{total}}', {
+              current: i + 1,
+              total,
+            })}
+          />
+        ))}
+      </Box>
+
+      <PresenterFloatingBar
+        index={currentIndex}
+        total={total}
+        isFullscreen={isFullscreen}
+        onPrev={goPrev}
+        onNext={goNext}
+        onToggleFullscreen={() => void toggle()}
+        onClose={onClose}
+      />
+    </Box>,
+    document.body,
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-presenter/components/PresenterSlide.tsx b/src/frontend/apps/impress/src/features/docs/doc-presenter/components/PresenterSlide.tsx
new file mode 100644
index 0000000000..f1fe087314
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-presenter/components/PresenterSlide.tsx
@@ -0,0 +1,141 @@
+import { BlockNoteView } from '@blocknote/mantine';
+import { useCreateBlockNote } from '@blocknote/react';
+import { RefObject, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box } from '@/components';
+import { blockNoteSchema } from '@/docs/doc-editor/components/BlockNoteEditor';
+
+import {
+  PRESENTER_FRAME_PADDING_Y,
+  PRESENTER_SLIDE_DESIGN_WIDTH,
+  PRESENTER_SLIDE_FADE_MS,
+} from '../constants';
+import { useFitScale } from '../hooks/useFitScale';
+
+interface PresenterSlideProps {
+  blocks: unknown[];
+  frameRef: RefObject<HTMLDivElement | null>;
+  isCurrent: boolean;
+  ariaLabel?: string;
+}
+
+// Outer is the scroll container. It always spans the full frame height so the
+// content can scroll all the way to the visual top/bottom of the viewport when
+// the user drags the scrollbar. The top/bottom padding provides the breathing
+// room at rest (scrollTop = 0 shows the content offset by paddingY); when the
+// user scrolls, the padding scrolls off with the content (classic scroll-padding
+// behaviour you get for free from padding on a scroll container).
+//
+// We use display: flex + margin: auto on the stage to centre vertically when
+// the content fits, while still allowing the stage to overflow (and scroll)
+// when it doesn't fit — a well-known CSS idiom (`align-items: center` would
+// instead clip the overflowing top).
+const outerCss = css`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: ${PRESENTER_FRAME_PADDING_Y}px;
+  padding-bottom: ${PRESENTER_FRAME_PADDING_Y}px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: white;
+  transition: opacity ${PRESENTER_SLIDE_FADE_MS}ms ease;
+  /* Hide editor chrome that may leak through despite editable={false} */
+  .bn-side-menu,
+  .bn-formatting-toolbar,
+  .bn-slash-menu {
+    display: none !important;
+  }
+`;
+
+// The stage absorbs the un-scaled inner's layout box. Its explicit height
+// matches the painted height of the scaled inner (`naturalH × scale`), so
+// the scroll container sees a `scrollHeight` aligned with what the user
+// actually sees — not the un-transformed layout box.
+// `margin: auto` centres the stage vertically when it fits the outer's
+// content area, and collapses to 0 when it doesn't (enabling natural
+// top-anchored scroll).
+const stageCss = css`
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  margin: auto;
+  flex-shrink: 0;
+`;
+
+const innerCss = css`
+  display: block;
+  width: ${PRESENTER_SLIDE_DESIGN_WIDTH}px;
+  transform-origin: left top;
+`;
+
+export const PresenterSlide = ({
+  blocks,
+  frameRef,
+  isCurrent,
+  ariaLabel,
+}: PresenterSlideProps) => {
+  const { t } = useTranslation();
+  const innerRef = useRef<HTMLDivElement>(null);
+  const editor = useCreateBlockNote({
+    initialContent:
+      // BlockNote rejects an empty initialContent array — fall back to one empty paragraph.
+      blocks.length > 0
+        ? (blocks as NonNullable<
+            Parameters<typeof useCreateBlockNote>[0]
+          >['initialContent'])
+        : undefined,
+    schema: blockNoteSchema,
+  });
+
+  const { scale, outerWidth, stageHeight, isMeasured } = useFitScale(
+    innerRef,
+    frameRef,
+  );
+
+  const outerStyle: React.CSSProperties = {
+    width: outerWidth !== null ? `${outerWidth}px` : undefined,
+    opacity: isMeasured && isCurrent ? 1 : 0,
+    visibility: isCurrent ? 'visible' : 'hidden',
+    pointerEvents: isCurrent ? 'auto' : 'none',
+  };
+
+  const stageStyle: React.CSSProperties = {
+    height: stageHeight !== null ? `${stageHeight}px` : undefined,
+  };
+
+  const innerStyle: React.CSSProperties = {
+    transform: isMeasured && scale !== null ? `scale(${scale})` : 'none',
+  };
+
+  return (
+    <Box
+      $css={outerCss}
+      style={outerStyle}
+      role="group"
+      aria-label={ariaLabel ?? t('Presenter slide')}
+      aria-hidden={!isCurrent}
+    >
+      <Box $css={stageCss} style={stageStyle}>
+        <Box ref={innerRef} $css={innerCss} style={innerStyle}>
+          <BlockNoteView
+            editor={editor}
+            editable={false}
+            theme="light"
+            formattingToolbar={false}
+            slashMenu={false}
+            comments={false}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-presenter/constants.ts b/src/frontend/apps/impress/src/features/docs/doc-presenter/constants.ts
new file mode 100644
index 0000000000..7f882945e2
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-presenter/constants.ts
@@ -0,0 +1,44 @@
+/**
+ * Half-window of slide renderers mounted around the current slide.
+ * Total mounted = 2 * PRESENTER_WINDOW_RADIUS + 1.
+ * 1 = three slides mounted (prev, current, next) — sweet spot between
+ * memory and navigation flash. Tune freely.
+ */
+export const PRESENTER_WINDOW_RADIUS = 1;
+
+/**
+ * Intrinsic design width of slide content, in CSS pixels. The slide's
+ * inner wrapper renders at this exact width then `transform: scale(...)`
+ * fits it into the available viewport.
+ */
+export const PRESENTER_SLIDE_DESIGN_WIDTH = 900;
+
+/**
+ * Lower bound of the per-slide scale. Below this, vertical scroll kicks
+ * in instead of further shrinking the content.
+ */
+export const PRESENTER_SLIDE_MIN_SCALE = 0.7;
+
+/**
+ * Upper bound of the per-slide scale. Prevents sparse slides from
+ * ballooning to an unreadable cinematic size.
+ */
+export const PRESENTER_SLIDE_MAX_SCALE = 1.5;
+
+/**
+ * Horizontal breathing room around the active slide, subtracted from
+ * the frame's clientWidth before computing the width-based scale.
+ */
+export const PRESENTER_FRAME_PADDING_X = 64;
+
+/**
+ * Vertical breathing room around the active slide. Also leaves clearance
+ * for the floating action bar.
+ */
+export const PRESENTER_FRAME_PADDING_Y = 64;
+
+/**
+ * Duration of the cross-fade between slides AND of the first-frame
+ * fade-in, in milliseconds.
+ */
+export const PRESENTER_SLIDE_FADE_MS = 100;
diff --git a/src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/useBrowserFullscreen.ts b/src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/useBrowserFullscreen.ts
new file mode 100644
index 0000000000..213e942886
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/useBrowserFullscreen.ts
@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const isCurrentlyFullscreen = () =>
+  typeof document !== 'undefined' && !!document.fullscreenElement;
+
+export const useBrowserFullscreen = () => {
+  const [isFullscreen, setIsFullscreen] = useState<boolean>(
+    isCurrentlyFullscreen,
+  );
+  // Tracks whether the *current* fullscreen session was started by us.
+  // Prevents tearing down a fullscreen the user (or OS) had already
+  // entered before this hook was mounted.
+  const ownedRef = useRef(false);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    const handleChange = () => {
+      const fs = isCurrentlyFullscreen();
+      // Anytime fullscreen ends — Esc, our exit(), OS — release ownership.
+      if (!fs) {
+        ownedRef.current = false;
+      }
+      setIsFullscreen(fs);
+    };
+    document.addEventListener('fullscreenchange', handleChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleChange);
+    };
+  }, []);
+
+  const enter = useCallback(async () => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    if (isCurrentlyFullscreen()) {
+      return;
+    }
+    if (!document.documentElement.requestFullscreen) {
+      return;
+    }
+    try {
+      await document.documentElement.requestFullscreen();
+      ownedRef.current = true;
+    } catch {
+      // Browsers reject the request when not triggered by a user gesture
+      // or when the API is unavailable. The presenter remains usable
+      // without fullscreen, so we swallow the rejection silently.
+    }
+  }, []);
+
+  const exit = useCallback(async () => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    if (!isCurrentlyFullscreen()) {
+      return;
+    }
+    if (!document.exitFullscreen) {
+      return;
+    }
+    try {
+      await document.exitFullscreen();
+    } catch {
+      // Ignore: nothing actionable if exit fails.
+    }
+  }, []);
+
+  // Same as exit() but bails out if we didn't initiate the fullscreen.
+  // Use this for cleanup-on-unmount so we don't yank a user out of a
+  // session they opened themselves before the presenter mounted.
+  const exitIfOwned = useCallback(async () => {
+    if (!ownedRef.current) {
+      return;
+    }
+    await exit();
+  }, [exit]);
+
+  const toggle = useCallback(async () => {
+    if (isCurrentlyFullscreen()) {
+      await exit();
+    } else {
+      await enter();
+    }
+  }, [enter, exit]);
+
+  return { isFullscreen, enter, exit, exitIfOwned, toggle };
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/useFitScale.ts b/src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/useFitScale.ts
new file mode 100644
index 0000000000..28a2c227be
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/useFitScale.ts
@@ -0,0 +1,307 @@
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+
+import {
+  PRESENTER_FRAME_PADDING_X,
+  PRESENTER_FRAME_PADDING_Y,
+  PRESENTER_SLIDE_DESIGN_WIDTH,
+  PRESENTER_SLIDE_MAX_SCALE,
+  PRESENTER_SLIDE_MIN_SCALE,
+} from '../constants';
+
+/**
+ * Per-call overrides for the scaling algorithm. Anything not provided falls
+ * back to the project-wide constants in `constants.ts`. Tests pin these to
+ * stay stable when the constants are tuned during product iteration.
+ */
+export interface UseFitScaleOptions {
+  /** Intrinsic CSS width of the slide content before scaling (px). */
+  designWidth?: number;
+  /** Lower bound of the scale factor. Below this, vertical scroll kicks in. */
+  minScale?: number;
+  /** Upper bound of the scale factor. Caps how big sparse slides can grow. */
+  maxScale?: number;
+  /** Horizontal breathing room subtracted from the frame width (px, each side). */
+  paddingX?: number;
+  /** Vertical breathing room subtracted from the frame height (px, each side). */
+  paddingY?: number;
+}
+
+/**
+ * Output of {@link useFitScale}. All numeric fields are `null` before the
+ * first measurement completes (callers should render at opacity 0 until
+ * `isMeasured === true` to avoid a visible scale jump).
+ */
+export interface UseFitScaleResult {
+  /** Final clamped scale factor applied via `transform: scale(...)`. */
+  scale: number | null;
+  /** Visible width of the scaled slide (`designWidth × scale`). */
+  outerWidth: number | null;
+  /**
+   * Visible height of the scaled slide, capped at the available frame
+   * height. Equals `stageHeight` when the slide fits; equals `availH`
+   * (the constrained area) when the slide overflows and scrolls.
+   */
+  outerHeight: number | null;
+  /**
+   * Painted height of the scaled inner content (`naturalHeight × scale`).
+   * Use this as the explicit height of a wrapper that clips the inner's
+   * un-scaled layout box — otherwise the scroll container's `scrollHeight`
+   * reflects the un-transformed layout box (taller than the painted
+   * content) and a spurious scrollbar appears.
+   */
+  stageHeight: number | null;
+  /** `true` when the painted height exceeds the available area. */
+  hasOverflow: boolean;
+  /** `true` once the first ResizeObserver tick has produced a measurement. */
+  isMeasured: boolean;
+}
+
+/**
+ * Equality tolerance for state-change detection. Sub-pixel differences below
+ * this threshold are treated as no-ops to suppress superfluous re-renders.
+ */
+const EPSILON = 0.001;
+
+/** Clamp a numeric value to `[min, max]`. */
+const clamp = (value: number, min: number, max: number): number =>
+  Math.max(min, Math.min(max, value));
+
+/**
+ * Compute and reactively maintain the optimal uniform scale factor to fit a
+ * slide's content into the available viewport area.
+ *
+ * # What this hook does
+ *
+ * Given an `inner` element rendered at a fixed design width and a `frame`
+ * element representing the available area, it returns a scale factor (and
+ * derived dimensions) chosen so the painted content fills the frame as
+ * snugly as possible without exceeding configurable `[minScale, maxScale]`
+ * bounds. Vertical overflow only happens when the content cannot fit even
+ * at `minScale`.
+ *
+ * The hook re-measures on its own whenever either element resizes — viewport
+ * resize, browser fullscreen entry/exit, an image finishing to load, a font
+ * swap, etc. Two ResizeObservers (one per element) feed a single rAF-gated
+ * recompute, so observation storms collapse into one update per frame.
+ *
+ * # The formula
+ *
+ * ```
+ * naturalHeight = inner.scrollHeight        // un-transformed (transform: scale doesn't affect layout)
+ * availW        = frame.clientWidth  - 2 * paddingX
+ * availH        = frame.clientHeight - 2 * paddingY
+ * scaleW        = availW / designWidth      // width-based fit
+ * scaleH        = availH / naturalHeight    // height-based fit
+ * scale         = clamp(min(scaleW, scaleH), minScale, maxScale)
+ * outerWidth    = designWidth * scale
+ * stageHeight   = naturalHeight * scale
+ * outerHeight   = min(availH, stageHeight)
+ * hasOverflow   = stageHeight > availH
+ * ```
+ *
+ * Taking `min(scaleW, scaleH)` honours the more constraining axis (height
+ * for typical text-heavy slides, width for wide tables). The asymmetric
+ * `[MIN, MAX]` clamp lets short slides grow (upscale headroom) while
+ * preventing dense slides from shrinking to an unreadable size.
+ *
+ * # Caller contract
+ *
+ * The `inner` element MUST be sized at `designWidth` CSS pixels and have no
+ * transform during measurement — its `scrollHeight` is read as the natural
+ * (un-scaled) content height. `transform: scale(...)` does not affect layout
+ * boxes, so applying it on the same element does NOT distort the measurement.
+ *
+ * @example
+ * ```tsx
+ * const innerRef = useRef<HTMLDivElement>(null);
+ * const { scale, outerWidth, stageHeight, isMeasured } =
+ *   useFitScale(innerRef, frameRef);
+ * // ...render outer at width: outerWidth, stage at height: stageHeight,
+ * //    inner with transform: scale(scale).
+ * ```
+ *
+ * @typeParam A - Element type of the inner ref.
+ * @typeParam B - Element type of the frame ref.
+ * @param innerRef Ref to the un-transformed content element (width: designWidth).
+ * @param frameRef Ref to the surrounding scroll/clip area.
+ * @param options Per-call overrides; missing fields fall back to constants.
+ * @returns A {@link UseFitScaleResult}; numeric fields are `null` until measured.
+ */
+export const useFitScale = <
+  A extends HTMLElement = HTMLElement,
+  B extends HTMLElement = HTMLElement,
+>(
+  innerRef: RefObject<A | null>,
+  frameRef: RefObject<B | null>,
+  options: UseFitScaleOptions = {},
+): UseFitScaleResult => {
+  // Resolve effective option values, falling back to project constants. We
+  // accept partial options to keep the call-site terse for the common case
+  // and to give tests an escape hatch when they pin specific values.
+  const designWidth = options.designWidth ?? PRESENTER_SLIDE_DESIGN_WIDTH;
+  const minScale = options.minScale ?? PRESENTER_SLIDE_MIN_SCALE;
+  const maxScale = options.maxScale ?? PRESENTER_SLIDE_MAX_SCALE;
+  const paddingX = options.paddingX ?? PRESENTER_FRAME_PADDING_X;
+  const paddingY = options.paddingY ?? PRESENTER_FRAME_PADDING_Y;
+
+  // Initial state mirrors the "not yet measured" contract: every numeric
+  // field is null, `isMeasured` is false. Consumers should render at
+  // opacity 0 in this state to avoid the scale-jump-on-first-frame flash.
+  const [state, setState] = useState<UseFitScaleResult>({
+    scale: null,
+    outerWidth: null,
+    outerHeight: null,
+    stageHeight: null,
+    hasOverflow: false,
+    isMeasured: false,
+  });
+
+  // Handle of the pending rAF callback; `null` when nothing is queued.
+  // Used to coalesce burst-fire observation events into one recompute.
+  const rafRef = useRef<number | null>(null);
+  // Mirror of `state` accessible inside `recompute` without adding it to
+  // useCallback deps (which would re-create the function every render and
+  // thrash the useEffect that observes refs).
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  /**
+   * Read the current dimensions, apply the scaling formula, and commit a
+   * new state — but only if it differs meaningfully from the previous one
+   * (within EPSILON). Bails out silently when refs or dimensions are not
+   * yet meaningful (zero sizes happen during initial mount).
+   */
+  const recompute = useCallback(() => {
+    const inner = innerRef.current;
+    const frame = frameRef.current;
+    if (!inner || !frame) {
+      return;
+    }
+
+    // `inner` is sized at `width: designWidth` and has no `transform: scale`
+    // applied here (the consumer applies it elsewhere); `transform: scale`
+    // does not affect layout boxes, so `scrollHeight` is the un-transformed
+    // natural content height — exactly what we need for scaleH.
+    const naturalHeight = inner.scrollHeight;
+    if (naturalHeight <= 0) {
+      return;
+    }
+
+    const availW = Math.max(0, frame.clientWidth - 2 * paddingX);
+    const availH = Math.max(0, frame.clientHeight - 2 * paddingY);
+    if (availW <= 0 || availH <= 0) {
+      return;
+    }
+
+    const scaleW = availW / designWidth;
+    const scaleH = availH / naturalHeight;
+    // Take the more constraining axis, then clamp into the bounded range.
+    // Below MIN the slide scrolls (hasOverflow); above MAX we cap to keep
+    // sparse slides from ballooning to a cinematic, unreadable size.
+    const rawScale = Math.min(scaleW, scaleH);
+    const scale = clamp(rawScale, minScale, maxScale);
+    const outerWidth = designWidth * scale;
+    const stageHeight = naturalHeight * scale;
+    // outerHeight shrinks to stageHeight for short content (lets the
+    // consumer vertically centre the outer in the frame); pinned to availH
+    // for tall content (gives the scroll container a definite bound).
+    const outerHeight = Math.min(availH, stageHeight);
+    // hasOverflow is the contract for "we hit MIN_SCALE and content still
+    // doesn't fit, vertical scroll is now required".
+    const hasOverflow = stageHeight > availH + EPSILON;
+
+    // Suppress re-renders for sub-pixel noise (e.g. font hinting, browser
+    // rounding). Without this, ResizeObserver can fire continuously when
+    // observed sizes oscillate by ≤ 1px, causing wasted React work.
+    const prev = stateRef.current;
+    if (
+      prev.scale !== null &&
+      Math.abs(prev.scale - scale) < EPSILON &&
+      prev.outerWidth !== null &&
+      Math.abs(prev.outerWidth - outerWidth) < EPSILON &&
+      prev.outerHeight !== null &&
+      Math.abs(prev.outerHeight - outerHeight) < EPSILON &&
+      prev.stageHeight !== null &&
+      Math.abs(prev.stageHeight - stageHeight) < EPSILON &&
+      prev.hasOverflow === hasOverflow
+    ) {
+      return;
+    }
+
+    setState({
+      scale,
+      outerWidth,
+      outerHeight,
+      stageHeight,
+      hasOverflow,
+      isMeasured: true,
+    });
+  }, [innerRef, frameRef, designWidth, minScale, maxScale, paddingX, paddingY]);
+
+  /**
+   * Queue a recompute on the next animation frame. No-op when one is
+   * already queued — this is how we collapse burst-fire ResizeObserver
+   * callbacks (which can fire many times per frame during a resize drag)
+   * into a single render per frame.
+   *
+   * Also no-op in SSR (no `window`); the observer effect below is gated
+   * the same way so the hook stays SSR-safe.
+   */
+  const scheduleRecompute = useCallback(() => {
+    if (rafRef.current !== null) {
+      return;
+    }
+    if (typeof window === 'undefined') {
+      return;
+    }
+    rafRef.current = window.requestAnimationFrame(() => {
+      rafRef.current = null;
+      recompute();
+    });
+  }, [recompute]);
+
+  /**
+   * Effect that wires the two ResizeObservers to `scheduleRecompute`.
+   *
+   * - Observer on `inner`: catches content-height changes (BlockNote async
+   *   layout, late-loading images, font swaps).
+   * - Observer on `frame`: catches available-area changes (viewport resize,
+   *   browser fullscreen entry/exit, parent layout shifts).
+   *
+   * The cleanup disconnects the observer and cancels any pending rAF so a
+   * stale callback can't fire after unmount.
+   */
+  useEffect(() => {
+    if (
+      typeof window === 'undefined' ||
+      typeof ResizeObserver === 'undefined'
+    ) {
+      return undefined;
+    }
+    const inner = innerRef.current;
+    const frame = frameRef.current;
+    if (!inner || !frame) {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(() => {
+      scheduleRecompute();
+    });
+    observer.observe(inner);
+    observer.observe(frame);
+
+    // Kick off the initial measurement — don't wait for the first natural
+    // resize event, which on a stable layout may never come.
+    scheduleRecompute();
+
+    return () => {
+      observer.disconnect();
+      if (rafRef.current !== null) {
+        window.cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [innerRef, frameRef, scheduleRecompute]);
+
+  return state;
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/usePresenterShortcuts.ts b/src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/usePresenterShortcuts.ts
new file mode 100644
index 0000000000..02ef7cc760
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/usePresenterShortcuts.ts
@@ -0,0 +1,99 @@
+import { useEffect } from 'react';
+
+interface ShortcutHandlers {
+  onPrev: () => void;
+  onNext: () => void;
+  onFirst: () => void;
+  onLast: () => void;
+  onToggleFullscreen: () => void;
+  onClose: () => void;
+  isFullscreen: boolean;
+}
+
+const ARROW_CODES = new Set(['ArrowLeft', 'ArrowRight']);
+
+export const usePresenterShortcuts = ({
+  onPrev,
+  onNext,
+  onFirst,
+  onLast,
+  onToggleFullscreen,
+  onClose,
+  isFullscreen,
+}: ShortcutHandlers) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.repeat && !ARROW_CODES.has(event.code)) {
+        return;
+      }
+
+      switch (event.code) {
+        case 'ArrowLeft':
+        case 'PageUp':
+          event.preventDefault();
+          onPrev();
+          return;
+        case 'Space': {
+          // A focused button activates on `keyup` (native click). If we
+          // also call onNext() here on `keydown`, Space on the toolbar's
+          // Next button fires twice. Skip when the event target handles
+          // Space natively.
+          const target = event.target;
+          if (
+            target instanceof Element &&
+            target.closest(
+              'button, [role="button"], a, input, textarea, select, [contenteditable="true"]',
+            )
+          ) {
+            return;
+          }
+          event.preventDefault();
+          onNext();
+          return;
+        }
+        case 'ArrowRight':
+        case 'PageDown':
+          event.preventDefault();
+          onNext();
+          return;
+        case 'Home':
+          event.preventDefault();
+          onFirst();
+          return;
+        case 'End':
+          event.preventDefault();
+          onLast();
+          return;
+        case 'KeyF':
+          if (event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+          }
+          event.preventDefault();
+          onToggleFullscreen();
+          return;
+        case 'Escape':
+          // While fullscreen, the browser handles Esc natively (exits
+          // fullscreen) and we deliberately stay open. Once out of
+          // fullscreen, Esc closes the presenter.
+          if (!isFullscreen) {
+            event.preventDefault();
+            onClose();
+          }
+          return;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [
+    onPrev,
+    onNext,
+    onFirst,
+    onLast,
+    onToggleFullscreen,
+    onClose,
+    isFullscreen,
+  ]);
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/useSlides.ts b/src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/useSlides.ts
new file mode 100644
index 0000000000..4758939717
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-presenter/hooks/useSlides.ts
@@ -0,0 +1,81 @@
+import { useMemo } from 'react';
+
+type Block = {
+  type: string;
+  content?: unknown;
+  children?: Block[];
+};
+
+const TEXT_BEARING_TYPES = new Set([
+  'paragraph',
+  'heading',
+  'bulletListItem',
+  'numberedListItem',
+  'checkListItem',
+  'quote',
+]);
+
+const extractText = (content: unknown): string => {
+  if (!content) {
+    return '';
+  }
+  if (typeof content === 'string') {
+    return content;
+  }
+  if (Array.isArray(content)) {
+    return content.map(extractText).join('');
+  }
+  if (typeof content === 'object') {
+    const obj = content as Record<string, unknown>;
+    if (typeof obj.text === 'string') {
+      return obj.text;
+    }
+    if ('content' in obj) {
+      return extractText(obj.content);
+    }
+  }
+  return '';
+};
+
+export const isEmptyBlock = (block: Block): boolean => {
+  if (!TEXT_BEARING_TYPES.has(block.type)) {
+    return false;
+  }
+  if (block.children && block.children.length > 0) {
+    return false;
+  }
+  return extractText(block.content).trim() === '';
+};
+
+/**
+ * Split a flat list of top-level blocks into slide groups.
+ *
+ * - Each `divider` block separates two slides; the divider itself is dropped.
+ * - Empty text-bearing blocks (paragraph, heading, ...) are filtered out.
+ * - Groups that are empty after filtering are removed entirely.
+ * - The returned array is never empty: an empty doc yields one empty group.
+ */
+export const splitBlocksIntoSlides = <T extends Block>(blocks: T[]): T[][] => {
+  const groups: T[][] = [];
+  let current: T[] = [];
+
+  for (const block of blocks) {
+    if (block.type === 'divider') {
+      groups.push(current);
+      current = [];
+      continue;
+    }
+    current.push(block);
+  }
+  groups.push(current);
+
+  const cleaned = groups
+    .map((group) => group.filter((b) => !isEmptyBlock(b)))
+    .filter((group) => group.length > 0);
+
+  return cleaned.length > 0 ? cleaned : [[]];
+};
+
+export const useSlides = <T extends Block>(blocks: T[]): T[][] => {
+  return useMemo(() => splitBlocksIntoSlides(blocks), [blocks]);
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-presenter/index.ts b/src/frontend/apps/impress/src/features/docs/doc-presenter/index.ts
new file mode 100644
index 0000000000..0ad4b13a32
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-presenter/index.ts
@@ -0,0 +1 @@
+export { PresenterOverlay } from './components/PresenterOverlay';

From 15e9e12f6c5ebff07c62437a05856717b4717ab6 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Mon, 4 May 2026 16:18:11 +0200
Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=85(frontend)=20add=20unit=20tests=20?=
 =?UTF-8?q?for=20presenter=20hooks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cover the three hooks that drive the presenter overlay:
useSlides for divider-based block segmentation,
useBrowserFullscreen for the Fullscreen API wrapper,
and usePresenterShortcuts for the keyboard navigation bindings.
---
 .../__tests__/useBrowserFullscreen.spec.ts    | 130 ++++++++
 .../__tests__/useFitScale.spec.ts             | 295 ++++++++++++++++++
 .../__tests__/usePresenterShortcuts.spec.ts   | 109 +++++++
 .../doc-presenter/__tests__/useSlides.spec.ts | 128 ++++++++
 4 files changed, 662 insertions(+)
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/useBrowserFullscreen.spec.ts
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/useFitScale.spec.ts
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/usePresenterShortcuts.spec.ts
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/useSlides.spec.ts

diff --git a/src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/useBrowserFullscreen.spec.ts b/src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/useBrowserFullscreen.spec.ts
new file mode 100644
index 0000000000..274b584d0d
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/useBrowserFullscreen.spec.ts
@@ -0,0 +1,130 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+import { useBrowserFullscreen } from '../hooks/useBrowserFullscreen';
+
+describe('useBrowserFullscreen', () => {
+  let fullscreenElement: Element | null = null;
+  const requestFullscreen = vi.fn(async () => {
+    fullscreenElement = document.documentElement;
+    document.dispatchEvent(new Event('fullscreenchange'));
+  });
+  const exitFullscreen = vi.fn(async () => {
+    fullscreenElement = null;
+    document.dispatchEvent(new Event('fullscreenchange'));
+  });
+
+  beforeEach(() => {
+    fullscreenElement = null;
+    Object.defineProperty(document, 'fullscreenElement', {
+      configurable: true,
+      get: () => fullscreenElement,
+    });
+    Object.defineProperty(document.documentElement, 'requestFullscreen', {
+      configurable: true,
+      value: requestFullscreen,
+    });
+    Object.defineProperty(document, 'exitFullscreen', {
+      configurable: true,
+      value: exitFullscreen,
+    });
+    requestFullscreen.mockClear();
+    exitFullscreen.mockClear();
+  });
+
+  afterEach(() => {
+    fullscreenElement = null;
+  });
+
+  test('initial state reflects current fullscreen state', () => {
+    const { result } = renderHook(() => useBrowserFullscreen());
+    expect(result.current.isFullscreen).toBe(false);
+  });
+
+  test('enter() requests fullscreen and updates state', async () => {
+    const { result } = renderHook(() => useBrowserFullscreen());
+    await act(async () => {
+      await result.current.enter();
+    });
+    expect(requestFullscreen).toHaveBeenCalledTimes(1);
+    expect(result.current.isFullscreen).toBe(true);
+  });
+
+  test('enter() is a no-op if already fullscreen', async () => {
+    fullscreenElement = document.documentElement;
+    const { result } = renderHook(() => useBrowserFullscreen());
+    await act(async () => {
+      await result.current.enter();
+    });
+    expect(requestFullscreen).not.toHaveBeenCalled();
+  });
+
+  test('exit() leaves fullscreen and updates state', async () => {
+    const { result } = renderHook(() => useBrowserFullscreen());
+    await act(async () => {
+      await result.current.enter();
+    });
+    await act(async () => {
+      await result.current.exit();
+    });
+    expect(exitFullscreen).toHaveBeenCalledTimes(1);
+    expect(result.current.isFullscreen).toBe(false);
+  });
+
+  test('toggle() flips state', async () => {
+    const { result } = renderHook(() => useBrowserFullscreen());
+    await act(async () => {
+      await result.current.toggle();
+    });
+    expect(result.current.isFullscreen).toBe(true);
+    await act(async () => {
+      await result.current.toggle();
+    });
+    expect(result.current.isFullscreen).toBe(false);
+  });
+
+  test('reacts to external fullscreenchange events', () => {
+    const { result } = renderHook(() => useBrowserFullscreen());
+    act(() => {
+      fullscreenElement = document.documentElement;
+      document.dispatchEvent(new Event('fullscreenchange'));
+    });
+    expect(result.current.isFullscreen).toBe(true);
+  });
+
+  test('exitIfOwned() exits when we initiated the fullscreen', async () => {
+    const { result } = renderHook(() => useBrowserFullscreen());
+    await act(async () => {
+      await result.current.enter();
+    });
+    await act(async () => {
+      await result.current.exitIfOwned();
+    });
+    expect(exitFullscreen).toHaveBeenCalledTimes(1);
+  });
+
+  test('exitIfOwned() is a no-op when fullscreen pre-exists', async () => {
+    fullscreenElement = document.documentElement;
+    const { result } = renderHook(() => useBrowserFullscreen());
+    await act(async () => {
+      await result.current.exitIfOwned();
+    });
+    expect(exitFullscreen).not.toHaveBeenCalled();
+  });
+
+  test('exitIfOwned() is a no-op after user exits fullscreen externally', async () => {
+    const { result } = renderHook(() => useBrowserFullscreen());
+    await act(async () => {
+      await result.current.enter();
+    });
+    // User presses Esc — fullscreen ends outside of our control.
+    act(() => {
+      fullscreenElement = null;
+      document.dispatchEvent(new Event('fullscreenchange'));
+    });
+    await act(async () => {
+      await result.current.exitIfOwned();
+    });
+    expect(exitFullscreen).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/useFitScale.spec.ts b/src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/useFitScale.spec.ts
new file mode 100644
index 0000000000..8e6e5a80e9
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/useFitScale.spec.ts
@@ -0,0 +1,295 @@
+import { act, renderHook } from '@testing-library/react';
+import { RefObject } from 'react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+import { useFitScale } from '../hooks/useFitScale';
+
+type Callback = ResizeObserverCallback;
+
+class FakeResizeObserver {
+  static instances: FakeResizeObserver[] = [];
+  callback: Callback;
+  targets: Element[] = [];
+
+  constructor(callback: Callback) {
+    this.callback = callback;
+    FakeResizeObserver.instances.push(this);
+  }
+
+  observe(target: Element): void {
+    this.targets.push(target);
+  }
+
+  unobserve(target: Element): void {
+    this.targets = this.targets.filter((t) => t !== target);
+  }
+
+  disconnect(): void {
+    this.targets = [];
+  }
+
+  trigger(): void {
+    this.callback([], this);
+  }
+}
+
+const triggerAll = () => {
+  for (const o of FakeResizeObserver.instances) {
+    o.trigger();
+  }
+};
+
+const flushRaf = async () => {
+  await act(async () => {
+    await new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+  });
+};
+
+const makeRefs = (
+  innerScrollHeight: number,
+  frameClientWidth: number,
+  frameClientHeight: number,
+) => {
+  const inner = document.createElement('div');
+  const frame = document.createElement('div');
+  Object.defineProperty(inner, 'scrollHeight', {
+    configurable: true,
+    get: () => innerScrollHeight,
+  });
+  Object.defineProperty(frame, 'clientWidth', {
+    configurable: true,
+    get: () => frameClientWidth,
+  });
+  Object.defineProperty(frame, 'clientHeight', {
+    configurable: true,
+    get: () => frameClientHeight,
+  });
+  document.body.appendChild(inner);
+  document.body.appendChild(frame);
+  return {
+    inner,
+    frame,
+    innerRef: { current: inner } as RefObject<HTMLElement>,
+    frameRef: { current: frame } as RefObject<HTMLElement>,
+    setInnerScrollHeight: (h: number) => {
+      Object.defineProperty(inner, 'scrollHeight', {
+        configurable: true,
+        get: () => h,
+      });
+    },
+    setFrameSize: (w: number, h: number) => {
+      Object.defineProperty(frame, 'clientWidth', {
+        configurable: true,
+        get: () => w,
+      });
+      Object.defineProperty(frame, 'clientHeight', {
+        configurable: true,
+        get: () => h,
+      });
+    },
+  };
+};
+
+// Tests pin explicit option values so they remain stable when the project's
+// default constants are tuned during product iteration.
+const OPTS = {
+  designWidth: 900,
+  minScale: 0.7,
+  maxScale: 1.5,
+  paddingX: 64,
+  paddingY: 96,
+};
+
+describe('useFitScale', () => {
+  beforeEach(() => {
+    FakeResizeObserver.instances = [];
+    vi.stubGlobal('ResizeObserver', FakeResizeObserver);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    document.body.innerHTML = '';
+  });
+
+  // 3.3 — short content clamps to MAX
+  test('short content clamps to MAX scale and has no overflow', async () => {
+    // designWidth=900, frame 1920×1080, padding 64×96 -> availW=1792, availH=888
+    // naturalH=200 -> scaleH=4.44, scaleW=1.99, min=1.99 -> clamped to 1.5
+    const refs = makeRefs(200, 1920, 1080);
+    const { result } = renderHook(() =>
+      useFitScale(refs.innerRef, refs.frameRef, OPTS),
+    );
+    await flushRaf();
+
+    expect(result.current.scale).toBeCloseTo(1.5, 5);
+    expect(result.current.hasOverflow).toBe(false);
+    expect(result.current.outerWidth).toBeCloseTo(900 * 1.5, 5);
+    // stageHeight = naturalH × scale = 200 × 1.5 = 300; fits in availH=888
+    // so outerHeight shrinks to stageHeight (300), enabling vertical centring.
+    expect(result.current.stageHeight).toBeCloseTo(300, 5);
+    expect(result.current.outerHeight).toBeCloseTo(300, 5);
+    expect(result.current.isMeasured).toBe(true);
+  });
+
+  // 3.4 — tall content floors at MIN with overflow.
+  // REGRESSION: the previous design centred the overflowing slide with
+  // `align-items: center`, which pushed the top of the content above the
+  // scrollable area. The new design exposes `hasOverflow` so the slide can
+  // attach `overflow-y: auto` to a wrapper of definite height (`outerHeight`),
+  // ensuring `scrollTop = 0` shows the first block of the slide flush with
+  // the wrapper's top edge — top of slide is never clipped.
+  test('tall content clamps to MIN scale and reports overflow', async () => {
+    // availH=888, naturalH=3000 -> scaleH=0.296 -> clamped to 0.7
+    // 3000 × 0.7 = 2100 > 888 -> overflow
+    const refs = makeRefs(3000, 1920, 1080);
+    const { result } = renderHook(() =>
+      useFitScale(refs.innerRef, refs.frameRef, OPTS),
+    );
+    await flushRaf();
+
+    expect(result.current.scale).toBeCloseTo(0.7, 5);
+    expect(result.current.hasOverflow).toBe(true);
+    // stageHeight = 3000 × 0.7 = 2100 > availH=888 → outerHeight clamped to 888.
+    expect(result.current.stageHeight).toBeCloseTo(2100, 5);
+    expect(result.current.outerHeight).toBeCloseTo(888, 5);
+  });
+
+  // 3.5 — content that exactly fits
+  test('content that exactly fits picks scaleH and reports no overflow', async () => {
+    // availH=888, naturalH=888 -> scaleH=1.0, scaleW=1.99 -> min=1.0
+    const refs = makeRefs(888, 1920, 1080);
+    const { result } = renderHook(() =>
+      useFitScale(refs.innerRef, refs.frameRef, OPTS),
+    );
+    await flushRaf();
+
+    expect(result.current.scale).toBeCloseTo(1.0, 5);
+    expect(result.current.hasOverflow).toBe(false);
+    // stageHeight = 888 × 1.0 = 888 = availH → outerHeight = 888.
+    expect(result.current.stageHeight).toBeCloseTo(888, 5);
+    expect(result.current.outerHeight).toBeCloseTo(888, 5);
+  });
+
+  // 3.6 — width-limited case
+  test('width-limited frame picks scaleW', async () => {
+    // designWidth=900, paddingX=64 -> availW = frame - 128
+    // frame 700×1080 -> availW=572 -> scaleW=0.635
+    // naturalH=400 -> scaleH=888/400=2.22 -> min=0.635 -> clamped to 0.7
+    const refs = makeRefs(400, 700, 1080);
+    const { result } = renderHook(() =>
+      useFitScale(refs.innerRef, refs.frameRef, OPTS),
+    );
+    await flushRaf();
+
+    // scaleW=0.635 < min 0.7 -> clamped UP to 0.7
+    expect(result.current.scale).toBeCloseTo(0.7, 5);
+  });
+
+  test('width-limited frame within scale range picks scaleW', async () => {
+    // frame 1000×1500 -> availW=872 -> scaleW=0.969
+    // naturalH=400 -> scaleH=1500-192=1308/400=3.27 -> min=0.969 -> in range
+    const refs = makeRefs(400, 1000, 1500);
+    const { result } = renderHook(() =>
+      useFitScale(refs.innerRef, refs.frameRef, OPTS),
+    );
+    await flushRaf();
+
+    expect(result.current.scale).toBeCloseTo(872 / 900, 5);
+  });
+
+  // 3.7 — frame resize triggers recompute
+  test('frame resize triggers a new computation', async () => {
+    const refs = makeRefs(500, 1920, 1080);
+    const { result } = renderHook(() =>
+      useFitScale(refs.innerRef, refs.frameRef, OPTS),
+    );
+    await flushRaf();
+
+    const initialScale = result.current.scale;
+    expect(initialScale).not.toBeNull();
+
+    refs.setFrameSize(1280, 720);
+    await act(async () => {
+      triggerAll();
+      await flushRaf();
+    });
+
+    expect(result.current.scale).not.toBe(initialScale);
+  });
+
+  // 3.8 — inner resize triggers recompute (image loaded)
+  test('inner resize (content grew) triggers a new computation', async () => {
+    const refs = makeRefs(500, 1920, 1080);
+    const { result } = renderHook(() =>
+      useFitScale(refs.innerRef, refs.frameRef, OPTS),
+    );
+    await flushRaf();
+
+    const initialScale = result.current.scale;
+
+    refs.setInnerScrollHeight(2500);
+    await act(async () => {
+      triggerAll();
+      await flushRaf();
+    });
+
+    expect(result.current.scale).not.toBe(initialScale);
+    expect(result.current.scale).toBeCloseTo(0.7, 5);
+  });
+
+  // 3.9 — isMeasured semantics
+  test('isMeasured is false before first measurement and true after', async () => {
+    const refs = makeRefs(500, 1920, 1080);
+    const { result } = renderHook(() =>
+      useFitScale(refs.innerRef, refs.frameRef, OPTS),
+    );
+
+    // Before flushRaf, the rAF-scheduled recompute hasn't fired.
+    expect(result.current.isMeasured).toBe(false);
+    expect(result.current.scale).toBeNull();
+
+    await flushRaf();
+
+    expect(result.current.isMeasured).toBe(true);
+    expect(result.current.scale).not.toBeNull();
+  });
+
+  // 3.10 — cleanup on unmount
+  test('cleanup on unmount disconnects observers', async () => {
+    const refs = makeRefs(500, 1920, 1080);
+    const { unmount } = renderHook(() =>
+      useFitScale(refs.innerRef, refs.frameRef, OPTS),
+    );
+    await flushRaf();
+
+    expect(FakeResizeObserver.instances).toHaveLength(1);
+    const observer = FakeResizeObserver.instances[0];
+    expect(observer.targets).toHaveLength(2);
+
+    unmount();
+
+    expect(observer.targets).toHaveLength(0);
+  });
+
+  test('respects custom options', async () => {
+    // designWidth=600, min=0.5, max=2.0, padding 0/0
+    // frame 1200×900, naturalH=300 -> scaleW=1200/600=2.0, scaleH=3.0 -> min=2.0 (=max)
+    const refs = makeRefs(300, 1200, 900);
+    const { result } = renderHook(() =>
+      useFitScale(refs.innerRef, refs.frameRef, {
+        designWidth: 600,
+        minScale: 0.5,
+        maxScale: 2.0,
+        paddingX: 0,
+        paddingY: 0,
+      }),
+    );
+    await flushRaf();
+
+    expect(result.current.scale).toBeCloseTo(2.0, 5);
+    expect(result.current.outerWidth).toBeCloseTo(1200, 5);
+    // stageHeight = 300 × 2.0 = 600 < availH=900 → outerHeight = 600.
+    expect(result.current.stageHeight).toBeCloseTo(600, 5);
+    expect(result.current.outerHeight).toBeCloseTo(600, 5);
+  });
+});
diff --git a/src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/usePresenterShortcuts.spec.ts b/src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/usePresenterShortcuts.spec.ts
new file mode 100644
index 0000000000..4d63695492
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/usePresenterShortcuts.spec.ts
@@ -0,0 +1,109 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, test, vi } from 'vitest';
+
+import { usePresenterShortcuts } from '../hooks/usePresenterShortcuts';
+
+const renderShortcuts = (
+  overrides: Partial<Parameters<typeof usePresenterShortcuts>[0]> = {},
+) => {
+  const handlers = {
+    onPrev: vi.fn(),
+    onNext: vi.fn(),
+    onFirst: vi.fn(),
+    onLast: vi.fn(),
+    onToggleFullscreen: vi.fn(),
+    onClose: vi.fn(),
+    isFullscreen: false,
+    ...overrides,
+  };
+  renderHook(() => usePresenterShortcuts(handlers));
+  return handlers;
+};
+
+const press = (init: KeyboardEventInit) => {
+  const event = new KeyboardEvent('keydown', { ...init, cancelable: true });
+  window.dispatchEvent(event);
+  return event;
+};
+
+describe('usePresenterShortcuts', () => {
+  test('ArrowLeft and PageUp call onPrev', () => {
+    const h = renderShortcuts();
+    press({ code: 'ArrowLeft' });
+    press({ code: 'PageUp' });
+    expect(h.onPrev).toHaveBeenCalledTimes(2);
+  });
+
+  test('ArrowRight, PageDown and Space call onNext', () => {
+    const h = renderShortcuts();
+    press({ code: 'ArrowRight' });
+    press({ code: 'PageDown' });
+    press({ code: 'Space' });
+    expect(h.onNext).toHaveBeenCalledTimes(3);
+  });
+
+  test('Home calls onFirst, End calls onLast', () => {
+    const h = renderShortcuts();
+    press({ code: 'Home' });
+    press({ code: 'End' });
+    expect(h.onFirst).toHaveBeenCalledTimes(1);
+    expect(h.onLast).toHaveBeenCalledTimes(1);
+  });
+
+  test('KeyF toggles fullscreen but ignores modifiers', () => {
+    const h = renderShortcuts();
+    press({ code: 'KeyF' });
+    press({ code: 'KeyF', metaKey: true });
+    press({ code: 'KeyF', ctrlKey: true });
+    expect(h.onToggleFullscreen).toHaveBeenCalledTimes(1);
+  });
+
+  test('Escape calls onClose only when not fullscreen', () => {
+    const h1 = renderShortcuts({ isFullscreen: false });
+    press({ code: 'Escape' });
+    expect(h1.onClose).toHaveBeenCalledTimes(1);
+
+    const h2 = renderShortcuts({ isFullscreen: true });
+    press({ code: 'Escape' });
+    expect(h2.onClose).not.toHaveBeenCalled();
+  });
+
+  test('Space prevents default to avoid page scroll', () => {
+    renderShortcuts();
+    const event = press({ code: 'Space' });
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  test('Arrow keys prevent default', () => {
+    renderShortcuts();
+    expect(press({ code: 'ArrowLeft' }).defaultPrevented).toBe(true);
+    expect(press({ code: 'ArrowRight' }).defaultPrevented).toBe(true);
+  });
+
+  test('non-arrow repeat events are ignored', () => {
+    const h = renderShortcuts();
+    press({ code: 'Space', repeat: true });
+    expect(h.onNext).not.toHaveBeenCalled();
+  });
+
+  test('arrow repeat events are accepted', () => {
+    const h = renderShortcuts();
+    press({ code: 'ArrowRight', repeat: true });
+    expect(h.onNext).toHaveBeenCalledTimes(1);
+  });
+
+  test('Space on a button is ignored to avoid native click double-trigger', () => {
+    const h = renderShortcuts();
+    const button = document.createElement('button');
+    document.body.appendChild(button);
+    button.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        code: 'Space',
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    expect(h.onNext).not.toHaveBeenCalled();
+    document.body.removeChild(button);
+  });
+});
diff --git a/src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/useSlides.spec.ts b/src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/useSlides.spec.ts
new file mode 100644
index 0000000000..0c21fea0bf
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/useSlides.spec.ts
@@ -0,0 +1,128 @@
+import { describe, expect, test } from 'vitest';
+
+import { isEmptyBlock, splitBlocksIntoSlides } from '../hooks/useSlides';
+
+const para = (text = 'hello') => ({
+  type: 'paragraph',
+  content: text === '' ? [] : [{ type: 'text', text }],
+});
+const heading = (text = 'Title', level = 1) => ({
+  type: 'heading',
+  content: [{ type: 'text', text }],
+  props: { level },
+});
+const divider = () => ({ type: 'divider' });
+const image = () => ({ type: 'image', props: { url: 'x' } });
+
+describe('isEmptyBlock', () => {
+  test('empty paragraph (no content array entries) is empty', () => {
+    expect(isEmptyBlock(para(''))).toBe(true);
+  });
+
+  test('whitespace-only paragraph is empty', () => {
+    expect(isEmptyBlock(para('   '))).toBe(true);
+  });
+
+  test('paragraph with text is not empty', () => {
+    expect(isEmptyBlock(para('hi'))).toBe(false);
+  });
+
+  test('heading with whitespace is empty', () => {
+    expect(isEmptyBlock(heading('  '))).toBe(true);
+  });
+
+  test('image is never empty', () => {
+    expect(isEmptyBlock(image() as any)).toBe(false);
+  });
+
+  test('divider is not "empty" (it is filtered separately)', () => {
+    expect(isEmptyBlock(divider() as any)).toBe(false);
+  });
+
+  test('block with children is not empty', () => {
+    const b = { type: 'paragraph', content: [], children: [para()] };
+    expect(isEmptyBlock(b as any)).toBe(false);
+  });
+});
+
+describe('splitBlocksIntoSlides', () => {
+  test('no divider yields one slide', () => {
+    const result = splitBlocksIntoSlides([para('a'), para('b')]);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toHaveLength(2);
+  });
+
+  test('one divider yields two slides', () => {
+    const result = splitBlocksIntoSlides([para('a'), divider(), para('b')]);
+    expect(result).toHaveLength(2);
+    expect(result[0]).toHaveLength(1);
+    expect(result[1]).toHaveLength(1);
+  });
+
+  test('leading divider does not produce an empty slide', () => {
+    const result = splitBlocksIntoSlides([divider(), para('a')]);
+    expect(result).toHaveLength(1);
+  });
+
+  test('trailing divider does not produce an empty slide', () => {
+    const result = splitBlocksIntoSlides([para('a'), divider()]);
+    expect(result).toHaveLength(1);
+  });
+
+  test('consecutive dividers do not produce empty slides', () => {
+    const result = splitBlocksIntoSlides([
+      para('a'),
+      divider(),
+      divider(),
+      divider(),
+      para('b'),
+    ]);
+    expect(result).toHaveLength(2);
+  });
+
+  test('empty doc yields one empty slide', () => {
+    const result = splitBlocksIntoSlides([]);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toHaveLength(0);
+  });
+
+  test('divider-only doc yields one empty slide', () => {
+    const result = splitBlocksIntoSlides([divider(), divider()]);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toHaveLength(0);
+  });
+
+  test('group of only empty paragraphs is dropped', () => {
+    const result = splitBlocksIntoSlides([
+      para('a'),
+      divider(),
+      para(''),
+      para('   '),
+      divider(),
+      para('b'),
+    ]);
+    expect(result).toHaveLength(2);
+    expect(result[0][0]).toMatchObject({ content: [{ text: 'a' }] });
+    expect(result[1][0]).toMatchObject({ content: [{ text: 'b' }] });
+  });
+
+  test('group with one empty + one non-empty paragraph keeps only the non-empty', () => {
+    const result = splitBlocksIntoSlides([para(''), para('hi'), para('   ')]);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toHaveLength(1);
+    expect(result[0][0]).toMatchObject({ content: [{ text: 'hi' }] });
+  });
+
+  test('image-only group is kept', () => {
+    const result = splitBlocksIntoSlides([para('a'), divider(), image()]);
+    expect(result).toHaveLength(2);
+    expect(result[1]).toHaveLength(1);
+  });
+
+  test('heading with whitespace is filtered', () => {
+    const result = splitBlocksIntoSlides([heading('  '), para('body')]);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toHaveLength(1);
+    expect(result[0][0]).toMatchObject({ type: 'paragraph' });
+  });
+});

From 38d10bd01b7857d9e336b3a8ec07fe5a11ade38b Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Mon, 4 May 2026 16:18:14 +0200
Subject: [PATCH 5/5] =?UTF-8?q?=E2=9C=85(e2e)=20add=20presenter=20mode=20e?=
 =?UTF-8?q?2e=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a Playwright spec that opens the presenter overlay from the
doc options menu, walks through a multi-slide document built with
dividers, and verifies that Escape closes the overlay.
---
 .../app-impress/presenter-mode.spec.ts        | 265 ++++++++++++++++++
 1 file changed, 265 insertions(+)
 create mode 100644 src/frontend/apps/e2e/__tests__/app-impress/presenter-mode.spec.ts

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/presenter-mode.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/presenter-mode.spec.ts
new file mode 100644
index 0000000000..3a5305d527
--- /dev/null
+++ b/src/frontend/apps/e2e/__tests__/app-impress/presenter-mode.spec.ts
@@ -0,0 +1,265 @@
+import { Page, expect, test } from '@playwright/test';
+
+import { createDoc, goToGridDoc, mockedDocument } from './utils-common';
+import { openSuggestionMenu, writeInEditor } from './utils-editor';
+
+const openPresenter = async (page: Page) => {
+  await page.getByLabel('Open the document options').click();
+  await page.getByRole('menuitem', { name: 'Present' }).click();
+
+  const overlay = page.getByRole('dialog', { name: 'Presenter mode' });
+  await expect(overlay).toBeVisible();
+  return overlay;
+};
+
+const insertDivider = async (page: Page) => {
+  const { suggestionMenu } = await openSuggestionMenu({ page });
+  await suggestionMenu.getByText('Divider', { exact: true }).click();
+};
+
+const writeMultiSlideDoc = async (page: Page) => {
+  const editor = await writeInEditor({ page, text: 'Slide one' });
+  await editor.press('Enter');
+  await insertDivider(page);
+  await editor.press('Enter');
+  await writeInEditor({ page, text: 'Slide two' });
+  await editor.press('Enter');
+  await insertDivider(page);
+  await editor.press('Enter');
+  await writeInEditor({ page, text: 'Slide three' });
+};
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('Presenter Mode', () => {
+  test('opens the presenter overlay from the doc options menu and closes with Escape', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'presenter-open', browserName, 1);
+    await writeInEditor({ page, text: 'Hello presenter' });
+
+    const overlay = await openPresenter(page);
+
+    await expect(
+      overlay.getByRole('toolbar', { name: 'Presenter controls' }),
+    ).toBeVisible();
+    await expect(overlay.getByText('Hello presenter')).toBeVisible();
+
+    // The presenter calls requestFullscreen on open. usePresenterShortcuts
+    // deliberately ignores Escape while in fullscreen (the browser owns Esc
+    // there to exit). Playwright grants requestFullscreen but, unlike a real
+    // browser, does NOT dispatch a fullscreen exit on Escape — so we must
+    // exit fullscreen ourselves before pressing Escape to test the close
+    // path. We also wait for the React state to settle after the exit so
+    // the keydown listener is re-bound with isFullscreen=false.
+    await page.evaluate(async () => {
+      if (document.fullscreenElement) {
+        await document.exitFullscreen();
+      }
+    });
+    await page.waitForTimeout(200);
+    await page.keyboard.press('Escape');
+    await expect(overlay).toBeHidden();
+  });
+
+  test('renders a single-slide doc with counter 1/1 and disabled nav buttons', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'presenter-single', browserName, 1);
+    await writeInEditor({ page, text: 'Slide A' });
+
+    const overlay = await openPresenter(page);
+
+    await expect(overlay.getByText('1 / 1')).toBeVisible();
+    await expect(
+      overlay.getByRole('button', { name: 'Previous slide' }),
+    ).toBeDisabled();
+    await expect(
+      overlay.getByRole('button', { name: 'Next slide' }),
+    ).toBeDisabled();
+    await expect(overlay.getByText('Slide A')).toBeVisible();
+
+    await overlay.getByRole('button', { name: 'Close presenter' }).click();
+    await expect(overlay).toBeHidden();
+  });
+
+  test('navigates between slides via the floating bar buttons', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'presenter-nav-bar', browserName, 1);
+    await writeMultiSlideDoc(page);
+
+    const overlay = await openPresenter(page);
+
+    const prev = overlay.getByRole('button', { name: 'Previous slide' });
+    const next = overlay.getByRole('button', { name: 'Next slide' });
+
+    await expect(overlay.getByText('1 / 3')).toBeVisible();
+    await expect(overlay.getByText('Slide one')).toBeVisible();
+    await expect(prev).toBeDisabled();
+    await expect(next).toBeEnabled();
+
+    await next.click();
+    await expect(overlay.getByText('2 / 3')).toBeVisible();
+    await expect(overlay.getByText('Slide two')).toBeVisible();
+
+    await next.click();
+    await expect(overlay.getByText('3 / 3')).toBeVisible();
+    await expect(overlay.getByText('Slide three')).toBeVisible();
+    await expect(next).toBeDisabled();
+    await expect(prev).toBeEnabled();
+
+    await prev.click();
+    await expect(overlay.getByText('2 / 3')).toBeVisible();
+    await expect(overlay.getByText('Slide two')).toBeVisible();
+  });
+
+  test('navigates between slides via keyboard shortcuts', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'presenter-nav-keyboard', browserName, 1);
+    await writeMultiSlideDoc(page);
+
+    const overlay = await openPresenter(page);
+
+    await expect(overlay.getByText('1 / 3')).toBeVisible();
+
+    await page.keyboard.press('ArrowRight');
+    await expect(overlay.getByText('2 / 3')).toBeVisible();
+
+    await page.keyboard.press('End');
+    await expect(overlay.getByText('3 / 3')).toBeVisible();
+
+    await page.keyboard.press('Home');
+    await expect(overlay.getByText('1 / 3')).toBeVisible();
+
+    // ArrowLeft on the first slide is clamped — counter stays at 1 / 3.
+    await page.keyboard.press('ArrowLeft');
+    await expect(overlay.getByText('1 / 3')).toBeVisible();
+  });
+
+  test('scales each slide to fit the viewport (outer width = 900 × scale)', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'presenter-scaling', browserName, 1);
+    await writeInEditor({ page, text: 'A short slide' });
+
+    const overlay = await openPresenter(page);
+    const currentSlide = overlay.getByRole('group').filter({ hasNotText: '' });
+    await expect(currentSlide.first()).toBeVisible();
+
+    const dims = await currentSlide.first().evaluate((el) => {
+      // DOM: <outer role="group"><stage><inner (scaled)>...
+      const stage = el.firstElementChild as HTMLElement | null;
+      const inner = stage?.firstElementChild as HTMLElement | null;
+      const innerStyle = inner ? getComputedStyle(inner) : null;
+      return {
+        outerWidth: el.getBoundingClientRect().width,
+        innerTransform: innerStyle?.transform ?? 'none',
+      };
+    });
+
+    // Inner has `transform: scale(<n>)`; match the first scale matrix value.
+    const m = /matrix\(([-\d.]+)/.exec(dims.innerTransform);
+    expect(
+      m,
+      `expected a scale matrix, got: ${dims.innerTransform}`,
+    ).not.toBeNull();
+
+    const scale = m ? parseFloat(m[1]) : NaN;
+
+    // Scale is always clamped to [MIN_SCALE, MAX_SCALE] = [0.7, 1.5].
+    // The exact value depends on viewport: sparse content typically saturates
+    // the height-based scale (→ MAX), but at default Playwright viewport
+    // (1280) the width path can constrain to scaleW = (1280 - 2*paddingX)/900.
+    // We assert the bounds, not a specific value.
+    expect(scale).toBeGreaterThanOrEqual(0.7);
+    expect(scale).toBeLessThanOrEqual(1.5);
+
+    // The core invariant: outer width = DESIGN_WIDTH (900) × scale,
+    // within a 5px tolerance for sub-pixel rounding.
+    expect(Math.abs(dims.outerWidth - 900 * scale)).toBeLessThan(5);
+  });
+
+  test('tall slide produces a vertical scrollbar on the outer wrapper with the top visible', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'presenter-tall', browserName, 1);
+
+    // Build a tall single-slide doc: many headings + paragraphs so the
+    // natural content height blows past viewport height at MIN_SCALE.
+    const editor = await writeInEditor({ page, text: 'TOP MARKER' });
+    for (let i = 0; i < 40; i += 1) {
+      await editor.press('Enter');
+      await editor.pressSequentially(`Filler line ${i} to make the slide tall`);
+    }
+
+    const overlay = await openPresenter(page);
+    const slide = overlay.getByRole('group').filter({ hasNotText: '' }).first();
+    await expect(slide).toBeVisible();
+
+    // The first block ('TOP MARKER') must be at y=0 of the slide wrapper
+    // (i.e. visible at the top, not clipped). This is the regression we fix.
+    const topVisible = await slide.evaluate((el) => {
+      el.scrollTop = 0;
+      const first = el.querySelector('.bn-block-content');
+      if (!first) {
+        return { ok: false, reason: 'no first block' };
+      }
+      const slideRect = el.getBoundingClientRect();
+      const blockRect = first.getBoundingClientRect();
+      return {
+        ok: blockRect.top >= slideRect.top - 1,
+        slideTop: slideRect.top,
+        blockTop: blockRect.top,
+        scrollHeight: el.scrollHeight,
+        clientHeight: el.clientHeight,
+      };
+    });
+
+    expect(topVisible.ok, JSON.stringify(topVisible)).toBe(true);
+    expect(topVisible.scrollHeight ?? 0).toBeGreaterThan(
+      topVisible.clientHeight ?? 0,
+    );
+  });
+});
+
+test.describe('Presenter Mode mobile', () => {
+  test.use({ viewport: { width: 500, height: 1200 } });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('hides the Present option on small mobile viewports', async ({
+    page,
+  }) => {
+    await mockedDocument(page, {
+      abilities: {
+        destroy: true,
+        link_configuration: true,
+        versions_destroy: true,
+        versions_list: true,
+        versions_retrieve: true,
+        accesses_manage: true,
+        accesses_view: true,
+        update: true,
+        partial_update: true,
+        retrieve: true,
+      },
+    });
+
+    await goToGridDoc(page);
+
+    await page.getByLabel('Open the document options').click();
+    await expect(page.getByRole('menuitem', { name: 'Present' })).toBeHidden();
+  });
+});