@formicoidea/labre-core 0.42.0 → 0.45.0

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';
@@ -245,10 +245,11 @@ let EdgelessConnectorLabelEditor = (() => {
       transform-origin: center;
       z-index: 10;
       padding: ${VERTICAL_PADDING}px ${HORIZONTAL_PADDING}px;
-      border: ${BORDER_WIDTH}px solid var(--affine-primary-color, #1e96eb);
+      border: ${BORDER_WIDTH}px solid var(--affine-primary-color);
       background: var(--affine-background-primary-color, #fff);
       border-radius: 2px;
-      box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--affine-primary-color) 30%, transparent);
       box-sizing: border-box;
       overflow: visible;
 
@@ -422,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);
@@ -446,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

@@ -2,7 +2,7 @@ import { EdgelessCRUDIdentifier } from '../../affine-block-surface/index.js';
 import { frameworkPaletteGroups, packColor, } from '../../affine-components/color-picker/index.js';
 import { createTextActions, normalizeTextBound } from '../../affine-gfx-text/index.js';
 import { ConnectorElementModel, ConnectorMode, DEFAULT_FRONT_ENDPOINT_STYLE, DEFAULT_REAR_ENDPOINT_STYLE, DefaultTheme, LineWidth, PointStyle, resolveColor, StrokeStyle, } from '../../affine-model/index.js';
-import { CONNECTOR_SOURCE_LABEL, CONNECTOR_TARGET_LABEL, ToolbarModuleExtension, translateKey, } from '../../affine-shared/services/index.js';
+import { CONNECTOR_SOURCE_LABEL, CONNECTOR_TARGET_LABEL, MENU_ARIA_STYLE, ToolbarModuleExtension, translateKey, } from '../../affine-shared/services/index.js';
 import { getMostCommonResolvedValue, getMostCommonValue, } from '../../affine-shared/utils/index.js';
 import { getRootBlock, LINE_STYLE_LIST, renderMenu, } from '../../affine-widget-edgeless-toolbar/index.js';
 import { Bound } from '../../global/gfx/index.js';
@@ -15,7 +15,7 @@ import { INVERT_EDGE_DIRECTION, invertEdgeDirection, } from '../direction/invert
 import { asTypedEdge, edgeIsBound, roleVocabularies, } from '../direction/typed-edge.js';
 import { mountConnectorLabelEditor } from '../text/index.js';
 import { EndPointDiamondHollowIcon, EndPointTriangleHollowIcon, StartPointDiamondHollowIcon, StartPointTriangleHollowIcon, } from './hollow-endpoint-icons.js';
-import { CONNECTOR_ADD_TEXT, CONNECTOR_LABEL_END_POINT_STYLE, CONNECTOR_LABEL_SHAPE, CONNECTOR_LABEL_START_POINT_STYLE, CONNECTOR_LABEL_STROKE_STYLE, CONNECTOR_LABEL_STYLE, CONNECTOR_MODE_WORDING, CONNECTOR_TOOLTIP_CONNECTOR_SHAPE, CONNECTOR_TOOLTIP_FLIP_DIRECTION, } from '../translations.js';
+import { CONNECTOR_ADD_TEXT, CONNECTOR_END_POINT_STYLE_MENU_ARIA, CONNECTOR_LABEL_END_POINT_STYLE, CONNECTOR_LABEL_SHAPE, CONNECTOR_LABEL_START_POINT_STYLE, CONNECTOR_LABEL_STROKE_STYLE, CONNECTOR_LABEL_STYLE, CONNECTOR_MODE_WORDING, CONNECTOR_SHAPE_MENU_ARIA, CONNECTOR_START_POINT_STYLE_MENU_ARIA, CONNECTOR_TOOLTIP_CONNECTOR_SHAPE, CONNECTOR_TOOLTIP_FLIP_DIRECTION, } from '../translations.js';
 /**
  * Every `PointStyle` must appear in BOTH lists.
  *
@@ -204,10 +204,16 @@ export const connectorToolbarConfig = {
                     updateModelsWith(ctx, models, field, value);
                 };
                 return renderMenu({
-                    label: translateKey(ctx.std, ...CONNECTOR_LABEL_STYLE),
+                    // `label` stays the ENGLISH literal and `labelWording` carries the
+                    // key: `renderMenu` resolves it, and the menu shell's accessible
+                    // name no longer has to be sewn onto a translated word (#390).
+                    label: CONNECTOR_LABEL_STYLE[1],
+                    labelWording: CONNECTOR_LABEL_STYLE,
+                    menuAriaWording: MENU_ARIA_STYLE,
                     items: LINE_STYLE_LIST,
                     currentValue: rough,
                     onPick,
+                    std: ctx.std,
                 });
             },
         },
@@ -226,10 +232,13 @@ export const connectorToolbarConfig = {
                             updateModelsWith(ctx, models, field, value);
                         };
                         return renderMenu({
-                            label: translateKey(ctx.std, ...CONNECTOR_LABEL_START_POINT_STYLE),
+                            label: CONNECTOR_LABEL_START_POINT_STYLE[1],
+                            labelWording: CONNECTOR_LABEL_START_POINT_STYLE,
+                            menuAriaWording: CONNECTOR_START_POINT_STYLE_MENU_ARIA,
                             items: FRONT_ENDPOINT_STYLE_LIST,
                             currentValue: pointStyle,
                             onPick,
+                            std: ctx.std,
                         });
                     },
                 },
@@ -293,10 +302,13 @@ export const connectorToolbarConfig = {
                             updateModelsWith(ctx, models, field, value);
                         };
                         return renderMenu({
-                            label: translateKey(ctx.std, ...CONNECTOR_LABEL_END_POINT_STYLE),
+                            label: CONNECTOR_LABEL_END_POINT_STYLE[1],
+                            labelWording: CONNECTOR_LABEL_END_POINT_STYLE,
+                            menuAriaWording: CONNECTOR_END_POINT_STYLE_MENU_ARIA,
                             items: REAR_ENDPOINT_STYLE_LIST,
                             currentValue: pointStyle,
                             onPick,
+                            std: ctx.std,
                         });
                     },
                 },
@@ -361,11 +373,15 @@ export const connectorToolbarConfig = {
                             key: translateKey(ctx.std, ...CONNECTOR_MODE_WORDING[item.value]),
                         }));
                         return renderMenu({
-                            label: translateKey(ctx.std, ...CONNECTOR_LABEL_SHAPE),
-                            tooltip: translateKey(ctx.std, ...CONNECTOR_TOOLTIP_CONNECTOR_SHAPE),
+                            label: CONNECTOR_LABEL_SHAPE[1],
+                            labelWording: CONNECTOR_LABEL_SHAPE,
+                            menuAriaWording: CONNECTOR_SHAPE_MENU_ARIA,
+                            tooltip: CONNECTOR_TOOLTIP_CONNECTOR_SHAPE[1],
+                            tooltipWording: CONNECTOR_TOOLTIP_CONNECTOR_SHAPE,
                             items,
                             currentValue: mode,
                             onPick,
+                            std: ctx.std,
                         });
                     },
                 },
@@ -434,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-connector/translations.d.ts

@@ -20,9 +20,12 @@ export declare const CONNECTOR_LABEL_CONNECTOR: ChromeWording;
 export declare const CONNECTOR_LABEL_STROKE_STYLE: ChromeWording;
 export declare const CONNECTOR_LABEL_STYLE: ChromeWording;
 export declare const CONNECTOR_LABEL_START_POINT_STYLE: ChromeWording;
+export declare const CONNECTOR_START_POINT_STYLE_MENU_ARIA: ChromeWording;
 export declare const CONNECTOR_TOOLTIP_FLIP_DIRECTION: ChromeWording;
 export declare const CONNECTOR_LABEL_END_POINT_STYLE: ChromeWording;
+export declare const CONNECTOR_END_POINT_STYLE_MENU_ARIA: ChromeWording;
 export declare const CONNECTOR_LABEL_SHAPE: ChromeWording;
+export declare const CONNECTOR_SHAPE_MENU_ARIA: ChromeWording;
 export declare const CONNECTOR_TOOLTIP_CONNECTOR_SHAPE: ChromeWording;
 /**
  * "Add text" — the contextual-toolbar action AND the label editor's own

package/dist/_pkgs/affine-gfx-connector/translations.js

@@ -44,6 +44,18 @@ export const CONNECTOR_LABEL_START_POINT_STYLE = [
     'com.labre.connector.toolbar.start-point-style',
     'Start point style',
 ];
+/* ── The menu shells' accessible names (#390) ─────────────────────────────
+ *
+ * Each `aria-label` is its own wording rather than `` `${label}-menu` ``: the
+ * four labels above go through the seam, so the composition read "style de
+ * point de départ-menu" on a French host. Fallbacks are the exact identifiers
+ * the composition produced in English. The plain "Style" menu reuses the
+ * shared `MENU_ARIA_STYLE` — three toolbars draw that same menu.
+ */
+export const CONNECTOR_START_POINT_STYLE_MENU_ARIA = [
+    'com.labre.connector.toolbar.start-point-style-menu',
+    'start point style-menu',
+];
 export const CONNECTOR_TOOLTIP_FLIP_DIRECTION = [
     'com.labre.connector.toolbar.flip-direction',
     'Flip direction',
@@ -52,10 +64,18 @@ export const CONNECTOR_LABEL_END_POINT_STYLE = [
     'com.labre.connector.toolbar.end-point-style',
     'End point style',
 ];
+export const CONNECTOR_END_POINT_STYLE_MENU_ARIA = [
+    'com.labre.connector.toolbar.end-point-style-menu',
+    'end point style-menu',
+];
 export const CONNECTOR_LABEL_SHAPE = [
     'com.labre.connector.toolbar.shape',
     'Shape',
 ];
+export const CONNECTOR_SHAPE_MENU_ARIA = [
+    'com.labre.connector.toolbar.shape-menu',
+    'shape-menu',
+];
 export const CONNECTOR_TOOLTIP_CONNECTOR_SHAPE = [
     'com.labre.connector.toolbar.connector-shape',
     'Connector shape',
@@ -72,8 +92,11 @@ export const CONNECTOR_WORDINGS = [
     CONNECTOR_LABEL_CONNECTOR,
     CONNECTOR_LABEL_STROKE_STYLE,
     CONNECTOR_LABEL_START_POINT_STYLE,
+    CONNECTOR_START_POINT_STYLE_MENU_ARIA,
     CONNECTOR_TOOLTIP_FLIP_DIRECTION,
     CONNECTOR_LABEL_END_POINT_STYLE,
+    CONNECTOR_END_POINT_STYLE_MENU_ARIA,
     CONNECTOR_LABEL_SHAPE,
+    CONNECTOR_SHAPE_MENU_ARIA,
     CONNECTOR_TOOLTIP_CONNECTOR_SHAPE,
 ];

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,

package/dist/_pkgs/affine-gfx-mindmap/indicator-overlay/index.js

@@ -1,7 +1,7 @@
 import { Overlay } from '../../affine-block-surface/index.js';
 import { PathGenerator } from '../../affine-gfx-connector/index.js';
 import { ConnectorMode, LayoutType, } from '../../affine-model/index.js';
-import { ThemeProvider } from '../../affine-shared/services/index.js';
+import { CHROME_ACCENT_CSS_VARIABLE, ThemeProvider, } from '../../affine-shared/services/index.js';
 import { isVecZero, PointLocation, toRadian, Vec, } from '../../global/gfx/index.js';
 import last from 'lodash-es/last.js';
 import { NODE_HORIZONTAL_SPACING, NODE_VERTICAL_SPACING } from '../view/layout.js';
@@ -101,7 +101,11 @@ export class MindMapIndicatorOverlay extends Overlay {
         }
         const targetPos = this.targetBound;
         const points = this._generatePath();
-        const color = this.themeService.getColorValue('--affine-primary-color', '#1E96EB', true);
+        // The accent read from the theme, not a literal: a canvas context cannot
+        // take a `var(…)`, so the token is resolved here (DESIGN.md, The Borrowed
+        // Blue Rule). The hex used to sit here as a `getColorValue` fallback that
+        // could never fire — the variable name always resolves.
+        const color = this.themeService.getCssVariableColor(CHROME_ACCENT_CSS_VARIABLE);
         ctx.strokeStyle = color;
         ctx.fillStyle = color;
         ctx.lineWidth = 3;

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

@@ -1,9 +1,9 @@
 import { hasGrouped } from '../../affine-gfx-shape/index.js';
 import { LayoutType, MindmapElementModel, MindmapStyle, ShapeElementModel, } from '../../affine-model/index.js';
-import { STYLE_MENU_LABEL, ToolbarModuleExtension, } from '../../affine-shared/services/index.js';
+import { MENU_ARIA_STYLE, STYLE_MENU_LABEL, ToolbarModuleExtension, } from '../../affine-shared/services/index.js';
 import { getMostCommonValue } from '../../affine-shared/utils/index.js';
 import { renderMenu, } from '../../affine-widget-edgeless-toolbar/index.js';
-import { MINDMAP_LAYOUT_LABEL, MINDMAP_LAYOUT_LEFT, MINDMAP_LAYOUT_RADIAL, MINDMAP_LAYOUT_RIGHT, } from '../translations.js';
+import { MINDMAP_LAYOUT_LABEL, MINDMAP_LAYOUT_MENU_ARIA, MINDMAP_LAYOUT_LEFT, MINDMAP_LAYOUT_RADIAL, MINDMAP_LAYOUT_RIGHT, } from '../translations.js';
 import { RadiantIcon, RightLayoutIcon, StyleIcon } from '@blocksuite/icons/lit';
 import { BlockFlavourIdentifier } from '../../std/index.js';
 import { MindmapStyleFour, MindmapStyleOne, MindmapStyleThree, MindmapStyleTwo, } from '../view/index.js';
@@ -58,6 +58,7 @@ export const createMindmapStyleActionMenu = (ctx, models) => {
     return renderMenu({
         label: 'Style',
         labelWording: STYLE_MENU_LABEL,
+        menuAriaWording: MENU_ARIA_STYLE,
         icon: StyleIcon(),
         items: MINDMAP_STYLE_LIST,
         currentValue: style,
@@ -77,6 +78,7 @@ export const createMindmapLayoutActionMenu = (ctx, models) => {
     return renderMenu({
         label: 'Layout',
         labelWording: MINDMAP_LAYOUT_LABEL,
+        menuAriaWording: MINDMAP_LAYOUT_MENU_ARIA,
         items: MINDMAP_LAYOUT_LIST,
         currentValue: layoutType,
         onPick,

package/dist/_pkgs/affine-gfx-mindmap/translations.d.ts

@@ -57,6 +57,12 @@ export declare const MINDMAP_TEMPLATE_NAME_STYLE_2: ChromeWording;
 export declare const MINDMAP_TEMPLATE_NAME_STYLE_3: ChromeWording;
 export declare const MINDMAP_TEMPLATE_NAME_STYLE_4: ChromeWording;
 export declare const MINDMAP_LAYOUT_LABEL: ChromeWording;
+/**
+ * The accessible name of the layout menu SHELL (#390) — its own wording, not
+ * `` `${MINDMAP_LAYOUT_LABEL}-menu` ``, which read "disposition-menu" in
+ * French. The fallback is the exact identifier that composition produced.
+ */
+export declare const MINDMAP_LAYOUT_MENU_ARIA: ChromeWording;
 /**
  * The three layout directions — a different concept from `gfx/text`'s own
  * "Left" / "Right" text alignment (`TEXT_ALIGN_LEFT`/`RIGHT`), so kept as

package/dist/_pkgs/affine-gfx-mindmap/translations.js

@@ -102,6 +102,15 @@ export const MINDMAP_LAYOUT_LABEL = [
     'com.labre.mindmap.toolbar.layout',
     'Layout',
 ];
+/**
+ * The accessible name of the layout menu SHELL (#390) — its own wording, not
+ * `` `${MINDMAP_LAYOUT_LABEL}-menu` ``, which read "disposition-menu" in
+ * French. The fallback is the exact identifier that composition produced.
+ */
+export const MINDMAP_LAYOUT_MENU_ARIA = [
+    'com.labre.mindmap.toolbar.layout-menu',
+    'layout-menu',
+];
 /**
  * The three layout directions — a different concept from `gfx/text`'s own
  * "Left" / "Right" text alignment (`TEXT_ALIGN_LEFT`/`RIGHT`), so kept as
@@ -159,6 +168,7 @@ export const MINDMAP_CHROME_WORDINGS = [
     MINDMAP_TEMPLATE_NAME_STYLE_3,
     MINDMAP_TEMPLATE_NAME_STYLE_4,
     MINDMAP_LAYOUT_LABEL,
+    MINDMAP_LAYOUT_MENU_ARIA,
     MINDMAP_LAYOUT_LEFT,
     MINDMAP_LAYOUT_RADIAL,
     MINDMAP_LAYOUT_RIGHT,

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

@@ -1,5 +1,5 @@
 import { ElementRendererExtension, } from '../../../affine-block-surface/index.js';
-import { getFontMetrics, getFontString, getLineWidth, isRTL, measureTextInDOM, wrapTextDeltas, } from '../../../affine-gfx-text/index.js';
+import { getFontMetrics, getFontString, getLineWidth, isRTL, measureTextInDOM, paintTextDecoration, wrapTextDeltas, } from '../../../affine-gfx-text/index.js';
 import { DefaultTheme, TextAlign } from '../../../affine-model/index.js';
 import { Bound } from '../../../global/gfx/index.js';
 import { deltaInsertsToChunks } from '../../../std/inline/index.js';
@@ -33,6 +33,8 @@ function renderText(model, ctx, { color }) {
     const { x, y, text, fontFamily, fontWeight, textAlign, w, h, textVerticalAlign, padding, } = model;
     if (!text)
         return;
+    // A local preview shape has no stored decoration.
+    const textDecoration = 'textDecoration' in model ? model.textDecoration : undefined;
     // Contained mode shrinks the layout font size so the text fits the bounds.
     const fontSize = effectiveShapeFontSize(model);
     const [verticalPadding, horPadding] = padding;
@@ -69,9 +71,25 @@ function renderText(model, ctx, { color }) {
             if (ctx.canvas.dir !== (rtl ? 'rtl' : 'ltr')) {
                 ctx.canvas.setAttribute('dir', rtl ? 'rtl' : 'ltr');
             }
-            ctx.fillText(str, 
             // 0.5 is the dom editor padding to make the text align with the DOM text
-            horOffset + 0.5, lineIndex * lineHeight + vertOffset);
+            const textX = horOffset + 0.5;
+            const baselineY = lineIndex * lineHeight + vertOffset;
+            ctx.fillText(str, textX, baselineY);
+            if (textDecoration) {
+                // Already on the alphabetic baseline, at the size Contained mode
+                // shrank the text to.
+                paintTextDecoration(ctx, {
+                    decoration: textDecoration,
+                    lineText: str,
+                    font,
+                    x: textX,
+                    baselineY,
+                    fontFamily,
+                    fontSize,
+                    fontWeight,
+                    color,
+                });
+            }
             maxLineWidth = Math.max(maxLineWidth, getLineWidth(str, font));
             if (shouldTemporarilyAttach) {
                 ctx.canvas.remove();

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

@@ -33,6 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { DefaultTool, EdgelessCRUDIdentifier, TextUtils, } from '../../affine-block-surface/index.js';
+import { textDecorationLine } from '../../affine-gfx-text/index.js';
 import { MindmapElementModel, ShapeElementModel, TextFitMode, TextResizing, } from '../../affine-model/index.js';
 import { ThemeProvider } from '../../affine-shared/services/index.js';
 import { getSelectedRect, overlayScale, toOverlayCoord, } from '../../affine-shared/utils/index.js';
@@ -427,6 +428,7 @@ let EdgelessShapeTextEditor = (() => {
                 color,
                 padding: `${verticalPadding}px ${horiPadding}px`,
                 textAlign: this.element.textAlign,
+                textDecorationLine: textDecorationLine(this.element.textDecoration),
                 display: 'grid',
                 gridTemplateColumns: '100%',
                 alignItems: this.element.textVerticalAlign === 'center'

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

@@ -2,7 +2,7 @@ import { EdgelessCRUDIdentifier } from '../../affine-block-surface/index.js';
 import { frameworkPaletteGroups, packColor, } from '../../affine-components/color-picker/index.js';
 import { createTextActions } from '../../affine-gfx-text/index.js';
 import { DefaultTheme, FontFamily, getShapeName, getShapeRadius, getShapeType, isTransparent, LineWidth, MindmapElementModel, resolveColor, ShapeElementModel, ShapeStyle, ShapeType, StrokeStyle, TextFitMode, } from '../../affine-model/index.js';
-import { STYLE_MENU_LABEL, ToolbarModuleExtension, translateKey, } from '../../affine-shared/services/index.js';
+import { MENU_ARIA_STYLE, STYLE_MENU_LABEL, ToolbarModuleExtension, translateKey, } from '../../affine-shared/services/index.js';
 import { getMostCommonValue } from '../../affine-shared/utils/index.js';
 import { getRootBlock, LINE_STYLE_LIST, renderMenu, } from '../../affine-widget-edgeless-toolbar/index.js';
 import { Bound } from '../../global/gfx/index.js';
@@ -15,7 +15,7 @@ import { ShapeElementView } from '../element-view.js';
 import { applyTextFitMode, nextTextFitMode } from '../text-fit.js';
 import { mountShapeTextEditor } from '../text/edgeless-shape-text-editor.js';
 import { ShapeComponentConfig } from './shape-menu-config.js';
-import { SHAPE_ADD_TEXT_TOOLTIP, SHAPE_EDIT_VERTICES_TOOLTIP, SHAPE_SWITCH_TYPE_LABEL, SHAPE_TEXT_FIT_ARIA, SHAPE_TEXT_FIT_CONTAINED, SHAPE_TEXT_FIT_GROW, SHAPE_TEXT_FIT_OVERFLOW, SHAPE_TEXT_FIT_TOOLTIP, } from '../translations.js';
+import { SHAPE_ADD_TEXT_TOOLTIP, SHAPE_EDIT_VERTICES_TOOLTIP, SHAPE_SWITCH_TYPE_LABEL, SHAPE_SWITCH_TYPE_MENU_ARIA, SHAPE_TEXT_FIT_ARIA, SHAPE_TEXT_FIT_CONTAINED, SHAPE_TEXT_FIT_GROW, SHAPE_TEXT_FIT_OVERFLOW, SHAPE_TEXT_FIT_TOOLTIP, } from '../translations.js';
 /** Icon + wording per text fit mode for the cycling toolbar button. */
 const TEXT_FIT_UI = {
     [TextFitMode.Grow]: { icon: AutoHeightIcon(), wording: SHAPE_TEXT_FIT_GROW },
@@ -60,6 +60,7 @@ export const shapeToolbarConfig = {
                     icon: ShapeIcon(),
                     label: 'Switch shape type',
                     labelWording: SHAPE_SWITCH_TYPE_LABEL,
+                    menuAriaWording: SHAPE_SWITCH_TYPE_MENU_ARIA,
                     items: ShapeComponentConfig.map(item => ({
                         key: item.tooltip,
                         keyWording: item.tooltipWording,
@@ -96,6 +97,7 @@ export const shapeToolbarConfig = {
                 return renderMenu({
                     label: 'Style',
                     labelWording: STYLE_MENU_LABEL,
+                    menuAriaWording: MENU_ARIA_STYLE,
                     items: LINE_STYLE_LIST,
                     currentValue: shapeStyle === ShapeStyle.Scribbled,
                     onPick,
@@ -292,7 +294,7 @@ export const shapeToolbarConfig = {
         // id: `g.text`
         ...createTextActions(ShapeElementModel, 'shape', (ctx, model, props) => {
             // No need to adjust element bounds
-            if (props['textAlign']) {
+            if (props['textAlign'] || props['textDecoration']) {
                 ctx.std.get(EdgelessCRUDIdentifier).updateElement(model.id, props);
                 return;
             }

package/dist/_pkgs/affine-gfx-shape/translations.d.ts

@@ -21,6 +21,13 @@ export declare const SHAPE_TEXT_FIT_OVERFLOW: ChromeWording;
 export declare const SHAPE_TEXT_FIT_ARIA: ChromeWording;
 export declare const SHAPE_TEXT_FIT_TOOLTIP: ChromeWording;
 export declare const SHAPE_SWITCH_TYPE_LABEL: ChromeWording;
+/**
+ * The accessible name of the shape-type menu SHELL (#390) — its own wording,
+ * not `` `${SHAPE_SWITCH_TYPE_LABEL}-menu` ``, which is what produced
+ * "changer le type de forme-menu" on a French host. The fallback is the exact
+ * identifier that composition produced in English.
+ */
+export declare const SHAPE_SWITCH_TYPE_MENU_ARIA: ChromeWording;
 export declare const SHAPE_ADD_TEXT_TOOLTIP: ChromeWording;
 export declare const SHAPE_EDIT_VERTICES_TOOLTIP: ChromeWording;
 export declare const SHAPE_NAME_SQUARE: ChromeWording;

package/dist/_pkgs/affine-gfx-shape/translations.js

@@ -41,6 +41,16 @@ export const SHAPE_SWITCH_TYPE_LABEL = [
     'com.labre.shape.toolbar.switch-type',
     'Switch shape type',
 ];
+/**
+ * The accessible name of the shape-type menu SHELL (#390) — its own wording,
+ * not `` `${SHAPE_SWITCH_TYPE_LABEL}-menu` ``, which is what produced
+ * "changer le type de forme-menu" on a French host. The fallback is the exact
+ * identifier that composition produced in English.
+ */
+export const SHAPE_SWITCH_TYPE_MENU_ARIA = [
+    'com.labre.shape.toolbar.switch-type-menu',
+    'switch shape type-menu',
+];
 export const SHAPE_ADD_TEXT_TOOLTIP = ADD_TEXT_TOOLTIP;
 export const SHAPE_EDIT_VERTICES_TOOLTIP = [
     'com.labre.shape.toolbar.edit-vertices',
@@ -83,6 +93,7 @@ export const SHAPE_WORDINGS = [
     SHAPE_TEXT_FIT_ARIA,
     SHAPE_TEXT_FIT_TOOLTIP,
     SHAPE_SWITCH_TYPE_LABEL,
+    SHAPE_SWITCH_TYPE_MENU_ARIA,
     SHAPE_EDIT_VERTICES_TOOLTIP,
     SHAPE_NAME_SQUARE,
     SHAPE_NAME_ELLIPSE,

package/dist/_pkgs/affine-gfx-template/builtin/other.js

@@ -2,7 +2,7 @@ import { ConnectorMode, FontFamily, FontWeight, PointStyle, ShapeStyle, StrokeSt
 import { NOTATION_NEUTRALS } from '../../affine-shared/consts/index.js';
 import { fillPlaceholders, translateKey, } from '../../affine-shared/services/index.js';
 import { makeTemplateSnapshot, surfaceText, } from '../make-snapshot.js';
-import { BMC_SEED_CHANNELS, BMC_SEED_COST_STRUCTURE, BMC_SEED_CUSTOMER_RELATIONSHIPS, BMC_SEED_CUSTOMER_SEGMENTS, BMC_SEED_DATE, BMC_SEED_DESIGNED_BY, BMC_SEED_DESIGNED_FOR, BMC_SEED_KEY_ACTIVITIES, BMC_SEED_KEY_PARTNERSHIPS, BMC_SEED_KEY_RESOURCES, BMC_SEED_REVENUE_STREAMS, BMC_SEED_TITLE, BMC_SEED_VALUE_PROPOSITIONS, BMC_SEED_VERSION, FISHBONE_SEED_CATEGORY, FISHBONE_SEED_EFFECT, FISHBONE_SEED_ITEM_1, FISHBONE_SEED_ITEM_2, GANTT_SEED_BUILD, GANTT_SEED_DESIGN, GANTT_SEED_DISCOVERY, GANTT_SEED_LAUNCH, GANTT_SEED_WEEK, KANBAN_SEED_CARD, KANBAN_SEED_DOING, KANBAN_SEED_DONE, KANBAN_SEED_TODO, SWOT_SEED_OPPORTUNITIES, SWOT_SEED_STRENGTHS, SWOT_SEED_THREATS, SWOT_SEED_WEAKNESSES, TEMPLATE_PANEL_CATEGORY_OTHER, } from '../translations.js';
+import { BMC_SEED_CHANNELS, BMC_SEED_COST_STRUCTURE, BMC_SEED_CUSTOMER_RELATIONSHIPS, BMC_SEED_CUSTOMER_SEGMENTS, BMC_SEED_DATE, BMC_SEED_DESIGNED_BY, BMC_SEED_DESIGNED_FOR, BMC_SEED_KEY_ACTIVITIES, BMC_SEED_KEY_PARTNERSHIPS, BMC_SEED_KEY_RESOURCES, BMC_SEED_REVENUE_STREAMS, BMC_SEED_TITLE, BMC_SEED_VALUE_PROPOSITIONS, BMC_SEED_VERSION, FISHBONE_SEED_CATEGORY, FISHBONE_SEED_EFFECT, FISHBONE_SEED_ITEM_1, FISHBONE_SEED_ITEM_2, GANTT_SEED_BUILD, GANTT_SEED_DESIGN, GANTT_SEED_DISCOVERY, GANTT_SEED_LAUNCH, GANTT_SEED_WEEK, KANBAN_SEED_CARD, KANBAN_SEED_DOING, KANBAN_SEED_DONE, KANBAN_SEED_TODO, SWOT_SEED_OPPORTUNITIES, SWOT_SEED_STRENGTHS, SWOT_SEED_THREATS, SWOT_SEED_WEAKNESSES, TEMPLATE_NAME_BUSINESS_MODEL_CANVAS, TEMPLATE_NAME_FISHBONE, TEMPLATE_NAME_GANTT_CHART, TEMPLATE_NAME_KANBAN_BOARD, TEMPLATE_NAME_SWOT, TEMPLATE_PANEL_CATEGORY_OTHER, } from '../translations.js';
 /**
  * The generic ("Other") diagrams: built ONLY from general BlockSuite shapes
  * (`shape` rect/polygon, `text`, `connector`) per the composition principle —
@@ -261,9 +261,15 @@ const previews = {
  * at placement (ADR 0023); `content` stays the English build, and `localize`
  * rebuilds the same snapshot with translated seeds.
  */
-function t(name, preview, build) {
+function t(nameWording, preview, build) {
+    const [nameKey, name] = nameWording;
     return {
         name,
+        // `resolveTemplateName` reads this FIRST: nothing here derives from a
+        // command, so the tile's own key is the only way a host translates it
+        // (#390). `name` stays the stable English identity (drag payload, cache
+        // key) and doubles as the fallback.
+        nameKey,
         type: 'template',
         preview,
         content: makeTemplateSnapshot(build(), name),
@@ -274,10 +280,10 @@ export const otherTemplateCategory = {
     name: 'Other',
     nameKey: TEMPLATE_PANEL_CATEGORY_OTHER[0],
     templates: [
-        t('SWOT', previews.swot, swot),
-        t('Kanban board', previews.kanban, kanban),
-        t('Business model canvas', previews.bmc, bmc),
-        t('Fishbone (Ishikawa)', previews.fishbone, fishbone),
-        t('Gantt chart', previews.gantt, gantt),
+        t(TEMPLATE_NAME_SWOT, previews.swot, swot),
+        t(TEMPLATE_NAME_KANBAN_BOARD, previews.kanban, kanban),
+        t(TEMPLATE_NAME_BUSINESS_MODEL_CANVAS, previews.bmc, bmc),
+        t(TEMPLATE_NAME_FISHBONE, previews.fishbone, fishbone),
+        t(TEMPLATE_NAME_GANTT_CHART, previews.gantt, gantt),
     ],
 };

package/dist/_pkgs/affine-gfx-template/services/template-middlewares.d.ts

@@ -1,5 +1,14 @@
 import { Bound } from '../../global/gfx/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import type { TemplateJob } from './template.js';
+/**
+ * Everything a template inserts lands in the viewer's active layer (ADR 0031
+ * §6). The insertion bypasses both stamped paths — its elements are merged
+ * straight into the surface's elements map, its blocks go through
+ * `store.addBlock` — so the layer is stamped on the snapshot before it is
+ * written, with the same rule as every other creation.
+ */
+export declare const createActiveLayerMiddleware: (std: BlockStdScope) => (job: TemplateJob) => void;
 export declare const replaceIdMiddleware: (job: TemplateJob) => void;
 export declare const createInsertPlaceMiddleware: (targetPlace: Bound) => (job: TemplateJob) => void;
 export declare const createStickerMiddleware: (center: {