@formicoidea/labre-core 0.40.0 → 0.42.0

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

@@ -33,39 +33,76 @@ 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';
+import { css, html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
 import { choose } from 'lit-html/directives/choose.js';
 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 { calcCustomButtonStyle, keepColor, packColorsWith, paletteCarouselPage, paletteCarouselStyles, paletteCarouselWheel, preprocessColor, renderPaletteCarousel, 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 = [];
     let _palettes_decorators;
     let _palettes_initializers = [];
     let _palettes_extraInitializers = [];
+    let _paletteGroups_decorators;
+    let _paletteGroups_initializers = [];
+    let _paletteGroups_extraInitializers = [];
+    let _activeGroupKey_decorators;
+    let _activeGroupKey_initializers = [];
+    let _activeGroupKey_extraInitializers = [];
+    let _pickedGroupIndex_decorators;
+    let _pickedGroupIndex_initializers = [];
+    let _pickedGroupIndex_extraInitializers = [];
+    let _paletteListOpen_decorators;
+    let _paletteListOpen_initializers = [];
+    let _paletteListOpen_extraInitializers = [];
+    let _pageDirection_decorators;
+    let _pageDirection_initializers = [];
+    let _pageDirection_extraInitializers = [];
     let _menuButton_decorators;
     let _menuButton_initializers = [];
     let _menuButton_extraInitializers = [];
     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 })];
+            _paletteGroups_decorators = [property({ attribute: false })];
+            _activeGroupKey_decorators = [property({ attribute: false })];
+            _pickedGroupIndex_decorators = [state()];
+            _paletteListOpen_decorators = [state()];
+            _pageDirection_decorators = [state()];
             _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, _paletteGroups_decorators, { kind: "accessor", name: "paletteGroups", static: false, private: false, access: { has: obj => "paletteGroups" in obj, get: obj => obj.paletteGroups, set: (obj, value) => { obj.paletteGroups = value; } }, metadata: _metadata }, _paletteGroups_initializers, _paletteGroups_extraInitializers);
+            __esDecorate(this, null, _activeGroupKey_decorators, { kind: "accessor", name: "activeGroupKey", static: false, private: false, access: { has: obj => "activeGroupKey" in obj, get: obj => obj.activeGroupKey, set: (obj, value) => { obj.activeGroupKey = value; } }, metadata: _metadata }, _activeGroupKey_initializers, _activeGroupKey_extraInitializers);
+            __esDecorate(this, null, _pickedGroupIndex_decorators, { kind: "accessor", name: "pickedGroupIndex", static: false, private: false, access: { has: obj => "pickedGroupIndex" in obj, get: obj => obj.pickedGroupIndex, set: (obj, value) => { obj.pickedGroupIndex = value; } }, metadata: _metadata }, _pickedGroupIndex_initializers, _pickedGroupIndex_extraInitializers);
+            __esDecorate(this, null, _paletteListOpen_decorators, { kind: "accessor", name: "paletteListOpen", static: false, private: false, access: { has: obj => "paletteListOpen" in obj, get: obj => obj.paletteListOpen, set: (obj, value) => { obj.paletteListOpen = value; } }, metadata: _metadata }, _paletteListOpen_initializers, _paletteListOpen_extraInitializers);
+            __esDecorate(this, null, _pageDirection_decorators, { kind: "accessor", name: "pageDirection", static: false, private: false, access: { has: obj => "pageDirection" in obj, get: obj => obj.pageDirection, set: (obj, value) => { obj.pageDirection = value; } }, metadata: _metadata }, _pageDirection_initializers, _pageDirection_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;
@@ -83,6 +120,8 @@ let EdgelessShapeColorPicker = (() => {
       color: ${unsafeCSSVarV2('text/secondary')};
       font-weight: 400;
     }
+
+    ${paletteCarouselStyles}
   `; }
         #pickFillColor;
         #pickStrokeColor;
@@ -91,8 +130,41 @@ let EdgelessShapeColorPicker = (() => {
         #calcCustomButtonStyle(color, isCustomColor) {
             return calcCustomButtonStyle(color, isCustomColor, this);
         }
+        /**
+         * The page of {@link paletteGroups} on screen — see the twin getter on
+         * `edgeless-color-picker-button` for why a click wins over the prop.
+         */
+        get groupIndex() {
+            if (this.pickedGroupIndex !== undefined)
+                return this.pickedGroupIndex;
+            const asked = this.paletteGroups.findIndex(group => group.key === this.activeGroupKey);
+            return asked < 0 ? 0 : asked;
+        }
+        /** The page on screen, or the caller's own list when there is no carousel. */
+        get activePalettes() {
+            if (this.paletteGroups.length < 2)
+                return this.palettes;
+            return this.paletteGroups[this.groupIndex]?.palettes ?? this.palettes;
+        }
+        /**
+         * A new selection re-opens on ITS framework — see the twin on
+         * `edgeless-color-picker-button`.
+         */
+        willUpdate(changed) {
+            if (changed.has('activeGroupKey')) {
+                this.pickedGroupIndex = undefined;
+                this.paletteListOpen = false;
+                this.pageDirection = 'settle';
+            }
+        }
+        /** Page, and remember which way it went — see the twin. */
+        #page;
+        /** Measured against the UNION of the pages, for the reason the twin states. */
         #calcCustomButtonState(color, theme) {
-            return !this.palettes
+            const offered = this.paletteGroups.length > 1
+                ? this.paletteGroups.flatMap(group => group.palettes)
+                : this.palettes;
+            return !offered
                 .map(({ value }) => resolveColor(value, theme))
                 .includes(color);
         }
@@ -114,79 +186,124 @@ let EdgelessShapeColorPicker = (() => {
         firstUpdated() {
             this.disposables.addFromEvent(this.menuButton, 'toggle', (e) => {
                 const opened = e.detail;
+                // A re-opened picker shows its swatches, never the list it was left on.
+                this.paletteListOpen = false;
                 if (!opened && this.tabType$.peek() === 'custom') {
                     this.tabType$.value = 'normal';
                 }
             });
         }
         render() {
-            const { tabType$: { value: tabType }, colorType$: { value: colorType }, palettes, fillColorWithoutAlpha, payload: { fillColor, strokeColor, strokeWidth, strokeStyle, originalFillColor, originalStrokeColor, theme, enableCustomColor, }, } = this;
+            const { tabType$: { value: tabType }, colorType$: { value: colorType }, activePalettes, fillColorWithoutAlpha, payload: { fillColor, strokeColor, strokeWidth, strokeStyle, originalFillColor, originalStrokeColor, theme, enableCustomColor, }, } = this;
             return html `
       <editor-menu-button
         .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>
           </editor-icon-button>
         `}
       >
-        <div class="pickers" data-orientation="vertical">
+        <div
+          class="pickers"
+          data-orientation="vertical"
+          @wheel=${paletteCarouselWheel({
+                groups: this.paletteGroups,
+                index: this.groupIndex,
+                onPage: this.#page,
+                open: this.paletteListOpen,
+            })}
+        >
           ${choose(tabType, [
                 [
                     'normal',
                     () => {
                         return html `
-                  ${repeat([
-                            {
-                                label: 'Fill color',
-                                type: 'fillColor',
-                                value: fillColor,
-                                hollowCircle: false,
-                                onPick: this.#pickFillColor,
-                            },
-                            {
-                                label: 'Border color',
-                                type: 'strokeColor',
-                                value: strokeColor,
-                                hollowCircle: true,
-                                onPick: this.#pickStrokeColor,
-                            },
-                        ], item => item.type, ({ label, type, value, onPick, hollowCircle }) => html `
-                      <div class="picker-label">${label}</div>
-                      <edgeless-color-panel
-                        aria-label="${label}"
-                        role="listbox"
-                        .hasTransparent=${false}
-                        .hollowCircle=${hollowCircle}
-                        .value=${value}
-                        .theme=${theme}
-                        .palettes=${palettes}
-                        @select=${onPick}
-                      >
-                        ${when(enableCustomColor, () => {
-                            const isCustomColor = this.#calcCustomButtonState(value, theme);
-                            const styleInfo = this.#calcCustomButtonStyle(value, isCustomColor);
-                            return html `
-                            <edgeless-color-custom-button
-                              slot="custom"
-                              style=${styleMap(styleInfo)}
-                              ?active=${isCustomColor}
-                              @click=${() => this.#switchToCustomWith(type)}
-                            ></edgeless-color-custom-button>
-                          `;
+                  ${renderPaletteCarousel({
+                            groups: this.paletteGroups,
+                            index: this.groupIndex,
+                            onPage: this.#page,
+                            onToggle: open => (this.paletteListOpen = open),
+                            open: this.paletteListOpen,
+                            direction: this.pageDirection,
+                            std: this.std,
+                            theme,
                         })}
-                      </edgeless-color-panel>
-                    `)}
-                  <div class="picker-label">Border style</div>
-                  <edgeless-line-styles-panel
-                    class="picker"
-                    .lineSize=${strokeWidth}
-                    .lineStyle=${strokeStyle}
-                    @select=${this.#pickStrokeStyle}
-                  ></edgeless-line-styles-panel>
+                  ${this.paletteListOpen
+                            ? nothing
+                            : html `${repeat([
+                                {
+                                    label: this.std
+                                        ? translateKey(this.std, ...FILL_COLOR_LABEL)
+                                        : FILL_COLOR_LABEL[1],
+                                    type: 'fillColor',
+                                    value: fillColor,
+                                    hollowCircle: false,
+                                    onPick: this.#pickFillColor,
+                                },
+                                {
+                                    label: this.std
+                                        ? translateKey(this.std, ...BORDER_COLOR_LABEL)
+                                        : BORDER_COLOR_LABEL[1],
+                                    type: 'strokeColor',
+                                    value: strokeColor,
+                                    hollowCircle: true,
+                                    onPick: this.#pickStrokeColor,
+                                },
+                            ], item => item.type, ({ label, type, value, onPick, hollowCircle, }) => html `
+                            <div class="picker-label">${label}</div>
+                            ${paletteCarouselPage({
+                                groups: this.paletteGroups,
+                                index: this.groupIndex,
+                                direction: this.pageDirection,
+                            }, html `
+                                <edgeless-color-panel
+                                  aria-label="${label}"
+                                  role="listbox"
+                                  .hasTransparent=${false}
+                                  .hollowCircle=${hollowCircle}
+                                  .value=${value}
+                                  .theme=${theme}
+                                  .palettes=${activePalettes}
+                                  .std=${this.std}
+                                  @select=${onPick}
+                                >
+                                  ${when(enableCustomColor, () => {
+                                const isCustomColor = this.#calcCustomButtonState(value, theme);
+                                const styleInfo = this.#calcCustomButtonStyle(value, isCustomColor);
+                                return html `
+                                      <edgeless-color-custom-button
+                                        slot="custom"
+                                        style=${styleMap(styleInfo)}
+                                        ?active=${isCustomColor}
+                                        @click=${() => this.#switchToCustomWith(type)}
+                                      ></edgeless-color-custom-button>
+                                    `;
+                            })}
+                                </edgeless-color-panel>
+                              `)}
+                          `)}
+                        <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}
+                          .lineStyle=${strokeStyle}
+                          @select=${this.#pickStrokeStyle}
+                        ></edgeless-line-styles-panel>`}
                 `;
                     },
                 ],
@@ -217,12 +334,40 @@ let EdgelessShapeColorPicker = (() => {
         #palettes_accessor_storage;
         get palettes() { return this.#palettes_accessor_storage; }
         set palettes(value) { this.#palettes_accessor_storage = value; }
+        #paletteGroups_accessor_storage;
+        /**
+         * The carousel's pages, base palette first (`docs/adr/0027`). Empty falls
+         * back to {@link palettes} and draws no header — the panel as it was.
+         */
+        get paletteGroups() { return this.#paletteGroups_accessor_storage; }
+        set paletteGroups(value) { this.#paletteGroups_accessor_storage = value; }
+        #activeGroupKey_accessor_storage;
+        /** The page to open on: the framework of the selected element, usually. */
+        get activeGroupKey() { return this.#activeGroupKey_accessor_storage; }
+        set activeGroupKey(value) { this.#activeGroupKey_accessor_storage = value; }
+        #pickedGroupIndex_accessor_storage;
+        /** Component state only, never persisted: which page the user paged TO. */
+        get pickedGroupIndex() { return this.#pickedGroupIndex_accessor_storage; }
+        set pickedGroupIndex(value) { this.#pickedGroupIndex_accessor_storage = value; }
+        #paletteListOpen_accessor_storage;
+        /**
+         * View state too: whether the header's list of pages is showing IN PLACE of
+         * the two grids and the line styles — see the twin on
+         * `edgeless-color-picker-button`.
+         */
+        get paletteListOpen() { return this.#paletteListOpen_accessor_storage; }
+        set paletteListOpen(value) { this.#paletteListOpen_accessor_storage = value; }
+        #pageDirection_accessor_storage;
+        /** Which way the page arrived — see the twin. Both grids take it together. */
+        get pageDirection() { return this.#pageDirection_accessor_storage; }
+        set pageDirection(value) { this.#pageDirection_accessor_storage = value; }
         #menuButton_accessor_storage;
         get menuButton() { return this.#menuButton_accessor_storage; }
         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();
@@ -268,9 +413,19 @@ let EdgelessShapeColorPicker = (() => {
                     cancelable: true,
                 }));
             };
+            /** Page, and remember which way it went — see the twin. */
+            this.#page = (index, direction) => {
+                this.pickedGroupIndex = index;
+                this.pageDirection = direction;
+            };
             this.#payload_accessor_storage = __runInitializers(this, _payload_initializers, void 0);
             this.#palettes_accessor_storage = (__runInitializers(this, _payload_extraInitializers), __runInitializers(this, _palettes_initializers, DefaultTheme.Palettes));
-            this.#menuButton_accessor_storage = (__runInitializers(this, _palettes_extraInitializers), __runInitializers(this, _menuButton_initializers, void 0));
+            this.#paletteGroups_accessor_storage = (__runInitializers(this, _palettes_extraInitializers), __runInitializers(this, _paletteGroups_initializers, []));
+            this.#activeGroupKey_accessor_storage = (__runInitializers(this, _paletteGroups_extraInitializers), __runInitializers(this, _activeGroupKey_initializers, undefined));
+            this.#pickedGroupIndex_accessor_storage = (__runInitializers(this, _activeGroupKey_extraInitializers), __runInitializers(this, _pickedGroupIndex_initializers, undefined));
+            this.#paletteListOpen_accessor_storage = (__runInitializers(this, _pickedGroupIndex_extraInitializers), __runInitializers(this, _paletteListOpen_initializers, false));
+            this.#pageDirection_accessor_storage = (__runInitializers(this, _paletteListOpen_extraInitializers), __runInitializers(this, _pageDirection_initializers, 'settle'));
+            this.#menuButton_accessor_storage = (__runInitializers(this, _pageDirection_extraInitializers), __runInitializers(this, _menuButton_initializers, void 0));
             __runInitializers(this, _menuButton_extraInitializers);
         }
     };

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 {