@formicoidea/labre-core 0.41.0 → 0.43.1

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/templates/index.js

@@ -29,7 +29,7 @@ function tpl(name, preview, build, nameKey) {
         nameKey,
         content: makeTemplateSnapshot(build(EN_SEEDS), name),
         // The seeds a template writes into the document go through the
-        // translation seam at placement (ADR 0016); `content` stays the English
+        // translation seam at placement (ADR 0023); `content` stays the English
         // build.
         localize: std => makeTemplateSnapshot(build(seedsFor(std)), name),
     };

package/dist/_pkgs/affine-gfx-mindmap/toolbar/basket-elements.js

@@ -37,7 +37,7 @@ export const getMindmapRender = (mindmapStyle) => async (bound, edgeless) => {
     const rootX = x;
     const rootY = centerVertical - rootH / 2;
     // Translated HERE and once: the captions are document content the moment
-    // they land (ADR 0016), so the host's catalogue is asked at placement and
+    // they land (ADR 0023), so the host's catalogue is asked at placement and
     // never again.
     const root = {
         children: [],

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/toolbar/utils/import-mindmap.js

@@ -29,7 +29,7 @@ function readAsText(file) {
 async function parseMmFile(file, std) {
     const content = await readAsText(file);
     // Translated HERE and once: a node with no text is document content the
-    // moment the import lands (ADR 0016).
+    // moment the import lands (ADR 0023).
     const untitled = translateKey(std, ...MINDMAP_SEED_IMPORTED_NODE);
     try {
         const parsed = c.convertXML(content);
@@ -67,7 +67,7 @@ async function parseMmFile(file, std) {
 async function parseOPMLFile(file, std) {
     const content = await readAsText(file);
     // Translated HERE and once: a node with no text is document content the
-    // moment the import lands (ADR 0016).
+    // moment the import lands (ADR 0023).
     const untitled = translateKey(std, ...MINDMAP_SEED_IMPORTED_NODE);
     try {
         const parsed = c.convertXML(content);

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

@@ -3,7 +3,7 @@ import { type ChromeWording } from '../affine-shared/services/index.js';
  * The mindmap's own seeds: the captions a freshly placed mindmap is written
  * with, wherever the gesture draws one directly (the toolbar's built-in
  * templates, the drag-from-basket tool, a `.mm`/`.opml` import that meets an
- * empty node). Resolved at PLACEMENT and never again (ADR 0016) — a node
+ * empty node). Resolved at PLACEMENT and never again (ADR 0023) — a node
  * renamed by its author keeps its name, and a mindmap created before these
  * keys existed keeps the plain text it was given.
  *
@@ -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

@@ -3,7 +3,7 @@ import { MINDMAP_NAME, } from '../affine-shared/services/index.js';
  * The mindmap's own seeds: the captions a freshly placed mindmap is written
  * with, wherever the gesture draws one directly (the toolbar's built-in
  * templates, the drag-from-basket tool, a `.mm`/`.opml` import that meets an
- * empty node). Resolved at PLACEMENT and never again (ADR 0016) — a node
+ * empty node). Resolved at PLACEMENT and never again (ADR 0023) — a node
  * renamed by its author keeps its name, and a mindmap created before these
  * keys existed keeps the plain text it was given.
  *
@@ -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/highlighter.js

@@ -1,4 +1,4 @@
-import { ElementRendererExtension, } from '../../affine-block-surface/index.js';
+import { ElementRendererExtension, taggedPath2D, } from '../../affine-block-surface/index.js';
 import { DefaultTheme, } from '../../affine-model/index.js';
 export const highlighter = (model, ctx, matrix, renderer) => {
     const { rotate, deserializedXYWH: [, , w, h], } = model;
@@ -7,6 +7,6 @@ export const highlighter = (model, ctx, matrix, renderer) => {
     ctx.setTransform(matrix.translateSelf(cx, cy).rotateSelf(rotate).translateSelf(-cx, -cy));
     const color = renderer.getColorValue(model.color, DefaultTheme.hightlighterColor, true);
     ctx.fillStyle = color;
-    ctx.fill(new Path2D(model.commands));
+    ctx.fill(taggedPath2D(model.commands));
 };
 export const HighlighterElementRendererExtension = ElementRendererExtension('highlighter', highlighter);

package/dist/_pkgs/affine-gfx-shape/overlay/polygon-drawing-overlay.d.ts

@@ -37,5 +37,11 @@ export declare class PolygonDrawingOverlay extends ToolOverlay {
      * account (renders as transparent).
      */
     private _effectiveStrokeColor;
+    /**
+     * The marker shown at the pointer while the tool is armed and empty: the same
+     * dot the first placed vertex gets, plus a light ring, so the promise the
+     * cursor makes is the shape the click keeps.
+     */
+    private _renderFirstVertexHint;
     render(ctx: CanvasRenderingContext2D, _rc: RoughCanvas): void;
 }

package/dist/_pkgs/affine-gfx-shape/overlay/polygon-drawing-overlay.js

@@ -59,10 +59,39 @@ export class PolygonDrawingOverlay extends ToolOverlay {
     _effectiveStrokeColor() {
         return this._strokeStyle === 'none' ? 'transparent' : this._strokeColor;
     }
+    /**
+     * The marker shown at the pointer while the tool is armed and empty: the same
+     * dot the first placed vertex gets, plus a light ring, so the promise the
+     * cursor makes is the shape the click keeps.
+     */
+    _renderFirstVertexHint(ctx, [cx, cy]) {
+        const zoom = this.gfx.viewport.zoom;
+        ctx.beginPath();
+        ctx.arc(cx, cy, VERTEX_INDICATOR_RADIUS, 0, Math.PI * 2);
+        ctx.fillStyle = this._strokeColor;
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(cx, cy, CLOSE_SNAP_INDICATOR_RADIUS / zoom, 0, Math.PI * 2);
+        ctx.strokeStyle = this._strokeColor;
+        ctx.lineWidth = 1.5 / zoom;
+        ctx.setLineDash([]);
+        ctx.globalAlpha = this.globalAlpha * 0.4;
+        ctx.stroke();
+        ctx.globalAlpha = this.globalAlpha;
+    }
     render(ctx, _rc) {
         const { vertices, cursorPos, isDrawing } = this;
         ctx.globalAlpha = this.globalAlpha;
-        if (!isDrawing || vertices.length === 0)
+        if (vertices.length === 0) {
+            // Nothing is placed yet, so there is no outline to preview — but the tool
+            // IS armed, and until now the canvas said nothing about it. Marking where
+            // the next click would land a corner is what tells the author the board
+            // is waiting for a first vertex rather than ignoring the pointer.
+            if (cursorPos)
+                this._renderFirstVertexHint(ctx, cursorPos);
+            return;
+        }
+        if (!isDrawing)
             return;
         const effectiveStroke = this._effectiveStrokeColor();
         const strokeWidth = Math.max(this._strokeWidth, 1);

package/dist/_pkgs/affine-gfx-shape/polygon-tool.d.ts

@@ -1,6 +1,25 @@
 import type { PointerEventState } from '../std/index.js';
 import { BaseTool, type GfxController } from '../std/gfx/index.js';
-export type PolygonToolOption = Record<string, unknown>;
+export type PolygonToolOption = {
+    /**
+     * Props the activation stamps on the shape the closed outline produces — the
+     * same seam `ConnectorTool`'s `role` / `style` options are: a framework arms
+     * this tool to draw ITS artefact (a Wardley zone) rather than a plain
+     * polygon, so the element is born typed instead of being converted after the
+     * fact. Absent for the plain polygon tool, which keeps drawing a shape.
+     *
+     * Merged BEFORE the geometry: a framework's description of an artefact
+     * carries the box and the outline it would have been born with, and the
+     * outline the author just drew must win over both.
+     */
+    props?: Record<string, unknown>;
+    /**
+     * Called once the element exists, for the placement an element description
+     * cannot express — a Wardley zone has to be lowered to just above the map it
+     * covers, which depends on what is already on the board.
+     */
+    onCreated?: (gfx: GfxController, id: string) => void;
+};
 /**
  * PolygonTool allows users to draw arbitrary polygons by clicking to place
  * vertices on the edgeless canvas. The polygon is finalised by either:

package/dist/_pkgs/affine-gfx-shape/polygon-tool.js

@@ -228,8 +228,15 @@ export class PolygonTool extends BaseTool {
         const id = this.gfx.surface.addElement({
             type: CanvasElementType.SHAPE,
             shapeType: ShapeType.Polygon,
-            xywh: bound.serialize(),
             radius: 0,
+            // What the activation asked for, if anything — it may change the element
+            // type itself, which is how a framework gets its own artefact out of this
+            // gesture. Spread here so the geometry below always wins: the props of a
+            // framework artefact describe the shape it would have been born with,
+            // outline included, and that outline is exactly what the author just
+            // replaced by drawing.
+            ...this.activatedOption.props,
+            xywh: bound.serialize(),
             vertices: normalizedVertices,
             isClosed: true,
             smoothFlags: smoothFlagsForModel,
@@ -237,6 +244,7 @@ export class PolygonTool extends BaseTool {
                 ? { controlPoints: controlPointsForModel }
                 : {}),
         });
+        this.activatedOption.onCreated?.(this.gfx, id);
         this.std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
             control: 'canvas:draw',
             page: 'whiteboard editor',

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

@@ -1,8 +1,8 @@
 import { EdgelessCRUDIdentifier } from '../../affine-block-surface/index.js';
-import { packColor, } from '../../affine-components/color-picker/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,
@@ -192,11 +194,16 @@ export const shapeToolbarConfig = {
                             .updateElement(model.id, { strokeStyle });
                     }
                 };
+                // The base palette, plus a page per framework whose tooling is on —
+                // opening on the one the selection belongs to (`docs/adr/0027`).
+                const carousel = frameworkPaletteGroups(ctx.std, models, DefaultTheme.Palettes);
                 return html `
           <edgeless-shape-color-picker
             @pickFillColor=${onPickFillColor}
             @pickStrokeColor=${onPickStrokeColor}
             @pickStrokeStyle=${onPickStrokeStyle}
+            .paletteGroups=${carousel.groups}
+            .activeGroupKey=${carousel.activeKey}
             .payload=${{
                     fillColor,
                     strokeColor,

package/dist/_pkgs/affine-gfx-shape/toolbar/palette-color-action.js

@@ -1,5 +1,5 @@
 import { EdgelessCRUDIdentifier } from '../../affine-block-surface/index.js';
-import { packColor, } from '../../affine-components/color-picker/index.js';
+import { frameworkPaletteGroups, packColor, } from '../../affine-components/color-picker/index.js';
 import { DefaultTheme, isTransparent, LineWidth, resolveColor, ShapeElementModel, StrokeStyle, } from '../../affine-model/index.js';
 import { getMostCommonValue } from '../../affine-shared/utils/index.js';
 import { html } from 'lit';
@@ -99,12 +99,22 @@ export function paletteColorAction(id, palettes, fillColorFor = (_model, value)
                     crud.updateElement(model.id, props);
                 }
             };
+            // The carousel: the editor palette, then a page per framework whose
+            // tooling is on. A Wardley node resolves to `wardley` and therefore
+            // OPENS on the very swatches `palettes` holds, since the framework
+            // registers that same list (`docs/adr/0027`). With its flag off the
+            // framework contributes no page and the picker opens on the editor
+            // palette — a palette is tooling (`docs/adr/0009`), the colour already
+            // stored is not and does not move.
+            const carousel = frameworkPaletteGroups(ctx.std, models, DefaultTheme.Palettes);
             return html `
         <edgeless-shape-color-picker
           @pickFillColor=${onPickFillColor}
           @pickStrokeColor=${onPickStrokeColor}
           @pickStrokeStyle=${onPickStrokeStyle}
           .palettes=${palettes}
+          .paletteGroups=${carousel.groups}
+          .activeGroupKey=${carousel.activeKey}
           .payload=${{
                 fillColor,
                 strokeColor,

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 —
@@ -258,12 +258,18 @@ const previews = {
 /**
  * A hand-composed template — what is left once the artefacts are derived. The
  * seeds a template writes into the document go through the translation seam
- * at placement (ADR 0016); `content` stays the English build, and `localize`
+ * 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/snapshot-from-action.js

@@ -1,7 +1,5 @@
-import { EdgelessCRUDIdentifier } from '../affine-block-surface/index.js';
-import { TranslationProvider } from '../affine-shared/services/index.js';
+import { recordAction } from '../affine-block-surface/index.js';
 import { Bound } from '../global/gfx/index.js';
-import { generateKeyBetween, GfxControllerIdentifier } from '../std/gfx/index.js';
 import * as Y from 'yjs';
 import { makeTemplateSnapshot, surfaceText, surfaceYMap, } from './make-snapshot.js';
 /**
@@ -35,124 +33,39 @@ function materialize(text) {
  * the action writes its English fallbacks.
  */
 export function snapshotFromAction(run, name, host) {
-    const elements = new Map();
-    let n = 0;
-    let lastIndex = null;
-    const nextIndex = () => (lastIndex = generateKeyBetween(lastIndex, null));
-    const addElement = (props) => {
-        const id = `el-${n++}`;
-        const record = {};
-        for (const [key, value] of Object.entries(props)) {
-            if (value !== undefined)
-                record[key] = value;
-        }
-        record['id'] = id;
-        // ponytail: the Y conversions are hard-coded (`text`, and a group's
-        // `children` / `title`) instead of asking each element class for its own
-        // `propsToY`. Ceiling: it covers every prop the framework actions pass
-        // today. Upgrade path: run the real `propsToY` once the element-ctor map is
-        // reachable without a live surface.
-        const text = record['text'];
-        if (typeof text === 'string')
-            record['text'] = surfaceText(text);
-        else if (text instanceof Y.Text)
-            record['text'] = surfaceText(materialize(text));
-        if (record['type'] === 'group') {
-            const children = record['children'];
-            if (children && typeof children === 'object') {
-                record['children'] = surfaceYMap(Object.fromEntries(Object.keys(children).map(key => [key, true])));
-            }
-            const title = record['title'];
-            if (typeof title === 'string')
-                record['title'] = surfaceText(title);
-            else if (title instanceof Y.Text)
-                record['title'] = surfaceText(materialize(title));
-        }
-        if (record['index'] === undefined)
-            record['index'] = nextIndex();
-        // The model members an action reads back off `getElementById`, kept
-        // non-enumerable so they never leak into the snapshot.
-        Object.defineProperties(record, {
-            group: { value: null },
-            deserializedXYWH: {
-                get: () => typeof record['xywh'] === 'string'
-                    ? Bound.deserialize(record['xywh'])
-                    : null,
-            },
-        });
-        elements.set(id, record);
-        return id;
-    };
-    const records = () => [...elements.values()];
-    const surface = {
-        addElement,
-        getElementById: (id) => elements.get(id) ?? null,
-        getElementsByType: (type) => records().filter(el => el['type'] === type),
-        get elementModels() {
-            return records();
-        },
-    };
-    const gfx = {
-        surface,
-        viewport: { centerX: 0, centerY: 0, zoom: 1, center: { x: 0, y: 0 } },
-        doc: { captureSync: () => { } },
-        selection: { set: () => { }, selectedElements: [] },
-        tool: { setTool: () => { } },
-        layer: {
-            generateIndex: () => nextIndex(),
-            getReorderedIndex: (_model, direction) => {
-                const sorted = records()
-                    .map(el => String(el['index']))
-                    .sort();
-                return direction === 'back'
-                    ? generateKeyBetween(null, sorted[0] ?? null)
-                    : generateKeyBetween(sorted[sorted.length - 1] ?? null, null);
-            },
-            get canvasElements() {
-                return records();
-            },
-        },
-        std: null,
-    };
-    const crud = {
-        addElement: (type, props) => addElement({ ...props, type }),
-    };
-    const std = {
-        get: (identifier) => {
-            if (identifier === GfxControllerIdentifier)
-                return gfx;
-            if (identifier === EdgelessCRUDIdentifier)
-                return crud;
-            throw new Error(`snapshotFromAction: unsupported service "${identifier?.identifierName ?? String(identifier)}"`);
-        },
-        getOptional: (identifier) => identifier === TranslationProvider
-            ? host?.getOptional(TranslationProvider)
-            : undefined,
-        command: {
-            // Really run the command, so a group built by `createGroupCommand` is
-            // whatever that command says a group is — no second definition here.
-            exec: (cmd, payload) => {
-                let out;
-                cmd({ std: gfx.std, ...payload }, r => {
-                    out = r;
-                });
-                return [{}, out ?? {}];
-            },
-        },
-        store: {
-            readonly: false,
-            captureSync: () => { },
-            id: 'doc:template',
-            workspace: { meta: { getDocMeta: () => undefined } },
-        },
-    };
-    gfx.std = std;
-    run(gfx.std);
-    if (elements.size === 0) {
+    const { records } = recordAction(run, { host, encode: toSnapshotProps });
+    if (records.length === 0) {
         throw new Error('snapshotFromAction: the action added no element (a tool-arming command?)');
     }
-    normalizeToOrigin(records());
-    return makeTemplateSnapshot(Object.fromEntries(elements), name);
+    normalizeToOrigin(records);
+    return makeTemplateSnapshot(Object.fromEntries(records.map(record => [String(record['id']), record])), name);
+}
+/**
+ * The Y-carrying props, in the serialized form a snapshot holds them in.
+ *
+ * ponytail: the conversions are hard-coded (`text`, and a group's `children` /
+ * `title`) instead of asking each element class for its own `propsToY`.
+ * Ceiling: it covers every prop the framework actions pass today. Upgrade path:
+ * run the real `propsToY` once the element-ctor map is reachable without a live
+ * surface.
+ */
+function toSnapshotProps(record) {
+    const text = record['text'];
+    if (typeof text === 'string')
+        record['text'] = surfaceText(text);
+    else if (text instanceof Y.Text)
+        record['text'] = surfaceText(materialize(text));
+    if (record['type'] === 'group') {
+        const children = record['children'];
+        if (children && typeof children === 'object') {
+            record['children'] = surfaceYMap(Object.fromEntries(Object.keys(children).map(key => [key, true])));
+        }
+        const title = record['title'];
+        if (typeof title === 'string')
+            record['title'] = surfaceText(title);
+        else if (title instanceof Y.Text)
+            record['title'] = surfaceText(materialize(title));
+    }
 }
 /** The connector endpoints that carry a free position rather than an anchor. */
 function freeEndpoints(el) {

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/toolbar/template-type.d.ts

@@ -46,7 +46,7 @@ export type Template = {
      * Rebuild {@link content} in the inserting editor's language — the seeds a
      * template writes into the document (a component's name, a lane's title) go
      * through the translation seam at placement, like a creation action's
-     * (ADR 0016). Called once per insertion; without it `content` is inserted
+     * (ADR 0023). Called once per insertion; without it `content` is inserted
      * as is.
      *
      * With no `TranslationProvider` registered it must return exactly

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