@formicoidea/labre-core 0.40.0 → 0.42.0

package/dist/_pkgs/affine-gfx-note/toolbar/note-menu.js

@@ -37,7 +37,7 @@ import { insertLinkByQuickSearchCommand } from '../../affine-block-bookmark/inde
 import { addImages } from '../../affine-block-image/index.js';
 import { DefaultTool } from '../../affine-block-surface/index.js';
 import { MAX_IMAGE_WIDTH } from '../../affine-model/index.js';
-import { TelemetryProvider } from '../../affine-shared/services/index.js';
+import { TelemetryProvider, translateKey } from '../../affine-shared/services/index.js';
 import { getImageFilesFromLocal, openSingleFileWith, } from '../../affine-shared/utils/index.js';
 import { EdgelessToolbarToolMixin } from '../../affine-widget-edgeless-toolbar/index.js';
 import { AttachmentIcon, ImageIcon, LinkIcon } from '@blocksuite/icons/lit';
@@ -47,6 +47,7 @@ import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { NoteTool } from '../note-tool.js';
 import { NOTE_MENU_ITEMS } from './note-menu-config.js';
+import { GFX_NOTE_MENU_FILE, GFX_NOTE_MENU_IMAGE, GFX_NOTE_MENU_LINK, } from '../translations.js';
 let EdgelessNoteMenu = (() => {
     let _classSuper = EdgelessToolbarToolMixin(LitElement);
     let __imageLoading_decorators;
@@ -160,7 +161,7 @@ let EdgelessNoteMenu = (() => {
           <div class="button-group-container">
             <edgeless-tool-icon-button
               .activeMode=${'background'}
-              .tooltip=${'Image'}
+              .tooltip=${translateKey(this.edgeless.std, ...GFX_NOTE_MENU_IMAGE)}
               @click=${this._addImages}
               .disabled=${this._imageLoading}
             >
@@ -170,7 +171,7 @@ let EdgelessNoteMenu = (() => {
             <edgeless-tool-icon-button
               .activeMode=${'background'}
               .tooltip=${html `<affine-tooltip-content-with-shortcut
-                data-tip="${'Link'}"
+                data-tip="${translateKey(this.edgeless.std, ...GFX_NOTE_MENU_LINK)}"
                 data-shortcut="${'@'}"
               ></affine-tooltip-content-with-shortcut>`}
               @click=${() => {
@@ -182,7 +183,7 @@ let EdgelessNoteMenu = (() => {
 
             <edgeless-tool-icon-button
               .activeMode=${'background'}
-              .tooltip=${'File'}
+              .tooltip=${translateKey(this.edgeless.std, ...GFX_NOTE_MENU_FILE)}
               @click=${async () => {
                 const file = await openSingleFileWith();
                 if (!file)
@@ -208,20 +209,23 @@ let EdgelessNoteMenu = (() => {
 
           <!-- add to note -->
           <div class="button-group-container">
-            ${repeat(NOTE_MENU_ITEMS, item => item.childFlavour, item => html `
-                <edgeless-tool-icon-button
-                  .active=${childType === item.childType}
-                  .activeMode=${'background'}
-                  .tooltip=${item.tooltip}
-                  @click=${() => this.onChange({
-                childFlavour: item.childFlavour,
-                childType: item.childType,
-                tip: item.tooltip,
+            ${repeat(NOTE_MENU_ITEMS, item => item.childFlavour, item => {
+                const tip = translateKey(this.edgeless.std, ...item.tooltipWording);
+                return html `
+                  <edgeless-tool-icon-button
+                    .active=${childType === item.childType}
+                    .activeMode=${'background'}
+                    .tooltip=${tip}
+                    @click=${() => this.onChange({
+                    childFlavour: item.childFlavour,
+                    childType: item.childType,
+                    tip,
+                })}
+                  >
+                    ${item.icon}
+                  </edgeless-tool-icon-button>
+                `;
             })}
-                >
-                  ${item.icon}
-                </edgeless-tool-icon-button>
-              `)}
           </div>
         </div>
       </edgeless-slide-menu>

package/dist/_pkgs/affine-gfx-note/toolbar/note-senior-button.js

@@ -33,13 +33,14 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { Heading1Icon, LinkIcon, TextIcon, } from '../../affine-components/icons/index.js';
-import { EditPropsStore, ThemeProvider } from '../../affine-shared/services/index.js';
+import { EditPropsStore, ThemeProvider, translateKey, } from '../../affine-shared/services/index.js';
 import { EdgelessToolbarToolMixin } from '../../affine-widget-edgeless-toolbar/index.js';
 import { SignalWatcher } from '../../global/lit/index.js';
 import { computed } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { state } from 'lit/decorators.js';
 import { NoteTool } from '../note-tool.js';
+import { GFX_NOTE_TOOL_LABEL } from '../translations.js';
 import { toShapeNotToAdapt } from './icon.js';
 let EdgelessNoteSeniorButton = (() => {
     let _classSuper = EdgelessToolbarToolMixin(SignalWatcher(LitElement));
@@ -205,7 +206,7 @@ let EdgelessNoteSeniorButton = (() => {
       .tooltip=${this.popper
                 ? ''
                 : html `<affine-tooltip-content-with-shortcut
-            data-tip="${'Note'}"
+            data-tip="${translateKey(this.edgeless.std, ...GFX_NOTE_TOOL_LABEL)}"
             data-shortcut="${'N'}"
           ></affine-tooltip-content-with-shortcut>`}
       .tooltipOffset=${5}

package/dist/_pkgs/affine-gfx-note/toolbar/note-tool-button.js

@@ -32,12 +32,14 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+import { translateKey } from '../../affine-shared/services/index.js';
 import { createPopper, QuickToolMixin, } from '../../affine-widget-edgeless-toolbar/index.js';
 import { PageIcon } from '@blocksuite/icons/lit';
 import { effect } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { state } from 'lit/decorators.js';
 import { NoteTool } from '../note-tool.js';
+import { GFX_NOTE_TOOL_LABEL } from '../translations.js';
 let EdgelessNoteToolButton = (() => {
     let _classSuper = QuickToolMixin(LitElement);
     let _childFlavour_decorators;
@@ -121,7 +123,7 @@ let EdgelessNoteToolButton = (() => {
         .tooltip=${this._noteMenu
                 ? ''
                 : html `<affine-tooltip-content-with-shortcut
-              data-tip="${'Note'}"
+              data-tip="${translateKey(this.edgeless.std, ...GFX_NOTE_TOOL_LABEL)}"
               data-shortcut="${'N'}"
             ></affine-tooltip-content-with-shortcut>`}
         .tooltipOffset=${17}

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

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

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

@@ -0,0 +1,27 @@
+import { type ChromeWording, NOTE_SHADOW_BOX, NOTE_SHADOW_FILM, NOTE_SHADOW_NONE, NOTE_SHADOW_PAPER, NOTE_SHADOW_STICKER, TOOLBAR_LINK } from '../affine-shared/services/index.js';
+/**
+ * This package's own wordings, declared beside the code that renders them —
+ * the edgeless "add note" senior tool and its shadow/display-mode panels.
+ * Words this package shares with `blocks/note` (the shadow options, other
+ * than the typo below) live in `chrome.ts` and are re-exported here.
+ */
+export { NOTE_SHADOW_BOX, NOTE_SHADOW_FILM, NOTE_SHADOW_NONE, NOTE_SHADOW_PAPER, NOTE_SHADOW_STICKER, TOOLBAR_LINK as GFX_NOTE_MENU_LINK, };
+/**
+ * `./components/note-shadow-panel.ts`'s own copy of the "floating" shadow —
+ * spelt "Floation" there, a pre-existing typo distinct from `blocks/note`'s
+ * "Floating shadow". The fallback must stay the literal on screen, so it
+ * keeps its own key rather than reusing `blocks/note`'s `NOTE_SHADOW_FLOATING`.
+ */
+export declare const GFX_NOTE_SHADOW_FLOATION: ChromeWording;
+export declare const GFX_NOTE_DISPLAY_MODE_BOTH: ChromeWording;
+export declare const GFX_NOTE_DISPLAY_MODE_PAGE_ONLY: ChromeWording;
+export declare const GFX_NOTE_DISPLAY_MODE_EDGELESS_ONLY: ChromeWording;
+export declare const GFX_NOTE_MENU_IMAGE: ChromeWording;
+export declare const GFX_NOTE_MENU_FILE: ChromeWording;
+export declare const GFX_NOTE_TOOL_LABEL: ChromeWording;
+/**
+ * Every wording DECLARED IN THIS FILE (not re-exported from `chrome.ts`), in
+ * declaration order — walked by `PACKAGE_WORDINGS` in
+ * `packages/affine/all/src/translations.ts`.
+ */
+export declare const GFX_NOTE_WORDINGS: readonly ChromeWording[];

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

@@ -0,0 +1,59 @@
+import { IMAGE_LABEL, NOTE_SHADOW_BOX, NOTE_SHADOW_FILM, NOTE_SHADOW_NONE, NOTE_SHADOW_PAPER, NOTE_SHADOW_STICKER, TOOL_NAME_NOTE, TOOLBAR_LINK, } from '../affine-shared/services/index.js';
+/**
+ * This package's own wordings, declared beside the code that renders them —
+ * the edgeless "add note" senior tool and its shadow/display-mode panels.
+ * Words this package shares with `blocks/note` (the shadow options, other
+ * than the typo below) live in `chrome.ts` and are re-exported here.
+ */
+export { NOTE_SHADOW_BOX, NOTE_SHADOW_FILM, NOTE_SHADOW_NONE, NOTE_SHADOW_PAPER, NOTE_SHADOW_STICKER, TOOLBAR_LINK as GFX_NOTE_MENU_LINK, };
+/**
+ * `./components/note-shadow-panel.ts`'s own copy of the "floating" shadow —
+ * spelt "Floation" there, a pre-existing typo distinct from `blocks/note`'s
+ * "Floating shadow". The fallback must stay the literal on screen, so it
+ * keeps its own key rather than reusing `blocks/note`'s `NOTE_SHADOW_FLOATING`.
+ */
+export const GFX_NOTE_SHADOW_FLOATION = [
+    'com.labre.note.shadow.floation',
+    'Floation shadow',
+];
+/* ── `./components/note-display-mode-panel.ts` ────────────────────────────
+ * A different wording from `blocks/note`'s own display-mode dropdown (which
+ * says "Both" / "Edgeless" / "Page"): this panel's labels read "In Both" /
+ * "In Document Only" / "In Canvas Only", so they get their own keys.
+ */
+export const GFX_NOTE_DISPLAY_MODE_BOTH = [
+    'com.labre.gfx-note.display-mode.in-both',
+    'In Both',
+];
+export const GFX_NOTE_DISPLAY_MODE_PAGE_ONLY = [
+    'com.labre.gfx-note.display-mode.in-page-only',
+    'In Document Only',
+];
+export const GFX_NOTE_DISPLAY_MODE_EDGELESS_ONLY = [
+    'com.labre.gfx-note.display-mode.in-edgeless-only',
+    'In Canvas Only',
+];
+/* ── `./toolbar/note-menu.ts` — the "add to note" quick-tool row ────────── */
+export const GFX_NOTE_MENU_IMAGE = IMAGE_LABEL;
+export const GFX_NOTE_MENU_FILE = [
+    'com.labre.gfx-note.menu.file',
+    'File',
+];
+/* ── The note senior tool's own name ───────────────────────────────────────
+ * Said in three places (the senior-tool row's tooltip via `labelKey`, the
+ * senior button's own shortcut tooltip, and the quick-tool button's shortcut
+ * tooltip) — one wording for all three.
+ */
+export const GFX_NOTE_TOOL_LABEL = TOOL_NAME_NOTE;
+/**
+ * Every wording DECLARED IN THIS FILE (not re-exported from `chrome.ts`), in
+ * declaration order — walked by `PACKAGE_WORDINGS` in
+ * `packages/affine/all/src/translations.ts`.
+ */
+export const GFX_NOTE_WORDINGS = [
+    GFX_NOTE_SHADOW_FLOATION,
+    GFX_NOTE_DISPLAY_MODE_BOTH,
+    GFX_NOTE_DISPLAY_MODE_PAGE_ONLY,
+    GFX_NOTE_DISPLAY_MODE_EDGELESS_ONLY,
+    GFX_NOTE_MENU_FILE,
+];

package/dist/_pkgs/affine-gfx-pointer/quick-tool/default-tool-button.js

@@ -33,12 +33,14 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { DefaultTool } from '../../affine-block-surface/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
 import { QuickToolMixin } from '../../affine-widget-edgeless-toolbar/index.js';
 import { HandIcon, SelectIcon } from '@blocksuite/icons/lit';
 import { effect } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { query } from 'lit/decorators.js';
 import { PanTool } from '../tools/index.js';
+import { POINTER_TOOLTIP_HAND, POINTER_TOOLTIP_SELECT } from '../translations.js';
 let EdgelessDefaultToolButton = (() => {
     let _classSuper = QuickToolMixin(LitElement);
     let _currentIcon_decorators;
@@ -112,8 +114,14 @@ let EdgelessDefaultToolButton = (() => {
             const type = this.edgelessTool?.toolType?.toolName;
             const { active } = this;
             const tipInfo = type === 'pan'
-                ? { tip: 'Hand', shortcut: 'H' }
-                : { tip: 'Select', shortcut: 'V' };
+                ? {
+                    tip: translateKey(this.edgeless.std, ...POINTER_TOOLTIP_HAND),
+                    shortcut: 'H',
+                }
+                : {
+                    tip: translateKey(this.edgeless.std, ...POINTER_TOOLTIP_SELECT),
+                    shortcut: 'V',
+                };
             return html `
       <edgeless-tool-icon-button
         class="edgeless-default-button ${type}"

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

@@ -0,0 +1,9 @@
+import type { ChromeWording } from '../affine-shared/services/index.js';
+/**
+ * This package's own wordings, joined into `PACKAGE_WORDINGS` in
+ * `@labre/affine/translations` — see that file and
+ * `packages/affine/shared/src/services/translation-service/README.md`.
+ */
+export declare const POINTER_TOOLTIP_HAND: ChromeWording;
+export declare const POINTER_TOOLTIP_SELECT: ChromeWording;
+export declare const POINTER_WORDINGS: readonly ChromeWording[];

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

@@ -0,0 +1,17 @@
+/**
+ * This package's own wordings, joined into `PACKAGE_WORDINGS` in
+ * `@labre/affine/translations` — see that file and
+ * `packages/affine/shared/src/services/translation-service/README.md`.
+ */
+export const POINTER_TOOLTIP_HAND = [
+    'com.labre.pointer.tooltip.hand',
+    'Hand',
+];
+export const POINTER_TOOLTIP_SELECT = [
+    'com.labre.pointer.tooltip.select',
+    'Select',
+];
+export const POINTER_WORDINGS = [
+    POINTER_TOOLTIP_HAND,
+    POINTER_TOOLTIP_SELECT,
+];

package/dist/_pkgs/affine-gfx-shape/components/shape-panel.d.ts

@@ -1,4 +1,5 @@
 import { ShapeStyle } from '../../affine-model/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import { LitElement } from 'lit';
 import { Subject } from 'rxjs';
 import type { ShapeTool } from '../shape-tool.js';
@@ -10,6 +11,9 @@ export declare class EdgelessShapePanel extends LitElement {
     private _onSelect;
     disconnectedCallback(): void;
     render(): unknown;
+    /** Set by a caller that has one — optional so this panel still renders (in
+     * English) when created with none, as it is today. */
+    accessor std: BlockStdScope | undefined;
     accessor selectedShape: ShapeTool['activatedOption']['shapeName'] | null | undefined;
     accessor shapeStyle: ShapeStyle;
 }

package/dist/_pkgs/affine-gfx-shape/components/shape-panel.js

@@ -33,6 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { ShapeStyle } from '../../affine-model/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -40,6 +41,9 @@ import { Subject } from 'rxjs';
 import { ShapeComponentConfig } from '../toolbar/shape-menu-config.js';
 let EdgelessShapePanel = (() => {
     let _classSuper = LitElement;
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _selectedShape_decorators;
     let _selectedShape_initializers = [];
     let _selectedShape_extraInitializers = [];
@@ -49,8 +53,10 @@ let EdgelessShapePanel = (() => {
     return class EdgelessShapePanel extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [property({ attribute: false })];
             _selectedShape_decorators = [property({ attribute: false })];
             _shapeStyle_decorators = [property({ attribute: false })];
+            __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);
             __esDecorate(this, null, _selectedShape_decorators, { kind: "accessor", name: "selectedShape", static: false, private: false, access: { has: obj => "selectedShape" in obj, get: obj => obj.selectedShape, set: (obj, value) => { obj.selectedShape = value; } }, metadata: _metadata }, _selectedShape_initializers, _selectedShape_extraInitializers);
             __esDecorate(this, null, _shapeStyle_decorators, { kind: "accessor", name: "shapeStyle", static: false, private: false, access: { has: obj => "shapeStyle" in obj, get: obj => obj.shapeStyle, set: (obj, value) => { obj.shapeStyle = value; } }, metadata: _metadata }, _shapeStyle_initializers, _shapeStyle_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -72,9 +78,11 @@ let EdgelessShapePanel = (() => {
             super.disconnectedCallback();
         }
         render() {
-            return repeat(ShapeComponentConfig, item => item.name, ({ name, generalIcon, scribbledIcon, tooltip, disabled }) => html `<edgeless-tool-icon-button
+            return repeat(ShapeComponentConfig, item => item.name, ({ name, generalIcon, scribbledIcon, tooltip, tooltipWording, disabled, }) => html `<edgeless-tool-icon-button
           .disabled=${disabled}
-          .tooltip=${tooltip}
+          .tooltip=${this.std
+                ? translateKey(this.std, ...tooltipWording)
+                : tooltip}
           .active=${this.selectedShape === name}
           .activeMode=${'background'}
           .iconSize=${'20px'}
@@ -89,6 +97,11 @@ let EdgelessShapePanel = (() => {
                 : scribbledIcon}
         </edgeless-tool-icon-button>`);
         }
+        #std_accessor_storage;
+        /** Set by a caller that has one — optional so this panel still renders (in
+         * English) when created with none, as it is today. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         #selectedShape_accessor_storage;
         get selectedShape() { return this.#selectedShape_accessor_storage; }
         set selectedShape(value) { this.#selectedShape_accessor_storage = value; }
@@ -100,7 +113,8 @@ let EdgelessShapePanel = (() => {
             this.slots = {
                 select: new Subject(),
             };
-            this.#selectedShape_accessor_storage = __runInitializers(this, _selectedShape_initializers, undefined);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, undefined);
+            this.#selectedShape_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _selectedShape_initializers, undefined));
             this.#shapeStyle_accessor_storage = (__runInitializers(this, _selectedShape_extraInitializers), __runInitializers(this, _shapeStyle_initializers, ShapeStyle.Scribbled));
             __runInitializers(this, _shapeStyle_extraInitializers);
         }

package/dist/_pkgs/affine-gfx-shape/components/shape-style-panel.d.ts

@@ -1,4 +1,5 @@
 import { ShapeStyle } from '../../affine-model/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import { LitElement } from 'lit';
 export declare class EdgelessShapeStylePanel extends LitElement {
     static styles: import("lit").CSSResult;
@@ -6,4 +7,7 @@ export declare class EdgelessShapeStylePanel extends LitElement {
     render(): unknown;
     accessor onSelect: undefined | ((value: ShapeStyle) => void);
     accessor value: ShapeStyle;
+    /** Set by a caller that has one — optional so this panel still renders (in
+     * English) when created with none, as it is today. */
+    accessor std: BlockStdScope | undefined;
 }

package/dist/_pkgs/affine-gfx-shape/components/shape-style-panel.js

@@ -33,6 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { ShapeStyle } from '../../affine-model/index.js';
+import { STYLE_GENERAL, STYLE_SCRIBBLED, translateKey, } from '../../affine-shared/services/index.js';
 import { StyleGeneralIcon, StyleScribbleIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -41,10 +42,12 @@ const SHAPE_STYLE_LIST = [
     {
         value: ShapeStyle.General,
         icon: StyleGeneralIcon(),
+        wording: STYLE_GENERAL,
     },
     {
         value: ShapeStyle.Scribbled,
         icon: StyleScribbleIcon(),
+        wording: STYLE_SCRIBBLED,
     },
 ];
 let EdgelessShapeStylePanel = (() => {
@@ -55,13 +58,18 @@ let EdgelessShapeStylePanel = (() => {
     let _value_decorators;
     let _value_initializers = [];
     let _value_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     return class EdgelessShapeStylePanel extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _onSelect_decorators = [property({ attribute: false })];
             _value_decorators = [property({ attribute: false })];
+            _std_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _onSelect_decorators, { kind: "accessor", name: "onSelect", static: false, private: false, access: { has: obj => "onSelect" in obj, get: obj => obj.onSelect, set: (obj, value) => { obj.onSelect = value; } }, metadata: _metadata }, _onSelect_initializers, _onSelect_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 `
@@ -79,17 +87,22 @@ let EdgelessShapeStylePanel = (() => {
             }
         }
         render() {
-            return repeat(SHAPE_STYLE_LIST, item => item.value, ({ value, icon }) => html `<edgeless-tool-icon-button
+            return repeat(SHAPE_STYLE_LIST, item => item.value, ({ value, icon, wording }) => {
+                const label = this.std
+                    ? translateKey(this.std, ...wording)
+                    : wording[1];
+                return html `<edgeless-tool-icon-button
           .tipPosition=${'top'}
           .activeMode=${'background'}
-          aria-label=${value}
-          .tooltip=${value}
+          aria-label=${label}
+          .tooltip=${label}
           .active=${this.value === value}
           .iconSize=${'20px'}
           @click=${() => this._onSelect(value)}
         >
           ${icon}
-        </edgeless-tool-icon-button>`);
+        </edgeless-tool-icon-button>`;
+            });
         }
         #onSelect_accessor_storage = __runInitializers(this, _onSelect_initializers, undefined);
         get onSelect() { return this.#onSelect_accessor_storage; }
@@ -97,9 +110,14 @@ let EdgelessShapeStylePanel = (() => {
         #value_accessor_storage = (__runInitializers(this, _onSelect_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, undefined));
+        /** Set by a caller that has one — optional so this panel still renders (in
+         * English) when created with none, as it is today. */
+        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);
         }
     };
 })();

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

@@ -8,7 +8,6 @@ export declare class EdgelessShapeMenu extends EdgelessShapeMenu_base {
     accessor edgeless: BlockComponent;
     private readonly _props$;
     private readonly _setFillColor;
-    private readonly _setShapeStyle;
     private readonly _theme$;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/_pkgs/affine-gfx-shape/draggable/shape-menu.js

@@ -34,13 +34,12 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { DefaultTheme, isTransparent, ShapeStyle, ShapeType, } from '../../affine-model/index.js';
 import { EditPropsStore, FeatureFlagService, ThemeProvider, } from '../../affine-shared/services/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
-import { StyleGeneralIcon, StyleScribbleIcon } from '@blocksuite/icons/lit';
 import { GfxControllerIdentifier, } from '../../std/gfx/index.js';
 import { computed, effect, signal } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
 import { PolygonTool } from '../polygon-tool.js';
 import { ShapeTool } from '../shape-tool.js';
 import { ShapeComponentConfig } from '../toolbar/index.js';
@@ -70,15 +69,13 @@ let EdgelessShapeMenu = (() => {
       display: flex;
       align-items: center;
     }
-    .shape-type-container,
-    .shape-style-container {
+    .shape-type-container {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 14px;
     }
-    .shape-type-container svg,
-    .shape-style-container svg {
+    .shape-type-container svg {
       fill: var(--affine-icon-color);
       stroke: none;
     }
@@ -112,40 +109,11 @@ let EdgelessShapeMenu = (() => {
             return html `
       <edgeless-slide-menu>
         <div class="menu-content">
-          ${
-            // TODO(@fundon): add a flag
-            when(false, () => html `
-                <div class="shape-style-container">
-                  <edgeless-tool-icon-button
-                    .tooltip=${'General'}
-                    .active=${shapeStyle === ShapeStyle.General}
-                    .activeMode=${'background'}
-                    .iconSize=${'20px'}
-                    @click=${() => {
-                this._setShapeStyle(ShapeStyle.General);
-            }}
-                  >
-                    ${StyleGeneralIcon()}
-                  </edgeless-tool-icon-button>
-                  <edgeless-tool-icon-button
-                    .tooltip=${'Scribbled'}
-                    .active=${shapeStyle === ShapeStyle.Scribbled}
-                    .activeMode=${'background'}
-                    .iconSize=${'20px'}
-                    @click=${() => {
-                this._setShapeStyle(ShapeStyle.Scribbled);
-            }}
-                  >
-                    ${StyleScribbleIcon()}
-                  </edgeless-tool-icon-button>
-                </div>
-                <menu-divider .vertical=${true}></menu-divider>
-              `)}
           <div class="shape-type-container">
-            ${ShapeComponentConfig.map(({ name, generalIcon, scribbledIcon, tooltip }) => {
+            ${ShapeComponentConfig.map(({ name, generalIcon, scribbledIcon, tooltipWording }) => {
                 return html `
                   <edgeless-tool-icon-button
-                    .tooltip=${tooltip}
+                    .tooltip=${translateKey(this.edgeless.std, ...tooltipWording)}
                     .active=${shapeName === name}
                     .activeMode=${'background'}
                     .iconSize=${'20px'}
@@ -167,6 +135,7 @@ let EdgelessShapeMenu = (() => {
             .hasTransparent=${!this.edgeless.store
                 .get(FeatureFlagService)
                 .getFlag('enable_color_picker')}
+            .std=${this.edgeless.std}
             @select=${(e) => this._setFillColor(e.detail)}
           ></edgeless-color-panel>
         </div>
@@ -207,15 +176,6 @@ let EdgelessShapeMenu = (() => {
                 });
                 this.onChange(shapeName);
             };
-            this._setShapeStyle = (shapeStyle) => {
-                const { shapeName } = this._props$.value;
-                this.edgeless.std
-                    .get(EditPropsStore)
-                    .recordLastProps(`shape:${shapeName}`, {
-                    shapeStyle,
-                });
-                this.onChange(shapeName);
-            };
             this._theme$ = computed(() => {
                 return this.edgeless.std.get(ThemeProvider).theme$.value;
             });

package/dist/_pkgs/affine-gfx-shape/draggable/shape-tool-button.js

@@ -1,7 +1,9 @@
 import { ShapeType } from '../../affine-model/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
 import { EdgelessToolbarToolMixin } from '../../affine-widget-edgeless-toolbar/index.js';
 import { SignalWatcher } from '../../global/lit/index.js';
 import { css, html, LitElement } from 'lit';
+import { SHAPE_TOOL_NAME } from '../translations.js';
 import { PolygonTool } from '../polygon-tool.js';
 import { ShapeTool } from '../shape-tool.js';
 export class EdgelessShapeToolButton extends EdgelessToolbarToolMixin(SignalWatcher(LitElement)) {
@@ -74,7 +76,7 @@ export class EdgelessShapeToolButton extends EdgelessToolbarToolMixin(SignalWatc
         .tooltip=${this.popper
             ? ''
             : html `<affine-tooltip-content-with-shortcut
-              data-tip="${'Shape'}"
+              data-tip="${translateKey(this.edgeless.std, ...SHAPE_TOOL_NAME)}"
               data-shortcut="${'S'}"
             ></affine-tooltip-content-with-shortcut>`}
         .tooltipOffset=${5}

package/dist/_pkgs/affine-gfx-shape/element-renderer/highlighter.js

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

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

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