@formicoidea/labre-core 0.40.0 → 0.42.0

package/dist/_pkgs/affine-widget-edgeless-toolbar/placement/artefact-placement-tool.js

@@ -0,0 +1,274 @@
+import { DefaultTool, EXCLUDING_MOUSE_OUT_CLASS_LIST, recordAction, sortIndex, } from '../../affine-block-surface/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
+import { hasClassNameInList } from '../../affine-shared/utils/index.js';
+import { Bound } from '../../global/gfx/index.js';
+import { runCommand, } from '../../std/index.js';
+import { BaseTool, GfxGroupLikeElementModel, } from '../../std/gfx/index.js';
+import { seniorMenuSelection } from '../menu/senior-menu-selection.js';
+import { ArtefactGhostOverlay } from './artefact-ghost-overlay.js';
+import { collectCreated, translateCreated } from './translate-created.js';
+/** The ghost of an artefact nobody could measure. */
+const FALLBACK_FOOTPRINT = new Bound(-60, -30, 120, 60);
+/**
+ * ONE tool for every framework's artefacts: pick one from a senior menu and it
+ * is not created, it is ARMED — a ghost follows the cursor and the click says
+ * where (PO decision, 2026-09-16).
+ *
+ * The shape tool has always worked this way, and a framework artefact is a
+ * shape the framework named. Before this, an artefact landed at the viewport
+ * centre whatever the author was looking at, and putting it where they meant it
+ * to go was a second gesture with a mouse held down.
+ *
+ * It is generic on purpose. Nothing here knows what a Wardley component or a
+ * BPMN gateway is: the armed {@link CommandDescriptor} carries its own label,
+ * its own creation body and its own telemetry, and the footprint is MEASURED by
+ * running that body against the recording fake (`recordAction`) rather than
+ * declared a second time. A ninth framework arms this tool by existing.
+ *
+ * What it deliberately does not do:
+ *
+ * - **Telemetry.** Arming and cycling emit nothing and record no usage, exactly
+ *   as choosing a shape variant does. The one emission still happens where it
+ *   always did — inside {@link runCommand}, at placement — so the numbers a
+ *   framework already reports are unchanged, and a user who arms an artefact
+ *   and changes their mind has not "used" it.
+ * - **Drag to size.** A framework artefact has a size its framework chose; the
+ *   click places that size. Out of scope, deliberately.
+ */
+export class ArtefactPlacementTool extends BaseTool {
+    constructor() {
+        super(...arguments);
+        this._ghost = null;
+    }
+    static { this.toolName = 'artefact-placement'; }
+    get _surfaceComponent() {
+        return this.gfx.surfaceComponent;
+    }
+    activate() {
+        this.createOverlay();
+    }
+    deactivate() {
+        this.clearOverlay();
+    }
+    clearOverlay() {
+        if (!this._ghost)
+            return;
+        this._ghost.dispose();
+        this._surfaceComponent?.renderer.removeOverlay(this._ghost);
+        this._ghost = null;
+        this._surfaceComponent?.renderer.refresh();
+    }
+    /**
+     * Record the armed command once, and hang its ghost off the cursor.
+     *
+     * Once per arming and per cycle, never per pointer move: the recording runs
+     * the command's whole creation body against a fake and the preview builds a
+     * model per element, which is cheap but not free — and neither can change
+     * between two mouse positions.
+     *
+     * An artefact made of connectors only gets no ghost at all: a connector is
+     * not previewed (PO decision, 2026-09-16), and the crosshair alone says the
+     * next click places something.
+     */
+    createOverlay() {
+        this.clearOverlay();
+        const { command } = this.activatedOption;
+        if (!command)
+            return;
+        const preview = previewOf(this.gfx, command);
+        if (!preview)
+            return;
+        this._ghost = new ArtefactGhostOverlay(this.gfx, preview.bound, translateKey(this.std, command.labelKey, command.labelFallback), preview.models);
+        this._surfaceComponent?.renderer.addOverlay(this._ghost);
+    }
+    /**
+     * Place the artefact under the cursor.
+     *
+     * The command is not asked WHERE to create — every one of them creates around
+     * the viewport centre, and teaching eight frameworks' worth of actions to take
+     * a point would be the per-framework code this tool exists to avoid. So the
+     * command runs as it always has, and what it created is moved by the offset
+     * between the centre it aimed at and the point the user clicked. That offset
+     * is read BEFORE the run, because a command may move the viewport.
+     */
+    click(e) {
+        const { command } = this.activatedOption;
+        this.clearOverlay();
+        if (!command)
+            return;
+        const { viewport } = this.gfx;
+        const [x, y] = viewport.toModelCoord(e.point.x, e.point.y);
+        const dx = x - viewport.centerX;
+        const dy = y - viewport.centerY;
+        this.doc.captureSync();
+        // THE bottleneck, not a shortcut past it: the placement is an invocation
+        // like any other, so `FrameworkElementAdded` and the usage measure are
+        // emitted exactly where they were before the tool existed.
+        const created = collectCreated(this.gfx, () => {
+            runCommand(this.std, command, {
+                surface: 'senior-menu',
+                source: 'toolbar:general',
+            });
+        });
+        const placed = translateCreated(this.gfx, created, dx, dy);
+        // `setTool` clears the selection, so the selection goes after it.
+        this.gfx.tool.setTool(DefaultTool);
+        if (placed.length) {
+            this.gfx.selection.set({ elements: placed, editing: false });
+        }
+    }
+    pointerMove(e) {
+        if (!this._ghost)
+            return;
+        if (this._ghost.globalAlpha === 0)
+            this._ghost.globalAlpha = 1;
+        const [x, y] = this.gfx.viewport.toModelCoord(e.x, e.y);
+        this._ghost.x = x;
+        this._ghost.y = y;
+        this._surfaceComponent?.refresh();
+    }
+    pointerOut(e) {
+        if (e.raw.relatedTarget &&
+            hasClassNameInList(e.raw.relatedTarget, EXCLUDING_MOUSE_OUT_CLASS_LIST))
+            return;
+        if (!this._ghost)
+            return;
+        this._ghost.globalAlpha = 0;
+        this._surfaceComponent?.refresh();
+    }
+    /** A framework artefact keeps the size its framework chose; a drag is a click. */
+    dragStart(_e) { }
+    dragMove(_e) { }
+    dragEnd(_e) { }
+}
+/**
+ * What the command would draw, recorded and BUILT by running it against
+ * nothing: its footprint, and a detached model per drawable element, in paint
+ * order. `null` when there is nothing to show but the crosshair.
+ *
+ * The recording's viewport centre is the origin, so every recorded box is
+ * already the offset around a real centre — and therefore around the cursor.
+ * The records go to `createDetachedElement` as they were handed to the CRUD,
+ * so a seed string becomes its `Y.Text` through the element's own `propsToY`,
+ * exactly as it will at insertion; the host's `TranslationProvider` makes the
+ * seeds come out in the author's language, as they will once placed.
+ *
+ * Skipped: connectors (never previewed) and group-likes, whose renderers draw
+ * selection chrome and look their children up in the document — the children
+ * are drawn on their own. A record the surface cannot build is skipped too.
+ *
+ * A command the fake cannot serve throws by design (it answers only the
+ * members creation actions touch); that is not an error worth a console line
+ * here, it just means the ghost falls back to a plain box rather than the tool
+ * refusing to arm. So does a recording in which nothing could be built.
+ */
+function previewOf(gfx, command) {
+    let recorded;
+    try {
+        recorded = recordAction((std) => {
+            // An async body records nothing it does after its first `await`, and
+            // then fails on the fake: that late failure is the same "cannot
+            // preview", not an unhandled rejection in the console.
+            Promise.resolve(command.run(std, { surface: 'senior-menu', source: 'internal' })).catch(() => { });
+        }, { host: gfx.std });
+    }
+    catch {
+        return { bound: FALLBACK_FOOTPRINT, models: [] };
+    }
+    const { records } = recorded;
+    if (records.length > 0 && records.every(r => r['type'] === 'connector')) {
+        return null;
+    }
+    // Paint order as the surface derives it: a group's children sort under the
+    // group's own index, even though the group itself is not drawn.
+    const groupIndexMap = new Map();
+    for (const record of records) {
+        const children = record['children'];
+        if (record['type'] !== 'group' || typeof children !== 'object')
+            continue;
+        const group = { id: String(record['id']), index: String(record['index']) };
+        for (const childId of Object.keys(children ?? {})) {
+            groupIndexMap.set(childId, group);
+        }
+    }
+    const ordered = records
+        .map(record => ({
+        record,
+        id: String(record['id']),
+        index: String(record['index']),
+    }))
+        .sort((a, b) => sortIndex(a, b, groupIndexMap));
+    const { surface } = gfx;
+    const models = [];
+    for (const { record, id } of ordered) {
+        const type = String(record['type']);
+        const Ctor = surface?.getConstructor(type);
+        if (!surface ||
+            !Ctor ||
+            type === 'connector' ||
+            Ctor.prototype instanceof GfxGroupLikeElementModel) {
+            continue;
+        }
+        try {
+            models.push(surface.createDetachedElement({ ...record, type, id }));
+        }
+        catch {
+            // Unbuildable here means unpaintable here; the rest still draws.
+        }
+    }
+    return { bound: recorded.bound ?? FALLBACK_FOOTPRINT, models };
+}
+/** The armed artefact, or `null` when the editor is on any other tool. */
+export function armedArtefact(gfx) {
+    const { toolType, options } = gfx.tool.currentToolOption$.value ?? {};
+    if (toolType?.toolName !== ArtefactPlacementTool.toolName)
+        return null;
+    const armed = options;
+    return armed?.command ? armed : null;
+}
+/** Arm `command`; the ghost appears with the next pointer move. */
+export function armArtefact(gfx, owner, command) {
+    gfx.tool.setTool(ArtefactPlacementTool, { owner, command });
+}
+/**
+ * The artefacts of one owner, in the order its senior menu shows them.
+ *
+ * The MENU's row and not the whole catalogue: cycling is a keyboard walk along
+ * a row of buttons the user is looking at, and a Shift+S that stepped onto an
+ * artefact filed away in the sidepanel would move the ghost with nothing on
+ * screen to explain it. An owner past the fourteen-slot cap therefore cycles
+ * through its thirteen ranked artefacts; the rest stay one catalogue away.
+ *
+ * `kind` is what decides, not the owner: an entry of kind `'tool'` — a link
+ * tool, the evolution arrow, the Wardley area polygon — arms a gesture of its
+ * own and has no footprint to ghost, so it is never armed here and never
+ * stepped onto.
+ */
+export function artefactCommandsFor(std, owner) {
+    return seniorMenuSelection(std, owner).commands.filter(command => command.kind === 'artefact');
+}
+/**
+ * Arm the artefact `dir` steps along the owner's row, wrapping at both ends.
+ * Returns false when nothing is armed, so a caller can fall through to whatever
+ * the keystroke means otherwise.
+ *
+ * An artefact armed from the catalogue is not in the row: a backwards step then
+ * enters on the row's last entry, a forwards one on its first — the same "enter
+ * from nothing" the open menu's highlight gives.
+ */
+export function cycleArmedArtefact(gfx, dir) {
+    const armed = armedArtefact(gfx);
+    if (!armed)
+        return false;
+    const commands = artefactCommandsFor(gfx.std, armed.owner);
+    if (commands.length === 0)
+        return false;
+    const current = commands.findIndex(command => command.id === armed.command.id);
+    const next = current < 0
+        ? dir === 1
+            ? 0
+            : commands.length - 1
+        : (current + dir + commands.length) % commands.length;
+    armArtefact(gfx, armed.owner, commands[next]);
+    return true;
+}

package/dist/_pkgs/affine-widget-edgeless-toolbar/placement/index.d.ts

@@ -0,0 +1,3 @@
+export * from './artefact-ghost-overlay.js';
+export * from './artefact-placement-tool.js';
+export * from './translate-created.js';

package/dist/_pkgs/affine-widget-edgeless-toolbar/placement/index.js

@@ -0,0 +1,3 @@
+export * from './artefact-ghost-overlay.js';
+export * from './artefact-placement-tool.js';
+export * from './translate-created.js';

package/dist/_pkgs/affine-widget-edgeless-toolbar/placement/translate-created.d.ts

@@ -0,0 +1,25 @@
+import type { GfxController } from '../../std/gfx/index.js';
+/**
+ * Run `body` and report the ids of everything it put on the board — canvas
+ * elements and canvas blocks alike.
+ *
+ * Both subscriptions are synchronous: a Yjs observer fires when the transaction
+ * commits, inside the `addElement` / `addBlock` call, so an action that creates
+ * on the spot is fully accounted for by the time `body` returns. An action that
+ * creates from a promise is NOT, and its artefact is left where the command put
+ * it — which is today's behaviour for every command, so nothing regresses.
+ */
+export declare function collectCreated(gfx: GfxController, body: () => void): string[];
+/**
+ * Move a freshly created drawing by `(dx, dy)`, and report what is left to
+ * select.
+ *
+ * Only the TOP-LEVEL items move. An element the same run filed inside a group
+ * it also created is carried by that group, and moving it twice would tear the
+ * drawing apart. A group is moved through its children — `GfxGroupLikeElement`'s
+ * `xywh` setter is a deliberate no-op, its box being derived from what it holds
+ * — which is exactly what {@link updateXYWH} does, along with a connector's free
+ * endpoints (an anchored one simply follows what it is tied to) and a note's
+ * collapsed height. Hence no second opinion here.
+ */
+export declare function translateCreated(gfx: GfxController, ids: string[], dx: number, dy: number): string[];

package/dist/_pkgs/affine-widget-edgeless-toolbar/placement/translate-created.js

@@ -0,0 +1,67 @@
+import { EdgelessCRUDIdentifier, updateXYWH, } from '../../affine-block-surface/index.js';
+import { Bound } from '../../global/gfx/index.js';
+/**
+ * Run `body` and report the ids of everything it put on the board — canvas
+ * elements and canvas blocks alike.
+ *
+ * Both subscriptions are synchronous: a Yjs observer fires when the transaction
+ * commits, inside the `addElement` / `addBlock` call, so an action that creates
+ * on the spot is fully accounted for by the time `body` returns. An action that
+ * creates from a promise is NOT, and its artefact is left where the command put
+ * it — which is today's behaviour for every command, so nothing regresses.
+ */
+export function collectCreated(gfx, body) {
+    const ids = [];
+    const subscriptions = [
+        gfx.surface?.elementAdded.subscribe(({ id }) => {
+            ids.push(id);
+        }),
+        gfx.std.store.slots.blockUpdated.subscribe(payload => {
+            if (payload.type === 'add')
+                ids.push(payload.id);
+        }),
+    ];
+    try {
+        body();
+    }
+    finally {
+        subscriptions.forEach(subscription => subscription?.unsubscribe());
+    }
+    return ids;
+}
+/**
+ * Move a freshly created drawing by `(dx, dy)`, and report what is left to
+ * select.
+ *
+ * Only the TOP-LEVEL items move. An element the same run filed inside a group
+ * it also created is carried by that group, and moving it twice would tear the
+ * drawing apart. A group is moved through its children — `GfxGroupLikeElement`'s
+ * `xywh` setter is a deliberate no-op, its box being derived from what it holds
+ * — which is exactly what {@link updateXYWH} does, along with a connector's free
+ * endpoints (an anchored one simply follows what it is tied to) and a note's
+ * collapsed height. Hence no second opinion here.
+ */
+export function translateCreated(gfx, ids, dx, dy) {
+    const created = new Set(ids);
+    const models = ids
+        .map(id => gfx.getElementById(id))
+        .filter((model) => !!model && 'xywh' in model);
+    const top = models.filter(model => !model.group || !created.has(model.group.id));
+    if (dx !== 0 || dy !== 0) {
+        const updateElement = gfx.std.get(EdgelessCRUDIdentifier).updateElement;
+        // Wrapped, not handed over: `Store.updateBlock` is a prototype method that
+        // reads `this.readonly` and `this._crud`. `updateXYWH` happens to re-bind it
+        // (`updateBlock.call(ele.store, …)`), so today nothing breaks — but an
+        // unbound method sitting in a variable is a landmine that reads correct, and
+        // the day that `.call` becomes a plain call the first canvas block placed
+        // would throw on `readonly` of undefined.
+        const updateBlock = (model, props) => gfx.std.store.updateBlock(model, props);
+        for (const model of top) {
+            const bound = Bound.deserialize(model.xywh);
+            bound.x += dx;
+            bound.y += dy;
+            updateXYWH(model, bound, updateElement, updateBlock);
+        }
+    }
+    return top.map(model => model.id);
+}

package/dist/_pkgs/affine-widget-edgeless-toolbar/translations.d.ts

@@ -0,0 +1,15 @@
+import { type ChromeWording } from '../affine-shared/services/index.js';
+/**
+ * The generic edgeless toolbar's own wordings — not a specific tool's, the
+ * toolbar chrome itself. `STYLE_GENERAL`/`STYLE_SCRIBBLED` (`config/consts.ts`'s
+ * `LINE_STYLE_LIST`) and `FONT_WEIGHT_*`/`FONT_STYLE_ITALIC`
+ * (`panel/font-weight-and-style-panel.ts`) are declared once in `chrome.ts`
+ * (shared with `gfx/shape` and `gfx/text`) and imported directly there rather
+ * than re-declared here. `EDGELESS_TOOLBAR_COMING_SOON` (L7 dedupe: the same
+ * word as `@labre/affine-components`'s own icon-button placeholder) aliases
+ * `ICON_BUTTON_COMING_SOON` for the same reason.
+ */
+export declare const EDGELESS_TOOLBAR_COMING_SOON: ChromeWording;
+export declare const EDGELESS_TOOLBAR_MORE_TOOLS: ChromeWording;
+/** Every wording this package declares, in the order it renders them. */
+export declare const EDGELESS_TOOLBAR_WORDINGS: readonly ChromeWording[];

package/dist/_pkgs/affine-widget-edgeless-toolbar/translations.js

@@ -0,0 +1,20 @@
+import { ICON_BUTTON_COMING_SOON, } from '../affine-shared/services/index.js';
+/**
+ * The generic edgeless toolbar's own wordings — not a specific tool's, the
+ * toolbar chrome itself. `STYLE_GENERAL`/`STYLE_SCRIBBLED` (`config/consts.ts`'s
+ * `LINE_STYLE_LIST`) and `FONT_WEIGHT_*`/`FONT_STYLE_ITALIC`
+ * (`panel/font-weight-and-style-panel.ts`) are declared once in `chrome.ts`
+ * (shared with `gfx/shape` and `gfx/text`) and imported directly there rather
+ * than re-declared here. `EDGELESS_TOOLBAR_COMING_SOON` (L7 dedupe: the same
+ * word as `@labre/affine-components`'s own icon-button placeholder) aliases
+ * `ICON_BUTTON_COMING_SOON` for the same reason.
+ */
+export const EDGELESS_TOOLBAR_COMING_SOON = ICON_BUTTON_COMING_SOON;
+export const EDGELESS_TOOLBAR_MORE_TOOLS = [
+    'com.labre.edgeless-toolbar.more-tools',
+    'More Tools',
+];
+/** Every wording this package declares, in the order it renders them. */
+export const EDGELESS_TOOLBAR_WORDINGS = [
+    EDGELESS_TOOLBAR_MORE_TOOLS,
+];

package/dist/_pkgs/affine-widget-edgeless-toolbar/view.js

@@ -3,6 +3,7 @@ import { artefactCatalogueDefaultExtension } from './catalogue/artefact-catalogu
 import { edgelessArtefactCatalogueWidget } from './catalogue/artefact-catalogue-widget.js';
 import { edgelessToolbarWidget } from './edgeless-toolbar.js';
 import { effects } from './effects.js';
+import { ArtefactPlacementTool } from './placement/artefact-placement-tool.js';
 export class EdgelessToolbarViewExtension extends ViewExtensionProvider {
     constructor() {
         super(...arguments);
@@ -23,6 +24,10 @@ export class EdgelessToolbarViewExtension extends ViewExtensionProvider {
             // sidebar overrides the seam and the widget then never opens.
             context.register(edgelessArtefactCatalogueWidget);
             context.register(artefactCatalogueDefaultExtension);
+            // Unconditionally too, and for the same reason: the tool is generic
+            // chrome driven by whatever commands are registered, so a framework whose
+            // flag is off simply never arms it. See `docs/adr/0009`.
+            context.register(ArtefactPlacementTool);
         }
     }
 }

package/dist/_pkgs/affine-widget-edgeless-zoom-toolbar/translations.d.ts

@@ -0,0 +1,7 @@
+import type { ChromeWording } from '../affine-shared/services/index.js';
+export declare const ZOOM_TOGGLE_BAR_TOOLTIP: ChromeWording;
+export declare const ZOOM_FIT_TO_SCREEN_TOOLTIP: ChromeWording;
+export declare const ZOOM_OUT_TOOLTIP: ChromeWording;
+export declare const ZOOM_IN_TOOLTIP: ChromeWording;
+/** Every wording this package declares, in the order it renders them. */
+export declare const ZOOM_TOOLBAR_WORDINGS: readonly ChromeWording[];

package/dist/_pkgs/affine-widget-edgeless-zoom-toolbar/translations.js

@@ -0,0 +1,23 @@
+export const ZOOM_TOGGLE_BAR_TOOLTIP = [
+    'com.labre.zoom-toolbar.toggle-bar',
+    'Toggle Zoom Tool Bar',
+];
+export const ZOOM_FIT_TO_SCREEN_TOOLTIP = [
+    'com.labre.zoom-toolbar.fit-to-screen',
+    'Fit to screen',
+];
+export const ZOOM_OUT_TOOLTIP = [
+    'com.labre.zoom-toolbar.zoom-out',
+    'Zoom out',
+];
+export const ZOOM_IN_TOOLTIP = [
+    'com.labre.zoom-toolbar.zoom-in',
+    'Zoom in',
+];
+/** Every wording this package declares, in the order it renders them. */
+export const ZOOM_TOOLBAR_WORDINGS = [
+    ZOOM_TOGGLE_BAR_TOOLTIP,
+    ZOOM_FIT_TO_SCREEN_TOOLTIP,
+    ZOOM_OUT_TOOLTIP,
+    ZOOM_IN_TOOLTIP,
+];

package/dist/_pkgs/affine-widget-edgeless-zoom-toolbar/zoom-bar-toggle-button.js

@@ -34,12 +34,14 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { EdgelessLegacySlotIdentifier } from '../affine-block-surface/index.js';
 import { createLitPortal } from '../affine-components/portal/index.js';
+import { translateKey } from '../affine-shared/services/index.js';
 import { stopPropagation } from '../affine-shared/utils/index.js';
 import { WithDisposable } from '../global/lit/index.js';
 import { MoreHorizontalIcon } from '@blocksuite/icons/lit';
 import { offset } from '@floating-ui/dom';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { ZOOM_TOGGLE_BAR_TOOLTIP } from './translations.js';
 let ZoomBarToggleButton = (() => {
     let _classSuper = WithDisposable(LitElement);
     let __showPopper_decorators;
@@ -128,7 +130,7 @@ let ZoomBarToggleButton = (() => {
             return html `
       <div class="toggle-button" @pointerdown=${stopPropagation}>
         <edgeless-tool-icon-button
-          .tooltip=${'Toggle Zoom Tool Bar'}
+          .tooltip=${translateKey(this.std, ...ZOOM_TOGGLE_BAR_TOOLTIP)}
           .tipPosition=${'right'}
           .active=${this._showPopper}
           .arrow=${false}

package/dist/_pkgs/affine-widget-edgeless-zoom-toolbar/zoom-toolbar.js

@@ -33,6 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { EdgelessLegacySlotIdentifier } from '../affine-block-surface/index.js';
+import { translateKey } from '../affine-shared/services/index.js';
 import { stopPropagation } from '../affine-shared/utils/index.js';
 import { WithDisposable } from '../global/lit/index.js';
 import { MinusIcon, PlusIcon, ViewBarIcon } from '@blocksuite/icons/lit';
@@ -42,6 +43,7 @@ import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import clamp from 'lodash-es/clamp.js';
+import { ZOOM_FIT_TO_SCREEN_TOOLTIP, ZOOM_IN_TOOLTIP, ZOOM_OUT_TOOLTIP, } from './translations.js';
 let EdgelessZoomToolbar = (() => {
     let _classSuper = WithDisposable(LitElement);
     let _layout_decorators;
@@ -182,7 +184,7 @@ let EdgelessZoomToolbar = (() => {
         @pointerdown=${stopPropagation}
       >
         <edgeless-tool-icon-button
-          .tooltip=${'Fit to screen'}
+          .tooltip=${translateKey(this.std, ...ZOOM_FIT_TO_SCREEN_TOOLTIP)}
           .tipPosition=${this._isVerticalBar() ? 'right' : 'top-end'}
           .arrow=${!this._isVerticalBar()}
           @click=${() => this.gfx.fitToScreen()}
@@ -193,7 +195,7 @@ let EdgelessZoomToolbar = (() => {
           ${ViewBarIcon()}
         </edgeless-tool-icon-button>
         <edgeless-tool-icon-button
-          .tooltip=${'Zoom out'}
+          .tooltip=${translateKey(this.std, ...ZOOM_OUT_TOOLTIP)}
           .tipPosition=${this._isVerticalBar() ? 'right' : 'top'}
           .arrow=${!this._isVerticalBar()}
           @click=${() => this.setZoomByStep(-ZOOM_STEP)}
@@ -211,7 +213,7 @@ let EdgelessZoomToolbar = (() => {
           ${formattedZoom}
         </button>
         <edgeless-tool-icon-button
-          .tooltip=${'Zoom in'}
+          .tooltip=${translateKey(this.std, ...ZOOM_IN_TOOLTIP)}
           .tipPosition=${this._isVerticalBar() ? 'right' : 'top'}
           .arrow=${!this._isVerticalBar()}
           @click=${() => this.setZoomByStep(ZOOM_STEP)}

package/dist/_pkgs/affine-widget-linked-doc/config.js

@@ -2,12 +2,12 @@ import { ImportIcon, LinkedDocIcon, LinkedEdgelessIcon, NewDocIcon, } from '../a
 import { toast } from '../affine-components/toast/index.js';
 import { StoreExtensionManagerIdentifier } from '../affine-ext-loader/index.js';
 import { insertLinkedNode } from '../affine-inline-reference/index.js';
-import { DocModeProvider, TelemetryProvider, } from '../affine-shared/services/index.js';
+import { DocModeProvider, formatLocale, TelemetryProvider, translateKey, } from '../affine-shared/services/index.js';
 import { createDefaultDoc, isFuzzyMatch, } from '../affine-shared/utils/index.js';
 import { IS_MOBILE } from '../global/env/index.js';
 import { ConfigExtensionFactory, } from '../std/index.js';
 import { showImportModal } from './import-doc/index.js';
-const DEFAULT_DOC_NAME = 'Untitled';
+import { LINKED_DOC_CREATE_DOC, LINKED_DOC_IMPORT, LINKED_DOC_IMPORT_SUCCESS_TOAST, LINKED_DOC_LINK_TO_DOC, LINKED_DOC_NEW_DOC, LINKED_DOC_UNTITLED, } from './translations.js';
 const DISPLAY_NAME_LENGTH = 8;
 export function createLinkedDocMenuGroup(query, abort, editorHost, inlineEditor) {
     const doc = editorHost.store;
@@ -17,10 +17,10 @@ export function createLinkedDocMenuGroup(query, abort, editorHost, inlineEditor)
         .filter(({ title }) => isFuzzyMatch(title, query));
     const MAX_DOCS = 6;
     return {
-        name: 'Link to Doc',
+        name: translateKey(editorHost.std, ...LINKED_DOC_LINK_TO_DOC),
         items: filteredDocList.map(doc => ({
             key: doc.id,
-            name: doc.title || DEFAULT_DOC_NAME,
+            name: doc.title || translateKey(editorHost.std, ...LINKED_DOC_UNTITLED),
             icon: editorHost.std.get(DocModeProvider).getPrimaryMode(doc.id) ===
                 'edgeless'
                 ? LinkedEdgelessIcon
@@ -42,18 +42,20 @@ export function createLinkedDocMenuGroup(query, abort, editorHost, inlineEditor)
             },
         })),
         maxDisplay: MAX_DOCS,
-        overflowText: `${filteredDocList.length - MAX_DOCS} more docs`,
+        overflowText: `${new Intl.NumberFormat(formatLocale(editorHost.std)).format(filteredDocList.length - MAX_DOCS)} more docs`,
     };
 }
 export function createNewDocMenuGroup(query, abort, editorHost, inlineEditor) {
     const doc = editorHost.store;
-    const docName = query || DEFAULT_DOC_NAME;
+    const docName = query || translateKey(editorHost.std, ...LINKED_DOC_UNTITLED);
     const displayDocName = docName.slice(0, DISPLAY_NAME_LENGTH) +
         (docName.length > DISPLAY_NAME_LENGTH ? '..' : '');
     const items = [
         {
             key: 'create',
-            name: `Create "${displayDocName}" doc`,
+            name: translateKey(editorHost.std, ...LINKED_DOC_CREATE_DOC, {
+                name: displayDocName,
+            }),
             icon: NewDocIcon,
             action: () => {
                 abort();
@@ -83,12 +85,14 @@ export function createNewDocMenuGroup(query, abort, editorHost, inlineEditor) {
     if (!IS_MOBILE) {
         items.push({
             key: 'import',
-            name: 'Import',
+            name: translateKey(editorHost.std, ...LINKED_DOC_IMPORT),
             icon: ImportIcon,
             action: () => {
                 abort();
                 const onSuccess = (docIds, options) => {
-                    toast(editorHost, `Successfully imported ${options.importedCount} Doc${options.importedCount > 1 ? 's' : ''}.`);
+                    toast(editorHost, translateKey(editorHost.std, ...LINKED_DOC_IMPORT_SUCCESS_TOAST, {
+                        count: options.importedCount,
+                    }));
                     for (const docId of docIds) {
                         insertLinkedNode({
                             inlineEditor,
@@ -106,12 +110,13 @@ export function createNewDocMenuGroup(query, abort, editorHost, inlineEditor) {
                     extensions: storeManager.get('store'),
                     onSuccess,
                     onFail,
+                    std: editorHost.std,
                 });
             },
         });
     }
     return {
-        name: 'New Doc',
+        name: translateKey(editorHost.std, ...LINKED_DOC_NEW_DOC),
         items,
     };
 }

package/dist/_pkgs/affine-widget-linked-doc/import-doc/import-doc.d.ts

@@ -1,3 +1,4 @@
+import type { BlockStdScope } from '../../std/index.js';
 import type { ExtensionType, Schema, Workspace } from '../../store/index.js';
 import { LitElement, type PropertyValues } from 'lit';
 export type OnSuccessHandler = (pageIds: string[], options: {
@@ -13,8 +14,18 @@ export declare class ImportDoc extends ImportDoc_base {
     private readonly onSuccess?;
     private readonly onFail?;
     private readonly abortController;
+    /** Set by the caller that has one (`config.ts`'s `showImportModal` call) —
+     * optional so this dialog still renders (in English) when created with
+     * none. */
+    private readonly std?;
     static styles: import("lit").CSSResult;
-    constructor(collection: Workspace, schema: Schema, extensions: ExtensionType[], onSuccess?: OnSuccessHandler | undefined, onFail?: OnFailHandler | undefined, abortController?: AbortController);
+    constructor(collection: Workspace, schema: Schema, extensions: ExtensionType[], onSuccess?: OnSuccessHandler | undefined, onFail?: OnFailHandler | undefined, abortController?: AbortController, 
+    /** Set by the caller that has one (`config.ts`'s `showImportModal` call) —
+     * optional so this dialog still renders (in English) when created with
+     * none. */
+    std?: BlockStdScope | undefined);
+    /** `translateKey(std, ...wording)` when `std` is available, else the literal. */
+    private _t;
     private _importHtml;
     private _importMarkDown;
     private _importNotion;