@formicoidea/labre-core 0.43.1 → 0.45.0

package/dist/_pkgs/affine-block-surface/surface-transformer.js

@@ -58,7 +58,11 @@ export class SurfaceBlockTransformer extends BaseBlockTransformer {
             yMap.set(key, element);
         });
         const elements = this._internal.Boxed(yMap);
+        // Every other surface prop (ADR 0031: `layers`, `showGrid`, and any key
+        // a newer client wrote) crosses the snapshot unchanged; only `elements`
+        // needs rebuilding into a Y.Map.
         snapshotRet.props = {
+            ...snapshotRet.props,
             elements,
         };
         return snapshotRet;
@@ -79,6 +83,7 @@ export class SurfaceBlockTransformer extends BaseBlockTransformer {
             });
         }
         snapshot.props = {
+            ...snapshot.props,
             elements: value,
         };
         return snapshot;

package/dist/_pkgs/affine-block-surface/tool/default-tool.js

@@ -78,6 +78,9 @@ export class DefaultTool extends BaseTool {
     static { this.toolName = 'default'; }
     _scrollViewport(delta) {
         this.gfx.viewport.applyDeltaCenter(delta[0], delta[1]);
+        // `viewportMoved` is what an element move listens to in order to keep the
+        // dragged elements under a pointer that stays still while the board pans.
+        this.gfx.viewport.viewportMoved.next(delta);
     }
     /**
      * Get the end position of the dragging area in the model coordinate
@@ -144,7 +147,7 @@ export class DefaultTool extends BaseTool {
             }
         }
     }
-    initializeDragState(dragType, event) {
+    initializeDragState(dragType, event, cloned = false) {
         this.dragType = dragType;
         this._clearDisposable();
         this._disposables = new DisposableGroup();
@@ -161,11 +164,16 @@ export class DefaultTool extends BaseTool {
         }
         if (this.dragType === DefaultModeDragType.ContentMoving) {
             if (this.interactivity) {
-                this.doc.captureSync();
+                // An alt+drag captured BEFORE its clone: a capture here would close
+                // the step between the copy and its move, and the first undo would
+                // only put the copy back on its source (`alt-drag-clone.spec.ts`).
+                if (!cloned)
+                    this.doc.captureSync();
                 this.interactivity.handleElementMove({
                     movingElements: this._toBeMoved,
                     event: event.raw,
                     onDragEnd: () => {
+                        this._stopEdgeScrolling();
                         this.doc.captureSync();
                     },
                 });
@@ -230,6 +238,17 @@ export class DefaultTool extends BaseTool {
                 break;
             }
             case DefaultModeDragType.ContentMoving: {
+                // Only an accepted move pans: `handleElementMove` refuses a readonly
+                // store and an extension may cancel it, and neither leaves an active
+                // interaction behind.
+                const moving = this.interactivity?.activeInteraction$.peek()?.type === 'move';
+                const moveDelta = moving ? calPanDelta(viewport, e) : null;
+                if (moveDelta) {
+                    this._enableEdgeScrolling(moveDelta);
+                }
+                else {
+                    this._stopEdgeScrolling();
+                }
                 break;
             }
             case DefaultModeDragType.NativeEditing: {
@@ -266,12 +285,16 @@ export class DefaultTool extends BaseTool {
             }
         });
         this._toBeMoved = Array.from(toBeMoved);
-        // If alt key is pressed and content is moving, clone the content
-        if (dragType === DefaultModeDragType.ContentMoving && e.keys.alt) {
+        // If alt key is pressed and content is moving, clone the content. One
+        // gesture, one undo step: close what came before, then nothing closes the
+        // step between the clone's writes and the move's end.
+        const cloning = dragType === DefaultModeDragType.ContentMoving && e.keys.alt;
+        if (cloning) {
+            this.doc.captureSync();
             await this._cloneContent();
         }
         // Set up drag state
-        this.initializeDragState(dragType, e);
+        this.initializeDragState(dragType, e, cloning);
     }
     mounted() {
         this.disposable.add(effect(() => {

package/dist/_pkgs/affine-block-surface/view.js

@@ -1,8 +1,9 @@
 import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
+import { CanvasGrid, CanvasLocalVisibility, } from '../affine-shared/services/index.js';
 import { BlockViewExtension, CommandExtension, FlavourExtension, } from '../std/index.js';
 import { literal } from 'lit/static-html.js';
 import { effects } from './effects.js';
-import { auditCommands, EdgelessCRUDExtension, EdgelessLegacySlotExtension, EditPropsMiddlewareBuilder, exportSvgCommands, exportSvgToolbarExtension, mapQualityCommands, mapQualityWidget, ReadingManager, readingProposalWidget, readingToolbarExtension, SpotlightManager, ValidationManager, validationExceptionToolbarExtension, ValidationOverlay, violationDetailWidget, } from './extensions/index.js';
+import { auditCommands, CanvasActiveLayer, canvasGridCommands, EdgelessCRUDExtension, EdgelessLegacySlotExtension, EditPropsMiddlewareBuilder, exportSvgCommands, exportSvgToolbarExtension, mapQualityCommands, mapQualityWidget, ReadingManager, readingProposalWidget, readingToolbarExtension, selectionPaneCommands, SelectionPaneModel, SpotlightManager, UserLayerMiddlewareBuilder, userLayerCommands, ValidationManager, validationExceptionToolbarExtension, ValidationOverlay, violationDetailWidget, } from './extensions/index.js';
 import { ExportManagerExtension } from './extensions/export-manager/export-manager.js';
 import { BackgroundStackingExtension } from './framework-background/stacking.js';
 import { ElementHighlightOverlay } from './renderer/element-highlight-overlay.js';
@@ -72,6 +73,27 @@ export class SurfaceViewExtension extends ViewExtensionProvider {
             // (`docs/adr/0025`). Nothing is offered until a board is selected.
             context.register(CommandExtension(exportSvgCommands));
             context.register(exportSvgToolbarExtension);
+            // The selection pane's headless half (ADR 0031): the live tree a pane
+            // renders from, and the commands its rows run. Core chrome, never a
+            // framework's, and nothing it lists is gated — a flag gates tooling,
+            // the rows are content. The panel itself is the edgeless toolbar's.
+            context.register(SelectionPaneModel);
+            // This viewer's local hide (ADR 0031 §8): registers into
+            // `gfx.localVisibility` and persists per document, never in it.
+            context.register(CanvasLocalVisibility);
+            context.register(CommandExtension(selectionPaneCommands));
+            // The grid as a setting (ADR 0031 §11): this viewer's override, the
+            // document's `showGrid`, the host default, the library default. Read by
+            // the edgeless root's background, the surface container and the PNG
+            // export; previews follow the document setting alone.
+            context.register(CanvasGrid);
+            context.register(CommandExtension(canvasGridCommands));
+            // User layers (ADR 0031 §2-§6): the viewer's active layer (session
+            // only), the `beforeAdd` middleware that stamps it on what is created,
+            // and the commands the pane's layer rows run. Content, never gated.
+            context.register(CanvasActiveLayer);
+            context.register(UserLayerMiddlewareBuilder);
+            context.register(CommandExtension(userLayerCommands));
         }
         else {
             context.register(BlockViewExtension('affine:surface', literal `affine-surface-void`));

package/dist/_pkgs/affine-block-surface-ref/surface-ref-block.js

@@ -39,7 +39,7 @@ import { Peekable } from '../affine-components/peek/index.js';
 import { ViewExtensionManagerIdentifier } from '../affine-ext-loader/index.js';
 import { RefNodeSlotsProvider } from '../affine-inline-reference/index.js';
 import { FrameBlockModel, } from '../affine-model/index.js';
-import { BlockCommentManager, DocModeProvider, EditPropsStore, ThemeProvider, ToolbarRegistryIdentifier, ViewportElementExtension, } from '../affine-shared/services/index.js';
+import { BlockCommentManager, DocModeProvider, documentShowsGrid, EditPropsStore, ThemeProvider, ToolbarRegistryIdentifier, ViewportElementExtension, } from '../affine-shared/services/index.js';
 import { unsafeCSSVarV2 } from '../affine-shared/theme/index.js';
 import { requestConnectedFrame } from '../affine-shared/utils/index.js';
 import { DisposableGroup } from '../global/disposable/index.js';
@@ -128,6 +128,11 @@ let SurfaceRefBlockComponent = (() => {
       );
     }
 
+    /* ADR 0031 §11: a reference follows the document's showGrid alone. */
+    .ref-content.grid-hidden {
+      background: var(--affine-background-primary-color);
+    }
+
     .ref-viewport {
       max-width: 100%;
       margin: 0 auto;
@@ -351,7 +356,12 @@ let SurfaceRefBlockComponent = (() => {
             const aspectRatio = h !== 0 ? w / h : 1;
             const _previewSpec = this._previewSpec.concat(this._runtimePreviewExt);
             const edgelessTheme = this.std.get(ThemeProvider).edgeless$.value;
-            return html `<div class="ref-content">
+            // A reference is a picture of the referenced document: its saved grid,
+            // never this viewer's override.
+            const showGrid = documentShowsGrid(this._previewDoc ? getSurfaceBlock(this._previewDoc) : null);
+            return html `<div
+      class=${classMap({ 'ref-content': true, 'grid-hidden': !showGrid })}
+    >
       <div
         class="ref-viewport"
         style=${styleMap({

package/dist/_pkgs/affine-components/context-menu/button.js

@@ -90,6 +90,20 @@ let MenuButton = (() => {
     .affine-menu-button.delete-item:hover .affine-menu-action-text {
       color: var(--affine-error-color);
     }
+
+    /*
+      An entry whose effect reaches every viewer of the document ("Hide for
+      everyone", ADR 0031): the theme's warning tokens, always on, so it reads
+      differently from its local twin before it is hovered.
+    */
+    .affine-menu-button.warning-item,
+    .affine-menu-button.warning-item .affine-menu-action-text {
+      color: var(--affine-warning-color);
+    }
+
+    .affine-menu-button.warning-item:hover {
+      background-color: var(--affine-background-warning-color);
+    }
   `; }
         connectedCallback() {
             super.connectedCallback();

package/dist/_pkgs/affine-components/filterable-list/index.js

@@ -126,19 +126,25 @@ let FilterableListComponent = (() => {
             });
         }
         _filterItems() {
-            const searchFilter = !this._filterText
-                ? this.options.items
-                : this.options.items.filter(item => item.name.startsWith(this._filterText.toLowerCase()) ||
-                    item.aliases?.some(alias => alias.startsWith(this._filterText.toLowerCase())));
-            return searchFilter.sort((a, b) => {
-                const isActiveA = this.options.active?.(a);
-                const isActiveB = this.options.active?.(b);
+            const query = this._filterText.toLowerCase();
+            // A copy: the caller's array is its own state (the language button keeps
+            // its most-recently-used order in it), so sorting must not reorder it.
+            const ranked = this.options.items
+                .map(item => ({ item, rank: matchRank(item, query) }))
+                .filter(entry => entry.rank !== -1);
+            return ranked
+                .sort((a, b) => {
+                const isActiveA = this.options.active?.(a.item);
+                const isActiveB = this.options.active?.(b.item);
                 if (isActiveA && !isActiveB)
                     return -1;
                 if (!isActiveA && isActiveB)
                     return 1;
-                return this.listFilter?.(a, b) ?? 0;
-            });
+                if (a.rank !== b.rank)
+                    return a.rank - b.rank;
+                return this.listFilter?.(a.item, b.item) ?? 0;
+            })
+                .map(entry => entry.item);
         }
         _scrollFocusedItemIntoView() {
             this.updateComplete
@@ -256,6 +262,21 @@ let FilterableListComponent = (() => {
     };
 })();
 export { FilterableListComponent };
+/**
+ * Prefix match on both sides lowercased: 0 for a name or alias hit, 1 for a
+ * hit on the display label only (it sorts after an id hit), -1 for no match.
+ * An empty query matches everything at rank 0.
+ */
+function matchRank(item, query) {
+    if (!query)
+        return 0;
+    const hits = (value) => !!value && value.toLowerCase().startsWith(query);
+    if (hits(item.name) || item.aliases?.some(hits))
+        return 0;
+    if (hits(item.label))
+        return 1;
+    return -1;
+}
 export function showPopFilterableList({ options, filter, abortController = new AbortController(), referenceElement, container, maxHeight = 440, portalStyles, }) {
     const portalPadding = {
         top: PAGE_HEADER_HEIGHT + 12,

package/dist/_pkgs/affine-components/icons/index.d.ts

@@ -1,6 +1,5 @@
 export * from './ai.js';
 export * from './file-icons.js';
-export * from './file-icons-rc.js';
 export * from './import-export.js';
 export * from './list.js';
 export * from './loading.js';

package/dist/_pkgs/affine-components/icons/index.js

@@ -1,6 +1,5 @@
 export * from './ai.js';
 export * from './file-icons.js';
-export * from './file-icons-rc.js';
 export * from './import-export.js';
 export * from './list.js';
 export * from './loading.js';

package/dist/_pkgs/affine-components/icons/text.d.ts

@@ -29,6 +29,7 @@ export declare const DividerIcon: import("lit-html").TemplateResult<1>;
 export declare const BoldIcon: import("lit-html").TemplateResult<1>;
 export declare const ItalicIcon: import("lit-html").TemplateResult<1>;
 export declare const UnderlineIcon: import("lit-html").TemplateResult<1>;
+export declare const OverlineIcon: import("lit-html").TemplateResult<1>;
 export declare const StrikethroughIcon: import("lit-html").TemplateResult<1>;
 export declare const CodeIcon: import("lit-html").TemplateResult<1>;
 export declare const LinkIcon: import("lit-html").TemplateResult<1>;

package/dist/_pkgs/affine-components/icons/text.js

@@ -97,6 +97,17 @@ export const UnderlineIcon = icons.UnderLineIcon({
     width: '20',
     height: '20',
 });
+/**
+ * The icon set ships no overline, so it is drawn here: the underline icon's
+ * own letter and rule, the rule moved above the letter (ADR 0030).
+ */
+const OverlineSVG = svg `<path
+  fill="currentColor"
+  fill-rule="evenodd"
+  clip-rule="evenodd"
+  d="M4.458 3.064a.808.808 0 0 0 0 1.616h15.084a.808.808 0 1 0 0-1.616zM7.744 7.968a.808.808 0 1 0-1.616 0v7.003a5.656 5.656 0 1 0 11.313 0V7.968a.808.808 0 1 0-1.616 0v7.003a4.04 4.04 0 1 1-8.08 0z"
+/>`;
+export const OverlineIcon = icon(OverlineSVG, 20);
 export const StrikethroughIcon = icons.StrikeThroughIcon({
     width: '20',
     height: '20',

package/dist/_pkgs/affine-fragment-adapter-panel/adapter-panel.d.ts

@@ -1,5 +1,5 @@
-import type { BlockStdScope } from '../../std/index.js';
-import type { Store, TransformerMiddleware } from '../../store/index.js';
+import type { BlockStdScope } from '../std/index.js';
+import type { Store, TransformerMiddleware } from '../store/index.js';
 import { LitElement, type PropertyValues } from 'lit';
 export declare const AFFINE_ADAPTER_PANEL = "affine-adapter-panel";
 declare const AdapterPanel_base: typeof LitElement & import("../global/utils/types.js").Constructor<import("../global/lit/with-disposable.js").DisposableClass>;

package/dist/_pkgs/affine-fragment-frame-panel/card/frame-card.js

@@ -32,6 +32,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+import { panelDragStarted } from '../../affine-shared/styles/index.js';
 import { on, once } from '../../affine-shared/utils/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { ShadowlessElement } from '../../std/index.js';
@@ -174,8 +175,7 @@ let FrameCard = (() => {
                 return;
             const { clientX: startX, clientY: startY } = e;
             const disposeDragStart = on(this.ownerDocument, 'mousemove', e => {
-                if (Math.abs(startX - e.clientX) < 5 &&
-                    Math.abs(startY - e.clientY) < 5) {
+                if (!panelDragStarted({ x: startX, y: startY }, { x: e.clientX, y: e.clientY })) {
                     return;
                 }
                 if (this.status !== 'selected') {

package/dist/_pkgs/affine-fragment-frame-panel/header/frame-panel-header.d.ts

@@ -3,7 +3,7 @@ import { LitElement, type PropertyValues } from 'lit';
 export declare const AFFINE_FRAME_PANEL_HEADER = "affine-frame-panel-header";
 declare const FramePanelHeader_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class FramePanelHeader extends FramePanelHeader_base {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     private readonly _clearEdgelessDisposables;
     private _edgelessDisposables;
     private get _gfx();

package/dist/_pkgs/affine-fragment-frame-panel/header/frame-panel-header.js

@@ -35,6 +35,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { PresentTool } from '../../affine-block-frame/index.js';
 import { EdgelessLegacySlotIdentifier } from '../../affine-block-surface/index.js';
 import { DocModeProvider, EditPropsStore, translateKey, } from '../../affine-shared/services/index.js';
+import { panelHeaderStyles } from '../../affine-shared/styles/index.js';
 import { createButtonPopper } from '../../affine-shared/utils/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
@@ -50,16 +51,6 @@ const styles = css `
     justify-content: start;
   }
 
-  .frame-panel-header {
-    display: flex;
-    width: 100%;
-    height: 36px;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    padding: 0 8px;
-  }
-
   .all-frames-setting {
     display: flex;
     align-items: center;
@@ -69,22 +60,9 @@ const styles = css `
     margin: 8px 4px;
   }
 
-  .all-frames-setting-button svg {
-    color: var(--affine-icon-secondary);
-  }
-
-  .all-frames-setting-button:hover svg,
-  .all-frames-setting-button.active svg {
-    color: var(--affine-icon-color);
-  }
-
   .all-frames-setting-label {
     width: 68px;
     height: 22px;
-    font-size: var(--affine-font-sm);
-    font-weight: 500;
-    line-height: 22px;
-    color: var(--light-text-color-text-secondary-color, #8e8d91);
   }
 
   .frames-setting-container {
@@ -158,7 +136,9 @@ let FramePanelHeader = (() => {
             __esDecorate(this, null, _editorHost_decorators, { kind: "accessor", name: "editorHost", static: false, private: false, access: { has: obj => "editorHost" in obj, get: obj => obj.editorHost, set: (obj, value) => { obj.editorHost = value; } }, metadata: _metadata }, _editorHost_initializers, _editorHost_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static { this.styles = styles; }
+        // The header row, title and icon button are every side panel's: they live in
+        // panelHeaderStyles so the selection pane and the catalogue draw the same.
+        static { this.styles = [panelHeaderStyles, styles]; }
         get _gfx() {
             return this.editorHost.std.get(GfxControllerIdentifier);
         }
@@ -194,13 +174,14 @@ let FramePanelHeader = (() => {
         }
         render() {
             const { std } = this.editorHost;
-            return html `<div class="frame-panel-header">
+            return html `<div class="frame-panel-header affine-panel-header">
       <div class="all-frames-setting">
-        <span class="all-frames-setting-label"
+        <span class="all-frames-setting-label affine-panel-header-title"
           >${translateKey(std, ...FRAME_PANEL_ALL_FRAMES_LABEL)}</span
         >
         <edgeless-tool-icon-button
-          class="all-frames-setting-button ${this._settingPopperShow
+          class="all-frames-setting-button affine-panel-header-button ${this
+                ._settingPopperShow
                 ? 'active'
                 : ''}"
           .tooltip=${this._settingPopperShow

package/dist/_pkgs/affine-fragment-frame-panel/index.d.ts

@@ -1 +1,2 @@
 export * from './frame-panel.js';
+export * from './header/frame-panel-header.js';

package/dist/_pkgs/affine-fragment-frame-panel/index.js

@@ -1 +1,2 @@
 export * from './frame-panel.js';
+export * from './header/frame-panel-header.js';

package/dist/_pkgs/affine-gfx-connector/element-renderer/connector-dom/index.js

@@ -1,3 +1,4 @@
+import { textDecorationLine } from '../../../affine-gfx-text/index.js';
 import { ConnectorMode, DefaultTheme, } from '../../../affine-model/index.js';
 import { PointLocation, SVGPathBuilder } from '../../../global/gfx/index.js';
 import { isConnectorWithLabel } from '../../connector-manager.js';
@@ -207,7 +208,7 @@ function renderConnectorLabel(model, retained, renderer, zoom, slot) {
         return;
     }
     const [lx, ly, lw, lh] = content.xywh;
-    const { labelStyle: { color, fontSize, fontWeight, fontStyle, fontFamily, textAlign, }, } = model;
+    const { labelStyle: { color, fontSize, fontWeight, fontStyle, fontFamily, textAlign, textDecoration, }, } = model;
     const labelElement = getOrCreateLabelElement(retained, slot);
     labelElement.style.position = 'absolute';
     labelElement.style.left = `${lx * zoom}px`;
@@ -231,6 +232,7 @@ function renderConnectorLabel(model, retained, renderer, zoom, slot) {
     labelElement.style.fontStyle = fontStyle;
     labelElement.style.fontFamily = fontFamily;
     labelElement.style.textAlign = textAlign;
+    labelElement.style.textDecorationLine = textDecorationLine(textDecoration);
     labelElement.style.lineHeight = '1.2';
     labelElement.style.whiteSpace = 'pre-wrap';
     labelElement.style.wordWrap = 'break-word';

package/dist/_pkgs/affine-gfx-connector/element-renderer/index.js

@@ -1,5 +1,5 @@
 import { ElementRendererExtension, } from '../../affine-block-surface/index.js';
-import { getFontString, getLineHeight, getTextWidth, isRTL, wrapTextDeltas, } from '../../affine-gfx-text/index.js';
+import { alphabeticBaselineOffset, getFontString, getLineHeight, getTextWidth, isRTL, paintTextDecoration, wrapTextDeltas, } from '../../affine-gfx-text/index.js';
 import { ConnectorMode, DefaultTheme, } from '../../affine-model/index.js';
 import { getBezierParameters, } from '../../global/gfx/index.js';
 import { deltaInsertsToChunks } from '../../std/inline/index.js';
@@ -170,7 +170,7 @@ function renderEndpoint(model, location, ctx, rc, end, style, stroke) {
  * which pair of fields the function reached into.
  */
 function renderLabel(label, ctx, matrix, renderer) {
-    const { text, xywh, style: { color, fontSize, fontWeight, fontStyle, fontFamily, textAlign }, constraints: { hasMaxWidth, maxWidth }, } = label;
+    const { text, xywh, style: { color, fontSize, fontWeight, fontStyle, fontFamily, textAlign, textDecoration, }, constraints: { hasMaxWidth, maxWidth }, } = label;
     const font = getFontString({
         fontStyle,
         fontWeight,
@@ -193,7 +193,8 @@ function renderLabel(label, ctx, matrix, renderer) {
     ctx.font = font;
     ctx.textAlign = textAlign;
     ctx.textBaseline = 'middle';
-    ctx.fillStyle = renderer.getColorValue(color, DefaultTheme.black, true);
+    const fill = renderer.getColorValue(color, DefaultTheme.black, true);
+    ctx.fillStyle = fill;
     let textMaxWidth = textAlign === 'center' ? 0 : getMaxTextWidth(lines, font);
     if (hasMaxWidth && maxWidth > 0) {
         textMaxWidth = Math.min(textMaxWidth, textMaxWidth);
@@ -219,7 +220,23 @@ function renderLabel(label, ctx, matrix, renderer) {
                         : rtl
                             ? 0.5
                             : -0.5);
-            ctx.fillText(str, x + cx, index * lineHeight - textHeight + cy);
+            const lineY = index * lineHeight - textHeight + cy;
+            ctx.fillText(str, x + cx, lineY);
+            if (textDecoration) {
+                // Painted on the `middle` baseline; the line hangs off the alphabetic
+                // one, measured below it.
+                paintTextDecoration(ctx, {
+                    decoration: textDecoration,
+                    lineText: str,
+                    font,
+                    x: x + cx,
+                    baselineY: lineY + alphabeticBaselineOffset(font, 'middle'),
+                    fontFamily,
+                    fontSize,
+                    fontWeight,
+                    color: fill,
+                });
+            }
             if (shouldTemporarilyAttach) {
                 ctx.canvas.remove();
             }

package/dist/_pkgs/affine-gfx-connector/text/edgeless-connector-label-editor.js

@@ -33,7 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { DefaultTool, EdgelessCRUDIdentifier, } from '../../affine-block-surface/index.js';
-import { getLineHeight } from '../../affine-gfx-text/index.js';
+import { getLineHeight, textDecorationLine } from '../../affine-gfx-text/index.js';
 import { connectorEndLabelBox, } from '../../affine-model/index.js';
 import { ThemeProvider, translateKey } from '../../affine-shared/services/index.js';
 import { almostEqual } from '../../affine-shared/utils/index.js';
@@ -423,7 +423,7 @@ let EdgelessConnectorLabelEditor = (() => {
         }
         render() {
             const { connector } = this;
-            const { labelStyle: { fontFamily, fontSize, fontStyle, fontWeight, textAlign, color: labelColor, }, labelConstraints: { hasMaxWidth, maxWidth }, } = connector;
+            const { labelStyle: { fontFamily, fontSize, fontStyle, fontWeight, textAlign, textDecoration, color: labelColor, }, labelConstraints: { hasMaxWidth, maxWidth }, } = connector;
             const lineHeight = getLineHeight(fontFamily, fontSize, fontWeight);
             const { translateX, translateY, zoom } = this.gfx.viewport;
             const [x, y] = Vec.mul(this._labelCenter, zoom);
@@ -447,6 +447,7 @@ let EdgelessConnectorLabelEditor = (() => {
                 fontStyle,
                 fontWeight,
                 textAlign,
+                textDecorationLine: textDecorationLine(textDecoration),
                 lineHeight: `${lineHeight}px`,
                 maxWidth: hasMaxWidth
                     ? `${maxWidth + BORDER_WIDTH * 2 + HORIZONTAL_PADDING * 2}px`

package/dist/_pkgs/affine-gfx-connector/toolbar/config.js

@@ -450,7 +450,7 @@ export const connectorToolbarConfig = {
                 return;
             const labelStyle = { ...model.labelStyle, ...props };
             // No need to adjust element bounds
-            if (props['textAlign']) {
+            if (props['textAlign'] || props['textDecoration']) {
                 ctx.std
                     .get(EdgelessCRUDIdentifier)
                     .updateElement(model.id, { labelStyle });

package/dist/_pkgs/affine-gfx-group/command/group-api.js

@@ -1,7 +1,7 @@
 import { EdgelessCRUDIdentifier } from '../../affine-block-surface/index.js';
 import { MindmapElementModel, } from '../../affine-model/index.js';
 import { translateKey } from '../../affine-shared/services/index.js';
-import { batchAddChildren, batchRemoveChildren, generateKeyBetween, generateNKeysBetween, GfxControllerIdentifier, measureOperation, } from '../../std/gfx/index.js';
+import { batchAddChildren, batchRemoveChildren, generateKeyBetween, generateNKeysBetween, GfxControllerIdentifier, GfxPrimitiveElementModel, measureOperation, } from '../../std/gfx/index.js';
 import { GROUP_SEED_NAME } from '../translations.js';
 /**
  * Every element that sits at the root of the board, in painting order.
@@ -65,12 +65,60 @@ const buildUngroupIndexes = (orderedElements, afterIndex, beforeIndex, fallbackA
         tryGenerateOneByOne(null, null) ??
         []);
 };
+/**
+ * The layer a new group is stored in (ADR 0031 §5): the effective layer of
+ * its HIGHEST member, so grouping never sinks what was on top. `'@default'`
+ * is passed explicitly — the creation middleware then writes no key, rather
+ * than reading "absent" as "the viewer's active layer". Nothing at all while
+ * the surface has no user layer.
+ */
+function groupLayerProps(gfx, elements) {
+    const userLayers = gfx.surface?.userLayers;
+    if (!userLayers?.ranks)
+        return {};
+    const models = elements
+        .map(el => (typeof el === 'string' ? gfx.getElementById(el) : el))
+        .filter((model) => !!model && 'index' in model)
+        .sort((a, b) => gfx.layer.compare(a, b));
+    const highest = models.at(-1);
+    return highest ? { layer: userLayers.effectiveLayerOf(highest) } : {};
+}
+/**
+ * Ungrouping a top-level group hands its layer to each released child, in
+ * the ungroup's own transaction (ADR 0031 §5): a member's own `layer` was
+ * ignored while it was inside, and may be stale.
+ */
+function releaseChildrenToGroupLayer(gfx, group, children) {
+    const userLayers = gfx.surface?.userLayers;
+    if (!userLayers?.ranks)
+        return;
+    const layer = group.layer;
+    for (const child of children) {
+        const own = child instanceof GfxPrimitiveElementModel
+            ? child.layer
+            : child.props.layer;
+        if (own === layer)
+            continue;
+        if (layer === undefined) {
+            if (child instanceof GfxPrimitiveElementModel) {
+                child.clearField('layer');
+            }
+            else {
+                delete child.props.layer;
+            }
+        }
+        else {
+            gfx.updateElement(child, { layer });
+        }
+    }
+}
 export const createGroupCommand = (ctx, next) => {
     const { std, elements } = ctx;
     const gfx = std.get(GfxControllerIdentifier);
     const crud = std.get(EdgelessCRUDIdentifier);
     const groups = gfx.layer.canvasElements.filter(el => el.type === 'group');
     const groupId = crud.addElement('group', {
+        ...groupLayerProps(gfx, elements),
         children: elements.reduce((pre, el) => {
             const id = typeof el === 'string' ? el : el.id;
             pre[id] = true;
@@ -175,6 +223,9 @@ export const ungroupCommand = (ctx, next) => {
             if (parent !== null) {
                 batchAddChildren(parent, orderedElements);
             }
+            else {
+                releaseChildrenToGroupLayer(gfx, group, orderedElements);
+            }
         });
         selection.set({
             editing: false,