@formicoidea/labre-core 0.39.3 → 0.41.0

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

@@ -2,7 +2,7 @@ import { EdgelessCRUDIdentifier } from '../../affine-block-surface/index.js';
 import { 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 { ToolbarModuleExtension, } from '../../affine-shared/services/index.js';
+import { 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,11 +15,18 @@ 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';
-/** Icon + label per text fit mode for the cycling toolbar button. */
+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';
+/** Icon + wording per text fit mode for the cycling toolbar button. */
 const TEXT_FIT_UI = {
-    [TextFitMode.Grow]: { icon: AutoHeightIcon(), label: 'Grow shape' },
-    [TextFitMode.Contained]: { icon: AutoSizeIcon(), label: 'Contained text' },
-    [TextFitMode.Overflow]: { icon: ScaleAltIcon(), label: 'Overflow text' },
+    [TextFitMode.Grow]: { icon: AutoHeightIcon(), wording: SHAPE_TEXT_FIT_GROW },
+    [TextFitMode.Contained]: {
+        icon: AutoSizeIcon(),
+        wording: SHAPE_TEXT_FIT_CONTAINED,
+    },
+    [TextFitMode.Overflow]: {
+        icon: ScaleAltIcon(),
+        wording: SHAPE_TEXT_FIT_OVERFLOW,
+    },
 };
 export const shapeToolbarConfig = {
     actions: [
@@ -52,8 +59,10 @@ export const shapeToolbarConfig = {
                 return renderMenu({
                     icon: ShapeIcon(),
                     label: 'Switch shape type',
+                    labelWording: SHAPE_SWITCH_TYPE_LABEL,
                     items: ShapeComponentConfig.map(item => ({
                         key: item.tooltip,
+                        keyWording: item.tooltipWording,
                         value: item.name,
                         icon: shapeStyle === ShapeStyle.General
                             ? item.generalIcon
@@ -62,6 +71,7 @@ export const shapeToolbarConfig = {
                     })),
                     currentValue: shapeName,
                     onPick,
+                    std: ctx.std,
                 });
             },
         },
@@ -85,9 +95,11 @@ export const shapeToolbarConfig = {
                 };
                 return renderMenu({
                     label: 'Style',
+                    labelWording: STYLE_MENU_LABEL,
                     items: LINE_STYLE_LIST,
                     currentValue: shapeStyle === ShapeStyle.Scribbled,
                     onPick,
+                    std: ctx.std,
                 });
             },
         },
@@ -203,6 +215,7 @@ export const shapeToolbarConfig = {
         {
             id: 'f.text',
             tooltip: 'Add text',
+            tooltipWording: SHAPE_ADD_TEXT_TOOLTIP,
             icon: AddTextIcon(),
             when(ctx) {
                 const models = ctx.getSurfaceModelsByType(ShapeElementModel);
@@ -221,6 +234,7 @@ export const shapeToolbarConfig = {
         {
             id: 'f1.edit-vertices',
             tooltip: 'Edit vertices',
+            tooltipWording: SHAPE_EDIT_VERTICES_TOOLTIP,
             icon: EditIcon(),
             when(ctx) {
                 const models = ctx.getSurfaceModelsByType(ShapeElementModel);
@@ -251,11 +265,18 @@ export const shapeToolbarConfig = {
                     return null;
                 const mode = getMostCommonValue(models, 'textFitMode') ?? TextFitMode.Grow;
                 const next = nextTextFitMode(mode);
-                const { icon, label } = TEXT_FIT_UI[mode];
+                const { icon, wording } = TEXT_FIT_UI[mode];
+                const label = translateKey(ctx.std, ...wording);
+                const nextLabel = translateKey(ctx.std, ...TEXT_FIT_UI[next].wording);
                 return html `
           <editor-icon-button
-            aria-label="Text fit: ${label}"
-            .tooltip=${`Text fit: ${label} — click for ${TEXT_FIT_UI[next].label}`}
+            aria-label="${translateKey(ctx.std, ...SHAPE_TEXT_FIT_ARIA, {
+                    label,
+                })}"
+            .tooltip=${translateKey(ctx.std, ...SHAPE_TEXT_FIT_TOOLTIP, {
+                    label,
+                    nextLabel,
+                })}
             @click=${() => applyTextFitMode(ctx.std, models, next)}
           >
             ${icon}

package/dist/_pkgs/affine-gfx-shape/toolbar/senior-tool.js

@@ -1,8 +1,10 @@
 import { SeniorToolExtension } from '../../affine-widget-edgeless-toolbar/index.js';
 import { html } from 'lit';
+import { SHAPE_TOOL_NAME } from '../translations.js';
 export const shapeSeniorTool = SeniorToolExtension('shape', ({ block, toolbarContainer }) => {
     return {
         name: 'Shape',
+        labelKey: SHAPE_TOOL_NAME[0],
         content: html `<edgeless-shape-tool-button
         .edgeless=${block}
         .toolbarContainer=${toolbarContainer}

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

@@ -1,10 +1,13 @@
 import type { ShapeToolOption } from '../index.js';
+import type { ChromeWording } from '../../affine-shared/services/index.js';
 import type { TemplateResult } from 'lit';
 type Config = {
     name: ShapeToolOption['shapeName'];
     generalIcon: TemplateResult<1>;
     scribbledIcon: TemplateResult<1>;
     tooltip: string;
+    /** {@link tooltip}, for the translation seam. */
+    tooltipWording: ChromeWording;
     disabled: boolean;
 };
 export declare const ShapeComponentConfig: Config[];

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

@@ -1,12 +1,14 @@
 import { ShapeType } from '../../affine-model/index.js';
 import { DiamondIcon, EllipseIcon, RoundedRectangleIcon, SquareIcon, TriangleIcon, } from '@blocksuite/icons/lit';
 import { GeneralPolygonIcon, ScribbledDiamondIcon, ScribbledEllipseIcon, ScribbledPolygonIcon, ScribbledRoundedRectangleIcon, ScribbledSquareIcon, ScribbledTriangleIcon, } from './icons.js';
+import { SHAPE_NAME_DIAMOND, SHAPE_NAME_ELLIPSE, SHAPE_NAME_POLYGON, SHAPE_NAME_ROUNDED_RECT, SHAPE_NAME_SQUARE, SHAPE_NAME_TRIANGLE, } from '../translations.js';
 export const ShapeComponentConfig = [
     {
         name: ShapeType.Rect,
         generalIcon: SquareIcon(),
         scribbledIcon: ScribbledSquareIcon,
         tooltip: 'Square',
+        tooltipWording: SHAPE_NAME_SQUARE,
         disabled: false,
     },
     {
@@ -14,6 +16,7 @@ export const ShapeComponentConfig = [
         generalIcon: EllipseIcon(),
         scribbledIcon: ScribbledEllipseIcon,
         tooltip: 'Ellipse',
+        tooltipWording: SHAPE_NAME_ELLIPSE,
         disabled: false,
     },
     {
@@ -21,6 +24,7 @@ export const ShapeComponentConfig = [
         generalIcon: DiamondIcon(),
         scribbledIcon: ScribbledDiamondIcon,
         tooltip: 'Diamond',
+        tooltipWording: SHAPE_NAME_DIAMOND,
         disabled: false,
     },
     {
@@ -28,6 +32,7 @@ export const ShapeComponentConfig = [
         generalIcon: TriangleIcon(),
         scribbledIcon: ScribbledTriangleIcon,
         tooltip: 'Triangle',
+        tooltipWording: SHAPE_NAME_TRIANGLE,
         disabled: false,
     },
     {
@@ -35,6 +40,7 @@ export const ShapeComponentConfig = [
         generalIcon: GeneralPolygonIcon,
         scribbledIcon: ScribbledPolygonIcon,
         tooltip: 'Polygon',
+        tooltipWording: SHAPE_NAME_POLYGON,
         disabled: false,
     },
     {
@@ -42,6 +48,7 @@ export const ShapeComponentConfig = [
         generalIcon: RoundedRectangleIcon(),
         scribbledIcon: ScribbledRoundedRectangleIcon,
         tooltip: 'Rounded rectangle',
+        tooltipWording: SHAPE_NAME_ROUNDED_RECT,
         disabled: false,
     },
 ];

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

@@ -0,0 +1,37 @@
+import { type ChromeWording } from '../affine-shared/services/index.js';
+/**
+ * The shape toolbar's own wordings. `STYLE_GENERAL` / `STYLE_SCRIBBLED` /
+ * `STYLE_MENU_LABEL` / `TOOL_NAME_SHAPE` are declared once in `chrome.ts`
+ * (shared with `widgets/edgeless-toolbar` and `gfx/mindmap`) and re-exported
+ * here under this package's own name, so a call site in this package can
+ * import everything it needs from one place.
+ */
+export declare const SHAPE_STYLE_GENERAL: ChromeWording;
+export declare const SHAPE_STYLE_SCRIBBLED: ChromeWording;
+export declare const SHAPE_STYLE_MENU_LABEL: ChromeWording;
+export declare const SHAPE_TOOL_NAME: ChromeWording;
+export declare const SHAPE_TEXT_FIT_GROW: ChromeWording;
+export declare const SHAPE_TEXT_FIT_CONTAINED: ChromeWording;
+export declare const SHAPE_TEXT_FIT_OVERFLOW: ChromeWording;
+/**
+ * The cycling button's aria-label and tooltip — interpolated with the
+ * already-resolved mode label(s) rather than split into per-word keys (the
+ * brief's "don't split a sentence" rule).
+ */
+export declare const SHAPE_TEXT_FIT_ARIA: ChromeWording;
+export declare const SHAPE_TEXT_FIT_TOOLTIP: ChromeWording;
+export declare const SHAPE_SWITCH_TYPE_LABEL: ChromeWording;
+export declare const SHAPE_ADD_TEXT_TOOLTIP: ChromeWording;
+export declare const SHAPE_EDIT_VERTICES_TOOLTIP: ChromeWording;
+export declare const SHAPE_NAME_SQUARE: ChromeWording;
+export declare const SHAPE_NAME_ELLIPSE: ChromeWording;
+export declare const SHAPE_NAME_DIAMOND: ChromeWording;
+export declare const SHAPE_NAME_TRIANGLE: ChromeWording;
+export declare const SHAPE_NAME_POLYGON: ChromeWording;
+export declare const SHAPE_NAME_ROUNDED_RECT: ChromeWording;
+/**
+ * Every wording this package DECLARES (not the re-exported chrome ones — they
+ * are `CHROME_WORDINGS` entries already, and listing them again here would
+ * offer a host the same key twice).
+ */
+export declare const SHAPE_WORDINGS: readonly ChromeWording[];

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

@@ -0,0 +1,93 @@
+import { ADD_TEXT_TOOLTIP, STYLE_GENERAL, STYLE_MENU_LABEL, STYLE_SCRIBBLED, TOOL_NAME_SHAPE, } from '../affine-shared/services/index.js';
+/**
+ * The shape toolbar's own wordings. `STYLE_GENERAL` / `STYLE_SCRIBBLED` /
+ * `STYLE_MENU_LABEL` / `TOOL_NAME_SHAPE` are declared once in `chrome.ts`
+ * (shared with `widgets/edgeless-toolbar` and `gfx/mindmap`) and re-exported
+ * here under this package's own name, so a call site in this package can
+ * import everything it needs from one place.
+ */
+export const SHAPE_STYLE_GENERAL = STYLE_GENERAL;
+export const SHAPE_STYLE_SCRIBBLED = STYLE_SCRIBBLED;
+export const SHAPE_STYLE_MENU_LABEL = STYLE_MENU_LABEL;
+export const SHAPE_TOOL_NAME = TOOL_NAME_SHAPE;
+/* ── Text-fit cycling button ───────────────────────────────────────────── */
+export const SHAPE_TEXT_FIT_GROW = [
+    'com.labre.shape.text-fit.grow',
+    'Grow shape',
+];
+export const SHAPE_TEXT_FIT_CONTAINED = [
+    'com.labre.shape.text-fit.contained',
+    'Contained text',
+];
+export const SHAPE_TEXT_FIT_OVERFLOW = [
+    'com.labre.shape.text-fit.overflow',
+    'Overflow text',
+];
+/**
+ * The cycling button's aria-label and tooltip — interpolated with the
+ * already-resolved mode label(s) rather than split into per-word keys (the
+ * brief's "don't split a sentence" rule).
+ */
+export const SHAPE_TEXT_FIT_ARIA = [
+    'com.labre.shape.text-fit.aria',
+    'Text fit: {{label}}',
+];
+export const SHAPE_TEXT_FIT_TOOLTIP = [
+    'com.labre.shape.text-fit.tooltip',
+    'Text fit: {{label}} — click for {{nextLabel}}',
+];
+/* ── Toolbar actions ────────────────────────────────────────────────────── */
+export const SHAPE_SWITCH_TYPE_LABEL = [
+    'com.labre.shape.toolbar.switch-type',
+    'Switch shape type',
+];
+export const SHAPE_ADD_TEXT_TOOLTIP = ADD_TEXT_TOOLTIP;
+export const SHAPE_EDIT_VERTICES_TOOLTIP = [
+    'com.labre.shape.toolbar.edit-vertices',
+    'Edit vertices',
+];
+/* ── Shape names (switch-type menu, drag basket) ───────────────────────── */
+export const SHAPE_NAME_SQUARE = [
+    'com.labre.shape.name.square',
+    'Square',
+];
+export const SHAPE_NAME_ELLIPSE = [
+    'com.labre.shape.name.ellipse',
+    'Ellipse',
+];
+export const SHAPE_NAME_DIAMOND = [
+    'com.labre.shape.name.diamond',
+    'Diamond',
+];
+export const SHAPE_NAME_TRIANGLE = [
+    'com.labre.shape.name.triangle',
+    'Triangle',
+];
+export const SHAPE_NAME_POLYGON = [
+    'com.labre.shape.name.polygon',
+    'Polygon',
+];
+export const SHAPE_NAME_ROUNDED_RECT = [
+    'com.labre.shape.name.rounded-rect',
+    'Rounded rectangle',
+];
+/**
+ * Every wording this package DECLARES (not the re-exported chrome ones — they
+ * are `CHROME_WORDINGS` entries already, and listing them again here would
+ * offer a host the same key twice).
+ */
+export const SHAPE_WORDINGS = [
+    SHAPE_TEXT_FIT_GROW,
+    SHAPE_TEXT_FIT_CONTAINED,
+    SHAPE_TEXT_FIT_OVERFLOW,
+    SHAPE_TEXT_FIT_ARIA,
+    SHAPE_TEXT_FIT_TOOLTIP,
+    SHAPE_SWITCH_TYPE_LABEL,
+    SHAPE_EDIT_VERTICES_TOOLTIP,
+    SHAPE_NAME_SQUARE,
+    SHAPE_NAME_ELLIPSE,
+    SHAPE_NAME_DIAMOND,
+    SHAPE_NAME_TRIANGLE,
+    SHAPE_NAME_POLYGON,
+    SHAPE_NAME_ROUNDED_RECT,
+];

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

@@ -1,18 +1,26 @@
 import { ConnectorMode, FontFamily, FontWeight, PointStyle, ShapeStyle, StrokeStyle, TextAlign, } from '../../affine-model/index.js';
+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';
 /**
  * The generic ("Other") diagrams: built ONLY from general BlockSuite shapes
  * (`shape` rect/polygon, `text`, `connector`) per the composition principle —
  * they belong to no framework, so they ship from the template package itself.
  */
-const DARK = '#262626';
-const MUTED = '#9aa0a6';
+/**
+ * Their neutrals are the shared notation scale's, like every framework's:
+ * the ink, the divider grey, the label grey and the card white. Only
+ * the hues (kanban cards, gantt bars) are the diagrams' own.
+ */
+const DARK = NOTATION_NEUTRALS.ink;
+const MUTED = NOTATION_NEUTRALS.divider;
 function rect(x, y, w, h, opts = {}) {
     const el = {
         type: 'shape',
         shapeType: opts.shapeType ?? 'rect',
         filled: true,
-        fillColor: opts.fill ?? '#ffffff',
+        fillColor: opts.fill ?? NOTATION_NEUTRALS.cardFill,
         strokeColor: opts.stroke ?? DARK,
         strokeWidth: opts.sw ?? 2,
         strokeStyle: opts.dash ? StrokeStyle.Dash : StrokeStyle.Solid,
@@ -36,7 +44,7 @@ function label(x, y, w, h, str, opts = {}) {
     return {
         type: 'text',
         text: surfaceText(str),
-        color: opts.color ?? '#1a1a1a',
+        color: opts.color ?? DARK,
         fontFamily: FontFamily.Inter,
         fontSize: opts.fontSize ?? 16,
         fontWeight: opts.weight ?? FontWeight.Regular,
@@ -57,42 +65,54 @@ function line(x1, y1, x2, y2, opts = {}) {
         target: { position: [x2, y2] },
     };
 }
+/** Resolve a wording through the host, or its English fallback with no host. */
+function tr(std, wording, params) {
+    return std
+        ? translateKey(std, ...wording, params)
+        : fillPlaceholders(wording[1], params);
+}
 // ── SWOT (window-mullion quadrant, black labels) ──────────────────────
-function swot() {
+function swot(std) {
     const M = { fontSize: 22, weight: FontWeight.Medium };
     return {
         box: rect(0, 0, 520, 340),
         v: line(260, 0, 260, 340),
         h: line(0, 170, 520, 170),
-        s: label(24, 24, 220, 30, 'Strengths', M),
-        w: label(284, 24, 220, 30, 'Weaknesses', M),
-        o: label(24, 194, 220, 30, 'Opportunities', M),
-        t: label(284, 194, 220, 30, 'Threats', M),
+        s: label(24, 24, 220, 30, tr(std, SWOT_SEED_STRENGTHS), M),
+        w: label(284, 24, 220, 30, tr(std, SWOT_SEED_WEAKNESSES), M),
+        o: label(24, 194, 220, 30, tr(std, SWOT_SEED_OPPORTUNITIES), M),
+        t: label(284, 194, 220, 30, tr(std, SWOT_SEED_THREATS), M),
     };
 }
 // ── Kanban (To do / Doing / Done) ─────────────────────────────────────
-function kanban() {
-    const colOpts = { fill: '#f4f4f5', stroke: MUTED, sw: 1.5, radius: 10 };
+function kanban(std) {
+    const colOpts = {
+        fill: NOTATION_NEUTRALS.cardFill,
+        stroke: MUTED,
+        sw: 1.5,
+        radius: 10,
+    };
     const head = {
         fontSize: 18,
         weight: FontWeight.Medium,
         align: TextAlign.Center,
     };
+    const cardText = tr(std, KANBAN_SEED_CARD);
     const card = (x, y, fill, stroke) => rect(x, y, 188, 60, {
         fill,
         stroke,
         sw: 1.5,
         radius: 8,
-        text: 'Card',
+        text: cardText,
         fontSize: 14,
     });
     return {
         c1: rect(0, 0, 220, 420, colOpts),
         c2: rect(244, 0, 220, 420, colOpts),
         c3: rect(488, 0, 220, 420, colOpts),
-        h1: label(0, 16, 220, 24, 'To do', head),
-        h2: label(244, 16, 220, 24, 'Doing', head),
-        h3: label(488, 16, 220, 24, 'Done', head),
+        h1: label(0, 16, 220, 24, tr(std, KANBAN_SEED_TODO), head),
+        h2: label(244, 16, 220, 24, tr(std, KANBAN_SEED_DOING), head),
+        h3: label(488, 16, 220, 24, tr(std, KANBAN_SEED_DONE), head),
         a1: card(16, 56, '#fde6c8', '#e0a23a'),
         a2: card(16, 128, '#fde6c8', '#e0a23a'),
         b1: card(260, 56, '#d6e4fb', '#4574c4'),
@@ -101,7 +121,7 @@ function kanban() {
     };
 }
 // ── Business Model Canvas (Strategyzer 9-block layout) ────────────────
-function bmc() {
+function bmc(std) {
     const blk = { stroke: DARK, sw: 1.5 };
     const t = (x, y, s) => label(x + 12, y + 12, 180, 22, s, {
         fontSize: 14,
@@ -109,14 +129,17 @@ function bmc() {
     });
     const hdr = (x, s) => ({
         box: rect(x, 8, 128, 34, { stroke: MUTED, sw: 1 }),
-        txt: label(x + 8, 16, 120, 18, s, { fontSize: 11, color: '#5f6368' }),
+        txt: label(x + 8, 16, 120, 18, s, {
+            fontSize: 11,
+            color: NOTATION_NEUTRALS.label,
+        }),
     });
-    const h1 = hdr(470, 'Designed for');
-    const h2 = hdr(602, 'Designed by');
-    const h3 = hdr(734, 'Date');
-    const h4 = hdr(866, 'Version');
+    const h1 = hdr(470, tr(std, BMC_SEED_DESIGNED_FOR));
+    const h2 = hdr(602, tr(std, BMC_SEED_DESIGNED_BY));
+    const h3 = hdr(734, tr(std, BMC_SEED_DATE));
+    const h4 = hdr(866, tr(std, BMC_SEED_VERSION));
     return {
-        title: label(0, 8, 440, 32, 'Business model canvas', {
+        title: label(0, 8, 440, 32, tr(std, BMC_SEED_TITLE), {
             fontSize: 24,
             weight: FontWeight.Medium,
         }),
@@ -137,31 +160,37 @@ function bmc() {
         cs: rect(800, 56, 196, 300, blk),
         cost: rect(0, 360, 496, 84, blk),
         rev: rect(500, 360, 496, 84, blk),
-        tkp: t(0, 56, 'Key partnerships'),
-        tka: t(200, 56, 'Key activities'),
-        tkr: t(200, 206, 'Key resources'),
-        tvp: t(400, 56, 'Value propositions'),
-        tcr: t(600, 56, 'Customer relationships'),
-        tch: t(600, 206, 'Channels'),
-        tcs: t(800, 56, 'Customer segments'),
-        tcost: t(0, 360, 'Cost structure'),
-        trev: t(500, 360, 'Revenue streams'),
+        tkp: t(0, 56, tr(std, BMC_SEED_KEY_PARTNERSHIPS)),
+        tka: t(200, 56, tr(std, BMC_SEED_KEY_ACTIVITIES)),
+        tkr: t(200, 206, tr(std, BMC_SEED_KEY_RESOURCES)),
+        tvp: t(400, 56, tr(std, BMC_SEED_VALUE_PROPOSITIONS)),
+        tcr: t(600, 56, tr(std, BMC_SEED_CUSTOMER_RELATIONSHIPS)),
+        tch: t(600, 206, tr(std, BMC_SEED_CHANNELS)),
+        tcs: t(800, 56, tr(std, BMC_SEED_CUSTOMER_SEGMENTS)),
+        tcost: t(0, 360, tr(std, BMC_SEED_COST_STRUCTURE)),
+        trev: t(500, 360, tr(std, BMC_SEED_REVENUE_STREAMS)),
     };
 }
 // ── Fishbone / Ishikawa (spine + arrowhead bones + CATEGORY/ITEM) ─────
-function fishbone() {
-    const cat = (x, y) => rect(x, y, 150, 44, { text: 'CATEGORY', fontSize: 13 });
+function fishbone(std) {
+    const categoryText = tr(std, FISHBONE_SEED_CATEGORY);
+    const item1Text = tr(std, FISHBONE_SEED_ITEM_1);
+    const item2Text = tr(std, FISHBONE_SEED_ITEM_2);
+    const cat = (x, y) => rect(x, y, 150, 44, { text: categoryText, fontSize: 13 });
     const item = (x, y, n) => rect(x, y, 130, 40, {
         stroke: MUTED,
         sw: 1.4,
         dash: true,
         text: n,
-        textColor: '#5f6368',
+        textColor: NOTATION_NEUTRALS.label,
         fontSize: 13,
     });
     const out = {
         spine: line(80, 360, 1120, 360, { sw: 6 }),
-        head: rect(1124, 332, 130, 56, { text: 'Effect', fontSize: 16 }),
+        head: rect(1124, 332, 130, 56, {
+            text: tr(std, FISHBONE_SEED_EFFECT),
+            fontSize: 16,
+        }),
     };
     // two rib-groups (junctions at x = 360 and 760)
     [360, 760].forEach((jx, g) => {
@@ -170,16 +199,21 @@ function fishbone() {
         out[`lb${g}`] = line(ox + 200, 470, jx, 362, { sw: 3, arrow: true });
         out[`uc${g}`] = cat(ox + 150, 224);
         out[`lc${g}`] = cat(ox + 150, 452);
-        out[`ui1${g}`] = item(ox + 130, 286, 'ITEM 1');
-        out[`ui2${g}`] = item(ox + 170, 326, 'ITEM 2');
-        out[`li1${g}`] = item(ox + 130, 396, 'ITEM 1');
-        out[`li2${g}`] = item(ox + 170, 356, 'ITEM 2');
+        out[`ui1${g}`] = item(ox + 130, 286, item1Text);
+        out[`ui2${g}`] = item(ox + 170, 326, item2Text);
+        out[`li1${g}`] = item(ox + 130, 396, item1Text);
+        out[`li2${g}`] = item(ox + 170, 356, item2Text);
     });
     return out;
 }
 // ── Gantt chart ───────────────────────────────────────────────────────
-function gantt() {
-    const rows = ['Discovery', 'Design', 'Build', 'Launch'];
+function gantt(std) {
+    const rows = [
+        tr(std, GANTT_SEED_DISCOVERY),
+        tr(std, GANTT_SEED_DESIGN),
+        tr(std, GANTT_SEED_BUILD),
+        tr(std, GANTT_SEED_LAUNCH),
+    ];
     const bars = [
         [220, 280, '#4574c4'],
         [340, 360, '#2f9e95'],
@@ -190,10 +224,13 @@ function gantt() {
     // week gridlines + labels
     for (let i = 0; i < 6; i++) {
         const x = 220 + i * 130;
-        out[`g${i}`] = line(x, 40, x, 268, { stroke: '#e0e0e0', sw: 1 });
-        out[`w${i}`] = label(x - 16, 12, 40, 20, `W${i + 1}`, {
+        out[`g${i}`] = line(x, 40, x, 268, {
+            stroke: NOTATION_NEUTRALS.cardBorder,
+            sw: 1,
+        });
+        out[`w${i}`] = label(x - 16, 12, 40, 20, tr(std, GANTT_SEED_WEEK, { n: i + 1 }), {
             fontSize: 12,
-            color: '#5f6368',
+            color: NOTATION_NEUTRALS.label,
             align: TextAlign.Center,
         });
     }
@@ -212,27 +249,35 @@ function gantt() {
 }
 const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
 const previews = {
-    swot: `<svg ${ATTRS} fill="none"><rect x="20" y="12" width="95" height="56" stroke="#262626" stroke-width="2"/><path d="M67.5 12 V68 M20 40 H115" stroke="#262626" stroke-width="1.6"/></svg>`,
-    kanban: `<svg ${ATTRS} fill="none"><rect x="10" y="12" width="35" height="56" rx="4" stroke="#9aa0a6"/><rect x="50" y="12" width="35" height="56" rx="4" stroke="#9aa0a6"/><rect x="90" y="12" width="35" height="56" rx="4" stroke="#9aa0a6"/><rect x="15" y="22" width="25" height="11" rx="2" fill="#fde6c8"/><rect x="55" y="22" width="25" height="11" rx="2" fill="#d6e4fb"/><rect x="95" y="22" width="25" height="11" rx="2" fill="#d5efd9"/></svg>`,
-    bmc: `<svg ${ATTRS} fill="none"><g stroke="#262626" stroke-width="1.2"><rect x="8" y="14" width="22" height="40"/><rect x="32" y="14" width="22" height="20"/><rect x="32" y="35" width="22" height="19"/><rect x="56" y="14" width="22" height="40"/><rect x="80" y="14" width="22" height="20"/><rect x="80" y="35" width="22" height="19"/><rect x="104" y="14" width="22" height="40"/><rect x="8" y="56" width="57" height="14"/><rect x="68" y="56" width="58" height="14"/></g></svg>`,
-    fishbone: `<svg ${ATTRS} fill="none"><path d="M14 40 H112" stroke="#262626" stroke-width="3"/><rect x="112" y="33" width="20" height="14" stroke="#262626" stroke-width="1.4"/><path d="M40 18 L52 40 M40 62 L52 40 M84 18 L96 40 M84 62 L96 40" stroke="#262626" stroke-width="1.4"/></svg>`,
-    gantt: `<svg ${ATTRS} fill="none"><path d="M40 14 V70 M62 14 V70 M84 14 V70 M106 14 V70" stroke="#e0e0e0"/><rect x="40" y="22" width="34" height="8" rx="2" fill="#4574c4"/><rect x="52" y="36" width="44" height="8" rx="2" fill="#2f9e95"/><rect x="62" y="50" width="50" height="8" rx="2" fill="#d99a2b"/><rect x="84" y="64" width="28" height="8" rx="2" fill="#43a06b"/></svg>`,
+    swot: `<svg ${ATTRS} fill="none"><rect x="20" y="12" width="95" height="56" stroke="${DARK}" stroke-width="2"/><path d="M67.5 12 V68 M20 40 H115" stroke="${DARK}" stroke-width="1.6"/></svg>`,
+    kanban: `<svg ${ATTRS} fill="none"><rect x="10" y="12" width="35" height="56" rx="4" stroke="${MUTED}"/><rect x="50" y="12" width="35" height="56" rx="4" stroke="${MUTED}"/><rect x="90" y="12" width="35" height="56" rx="4" stroke="${MUTED}"/><rect x="15" y="22" width="25" height="11" rx="2" fill="#fde6c8"/><rect x="55" y="22" width="25" height="11" rx="2" fill="#d6e4fb"/><rect x="95" y="22" width="25" height="11" rx="2" fill="#d5efd9"/></svg>`,
+    bmc: `<svg ${ATTRS} fill="none"><g stroke="${DARK}" stroke-width="1.2"><rect x="8" y="14" width="22" height="40"/><rect x="32" y="14" width="22" height="20"/><rect x="32" y="35" width="22" height="19"/><rect x="56" y="14" width="22" height="40"/><rect x="80" y="14" width="22" height="20"/><rect x="80" y="35" width="22" height="19"/><rect x="104" y="14" width="22" height="40"/><rect x="8" y="56" width="57" height="14"/><rect x="68" y="56" width="58" height="14"/></g></svg>`,
+    fishbone: `<svg ${ATTRS} fill="none"><path d="M14 40 H112" stroke="${DARK}" stroke-width="3"/><rect x="112" y="33" width="20" height="14" stroke="${DARK}" stroke-width="1.4"/><path d="M40 18 L52 40 M40 62 L52 40 M84 18 L96 40 M84 62 L96 40" stroke="${DARK}" stroke-width="1.4"/></svg>`,
+    gantt: `<svg ${ATTRS} fill="none"><path d="M40 14 V70 M62 14 V70 M84 14 V70 M106 14 V70" stroke="${NOTATION_NEUTRALS.cardBorder}"/><rect x="40" y="22" width="34" height="8" rx="2" fill="#4574c4"/><rect x="52" y="36" width="44" height="8" rx="2" fill="#2f9e95"/><rect x="62" y="50" width="50" height="8" rx="2" fill="#d99a2b"/><rect x="84" y="64" width="28" height="8" rx="2" fill="#43a06b"/></svg>`,
 };
-function t(name, preview, elements) {
+/**
+ * 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`
+ * rebuilds the same snapshot with translated seeds.
+ */
+function t(name, preview, build) {
     return {
         name,
         type: 'template',
         preview,
-        content: makeTemplateSnapshot(elements, name),
+        content: makeTemplateSnapshot(build(), name),
+        localize: std => makeTemplateSnapshot(build(std), name),
     };
 }
 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('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),
     ],
 };

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

@@ -1,5 +1,6 @@
 import { createIdentifier } from '../global/di/index.js';
 import { builtInTemplates } from './toolbar/builtin-templates.js';
+import { resolveTemplateName } from './toolbar/resolve-name.js';
 /**
  * A framework registers its Templates-panel categories here; the panel reads
  * them back from the std of the edgeless it opens on. One identifier per
@@ -55,6 +56,7 @@ export function templateManagerFor(std) {
                 ...contributed.map(c => c.name),
             ]),
         ],
+        categoryLabel: name => byName(name)?.nameKey ?? builtInTemplates.categoryLabel(name),
         // Both halves, so a host's `extend(...)` can still append to a framework's
         // own category (the global half answers `[]` for a name it does not know).
         list: async (name) => {
@@ -67,9 +69,14 @@ export function templateManagerFor(std) {
         search: async (keyword, name) => {
             const k = keyword.trim().toLocaleLowerCase();
             const pool = name ? [byName(name)].filter(c => !!c) : contributed;
+            // Matches the ENGLISH name (`templateFromCommand`'s baked-in `name`,
+            // still what a catalogue-less playground shows) or the host's own
+            // translation of it (`resolveTemplateName`, through the command's
+            // `labelKey`) — a search box must not go blind on a translated tile.
             const own = (await Promise.all(pool.map(loadCategory)))
                 .flat()
-                .filter(t => t.name?.toLocaleLowerCase().includes(k));
+                .filter(t => t.name?.toLocaleLowerCase().includes(k) ||
+                resolveTemplateName(std, t).toLocaleLowerCase().includes(k));
             return [...(await builtInTemplates.search(keyword, name)), ...own];
         },
     };

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

@@ -3,6 +3,8 @@ export * from './make-snapshot.js';
 export * from './services/template.js';
 export * from './snapshot-from-action.js';
 export * from './template-tool.js';
+export * from './toolbar/resolve-name.js';
 export * from './toolbar/senior-tool.js';
 export * from './toolbar/template-panel.js';
 export * from './toolbar/template-type.js';
+export * from './translations.js';

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

@@ -3,6 +3,8 @@ export * from './make-snapshot.js';
 export * from './services/template.js';
 export * from './snapshot-from-action.js';
 export * from './template-tool.js';
+export * from './toolbar/resolve-name.js';
 export * from './toolbar/senior-tool.js';
 export * from './toolbar/template-panel.js';
 export * from './toolbar/template-type.js';
+export * from './translations.js';