@formicoidea/labre-core 0.40.0 → 0.41.0

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

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

@@ -33,7 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { EmbedLinkedDocModel, EmbedSyncedDocModel, isInternalEmbedModel, } from '../../affine-model/index.js';
-import { TelemetryProvider, } from '../../affine-shared/services/index.js';
+import { TelemetryProvider, translateKey, } from '../../affine-shared/services/index.js';
 import { fontSMStyle, fontXSStyle } from '../../affine-shared/styles/index.js';
 import { unsafeCSSVarV2 } from '../../affine-shared/theme/index.js';
 import { listenClickAway, stopPropagation } from '../../affine-shared/utils/index.js';
@@ -48,6 +48,7 @@ import { choose } from 'lit/directives/choose.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { live } from 'lit/directives/live.js';
 import { toast } from '../toast/index.js';
+import { CANCEL_LABEL, EMBED_CARD_DESCRIPTION_ALIAS_PLACEHOLDER, EMBED_CARD_DESCRIPTION_PLACEHOLDER, EMBED_CARD_TITLE_ALIAS_PLACEHOLDER, EMBED_CARD_TITLE_EMPTY, EMBED_CARD_TITLE_PLACEHOLDER, RESET_LABEL, SAVE_LABEL, } from '../translations.js';
 let EmbedCardEditModal = (() => {
     let _classSuper = SignalWatcher(WithDisposable(LitElement));
     let _host_decorators;
@@ -210,15 +211,16 @@ let EmbedCardEditModal = (() => {
             return null;
         }
         get placeholders() {
+            const std = this.host.std;
             if (this.isInternalEmbedModel) {
                 return {
-                    title: 'Add title alias',
-                    description: 'Add description alias (empty to inherit document content)',
+                    title: translateKey(std, ...EMBED_CARD_TITLE_ALIAS_PLACEHOLDER),
+                    description: translateKey(std, ...EMBED_CARD_DESCRIPTION_ALIAS_PLACEHOLDER),
                 };
             }
             return {
-                title: 'Write a title',
-                description: 'Write a description...',
+                title: translateKey(std, ...EMBED_CARD_TITLE_PLACEHOLDER),
+                description: translateKey(std, ...EMBED_CARD_DESCRIPTION_PLACEHOLDER),
             };
         }
         _updateInfo() {
@@ -296,7 +298,7 @@ let EmbedCardEditModal = (() => {
                   .disabled=${this.resetButtonDisabled$.value}
                   @click=${this._onReset}
                 >
-                  Reset
+                  ${translateKey(this.host.std, ...RESET_LABEL)}
                 </button>
               `,
                 ],
@@ -310,7 +312,7 @@ let EmbedCardEditModal = (() => {
                     })}
                   @click=${this._hide}
                 >
-                  Cancel
+                  ${translateKey(this.host.std, ...CANCEL_LABEL)}
                 </button>
               `,
                 ],
@@ -323,7 +325,7 @@ let EmbedCardEditModal = (() => {
             .disabled=${this.saveButtonDisabled$.value}
             @click=${this._onSave}
           >
-            Save
+            ${translateKey(this.host.std, ...SAVE_LABEL)}
           </button>
         </div>
       </div>
@@ -406,7 +408,7 @@ let EmbedCardEditModal = (() => {
                 }
                 const title = this.title$.value.trim();
                 if (title.length === 0) {
-                    toast(this.host, 'Title can not be empty');
+                    toast(this.host, translateKey(this.host.std, ...EMBED_CARD_TITLE_EMPTY));
                     return;
                 }
                 const std = blockComponent.std;

package/dist/_pkgs/affine-components/filterable-list/index.d.ts

@@ -1,3 +1,4 @@
+import type { BlockStdScope } from '../../std/index.js';
 import { type Placement } from '@floating-ui/dom';
 import { LitElement } from 'lit';
 import { type AdvancedPortalOptions } from '../portal/index.js';
@@ -6,6 +7,7 @@ export * from './types.js';
 declare const FilterableListComponent_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class FilterableListComponent<Props = unknown> extends FilterableListComponent_base {
     static styles: import("lit").CSSResult;
+    accessor std: BlockStdScope;
     private _buildContent;
     private _filterItems;
     private _scrollFocusedItemIntoView;

package/dist/_pkgs/affine-components/filterable-list/index.js

@@ -33,17 +33,24 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { PAGE_HEADER_HEIGHT } from '../../affine-shared/consts/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { DoneIcon, SearchIcon } from '@blocksuite/icons/lit';
+import { stdContext } from '../../std/index.js';
 import { autoPlacement, offset, size } from '@floating-ui/dom';
+import { consume } from '@lit/context';
 import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { createLitPortal } from '../portal/index.js';
 import { filterableListStyles } from './styles.js';
+import { FILTERABLE_LIST_SEARCH_PLACEHOLDER } from '../translations.js';
 export * from './types.js';
 let FilterableListComponent = (() => {
     let _classSuper = WithDisposable(LitElement);
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let __curFocusIndex_decorators;
     let __curFocusIndex_initializers = [];
     let __curFocusIndex_extraInitializers = [];
@@ -71,6 +78,7 @@ let FilterableListComponent = (() => {
     return class FilterableListComponent extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             __curFocusIndex_decorators = [state()];
             __filterInput_decorators = [query('#filter-input')];
             __filterText_decorators = [state()];
@@ -79,6 +87,7 @@ let FilterableListComponent = (() => {
             _listFilter_decorators = [property({ attribute: false })];
             _options_decorators = [property({ attribute: false })];
             _placement_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, __curFocusIndex_decorators, { kind: "accessor", name: "_curFocusIndex", static: false, private: false, access: { has: obj => "_curFocusIndex" in obj, get: obj => obj._curFocusIndex, set: (obj, value) => { obj._curFocusIndex = value; } }, metadata: _metadata }, __curFocusIndex_initializers, __curFocusIndex_extraInitializers);
             __esDecorate(this, null, __filterInput_decorators, { kind: "accessor", name: "_filterInput", static: false, private: false, access: { has: obj => "_filterInput" in obj, get: obj => obj._filterInput, set: (obj, value) => { obj._filterInput = value; } }, metadata: _metadata }, __filterInput_initializers, __filterInput_extraInitializers);
             __esDecorate(this, null, __filterText_decorators, { kind: "accessor", name: "_filterText", static: false, private: false, access: { has: obj => "_filterText" in obj, get: obj => obj._filterText, set: (obj, value) => { obj._filterText = value; } }, metadata: _metadata }, __filterText_initializers, __filterText_extraInitializers);
@@ -90,6 +99,9 @@ let FilterableListComponent = (() => {
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = filterableListStyles; }
+        #std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         _buildContent(items) {
             return items.map((item, idx) => {
                 const focussed = this._curFocusIndex === idx;
@@ -194,7 +206,10 @@ let FilterableListComponent = (() => {
           <input
             id="filter-input"
             type="text"
-            placeholder=${this.options?.placeholder ?? 'Search'}
+            placeholder=${this.options?.placeholder ??
+                (this.std
+                    ? translateKey(this.std, ...FILTERABLE_LIST_SEARCH_PLACEHOLDER)
+                    : FILTERABLE_LIST_SEARCH_PLACEHOLDER[1])}
             @input="${() => {
                 this._filterText = this._filterInput?.value;
                 this._curFocusIndex = 0;
@@ -210,7 +225,7 @@ let FilterableListComponent = (() => {
       </div>
     `;
         }
-        #_curFocusIndex_accessor_storage = __runInitializers(this, __curFocusIndex_initializers, 0);
+        #_curFocusIndex_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, __curFocusIndex_initializers, 0));
         get _curFocusIndex() { return this.#_curFocusIndex_accessor_storage; }
         set _curFocusIndex(value) { this.#_curFocusIndex_accessor_storage = value; }
         #_filterInput_accessor_storage = (__runInitializers(this, __curFocusIndex_extraInitializers), __runInitializers(this, __filterInput_initializers, void 0));

package/dist/_pkgs/affine-components/highlight-dropdown-menu/dropdown-menu.d.ts

@@ -1,9 +1,12 @@
 import type { AffineTextStyleAttributes } from '../../affine-shared/types/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import { LitElement } from 'lit';
 export type HighlightType = Pick<AffineTextStyleAttributes, 'color' | 'background'>;
 export declare class HighlightDropdownMenu extends LitElement {
+    accessor std: BlockStdScope;
     accessor updateHighlight: (styles: HighlightType) => void;
     private readonly _update;
+    private _colorLabel;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/_pkgs/affine-components/highlight-dropdown-menu/dropdown-menu.js

@@ -32,13 +32,16 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { PropTypes, requiredProperties } from '../../std/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
+import { PropTypes, requiredProperties, stdContext } from '../../std/index.js';
+import { consume } from '@lit/context';
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit-html';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { EditorChevronDown } from '../toolbar/index.js';
+import { COLOR_LABEL, COLOR_NAME_WORDINGS, HIGHLIGHT_BACKGROUND_LABEL, HIGHLIGHT_DEFAULT_BACKGROUND, HIGHLIGHT_DEFAULT_FOREGROUND, HIGHLIGHT_LABEL, } from '../translations.js';
 const colors = [
     'default',
     'red',
@@ -63,6 +66,9 @@ let HighlightDropdownMenu = (() => {
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = LitElement;
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _updateHighlight_decorators;
     let _updateHighlight_initializers = [];
     let _updateHighlight_extraInitializers = [];
@@ -70,7 +76,8 @@ let HighlightDropdownMenu = (() => {
         static { _classThis = this; }
         constructor() {
             super(...arguments);
-            this.#updateHighlight_accessor_storage = __runInitializers(this, _updateHighlight_initializers, void 0);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.#updateHighlight_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _updateHighlight_initializers, void 0));
             this._update = (__runInitializers(this, _updateHighlight_extraInitializers), (style) => {
                 // latestHighlightColor = value;
                 // latestHighlightType = type;
@@ -79,23 +86,49 @@ let HighlightDropdownMenu = (() => {
         }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _updateHighlight_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, _updateHighlight_decorators, { kind: "accessor", name: "updateHighlight", static: false, private: false, access: { has: obj => "updateHighlight" in obj, get: obj => obj.updateHighlight, set: (obj, value) => { obj.updateHighlight = value; } }, metadata: _metadata }, _updateHighlight_initializers, _updateHighlight_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             HighlightDropdownMenu = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        #std_accessor_storage;
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         #updateHighlight_accessor_storage;
         get updateHighlight() { return this.#updateHighlight_accessor_storage; }
         set updateHighlight(value) { this.#updateHighlight_accessor_storage = value; }
+        _colorLabel(color, background) {
+            if (color === 'default') {
+                const wording = background
+                    ? HIGHLIGHT_DEFAULT_BACKGROUND
+                    : HIGHLIGHT_DEFAULT_FOREGROUND;
+                return this.std ? translateKey(this.std, ...wording) : wording[1];
+            }
+            const wording = COLOR_NAME_WORDINGS[color];
+            if (!wording)
+                return color;
+            return this.std ? translateKey(this.std, ...wording) : wording[1];
+        }
         render() {
             const prefix = '--affine-text-highlight';
+            const label = this.std
+                ? translateKey(this.std, ...HIGHLIGHT_LABEL)
+                : HIGHLIGHT_LABEL[1];
+            const backgroundLabel = this.std
+                ? translateKey(this.std, ...HIGHLIGHT_BACKGROUND_LABEL)
+                : HIGHLIGHT_BACKGROUND_LABEL[1];
+            const colorLabel = this.std
+                ? translateKey(this.std, ...COLOR_LABEL)
+                : COLOR_LABEL[1];
             return html `
       <editor-menu-button
         .contentPadding="${'8px'}"
         .button=${html `
-          <editor-icon-button aria-label="highlight" .tooltip="${'Highlight'}">
+          <editor-icon-button aria-label="${label}" .tooltip="${label}">
             <affine-highlight-duotone-icon
               style=${styleMap({
                 '--color': 
@@ -108,7 +141,7 @@ let HighlightDropdownMenu = (() => {
         `}
       >
         <div data-size="large" data-orientation="vertical">
-          <div class="highlight-heading">Color</div>
+          <div class="highlight-heading">${colorLabel}</div>
           ${repeat(colors, color => {
                 const isDefault = color === 'default';
                 const value = isDefault
@@ -125,13 +158,13 @@ let HighlightDropdownMenu = (() => {
                 })}
                 ></affine-text-duotone-icon>
                 <span class="label capitalize"
-                  >${isDefault ? `${color} color` : color}</span
+                  >${this._colorLabel(color, false)}</span
                 >
               </editor-menu-action>
             `;
             })}
 
-          <div class="highlight-heading">Background</div>
+          <div class="highlight-heading">${backgroundLabel}</div>
           ${repeat(colors, color => {
                 const isDefault = color === 'default';
                 const value = isDefault ? null : `var(${prefix}-${color})`;
@@ -148,7 +181,7 @@ let HighlightDropdownMenu = (() => {
                 ></affine-text-duotone-icon>
 
                 <span class="label capitalize"
-                  >${isDefault ? `${color} background` : color}</span
+                  >${this._colorLabel(color, true)}</span
                 >
               </editor-menu-action>
             `;

package/dist/_pkgs/affine-components/icon-button/index.d.ts

@@ -13,7 +13,7 @@ import { LitElement, nothing, type TemplateResult } from 'lit';
  *   ${UnlinkIcon}
  * </icon-button>`
  *
- * html`<icon-button size="32px" text="HTML" @click=${this._importHtml}>
+ * html`<icon-button size="32px" text="${this.label}" @click=${this._importHtml}>
  *   ${ExportToHTMLIcon}
  * </icon-button>`
  * ```

package/dist/_pkgs/affine-components/icon-button/index.js

@@ -50,7 +50,7 @@ import { property, query } from 'lit/decorators.js';
  *   ${UnlinkIcon}
  * </icon-button>`
  *
- * html`<icon-button size="32px" text="HTML" @click=${this._importHtml}>
+ * html`<icon-button size="32px" text="${this.label}" @click=${this._importHtml}>
  *   ${ExportToHTMLIcon}
  * </icon-button>`
  * ```