@formicoidea/labre-core 0.40.0 → 0.42.0

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

@@ -46,6 +46,9 @@ let AdapterPanel = (() => {
     let _store_decorators;
     let _store_initializers = [];
     let _store_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _transformerMiddlewares_decorators;
     let _transformerMiddlewares_initializers = [];
     let _transformerMiddlewares_extraInitializers = [];
@@ -56,9 +59,11 @@ let AdapterPanel = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _store_decorators = [property({ attribute: false })];
+            _std_decorators = [property({ attribute: false })];
             _transformerMiddlewares_decorators = [property({ attribute: false })];
             __context_decorators = [provide({ context: adapterPanelContext })];
             __esDecorate(this, null, _store_decorators, { kind: "accessor", name: "store", static: false, private: false, access: { has: obj => "store" in obj, get: obj => obj.store, set: (obj, value) => { obj.store = value; } }, metadata: _metadata }, _store_initializers, _store_extraInitializers);
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             __esDecorate(this, null, _transformerMiddlewares_decorators, { kind: "accessor", name: "transformerMiddlewares", static: false, private: false, access: { has: obj => "transformerMiddlewares" in obj, get: obj => obj.transformerMiddlewares, set: (obj, value) => { obj.transformerMiddlewares = value; } }, metadata: _metadata }, _transformerMiddlewares_initializers, _transformerMiddlewares_extraInitializers);
             __esDecorate(this, null, __context_decorators, { kind: "accessor", name: "_context", static: false, private: false, access: { has: obj => "_context" in obj, get: obj => obj._context, set: (obj, value) => { obj._context = value; } }, metadata: _metadata }, __context_initializers, __context_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -138,6 +143,7 @@ let AdapterPanel = (() => {
                 htmlContent$: signal(''),
                 markdownContent$: signal(''),
                 plainTextContent$: signal(''),
+                std: this.std,
             };
         }
         willUpdate(changedProperties) {
@@ -165,6 +171,10 @@ let AdapterPanel = (() => {
         #store_accessor_storage;
         get store() { return this.#store_accessor_storage; }
         set store(value) { this.#store_accessor_storage = value; }
+        #std_accessor_storage;
+        /** See `AdapterPanelContext['std']`. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         #transformerMiddlewares_accessor_storage;
         get transformerMiddlewares() { return this.#transformerMiddlewares_accessor_storage; }
         set transformerMiddlewares(value) { this.#transformerMiddlewares_accessor_storage = value; }
@@ -193,7 +203,8 @@ let AdapterPanel = (() => {
                 }
             };
             this.#store_accessor_storage = __runInitializers(this, _store_initializers, void 0);
-            this.#transformerMiddlewares_accessor_storage = (__runInitializers(this, _store_extraInitializers), __runInitializers(this, _transformerMiddlewares_initializers, []));
+            this.#std_accessor_storage = (__runInitializers(this, _store_extraInitializers), __runInitializers(this, _std_initializers, undefined));
+            this.#transformerMiddlewares_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _transformerMiddlewares_initializers, []));
             this.#_context_accessor_storage = (__runInitializers(this, _transformerMiddlewares_extraInitializers), __runInitializers(this, __context_initializers, void 0));
             __runInitializers(this, __context_extraInitializers);
         }

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

@@ -38,7 +38,8 @@ import { SignalWatcher } from '../../global/lit/index.js';
 import { consume } from '@lit/context';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { adapterPanelContext, ADAPTERS, } from '../config.js';
+import { ADAPTERS, adapterPanelContext, adapterPanelLabel, } from '../config.js';
+import { ADAPTER_PANEL_PREVIEW, ADAPTER_PANEL_SOURCE } from '../translations.js';
 export const AFFINE_ADAPTER_PANEL_BODY = 'affine-adapter-panel-body';
 let AdapterPanelBody = (() => {
     let _classSuper = SignalWatcher(LitElement);
@@ -177,13 +178,13 @@ let AdapterPanelBody = (() => {
             class="html-toggle-item"
             ?active=${!this.isHtmlPreview}
             @click=${() => (this._context.isHtmlPreview$.value = false)}
-            >Source</span
+            >${adapterPanelLabel(this._context.std, ADAPTER_PANEL_SOURCE)}</span
           >
           <span
             class="html-toggle-item"
             ?active=${this.isHtmlPreview}
             @click=${() => (this._context.isHtmlPreview$.value = true)}
-            >Preview</span
+            >${adapterPanelLabel(this._context.std, ADAPTER_PANEL_PREVIEW)}</span
           >
         </div>
       </div>

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

@@ -1,8 +1,11 @@
+import { type ChromeWording } from '../affine-shared/services/index.js';
+import type { BlockStdScope } from '../std/index.js';
 import type { DocSnapshot } from '../store/index.js';
 import type { Signal } from '@preact/signals-core';
 export type AdapterItem = {
     id: string;
     label: string;
+    labelWording: ChromeWording;
 };
 export declare const ADAPTERS: AdapterItem[];
 export type AdapterPanelContext = {
@@ -12,7 +15,17 @@ export type AdapterPanelContext = {
     htmlContent$: Signal<string>;
     markdownContent$: Signal<string>;
     plainTextContent$: Signal<string>;
+    /**
+     * The editor's std scope, when the host mounts this debug panel inside an
+     * editor rather than standalone against a bare `store` — resolves the
+     * wordings above through the translation seam. Optional: a host that
+     * mounts this panel with only a `store` (as the playground's debug tool
+     * does today) keeps the English literal, exactly as before this existed.
+     */
+    std?: BlockStdScope;
 };
 export declare const adapterPanelContext: {
     __context__: AdapterPanelContext;
 };
+/** `translateKey(std, ...wording)` when `std` is available, else the literal. */
+export declare function adapterPanelLabel(std: BlockStdScope | undefined, wording: ChromeWording): string;

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

@@ -1,8 +1,22 @@
+import { translateKey, } from '../affine-shared/services/index.js';
 import { createContext } from '@lit/context';
+import { ADAPTER_FORMAT_HTML, ADAPTER_FORMAT_MARKDOWN, ADAPTER_FORMAT_PLAINTEXT, ADAPTER_FORMAT_SNAPSHOT, } from './translations.js';
 export const ADAPTERS = [
-    { id: 'markdown', label: 'Markdown' },
-    { id: 'plaintext', label: 'PlainText' },
-    { id: 'html', label: 'HTML' },
-    { id: 'snapshot', label: 'Snapshot' },
+    {
+        id: 'markdown',
+        label: 'Markdown',
+        labelWording: ADAPTER_FORMAT_MARKDOWN,
+    },
+    {
+        id: 'plaintext',
+        label: 'PlainText',
+        labelWording: ADAPTER_FORMAT_PLAINTEXT,
+    },
+    { id: 'html', label: 'HTML', labelWording: ADAPTER_FORMAT_HTML },
+    { id: 'snapshot', label: 'Snapshot', labelWording: ADAPTER_FORMAT_SNAPSHOT },
 ];
 export const adapterPanelContext = createContext('adapterPanelContext');
+/** `translateKey(std, ...wording)` when `std` is available, else the literal. */
+export function adapterPanelLabel(std, wording) {
+    return std ? translateKey(std, ...wording) : wording[1];
+}

package/dist/_pkgs/affine-fragment-adapter-panel/header/adapter-menu.js

@@ -37,7 +37,7 @@ 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 { adapterPanelContext, ADAPTERS, } from '../config.js';
+import { ADAPTERS, adapterPanelContext, adapterPanelLabel, } from '../config.js';
 export const AFFINE_ADAPTER_MENU = 'affine-adapter-menu';
 let AdapterMenu = (() => {
     let _classSuper = SignalWatcher(LitElement);
@@ -101,7 +101,7 @@ let AdapterMenu = (() => {
             class=${classes}
             @click=${() => this._handleAdapterChange(adapter)}
           >
-            ${adapter.label}
+            ${adapterPanelLabel(this._context.std, adapter.labelWording)}
           </button>
         `;
             })}

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

@@ -39,7 +39,7 @@ import { flip, offset } from '@floating-ui/dom';
 import { consume } from '@lit/context';
 import { css, html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { adapterPanelContext } from '../config.js';
+import { adapterPanelContext, adapterPanelLabel, } from '../config.js';
 export const AFFINE_ADAPTER_PANEL_HEADER = 'affine-adapter-panel-header';
 let AdapterPanelHeader = (() => {
     let _classSuper = SignalWatcher(LitElement);
@@ -117,7 +117,7 @@ let AdapterPanelHeader = (() => {
       <div class="adapter-panel-header">
         <div class="adapter-selector" @click="${this._toggleAdapterMenu}">
           <span class="adapter-selector-label">
-            ${this.activeAdapter.label}
+            ${adapterPanelLabel(this._context.std, this.activeAdapter.labelWording)}
           </span>
           ${ArrowDownSmallIcon({ width: '16px', height: '16px' })}
         </div>

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>`;
         }