Related to: [BS-3559](https://linear.app/affine-design/issue/BS-3559/ui-%E5%9B%BE%E7%89%87-loading-%E5%8F%98%E9%87%8F%E6%9B%B4%E6%96%B0)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Style**
- Improved the appearance of image loading indicators by updating background and ring colors for a more consistent visual experience.
- **New Features**
- Added customization options for the loading icon's ring color.
- **Chores**
- Updated the "@toeverything/theme" dependency to version ^1.1.15 across multiple packages for improved consistency and compatibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Improved file selection dialogs for attachments, imports, and uploads, allowing for more consistent and streamlined file picking across the app.
- **Bug Fixes**
- Resolved inconsistencies when selecting single or multiple files, ensuring a smoother user experience during file import and upload.
- **Refactor**
- Unified and simplified file selection logic throughout the app for better reliability and maintainability.
- Standardized import functions to uniformly handle arrays of files, enhancing consistency in file processing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes: [BS-3555](https://linear.app/affine-design/issue/BS-3555/ui-attachment-loading-变量更新)
Closes: [BS-3559](https://linear.app/affine-design/issue/BS-3559/ui-图片-loading-变量更新)
### Dark
<img width="625" alt="Screenshot 2025-05-26 at 20 32 36" src="https://github.com/user-attachments/assets/93501e3d-8fc6-45f9-84a0-ac147e5c5f9f" />
### Light
<img width="623" alt="Screenshot 2025-05-26 at 20 32 25" src="https://github.com/user-attachments/assets/7d5bc128-6667-45b5-982d-dab3a22706a7" />
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Loading icons are now invoked as functions, allowing for more flexible and customizable rendering with parameters like size and progress.
- **Refactor**
- Replaced theme-dependent and static loading icon references with a unified `LoadingIcon()` component across multiple components and blocks.
- Removed legacy icon variants and simplified icon import statements, centralizing icon rendering logic.
- **Style**
- Updated styles for loading and reload buttons to use theme-aware CSS variables.
- Enlarged and repositioned loading indicators in image blocks for better visibility.
- **Bug Fixes**
- Achieved consistent loading icon rendering across various blocks and components by standardizing icon invocation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes [BS-3528](https://linear.app/affine-design/issue/BS-3528)
Fixes [BS-3331](https://linear.app/affine-design/issue/BS-3331/frame-移动逻辑很奇怪)
### Changed
- Remove `onSelected` method from gfx view, use `handleSelection` provided by `GfxViewInteraction` instead.
- Add `selectable` to allow model to filter out itself from selection.
- Frame can be selected by body only if it's locked or its background is not transparent.
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Enhanced selection behavior for frames, edgeless text, notes, and mind map elements with refined control based on lock state and background transparency.
- Introduced group-aware selection logic promoting selection of appropriate group ancestors.
- Added support for element selection events in interactivity extensions.
- **Bug Fixes**
- Resolved frame selection issues by enabling selection via title clicks and restricting body selection to locked frames or those with non-transparent backgrounds.
- **Documentation**
- Added clarifying comments for group retrieval methods.
- **Tests**
- Updated and added end-to-end tests for frame and lock selection reflecting new selection conditions.
- **Refactor**
- Unified and simplified selection handling by moving logic from component methods to interaction handlers and removing deprecated selection methods.
- Streamlined selection candidate processing with extension-driven target suggestion.
- Removed legacy group element retrieval and selection helper methods to simplify interaction logic.
- **Style**
- Renamed types and improved type signatures for selection context and interaction configurations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes [BS-3349](https://linear.app/affine-design/issue/BS-3349/)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Improved edge scrolling during selection dragging for smoother and more responsive viewport navigation.
- Dragging area and mouse position tracking now update reactively with viewport changes, ensuring more accurate selection and movement.
- **Refactor**
- Unified and clarified coordinate handling for dragging and mouse position, with clearer naming and separation between model and browser coordinates.
- Simplified selection logic and removed unnecessary accumulated state for cleaner and more maintainable behavior.
- Enhanced flexibility in coordinate conversion by allowing viewport transformations relative to arbitrary zoom and center.
- Streamlined clipboard paste handling by simplifying mouse position extraction and adjusting attachment options.
- **Bug Fixes**
- Enhanced overlay and dragging area accuracy by updating position calculations and coordinate transformations.
- Fixed paste operations to correctly handle mouse position without unnecessary coordinate conversions.
- Corrected drag initiation positions in toolbar and shape dragging to align with viewport-relative coordinates.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Chores**
- Removed multiple internal export entries related to effects modules across various packages.
- Updated dependencies and configuration references to improve internal consistency. No visible changes for end-users.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes: BS-3149
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Improved internal handling of surface components across various tools, resulting in safer and more consistent access patterns.
- Enhanced code maintainability and reliability without altering any visible features or user workflows.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### Changed
This pr split the old `edgeless-selected-rect` into four focused modules:
- `edgeless-selected-rect`: Provide an entry point for user operation on view layer only, no further logic here.
- `GfxViewInteractionExtension`: Allow you to plug in custom resize/rotate behaviors for block or canvas element. If you don’t register an extension, it falls back to the default behaviours.
- `InteractivityManager`: Provide the API that accepts resize/rotate requests, invokes any custom behaviors you’ve registered, tracks the lifecycle and intermediate state, then hands off to the math engine.
- `ResizeController`: A pure math engine that listens for pointer moves and pointer ups and calculates new sizes, positions, and angles. It doesn’t call any business APIs.
### Customizing an element’s resize/rotate behavior
Call `GfxViewInteractionExtension` with the element’s flavour or type plus a config object. In the config you can define:
- `resizeConstraint` (min/max width & height, lock ratio)
- `handleResize(context)` method that returns an object containing `beforeResize`、`onResizeStart`、`onResizeMove`、`onResizeEnd`
- `handleRotate(context)` method that returns an object containing `beforeRotate`、`onRotateStart`、`onRotateMove`、`onRotateEnd`
```typescript
import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
GfxViewInteractionExtension(
flavourOrElementType,
{
resizeConstraint: {
minWidth,
maxWidth,
lockRatio,
minHeight,
maxHeight
},
handleResize(context) {
return {
beforeResize(context) {},
onResizeStart(context) {},
onResizeMove(context) {},
onResizeEnd(context) {}
};
},
handleRotate(context) {
return {
beforeRotate(context) {},
onRotateStart(context) {},
onRotateMove(context) {},
onRotateEnd(context) {}
};
}
}
);
```
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added interaction extensions for edgeless variants of attachment, bookmark, edgeless text, embedded docs, images, notes, frames, AI chat blocks, and various embed blocks (Figma, GitHub, HTML, iframe, Loom, YouTube).
- Introduced interaction extensions for graphical elements including connectors, groups, mind maps, shapes, and text, supporting constrained resizing and rotation disabling where applicable.
- Implemented a unified interaction extension framework enabling configurable resize and rotate lifecycle handlers.
- Enhanced autocomplete overlay behavior based on selection context.
- **Refactor**
- Removed legacy resize manager and element-specific resize/rotate logic, replacing with a centralized, extensible interaction system.
- Simplified resize handle rendering to a data-driven approach with improved cursor management.
- Replaced complex cursor rotation calculations with fixed-angle mappings for resize handles.
- Streamlined selection rectangle component to use interactivity services for resize and rotate handling.
- **Bug Fixes**
- Fixed connector update triggers to reduce unnecessary updates.
- Improved resize constraints enforcement and interaction state tracking.
- **Tests**
- Refined end-to-end tests to use higher-level resize utilities and added finer-grained assertions on element dimensions.
- Enhanced mouse movement granularity in drag tests for better simulation fidelity.
- **Chores**
- Added new workspace dependencies and project references for the interaction framework modules.
- Extended public API exports to include new interaction types and extensions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Unified internal data access by replacing all references from `doc` to `store` across all components, blocks, widgets, and utilities. This affects how readonly state, block operations, and service retrieval are handled throughout the application.
- **Tests**
- Updated all test utilities and test cases to use `store` instead of `doc` for document-related operations.
- **Chores**
- Updated context providers and property names to reflect the change from `doc` to `store` for improved consistency and maintainability.
No user-facing features or behaviors have changed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Related to: [BS-3143](https://linear.app/affine-design/issue/BS-3143/更新-loading-和错误样式)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a unified resource controller for managing image and attachment resources, providing improved loading, error, and state handling.
- Added a visual loading indicator overlay to image blocks for better feedback during image loading.
- **Improvements**
- Simplified and centralized image and attachment state management, reducing redundant properties and manual state tracking.
- Updated fallback UI for image blocks with clearer titles, descriptions, and improved layout.
- Enhanced batch image block creation and download handling for improved efficiency.
- Refined image block accessibility with improved alt text and streamlined rendering logic.
- Centralized target model selection for image insertion in AI actions.
- Reordered CSS declarations without affecting styling.
- Improved reactive state tracking for blob upload/download operations in mock server.
- **Bug Fixes**
- Improved cleanup of object URLs to prevent resource leaks.
- Adjusted toolbar logic to more accurately reflect available actions based on image state.
- **Tests**
- Updated end-to-end tests to match new UI text and behaviors for image loading and error states.
- **Chores**
- Refactored internal logic and updated comments for clarity and maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close [BS-3268](https://linear.app/affine-design/issue/BS-3268/edgeless-下，-dark-mode-embed的配色应该更加清晰)
Close [BS-3067](https://linear.app/affine-design/issue/BS-3067/在embed上，添加split-view等相关的操作入口，基本接近page-block（见设计稿）)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced an interactive header for embedded synced documents with fold/unfold toggle, document opening, and multiple view options.
- Added info and copy link buttons for embedded synced documents and notes to improve document management and sharing.
- **Enhancements**
- Updated styles for embedded synced document blocks and headers for better visual consistency.
- Added new localization entries for header actions: "Fold", "Unfold", and "Open".
- Disabled redundant open document actions in toolbars, centralizing controls in the header.
- **Refactor**
- Unified header button components for notes and embedded synced documents into reusable components.
- Simplified header components by delegating button behaviors to shared components.
- **Bug Fixes**
- Fixed conditional rendering of editor content in embedded synced documents when folded.
- **Chores**
- Upgraded theme dependency version from "^1.1.12" to "^1.1.14" across multiple packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes: [BS-3303](https://linear.app/affine-design/issue/BS-3303/改進-pack-attachment-props-流程)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Enhanced attachment and image uploads with improved file size validation and clearer notifications.
- Upload telemetry tracking added for attachments to monitor upload success or failure.
- **Refactor**
- Streamlined and unified the process of adding attachments and images, making uploads more reliable and efficient.
- Parameter names updated for clarity across attachment and image insertion features.
- **Documentation**
- Updated API documentation to reflect parameter name changes for consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes: BS-3209
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced mind map view and store extensions, enhancing mind map integration and conversion to plain text and markdown formats.
- Added priority property to quick tools, allowing for custom ordering in the toolbar.
- **Improvements**
- Toolbar quick tools are now sorted by priority for a more intuitive user experience.
- Updated toolbar and extension configurations to streamline available tools and extensions.
- **Bug Fixes**
- Conditional registration of certain components ensures correct behavior in edgeless mode.
- **Chores**
- Updated dependencies and project references to improve module integration and maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### Changed
- Rewrite box selection in `default-tool`, the view can decide whether to be selected in box selection by return a boolean value in `onBoxSelected` method
- Cleanup unnecessary states in `default-tool` and some naming problem
### Change
- Rename `ElementTransformManager` -> `InteractivityManager`
- Now you can `event.on` and `action.onXXX` method to extend interactivity behaviour. The old approach of overriding methods directly is deprecated.
Close [BS-3029](https://linear.app/affine-design/issue/BS-3029/frame-里面的-shape-没办法进入文本编辑模式)
Close [BS-3082](https://linear.app/affine-design/issue/BS-3082/按s切换至shape工具，在白板上点击会创建两个shape)
Close [BS-3091](https://linear.app/affine-design/issue/BS-3082/按s切换至shape工具，在白板上点击会创建两个shape)
## Fix Shape Tool Issues
This PR addresses several issues with the shape and mindmap tools functionality in the editor:
1. **Fix text editing after mode switching**: Resolves an issue where users couldn't edit text in shapes after switching editor modes. The fix ensures the edgeless block is properly retrieved when double-clicking on a shape.
2. **Improve tool switching behavior**: Fixes issues with tool overlays not showing or being repeated when switching between tools. This includes:
- Properly handling tool overlay visibility
- Ensuring only one tool is active at a time when using keyboard shortcuts
- Adding proper cleanup when switching tools
3. **Add comprehensive tests**: Adds new test cases to verify:
- Shape creation with keyboard shortcuts
- Shape text editing after mode switching
- Tool switching behavior with keyboard shortcuts
