snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

blocksuite/affine/blocks/frame/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@blocksuite/affine-block-frame",
+  "description": "Frame block for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "yarn run -T tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-gfx-pointer": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
+    "@blocksuite/affine-widget-frame-title": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/std": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.23",
+    "lit": "^3.2.0",
+    "yjs": "^13.6.27"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./store": "./src/store.ts",
+    "./view": "./src/view.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.27.5"
+}

blocksuite/affine/blocks/frame/src/edgeless-clipboard-config.ts

@@ -0,0 +1,43 @@
+import {
+  type ClipboardConfigCreationContext,
+  EdgelessClipboardConfig,
+} from '@blocksuite/affine-block-surface';
+import { type BlockSnapshot, fromJSON } from '@blocksuite/store';
+
+export class EdgelessClipboardFrameConfig extends EdgelessClipboardConfig {
+  static override readonly key = 'affine:frame';
+
+  override createBlock(
+    frame: BlockSnapshot,
+    context: ClipboardConfigCreationContext
+  ): string | null {
+    if (!this.surface) return null;
+
+    const { oldToNewIdMap, newPresentationIndexes } = context;
+    const { xywh, title, background, childElementIds } = frame.props;
+
+    const newChildElementIds: Record<string, boolean> = {};
+
+    if (typeof childElementIds === 'object' && childElementIds !== null) {
+      Object.keys(childElementIds).forEach(oldId => {
+        const newId = oldToNewIdMap.get(oldId);
+        if (newId) {
+          newChildElementIds[newId] = true;
+        }
+      });
+    }
+
+    const frameId = this.crud.addBlock(
+      'affine:frame',
+      {
+        xywh,
+        background,
+        title: fromJSON(title),
+        childElementIds: newChildElementIds,
+        presentationIndex: newPresentationIndexes.get(frame.id),
+      },
+      this.surface.model.id
+    );
+    return frameId;
+  }
+}

blocksuite/affine/blocks/frame/src/edgeless-toolbar/config.ts

@@ -0,0 +1,9 @@
+export const FrameConfig: {
+  name: string;
+  wh: [number, number];
+}[] = [
+  { name: '1:1', wh: [1200, 1200] },
+  { name: '4:3', wh: [1600, 1200] },
+  { name: '16:9', wh: [1600, 900] },
+  { name: '2:1', wh: [1600, 800] },
+];

blocksuite/affine/blocks/frame/src/edgeless-toolbar/frame-dense-menu.ts

@@ -0,0 +1,34 @@
+import { DefaultTool } from '@blocksuite/affine-block-surface';
+import { menu } from '@blocksuite/affine-components/context-menu';
+import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { FrameIcon } from '@blocksuite/icons/lit';
+
+import { EdgelessFrameManagerIdentifier } from '../frame-manager.js';
+import { FrameTool } from '../frame-tool';
+import { FrameConfig } from './config.js';
+
+export const buildFrameDenseMenu: DenseMenuBuilder = (edgeless, gfx) =>
+  menu.subMenu({
+    name: 'Frame',
+    prefix: FrameIcon({ width: '20px', height: '20px' }),
+    select: () => gfx.tool.setTool(FrameTool),
+    isSelected: gfx.tool.currentToolName$.peek() === 'frame',
+    options: {
+      items: [
+        menu.action({
+          name: 'Custom',
+          select: () => gfx.tool.setTool(FrameTool),
+        }),
+        ...FrameConfig.map(config =>
+          menu.action({
+            name: `Slide ${config.name}`,
+            select: () => {
+              const frame = edgeless.std.get(EdgelessFrameManagerIdentifier);
+              gfx.tool.setTool(DefaultTool);
+              frame.createFrameOnViewportCenter(config.wh);
+            },
+          })
+        ),
+      ],
+    },
+  });

blocksuite/affine/blocks/frame/src/edgeless-toolbar/frame-menu.ts

@@ -0,0 +1,104 @@
+import { DefaultTool } from '@blocksuite/affine-block-surface';
+import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { css, html, LitElement } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import { EdgelessFrameManagerIdentifier } from '../frame-manager.js';
+import { FrameTool } from '../frame-tool';
+import { FrameConfig } from './config.js';
+
+export class EdgelessFrameMenu extends EdgelessToolbarToolMixin(LitElement) {
+  static override styles = css`
+    :host {
+      position: absolute;
+      display: flex;
+      z-index: -1;
+    }
+    .menu-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 14px;
+    }
+
+    .frame-add-button {
+      width: 40px;
+      height: 24px;
+      border-radius: 4px;
+      border: 1px solid var(--affine-border-color);
+      color: var(--affine-text-primary-color);
+      line-height: 20px;
+      font-weight: 400;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      position: relative;
+    }
+
+    .frame-add-button::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      border-radius: 3px;
+      background: transparent;
+      transition: background-color 0.23s ease;
+      pointer-events: none;
+    }
+    .frame-add-button:hover::before {
+      background: var(--affine-hover-color);
+    }
+
+    .custom {
+      width: 60px;
+      background: var(--affine-hover-color);
+    }
+
+    .divider {
+      width: 1px;
+      height: 20px;
+      background: var(--affine-border-color);
+      transform: scaleX(0.5);
+    }
+  `;
+
+  override type = FrameTool;
+
+  get frameManager() {
+    return this.edgeless.std.get(EdgelessFrameManagerIdentifier);
+  }
+
+  override render() {
+    const { gfx, frameManager } = this;
+    return html`
+      <edgeless-slide-menu .showNext=${false}>
+        <div class="menu-content">
+          <div class="frame-add-button custom">Custom</div>
+          <div class="divider"></div>
+          ${repeat(
+            FrameConfig,
+            item => item.name,
+            (item, index) => html`
+              <div
+                @click=${() => {
+                  gfx.tool.setTool(DefaultTool);
+                  frameManager.createFrameOnViewportCenter(item.wh);
+                }}
+                class="frame-add-button ${index}"
+                data-name="${item.name}"
+                data-w="${item.wh[0]}"
+                data-h="${item.wh[1]}"
+              >
+                ${item.name}
+              </div>
+            `
+          )}
+        </div>
+      </edgeless-slide-menu>
+    `;
+  }
+}

blocksuite/affine/blocks/frame/src/edgeless-toolbar/frame-tool-button.ts

@@ -0,0 +1,51 @@
+import { QuickToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { FrameIcon } from '@blocksuite/icons/lit';
+import { css, html, LitElement } from 'lit';
+
+import { FrameTool } from '../frame-tool';
+
+export class EdgelessFrameToolButton extends QuickToolMixin(LitElement) {
+  static override styles = css`
+    :host {
+      display: flex;
+    }
+  `;
+
+  override type = FrameTool;
+
+  private _toggleFrameMenu() {
+    if (this.tryDisposePopper()) return;
+
+    const menu = this.createPopper('edgeless-frame-menu', this);
+    menu.element.edgeless = this.edgeless;
+  }
+
+  override render() {
+    const type = this.edgelessTool?.toolType?.toolName;
+    return html`
+      <edgeless-tool-icon-button
+        class="edgeless-frame-button"
+        .tooltip=${
+          this.popper
+            ? ''
+            : html`<affine-tooltip-content-with-shortcut
+                data-tip="${'Frame'}"
+                data-shortcut="${'F'}"
+              ></affine-tooltip-content-with-shortcut>`
+        }
+        .tooltipOffset=${17}
+        .iconSize=${'24px'}
+        .active=${type === 'frame'}
+        .iconContainerPadding=${6}
+        @click=${() => {
+          // don't update tool before toggling menu
+          this._toggleFrameMenu();
+          this.setEdgelessTool(FrameTool);
+        }}
+      >
+        ${FrameIcon()}
+        <toolbar-arrow-up-icon></toolbar-arrow-up-icon>
+      </edgeless-tool-icon-button>
+    `;
+  }
+}

blocksuite/affine/blocks/frame/src/edgeless-toolbar/index.ts

@@ -0,0 +1,5 @@
+export * from './config';
+export * from './frame-dense-menu';
+export * from './frame-menu';
+export * from './frame-tool-button';
+export * from './quick-tool';

blocksuite/affine/blocks/frame/src/edgeless-toolbar/presentation-toolbar.ts

@@ -0,0 +1,566 @@
+import {
+  DefaultTool,
+  EdgelessLegacySlotIdentifier,
+} from '@blocksuite/affine-block-surface';
+import { toast } from '@blocksuite/affine-components/toast';
+import { PanTool } from '@blocksuite/affine-gfx-pointer';
+import type { FrameBlockModel } from '@blocksuite/affine-model';
+import {
+  EditPropsStore,
+  ViewportElementProvider,
+} from '@blocksuite/affine-shared/services';
+import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { Bound, clamp } from '@blocksuite/global/gfx';
+import { SignalWatcher } from '@blocksuite/global/lit';
+import {
+  EndPointArrowIcon,
+  ExpandCloseIcon,
+  ExpandFullIcon,
+  StartPointArrowIcon,
+  StopAiIcon,
+} from '@blocksuite/icons/lit';
+import type { BlockComponent } from '@blocksuite/std';
+import type { ToolOptions } from '@blocksuite/std/gfx';
+import { effect } from '@preact/signals-core';
+import { cssVar } from '@toeverything/theme';
+import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
+import { property, state } from 'lit/decorators.js';
+
+import {
+  EdgelessFrameManagerIdentifier,
+  isFrameBlock,
+  type NavigatorMode,
+} from '../frame-manager';
+import { PresentTool } from '../present-tool';
+
+export class PresentationToolbar extends EdgelessToolbarToolMixin(
+  SignalWatcher(LitElement)
+) {
+  static override styles = css`
+    :host {
+      align-items: inherit;
+      width: 100%;
+      height: 100%;
+      gap: 8px;
+      padding-right: 2px;
+    }
+    .full-divider {
+      width: 8px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .full-divider::after {
+      content: '';
+      width: 1px;
+      height: 100%;
+      background: var(--affine-border-color);
+      transform: scaleX(0.5);
+    }
+    .config-buttons {
+      display: flex;
+      gap: 10px;
+    }
+    .edgeless-frame-navigator {
+      width: 140px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .edgeless-frame-navigator.dense {
+      width: auto;
+    }
+
+    .edgeless-frame-navigator-title {
+      display: inline-block;
+      cursor: pointer;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      padding-right: 8px;
+    }
+
+    .edgeless-frame-navigator-count {
+      color: var(--affine-text-secondary-color);
+      white-space: nowrap;
+    }
+    .edgeless-frame-navigator-stop {
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 8px;
+      position: relative;
+      overflow: hidden;
+
+      svg {
+        display: block;
+        width: 24px;
+        height: 24px;
+        color: white;
+      }
+    }
+    .edgeless-frame-navigator-stop::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: transparent;
+      border-radius: inherit;
+    }
+    .edgeless-frame-navigator-stop:hover::before {
+      background: var(--affine-hover-color);
+    }
+  `;
+
+  private _cachedIndex = -1;
+
+  private _timer?: ReturnType<typeof setTimeout>;
+
+  override type = PresentTool;
+
+  private get _cachedPresentHideToolbar() {
+    return !!this.edgeless.std
+      .get(EditPropsStore)
+      .getStorage('presentHideToolbar');
+  }
+
+  private set _cachedPresentHideToolbar(value) {
+    this.edgeless.std
+      .get(EditPropsStore)
+      .setStorage('presentHideToolbar', !!value);
+  }
+
+  private get _frames(): FrameBlockModel[] {
+    return this.edgeless.std.get(EdgelessFrameManagerIdentifier).frames;
+  }
+
+  get dense() {
+    return this.containerWidth < 554;
+  }
+
+  get host() {
+    return this.edgeless.host;
+  }
+
+  get slots() {
+    return this.edgeless.std.get(EdgelessLegacySlotIdentifier);
+  }
+
+  constructor(edgeless: BlockComponent) {
+    super();
+    this.edgeless = edgeless;
+  }
+
+  private _bindHotKey() {
+    const handleKeyIfFrameNavigator = (action: () => void) => () => {
+      if (this.edgelessTool.toolType === PresentTool) {
+        action();
+      }
+    };
+
+    this.edgeless.bindHotKey(
+      {
+        ArrowLeft: handleKeyIfFrameNavigator(() => this._previousFrame()),
+        ArrowRight: handleKeyIfFrameNavigator(() => this._nextFrame()),
+        Escape: handleKeyIfFrameNavigator(() => this._exitPresentation()),
+      },
+      {
+        global: true,
+      }
+    );
+  }
+
+  private _exitPresentation() {
+    // When exit presentation mode, we need to set the tool to default or pan
+    // And exit fullscreen
+    if (this.edgeless.store.readonly) {
+      this.setEdgelessTool(PanTool, { panning: false });
+    } else {
+      this.setEdgelessTool(DefaultTool);
+    }
+
+    if (document.fullscreenElement) {
+      document.exitFullscreen().catch(console.error);
+    }
+
+    // Reset the flag when fully exiting presentation mode
+    this.edgeless.std
+      .get(EditPropsStore)
+      .setStorage('presentNoFrameToastShown', false);
+  }
+
+  private _moveToCurrentFrame(forceMove = false) {
+    const currentToolOption = this.gfx.tool.currentToolOption$.value;
+    const toolOptions = currentToolOption?.options;
+
+    // If PresentTool is being activated after a temporary pan (indicated by restoredAfterPan)
+    // and a forced move isn't explicitly requested, skip moving to the current frame.
+    // This preserves the user's panned position instead of resetting to the frame's default view.
+    if (
+      currentToolOption?.toolType === PresentTool &&
+      toolOptions?.restoredAfterPan &&
+      !forceMove
+    ) {
+      // Clear the flag so future navigations behave normally
+      // Here we modify the tool's activated option to avoid triggering setTool update
+      const currentTool = this.gfx.tool.currentTool$.peek();
+      if (currentTool?.activatedOption) {
+        currentTool.activatedOption.restoredAfterPan = false;
+      }
+      return;
+    }
+
+    const current = this._currentFrameIndex;
+    const viewport = this.gfx.viewport;
+    const frame = this._frames[current];
+
+    if (frame) {
+      let bound = Bound.deserialize(frame.xywh);
+
+      if (this._navigatorMode === 'fill') {
+        const vb = viewport.viewportBounds;
+        const center = bound.center;
+        let w, h;
+        if (vb.w / vb.h > bound.w / bound.h) {
+          w = bound.w;
+          h = (w * vb.h) / vb.w;
+        } else {
+          h = bound.h;
+          w = (h * vb.w) / vb.h;
+        }
+        bound = Bound.fromCenter(center, w, h);
+      }
+
+      viewport.setViewportByBound(bound, [0, 0, 0, 0], false);
+      this.slots.navigatorFrameChanged.next(
+        this._frames[this._currentFrameIndex]
+      );
+    }
+  }
+
+  private _nextFrame() {
+    const frames = this._frames;
+    const min = 0;
+    const max = frames.length - 1;
+    if (this._currentFrameIndex === frames.length - 1) {
+      toast(this.host, 'You have reached the last frame');
+    } else {
+      this._currentFrameIndex = clamp(this._currentFrameIndex + 1, min, max);
+    }
+  }
+
+  private _previousFrame() {
+    const frames = this._frames;
+    const min = 0;
+    const max = frames.length - 1;
+    if (this._currentFrameIndex === 0) {
+      toast(this.host, 'You have reached the first frame');
+    } else {
+      this._currentFrameIndex = clamp(this._currentFrameIndex - 1, min, max);
+    }
+  }
+
+  /**
+   * Toggle fullscreen, but keep edgeless tool to frameNavigator
+   * If already fullscreen, exit fullscreen
+   * If not fullscreen, enter fullscreen
+   */
+  private _toggleFullScreen() {
+    if (document.fullscreenElement) {
+      document.exitFullscreen().catch(console.error);
+      this._fullScreenMode = false;
+    } else {
+      const { viewportElement } = this.edgeless.std.get(
+        ViewportElementProvider
+      );
+      launchIntoFullscreen(viewportElement);
+      this._fullScreenMode = true;
+    }
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    const { _disposables } = this;
+
+    _disposables.add(
+      effect(() => {
+        const currentToolOption = this.gfx.tool.currentToolOption$.value;
+
+        if (currentToolOption?.toolType === PresentTool) {
+          const opts = currentToolOption.options as
+            | ToolOptions<PresentTool>
+            | undefined;
+
+          const isAlreadyFullscreen = !!document.fullscreenElement;
+
+          if (!isAlreadyFullscreen) {
+            this._toggleFullScreen();
+          } else {
+            this._fullScreenMode = true;
+          }
+
+          this._cachedIndex = this._currentFrameIndex;
+          this._navigatorMode = opts?.mode ?? this._navigatorMode;
+
+          const selection = this.gfx.selection;
+          if (
+            selection.selectedElements.length > 0 &&
+            isFrameBlock(selection.selectedElements[0])
+          ) {
+            const selectedFrameId = selection.selectedElements[0].id;
+            const indexOfSelectedFrame = this._frames.findIndex(
+              frame => frame.id === selectedFrameId
+            );
+            if (indexOfSelectedFrame !== -1) {
+              this._cachedIndex = indexOfSelectedFrame;
+            }
+          }
+
+          const store = this.edgeless.std.get(EditPropsStore);
+          if (this._frames.length === 0) {
+            if (!store.getStorage('presentNoFrameToastShown')) {
+              toast(
+                this.host,
+                'The presentation requires at least 1 frame. You can firstly create a frame.',
+                5000
+              );
+              store.setStorage('presentNoFrameToastShown', true);
+            }
+          } else {
+            // If frames exist, and the flag was set, reset it.
+            // This allows the toast to show again if all frames are subsequently deleted.
+            if (store.getStorage('presentNoFrameToastShown')) {
+              store.setStorage('presentNoFrameToastShown', false);
+            }
+          }
+        }
+        this.requestUpdate();
+      })
+    );
+  }
+
+  override firstUpdated() {
+    const { _disposables } = this;
+
+    this._bindHotKey();
+
+    _disposables.add(
+      this.slots.navigatorSettingUpdated.subscribe(({ fillScreen }) => {
+        if (fillScreen !== undefined) {
+          this._navigatorMode = fillScreen ? 'fill' : 'fit';
+        }
+      })
+    );
+
+    _disposables.addFromEvent(document, 'fullscreenchange', () => {
+      if (document.fullscreenElement) {
+        this._timer = setTimeout(() => {
+          this._currentFrameIndex = this._cachedIndex;
+        }, 400);
+      } else {
+        clearTimeout(this._timer);
+        if (
+          this.edgelessTool.toolType === PresentTool &&
+          this._fullScreenMode
+        ) {
+          if (this.edgeless.store.readonly) {
+            this.setEdgelessTool(PanTool, { panning: false });
+          } else {
+            this.setEdgelessTool(DefaultTool);
+          }
+        }
+      }
+
+      setTimeout(() => this._moveToCurrentFrame(true), 400);
+      this.slots.fullScreenToggled.next();
+    });
+
+    this._navigatorMode =
+      this.edgeless.std.get(EditPropsStore).getStorage('presentFillScreen') ===
+      true
+        ? 'fill'
+        : 'fit';
+  }
+
+  override render() {
+    const current = this._currentFrameIndex;
+    const frames = this._frames;
+    const frame = frames[current];
+
+    return html`
+      <style>
+        :host {
+          display: flex;
+        }
+      </style>
+      <edgeless-tool-icon-button
+        .iconContainerPadding=${0}
+        .tooltip=${'Previous'}
+        .iconSize=${'24px'}
+        @click=${() => this._previousFrame()}
+      >
+        ${StartPointArrowIcon()}
+      </edgeless-tool-icon-button>
+
+      <div class="edgeless-frame-navigator ${this.dense ? 'dense' : ''}">
+        ${
+          this.dense
+            ? nothing
+            : html`<span
+                style="color: ${cssVar('textPrimaryColor')}"
+                class="edgeless-frame-navigator-title"
+                @click=${() => this._moveToCurrentFrame()}
+              >
+                ${frame?.props.title ?? 'no frame'}
+              </span>`
+        }
+
+        <span class="edgeless-frame-navigator-count">
+          ${frames.length === 0 ? 0 : current + 1} / ${frames.length}
+        </span>
+      </div>
+
+      <edgeless-tool-icon-button
+        .tooltip=${'Next'}
+        @click=${() => this._nextFrame()}
+        .iconContainerPadding=${0}
+        .iconSize=${'24px'}
+      >
+        ${EndPointArrowIcon()}
+      </edgeless-tool-icon-button>
+
+      <div class="full-divider"></div>
+
+      <div class="config-buttons">
+        <edgeless-tool-icon-button
+          .tooltip=${
+            document.fullscreenElement
+              ? 'Exit Full Screen'
+              : 'Enter Full Screen'
+          }
+          @click=${() => this._toggleFullScreen()}
+          .iconContainerPadding=${0}
+          .iconContainerWidth=${'24px'}
+          .iconSize=${'24px'}
+        >
+          ${document.fullscreenElement ? ExpandCloseIcon() : ExpandFullIcon()}
+        </edgeless-tool-icon-button>
+
+        ${
+          this.dense
+            ? nothing
+            : html`<edgeless-frame-order-button
+                .popperShow=${this.frameMenuShow}
+                .setPopperShow=${this.setFrameMenuShow}
+                .edgeless=${this.edgeless}
+              >
+              </edgeless-frame-order-button>`
+        }
+
+        <edgeless-navigator-setting-button
+          .edgeless=${this.edgeless}
+          .hideToolbar=${this._cachedPresentHideToolbar}
+          .onHideToolbarChange=${(hideToolbar: boolean) => {
+            this._cachedPresentHideToolbar = hideToolbar;
+          }}
+          .popperShow=${this.settingMenuShow}
+          .setPopperShow=${this.setSettingMenuShow}
+          .includeFrameOrder=${this.dense}
+        >
+        </edgeless-navigator-setting-button>
+      </div>
+
+      <div class="full-divider"></div>
+
+      <button
+        class="edgeless-frame-navigator-stop"
+        @click=${this._exitPresentation}
+        style="background: ${cssVar('warningColor')}"
+      >
+        ${StopAiIcon()}
+      </button>
+    `;
+  }
+
+  protected override updated(changedProperties: PropertyValues) {
+    const currentToolOption = this.gfx.tool.currentToolOption$.value;
+    const isPresentToolActive = currentToolOption?.toolType === PresentTool;
+    const toolOptions = currentToolOption?.options;
+    const isRestoredAfterPan = !!(
+      isPresentToolActive && toolOptions?.restoredAfterPan
+    );
+
+    if (changedProperties.has('_currentFrameIndex') && isPresentToolActive) {
+      // When the current frame index changes (e.g., user navigates), a viewport update is needed.
+      // However, if PresentTool is merely being restored after a pan (isRestoredAfterPan = true)
+      // without an explicit index change in this update cycle, we avoid forcing a move to preserve the panned position.
+      // Thus, `forceMove` is true unless it's a pan restoration.
+      const shouldForceMove = !isRestoredAfterPan;
+      this._moveToCurrentFrame(shouldForceMove);
+    } else if (isPresentToolActive && changedProperties.has('edgelessTool')) {
+      // Handles cases where the tool is set/switched to PresentTool (e.g., initial activation or returning from another tool).
+      // Similar to frame index changes, avoid forcing a viewport move if restoring after a pan.
+      const currentToolIsPresentTool =
+        this.edgelessTool.toolType === PresentTool;
+      if (currentToolIsPresentTool) {
+        const shouldForceMoveOnToolChange = !isRestoredAfterPan;
+        this._moveToCurrentFrame(shouldForceMoveOnToolChange);
+      }
+    }
+  }
+
+  @state({
+    hasChanged() {
+      return true;
+    },
+  })
+  private accessor _currentFrameIndex = 0;
+
+  private accessor _fullScreenMode = true;
+
+  @state()
+  private accessor _navigatorMode: NavigatorMode = 'fit';
+
+  @property({ attribute: false })
+  accessor containerWidth = 1920;
+
+  @property({ type: Boolean })
+  accessor frameMenuShow = false;
+
+  @property()
+  accessor setFrameMenuShow: (show: boolean) => void = () => {};
+
+  @property()
+  accessor setSettingMenuShow: (show: boolean) => void = () => {};
+
+  @property({ type: Boolean })
+  accessor settingMenuShow = false;
+}
+
+function launchIntoFullscreen(element: Element) {
+  if (element.requestFullscreen) {
+    element.requestFullscreen().catch(console.error);
+  } else if (
+    'mozRequestFullScreen' in element &&
+    element.mozRequestFullScreen instanceof Function
+  ) {
+    // Firefox
+    element.mozRequestFullScreen();
+  } else if (
+    'webkitRequestFullscreen' in element &&
+    element.webkitRequestFullscreen instanceof Function
+  ) {
+    // Chrome, Safari and Opera
+    element.webkitRequestFullscreen();
+  } else if (
+    'msRequestFullscreen' in element &&
+    element.msRequestFullscreen instanceof Function
+  ) {
+    // IE/Edge
+    element.msRequestFullscreen();
+  }
+}

blocksuite/affine/blocks/frame/src/edgeless-toolbar/quick-tool.ts

@@ -0,0 +1,16 @@
+import { QuickToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { html } from 'lit';
+
+import { buildFrameDenseMenu } from './frame-dense-menu';
+
+export const frameQuickTool = QuickToolExtension('frame', ({ block, gfx }) => {
+  return {
+    type: 'frame',
+    content: html`<edgeless-frame-tool-button
+      .edgeless=${block}
+    ></edgeless-frame-tool-button>`,
+    menu: buildFrameDenseMenu(block, gfx),
+    enable: !block.store.readonly,
+    priority: 90,
+  };
+});

blocksuite/affine/blocks/frame/src/effects.ts

@@ -0,0 +1,47 @@
+import { EdgelessFrameMenu, EdgelessFrameToolButton } from './edgeless-toolbar';
+import { PresentationToolbar } from './edgeless-toolbar/presentation-toolbar';
+import { FrameBlockComponent } from './frame-block';
+import { EdgelessFrameOrderButton } from './present/frame-order-button';
+import { EdgelessFrameOrderMenu } from './present/frame-order-menu';
+import {
+  EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET,
+  EdgelessNavigatorBlackBackgroundWidget,
+} from './present/navigator-bg-widget';
+import { EdgelessNavigatorSettingButton } from './present/navigator-setting-button';
+import { EdgelessPresentButton } from './present/present-button';
+
+export function effects() {
+  customElements.define('affine-frame', FrameBlockComponent);
+  customElements.define('edgeless-frame-tool-button', EdgelessFrameToolButton);
+  customElements.define('edgeless-frame-menu', EdgelessFrameMenu);
+  customElements.define(
+    'edgeless-frame-order-button',
+    EdgelessFrameOrderButton
+  );
+  customElements.define('edgeless-frame-order-menu', EdgelessFrameOrderMenu);
+  customElements.define(
+    'edgeless-navigator-setting-button',
+    EdgelessNavigatorSettingButton
+  );
+  customElements.define('edgeless-present-button', EdgelessPresentButton);
+  customElements.define('presentation-toolbar', PresentationToolbar);
+  // Navigation components
+  customElements.define(
+    EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET,
+    EdgelessNavigatorBlackBackgroundWidget
+  );
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-frame': FrameBlockComponent;
+    'edgeless-frame-tool-button': EdgelessFrameToolButton;
+    'edgeless-frame-menu': EdgelessFrameMenu;
+    'edgeless-frame-order-button': EdgelessFrameOrderButton;
+    'edgeless-frame-order-menu': EdgelessFrameOrderMenu;
+    'edgeless-navigator-setting-button': EdgelessNavigatorSettingButton;
+    'edgeless-present-button': EdgelessPresentButton;
+    'presentation-toolbar': PresentationToolbar;
+    'edgeless-navigator-black-background': EdgelessNavigatorBlackBackgroundWidget;
+  }
+}

blocksuite/affine/blocks/frame/src/frame-block.ts

@@ -0,0 +1,208 @@
+import { OverlayIdentifier } from '@blocksuite/affine-block-surface';
+import {
+  DefaultTheme,
+  type FrameBlockModel,
+  FrameBlockSchema,
+  isTransparent,
+} from '@blocksuite/affine-model';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
+import { Bound } from '@blocksuite/global/gfx';
+import { GfxBlockComponent } from '@blocksuite/std';
+import {
+  type BoxSelectionContext,
+  getTopElements,
+  GfxViewInteractionExtension,
+} from '@blocksuite/std/gfx';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import {
+  EdgelessFrameManagerIdentifier,
+  type FrameOverlay,
+} from './frame-manager';
+
+export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this._disposables.add(
+      this.store.slots.blockUpdated.subscribe(({ type, id }) => {
+        if (id === this.model.id && type === 'update') {
+          this.requestUpdate();
+        }
+      })
+    );
+    this._disposables.add(
+      this.gfx.viewport.viewportUpdated.subscribe(() => {
+        this.requestUpdate();
+      })
+    );
+  }
+
+  /**
+   * Due to potentially very large frame sizes, CSS scaling can cause iOS Safari to crash.
+   * To mitigate this issue, we combine size calculations within the rendering rect.
+   */
+  override getCSSTransform(): string {
+    return '';
+  }
+
+  override getRenderingRect() {
+    const viewport = this.gfx.viewport;
+    const { translateX, translateY, zoom } = viewport;
+    const { xywh, rotate } = this.model;
+    const bound = Bound.deserialize(xywh);
+
+    const scaledX = bound.x * zoom + translateX;
+    const scaledY = bound.y * zoom + translateY;
+
+    return {
+      x: scaledX,
+      y: scaledY,
+      w: bound.w * zoom,
+      h: bound.h * zoom,
+      rotate,
+      zIndex: this.toZIndex(),
+    };
+  }
+
+  override onBoxSelected(context: BoxSelectionContext) {
+    const { box } = context;
+    const bound = new Bound(box.x, box.y, box.w, box.h);
+    const elementBound = this.model.elementBound;
+
+    return (
+      this.model.childElements.length === 0 || bound.contains(elementBound)
+    );
+  }
+
+  override renderGfxBlock() {
+    const { model, showBorder, std } = this;
+    const backgroundColor = std
+      .get(ThemeProvider)
+      .generateColorProperty(model.props.background, DefaultTheme.transparent);
+    const _isNavigator =
+      this.gfx.tool.currentToolName$.value === 'frameNavigator';
+    const frameIndex = this.gfx.layer.getZIndex(model);
+
+    const widgets = html`${repeat(
+      Object.entries(this.widgets),
+      ([id]) => id,
+      ([_, widget]) => widget
+    )}`;
+
+    return html`
+      <div
+        class="affine-frame-container"
+        style=${styleMap({
+          zIndex: `${frameIndex}`,
+          backgroundColor,
+          height: '100%',
+          width: '100%',
+          borderRadius: '2px',
+          border:
+            _isNavigator || !showBorder
+              ? 'none'
+              : `1px solid ${cssVarV2('edgeless/frame/border/default')}`,
+        })}
+      ></div>
+      ${widgets}
+    `;
+  }
+
+  @state()
+  accessor showBorder = true;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-frame': FrameBlockComponent;
+  }
+}
+
+export const FrameBlockInteraction =
+  GfxViewInteractionExtension<FrameBlockComponent>(
+    FrameBlockSchema.model.flavour,
+    {
+      handleResize: context => {
+        const { model, std } = context;
+
+        return {
+          onResizeStart(context): void {
+            context.default(context);
+            model.stash('childElementIds');
+          },
+
+          onResizeMove(context): void {
+            const { newBound } = context;
+            const frameManager = std.getOptional(
+              EdgelessFrameManagerIdentifier
+            );
+            const overlay = std.getOptional(
+              OverlayIdentifier('frame')
+            ) as FrameOverlay;
+
+            model.xywh = newBound.serialize();
+
+            if (!frameManager) {
+              return;
+            }
+
+            const oldChildren = frameManager.getChildElementsInFrame(model);
+
+            const newChildren = getTopElements(
+              frameManager.getElementsInFrameBound(model)
+            ).concat(
+              oldChildren.filter(oldChild => {
+                return model.intersectsBound(oldChild.elementBound);
+              })
+            );
+
+            frameManager.removeAllChildrenFromFrame(model);
+            frameManager.addElementsToFrame(model, newChildren);
+
+            overlay?.highlight(model, true, false);
+          },
+          onResizeEnd(context): void {
+            context.default(context);
+            model.pop('childElementIds');
+          },
+        };
+      },
+      handleRotate: () => {
+        return {
+          beforeRotate(context): void {
+            context.set({
+              rotatable: false,
+            });
+          },
+        };
+      },
+      handleSelection: () => {
+        return {
+          selectable(context) {
+            const { model } = context;
+
+            const onTitle =
+              model.externalBound?.containsPoint([
+                context.position.x,
+                context.position.y,
+              ]) ?? false;
+
+            return (
+              context.default(context) &&
+              (model.isLocked() ||
+                !isTransparent(model.props.background) ||
+                onTitle)
+            );
+          },
+          onSelect(context) {
+            return context.default(context);
+          },
+        };
+      },
+    }
+  );

blocksuite/affine/blocks/frame/src/frame-highlight-manager.ts

@@ -0,0 +1,96 @@
+import { OverlayIdentifier } from '@blocksuite/affine-block-surface';
+import { FrameBlockModel, MindmapElementModel } from '@blocksuite/affine-model';
+import {
+  type DragExtensionInitializeContext,
+  getTopElements,
+  GfxExtensionIdentifier,
+  InteractivityExtension,
+} from '@blocksuite/std/gfx';
+
+import {
+  type EdgelessFrameManager,
+  type FrameOverlay,
+  isFrameBlock,
+} from './frame-manager';
+
+export class FrameHighlightManager extends InteractivityExtension {
+  static override key = 'frame-highlight-manager';
+
+  get frameMgr() {
+    return this.std.getOptional(
+      GfxExtensionIdentifier('frame-manager')
+    ) as EdgelessFrameManager;
+  }
+
+  get frameHighlightOverlay() {
+    return this.std.getOptional(OverlayIdentifier('frame')) as FrameOverlay;
+  }
+
+  override mounted() {
+    this.action.onDragInitialize((_: DragExtensionInitializeContext) => {
+      if (!this.frameMgr || !this.frameHighlightOverlay) {
+        return {};
+      }
+
+      let hoveredFrame: FrameBlockModel | null = null;
+      const { frameMgr, frameHighlightOverlay } = this;
+      let draggedFrames: FrameBlockModel[] = [];
+
+      return {
+        onDragStart(context) {
+          draggedFrames = context.elements
+            .map(elem => elem.model)
+            .filter(model => isFrameBlock(model));
+        },
+        onDragMove(context) {
+          const { dragLastPos } = context;
+
+          hoveredFrame = frameMgr.getFrameFromPoint(
+            [dragLastPos.x, dragLastPos.y],
+            draggedFrames
+          );
+
+          if (hoveredFrame && !hoveredFrame.isLocked()) {
+            frameHighlightOverlay.highlight(hoveredFrame);
+          } else {
+            frameHighlightOverlay.clear();
+          }
+        },
+        onDragEnd(context) {
+          const topElements = getTopElements(
+            context.elements.map(elem =>
+              elem.model.group instanceof MindmapElementModel
+                ? elem.model.group
+                : elem.model
+            )
+          );
+
+          if (hoveredFrame) {
+            frameMgr.addElementsToFrame(hoveredFrame, topElements);
+          } else {
+            topElements.forEach(elem => frameMgr.removeFromParentFrame(elem));
+          }
+
+          frameHighlightOverlay.clear();
+        },
+      };
+    });
+
+    this.event.on('pointermove', context => {
+      const [x, y] = this.gfx.viewport.toModelCoord(
+        context.event.x,
+        context.event.y
+      );
+      const target = this.gfx.getElementByPoint(x, y);
+
+      if (
+        target instanceof FrameBlockModel &&
+        target.externalBound?.isPointInBound([x, y])
+      ) {
+        this.frameHighlightOverlay.highlight(target);
+      } else {
+        this.frameHighlightOverlay.clear();
+      }
+    });
+  }
+}

blocksuite/affine/blocks/frame/src/frame-manager.ts

@@ -0,0 +1,503 @@
+import type { SurfaceBlockModel } from '@blocksuite/affine-block-surface';
+import { Overlay } from '@blocksuite/affine-block-surface';
+import type { FrameBlockModel } from '@blocksuite/affine-model';
+import { EditPropsStore } from '@blocksuite/affine-shared/services';
+import { DisposableGroup } from '@blocksuite/global/disposable';
+import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
+import {
+  Bound,
+  deserializeXYWH,
+  type IVec,
+  type SerializedXYWH,
+} from '@blocksuite/global/gfx';
+import {
+  generateKeyBetweenV2,
+  getTopElements,
+  GfxBlockElementModel,
+  type GfxController,
+  GfxExtension,
+  GfxExtensionIdentifier,
+  type GfxModel,
+  isGfxGroupCompatibleModel,
+  renderableInEdgeless,
+} from '@blocksuite/std/gfx';
+import { type BlockModel, Text } from '@blocksuite/store';
+import * as Y from 'yjs';
+
+const FRAME_PADDING = 40;
+
+export type NavigatorMode = 'fill' | 'fit';
+
+export class FrameOverlay extends Overlay {
+  static override overlayName: string = 'frame';
+
+  private _disposable = new DisposableGroup();
+
+  private _frame: FrameBlockModel | null = null;
+
+  private _innerElements = new Set<GfxModel>();
+
+  private readonly _prevXYWH: SerializedXYWH | null = null;
+
+  private get _frameManager() {
+    return this.gfx.std.get(EdgelessFrameManagerIdentifier);
+  }
+
+  constructor(gfx: GfxController) {
+    super(gfx);
+  }
+
+  private _reset() {
+    this._disposable.dispose();
+    this._disposable = new DisposableGroup();
+
+    this._frame = null;
+    this._innerElements.clear();
+  }
+
+  override clear() {
+    if (this._frame === null && this._innerElements.size === 0) return;
+    this._reset();
+    this._renderer?.refresh();
+  }
+
+  highlight(
+    frame: FrameBlockModel,
+    highlightElementsInBound = false,
+    highlightOutline = true
+  ) {
+    if (!highlightElementsInBound && !highlightOutline) return;
+
+    let needRefresh = false;
+
+    if (highlightOutline && this._prevXYWH !== frame.xywh) {
+      needRefresh = true;
+    }
+
+    let innerElements = new Set<GfxModel>();
+    if (highlightElementsInBound) {
+      innerElements = new Set(
+        getTopElements(
+          this._frameManager.getElementsInFrameBound(frame)
+        ).concat(
+          this._frameManager.getChildElementsInFrame(frame).filter(child => {
+            return frame.intersectsBound(child.elementBound);
+          })
+        )
+      );
+      if (!areSetsEqual(this._innerElements, innerElements)) {
+        needRefresh = true;
+      }
+    }
+
+    if (!needRefresh) return;
+
+    this._reset();
+    if (highlightOutline) this._frame = frame;
+    if (highlightElementsInBound) this._innerElements = innerElements;
+
+    const subscription = frame.deleted.subscribe(() => {
+      subscription.unsubscribe();
+      this.clear();
+    });
+
+    this._disposable.add(subscription);
+    this._renderer?.refresh();
+  }
+
+  override render(ctx: CanvasRenderingContext2D): void {
+    ctx.beginPath();
+    ctx.strokeStyle = '#1E96EB';
+    ctx.lineWidth = 2 / this.gfx.viewport.zoom;
+    const radius = 2 / this.gfx.viewport.zoom;
+
+    if (this._frame) {
+      const { x, y, w, h } = this._frame.elementBound;
+      ctx.roundRect(x, y, w, h, radius);
+      ctx.stroke();
+    }
+
+    this._innerElements.forEach(element => {
+      const [x, y, w, h] = deserializeXYWH(element.xywh);
+      ctx.translate(x + w / 2, y + h / 2);
+      ctx.rotate((element.rotate * Math.PI) / 180);
+      ctx.roundRect(-w / 2, -h / 2, w, h, radius);
+      ctx.translate(-x - w / 2, -y - h / 2);
+      ctx.stroke();
+    });
+  }
+}
+
+export const EdgelessFrameManagerIdentifier =
+  GfxExtensionIdentifier<EdgelessFrameManager>('frame-manager');
+
+export class EdgelessFrameManager extends GfxExtension {
+  static override key = 'frame-manager';
+
+  private readonly _disposable = new DisposableGroup();
+
+  /**
+   * Get all sorted frames by presentation orderer,
+   * the legacy frame that uses `index` as presentation order
+   * will be put at the beginning of the array.
+   */
+  get frames() {
+    return Object.values(this.gfx.doc.blocks.value)
+      .map(({ model }) => model)
+      .filter(isFrameBlock)
+      .sort(EdgelessFrameManager.framePresentationComparator);
+  }
+
+  constructor(gfx: GfxController) {
+    super(gfx);
+    this._watchElementAdded();
+  }
+
+  static framePresentationComparator<
+    T extends
+      | FrameBlockModel
+      | { props: { index: string; presentationIndex?: string } },
+  >(a: T, b: T) {
+    function stringCompare(a: string, b: string) {
+      if (a < b) return -1;
+      if (a > b) return 1;
+      return 0;
+    }
+
+    const isModel = (
+      x:
+        | FrameBlockModel
+        | { props: { index: string; presentationIndex?: string } }
+    ): x is FrameBlockModel => {
+      return 'presentationIndex$' in x;
+    };
+
+    if (
+      isModel(a) &&
+      isModel(b) &&
+      a.props.presentationIndex$.value &&
+      b.props.presentationIndex$.value
+    ) {
+      return stringCompare(
+        a.props.presentationIndex$.value,
+        b.props.presentationIndex$.value
+      );
+    } else if (a.props.presentationIndex && b.props.presentationIndex) {
+      return stringCompare(
+        a.props.presentationIndex,
+        b.props.presentationIndex
+      );
+    } else if (a.props.presentationIndex) {
+      return -1;
+    } else if (b.props.presentationIndex) {
+      return 1;
+    } else {
+      return stringCompare(a.props.index, b.props.index);
+    }
+  }
+
+  private _addChildrenToLegacyFrame(frame: FrameBlockModel) {
+    if (frame.props.childElementIds !== undefined) return;
+    const elements = this.getElementsInFrameBound(frame);
+    const childElements = elements.filter(
+      element => this.getParentFrame(element) === null && element !== frame
+    );
+
+    frame.addChildren(childElements);
+  }
+
+  private _addFrameBlock(bound: Bound) {
+    const surfaceModel = this.gfx.surface as SurfaceBlockModel;
+    const props = this.gfx.std
+      .get(EditPropsStore)
+      .applyLastProps('affine:frame', {
+        title: new Text(new Y.Text(`Frame ${this.frames.length + 1}`)),
+        xywh: bound.serialize(),
+        index: this.gfx.layer.generateIndex(true),
+        presentationIndex: this.generatePresentationIndex(),
+      });
+
+    const id = this.gfx.doc.addBlock('affine:frame', props, surfaceModel);
+    const frameModel = this.gfx.getElementById(id);
+
+    if (!frameModel || !isFrameBlock(frameModel)) {
+      throw new BlockSuiteError(
+        ErrorCode.GfxBlockElementError,
+        'Frame model is not found'
+      );
+    }
+
+    return frameModel;
+  }
+
+  private _watchElementAdded() {
+    if (!this.gfx.surface) {
+      return;
+    }
+
+    const { surface: surfaceModel, doc } = this.gfx;
+
+    this._disposable.add(
+      surfaceModel.elementAdded.subscribe(({ id, local }) => {
+        const element = surfaceModel.getElementById(id);
+        if (element && local) {
+          // The entire frame detection logic must be in microtask for timing reasons:
+          //
+          // 1. For connectors: When elementAdded fires, connectors have invalid bounds [0,0,0,0]
+          //    because their path/bounds are calculated in a separate microtask of updateConnectorPath by connector-watcher.
+          //    We need to wait for that calculation to complete before frame detection.
+          //
+          // 2. For shapes: Although they have valid bounds immediately, processing them in microtask
+          //    ensures consistent timing and allows other initialization to complete first.
+          //
+          // 3. Group compatibility: Some elements may need to establish their group relationships
+          //    before being considered for frame membership.
+          //
+          // By embedding the entire logic in microtask, we ensure:
+          // - Connectors have proper bounds calculated (not [0,0,0,0])
+          // - getFrameFromPoint() works correctly with valid element centers
+          // - All element initialization is complete before frame detection
+          queueMicrotask(() => {
+            const frame = this.getFrameFromPoint(element.elementBound.center);
+
+            // if the container created with a frame, skip it.
+            if (
+              isGfxGroupCompatibleModel(element) &&
+              frame &&
+              element.hasChild(frame)
+            ) {
+              return;
+            }
+
+            // Only add elements that aren't already grouped and have a valid frame
+            if (!element.group && frame) {
+              this.addElementsToFrame(frame, [element]);
+            }
+          });
+        }
+      })
+    );
+
+    this._disposable.add(
+      doc.slots.blockUpdated.subscribe(payload => {
+        if (
+          payload.type === 'add' &&
+          payload.model instanceof GfxBlockElementModel &&
+          renderableInEdgeless(doc, surfaceModel, payload.model)
+        ) {
+          const frame = this.getFrameFromPoint(
+            payload.model.elementBound.center,
+            isFrameBlock(payload.model) ? [payload.model] : []
+          );
+          if (!frame) return;
+
+          if (
+            isFrameBlock(payload.model) &&
+            payload.model.containsBound(frame.elementBound)
+          ) {
+            return;
+          }
+          this.addElementsToFrame(frame, [payload.model]);
+        }
+      })
+    );
+  }
+
+  /**
+   * Reset parent of elements to the frame
+   */
+  addElementsToFrame(frame: FrameBlockModel, elements: GfxModel[]) {
+    if (frame.isLocked()) return;
+
+    if (frame.props.childElementIds === undefined) {
+      this._addChildrenToLegacyFrame(frame);
+    }
+
+    elements = elements.filter(
+      el => el !== frame && !frame.childElements.includes(el)
+    );
+
+    if (elements.length === 0) return;
+
+    frame.addChildren(elements);
+  }
+
+  createFrameOnBound(bound: Bound) {
+    const frameModel = this._addFrameBlock(bound);
+
+    this.addElementsToFrame(
+      frameModel,
+      getTopElements(this.getElementsInFrameBound(frameModel))
+    );
+
+    this.gfx.doc.captureSync();
+
+    this.gfx.selection.set({
+      elements: [frameModel.id],
+      editing: false,
+    });
+
+    return frameModel;
+  }
+
+  createFrameOnElements(elements: GfxModel[]) {
+    // make sure all elements are in the same level
+    for (const element of elements) {
+      if (element.group !== elements[0].group) return;
+    }
+
+    const parentFrameBound = this.getParentFrame(elements[0])?.elementBound;
+
+    let bound = this.gfx.selection.selectedBound;
+
+    if (parentFrameBound?.contains(bound)) {
+      bound.x -= Math.min(0.5 * (bound.x - parentFrameBound.x), FRAME_PADDING);
+      bound.y -= Math.min(0.5 * (bound.y - parentFrameBound.y), FRAME_PADDING);
+      bound.w += Math.min(
+        0.5 * (parentFrameBound.x + parentFrameBound.w - bound.x - bound.w),
+        FRAME_PADDING
+      );
+      bound.h += Math.min(
+        0.5 * (parentFrameBound.y + parentFrameBound.h - bound.y - bound.h),
+        FRAME_PADDING
+      );
+    } else {
+      bound = bound.expand(FRAME_PADDING);
+    }
+
+    const frameModel = this._addFrameBlock(bound);
+
+    this.addElementsToFrame(frameModel, getTopElements(elements));
+
+    this.gfx.doc.captureSync();
+
+    this.gfx.selection.set({
+      elements: [frameModel.id],
+      editing: false,
+    });
+
+    return frameModel;
+  }
+
+  createFrameOnSelected() {
+    return this.createFrameOnElements(this.gfx.selection.selectedElements);
+  }
+
+  createFrameOnViewportCenter(wh: [number, number]) {
+    const center = this.gfx.viewport.center;
+    const bound = new Bound(
+      center.x - wh[0] / 2,
+      center.y - wh[1] / 2,
+      wh[0],
+      wh[1]
+    );
+
+    this.createFrameOnBound(bound);
+  }
+
+  generatePresentationIndex() {
+    const before =
+      this.frames[this.frames.length - 1]?.props.presentationIndex ?? null;
+
+    return generateKeyBetweenV2(before, null);
+  }
+
+  /**
+   * Get all elements in the frame, there are three cases:
+   * 1. The frame doesn't have `childElements`, return all elements in the frame bound but not owned by another frame.
+   * 2. Return all child elements of the frame if `childElements` exists.
+   */
+  getChildElementsInFrame(frame: FrameBlockModel): GfxModel[] {
+    if (frame.props.childElementIds === undefined) {
+      return this.getElementsInFrameBound(frame).filter(
+        element => this.getParentFrame(element) !== null
+      );
+    }
+
+    const childElements = frame.childIds
+      .map(id => this.gfx.getElementById(id))
+      .filter(element => element !== null);
+
+    return childElements as GfxModel[];
+  }
+
+  /**
+   * Get all elements in the frame bound,
+   * whatever the element already has another parent frame or not.
+   */
+  getElementsInFrameBound(frame: FrameBlockModel, fullyContained = true) {
+    const bound = Bound.deserialize(frame.xywh);
+    const elements: GfxModel[] = this.gfx.grid
+      .search(bound, { strict: fullyContained })
+      .filter(element => element !== frame);
+
+    return elements;
+  }
+
+  /**
+   * Get most top frame from the point.
+   */
+  getFrameFromPoint([x, y]: IVec, ignoreFrames: FrameBlockModel[] = []) {
+    for (let i = this.frames.length - 1; i >= 0; i--) {
+      const frame = this.frames[i];
+      if (frame.includesPoint(x, y, {}) && !ignoreFrames.includes(frame)) {
+        return frame;
+      }
+    }
+    return null;
+  }
+
+  getParentFrame(element: GfxModel) {
+    const container = element.group;
+    return container && isFrameBlock(container) ? container : null;
+  }
+
+  /**
+   * This method will populate `presentationIndex` for all legacy frames,
+   * and keep the orderer of the legacy frames.
+   */
+  refreshLegacyFrameOrder() {
+    const frames = this.frames.splice(0, this.frames.length);
+
+    let splitIndex = frames.findIndex(frame => frame.props.presentationIndex);
+    if (splitIndex === 0) return;
+
+    if (splitIndex === -1) splitIndex = frames.length;
+
+    let afterPreIndex =
+      frames[splitIndex]?.props.presentationIndex ||
+      generateKeyBetweenV2(null, null);
+
+    for (let index = splitIndex - 1; index >= 0; index--) {
+      const preIndex = generateKeyBetweenV2(null, afterPreIndex);
+      frames[index].props.presentationIndex = preIndex;
+      afterPreIndex = preIndex;
+    }
+  }
+
+  removeAllChildrenFromFrame(frame: FrameBlockModel) {
+    this.gfx.doc.transact(() => {
+      frame.props.childElementIds = {};
+    });
+  }
+
+  removeFromParentFrame(element: GfxModel) {
+    const parentFrame = this.getParentFrame(element);
+    // oxlint-disable-next-line unicorn/prefer-dom-node-remove
+    parentFrame?.removeChild(element);
+  }
+
+  override unmounted(): void {
+    this._disposable.dispose();
+  }
+}
+
+function areSetsEqual<T>(setA: Set<T>, setB: Set<T>) {
+  if (setA.size !== setB.size) return false;
+  for (const a of setA) if (!setB.has(a)) return false;
+  return true;
+}
+
+export function isFrameBlock(element: unknown): element is FrameBlockModel {
+  return !!element && (element as BlockModel).flavour === 'affine:frame';
+}

blocksuite/affine/blocks/frame/src/frame-spec.ts

@@ -0,0 +1,16 @@
+import { FrameBlockSchema } from '@blocksuite/affine-model';
+import { BlockViewExtension } from '@blocksuite/std';
+import type { ExtensionType } from '@blocksuite/store';
+import { literal } from 'lit/static-html.js';
+
+import { FrameBlockInteraction } from './frame-block';
+import { EdgelessFrameManager, FrameOverlay } from './frame-manager';
+
+const flavour = FrameBlockSchema.model.flavour;
+
+export const FrameBlockSpec: ExtensionType[] = [
+  BlockViewExtension(flavour, literal`affine-frame`),
+  FrameOverlay,
+  EdgelessFrameManager,
+  FrameBlockInteraction,
+];

blocksuite/affine/blocks/frame/src/frame-tool.ts

@@ -0,0 +1,108 @@
+import {
+  DefaultTool,
+  OverlayIdentifier,
+} from '@blocksuite/affine-block-surface';
+import type { FrameBlockModel } from '@blocksuite/affine-model';
+import {
+  EditPropsStore,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
+import type { IPoint, IVec } from '@blocksuite/global/gfx';
+import { Bound, Vec } from '@blocksuite/global/gfx';
+import type { PointerEventState } from '@blocksuite/std';
+import { BaseTool, getTopElements } from '@blocksuite/std/gfx';
+import { Text } from '@blocksuite/store';
+import * as Y from 'yjs';
+
+import {
+  EdgelessFrameManagerIdentifier,
+  type FrameOverlay,
+} from './frame-manager';
+
+export class FrameTool extends BaseTool {
+  static override toolName = 'frame';
+
+  private _frame: FrameBlockModel | null = null;
+
+  private _startPoint: IVec | null = null;
+
+  get frameManager() {
+    return this.std.get(EdgelessFrameManagerIdentifier);
+  }
+
+  get frameOverlay() {
+    return this.std.get(OverlayIdentifier('frame')) as FrameOverlay;
+  }
+
+  private _toModelCoord(p: IPoint): IVec {
+    return this.gfx.viewport.toModelCoord(p.x, p.y);
+  }
+
+  override dragEnd(): void {
+    if (this._frame) {
+      const frame = this._frame;
+      frame.pop('xywh');
+      this.gfx.tool.setTool(DefaultTool);
+      this.gfx.selection.set({
+        elements: [frame.id],
+        editing: false,
+      });
+
+      this.frameManager.addElementsToFrame(
+        frame,
+        getTopElements(this.frameManager.getElementsInFrameBound(frame))
+      );
+    }
+
+    this._frame = null;
+    this._startPoint = null;
+    this.frameOverlay.clear();
+  }
+
+  override dragMove(e: PointerEventState): void {
+    if (!this._startPoint) return;
+
+    const currentPoint = this._toModelCoord(e.point);
+    if (Vec.dist(this._startPoint, currentPoint) < 8 && !this._frame) return;
+
+    if (!this._frame) {
+      const frames = this.gfx.layer.blocks.filter(
+        block => block.flavour === 'affine:frame'
+      ) as FrameBlockModel[];
+
+      const props = this.std
+        .get(EditPropsStore)
+        .applyLastProps('affine:frame', {
+          title: new Text(new Y.Text(`Frame ${frames.length + 1}`)),
+          xywh: Bound.fromPoints([this._startPoint, currentPoint]).serialize(),
+          index: this.gfx.layer.generateIndex(true),
+          presentationIndex: this.frameManager.generatePresentationIndex(),
+        });
+
+      const id = this.doc.addBlock('affine:frame', props, this.gfx.surface);
+
+      this.std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
+        control: 'canvas:draw',
+        page: 'whiteboard editor',
+        module: 'toolbar',
+        segment: 'toolbar',
+        type: 'frame',
+      });
+      this._frame = this.gfx.getElementById(id) as FrameBlockModel;
+      this._frame.stash('xywh');
+      return;
+    }
+
+    this.gfx.doc.updateBlock(this._frame, {
+      xywh: Bound.fromPoints([this._startPoint, currentPoint]).serialize(),
+    });
+
+    this.frameOverlay.highlight(this._frame, true);
+  }
+
+  override dragStart(e: PointerEventState): void {
+    this.doc.captureSync();
+    const { point } = e;
+    this._startPoint = this._toModelCoord(point);
+  }
+}

blocksuite/affine/blocks/frame/src/frame-toolbar.ts

@@ -0,0 +1,218 @@
+import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import {
+  packColor,
+  type PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import { toast } from '@blocksuite/affine-components/toast';
+import {
+  DEFAULT_NOTE_HEIGHT,
+  DefaultTheme,
+  FrameBlockModel,
+  FrameBlockSchema,
+  NoteBlockModel,
+  NoteBlockSchema,
+  NoteDisplayMode,
+  resolveColor,
+  SurfaceRefBlockSchema,
+} from '@blocksuite/affine-model';
+import {
+  NotificationProvider,
+  type ToolbarContext,
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@blocksuite/affine-shared/services';
+import {
+  getMostCommonResolvedValue,
+  matchModels,
+} from '@blocksuite/affine-shared/utils';
+import { mountFrameTitleEditor } from '@blocksuite/affine-widget-frame-title';
+import { Bound } from '@blocksuite/global/gfx';
+import {
+  EditIcon,
+  InsertIntoPageIcon,
+  UngroupIcon,
+} from '@blocksuite/icons/lit';
+import { type BlockComponent, BlockFlavourIdentifier } from '@blocksuite/std';
+import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
+import type { ExtensionType } from '@blocksuite/store';
+import { html } from 'lit';
+
+import { EdgelessFrameManagerIdentifier } from './frame-manager';
+
+function getRootBlock(ctx: ToolbarContext): BlockComponent | null {
+  const rootModel = ctx.store.root;
+  if (!rootModel) return null;
+
+  return ctx.view.getBlock(rootModel.id);
+}
+
+const builtinSurfaceToolbarConfig = {
+  actions: [
+    {
+      id: 'a.insert-into-page',
+      label: 'Insert into Page',
+      tooltip: 'Insert into Page',
+      icon: InsertIntoPageIcon(),
+      when: ctx => ctx.getSurfaceModelsByType(FrameBlockModel).length === 1,
+      run(ctx) {
+        const model = ctx.getCurrentModelByType(FrameBlockModel);
+        if (!model) return;
+
+        const rootModel = ctx.store.root;
+        if (!rootModel) return;
+
+        const { id: frameId, xywh } = model;
+        let lastNoteId = rootModel.children.findLast(
+          note =>
+            matchModels(note, [NoteBlockModel]) &&
+            note.props.displayMode !== NoteDisplayMode.EdgelessOnly
+        )?.id;
+
+        if (!lastNoteId) {
+          const bounds = Bound.deserialize(xywh);
+          bounds.y += bounds.h;
+          bounds.h = DEFAULT_NOTE_HEIGHT;
+
+          lastNoteId = ctx.store.addBlock(
+            NoteBlockSchema.model.flavour,
+            { xywh: bounds.serialize() },
+            rootModel.id
+          );
+        }
+
+        ctx.store.captureSync();
+        ctx.store.addBlock(
+          SurfaceRefBlockSchema.model.flavour,
+          { reference: frameId, refFlavour: FrameBlockSchema.model.flavour },
+          lastNoteId
+        );
+
+        const notification = ctx.std.getOptional(NotificationProvider);
+        if (notification) {
+          notification.notifyWithUndoAction({
+            title: 'Frame inserted into Page.',
+            message: 'Frame has been inserted into doc',
+            accent: 'success',
+          });
+        } else {
+          toast(ctx.host, 'Frame has been inserted into doc');
+        }
+      },
+    },
+    {
+      id: 'b.rename',
+      tooltip: 'Rename',
+      icon: EditIcon(),
+      when: ctx => ctx.getSurfaceModelsByType(FrameBlockModel).length === 1,
+      run(ctx) {
+        const model = ctx.getCurrentModelByType(FrameBlockModel);
+        if (!model) return;
+
+        const rootBlock = getRootBlock(ctx);
+        if (!rootBlock) return;
+
+        mountFrameTitleEditor(model, rootBlock);
+      },
+    },
+    {
+      id: 'b.ungroup',
+      tooltip: 'Ungroup',
+      icon: UngroupIcon(),
+      run(ctx) {
+        const models = ctx.getSurfaceModelsByType(FrameBlockModel);
+        if (!models.length) return;
+
+        const crud = ctx.std.get(EdgelessCRUDIdentifier);
+        const gfx = ctx.std.get(GfxControllerIdentifier);
+
+        ctx.store.captureSync();
+
+        const frameManager = ctx.std.get(EdgelessFrameManagerIdentifier);
+
+        for (const model of models) {
+          frameManager.removeAllChildrenFromFrame(model);
+        }
+
+        for (const model of models) {
+          crud.removeElement(model.id);
+        }
+
+        gfx.selection.clear();
+      },
+    },
+    {
+      id: 'c.color-picker',
+      content(ctx) {
+        const models = ctx.getSurfaceModelsByType(FrameBlockModel);
+        if (!models.length) return null;
+
+        const enableCustomColor = ctx.features.getFlag('enable_color_picker');
+        const theme = ctx.theme.edgeless$.value;
+
+        const field = 'background';
+        const firstModel = models[0];
+        const background =
+          getMostCommonResolvedValue(
+            models.map(model => model.props),
+            field,
+            background => resolveColor(background, theme)
+          ) ?? DefaultTheme.transparent;
+        const onPick = (e: PickColorEvent) => {
+          switch (e.type) {
+            case 'pick':
+              {
+                const color = e.detail.value;
+                const props = packColor(field, color);
+                const crud = ctx.std.get(EdgelessCRUDIdentifier);
+                models.forEach(model => {
+                  crud.updateElement(model.id, props);
+                });
+              }
+              break;
+            case 'start':
+              ctx.store.captureSync();
+              models.forEach(model => {
+                model.stash(field);
+              });
+              break;
+            case 'end':
+              ctx.store.transact(() => {
+                models.forEach(model => {
+                  model.pop(field);
+                });
+              });
+              break;
+          }
+        };
+
+        return html`
+          <edgeless-color-picker-button
+            class="background"
+            .label="${'Background'}"
+            .pick=${onPick}
+            .color=${background}
+            .theme=${theme}
+            .originalColor=${firstModel.props.background}
+            .enableCustomColor=${enableCustomColor}
+          >
+          </edgeless-color-picker-button>
+        `;
+      },
+    },
+  ],
+
+  when: ctx => ctx.getSurfaceModelsByType(FrameBlockModel).length > 0,
+} as const satisfies ToolbarModuleConfig;
+
+const createFrameToolbarConfig = (flavour: string): ExtensionType => {
+  const name = flavour.split(':').pop();
+
+  return ToolbarModuleExtension({
+    id: BlockFlavourIdentifier(`affine:surface:${name}`),
+    config: builtinSurfaceToolbarConfig,
+  });
+};
+
+export const frameToolbarExtension = createFrameToolbarConfig(
+  FrameBlockSchema.model.flavour
+);

blocksuite/affine/blocks/frame/src/index.ts

@@ -0,0 +1,9 @@
+export * from './edgeless-clipboard-config';
+export * from './edgeless-toolbar';
+export * from './frame-block';
+export * from './frame-highlight-manager';
+export * from './frame-manager';
+export * from './frame-spec';
+export * from './frame-tool';
+export * from './frame-toolbar';
+export * from './present-tool';

blocksuite/affine/blocks/frame/src/present-tool.ts

@@ -0,0 +1,12 @@
+import { BaseTool } from '@blocksuite/std/gfx';
+
+import type { NavigatorMode } from './frame-manager';
+
+export type PresentToolOption = {
+  mode?: NavigatorMode;
+  restoredAfterPan?: boolean;
+};
+
+export class PresentTool extends BaseTool<PresentToolOption> {
+  static override toolName: string = 'frameNavigator';
+}

blocksuite/affine/blocks/frame/src/present/frame-order-button.ts

@@ -0,0 +1,82 @@
+import type { FrameBlockModel } from '@blocksuite/affine-model';
+import { createButtonPopper } from '@blocksuite/affine-shared/utils';
+import { WithDisposable } from '@blocksuite/global/lit';
+import { LayerIcon } from '@blocksuite/icons/lit';
+import type { BlockComponent } from '@blocksuite/std';
+import { css, html, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+
+import type { EdgelessFrameOrderMenu } from './frame-order-menu.js';
+
+export class EdgelessFrameOrderButton extends WithDisposable(LitElement) {
+  static override styles = css`
+    edgeless-frame-order-menu {
+      display: none;
+    }
+
+    edgeless-frame-order-menu[data-show] {
+      display: initial;
+    }
+  `;
+
+  private _edgelessFrameOrderPopper: ReturnType<
+    typeof createButtonPopper
+  > | null = null;
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this._edgelessFrameOrderPopper?.dispose();
+  }
+
+  override firstUpdated() {
+    this._edgelessFrameOrderPopper = createButtonPopper({
+      reference: this._edgelessFrameOrderButton,
+      popperElement: this._edgelessFrameOrderMenu,
+      stateUpdated: ({ display }) => this.setPopperShow(display === 'show'),
+      mainAxis: 22,
+    });
+  }
+
+  protected override render() {
+    const { readonly } = this.edgeless.store;
+    return html`
+      <style>
+        .edgeless-frame-order-button svg {
+          color: ${readonly ? 'var(--affine-text-disable-color)' : 'inherit'};
+        }
+      </style>
+      <edgeless-tool-icon-button
+        class="edgeless-frame-order-button"
+        .iconSize=${'24px'}
+        .tooltip=${this.popperShow ? '' : 'Frame Order'}
+        @click=${() => {
+          if (readonly) return;
+          this._edgelessFrameOrderPopper?.toggle();
+        }}
+        .iconContainerPadding=${0}
+      >
+        ${LayerIcon()}
+      </edgeless-tool-icon-button>
+      <edgeless-frame-order-menu .edgeless=${this.edgeless}>
+      </edgeless-frame-order-menu>
+    `;
+  }
+
+  @query('.edgeless-frame-order-button')
+  private accessor _edgelessFrameOrderButton!: HTMLElement;
+
+  @query('edgeless-frame-order-menu')
+  private accessor _edgelessFrameOrderMenu!: EdgelessFrameOrderMenu;
+
+  @property({ attribute: false })
+  accessor edgeless!: BlockComponent;
+
+  @property({ attribute: false })
+  accessor frames!: FrameBlockModel[];
+
+  @property({ attribute: false })
+  accessor popperShow = false;
+
+  @property({ attribute: false })
+  accessor setPopperShow: (show: boolean) => void = () => {};
+}

blocksuite/affine/blocks/frame/src/present/frame-order-menu.ts

@@ -0,0 +1,267 @@
+import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import { DisposableGroup } from '@blocksuite/global/disposable';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
+import type { BlockComponent } from '@blocksuite/std';
+import { generateKeyBetweenV2 } from '@blocksuite/std/gfx';
+import { css, html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+import { EdgelessFrameManagerIdentifier } from '../frame-manager';
+
+export class EdgelessFrameOrderMenu extends SignalWatcher(
+  WithDisposable(LitElement)
+) {
+  static override styles = css`
+    :host {
+      position: relative;
+    }
+    .edgeless-frame-order-items-container {
+      max-height: 281px;
+      border-radius: 8px;
+      padding: 8px;
+      background: var(--affine-background-overlay-panel-color);
+      box-shadow: var(--affine-menu-shadow);
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .edgeless-frame-order-items-container.embed {
+      padding: 0;
+      background: unset;
+      box-shadow: unset;
+      border-radius: 0;
+    }
+
+    .item {
+      box-sizing: border-box;
+      width: 256px;
+      border-radius: 4px;
+      padding: 4px;
+      display: flex;
+      gap: 4px;
+      align-items: center;
+      cursor: grab;
+    }
+
+    .draggable:hover {
+      background-color: var(--affine-hover-color);
+    }
+
+    .item:hover .drag-indicator {
+      opacity: 1;
+    }
+
+    .drag-indicator {
+      cursor: pointer;
+      width: 4px;
+      height: 12px;
+      border-radius: 1px;
+      opacity: 0.2;
+      background: var(--affine-placeholder-color);
+      margin-right: 2px;
+    }
+
+    .title {
+      font-size: 14px;
+      font-weight: 400;
+      height: 22px;
+      line-height: 22px;
+      color: var(--affine-text-primary-color);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .clone {
+      visibility: hidden;
+      position: absolute;
+      z-index: 1;
+      left: 8px;
+      height: 30px;
+      border: 1px solid var(--affine-border-color);
+      box-shadow: var(--affine-menu-shadow);
+      background-color: var(--affine-white);
+      pointer-events: none;
+    }
+
+    .indicator-line {
+      visibility: hidden;
+      position: absolute;
+      z-index: 1;
+      left: 8px;
+      background-color: var(--affine-primary-color);
+      height: 1px;
+      width: 90%;
+    }
+  `;
+
+  get crud() {
+    return this.edgeless.std.get(EdgelessCRUDIdentifier);
+  }
+
+  private get _frameMgr() {
+    return this.edgeless.std.get(EdgelessFrameManagerIdentifier);
+  }
+
+  private get _frames() {
+    return this._frameMgr.frames;
+  }
+
+  private _bindEvent() {
+    const { _disposables } = this;
+
+    _disposables.addFromEvent(this._container, 'wheel', e => {
+      e.stopPropagation();
+    });
+
+    _disposables.addFromEvent(this._container, 'pointerdown', e => {
+      const ele = e.target as HTMLElement;
+      const draggable = ele.closest('.draggable');
+      if (!draggable) return;
+      const clone = this._clone;
+      const indicatorLine = this._indicatorLine;
+      clone.style.visibility = 'visible';
+
+      const rect = draggable.getBoundingClientRect();
+
+      const index = Number(draggable.getAttribute('index'));
+      this._curIndex = index;
+      let newIndex = -1;
+
+      const containerRect = this._container.getBoundingClientRect();
+      const start = containerRect.top + 8;
+      const end = containerRect.bottom;
+
+      const shiftX = e.clientX - rect.left;
+      const shiftY = e.clientY - rect.top;
+      function moveAt(x: number, y: number) {
+        clone.style.left = x - containerRect.left - shiftX + 'px';
+        clone.style.top = y - containerRect.top - shiftY + 'px';
+      }
+
+      function isInsideContainer(e: PointerEvent) {
+        return e.clientY >= start && e.clientY <= end;
+      }
+      moveAt(e.clientX, e.clientY);
+
+      this._disposables.addFromEvent(document, 'pointermove', e => {
+        indicatorLine.style.visibility = 'visible';
+        moveAt(e.clientX, e.clientY);
+        if (isInsideContainer(e)) {
+          const relativeY = e.pageY + this._container.scrollTop - start;
+          let top = 0;
+          if (relativeY < rect.height / 2) {
+            newIndex = 0;
+            top = this.embed ? -2 : 4;
+          } else {
+            newIndex = Math.ceil(
+              (relativeY - rect.height / 2) / (rect.height + 10)
+            );
+            top =
+              (this.embed ? -2 : 7.5) +
+              newIndex * rect.height +
+              (newIndex - 0.5) * 4;
+          }
+
+          indicatorLine.style.top = top - this._container.scrollTop + 'px';
+          return;
+        }
+        newIndex = -1;
+      });
+
+      this._disposables.addFromEvent(document, 'pointerup', () => {
+        clone.style.visibility = 'hidden';
+        indicatorLine.style.visibility = 'hidden';
+        if (
+          newIndex >= 0 &&
+          newIndex <= this._frames.length &&
+          newIndex !== index &&
+          newIndex !== index + 1
+        ) {
+          const frameMgr = this._frameMgr;
+          // Legacy compatibility
+          frameMgr.refreshLegacyFrameOrder();
+
+          const before =
+            this._frames[newIndex - 1]?.props.presentationIndex || null;
+          const after = this._frames[newIndex]?.props.presentationIndex || null;
+
+          const frame = this._frames[index];
+
+          this.crud.updateElement(frame.id, {
+            presentationIndex: generateKeyBetweenV2(before, after),
+          });
+          this.edgeless.store.captureSync();
+
+          this.requestUpdate();
+        }
+        this._disposables.dispose();
+        this._disposables = new DisposableGroup();
+        this._bindEvent();
+      });
+    });
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._disposables.dispose();
+  }
+
+  override firstUpdated() {
+    this._bindEvent();
+  }
+
+  override render() {
+    const frame = this._frames[this._curIndex];
+
+    return html`
+      <div
+        class="edgeless-frame-order-items-container ${
+          this.embed ? 'embed' : ''
+        }"
+        @click=${(e: MouseEvent) => e.stopPropagation()}
+      >
+        ${repeat(
+          this._frames,
+          frame => frame.id,
+          (frame, index) => html`
+            <div class="item draggable" id=${frame.id} index=${index}>
+              <div class="drag-indicator"></div>
+              <div class="title">${frame.props.title.toString()}</div>
+            </div>
+          `
+        )}
+        <div class="indicator-line"></div>
+        <div class="clone item">
+          ${
+            frame
+              ? html`<div class="drag-indicator"></div>
+                  <div class="index">${this._curIndex + 1}</div>
+                  <div class="title">${frame.props.title.toString()}</div>`
+              : nothing
+          }
+        </div>
+      </div>
+    `;
+  }
+
+  @query('.clone')
+  private accessor _clone!: HTMLDivElement;
+
+  @query('.edgeless-frame-order-items-container')
+  private accessor _container!: HTMLDivElement;
+
+  @state()
+  private accessor _curIndex = -1;
+
+  @query('.indicator-line')
+  private accessor _indicatorLine!: HTMLDivElement;
+
+  @property({ attribute: false })
+  accessor edgeless!: BlockComponent;
+
+  @property({ attribute: false })
+  accessor embed = false;
+}

blocksuite/affine/blocks/frame/src/present/navigator-bg-widget.ts

@@ -0,0 +1,126 @@
+import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
+import type { FrameBlockModel, RootBlockModel } from '@blocksuite/affine-model';
+import { EditPropsStore } from '@blocksuite/affine-shared/services';
+import { Bound } from '@blocksuite/global/gfx';
+import { WidgetComponent, WidgetViewExtension } from '@blocksuite/std';
+import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
+import { effect } from '@preact/signals-core';
+import { css, html, nothing } from 'lit';
+import { state } from 'lit/decorators.js';
+import { literal, unsafeStatic } from 'lit/static-html.js';
+
+import { PresentTool } from '../present-tool';
+
+export const EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET =
+  'edgeless-navigator-black-background';
+export class EdgelessNavigatorBlackBackgroundWidget extends WidgetComponent<RootBlockModel> {
+  static override styles = css`
+    .edgeless-navigator-black-background {
+      background-color: black;
+      position: absolute;
+      z-index: 1;
+      background-color: transparent;
+      box-shadow: 0 0 0 5000px black;
+      pointer-events: none;
+    }
+  `;
+
+  private _blackBackground = false;
+
+  get gfx() {
+    return this.std.get(GfxControllerIdentifier);
+  }
+
+  private get _slots() {
+    return this.std.get(EdgelessLegacySlotIdentifier);
+  }
+
+  private _tryLoadBlackBackground() {
+    const value = this.std
+      .get(EditPropsStore)
+      .getStorage('presentBlackBackground');
+    this._blackBackground = value ?? true;
+  }
+
+  override firstUpdated() {
+    const { _disposables, gfx } = this;
+    _disposables.add(
+      this._slots.navigatorFrameChanged.subscribe(frame => {
+        this.frame = frame;
+      })
+    );
+
+    _disposables.add(
+      this._slots.navigatorSettingUpdated.subscribe(({ blackBackground }) => {
+        if (blackBackground !== undefined) {
+          this.std
+            .get(EditPropsStore)
+            .setStorage('presentBlackBackground', blackBackground);
+
+          this._blackBackground = blackBackground;
+
+          this.show =
+            blackBackground &&
+            this.gfx.tool.currentToolOption$.peek().toolType === PresentTool;
+        }
+      })
+    );
+
+    _disposables.add(
+      effect(() => {
+        const tool = gfx.tool.currentToolName$.value;
+
+        if (tool !== 'frameNavigator') {
+          this.show = false;
+        } else {
+          this.show = this._blackBackground;
+        }
+      })
+    );
+
+    _disposables.add(
+      this._slots.fullScreenToggled.subscribe(
+        () =>
+          setTimeout(() => {
+            this.requestUpdate();
+          }, 500) // wait for full screen animation
+      )
+    );
+
+    this._tryLoadBlackBackground();
+  }
+
+  override render() {
+    const { frame, show, gfx } = this;
+
+    if (!show || !frame) return nothing;
+
+    const bound = Bound.deserialize(frame.xywh);
+    const zoom = gfx.viewport.zoom;
+    const width = bound.w * zoom;
+    const height = bound.h * zoom;
+    const [x, y] = gfx.viewport.toViewCoord(bound.x, bound.y);
+
+    return html` <style>
+        .edgeless-navigator-black-background {
+          width: ${width}px;
+          height: ${height}px;
+          top: ${y}px;
+          left: ${x}px;
+        }
+      </style>
+      <div class="edgeless-navigator-black-background"></div>`;
+  }
+
+  @state()
+  private accessor frame: FrameBlockModel | undefined = undefined;
+
+  @state()
+  private accessor show = false;
+}
+
+export const edgelessNavigatorBgWidget = WidgetViewExtension(
+  'affine:page',
+  EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET,
+  literal`${unsafeStatic(EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET)}`
+);

blocksuite/affine/blocks/frame/src/present/navigator-setting-button.ts

@@ -0,0 +1,197 @@
+import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
+import { EditPropsStore } from '@blocksuite/affine-shared/services';
+import { createButtonPopper } from '@blocksuite/affine-shared/utils';
+import { WithDisposable } from '@blocksuite/global/lit';
+import { SettingsIcon } from '@blocksuite/icons/lit';
+import type { BlockComponent } from '@blocksuite/std';
+import { css, html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+
+export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
+  static override styles = css`
+    .navigator-setting-menu {
+      display: none;
+      padding: 8px;
+      border-radius: 8px;
+      font-size: 12px;
+      font-weight: 500;
+      background-color: var(--affine-background-overlay-panel-color);
+      box-shadow: var(--affine-menu-shadow);
+      color: var(--affine-text-primary-color);
+    }
+
+    .navigator-setting-menu[data-show] {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .item-container {
+      padding: 4px 12px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      min-width: 264px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+    .item-container.header {
+      height: 34px;
+    }
+
+    .text {
+      padding: 0px 4px;
+      line-height: 22px;
+      font-size: var(--affine-font-sm);
+      color: var(--affine-text-primary-color);
+    }
+
+    .text.title {
+      font-weight: 500;
+      line-height: 20px;
+      font-size: var(--affine-font-xs);
+      color: var(--affine-text-secondary-color);
+    }
+
+    .divider {
+      width: 100%;
+      height: 16px;
+      display: flex;
+      align-items: center;
+    }
+    .divider::before {
+      content: '';
+      width: 100%;
+      height: 1px;
+      background: var(--affine-border-color);
+    }
+  `;
+
+  private _navigatorSettingPopper?: ReturnType<
+    typeof createButtonPopper
+  > | null = null;
+
+  private readonly _onBlackBackgroundChange = (checked: boolean) => {
+    this.blackBackground = checked;
+    const slots = this.edgeless.std.get(EdgelessLegacySlotIdentifier);
+    slots.navigatorSettingUpdated.next({
+      blackBackground: this.blackBackground,
+    });
+    this.edgeless.std
+      .get(EditPropsStore)
+      .setStorage('presentBlackBackground', checked);
+  };
+
+  private _tryRestoreSettings() {
+    const blackBackground = this.edgeless.std
+      .get(EditPropsStore)
+      .getStorage('presentBlackBackground');
+    this.blackBackground = blackBackground ?? false;
+  }
+
+  override disconnectedCallback(): void {
+    this._navigatorSettingPopper?.dispose();
+    this._navigatorSettingPopper = null;
+  }
+
+  override firstUpdated() {
+    if (this.edgeless) this._tryRestoreSettings();
+    this._navigatorSettingPopper = createButtonPopper({
+      reference: this._navigatorSettingButton,
+      popperElement: this._navigatorSettingMenu,
+      stateUpdated: ({ display }) => this.setPopperShow(display === 'show'),
+      mainAxis: 22,
+    });
+  }
+
+  override render() {
+    return html`
+      <edgeless-tool-icon-button
+        class="navigator-setting-button"
+        .tooltip=${this.popperShow ? '' : 'Settings'}
+        .iconSize=${'24px'}
+        @click=${() => {
+          this._navigatorSettingPopper?.toggle();
+        }}
+        .iconContainerPadding=${0}
+      >
+        ${SettingsIcon()}
+      </edgeless-tool-icon-button>
+
+      <div
+        class="navigator-setting-menu"
+        @click=${(e: MouseEvent) => {
+          e.stopPropagation();
+        }}
+      >
+        <div class="item-container header">
+          <div class="text title">Playback Settings</div>
+        </div>
+
+        <div class="item-container">
+          <div class="text">Black background</div>
+
+          <toggle-switch
+            .on=${this.blackBackground}
+            .onChange=${this._onBlackBackgroundChange}
+          >
+          </toggle-switch>
+        </div>
+
+        <div class="item-container">
+          <div class="text">Hide toolbar</div>
+
+          <toggle-switch
+            .on=${this.hideToolbar}
+            .onChange=${(checked: boolean) => {
+              this.onHideToolbarChange && this.onHideToolbarChange(checked);
+            }}
+          >
+          </toggle-switch>
+        </div>
+
+        ${
+          this.includeFrameOrder
+            ? html` <div class="divider"></div>
+                <div class="item-container header">
+                  <div class="text title">Frame Order</div>
+                </div>
+
+                <edgeless-frame-order-menu
+                  .edgeless=${this.edgeless}
+                  .embed=${true}
+                ></edgeless-frame-order-menu>`
+            : nothing
+        }
+      </div>
+    `;
+  }
+
+  @query('.navigator-setting-button')
+  private accessor _navigatorSettingButton!: HTMLElement;
+
+  @query('.navigator-setting-menu')
+  private accessor _navigatorSettingMenu!: HTMLElement;
+
+  @state()
+  accessor blackBackground = false;
+
+  @property({ attribute: false })
+  accessor edgeless!: BlockComponent;
+
+  @property({ attribute: false })
+  accessor hideToolbar = false;
+
+  @property({ attribute: false })
+  accessor includeFrameOrder = false;
+
+  @property({ attribute: false })
+  accessor onHideToolbarChange: undefined | ((hideToolbar: boolean) => void) =
+    undefined;
+
+  @property({ attribute: false })
+  accessor popperShow = false;
+
+  @property({ attribute: false })
+  accessor setPopperShow: (show: boolean) => void = () => {};
+}

blocksuite/affine/blocks/frame/src/present/present-button.ts

@@ -0,0 +1,40 @@
+import {
+  EdgelessToolbarToolMixin,
+  QuickToolMixin,
+} from '@blocksuite/affine-widget-edgeless-toolbar';
+import { PresentationIcon } from '@blocksuite/icons/lit';
+import { css, html, LitElement } from 'lit';
+
+import { PresentTool } from '../present-tool';
+
+export class EdgelessPresentButton extends QuickToolMixin(
+  EdgelessToolbarToolMixin(LitElement)
+) {
+  static override styles = css`
+    :host {
+      display: flex;
+    }
+    .edgeless-note-button {
+      display: flex;
+      position: relative;
+    }
+  `;
+
+  override type = PresentTool;
+
+  override render() {
+    return html`<edgeless-tool-icon-button
+    class="edgeless-frame-navigator-button"
+    .tooltip=${'Present'}
+    .tooltipOffset=${17}
+    .iconContainerPadding=${6}
+    .iconSize=${'24px'}
+    @click=${() => {
+      this.setEdgelessTool(PresentTool);
+    }}
+  >
+    ${PresentationIcon()}
+    </edgeless-tool-icon-button>
+  </div>`;
+  }
+}

blocksuite/affine/blocks/frame/src/store.ts

@@ -0,0 +1,14 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { FrameBlockSchemaExtension } from '@blocksuite/affine-model';
+
+export class FrameStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-frame-block';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register([FrameBlockSchemaExtension]);
+  }
+}

blocksuite/affine/blocks/frame/src/view.ts

@@ -0,0 +1,39 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { EdgelessClipboardFrameConfig } from './edgeless-clipboard-config';
+import { frameQuickTool } from './edgeless-toolbar';
+import { effects } from './effects';
+import { FrameBlockInteraction } from './frame-block';
+import { FrameHighlightManager } from './frame-highlight-manager';
+import { FrameBlockSpec } from './frame-spec';
+import { FrameTool } from './frame-tool';
+import { frameToolbarExtension } from './frame-toolbar';
+import { edgelessNavigatorBgWidget } from './present/navigator-bg-widget';
+import { PresentTool } from './present-tool';
+
+export class FrameViewExtension extends ViewExtensionProvider {
+  override name = 'affine-frame-block';
+
+  override effect(): void {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext): void {
+    super.setup(context);
+    context.register(FrameBlockSpec);
+    if (this.isEdgeless(context.scope)) {
+      context.register(FrameHighlightManager);
+      context.register(FrameTool);
+      context.register(PresentTool);
+      context.register(frameQuickTool);
+      context.register(frameToolbarExtension);
+      context.register(edgelessNavigatorBgWidget);
+      context.register(EdgelessClipboardFrameConfig);
+      context.register(FrameBlockInteraction);
+    }
+  }
+}

blocksuite/affine/blocks/frame/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../surface" },
+    { "path": "../../components" },
+    { "path": "../../ext-loader" },
+    { "path": "../../gfx/pointer" },
+    { "path": "../../model" },
+    { "path": "../../shared" },
+    { "path": "../../widgets/edgeless-toolbar" },
+    { "path": "../../widgets/frame-title" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/std" },
+    { "path": "../../../framework/store" }
+  ]
+}