@formicoidea/labre-core 0.39.3 → 0.41.0

package/dist/_pkgs/affine-components/color-picker/types.d.ts

@@ -1,3 +1,4 @@
+import type { ChromeWording } from '../../affine-shared/services/index.js';
 import type { ColorScheme, Palette } from '../../affine-model/index.js';
 export type Rgb = {
     r: number;
@@ -39,3 +40,23 @@ export type PickColorEvent = {
     type: 'pick';
     detail: Palette;
 };
+/**
+ * A swatch that names itself, for a colour panel that has to display
+ * something better than `Palette.key` — the framework-agnostic extension
+ * point `resolvePaletteLabel` (`utils.ts`) checks FIRST, before falling back
+ * to the default theme's own `PALETTE_NAME_WORDINGS` lookup
+ * (`@labre/affine-shared/services`) and, with neither, to the raw `key`
+ * exactly as every colour panel displayed it before this type existed.
+ *
+ * `Palette` itself (`packages/affine/model`, RED ZONE) is never touched: a
+ * framework that wants its own swatch names (Wardley's "Wonder" / "Peace" /
+ * "War", EDGY's "Identity" / "Architecture"…) builds its palette as
+ * `NamedPalette[]` OUTSIDE the model, in its own `toolbar/node-config.ts` —
+ * see `packages/affine/gfx/wardley/src/toolbar/node-config.ts` and its EDGY
+ * counterpart. Optional and additive: a plain `Palette[]` (the default
+ * theme's tables, any pre-existing caller) is still assignable wherever a
+ * `NamedPalette[]` is expected, so nothing that already worked has to change.
+ */
+export type NamedPalette = Palette & {
+    labelWording?: ChromeWording;
+};

package/dist/_pkgs/affine-components/color-picker/utils.d.ts

@@ -1,5 +1,6 @@
-import type { Color, ColorScheme } from '../../affine-model/index.js';
-import type { Hsv, Hsva, ModeType, PickColorType, Point, Rgb, Rgba } from './types.js';
+import type { Color, ColorScheme, Palette } from '../../affine-model/index.js';
+import type { BlockStdScope } from '../../std/index.js';
+import type { Hsv, Hsva, ModeType, NamedPalette, PickColorType, Point, Rgb, Rgba } from './types.js';
 export declare const defaultPoint: (x?: number, y?: number) => Point;
 export declare const defaultHsva: () => Hsva;
 export declare function linearGradientAt(t: number): Rgb;
@@ -83,3 +84,28 @@ export declare const calcCustomButtonStyle: (color: string, isCustomColor: boole
     '--c': string;
 };
 export declare const adjustColorAlpha: (color: Color, a: number) => Color;
+/**
+ * The swatch's DISPLAYED name — what `edgeless-color-panel` shows as the
+ * swatch's visible label and passes on as its `aria-label`.
+ *
+ * Three tiers, checked in order, mirroring `translateTagLabel`
+ * (`universe-tag-defs-service.ts`)'s own "declared key, then declared
+ * fallback, then raw" shape:
+ *
+ * 1. The swatch's OWN {@link NamedPalette.labelWording}, when the palette
+ *    that built it declared one (a framework's own swatches — Wardley's
+ *    "Wonder", EDGY's "Identity"…).
+ * 2. The default theme's {@link PALETTE_NAME_WORDINGS} lookup, keyed by
+ *    `palette.key` (`'Red'`, `'LightBlue'`…) — the one table every
+ *    `DefaultTheme.*Palettes` swatch resolves through.
+ * 3. `palette.key` itself, unresolved — exactly what every colour panel
+ *    displayed before either mechanism existed, so a swatch this function
+ *    has never heard of (a host's own custom palette, a future table) keeps
+ *    reading exactly as it always has.
+ *
+ * `std` is optional: with none (a detached story, a standalone render with
+ * no block context), tier 1 and 2 still resolve to their ENGLISH fallback
+ * (`wording[1]`) rather than the raw key, since that fallback IS the literal
+ * already on screen — only `translateKey`'s host lookup is skipped.
+ */
+export declare function resolvePaletteLabel(std: BlockStdScope | undefined, palette: Palette | NamedPalette): string;

package/dist/_pkgs/affine-components/color-picker/utils.js

@@ -1,4 +1,5 @@
 // https://www.w3.org/TR/css-color-4/
+import { PALETTE_NAME_WORDINGS, translateKey, } from '../../affine-shared/services/index.js';
 import clamp from 'lodash-es/clamp.js';
 import { COLORS, FIRST_COLOR } from './consts.js';
 export const defaultPoint = (x = 0, y = 0) => ({ x, y });
@@ -289,3 +290,34 @@ export const adjustColorAlpha = (color, a) => {
     }
     return newColor;
 };
+/**
+ * The swatch's DISPLAYED name — what `edgeless-color-panel` shows as the
+ * swatch's visible label and passes on as its `aria-label`.
+ *
+ * Three tiers, checked in order, mirroring `translateTagLabel`
+ * (`universe-tag-defs-service.ts`)'s own "declared key, then declared
+ * fallback, then raw" shape:
+ *
+ * 1. The swatch's OWN {@link NamedPalette.labelWording}, when the palette
+ *    that built it declared one (a framework's own swatches — Wardley's
+ *    "Wonder", EDGY's "Identity"…).
+ * 2. The default theme's {@link PALETTE_NAME_WORDINGS} lookup, keyed by
+ *    `palette.key` (`'Red'`, `'LightBlue'`…) — the one table every
+ *    `DefaultTheme.*Palettes` swatch resolves through.
+ * 3. `palette.key` itself, unresolved — exactly what every colour panel
+ *    displayed before either mechanism existed, so a swatch this function
+ *    has never heard of (a host's own custom palette, a future table) keeps
+ *    reading exactly as it always has.
+ *
+ * `std` is optional: with none (a detached story, a standalone render with
+ * no block context), tier 1 and 2 still resolve to their ENGLISH fallback
+ * (`wording[1]`) rather than the raw key, since that fallback IS the literal
+ * already on screen — only `translateKey`'s host lookup is skipped.
+ */
+export function resolvePaletteLabel(std, palette) {
+    const wording = palette.labelWording ??
+        PALETTE_NAME_WORDINGS[palette.key];
+    if (!wording)
+        return palette.key;
+    return std ? translateKey(std, ...wording) : wording[1];
+}

package/dist/_pkgs/affine-components/context-menu/menu-renderer.d.ts

@@ -1,3 +1,4 @@
+import type { BlockStdScope } from '../../std/index.js';
 import { ShadowlessElement } from '../../std/index.js';
 import { type Middleware, type ReferenceElement } from '@floating-ui/dom';
 import type { MenuFocusable } from './focusable.js';
@@ -5,6 +6,7 @@ import { Menu, type MenuConfig, type MenuOptions } from './menu.js';
 import type { MenuComponentInterface } from './types.js';
 declare const MenuComponent_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class MenuComponent extends MenuComponent_base implements MenuComponentInterface {
+    accessor std: BlockStdScope;
     static styles: import("lit").CSSResult;
     private readonly _clickContainer;
     private readonly searchRef;
@@ -25,6 +27,7 @@ declare global {
 }
 declare const MobileMenuComponent_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class MobileMenuComponent extends MobileMenuComponent_base implements MenuComponentInterface {
+    accessor std: BlockStdScope;
     static styles: import("lit").CSSResult;
     onClose: () => void;
     focusTo(ele?: MenuFocusable): void;

package/dist/_pkgs/affine-components/context-menu/menu-renderer.js

@@ -32,30 +32,41 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+import { translateKey } from '../../affine-shared/services/index.js';
 import { unsafeCSSVar, unsafeCSSVarV2 } from '../../affine-shared/theme/index.js';
 import { IS_MOBILE } from '../../global/env/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
 import { ArrowLeftBigIcon, ArrowLeftSmallIcon, CloseIcon, SearchIcon, } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../std/index.js';
+import { ShadowlessElement, stdContext } from '../../std/index.js';
 import { RANGE_SYNC_EXCLUDE_ATTR } from '../../std/inline/index.js';
 import { autoPlacement, autoUpdate, computePosition, offset, shift, } from '@floating-ui/dom';
+import { consume } from '@lit/context';
 import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { Menu } from './menu.js';
+import { CONTEXT_MENU_DONE, CONTEXT_MENU_NO_RESULTS } from '../translations.js';
 let MenuComponent = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _menu_decorators;
     let _menu_initializers = [];
     let _menu_extraInitializers = [];
     return class MenuComponent extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _menu_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, _menu_decorators, { kind: "accessor", name: "menu", static: false, private: false, access: { has: obj => "menu" in obj, get: obj => obj.menu, set: (obj, value) => { obj.menu = value; } }, metadata: _metadata }, _menu_initializers, _menu_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        #std_accessor_storage;
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         static { this.styles = css `
     affine-menu {
       font-family: var(--affine-font-family);
@@ -171,7 +182,11 @@ let MenuComponent = (() => {
       ${this.renderTitle()} ${this.renderSearch()}
       <div class="affine-menu-body">
         ${result.length === 0 && this.menu.enableSearch
-                ? html ` <div class="no-results">No Results</div>`
+                ? html ` <div class="no-results">
+              ${this.std
+                    ? translateKey(this.std, ...CONTEXT_MENU_NO_RESULTS)
+                    : CONTEXT_MENU_NO_RESULTS[1]}
+            </div>`
                 : ''}
         ${result}
       </div>
@@ -250,11 +265,12 @@ let MenuComponent = (() => {
         set menu(value) { this.#menu_accessor_storage = value; }
         constructor() {
             super(...arguments);
-            this._clickContainer = (e) => {
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this._clickContainer = (__runInitializers(this, _std_extraInitializers), (e) => {
                 e.stopPropagation();
                 this.focusInput();
                 this.menu.closeSubMenu();
-            };
+            });
             this.searchRef = createRef();
             this.#menu_accessor_storage = __runInitializers(this, _menu_initializers, void 0);
             __runInitializers(this, _menu_extraInitializers);
@@ -264,16 +280,24 @@ let MenuComponent = (() => {
 export { MenuComponent };
 let MobileMenuComponent = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _menu_decorators;
     let _menu_initializers = [];
     let _menu_extraInitializers = [];
     return class MobileMenuComponent extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _menu_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, _menu_decorators, { kind: "accessor", name: "menu", static: false, private: false, access: { has: obj => "menu" in obj, get: obj => obj.menu, set: (obj, value) => { obj.menu = value; } }, metadata: _metadata }, _menu_initializers, _menu_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        #std_accessor_storage;
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         static { this.styles = css `
     mobile-menu {
       height: 100%;
@@ -365,7 +389,9 @@ let MobileMenuComponent = (() => {
           margin-right: 10px;
          "
         >
-          Done
+          ${this.std
+                ? translateKey(this.std, ...CONTEXT_MENU_DONE)
+                : CONTEXT_MENU_DONE[1]}
         </div>
       </div>
     `;
@@ -375,7 +401,8 @@ let MobileMenuComponent = (() => {
         set menu(value) { this.#menu_accessor_storage = value; }
         constructor() {
             super(...arguments);
-            this.onClose = () => {
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.onClose = (__runInitializers(this, _std_extraInitializers), () => {
                 const close = this.menu.options.title?.onClose;
                 if (close) {
                     close();
@@ -383,7 +410,7 @@ let MobileMenuComponent = (() => {
                 else {
                     this.menu.close();
                 }
-            };
+            });
             this.#menu_accessor_storage = __runInitializers(this, _menu_initializers, void 0);
             __runInitializers(this, _menu_extraInitializers);
         }

package/dist/_pkgs/affine-components/edgeless-line-styles-panel/line-styles-panel.d.ts

@@ -1,4 +1,5 @@
 import { LineWidth, StrokeStyle } from '../../affine-model/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import { LitElement } from 'lit';
 export type LineDetailType = {
     type: 'size';
@@ -9,6 +10,7 @@ export type LineDetailType = {
 };
 declare const EdgelessLineStylesPanel_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class EdgelessLineStylesPanel extends EdgelessLineStylesPanel_base {
+    accessor std: BlockStdScope;
     static styles: import("lit").CSSResult;
     select(detail: LineDetailType): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/_pkgs/affine-components/edgeless-line-styles-panel/line-styles-panel.js

@@ -33,12 +33,16 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { LineWidth, StrokeStyle } from '../../affine-model/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { BanIcon, DashLineIcon, StraightLineIcon } from '@blocksuite/icons/lit';
+import { stdContext } from '../../std/index.js';
+import { consume } from '@lit/context';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { LINE_STYLE_DASH, LINE_STYLE_NONE, LINE_STYLE_SOLID, } from '../translations.js';
 const LINE_STYLE_LIST = [
     {
         key: 'Solid',
@@ -56,8 +60,16 @@ const LINE_STYLE_LIST = [
         icon: BanIcon(),
     },
 ];
+const LINE_STYLE_WORDINGS = {
+    Solid: LINE_STYLE_SOLID,
+    Dash: LINE_STYLE_DASH,
+    None: LINE_STYLE_NONE,
+};
 let EdgelessLineStylesPanel = (() => {
     let _classSuper = WithDisposable(LitElement);
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _lineStyle_decorators;
     let _lineStyle_initializers = [];
     let _lineStyle_extraInitializers = [];
@@ -70,14 +82,19 @@ let EdgelessLineStylesPanel = (() => {
     return class EdgelessLineStylesPanel extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _lineStyle_decorators = [property({ attribute: false })];
             _lineSize_decorators = [property({ attribute: false })];
             _lineStyles_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, _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, _lineStyles_decorators, { kind: "accessor", name: "lineStyles", static: false, private: false, access: { has: obj => "lineStyles" in obj, get: obj => obj.lineStyles, set: (obj, value) => { obj.lineStyles = value; } }, metadata: _metadata }, _lineStyles_initializers, _lineStyles_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        #std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         static { this.styles = css `
     edgeless-line-width-panel {
       flex: 1;
@@ -116,7 +133,9 @@ let EdgelessLineStylesPanel = (() => {
                 return html `
             <editor-icon-button
               class=${classMap(classInfo)}
-              .tooltip="${key}"
+              .tooltip="${this.std
+                    ? translateKey(this.std, ...LINE_STYLE_WORDINGS[key])
+                    : LINE_STYLE_WORDINGS[key][1]}"
               .withHover=${active}
               @click=${() => this.select({ type: 'style', value })}
             >
@@ -126,7 +145,7 @@ let EdgelessLineStylesPanel = (() => {
             })}
     `;
         }
-        #lineStyle_accessor_storage = __runInitializers(this, _lineStyle_initializers, void 0);
+        #lineStyle_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _lineStyle_initializers, void 0));
         get lineStyle() { return this.#lineStyle_accessor_storage; }
         set lineStyle(value) { this.#lineStyle_accessor_storage = value; }
         #lineSize_accessor_storage = (__runInitializers(this, _lineStyle_extraInitializers), __runInitializers(this, _lineSize_initializers, LineWidth.Two));

package/dist/_pkgs/affine-components/edgeless-line-width-panel/line-width-panel.d.ts

@@ -1,6 +1,8 @@
+import type { BlockStdScope } from '../../std/index.js';
 import { LitElement } from 'lit';
 declare const EdgelessLineWidthPanel_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class EdgelessLineWidthPanel extends EdgelessLineWidthPanel_base {
+    accessor std: BlockStdScope;
     private _onSelect;
     render(): import("lit-html").TemplateResult<1>;
     accessor disabled: boolean;

package/dist/_pkgs/affine-components/edgeless-line-width-panel/line-width-panel.js

@@ -33,11 +33,18 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { BRUSH_LINE_WIDTHS, LineWidth } from '../../affine-model/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
+import { stdContext } from '../../std/index.js';
+import { consume } from '@lit/context';
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { LINE_WIDTH_THICKNESS } from '../translations.js';
 let EdgelessLineWidthPanel = (() => {
     let _classSuper = WithDisposable(LitElement);
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _disabled_decorators;
     let _disabled_initializers = [];
     let _disabled_extraInitializers = [];
@@ -53,16 +60,21 @@ let EdgelessLineWidthPanel = (() => {
     return class EdgelessLineWidthPanel extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _disabled_decorators = [property({ attribute: false })];
             _hasTooltip_decorators = [property({ attribute: false })];
             _lineWidths_decorators = [property({ attribute: false })];
             _selectedSize_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, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
             __esDecorate(this, null, _hasTooltip_decorators, { kind: "accessor", name: "hasTooltip", static: false, private: false, access: { has: obj => "hasTooltip" in obj, get: obj => obj.hasTooltip, set: (obj, value) => { obj.hasTooltip = value; } }, metadata: _metadata }, _hasTooltip_initializers, _hasTooltip_extraInitializers);
             __esDecorate(this, null, _lineWidths_decorators, { kind: "accessor", name: "lineWidths", static: false, private: false, access: { has: obj => "lineWidths" in obj, get: obj => obj.lineWidths, set: (obj, value) => { obj.lineWidths = value; } }, metadata: _metadata }, _lineWidths_initializers, _lineWidths_extraInitializers);
             __esDecorate(this, null, _selectedSize_decorators, { kind: "accessor", name: "selectedSize", static: false, private: false, access: { has: obj => "selectedSize" in obj, get: obj => obj.selectedSize, set: (obj, value) => { obj.selectedSize = value; } }, metadata: _metadata }, _selectedSize_initializers, _selectedSize_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        #std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         _onSelect(lineWidth) {
             this.dispatchEvent(new CustomEvent('select', {
                 detail: lineWidth,
@@ -76,14 +88,18 @@ let EdgelessLineWidthPanel = (() => {
       ?disabled=${this.disabled}
       .range=${{ points: this.lineWidths }}
       .value=${this.selectedSize}
-      .tooltip=${this.hasTooltip ? 'Thickness' : undefined}
+      .tooltip=${this.hasTooltip
+                ? this.std
+                    ? translateKey(this.std, ...LINE_WIDTH_THICKNESS)
+                    : LINE_WIDTH_THICKNESS[1]
+                : undefined}
       @select=${(e) => {
                 e.stopPropagation();
                 this._onSelect(e.detail.value);
             }}
     ></affine-slider>`;
         }
-        #disabled_accessor_storage = __runInitializers(this, _disabled_initializers, false);
+        #disabled_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _disabled_initializers, false));
         get disabled() { return this.#disabled_accessor_storage; }
         set disabled(value) { this.#disabled_accessor_storage = value; }
         #hasTooltip_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _hasTooltip_initializers, true));

package/dist/_pkgs/affine-components/edgeless-shape-color-picker/color-picker.d.ts

@@ -1,4 +1,5 @@
 import { type Color, type ColorScheme, type LineWidth, type Palette, type ShapeProps, type StrokeStyle } from '../../affine-model/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import { LitElement } from 'lit';
 import type { EditorMenuButton } from '../toolbar/index.js';
 type TabType = 'normal' | 'custom';
@@ -6,6 +7,7 @@ type ColorType = Extract<keyof ShapeProps, 'fillColor' | 'strokeColor'>;
 declare const EdgelessShapeColorPicker_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class EdgelessShapeColorPicker extends EdgelessShapeColorPicker_base {
     #private;
+    accessor std: BlockStdScope;
     static styles: import("lit").CSSResult;
     tabType$: import("@preact/signals-core").Signal<TabType>;
     colorType$: import("@preact/signals-core").Signal<ColorType>;

package/dist/_pkgs/affine-components/edgeless-shape-color-picker/color-picker.js

@@ -33,9 +33,12 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { DefaultTheme, resolveColor, } from '../../affine-model/index.js';
+import { BOARD_BORDER_STYLE_LABEL, translateKey, } from '../../affine-shared/services/index.js';
 import { unsafeCSSVarV2 } from '../../affine-shared/theme/index.js';
 import { stopPropagation } from '../../affine-shared/utils/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
+import { stdContext } from '../../std/index.js';
+import { consume } from '@lit/context';
 import { batch, signal } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -44,8 +47,12 @@ import { repeat } from 'lit-html/directives/repeat.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { when } from 'lit-html/directives/when.js';
 import { calcCustomButtonStyle, keepColor, packColorsWith, preprocessColor, rgbaToHex8, } from '../color-picker/index.js';
+import { BORDER_COLOR_LABEL, COLOR_LABEL, FILL_COLOR_LABEL, } from '../translations.js';
 let EdgelessShapeColorPicker = (() => {
     let _classSuper = WithDisposable(SignalWatcher(LitElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _payload_decorators;
     let _payload_initializers = [];
     let _payload_extraInitializers = [];
@@ -58,14 +65,19 @@ let EdgelessShapeColorPicker = (() => {
     return class EdgelessShapeColorPicker extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _payload_decorators = [property({ attribute: false })];
             _palettes_decorators = [property({ attribute: false })];
             _menuButton_decorators = [query('editor-menu-button')];
+            __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, _payload_decorators, { kind: "accessor", name: "payload", static: false, private: false, access: { has: obj => "payload" in obj, get: obj => obj.payload, set: (obj, value) => { obj.payload = value; } }, metadata: _metadata }, _payload_initializers, _payload_extraInitializers);
             __esDecorate(this, null, _palettes_decorators, { kind: "accessor", name: "palettes", static: false, private: false, access: { has: obj => "palettes" in obj, get: obj => obj.palettes, set: (obj, value) => { obj.palettes = value; } }, metadata: _metadata }, _palettes_initializers, _palettes_extraInitializers);
             __esDecorate(this, null, _menuButton_decorators, { kind: "accessor", name: "menuButton", static: false, private: false, access: { has: obj => "menuButton" in obj, get: obj => obj.menuButton, set: (obj, value) => { obj.menuButton = value; } }, metadata: _metadata }, _menuButton_initializers, _menuButton_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        #std_accessor_storage;
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         static { this.styles = css `
     .pickers {
       display: flex;
@@ -126,7 +138,14 @@ let EdgelessShapeColorPicker = (() => {
         .contentPadding="${tabType === 'normal' ? '8px' : '0px'}"
         @click=${stopPropagation}
         .button=${html `
-          <editor-icon-button aria-label="Color" .tooltip="${'Color'}">
+          <editor-icon-button
+            aria-label="${this.std
+                ? translateKey(this.std, ...COLOR_LABEL)
+                : COLOR_LABEL[1]}"
+            .tooltip="${this.std
+                ? translateKey(this.std, ...COLOR_LABEL)
+                : COLOR_LABEL[1]}"
+          >
             <edgeless-color-button
               .color=${fillColorWithoutAlpha}
             ></edgeless-color-button>
@@ -141,14 +160,18 @@ let EdgelessShapeColorPicker = (() => {
                         return html `
                   ${repeat([
                             {
-                                label: 'Fill color',
+                                label: this.std
+                                    ? translateKey(this.std, ...FILL_COLOR_LABEL)
+                                    : FILL_COLOR_LABEL[1],
                                 type: 'fillColor',
                                 value: fillColor,
                                 hollowCircle: false,
                                 onPick: this.#pickFillColor,
                             },
                             {
-                                label: 'Border color',
+                                label: this.std
+                                    ? translateKey(this.std, ...BORDER_COLOR_LABEL)
+                                    : BORDER_COLOR_LABEL[1],
                                 type: 'strokeColor',
                                 value: strokeColor,
                                 hollowCircle: true,
@@ -164,6 +187,7 @@ let EdgelessShapeColorPicker = (() => {
                         .value=${value}
                         .theme=${theme}
                         .palettes=${palettes}
+                        .std=${this.std}
                         @select=${onPick}
                       >
                         ${when(enableCustomColor, () => {
@@ -180,7 +204,11 @@ let EdgelessShapeColorPicker = (() => {
                         })}
                       </edgeless-color-panel>
                     `)}
-                  <div class="picker-label">Border style</div>
+                  <div class="picker-label">
+                    ${this.std
+                            ? translateKey(this.std, ...BOARD_BORDER_STYLE_LABEL)
+                            : BOARD_BORDER_STYLE_LABEL[1]}
+                  </div>
                   <edgeless-line-styles-panel
                     class="picker"
                     .lineSize=${strokeWidth}
@@ -222,7 +250,8 @@ let EdgelessShapeColorPicker = (() => {
         set menuButton(value) { this.#menuButton_accessor_storage = value; }
         constructor() {
             super(...arguments);
-            this.tabType$ = signal('normal');
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.tabType$ = (__runInitializers(this, _std_extraInitializers), signal('normal'));
             this.colorType$ = signal('fillColor');
             this.#pickFillColor = (e) => {
                 e.stopPropagation();

package/dist/_pkgs/affine-components/embed-card-modal/embed-card-create-modal.js

@@ -32,7 +32,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { EmbedOptionProvider, VirtualKeyboardProvider, } from '../../affine-shared/services/index.js';
+import { EmbedOptionProvider, translateKey, VirtualKeyboardProvider, } from '../../affine-shared/services/index.js';
 import { isValidUrl, stopPropagation } from '../../affine-shared/utils/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
 import { ShadowlessElement } from '../../std/index.js';
@@ -42,6 +42,7 @@ import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { toast } from '../toast/index.js';
+import { CONFIRM_LABEL, EMBED_CARD_INVALID_LINK, EMBED_CARD_LINK_PLACEHOLDER, } from '../translations.js';
 import { embedCardModalStyles } from './styles.js';
 let EmbedCardCreateModal = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
@@ -129,7 +130,7 @@ let EmbedCardCreateModal = (() => {
             class="embed-card-modal-input link"
             id="card-description"
             type="text"
-            placeholder="Input in https://..."
+            placeholder=${translateKey(this.host.std, ...EMBED_CARD_LINK_PLACEHOLDER)}
             value=${this._linkInputValue}
             @input=${this._handleInput}
           />
@@ -144,7 +145,7 @@ let EmbedCardCreateModal = (() => {
             ?disabled=${!isValidUrl(this._linkInputValue)}
             @click=${this._onConfirm}
           >
-            Confirm
+            ${translateKey(this.host.std, ...CONFIRM_LABEL)}
           </button>
         </div>
       </div>
@@ -179,7 +180,7 @@ let EmbedCardCreateModal = (() => {
             this._onConfirm = () => {
                 const url = this.input.value;
                 if (!isValidUrl(url)) {
-                    toast(this.host, 'Invalid link');
+                    toast(this.host, translateKey(this.host.std, ...EMBED_CARD_INVALID_LINK));
                     return;
                 }
                 const embedOptions = this.host.std