@formicoidea/labre-core 0.42.0 → 0.45.0

package/dist/_pkgs/affine-gfx-template/services/template-middlewares.js

@@ -1,6 +1,28 @@
-import { generateElementId, sortIndex } from '../../affine-block-surface/index.js';
+import { applyCreationLayer, generateElementId, sortIndex, } from '../../affine-block-surface/index.js';
 import { Bound } from '../../global/gfx/index.js';
 import { assertType } from '../../global/utils/index.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 const createActiveLayerMiddleware = (std) => {
+    return (job) => {
+        job.slots.beforeInsert.subscribe(payload => {
+            if (payload.type !== 'block')
+                return;
+            const { props, flavour } = payload.data.blockJson;
+            if (flavour === 'affine:surface') {
+                Object.values(props.elements).forEach(element => applyCreationLayer(std, element));
+                return;
+            }
+            if (typeof props.xywh === 'string')
+                applyCreationLayer(std, props);
+        });
+    };
+};
 export const replaceIdMiddleware = (job) => {
     const regeneratedIdMap = new Map();
     job.slots.beforeInsert.subscribe(payload => {

package/dist/_pkgs/affine-gfx-template/services/template.js

@@ -5,7 +5,7 @@ import { assertType } from '../../global/utils/index.js';
 import { GfxControllerIdentifier } from '../../std/gfx/index.js';
 import { DocSnapshotSchema, } from '../../store/index.js';
 import { Subject } from 'rxjs';
-import { createInsertPlaceMiddleware, createRegenerateIndexMiddleware, createStickerMiddleware, replaceIdMiddleware, } from './template-middlewares.js';
+import { createActiveLayerMiddleware, createInsertPlaceMiddleware, createRegenerateIndexMiddleware, createStickerMiddleware, replaceIdMiddleware, } from './template-middlewares.js';
 /**
  * Those block contains other block's id
  * should defer the loading
@@ -243,6 +243,7 @@ export function createTemplateJob(std, type, center) {
         middlewares.push(createStickerMiddleware(center || viewport.center, () => layer.generateIndex()));
     }
     middlewares.push(replaceIdMiddleware);
+    middlewares.push(createActiveLayerMiddleware(std));
     return TemplateJob.create({
         model: surface,
         type,

package/dist/_pkgs/affine-gfx-template/toolbar/template-loading.js

@@ -22,7 +22,7 @@ export class AffineTemplateLoading extends LitElement {
       height: 20px;
       position: relative;
       background: conic-gradient(
-        rgba(30, 150, 235, 1) 90deg,
+        var(--affine-primary-color) 90deg,
         rgba(0, 0, 0, 0.1) 90deg 360deg
       );
       border-radius: 50%;

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

@@ -20,6 +20,11 @@ export declare const TEMPLATE_PANEL_SEARCH_PLACEHOLDER: ChromeWording;
 export declare const TEMPLATE_PANEL_CATEGORY_OTHER: ChromeWording;
 /** The "Template" senior tool's own button name (`SeniorTool.labelKey`). */
 export declare const TEMPLATE_SENIOR_TOOL_NAME: ChromeWording;
+export declare const TEMPLATE_NAME_SWOT: ChromeWording;
+export declare const TEMPLATE_NAME_KANBAN_BOARD: ChromeWording;
+export declare const TEMPLATE_NAME_BUSINESS_MODEL_CANVAS: ChromeWording;
+export declare const TEMPLATE_NAME_FISHBONE: ChromeWording;
+export declare const TEMPLATE_NAME_GANTT_CHART: ChromeWording;
 export declare const TEMPLATE_PACKAGE_WORDINGS: readonly ChromeWording[];
 /**
  * The generic ("Other") diagrams' own seeds: the captions painted onto the

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

@@ -29,10 +29,48 @@ export const TEMPLATE_SENIOR_TOOL_NAME = [
     'com.labre.template.senior-tool.name',
     'Template',
 ];
+/* ── The five "Other" tiles' own names (#390) ─────────────────────────────
+ *
+ * A hand-composed template derives no tile name from a command, so it needs a
+ * `nameKey` of its own — the same seam every framework category already uses
+ * for its hand-written templates (`gfx/bpmn`, `gfx/edgy`, `gfx/mindmap`…).
+ * Only the NAME is chrome here; the captions painted into each scene are
+ * seeds, declared further down and resolved through `Template.localize`.
+ *
+ * `TEMPLATE_NAME_BUSINESS_MODEL_CANVAS` and `BMC_SEED_TITLE` share the same
+ * English words on purpose and do NOT collide: the seed is written once into
+ * the document, the tile is redrawn every time the panel opens, and the
+ * "un mot chrome, une clé" test groups `source: 'chrome'` only.
+ */
+export const TEMPLATE_NAME_SWOT = [
+    'com.labre.template.name.swot',
+    'SWOT',
+];
+export const TEMPLATE_NAME_KANBAN_BOARD = [
+    'com.labre.template.name.kanban-board',
+    'Kanban board',
+];
+export const TEMPLATE_NAME_BUSINESS_MODEL_CANVAS = [
+    'com.labre.template.name.business-model-canvas',
+    'Business model canvas',
+];
+export const TEMPLATE_NAME_FISHBONE = [
+    'com.labre.template.name.fishbone',
+    'Fishbone (Ishikawa)',
+];
+export const TEMPLATE_NAME_GANTT_CHART = [
+    'com.labre.template.name.gantt-chart',
+    'Gantt chart',
+];
 export const TEMPLATE_PACKAGE_WORDINGS = [
     TEMPLATE_PANEL_ADD,
     TEMPLATE_PANEL_SEARCH_PLACEHOLDER,
     TEMPLATE_SENIOR_TOOL_NAME,
+    TEMPLATE_NAME_SWOT,
+    TEMPLATE_NAME_KANBAN_BOARD,
+    TEMPLATE_NAME_BUSINESS_MODEL_CANVAS,
+    TEMPLATE_NAME_FISHBONE,
+    TEMPLATE_NAME_GANTT_CHART,
 ];
 /**
  * The generic ("Other") diagrams' own seeds: the captions painted onto the

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

@@ -46,7 +46,7 @@ import { css, html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import * as Y from 'yjs';
-import { getCursorByCoord, getLineHeight } from './element-renderer/utils.js';
+import { getCursorByCoord, getLineHeight, textDecorationLine, } from './element-renderer/utils.js';
 import { TEXT_EDITOR_PLACEHOLDER } from './translations.js';
 export function mountTextElementEditor(textElement, edgeless, focusCoord) {
     let cursorIndex = textElement.text.length;
@@ -176,9 +176,10 @@ let EdgelessTextEditor = (() => {
       transform-origin: left top;
       font-kerning: none;
       border: ${EdgelessTextEditor.BORDER_WIDTH}px solid
-        var(--affine-primary-color, #1e96eb);
+        var(--affine-primary-color);
       border-radius: 4px;
-      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);
       padding: ${EdgelessTextEditor.PADDING_VERTICAL}px
         ${EdgelessTextEditor.PADDING_HORIZONTAL}px;
       overflow: visible;
@@ -365,6 +366,7 @@ let EdgelessTextEditor = (() => {
                 fontStyle,
                 color,
                 textAlign,
+                textDecorationLine: textDecorationLine(this.element.textDecoration),
                 lineHeight: `${lineHeight}px`,
                 boxSizing: 'content-box',
             })}

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

@@ -1,9 +1,9 @@
 import { ElementRendererExtension, } from '../../affine-block-surface/index.js';
 import { DefaultTheme } from '../../affine-model/index.js';
 import { deltaInsertsToChunks } from '../../std/inline/index.js';
-import { getFontString, getLineHeight, getTextWidth, isRTL, wrapTextDeltas, } from './utils.js';
+import { alphabeticBaselineOffset, getFontString, getLineHeight, getTextWidth, isRTL, paintTextDecoration, wrapTextDeltas, } from './utils.js';
 export const text = (model, ctx, matrix, renderer) => {
-    const { fontSize, fontWeight, fontStyle, fontFamily, textAlign, rotate } = model;
+    const { fontSize, fontWeight, fontStyle, fontFamily, textAlign, textDecoration, rotate, } = model;
     const [, , w, h] = model.deserializedXYWH;
     const cx = w / 2;
     const cy = h / 2;
@@ -38,7 +38,24 @@ export const text = (model, ctx, matrix, renderer) => {
             ctx.canvas.setAttribute('dir', rtl ? 'rtl' : 'ltr');
             // 0.5 comes from v-line padding
             const offset = textAlign === 'center' ? 0 : textAlign === 'right' ? -0.5 : 0.5;
-            ctx.fillText(str, horizontalOffset + beforeTextWidth + offset, (lineIndex + 1) * lineHeightPx);
+            const x = horizontalOffset + beforeTextWidth + offset;
+            const y = (lineIndex + 1) * lineHeightPx;
+            ctx.fillText(str, x, y);
+            if (textDecoration) {
+                paintTextDecoration(ctx, {
+                    decoration: textDecoration,
+                    lineText: str,
+                    font,
+                    x,
+                    // Painted on the ideographic baseline (the bottom of the font box);
+                    // the line hangs off the alphabetic one, a descent above it.
+                    baselineY: y + alphabeticBaselineOffset(font, 'ideographic'),
+                    fontFamily,
+                    fontSize,
+                    fontWeight,
+                    color,
+                });
+            }
             beforeTextWidth += getTextWidth(str, font);
             if (shouldTemporarilyAttach) {
                 ctx.canvas.remove();

package/dist/_pkgs/affine-gfx-text/element-renderer/utils.d.ts

@@ -1,4 +1,4 @@
-import type { FontFamily, FontStyle, FontWeight, TextElementModel } from '../../affine-model/index.js';
+import { type FontFamily, type FontStyle, type FontWeight, TextDecoration, type TextElementModel } from '../../affine-model/index.js';
 import type { Bound } from '../../global/gfx/index.js';
 import type * as Y from 'yjs';
 export type TextDelta = {
@@ -21,6 +21,71 @@ export declare function isRTL(text: string): boolean;
 export declare function splitIntoLines(text: string): string[];
 export declare function getLineWidth(text: string, font: string): number;
 export declare function getTextWidth(text: string, font: string): number;
+/**
+ * How far BELOW a `textBaseline` line the alphabetic baseline sits, measured
+ * rather than derived: Chromium puts `middle` at half the x-height, not half
+ * the font box, so no ratio of the font metrics gets it right. Negative when
+ * the alphabetic baseline is above the line (`ideographic`, the font box's
+ * bottom).
+ */
+export declare function alphabeticBaselineOffset(font: string, baseline: CanvasTextBaseline): number;
+/** The decoration tokens this build paints; any other token is skipped. */
+type KnownTextDecorationToken = 'underline' | 'overline';
+/**
+ * The tokens of a stored `textDecoration` this build knows (ADR 0030).
+ *
+ * Token by token on purpose: the stored value is an append-only CSS token
+ * list, so a token a newer client adds is dropped here one at a time and
+ * `'underline line-through'` still reads as underlined. Never a `switch` on the
+ * whole string, which would lose the underline with the unknown token.
+ */
+export declare function parseTextDecoration(value: string | undefined): {
+    underline: boolean;
+    overline: boolean;
+};
+/**
+ * The CSS `text-decoration-line` the DOM twins of a canvas text use — the
+ * known tokens only, so an unknown one cannot invalidate the declaration.
+ */
+export declare function textDecorationLine(value: string | undefined): string;
+/**
+ * The stored value after one toggle: `token` turned on or off, every other
+ * token kept — an unknown one included, so a toggle in this build never erases
+ * what a newer client wrote. Nothing left writes `None`, never `undefined`
+ * (ADR 0030 §2).
+ */
+export declare function toggleTextDecoration(value: string | undefined, token: KnownTextDecorationToken, on: boolean): TextDecoration;
+/**
+ * Strokes the underline and the overline of ONE painted run of a canvas text
+ * (ADR 0030 §3) — shared by the text, shape and connector-label renderers, and
+ * replayed as is by the SVG export, which runs those renderers on svgcanvas.
+ *
+ * - Width is the run's measured advance, never the element's box, with the
+ *   same measurement the wrap uses, offset by the `ctx.textAlign` the run was
+ *   painted with.
+ * - Offsets are ratios of the size the renderer paints with: canvas
+ *   `TextMetrics` exposes no underline position.
+ * - `fillRect`, not `stroke`: a rectangle ignores whatever `lineDash`,
+ *   `lineCap` or `lineWidth` a shape left on the context, and svgcanvas writes
+ *   it as one `<rect>`.
+ *
+ * Paints nothing at all — not even a `fillStyle` write — when the value holds
+ * no known token, so an undecorated text draws exactly the calls it drew
+ * before the field existed.
+ */
+export declare function paintTextDecoration(ctx: CanvasRenderingContext2D, { decoration, lineText, font, x, baselineY, fontFamily, fontSize, fontWeight, color, }: {
+    decoration: string | undefined;
+    lineText: string;
+    font: string;
+    /** The x passed to `fillText`, read with the context's `textAlign`. */
+    x: number;
+    /** The ALPHABETIC baseline of the run, whatever `textBaseline` painted it. */
+    baselineY: number;
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: string;
+    color: string;
+}): void;
 export declare function wrapTextDeltas(text: Y.Text, font: string, w: number): TextDelta[];
 export declare const truncateTextByWidth: (text: string, font: string, width: number) => string;
 export declare function getTextCursorPosition(model: TextElementModel, coord: {
@@ -50,3 +115,4 @@ export declare const charWidth: {
     getCache: (font: string) => number[] | undefined;
 };
 export declare function wrapText(text: string, font: string, maxWidth: number): string;
+export {};

package/dist/_pkgs/affine-gfx-text/element-renderer/utils.js

@@ -1,4 +1,5 @@
 import { TextUtils } from '../../affine-block-surface/index.js';
+import { TextDecoration, } from '../../affine-model/index.js';
 import { getPointsFromBoundWithRotation, rotatePoints, } from '../../global/gfx/index.js';
 import { deltaInsertsToChunks } from '../../std/inline/index.js';
 const { getFontFacesByFontFamily, wrapFontFamily } = TextUtils;
@@ -107,6 +108,106 @@ export function getTextWidth(text, font) {
     });
     return width;
 }
+/**
+ * How far BELOW a `textBaseline` line the alphabetic baseline sits, measured
+ * rather than derived: Chromium puts `middle` at half the x-height, not half
+ * the font box, so no ratio of the font metrics gets it right. Negative when
+ * the alphabetic baseline is above the line (`ideographic`, the font box's
+ * bottom).
+ */
+export function alphabeticBaselineOffset(font, baseline) {
+    const ctx = getMeasureCtx();
+    if (font !== ctx.font)
+        ctx.font = font;
+    const previous = ctx.textBaseline;
+    ctx.textBaseline = baseline;
+    const { alphabeticBaseline } = ctx.measureText('x');
+    ctx.textBaseline = previous;
+    return -(alphabeticBaseline ?? 0) || 0;
+}
+/**
+ * The tokens of a stored `textDecoration` this build knows (ADR 0030).
+ *
+ * Token by token on purpose: the stored value is an append-only CSS token
+ * list, so a token a newer client adds is dropped here one at a time and
+ * `'underline line-through'` still reads as underlined. Never a `switch` on the
+ * whole string, which would lose the underline with the unknown token.
+ */
+export function parseTextDecoration(value) {
+    const tokens = value ? value.split(/\s+/) : [];
+    return {
+        underline: tokens.includes('underline'),
+        overline: tokens.includes('overline'),
+    };
+}
+/**
+ * The CSS `text-decoration-line` the DOM twins of a canvas text use — the
+ * known tokens only, so an unknown one cannot invalidate the declaration.
+ */
+export function textDecorationLine(value) {
+    const { underline, overline } = parseTextDecoration(value);
+    const line = [underline && 'underline', overline && 'overline']
+        .filter(Boolean)
+        .join(' ');
+    return line || 'none';
+}
+/**
+ * The stored value after one toggle: `token` turned on or off, every other
+ * token kept — an unknown one included, so a toggle in this build never erases
+ * what a newer client wrote. Nothing left writes `None`, never `undefined`
+ * (ADR 0030 §2).
+ */
+export function toggleTextDecoration(value, token, on) {
+    const tokens = new Set((value ?? '')
+        .split(/\s+/)
+        .filter(t => t && t !== TextDecoration.None && t !== token));
+    if (on)
+        tokens.add(token);
+    const known = ['underline', 'overline'].filter(t => tokens.has(t));
+    const unknown = [...tokens].filter(t => t !== 'underline' && t !== 'overline');
+    const next = [...known, ...unknown].join(' ');
+    return (next || TextDecoration.None);
+}
+/**
+ * Strokes the underline and the overline of ONE painted run of a canvas text
+ * (ADR 0030 §3) — shared by the text, shape and connector-label renderers, and
+ * replayed as is by the SVG export, which runs those renderers on svgcanvas.
+ *
+ * - Width is the run's measured advance, never the element's box, with the
+ *   same measurement the wrap uses, offset by the `ctx.textAlign` the run was
+ *   painted with.
+ * - Offsets are ratios of the size the renderer paints with: canvas
+ *   `TextMetrics` exposes no underline position.
+ * - `fillRect`, not `stroke`: a rectangle ignores whatever `lineDash`,
+ *   `lineCap` or `lineWidth` a shape left on the context, and svgcanvas writes
+ *   it as one `<rect>`.
+ *
+ * Paints nothing at all — not even a `fillStyle` write — when the value holds
+ * no known token, so an undecorated text draws exactly the calls it drew
+ * before the field existed.
+ */
+export function paintTextDecoration(ctx, { decoration, lineText, font, x, baselineY, fontFamily, fontSize, fontWeight, color, }) {
+    const { underline, overline } = parseTextDecoration(decoration);
+    if (!underline && !overline)
+        return;
+    const width = getLineWidth(lineText, font);
+    if (!(width > 0))
+        return;
+    const left = ctx.textAlign === 'center'
+        ? x - width / 2
+        : ctx.textAlign === 'right'
+            ? x - width
+            : x;
+    const thickness = Math.max(1, fontSize / 16);
+    ctx.fillStyle = color;
+    if (underline) {
+        ctx.fillRect(left, baselineY + Math.max(1, fontSize * 0.08), width, thickness);
+    }
+    if (overline) {
+        const { fontBoundingBoxAscent } = getFontMetrics(fontFamily, fontSize, fontWeight);
+        ctx.fillRect(left, baselineY - fontBoundingBoxAscent, width, thickness);
+    }
+}
 export function wrapTextDeltas(text, font, w) {
     if (!text)
         return [];

package/dist/_pkgs/affine-gfx-text/toolbar/actions.d.ts

@@ -15,6 +15,17 @@ export declare function createTextActions<K extends abstract new (...args: any)
 }, {
     readonly id: "c.font-style";
     readonly content: (ctx: ToolbarContext) => import("lit-html").TemplateResult<1> | null;
+}, {
+    readonly id: "c.text-decoration";
+    readonly when: boolean;
+    readonly actions: {
+        id: "a.underline" | "b.overline";
+        icon: import("lit-html").TemplateResult<1>;
+        tooltipWording: import("../../affine-shared/services/index.js").ChromeWording;
+        when: (ctx: ToolbarContext) => boolean;
+        active: (ctx: ToolbarContext) => boolean;
+        run: (ctx: ToolbarContext) => void;
+    }[];
 }, {
     readonly id: "d.font-size";
     readonly when: boolean;

package/dist/_pkgs/affine-gfx-text/toolbar/actions.js

@@ -1,16 +1,17 @@
 import { EdgelessCRUDIdentifier, TextUtils } from '../../affine-block-surface/index.js';
 import { frameworkPaletteGroups, packColor, } from '../../affine-components/color-picker/index.js';
+import { OverlineIcon, UnderlineIcon } from '../../affine-components/icons/index.js';
 import { EditorChevronDown } from '../../affine-components/toolbar/index.js';
 import { DefaultTheme, FontFamily, FontStyle, FontWeight, resolveColor, TextAlign, } from '../../affine-model/index.js';
-import { translateKey, } from '../../affine-shared/services/index.js';
+import { TEXT_FORMAT_OVERLINE, TEXT_FORMAT_UNDERLINE, translateKey, } from '../../affine-shared/services/index.js';
 import { getMostCommonResolvedValue, getMostCommonValue, } from '../../affine-shared/utils/index.js';
 import { renderMenu, resolveMenuItemLabel, } from '../../affine-widget-edgeless-toolbar/index.js';
 import { TextAlignCenterIcon, TextAlignLeftIcon, TextAlignRightIcon, } from '@blocksuite/icons/lit';
 import { signal } from '@preact/signals-core';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
-import { isFontStyleSupported, isFontWeightSupported, } from '../element-renderer/utils.js';
-import { TEXT_ALIGN_CENTER, TEXT_ALIGN_LEFT, TEXT_ALIGN_RIGHT, TEXT_TOOLBAR_ALIGNMENT, TEXT_TOOLBAR_FONT, TEXT_TOOLBAR_FONT_STYLE, TEXT_TOOLBAR_FONT_STYLE_ITALIC, TEXT_TOOLBAR_FONT_WEIGHT_BOLD, TEXT_TOOLBAR_FONT_WEIGHT_LIGHT, TEXT_TOOLBAR_FONT_WEIGHT_REGULAR, TEXT_TOOLBAR_FONT_WEIGHT_SEMIBOLD, TEXT_TOOLBAR_FONT_SIZE, TEXT_TOOLBAR_TEXT_COLOR, } from '../translations.js';
+import { isFontStyleSupported, isFontWeightSupported, parseTextDecoration, toggleTextDecoration, } from '../element-renderer/utils.js';
+import { TEXT_ALIGN_CENTER, TEXT_ALIGN_LEFT, TEXT_ALIGN_RIGHT, TEXT_TOOLBAR_ALIGNMENT, TEXT_TOOLBAR_ALIGNMENT_MENU_ARIA, TEXT_TOOLBAR_FONT, TEXT_TOOLBAR_FONT_STYLE, TEXT_TOOLBAR_FONT_STYLE_ITALIC, TEXT_TOOLBAR_FONT_WEIGHT_BOLD, TEXT_TOOLBAR_FONT_WEIGHT_LIGHT, TEXT_TOOLBAR_FONT_WEIGHT_REGULAR, TEXT_TOOLBAR_FONT_WEIGHT_SEMIBOLD, TEXT_TOOLBAR_FONT_SIZE, TEXT_TOOLBAR_TEXT_COLOR, } from '../translations.js';
 const FONT_WEIGHT_LIST = [
     {
         key: 'Light',
@@ -71,6 +72,24 @@ const TEXT_ALIGN_LIST = [
         icon: TextAlignRightIcon(),
     },
 ];
+/**
+ * The decoration toggles, in the order they sit on the row (the toolbar orders
+ * a group's children by id).
+ */
+const TEXT_DECORATION_TOGGLES = [
+    {
+        id: 'a.underline',
+        token: 'underline',
+        icon: UnderlineIcon,
+        wording: TEXT_FORMAT_UNDERLINE,
+    },
+    {
+        id: 'b.overline',
+        token: 'overline',
+        icon: OverlineIcon,
+        wording: TEXT_FORMAT_OVERLINE,
+    },
+];
 export function createTextActions(klass, type, update = (ctx, model, props) => ctx.std.get(EdgelessCRUDIdentifier).updateElement(model.id, props), mapInto = model => model, stash = (model, type, field) => model[type](field)) {
     return [
         {
@@ -119,6 +138,7 @@ export function createTextActions(klass, type, update = (ctx, model, props) => c
             <edgeless-font-family-panel
               .value=${fontFamily}
               .onSelect=${onPick}
+              .std=${ctx.std}
             ></edgeless-font-family-panel>
           </editor-menu-button>
         `;
@@ -249,6 +269,38 @@ export function createTextActions(klass, type, update = (ctx, model, props) => c
         `;
             },
         },
+        {
+            // Two element-level toggles, drawn like the format bar's underline:
+            // the decoration applies to the whole text, never to one run (ADR 0030
+            // §1, §6). `affine:edgeless-text` decorates its paragraphs per run
+            // through the inline schema instead, so it has no such field.
+            id: 'c.text-decoration',
+            when: type !== 'edgeless-text',
+            actions: TEXT_DECORATION_TOGGLES.map(({ id, token, icon, wording }) => ({
+                id,
+                icon,
+                tooltipWording: wording,
+                when: (ctx) => {
+                    const models = ctx.getSurfaceModelsByType(klass);
+                    return (models.length > 0 &&
+                        models.every(model => isSurfaceTextModel(model, klass, type)));
+                },
+                active: (ctx) => ctx
+                    .getSurfaceModelsByType(klass)
+                    .every(model => parseTextDecoration(mapInto(model).textDecoration)[token]),
+                run: (ctx) => {
+                    const models = ctx.getSurfaceModelsByType(klass);
+                    const on = !models.every(model => parseTextDecoration(mapInto(model).textDecoration)[token]);
+                    // One click, one undo step, whatever the selection holds.
+                    ctx.store.captureSync();
+                    for (const model of models) {
+                        update(ctx, model, {
+                            textDecoration: toggleTextDecoration(mapInto(model).textDecoration, token, on),
+                        });
+                    }
+                },
+            })),
+        },
         {
             id: 'd.font-size',
             when: type !== 'edgeless-text',
@@ -295,6 +347,7 @@ export function createTextActions(klass, type, update = (ctx, model, props) => c
                 return renderMenu({
                     label: 'Alignment',
                     labelWording: TEXT_TOOLBAR_ALIGNMENT,
+                    menuAriaWording: TEXT_TOOLBAR_ALIGNMENT_MENU_ARIA,
                     items: TEXT_ALIGN_LIST,
                     currentValue: textAlign,
                     onPick,

package/dist/_pkgs/affine-gfx-text/toolbar/config.d.ts

@@ -8,6 +8,17 @@ export declare const textToolbarConfig: {
     }, {
         readonly id: "c.font-style";
         readonly content: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => import("lit-html").TemplateResult<1> | null;
+    }, {
+        readonly id: "c.text-decoration";
+        readonly when: boolean;
+        readonly actions: {
+            id: "a.underline" | "b.overline";
+            icon: import("lit-html").TemplateResult<1>;
+            tooltipWording: import("../../affine-shared/services/index.js").ChromeWording;
+            when: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => boolean;
+            active: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => boolean;
+            run: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => void;
+        }[];
     }, {
         readonly id: "d.font-size";
         readonly when: boolean;

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

@@ -8,7 +8,7 @@ import { createTextActions } from './actions.js';
 export const textToolbarConfig = {
     actions: createTextActions(TextElementModel, 'text', (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-text/translations.d.ts

@@ -17,6 +17,14 @@ export declare const TEXT_TOOLBAR_FONT: ChromeWording;
 export declare const TEXT_TOOLBAR_TEXT_COLOR: ChromeWording;
 export declare const TEXT_TOOLBAR_FONT_STYLE: ChromeWording;
 export declare const TEXT_TOOLBAR_ALIGNMENT: ChromeWording;
+/**
+ * The accessible name of the alignment menu SHELL (#390) — its own wording,
+ * not `` `${TEXT_TOOLBAR_ALIGNMENT}-menu` ``, which read "alignement-menu" in
+ * French. Distinct from `ROOT_ALIGNMENT_MENU_ARIA`: that one names the
+ * edgeless menu that aligns ELEMENTS on the board, this one the menu that
+ * aligns TEXT inside an element. Two menus, two names.
+ */
+export declare const TEXT_TOOLBAR_ALIGNMENT_MENU_ARIA: ChromeWording;
 /**
  * The three alignment values — a different concept from a mindmap's own
  * "Left" / "Right" layout direction (`gfx/mindmap`'s

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

@@ -29,6 +29,17 @@ export const TEXT_TOOLBAR_ALIGNMENT = [
     'com.labre.text-toolbar.alignment',
     'Alignment',
 ];
+/**
+ * The accessible name of the alignment menu SHELL (#390) — its own wording,
+ * not `` `${TEXT_TOOLBAR_ALIGNMENT}-menu` ``, which read "alignement-menu" in
+ * French. Distinct from `ROOT_ALIGNMENT_MENU_ARIA`: that one names the
+ * edgeless menu that aligns ELEMENTS on the board, this one the menu that
+ * aligns TEXT inside an element. Two menus, two names.
+ */
+export const TEXT_TOOLBAR_ALIGNMENT_MENU_ARIA = [
+    'com.labre.text-toolbar.alignment-menu',
+    'text alignment-menu',
+];
 /**
  * The three alignment values — a different concept from a mindmap's own
  * "Left" / "Right" layout direction (`gfx/mindmap`'s
@@ -58,6 +69,7 @@ export const TEXT_WORDINGS = [
     TEXT_TOOLBAR_TEXT_COLOR,
     TEXT_TOOLBAR_FONT_STYLE,
     TEXT_TOOLBAR_ALIGNMENT,
+    TEXT_TOOLBAR_ALIGNMENT_MENU_ARIA,
     TEXT_ALIGN_LEFT,
     TEXT_ALIGN_CENTER,
     TEXT_ALIGN_RIGHT,

package/dist/_pkgs/affine-inline-latex/latex-node/latex-editor-menu.js

@@ -101,7 +101,8 @@ let LatexEditorMenu = (() => {
       background: ${unsafeCSSVar('white10')};
 
       /* light/activeShadow */
-      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);
 
       font-family: ${unsafeCSSVar('fontCodeFamily')};
       border: 1px solid transparent;

package/dist/_pkgs/affine-inline-preset/adapters/html/html-inline.d.ts

@@ -25,6 +25,9 @@ export declare const htmlDelElementToDeltaMatcher: import("../../../store/index.
 export declare const htmlUnderlineElementToDeltaMatcher: import("../../../store/index.js").ExtensionType & {
     identifier: import("../../../global/di/types.js").ServiceIdentifier<import("../../../affine-shared/adapters/index.js").HtmlASTToDeltaMatcher>;
 };
+export declare const htmlOverlineElementToDeltaMatcher: import("../../../store/index.js").ExtensionType & {
+    identifier: import("../../../global/di/types.js").ServiceIdentifier<import("../../../affine-shared/adapters/index.js").HtmlASTToDeltaMatcher>;
+};
 export declare const htmlMarkElementToDeltaMatcher: import("../../../store/index.js").ExtensionType & {
     identifier: import("../../../global/di/types.js").ServiceIdentifier<import("../../../affine-shared/adapters/index.js").HtmlASTToDeltaMatcher>;
 };

package/dist/_pkgs/affine-inline-preset/adapters/html/html-inline.js

@@ -90,6 +90,22 @@ const isUnderlineElement = (ast) => {
     const isUnderlineStyle = /text-decoration:\s*underline/.test(style);
     return isUnderlineTag || isUnderlineStyle;
 };
+/**
+ * Check if the element is an overline element through its style — HTML has
+ * no overline tag, so `text-decoration: overline;` is the only spelling, and
+ * the one the HTML export writes (ADR 0030 §5).
+ * @example
+ * ```html
+ * <span style="text-decoration: overline;">Hello</span>
+ * ```
+ */
+const isOverlineElement = (ast) => {
+    if (!isElement(ast)) {
+        return false;
+    }
+    const style = typeof ast.properties.style === 'string' ? ast.properties.style : '';
+    return /text-decoration:\s*overline/.test(style);
+};
 /**
  * Check if the element is a line-through element through style or tag
  * If the element tag is <del> or the style is `text-decoration: line-through;`,
@@ -124,6 +140,7 @@ const isTextLikeElement = (ast) => {
         !isStrongElement(ast) &&
         !isItalicElement(ast) &&
         !isUnderlineElement(ast) &&
+        !isOverlineElement(ast) &&
         !isLineThroughElement(ast));
 };
 export const htmlTextToDeltaMatcher = HtmlASTToDeltaExtension({
@@ -256,6 +273,19 @@ export const htmlUnderlineElementToDeltaMatcher = HtmlASTToDeltaExtension({
         }));
     },
 });
+export const htmlOverlineElementToDeltaMatcher = HtmlASTToDeltaExtension({
+    name: 'overline-element',
+    match: ast => isOverlineElement(ast),
+    toDelta: (ast, context) => {
+        if (!isElement(ast)) {
+            return [];
+        }
+        return ast.children.flatMap(child => context.toDelta(child, { trim: false }).map(delta => {
+            delta.attributes = { ...delta.attributes, overline: true };
+            return delta;
+        }));
+    },
+});
 export const htmlMarkElementToDeltaMatcher = HtmlASTToDeltaExtension({
     name: 'mark-element',
     match: ast => isElement(ast) && ast.tagName === 'mark',
@@ -285,6 +315,7 @@ export const HtmlInlineToDeltaAdapterExtensions = [
     htmlCodeElementToDeltaMatcher,
     htmlDelElementToDeltaMatcher,
     htmlUnderlineElementToDeltaMatcher,
+    htmlOverlineElementToDeltaMatcher,
     htmlMarkElementToDeltaMatcher,
     htmlBrElementToDeltaMatcher,
 ];