@formicoidea/labre-core 0.40.0 → 0.41.0

package/dist/_pkgs/affine-fragment-adapter-panel/translations.d.ts

@@ -0,0 +1,24 @@
+import { type ChromeWording } from '../affine-shared/services/index.js';
+/**
+ * The adapter (debug export) panel's own wordings: the source/preview toggle
+ * on its HTML tab, and two of the four format names its selector lists —
+ * "Markdown" and "HTML" are shared with the "@" menu's import dialog
+ * (`FORMAT_MARKDOWN` / `FORMAT_HTML`, `chrome.ts`) rather than restated here.
+ *
+ * Declared here rather than restated at the call site so the manifest
+ * (`@labre/affine/translations`, `PACKAGE_WORDINGS`) can walk them — see
+ * `packages/affine/shared/src/services/translation-service/README.md`.
+ */
+export declare const ADAPTER_PANEL_SOURCE: ChromeWording;
+export declare const ADAPTER_PANEL_PREVIEW: ChromeWording;
+export declare const ADAPTER_FORMAT_MARKDOWN: ChromeWording;
+export declare const ADAPTER_FORMAT_PLAINTEXT: ChromeWording;
+export declare const ADAPTER_FORMAT_HTML: ChromeWording;
+export declare const ADAPTER_FORMAT_SNAPSHOT: ChromeWording;
+/**
+ * Every wording this package declares, in the order it renders them —
+ * `ADAPTER_FORMAT_MARKDOWN` / `ADAPTER_FORMAT_HTML` excluded: they are
+ * `CHROME_WORDINGS` entries under their own name, and listing them again
+ * here would offer a host the same key twice.
+ */
+export declare const ADAPTER_PANEL_WORDINGS: readonly ChromeWording[];

package/dist/_pkgs/affine-fragment-adapter-panel/translations.js

@@ -0,0 +1,37 @@
+import { FORMAT_HTML, FORMAT_MARKDOWN, PREVIEW_LABEL, } from '../affine-shared/services/index.js';
+/**
+ * The adapter (debug export) panel's own wordings: the source/preview toggle
+ * on its HTML tab, and two of the four format names its selector lists —
+ * "Markdown" and "HTML" are shared with the "@" menu's import dialog
+ * (`FORMAT_MARKDOWN` / `FORMAT_HTML`, `chrome.ts`) rather than restated here.
+ *
+ * Declared here rather than restated at the call site so the manifest
+ * (`@labre/affine/translations`, `PACKAGE_WORDINGS`) can walk them — see
+ * `packages/affine/shared/src/services/translation-service/README.md`.
+ */
+export const ADAPTER_PANEL_SOURCE = [
+    'com.labre.adapter-panel.html.source',
+    'Source',
+];
+export const ADAPTER_PANEL_PREVIEW = PREVIEW_LABEL;
+export const ADAPTER_FORMAT_MARKDOWN = FORMAT_MARKDOWN;
+export const ADAPTER_FORMAT_PLAINTEXT = [
+    'com.labre.adapter-panel.format.plaintext',
+    'PlainText',
+];
+export const ADAPTER_FORMAT_HTML = FORMAT_HTML;
+export const ADAPTER_FORMAT_SNAPSHOT = [
+    'com.labre.adapter-panel.format.snapshot',
+    'Snapshot',
+];
+/**
+ * Every wording this package declares, in the order it renders them —
+ * `ADAPTER_FORMAT_MARKDOWN` / `ADAPTER_FORMAT_HTML` excluded: they are
+ * `CHROME_WORDINGS` entries under their own name, and listing them again
+ * here would offer a host the same key twice.
+ */
+export const ADAPTER_PANEL_WORDINGS = [
+    ADAPTER_PANEL_SOURCE,
+    ADAPTER_FORMAT_PLAINTEXT,
+    ADAPTER_FORMAT_SNAPSHOT,
+];

package/dist/_pkgs/affine-fragment-doc-title/doc-title.d.ts

@@ -7,6 +7,7 @@ export declare class DocTitle extends DocTitle_base {
     private readonly _onTitleKeyDown;
     private readonly _updateTitleInMeta;
     private get _std();
+    private get _placeholder();
     private get _rootModel();
     private get _viewport();
     get inlineEditor(): import("../affine-shared/types/index.js").AffineInlineEditor | null;

package/dist/_pkgs/affine-fragment-doc-title/doc-title.js

@@ -34,12 +34,14 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { CodeBlockModel, ListBlockModel, NoteBlockModel, NoteDisplayMode, ParagraphBlockModel, } from '../affine-model/index.js';
 import { focusTextModel } from '../affine-rich-text/index.js';
+import { translateKey } from '../affine-shared/services/index.js';
 import { matchModels } from '../affine-shared/utils/index.js';
 import { WithDisposable } from '../global/lit/index.js';
 import { ShadowlessElement } from '../std/index.js';
 import { effect } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { DOC_TITLE_PLACEHOLDER } from './translations.js';
 const DOC_BLOCK_CHILD_PADDING = 24;
 let DocTitle = (() => {
     let _classSuper = WithDisposable(ShadowlessElement);
@@ -111,7 +113,7 @@ let DocTitle = (() => {
     }
 
     .doc-title-container-empty::before {
-      content: 'Title';
+      content: attr(data-placeholder);
       color: var(--affine-placeholder-color);
       position: absolute;
       opacity: 0.5;
@@ -133,6 +135,11 @@ let DocTitle = (() => {
         get _std() {
             return this._viewport?.querySelector('editor-host')?.std;
         }
+        get _placeholder() {
+            return this._std
+                ? translateKey(this._std, ...DOC_TITLE_PLACEHOLDER)
+                : DOC_TITLE_PLACEHOLDER[1];
+        }
         get _rootModel() {
             return this.doc.root;
         }
@@ -179,6 +186,7 @@ let DocTitle = (() => {
                 ? 'doc-title-container-empty'
                 : ''}"
         data-block-is-title="true"
+        data-placeholder=${this._placeholder}
       >
         <rich-text
           .yText=${this._rootModel?.props.title.yText}

package/dist/_pkgs/affine-fragment-doc-title/translations.d.ts

@@ -0,0 +1,13 @@
+import type { ChromeWording } from '../affine-shared/services/index.js';
+/**
+ * The document title's own wording: the ghost text shown in place of the
+ * `<rich-text>` caret when the title is empty. Rendered through CSS
+ * (`content: attr(data-placeholder)`, `./doc-title.ts`) rather than a lit
+ * expression, because the placeholder IS the `::before` pseudo-element and
+ * has no text node of its own to interpolate into — the resolved wording is
+ * written to a `data-placeholder` attribute instead, which is the one thing
+ * `content: attr(...)` can read.
+ */
+export declare const DOC_TITLE_PLACEHOLDER: ChromeWording;
+/** Every wording this package declares, in the order it renders them. */
+export declare const DOC_TITLE_WORDINGS: readonly ChromeWording[];

package/dist/_pkgs/affine-fragment-doc-title/translations.js

@@ -0,0 +1,17 @@
+/**
+ * The document title's own wording: the ghost text shown in place of the
+ * `<rich-text>` caret when the title is empty. Rendered through CSS
+ * (`content: attr(data-placeholder)`, `./doc-title.ts`) rather than a lit
+ * expression, because the placeholder IS the `::before` pseudo-element and
+ * has no text node of its own to interpolate into — the resolved wording is
+ * written to a `data-placeholder` attribute instead, which is the one thing
+ * `content: attr(...)` can read.
+ */
+export const DOC_TITLE_PLACEHOLDER = [
+    'com.labre.doc-title.placeholder',
+    'Title',
+];
+/** Every wording this package declares, in the order it renders them. */
+export const DOC_TITLE_WORDINGS = [
+    DOC_TITLE_PLACEHOLDER,
+];

package/dist/_pkgs/affine-fragment-frame-panel/body/frame-panel-body.js

@@ -33,7 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { EdgelessFrameManager } from '../../affine-block-frame/index.js';
-import { DocModeProvider, EditPropsStore } from '../../affine-shared/services/index.js';
+import { DocModeProvider, EditPropsStore, translateKey, } from '../../affine-shared/services/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
 import { Bound } from '../../global/gfx/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
@@ -43,6 +43,7 @@ import { css, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { FRAME_PANEL_EMPTY_PLACEHOLDER } from '../translations.js';
 import { startDragging } from '../utils/drag.js';
 const compare = EdgelessFrameManager.framePresentationComparator;
 const styles = css `
@@ -216,7 +217,7 @@ let FramePanelBody = (() => {
         _renderEmptyContent() {
             const emptyContent = html ` <div class="no-frame-container">
       <div class="no-frame-placeholder">
-        Add frames to organize and present your Edgeless
+        ${translateKey(this.editorHost.std, ...FRAME_PANEL_EMPTY_PLACEHOLDER)}
       </div>
     </div>`;
             return emptyContent;

package/dist/_pkgs/affine-fragment-frame-panel/header/frame-panel-header.js

@@ -34,7 +34,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { PresentTool } from '../../affine-block-frame/index.js';
 import { EdgelessLegacySlotIdentifier } from '../../affine-block-surface/index.js';
-import { DocModeProvider, EditPropsStore } from '../../affine-shared/services/index.js';
+import { DocModeProvider, EditPropsStore, translateKey, } from '../../affine-shared/services/index.js';
 import { createButtonPopper } from '../../affine-shared/utils/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
@@ -42,6 +42,7 @@ import { PresentationIcon, SettingsIcon } from '@blocksuite/icons/lit';
 import { GfxControllerIdentifier } from '../../std/gfx/index.js';
 import { css, html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { FRAME_PANEL_ALL_FRAMES_LABEL, FRAME_PANEL_ALL_FRAMES_SETTINGS_TOOLTIP, FRAME_PANEL_PRESENTATION_LABEL, } from '../translations.js';
 const styles = css `
   :host {
     display: flex;
@@ -192,14 +193,19 @@ let FramePanelHeader = (() => {
             disposables.add(this._framesSettingMenuPopper);
         }
         render() {
+            const { std } = this.editorHost;
             return html `<div class="frame-panel-header">
       <div class="all-frames-setting">
-        <span class="all-frames-setting-label">All frames</span>
+        <span class="all-frames-setting-label"
+          >${translateKey(std, ...FRAME_PANEL_ALL_FRAMES_LABEL)}</span
+        >
         <edgeless-tool-icon-button
           class="all-frames-setting-button ${this._settingPopperShow
                 ? 'active'
                 : ''}"
-          .tooltip=${this._settingPopperShow ? '' : 'All Frames Settings'}
+          .tooltip=${this._settingPopperShow
+                ? ''
+                : translateKey(std, ...FRAME_PANEL_ALL_FRAMES_SETTINGS_TOOLTIP)}
           .tipPosition=${'top'}
           .active=${this._settingPopperShow}
           .activeMode=${'background'}
@@ -216,7 +222,7 @@ let FramePanelHeader = (() => {
       <div class="presentation-button" @click=${this._enterPresentationMode}>
         ${PresentationIcon({ width: '16px', height: '16px' })}<span
           class="presentation-button-label"
-          >Presentation</span
+          >${translateKey(std, ...FRAME_PANEL_PRESENTATION_LABEL)}</span
         >
       </div>
     </div>`;

package/dist/_pkgs/affine-fragment-frame-panel/header/frames-setting-menu.js

@@ -33,10 +33,11 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { EdgelessLegacySlotIdentifier } from '../../affine-block-surface/index.js';
-import { DocModeProvider, EditPropsStore } from '../../affine-shared/services/index.js';
+import { DocModeProvider, EditPropsStore, TOOLBAR_HIDE_TOOLBAR, TOOLBAR_PLAYBACK_SETTINGS, translateKey, } from '../../affine-shared/services/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { css, html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { FRAME_PANEL_DARK_BACKGROUND, FRAME_PANEL_FILL_SCREEN, FRAME_PANEL_PREVIEW_SETTINGS, } from '../translations.js';
 const styles = css `
   :host {
     display: block;
@@ -147,6 +148,7 @@ let FramesSettingMenu = (() => {
             this._tryRestoreSettings();
         }
         render() {
+            const { std } = this.editorHost;
             return html `<div
       class="frames-setting-menu-container"
       @click=${(e) => {
@@ -154,10 +156,14 @@ let FramesSettingMenu = (() => {
             }}
     >
       <div class="frames-setting-menu-item">
-        <div class="setting-label">Preview Settings</div>
+        <div class="setting-label">
+          ${translateKey(std, ...FRAME_PANEL_PREVIEW_SETTINGS)}
+        </div>
       </div>
       <div class="frames-setting-menu-item action">
-        <div class="action-label">Fill Screen</div>
+        <div class="action-label">
+          ${translateKey(std, ...FRAME_PANEL_FILL_SCREEN)}
+        </div>
         <div class="toggle-button">
           <toggle-switch
             .on=${this.fillScreen}
@@ -169,10 +175,14 @@ let FramesSettingMenu = (() => {
       <menu-divider></menu-divider>
 
       <div class="frames-setting-menu-item">
-        <div class="setting-label">Playback Settings</div>
+        <div class="setting-label">
+          ${translateKey(std, ...TOOLBAR_PLAYBACK_SETTINGS)}
+        </div>
       </div>
       <div class="frames-setting-menu-item action">
-        <div class="action-label">Dark background</div>
+        <div class="action-label">
+          ${translateKey(std, ...FRAME_PANEL_DARK_BACKGROUND)}
+        </div>
         <div class="toggle-button">
           <toggle-switch
             .on=${this.blackBackground}
@@ -181,7 +191,9 @@ let FramesSettingMenu = (() => {
         </div>
       </div>
       <div class="frames-setting-menu-item action">
-        <div class="action-label">Hide toolbar</div>
+        <div class="action-label">
+          ${translateKey(std, ...TOOLBAR_HIDE_TOOLBAR)}
+        </div>
         <div class="toggle-button">
           <toggle-switch
             .on=${this.hideToolbar}

package/dist/_pkgs/affine-fragment-frame-panel/translations.d.ts

@@ -0,0 +1,16 @@
+import { type ChromeWording } from '../affine-shared/services/index.js';
+export declare const FRAME_PANEL_ALL_FRAMES_LABEL: ChromeWording;
+export declare const FRAME_PANEL_ALL_FRAMES_SETTINGS_TOOLTIP: ChromeWording;
+export declare const FRAME_PANEL_PRESENTATION_LABEL: ChromeWording;
+export declare const FRAME_PANEL_PREVIEW_SETTINGS: ChromeWording;
+export declare const FRAME_PANEL_FILL_SCREEN: ChromeWording;
+export declare const FRAME_PANEL_DARK_BACKGROUND: ChromeWording;
+export declare const FRAME_PANEL_EMPTY_PLACEHOLDER: ChromeWording;
+/**
+ * This package's contribution to the translation-key manifest, listed in
+ * `PACKAGE_WORDINGS` under source `chrome`
+ * (`packages/affine/all/src/translations.ts`). The shared verbs it reuses
+ * (Hide toolbar, Playback Settings…) travel with
+ * `@labre/affine-shared/services` instead, so they are not restated here.
+ */
+export declare const FRAME_PANEL_WORDINGS: readonly ChromeWording[];

package/dist/_pkgs/affine-fragment-frame-panel/translations.js

@@ -0,0 +1,44 @@
+import { PREVIEW_SETTINGS_LABEL, } from '../affine-shared/services/index.js';
+/* ── `header/frame-panel-header.ts` ───────────────────────────────────── */
+export const FRAME_PANEL_ALL_FRAMES_LABEL = [
+    'com.labre.frame-panel.header.all-frames',
+    'All frames',
+];
+export const FRAME_PANEL_ALL_FRAMES_SETTINGS_TOOLTIP = [
+    'com.labre.frame-panel.header.all-frames-settings',
+    'All Frames Settings',
+];
+export const FRAME_PANEL_PRESENTATION_LABEL = [
+    'com.labre.frame-panel.header.presentation',
+    'Presentation',
+];
+/* ── `header/frames-setting-menu.ts` ──────────────────────────────────── */
+export const FRAME_PANEL_PREVIEW_SETTINGS = PREVIEW_SETTINGS_LABEL;
+export const FRAME_PANEL_FILL_SCREEN = [
+    'com.labre.frame-panel.menu.fill-screen',
+    'Fill Screen',
+];
+export const FRAME_PANEL_DARK_BACKGROUND = [
+    'com.labre.frame-panel.menu.dark-background',
+    'Dark background',
+];
+/* ── `body/frame-panel-body.ts` ────────────────────────────────────────── */
+export const FRAME_PANEL_EMPTY_PLACEHOLDER = [
+    'com.labre.frame-panel.body.empty-placeholder',
+    'Add frames to organize and present your Canvas',
+];
+/**
+ * This package's contribution to the translation-key manifest, listed in
+ * `PACKAGE_WORDINGS` under source `chrome`
+ * (`packages/affine/all/src/translations.ts`). The shared verbs it reuses
+ * (Hide toolbar, Playback Settings…) travel with
+ * `@labre/affine-shared/services` instead, so they are not restated here.
+ */
+export const FRAME_PANEL_WORDINGS = [
+    FRAME_PANEL_ALL_FRAMES_LABEL,
+    FRAME_PANEL_ALL_FRAMES_SETTINGS_TOOLTIP,
+    FRAME_PANEL_PRESENTATION_LABEL,
+    FRAME_PANEL_FILL_SCREEN,
+    FRAME_PANEL_DARK_BACKGROUND,
+    FRAME_PANEL_EMPTY_PLACEHOLDER,
+];

package/dist/_pkgs/affine-fragment-outline/body/outline-notice.js

@@ -33,6 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { NoteDisplayMode } from '../../affine-model/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
 import { CloseIcon, SortIcon } from '@blocksuite/icons/lit';
 import { ShadowlessElement } from '../../std/index.js';
@@ -40,6 +41,7 @@ import { consume } from '@lit/context';
 import { effect, signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
 import { tocContext } from '../config.js';
+import { OUTLINE_NOTICE_HIDDEN_LABEL, OUTLINE_NOTICE_HIDDEN_TEXT, OUTLINE_NOTICE_ORGANIZE, } from '../translations.js';
 import { getNotesFromStore } from '../utils/query.js';
 import * as styles from './outline-notice.css.js';
 export const AFFINE_OUTLINE_NOTICE = 'affine-outline-notice';
@@ -77,10 +79,13 @@ let OutlineNotice = (() => {
             if (!this._visible$.value) {
                 return nothing;
             }
+            const std = this._context.editor$.value.std;
             return html `
       <div data-testid=${AFFINE_OUTLINE_NOTICE} class=${styles.outlineNotice}>
         <div class=${styles.outlineNoticeHeader}>
-          <span class=${styles.outlineNoticeLabel}>SOME CONTENTS HIDDEN</span>
+          <span class=${styles.outlineNoticeLabel}
+            >${translateKey(std, ...OUTLINE_NOTICE_HIDDEN_LABEL)}</span
+          >
           <span
             data-testid="outline-notice-close-button"
             class=${styles.outlineNoticeCloseButton}
@@ -92,7 +97,7 @@ let OutlineNotice = (() => {
         </div>
         <div class=${styles.outlineNoticeBody}>
           <div class="${styles.notice}">
-            Some contents are not visible on edgeless.
+            ${translateKey(std, ...OUTLINE_NOTICE_HIDDEN_TEXT)}
           </div>
           <div
             data-testid="outline-notice-sort-button"
@@ -102,11 +107,12 @@ let OutlineNotice = (() => {
                 this._visible$.value = false;
             }}
           >
-            <span class=${styles.buttonSpan}>Click here or</span>
             <span class=${styles.buttonSpan}
               >${SortIcon({ width: '20px', height: '20px' })}</span
             >
-            <span class=${styles.buttonSpan}>to organize content.</span>
+            <span class=${styles.buttonSpan}
+              >${translateKey(std, ...OUTLINE_NOTICE_ORGANIZE)}</span
+            >
           </div>
         </div>
       </div>

package/dist/_pkgs/affine-fragment-outline/body/outline-panel-body.js

@@ -34,7 +34,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { changeNoteDisplayMode } from '../../affine-block-note/index.js';
 import { NoteBlockModel, NoteDisplayMode } from '../../affine-model/index.js';
-import { DocModeProvider } from '../../affine-shared/services/index.js';
+import { DocModeProvider, translateKey } from '../../affine-shared/services/index.js';
 import { focusTitle, matchModels } from '../../affine-shared/utils/index.js';
 import { Bound } from '../../global/gfx/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
@@ -48,6 +48,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { when } from 'lit/directives/when.js';
 import { tocContext } from '../config.js';
+import { OUTLINE_EMPTY_PANEL, OUTLINE_HIDDEN_CONTENTS } from '../translations.js';
 import { getHeadingBlocksFromDoc, getNotesFromStore, isHeadingBlock, } from '../utils/query.js';
 import { observeActiveHeadingDuringScroll, scrollToBlockWithHighlight, } from '../utils/scroll.js';
 import * as styles from './outline-panel-body.css.js';
@@ -102,7 +103,7 @@ let OutlinePanelBody = (() => {
         data-testid="empty-panel-placeholder"
         class=${styles.emptyPanelPlaceholder}
       >
-        Use headings to create a table of contents.
+        ${translateKey(this.editor.std, ...OUTLINE_EMPTY_PANEL)}
       </div>
     </div>`;
         }
@@ -359,7 +360,9 @@ let OutlinePanelBody = (() => {
         _renderEdgelessOnlyCardList() {
             const items = this._edgelessOnlyNotes$.value;
             return html `<div class=${styles.cardList}>
-      ${when(items.length > 0, () => html `<div class=${styles.edgelessCardListTitle}>Hidden Contents</div>`)}
+      ${when(items.length > 0, () => html `<div class=${styles.edgelessCardListTitle}>
+            ${translateKey(this.editor.std, ...OUTLINE_HIDDEN_CONTENTS)}
+          </div>`)}
       ${this._renderNoteCards(items)}
     </div>`;
         }

package/dist/_pkgs/affine-fragment-outline/card/outline-card.js

@@ -33,6 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { NoteDisplayMode } from '../../affine-model/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
 import { createButtonPopper } from '../../affine-shared/utils/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
 import { ArrowDownSmallIcon, InvisibleIcon } from '@blocksuite/icons/lit';
@@ -44,6 +45,7 @@ import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { tocContext } from '../config.js';
+import { OUTLINE_CARD_DISPLAY_MODE_TOOLTIP, OUTLINE_CARD_SHOW_IN, OUTLINE_MODE_BOTH, OUTLINE_MODE_EDGELESS, OUTLINE_MODE_PAGE, } from '../translations.js';
 import * as styles from './outline-card.css.js';
 export const AFFINE_OUTLINE_NOTE_CARD = 'affine-outline-note-card';
 let OutlineNoteCard = (() => {
@@ -126,15 +128,16 @@ let OutlineNoteCard = (() => {
             this.dispatchEvent(event);
         }
         _getCurrentModeLabel(mode) {
+            const std = this._context.editor$.value.std;
             switch (mode) {
                 case NoteDisplayMode.DocAndEdgeless:
-                    return 'Both';
+                    return translateKey(std, ...OUTLINE_MODE_BOTH);
                 case NoteDisplayMode.EdgelessOnly:
-                    return 'Edgeless';
+                    return translateKey(std, ...OUTLINE_MODE_EDGELESS);
                 case NoteDisplayMode.DocOnly:
-                    return 'Page';
+                    return translateKey(std, ...OUTLINE_MODE_PAGE);
                 default:
-                    return 'Both';
+                    return translateKey(std, ...OUTLINE_MODE_BOTH);
             }
         }
         _watchDragEvents() {
@@ -231,9 +234,13 @@ let OutlineNoteCard = (() => {
                 >`}
           <span class=${styles.divider}></span>
           <div class=${styles.displayModeButtonGroup}>
-            <span>Show in</span>
+            <span
+              >${translateKey(this._context.editor$.value.std, ...OUTLINE_CARD_SHOW_IN)}</span
+            >
             <edgeless-tool-icon-button
-              .tooltip=${this._showPopper$.value ? '' : 'Display Mode'}
+              .tooltip=${this._showPopper$.value
+                ? ''
+                : translateKey(this._context.editor$.value.std, ...OUTLINE_CARD_DISPLAY_MODE_TOOLTIP)}
               .tipPosition=${'left-start'}
               .iconContainerPadding=${0}
               data-testid="display-mode-button"

package/dist/_pkgs/affine-fragment-outline/card/outline-preview.d.ts

@@ -5,6 +5,7 @@ export declare const AFFINE_OUTLINE_BLOCK_PREVIEW = "affine-outline-block-previe
 declare const OutlineBlockPreview_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class OutlineBlockPreview extends OutlineBlockPreview_base {
     private get _docDisplayMetaService();
+    private get _std();
     private _TextBlockPreview;
     render(): import("lit-html").TemplateResult<1>;
     renderBlockByFlavour(): import("lit-html").TemplateResult<1> | typeof nothing;

package/dist/_pkgs/affine-fragment-outline/card/outline-preview.js

@@ -32,7 +32,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { DocDisplayMetaProvider } from '../../affine-shared/services/index.js';
+import { DocDisplayMetaProvider, DOC_UNTITLED, translateKey, } from '../../affine-shared/services/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
 import { noop } from '../../global/utils/index.js';
 import { LinkedPageIcon } from '@blocksuite/icons/lit';
@@ -41,8 +41,9 @@ import { consume } from '@lit/context';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { placeholderMap, previewIconMap, tocContext, } from '../config.js';
+import { previewIconMap, tocContext } from '../config.js';
 import { isHeadingBlock, isRootBlock } from '../utils/query.js';
+import { OUTLINE_PLACEHOLDER_ATTACHMENT, OUTLINE_PLACEHOLDER_BOOKMARK, OUTLINE_PLACEHOLDER_CODE, OUTLINE_PLACEHOLDER_DATABASE, OUTLINE_PLACEHOLDER_IMAGE, OUTLINE_PREVIEW_DELETED_DOC, } from '../translations.js';
 import * as styles from './outline-preview.css.js';
 function assertType(value) {
     noop(value);
@@ -73,6 +74,9 @@ let OutlineBlockPreview = (() => {
         get _docDisplayMetaService() {
             return this._context.editor$.value.std.get(DocDisplayMetaProvider);
         }
+        get _std() {
+            return this._context.editor$.value.std;
+        }
         _TextBlockPreview(block) {
             const deltas = block.props.text.yText.toDelta();
             if (!block.props.text.length)
@@ -88,7 +92,7 @@ let OutlineBlockPreview = (() => {
                         ? LinkedPageIcon({ width: '1.1em', height: '1.1em' })
                         : this._docDisplayMetaService.icon(refMeta.id).value;
                     const title = unavailable
-                        ? 'Deleted doc'
+                        ? translateKey(this._std, ...OUTLINE_PREVIEW_DELETED_DOC)
                         : this._docDisplayMetaService.title(refMeta.id).value;
                     return html `<span
           class=${classMap({
@@ -102,7 +106,9 @@ let OutlineBlockPreview = (() => {
                         [styles.linkedDocText]: true,
                         [styles.linkedDocTextUnavailable]: unavailable,
                     })}
-            >${title.length ? title : 'Untitled'}</span
+            >${title.length
+                        ? title
+                        : translateKey(this._std, ...DOC_UNTITLED)}</span
           ></span
         >`;
                 }
@@ -165,7 +171,7 @@ let OutlineBlockPreview = (() => {
           <span class="${styles.text} ${styles.textGeneral}"
             >${block.props.title ||
                         block.props.url ||
-                        placeholderMap['bookmark']}</span
+                        translateKey(this._std, ...OUTLINE_PLACEHOLDER_BOOKMARK)}</span
           >
           ${showPreviewIcon
                         ? html `<span class=${iconClass}
@@ -177,7 +183,8 @@ let OutlineBlockPreview = (() => {
                     assertType(block);
                     return html `
           <span class="${styles.text} ${styles.textGeneral}"
-            >${block.props.language ?? placeholderMap['code']}</span
+            >${block.props.language ??
+                        translateKey(this._std, ...OUTLINE_PLACEHOLDER_CODE)}</span
           >
           ${showPreviewIcon
                         ? html `<span class=${iconClass}>${previewIconMap['code']}</span>`
@@ -189,7 +196,7 @@ let OutlineBlockPreview = (() => {
           <span class="${styles.text} ${styles.textGeneral}"
             >${block.props.title.toString().length
                         ? block.props.title.toString()
-                        : placeholderMap['database']}</span
+                        : translateKey(this._std, ...OUTLINE_PLACEHOLDER_DATABASE)}</span
           >
           ${showPreviewIcon
                         ? html `<span class=${iconClass}>${previewIconMap['table']}</span>`
@@ -201,7 +208,7 @@ let OutlineBlockPreview = (() => {
           <span class="${styles.text} ${styles.textGeneral}"
             >${block.props.caption?.length
                         ? block.props.caption
-                        : placeholderMap['image']}</span
+                        : translateKey(this._std, ...OUTLINE_PLACEHOLDER_IMAGE)}</span
           >
           ${showPreviewIcon
                         ? html `<span class=${iconClass}>${previewIconMap['image']}</span>`
@@ -213,7 +220,7 @@ let OutlineBlockPreview = (() => {
           <span class="${styles.text} ${styles.textGeneral}"
             >${block.props.name?.length
                         ? block.props.name
-                        : placeholderMap['attachment']}</span
+                        : translateKey(this._std, ...OUTLINE_PLACEHOLDER_ATTACHMENT)}</span
           >
           ${showPreviewIcon
                         ? html `<span class=${iconClass}

package/dist/_pkgs/affine-fragment-outline/config.d.ts

@@ -21,26 +21,7 @@ export declare const previewIconMap: {
     h6: TemplateResult<1>;
     quote: TemplateResult<1>;
 };
-export declare const placeholderMap: {
-    text: string;
-    h1: string;
-    h2: string;
-    h3: string;
-    h4: string;
-    h5: string;
-    h6: string;
-    quote: string;
-    code: string;
-    bulleted: string;
-    numbered: string;
-    toggle: string;
-    todo: string;
-    bookmark: string;
-    image: string;
-    database: string;
-    attachment: string;
-};
-export declare const headingKeys: Set<string>;
+export declare const headingKeys: Set<import("../affine-model/index.js").ParagraphType>;
 export declare const outlineSettingsKey = "outlinePanelSettings";
 export type TocContext = {
     editor$: Signal<EditorHost>;