@formicoidea/labre-core 0.39.3 → 0.41.0

package/dist/_pkgs/affine-block-image/utils.js

@@ -1,12 +1,13 @@
 import { autoResizeElementsCommand } from '../affine-block-surface/index.js';
 import { toast } from '../affine-components/toast/index.js';
 import { ImageBlockSchema, } from '../affine-model/index.js';
-import { FileSizeLimitProvider, NativeClipboardProvider, } from '../affine-shared/services/index.js';
+import { FileSizeLimitProvider, NativeClipboardProvider, TOAST_DOWNLOAD_IN_PROGRESS, TOAST_UPLOAD_SIZE_LIMIT, translateKey, } from '../affine-shared/services/index.js';
 import { convertToPng, formatSize, getBlockProps, isInsidePageEditor, readImageSize, transformModel, withTempBlobData, } from '../affine-shared/utils/index.js';
 import { Bound, Vec } from '../global/gfx/index.js';
 import { BlockSelection } from '../std/index.js';
 import { GfxControllerIdentifier } from '../std/gfx/index.js';
 import { SURFACE_IMAGE_CARD_HEIGHT, SURFACE_IMAGE_CARD_WIDTH, } from './components/image-block-fallback.js';
+import { IMAGE_TOAST_COPIED, IMAGE_TOAST_DOWNLOAD_FAILED, IMAGE_TOAST_DOWNLOADING, IMAGE_TOAST_READ_SIZE_FAILED, } from './translations.js';
 const DEFAULT_ATTACHMENT_NAME = 'affine-attachment';
 async function getImageBlob(model) {
     const sourceId = model.props.sourceId$.peek();
@@ -30,17 +31,17 @@ export async function refreshData(block) {
     await block.resourceController.refreshUrlWith();
 }
 export async function downloadImageBlob(block) {
-    const { host, blobUrl, resourceController } = block;
+    const { host, blobUrl, resourceController, std } = block;
     if (!blobUrl) {
-        toast(host, 'Failed to download image!');
+        toast(host, translateKey(std, ...IMAGE_TOAST_DOWNLOAD_FAILED));
         return;
     }
     if (resourceController.state$.peek().downloading) {
-        toast(host, 'Download in progress...');
+        toast(host, translateKey(std, ...TOAST_DOWNLOAD_IN_PROGRESS));
         return;
     }
     resourceController.updateState({ downloading: true });
-    toast(host, 'Downloading image...');
+    toast(host, translateKey(std, ...IMAGE_TOAST_DOWNLOADING));
     const tmpLink = document.createElement('a');
     const event = new MouseEvent('click');
     tmpLink.download = 'image';
@@ -100,7 +101,7 @@ export async function copyImageBlob(block) {
                 new ClipboardItem({ [blob.type]: blob }),
             ]);
         }
-        toast(host, 'Copied image to clipboard');
+        toast(host, translateKey(std, ...IMAGE_TOAST_COPIED));
     }
     catch (error) {
         console.error(error);
@@ -148,7 +149,7 @@ function hasExceeded(std, files, maxFileSize = std.get(FileSizeLimitProvider).ma
     const exceeded = files.some(file => file.size > maxFileSize);
     if (exceeded) {
         const size = formatSize(maxFileSize);
-        toast(std.host, `You can only upload files less than ${size}`);
+        toast(std.host, translateKey(std, ...TOAST_UPLOAD_SIZE_LIMIT, { size: size ?? '' }));
     }
     return exceeded;
 }
@@ -159,7 +160,7 @@ async function buildPropsWith(std, file) {
         std.store.blobSync.set(file),
     ]);
     if (!(imageSize.width * imageSize.height)) {
-        toast(std.host, 'Failed to read image size, please try another image');
+        toast(std.host, translateKey(std, ...IMAGE_TOAST_READ_SIZE_FAILED));
         throw new Error('Failed to read image size');
     }
     return { size, sourceId, ...imageSize };

package/dist/_pkgs/affine-block-latex/configs/slash-menu.d.ts

@@ -1,2 +1,10 @@
 import { type SlashMenuConfig } from '../../affine-widget-slash-menu/index.js';
+/**
+ * `items` is the function form (`SlashMenuConfig.items` also accepts a plain
+ * array — the widget's own config uses that shape, `blocks/callout`'s does
+ * too) rather than a static array, because THIS package's tooltip figures
+ * bake real prose into their SVG (`LatexTooltip`'s `str` argument), unlike
+ * every skeleton-bar figure elsewhere: resolving it through the seam needs
+ * `std`, which only the function form's `ctx` carries.
+ */
 export declare const latexSlashMenuConfig: SlashMenuConfig;

package/dist/_pkgs/affine-block-latex/configs/slash-menu.js

@@ -1,19 +1,32 @@
 import { insertInlineLatex } from '../../affine-inline-latex/index.js';
 import { getSelectedModelsCommand, getTextSelectionCommand, } from '../../affine-shared/commands/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
 import {} from '../../affine-widget-slash-menu/index.js';
 import { TeXIcon } from '@blocksuite/icons/lit';
 import { insertLatexBlockCommand } from '../commands.js';
+import { LATEX_SLASH_BLOCK_CAPTION, LATEX_SLASH_BLOCK_DESCRIPTION, LATEX_SLASH_BLOCK_NAME, LATEX_SLASH_INLINE_CAPTION, LATEX_SLASH_INLINE_DESCRIPTION, LATEX_SLASH_INLINE_NAME, LATEX_TOOLTIP_BLOCK_INTRO, LATEX_TOOLTIP_INTRO, } from '../translations.js';
 import { LatexTooltip } from './tooltips.js';
+/**
+ * `items` is the function form (`SlashMenuConfig.items` also accepts a plain
+ * array — the widget's own config uses that shape, `blocks/callout`'s does
+ * too) rather than a static array, because THIS package's tooltip figures
+ * bake real prose into their SVG (`LatexTooltip`'s `str` argument), unlike
+ * every skeleton-bar figure elsewhere: resolving it through the seam needs
+ * `std`, which only the function form's `ctx` carries.
+ */
 export const latexSlashMenuConfig = {
-    items: [
+    items: ({ std }) => [
         {
             name: 'Inline equation',
+            nameWording: LATEX_SLASH_INLINE_NAME,
             group: '0_Basic@8',
             description: 'Create a inline equation.',
+            descriptionWording: LATEX_SLASH_INLINE_DESCRIPTION,
             icon: TeXIcon(),
             tooltip: {
-                figure: LatexTooltip('Energy. Mass. Light. In a single equation,', 'E=mc^2', false),
+                figure: LatexTooltip(translateKey(std, ...LATEX_TOOLTIP_INTRO), 'E=mc^2', false),
                 caption: 'Inline equation',
+                captionWording: LATEX_SLASH_INLINE_CAPTION,
             },
             searchAlias: ['inlineMath, inlineEquation', 'inlineLatex'],
             action: ({ std }) => {
@@ -26,11 +39,14 @@ export const latexSlashMenuConfig = {
         },
         {
             name: 'Equation',
+            nameWording: LATEX_SLASH_BLOCK_NAME,
             description: 'Create a equation block.',
+            descriptionWording: LATEX_SLASH_BLOCK_DESCRIPTION,
             icon: TeXIcon(),
             tooltip: {
-                figure: LatexTooltip('Create a equation via LaTeX.', String.raw `\frac{a}{b} \pm \frac{c}{d} = \frac{ad \pm bc}{bd}`, true),
+                figure: LatexTooltip(translateKey(std, ...LATEX_TOOLTIP_BLOCK_INTRO), String.raw `\frac{a}{b} \pm \frac{c}{d} = \frac{ad \pm bc}{bd}`, true),
                 caption: 'Equation',
+                captionWording: LATEX_SLASH_BLOCK_CAPTION,
             },
             searchAlias: ['mathBlock, equationBlock', 'latexBlock'],
             group: '4_Content & Media@10',

package/dist/_pkgs/affine-block-latex/latex-block.js

@@ -35,12 +35,14 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { selectBlock } from '../affine-block-note/index.js';
 import { CaptionedBlockComponent } from '../affine-components/caption/index.js';
 import { createLitPortal } from '../affine-components/portal/index.js';
+import { translateKey } from '../affine-shared/services/index.js';
 import { BlockSelection } from '../std/index.js';
 import { effect } from '@preact/signals-core';
 import katex from 'katex';
 import { html, render } from 'lit';
 import { query } from 'lit/decorators.js';
 import { latexBlockStyles } from './styles.js';
+import { LATEX_EMPTY_PLACEHOLDER, LATEX_ERROR_PLACEHOLDER, } from './translations.js';
 let LatexBlockComponent = (() => {
     let _classSuper = CaptionedBlockComponent;
     let __katexContainer_decorators;
@@ -78,7 +80,9 @@ let LatexBlockComponent = (() => {
                 // @ts-expect-error lit hack won't fix
                 delete katexContainer['_$litPart$'];
                 if (latex.length === 0) {
-                    render(html `<span class="latex-block-empty-placeholder">Equation</span>`, katexContainer);
+                    render(html `<span class="latex-block-empty-placeholder"
+              >${translateKey(this.std, ...LATEX_EMPTY_PLACEHOLDER)}</span
+            >`, katexContainer);
                 }
                 else {
                     try {
@@ -91,7 +95,7 @@ let LatexBlockComponent = (() => {
                         // @ts-expect-error lit hack won't fix
                         delete katexContainer['_$litPart$'];
                         render(html `<span class="latex-block-error-placeholder"
-                >Error equation</span
+                >${translateKey(this.std, ...LATEX_ERROR_PLACEHOLDER)}</span
               >`, katexContainer);
                     }
                 }

package/dist/_pkgs/affine-block-latex/translations.d.ts

@@ -0,0 +1,35 @@
+import { type ChromeWording } from '../affine-shared/services/index.js';
+/**
+ * This package's own wordings, declared beside the code that renders them —
+ * the slash-menu's two equation items and the katex placeholder/error labels.
+ */
+export declare const LATEX_SLASH_INLINE_NAME: ChromeWording;
+export declare const LATEX_SLASH_INLINE_DESCRIPTION: ChromeWording;
+/**
+ * The inline item's tooltip caption says the exact same word as its name —
+ * reused rather than declared twice.
+ */
+export declare const LATEX_SLASH_INLINE_CAPTION: ChromeWording;
+export declare const LATEX_SLASH_BLOCK_NAME: ChromeWording;
+export declare const LATEX_SLASH_BLOCK_DESCRIPTION: ChromeWording;
+/** The block item's tooltip caption says the same word as its name too. */
+export declare const LATEX_SLASH_BLOCK_CAPTION: ChromeWording;
+export declare const LATEX_TOOLTIP_INTRO: ChromeWording;
+export declare const LATEX_TOOLTIP_BLOCK_INTRO: ChromeWording;
+/**
+ * `./latex-block.ts`'s own placeholders: the empty block, and a block whose
+ * LaTeX source failed to render. `LATEX_EMPTY_PLACEHOLDER`'s fallback is the
+ * SAME word as the slash-menu item's own name (`LATEX_SLASH_BLOCK_NAME`), but
+ * it is a different surface (rendered inside the katex container, not the
+ * slash menu), so it keeps its own key rather than aliasing.
+ */
+export declare const LATEX_EMPTY_PLACEHOLDER: ChromeWording;
+export declare const LATEX_ERROR_PLACEHOLDER: ChromeWording;
+/**
+ * Every wording declared above, in declaration order — walked by
+ * `PACKAGE_WORDINGS` in `packages/affine/all/src/translations.ts`. The two
+ * caption aliases (`LATEX_SLASH_INLINE_CAPTION` / `_BLOCK_CAPTION`) are not
+ * listed again, same rule the note/slash-menu packages' own chrome aliases
+ * already follow.
+ */
+export declare const LATEX_WORDINGS: readonly ChromeWording[];

package/dist/_pkgs/affine-block-latex/translations.js

@@ -0,0 +1,60 @@
+import { EQUATION_EMPTY_LABEL, EQUATION_ERROR_LABEL, } from '../affine-shared/services/index.js';
+/**
+ * This package's own wordings, declared beside the code that renders them —
+ * the slash-menu's two equation items and the katex placeholder/error labels.
+ */
+export const LATEX_SLASH_INLINE_NAME = [
+    'com.labre.latex.slash-menu.inline.name',
+    'Inline equation',
+];
+export const LATEX_SLASH_INLINE_DESCRIPTION = [
+    'com.labre.latex.slash-menu.inline.description',
+    'Create a inline equation.',
+];
+/**
+ * The inline item's tooltip caption says the exact same word as its name —
+ * reused rather than declared twice.
+ */
+export const LATEX_SLASH_INLINE_CAPTION = LATEX_SLASH_INLINE_NAME;
+export const LATEX_SLASH_BLOCK_NAME = [
+    'com.labre.latex.slash-menu.block.name',
+    'Equation',
+];
+export const LATEX_SLASH_BLOCK_DESCRIPTION = [
+    'com.labre.latex.slash-menu.block.description',
+    'Create a equation block.',
+];
+/** The block item's tooltip caption says the same word as its name too. */
+export const LATEX_SLASH_BLOCK_CAPTION = LATEX_SLASH_BLOCK_NAME;
+export const LATEX_TOOLTIP_INTRO = [
+    'com.labre.latex.slash-menu.inline.tooltip-intro',
+    'Energy. Mass. Light. In a single equation,',
+];
+export const LATEX_TOOLTIP_BLOCK_INTRO = [
+    'com.labre.latex.slash-menu.block.tooltip-intro',
+    'Create a equation via LaTeX.',
+];
+/**
+ * `./latex-block.ts`'s own placeholders: the empty block, and a block whose
+ * LaTeX source failed to render. `LATEX_EMPTY_PLACEHOLDER`'s fallback is the
+ * SAME word as the slash-menu item's own name (`LATEX_SLASH_BLOCK_NAME`), but
+ * it is a different surface (rendered inside the katex container, not the
+ * slash menu), so it keeps its own key rather than aliasing.
+ */
+export const LATEX_EMPTY_PLACEHOLDER = EQUATION_EMPTY_LABEL;
+export const LATEX_ERROR_PLACEHOLDER = EQUATION_ERROR_LABEL;
+/**
+ * Every wording declared above, in declaration order — walked by
+ * `PACKAGE_WORDINGS` in `packages/affine/all/src/translations.ts`. The two
+ * caption aliases (`LATEX_SLASH_INLINE_CAPTION` / `_BLOCK_CAPTION`) are not
+ * listed again, same rule the note/slash-menu packages' own chrome aliases
+ * already follow.
+ */
+export const LATEX_WORDINGS = [
+    LATEX_SLASH_INLINE_NAME,
+    LATEX_SLASH_INLINE_DESCRIPTION,
+    LATEX_SLASH_BLOCK_NAME,
+    LATEX_SLASH_BLOCK_DESCRIPTION,
+    LATEX_TOOLTIP_INTRO,
+    LATEX_TOOLTIP_BLOCK_INTRO,
+];

package/dist/_pkgs/affine-block-note/components/edgeless-note-border-dropdown-menu.d.ts

@@ -1,9 +1,18 @@
 import { LineWidth, type StrokeStyle } from '../../affine-model/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import { ShadowlessElement } from '../../std/index.js';
 export declare class EdgelessNoteBorderDropdownMenu extends ShadowlessElement {
     render(): import("lit-html").TemplateResult<1>;
     accessor lineStyle: StrokeStyle;
     accessor lineSize: LineWidth;
+    /**
+     * Optional: this component is registered but currently has no renderer in
+     * this repo that instantiates it, so there is no call site to thread `std`
+     * from yet. When one appears, passing `.std=${ctx.std}` translates the
+     * label; without it, the English fallback keeps showing, same as before
+     * this wording existed.
+     */
+    accessor std: BlockStdScope | undefined;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/_pkgs/affine-block-note/components/edgeless-note-border-dropdown-menu.js

@@ -34,10 +34,12 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { EditorChevronDown } from '../../affine-components/toolbar/index.js';
 import { LineWidth } from '../../affine-model/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
 import { LineStyleIcon } from '@blocksuite/icons/lit';
 import { ShadowlessElement } from '../../std/index.js';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { NOTE_BORDER_STYLE_LABEL } from '../translations.js';
 let EdgelessNoteBorderDropdownMenu = (() => {
     let _classSuper = ShadowlessElement;
     let _lineStyle_decorators;
@@ -46,24 +48,29 @@ let EdgelessNoteBorderDropdownMenu = (() => {
     let _lineSize_decorators;
     let _lineSize_initializers = [];
     let _lineSize_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     return class EdgelessNoteBorderDropdownMenu extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _lineStyle_decorators = [property({ attribute: false })];
             _lineSize_decorators = [property({ attribute: false })];
+            _std_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _lineStyle_decorators, { kind: "accessor", name: "lineStyle", static: false, private: false, access: { has: obj => "lineStyle" in obj, get: obj => obj.lineStyle, set: (obj, value) => { obj.lineStyle = value; } }, metadata: _metadata }, _lineStyle_initializers, _lineStyle_extraInitializers);
             __esDecorate(this, null, _lineSize_decorators, { kind: "accessor", name: "lineSize", static: false, private: false, access: { has: obj => "lineSize" in obj, get: obj => obj.lineSize, set: (obj, value) => { obj.lineSize = value; } }, metadata: _metadata }, _lineSize_initializers, _lineSize_extraInitializers);
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         render() {
-            const { lineSize, lineStyle } = this;
+            const { lineSize, lineStyle, std } = this;
+            const label = std
+                ? translateKey(std, ...NOTE_BORDER_STYLE_LABEL)
+                : NOTE_BORDER_STYLE_LABEL[1];
             return html `
       <editor-menu-button
         .button=${html `
-          <editor-icon-button
-            aria-label="Border style"
-            .tooltip="${'Border style'}"
-          >
+          <editor-icon-button aria-label=${label} .tooltip="${label}">
             ${LineStyleIcon()} ${EditorChevronDown}
           </editor-icon-button>
         `}
@@ -81,9 +88,19 @@ let EdgelessNoteBorderDropdownMenu = (() => {
         #lineSize_accessor_storage = (__runInitializers(this, _lineStyle_extraInitializers), __runInitializers(this, _lineSize_initializers, LineWidth.Two));
         get lineSize() { return this.#lineSize_accessor_storage; }
         set lineSize(value) { this.#lineSize_accessor_storage = value; }
+        #std_accessor_storage = (__runInitializers(this, _lineSize_extraInitializers), __runInitializers(this, _std_initializers, undefined));
+        /**
+         * Optional: this component is registered but currently has no renderer in
+         * this repo that instantiates it, so there is no call site to thread `std`
+         * from yet. When one appears, passing `.std=${ctx.std}` translates the
+         * label; without it, the English fallback keeps showing, same as before
+         * this wording existed.
+         */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         constructor() {
             super(...arguments);
-            __runInitializers(this, _lineSize_extraInitializers);
+            __runInitializers(this, _std_extraInitializers);
         }
     };
 })();

package/dist/_pkgs/affine-block-note/components/edgeless-note-display-mode-dropdown-menu.d.ts

@@ -1,10 +1,13 @@
 import { NoteDisplayMode } from '../../affine-model/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import { ShadowlessElement } from '../../std/index.js';
 export declare class EdgelessNoteDisplayModeDropdownMenu extends ShadowlessElement {
-    get mode(): "Page" | "Both" | "Edgeless";
+    get mode(): "Both" | "Page" | "Edgeless";
     select(detail: NoteDisplayMode): void;
     render(): import("lit-html").TemplateResult<1>;
     accessor displayMode: NoteDisplayMode;
+    /** Threaded from the surface toolbar's `content(ctx)` (`../configs/toolbar.ts`). */
+    accessor std: BlockStdScope;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/_pkgs/affine-block-note/components/edgeless-note-display-mode-dropdown-menu.js

@@ -34,24 +34,36 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { EditorChevronDown } from '../../affine-components/toolbar/index.js';
 import { NoteDisplayMode } from '../../affine-model/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
 import { ShadowlessElement } from '../../std/index.js';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { NOTE_DISPLAY_MODE_BOTH, NOTE_DISPLAY_MODE_EDGELESS, NOTE_DISPLAY_MODE_LABEL, NOTE_DISPLAY_MODE_PAGE, NOTE_DISPLAY_MODE_SHOW_IN, } from '../translations.js';
 const DisplayModeMap = {
     [NoteDisplayMode.DocAndEdgeless]: 'Both',
     [NoteDisplayMode.EdgelessOnly]: 'Edgeless',
     [NoteDisplayMode.DocOnly]: 'Page',
 };
+const DisplayModeWording = {
+    [NoteDisplayMode.DocAndEdgeless]: NOTE_DISPLAY_MODE_BOTH,
+    [NoteDisplayMode.EdgelessOnly]: NOTE_DISPLAY_MODE_EDGELESS,
+    [NoteDisplayMode.DocOnly]: NOTE_DISPLAY_MODE_PAGE,
+};
 let EdgelessNoteDisplayModeDropdownMenu = (() => {
     let _classSuper = ShadowlessElement;
     let _displayMode_decorators;
     let _displayMode_initializers = [];
     let _displayMode_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     return class EdgelessNoteDisplayModeDropdownMenu extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _displayMode_decorators = [property({ attribute: false })];
+            _std_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _displayMode_decorators, { kind: "accessor", name: "displayMode", static: false, private: false, access: { has: obj => "displayMode" in obj, get: obj => obj.displayMode, set: (obj, value) => { obj.displayMode = value; } }, metadata: _metadata }, _displayMode_initializers, _displayMode_extraInitializers);
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         get mode() {
@@ -61,24 +73,28 @@ let EdgelessNoteDisplayModeDropdownMenu = (() => {
             this.dispatchEvent(new CustomEvent('select', { detail }));
         }
         render() {
-            const { displayMode, mode } = this;
+            const { displayMode, std } = this;
+            const modeLabel = translateKey(std, ...DisplayModeWording[displayMode]);
             return html `
-      <span class="display-mode-button-label">Show in</span>
+      <span class="display-mode-button-label"
+        >${translateKey(std, ...NOTE_DISPLAY_MODE_SHOW_IN)}</span
+      >
       <editor-menu-button
         .contentPadding=${'8px'}
         .button=${html `
           <editor-icon-button
-            aria-label="Mode"
-            .tooltip="${'Display mode'}"
+            aria-label=${translateKey(std, ...NOTE_DISPLAY_MODE_LABEL)}
+            .tooltip="${translateKey(std, ...NOTE_DISPLAY_MODE_LABEL)}"
             .justify="${'space-between'}"
             .labelHeight="${'20px'}"
           >
-            <span class="label">${mode}</span>
+            <span class="label">${modeLabel}</span>
             ${EditorChevronDown}
           </editor-icon-button>
         `}
       >
         <note-display-mode-panel
+          .std=${std}
           .displayMode=${displayMode}
           .onSelect=${(newMode) => this.select(newMode)}
         >
@@ -89,9 +105,13 @@ let EdgelessNoteDisplayModeDropdownMenu = (() => {
         #displayMode_accessor_storage = __runInitializers(this, _displayMode_initializers, void 0);
         get displayMode() { return this.#displayMode_accessor_storage; }
         set displayMode(value) { this.#displayMode_accessor_storage = value; }
+        #std_accessor_storage = (__runInitializers(this, _displayMode_extraInitializers), __runInitializers(this, _std_initializers, void 0));
+        /** Threaded from the surface toolbar's `content(ctx)` (`../configs/toolbar.ts`). */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         constructor() {
             super(...arguments);
-            __runInitializers(this, _displayMode_extraInitializers);
+            __runInitializers(this, _std_extraInitializers);
         }
     };
 })();

package/dist/_pkgs/affine-block-note/components/edgeless-note-shadow-menu.d.ts

@@ -1,4 +1,5 @@
 import { ColorScheme, NoteShadow } from '../../affine-model/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import { LitElement, type PropertyValues } from 'lit';
 export declare class EdgelessNoteShadowMenu extends LitElement {
     static styles: import("lit").CSSResult;
@@ -8,6 +9,8 @@ export declare class EdgelessNoteShadowMenu extends LitElement {
     accessor background: string;
     accessor theme: ColorScheme;
     accessor value: NoteShadow;
+    /** Threaded from `edgeless-note-style-panel.ts`, which already has `std`. */
+    accessor std: BlockStdScope;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/_pkgs/affine-block-note/components/edgeless-note-shadow-menu.js

@@ -33,11 +33,13 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { ColorScheme, NoteShadow } from '../../affine-model/index.js';
+import { translateKey, } from '../../affine-shared/services/index.js';
 import { unsafeCSSVarV2 } from '../../affine-shared/theme/index.js';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { NOTE_SHADOW_BOX, NOTE_SHADOW_FILM, NOTE_SHADOW_FLOATING, NOTE_SHADOW_NONE, NOTE_SHADOW_PAPER, NOTE_SHADOW_STICKER, } from '../translations.js';
 import { NoteNoShadowIcon, NoteShadowSampleIcon } from './icons.js';
 const SHADOWS = [
     {
@@ -45,7 +47,7 @@ const SHADOWS = [
         light: {},
         dark: {},
         style: {},
-        tooltip: 'No shadow',
+        tooltipWording: NOTE_SHADOW_NONE,
     },
     {
         type: NoteShadow.Box,
@@ -60,7 +62,7 @@ const SHADOWS = [
         style: {
             boxShadow: '0px 0.109px 2.621px var(--note-box-shadow-color-1), 0px 0px 0.874px var(--note-box-shadow-color-2)',
         },
-        tooltip: 'Box shadow',
+        tooltipWording: NOTE_SHADOW_BOX,
     },
     {
         type: NoteShadow.Sticker,
@@ -75,7 +77,7 @@ const SHADOWS = [
         style: {
             boxShadow: '0px 5.243px 5.68px var(--note-sticker-shadow-color-1), 0px 5.68px 3.932px var(--note-sticker-shadow-color-2)',
         },
-        tooltip: 'Sticker shadow',
+        tooltipWording: NOTE_SHADOW_STICKER,
     },
     {
         type: NoteShadow.Paper,
@@ -91,7 +93,7 @@ const SHADOWS = [
             border: '2px solid var(--note-paper-shadow-color-2)',
             boxShadow: '0px 0.655px 1.311px var(--note-paper-shadow-color-1)',
         },
-        tooltip: 'Paper shadow',
+        tooltipWording: NOTE_SHADOW_PAPER,
     },
     {
         type: NoteShadow.Float,
@@ -106,7 +108,7 @@ const SHADOWS = [
         style: {
             boxShadow: '0px 2.84px 6.554px var(--note-float-shadow-color-1), 0px 0px 0.218px var(--note-float-shadow-color-2)',
         },
-        tooltip: 'Floating shadow',
+        tooltipWording: NOTE_SHADOW_FLOATING,
     },
     {
         type: NoteShadow.Film,
@@ -122,7 +124,7 @@ const SHADOWS = [
             border: '1px solid var(--note-film-shadow-color-1)',
             boxShadow: '2px 2px 0px var(--note-film-shadow-color-2)',
         },
-        tooltip: 'Film shadow',
+        tooltipWording: NOTE_SHADOW_FILM,
     },
 ];
 let EdgelessNoteShadowMenu = (() => {
@@ -136,15 +138,20 @@ let EdgelessNoteShadowMenu = (() => {
     let _value_decorators;
     let _value_initializers = [];
     let _value_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     return class EdgelessNoteShadowMenu extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _background_decorators = [property({ attribute: false })];
             _theme_decorators = [property({ attribute: false })];
             _value_decorators = [property({ attribute: false })];
+            _std_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _background_decorators, { kind: "accessor", name: "background", static: false, private: false, access: { has: obj => "background" in obj, get: obj => obj.background, set: (obj, value) => { obj.background = value; } }, metadata: _metadata }, _background_initializers, _background_extraInitializers);
             __esDecorate(this, null, _theme_decorators, { kind: "accessor", name: "theme", static: false, private: false, access: { has: obj => "theme" in obj, get: obj => obj.theme, set: (obj, value) => { obj.theme = value; } }, metadata: _metadata }, _theme_initializers, _theme_extraInitializers);
             __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = css `
@@ -197,9 +204,9 @@ let EdgelessNoteShadowMenu = (() => {
             }
         }
         render() {
-            const { value, theme } = this;
+            const { value, theme, std } = this;
             const isDark = theme === ColorScheme.Dark;
-            return repeat(SHADOWS, shadow => shadow.type, ({ type, tooltip, style, light, dark }, index) => html `<div
+            return repeat(SHADOWS, shadow => shadow.type, ({ type, tooltipWording, style, light, dark }, index) => html `<div
           class="item"
           ?data-selected="${value === type}"
           @click=${() => this.select(type)}
@@ -207,7 +214,7 @@ let EdgelessNoteShadowMenu = (() => {
           <editor-icon-button
             class="item-icon"
             data-testid="${type.replace('--', '')}"
-            .tooltip=${tooltip}
+            .tooltip=${translateKey(std, ...tooltipWording)}
             .tipPosition="${'bottom'}"
             .iconContainerPadding=${0}
             .hover=${false}
@@ -229,9 +236,13 @@ let EdgelessNoteShadowMenu = (() => {
         #value_accessor_storage = (__runInitializers(this, _theme_extraInitializers), __runInitializers(this, _value_initializers, void 0));
         get value() { return this.#value_accessor_storage; }
         set value(value) { this.#value_accessor_storage = value; }
+        #std_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _std_initializers, void 0));
+        /** Threaded from `edgeless-note-style-panel.ts`, which already has `std`. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         constructor() {
             super(...arguments);
-            __runInitializers(this, _value_extraInitializers);
+            __runInitializers(this, _std_extraInitializers);
         }
     };
 })();