@formicoidea/labre-core 0.40.0 → 0.42.0

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

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

@@ -24,28 +24,13 @@ export const previewIconMap = {
     kanban: DatabaseKanbanViewIcon(_16px),
     attachment: AttachmentIcon(_16px),
 };
-const paragraphPlaceholderMap = {
-    quote: 'Quote',
-    text: 'Text Block',
-    h1: 'Heading 1',
-    h2: 'Heading 2',
-    h3: 'Heading 3',
-    h4: 'Heading 4',
-    h5: 'Heading 5',
-    h6: 'Heading 6',
-};
-export const placeholderMap = {
-    code: 'Code Block',
-    bulleted: 'Bulleted List',
-    numbered: 'Numbered List',
-    toggle: 'Toggle List',
-    todo: 'Todo',
-    bookmark: 'Bookmark',
-    image: 'Image',
-    database: 'Database',
-    attachment: 'Attachment',
-    ...paragraphPlaceholderMap,
-};
-export const headingKeys = new Set(Object.keys(paragraphPlaceholderMap).filter(key => key.startsWith('h')));
+export const headingKeys = new Set([
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+]);
 export const outlineSettingsKey = 'outlinePanelSettings';
 export const tocContext = createContext('tocContext');

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

@@ -32,6 +32,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+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 { SettingsIcon, SortIcon } from '@blocksuite/icons/lit';
@@ -41,6 +42,7 @@ import { signal } from '@preact/signals-core';
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';
 import { tocContext } from '../config.js';
+import { OUTLINE_PREVIEW_SETTINGS_TOOLTIP, OUTLINE_TABLE_OF_CONTENTS, OUTLINE_VISIBILITY_AND_SORT_TOOLTIP, } from '../translations.js';
 import * as styles from './outline-panel-header.css.js';
 export const AFFINE_OUTLINE_PANEL_HEADER = 'affine-outline-panel-header';
 let OutlinePanelHeader = (() => {
@@ -80,13 +82,18 @@ let OutlinePanelHeader = (() => {
         render() {
             const sortingEnabled = this._context.enableSorting$.value;
             const showSettingPopper = this._settingPopperShow$.value;
+            const std = this._context.editor$.value.std;
             return html `<div class=${styles.container}>
         <div class=${styles.noteSettingContainer}>
-          <span class=${styles.label}>Table of Contents</span>
+          <span class=${styles.label}
+            >${translateKey(std, ...OUTLINE_TABLE_OF_CONTENTS)}</span
+          >
           <edgeless-tool-icon-button
             data-testid="toggle-toc-setting-button"
             class="${showSettingPopper ? 'active' : ''}"
-            .tooltip=${showSettingPopper ? '' : 'Preview Settings'}
+            .tooltip=${showSettingPopper
+                ? ''
+                : translateKey(std, ...OUTLINE_PREVIEW_SETTINGS_TOOLTIP)}
             .tipPosition=${'bottom'}
             .active=${showSettingPopper}
             .activeMode=${'background'}
@@ -98,7 +105,7 @@ let OutlinePanelHeader = (() => {
         <edgeless-tool-icon-button
           data-testid="toggle-notes-sorting-button"
           class="${sortingEnabled ? 'active' : ''}"
-          .tooltip=${'Visibility and sort'}
+          .tooltip=${translateKey(std, ...OUTLINE_VISIBILITY_AND_SORT_TOOLTIP)}
           .tipPosition=${'left'}
           .iconContainerPadding=${0}
           .active=${sortingEnabled}

package/dist/_pkgs/affine-fragment-outline/header/outline-setting-menu.js

@@ -32,11 +32,13 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+import { translateKey } from '../../affine-shared/services/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
 import { ShadowlessElement } from '../../std/index.js';
 import { consume } from '@lit/context';
 import { html } from 'lit';
 import { tocContext } from '../config.js';
+import { OUTLINE_SETTINGS_LABEL, OUTLINE_SHOW_TYPE_ICON, } from '../translations.js';
 import * as styles from './outline-setting-menu.css.js';
 export const AFFINE_OUTLINE_NOTE_PREVIEW_SETTING_MENU = 'affine-outline-note-preview-setting-menu';
 let OutlineNotePreviewSettingMenu = (() => {
@@ -53,15 +55,20 @@ let OutlineNotePreviewSettingMenu = (() => {
         }
         render() {
             const showPreviewIcon = this._context.showIcons$.value;
+            const std = this._context.editor$.value.std;
             return html `<div
       class=${styles.notePreviewSettingMenuContainer}
       @click=${(e) => e.stopPropagation()}
     >
       <div class=${styles.notePreviewSettingMenuItem}>
-        <div class=${styles.settingLabel}>Settings</div>
+        <div class=${styles.settingLabel}>
+          ${translateKey(std, ...OUTLINE_SETTINGS_LABEL)}
+        </div>
       </div>
       <div class="${styles.notePreviewSettingMenuItem} ${styles.action}">
-        <div class=${styles.actionLabel}>Show type icon</div>
+        <div class=${styles.actionLabel}>
+          ${translateKey(std, ...OUTLINE_SHOW_TYPE_ICON)}
+        </div>
         <div class=${styles.toggleButton}>
           <toggle-switch
             .on=${showPreviewIcon}

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

@@ -33,7 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { NoteDisplayMode } from '../affine-model/index.js';
-import { DocModeProvider } from '../affine-shared/services/index.js';
+import { DocModeProvider, translateKey } from '../affine-shared/services/index.js';
 import { scrollbarStyle } from '../affine-shared/styles/index.js';
 import { SignalWatcher, WithDisposable } from '../global/lit/index.js';
 import { TocIcon } from '@blocksuite/icons/lit';
@@ -45,6 +45,7 @@ import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { tocContext } from './config.js';
+import { OUTLINE_OPEN_IN_SIDEBAR_TOOLTIP, OUTLINE_TABLE_OF_CONTENTS, } from './translations.js';
 import { getHeadingBlocksFromDoc } from './utils/query.js';
 import { observeActiveHeadingDuringScroll, scrollToBlockWithHighlight, } from './utils/scroll.js';
 export const AFFINE_OUTLINE_VIEWER = 'affine-outline-viewer';
@@ -261,7 +262,7 @@ let OutlineViewer = (() => {
             ];
             const toggleOutlinePanelButton = this.toggleOutlinePanel !== null
                 ? html `<edgeless-tool-icon-button
-            .tooltip=${'Open in sidebar'}
+            .tooltip=${translateKey(this.editor.std, ...OUTLINE_OPEN_IN_SIDEBAR_TOOLTIP)}
             .tipPosition=${'top-end'}
             .activeMode=${'background'}
             @click=${this._toggleOutlinePanel}
@@ -284,7 +285,9 @@ let OutlineViewer = (() => {
         </div>
         <div class="outline-viewer-panel">
           <div class="outline-viewer-item outline-viewer-header">
-            <span>Table of Contents</span>
+            <span
+              >${translateKey(this.editor.std, ...OUTLINE_TABLE_OF_CONTENTS)}</span
+            >
             ${toggleOutlinePanelButton}
           </div>
           ${repeat(items, block => block.id, block => {

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

@@ -0,0 +1,54 @@
+import { type ChromeWording } from '../affine-shared/services/index.js';
+/**
+ * The outline (plan) panel's own wordings: the placeholder text a preview
+ * card shows in place of an empty bookmark title, code language, database
+ * title, image caption or attachment name.
+ *
+ * Declared here rather than restated in `outline-preview.ts` so the manifest
+ * (`@labre/affine/translations`, `PACKAGE_WORDINGS`) can walk them — see
+ * `packages/affine/shared/src/services/translation-service/README.md`.
+ */
+export declare const OUTLINE_PLACEHOLDER_BOOKMARK: ChromeWording;
+export declare const OUTLINE_PLACEHOLDER_CODE: ChromeWording;
+export declare const OUTLINE_PLACEHOLDER_DATABASE: ChromeWording;
+export declare const OUTLINE_PLACEHOLDER_IMAGE: ChromeWording;
+export declare const OUTLINE_PLACEHOLDER_ATTACHMENT: ChromeWording;
+export declare const OUTLINE_NOTICE_HIDDEN_LABEL: ChromeWording;
+export declare const OUTLINE_NOTICE_HIDDEN_TEXT: ChromeWording;
+/**
+ * The banner's call to action, said around a sort icon. The icon carries no
+ * text of its own and cannot be interpolated into a `translateKey` param, so
+ * rather than translate the two half-sentences either side of it separately
+ * — the split `manifest.unit.spec.ts` and the brief both warn against — the
+ * icon is rendered BEFORE the (now whole) sentence instead of in the middle
+ * of it.
+ */
+export declare const OUTLINE_NOTICE_ORGANIZE: ChromeWording;
+export declare const OUTLINE_EMPTY_PANEL: ChromeWording;
+export declare const OUTLINE_HIDDEN_CONTENTS: ChromeWording;
+export declare const OUTLINE_MODE_BOTH: ChromeWording;
+export declare const OUTLINE_MODE_EDGELESS: ChromeWording;
+export declare const OUTLINE_MODE_PAGE: ChromeWording;
+export declare const OUTLINE_CARD_SHOW_IN: ChromeWording;
+export declare const OUTLINE_CARD_DISPLAY_MODE_TOOLTIP: ChromeWording;
+export declare const OUTLINE_PREVIEW_DELETED_DOC: ChromeWording;
+/**
+ * Shared by the full panel's header AND the floating mini-viewer's own header
+ * (`outline-viewer.ts`) — the exact same title over the exact same list.
+ */
+export declare const OUTLINE_TABLE_OF_CONTENTS: ChromeWording;
+export declare const OUTLINE_PREVIEW_SETTINGS_TOOLTIP: ChromeWording;
+export declare const OUTLINE_VISIBILITY_AND_SORT_TOOLTIP: ChromeWording;
+export declare const OUTLINE_SETTINGS_LABEL: ChromeWording;
+export declare const OUTLINE_SHOW_TYPE_ICON: ChromeWording;
+export declare const OUTLINE_OPEN_IN_SIDEBAR_TOOLTIP: ChromeWording;
+/**
+ * Every wording DECLARED IN THIS FILE (not re-exported from `chrome.ts`), in
+ * the order it renders them. L7 dedupe aliased `OUTLINE_PLACEHOLDER_CODE`/
+ * `_IMAGE`/`_ATTACHMENT`, `OUTLINE_MODE_BOTH`/`_EDGELESS`/`_PAGE`,
+ * `OUTLINE_CARD_SHOW_IN`, `OUTLINE_PREVIEW_DELETED_DOC`,
+ * `OUTLINE_PREVIEW_SETTINGS_TOOLTIP` and `OUTLINE_SETTINGS_LABEL` to
+ * `chrome.ts` wordings — not listed again here, same rule the note/slash-menu
+ * packages' own chrome aliases already follow.
+ */
+export declare const OUTLINE_WORDINGS: readonly ChromeWording[];

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

@@ -0,0 +1,110 @@
+import { ATTACHMENT_LABEL, BLOCK_TYPE_CODE_BLOCK, CHROME_DELETED_DOC, DISPLAY_MODE_BOTH, DISPLAY_MODE_EDGELESS, DISPLAY_MODE_PAGE, DISPLAY_MODE_SHOW_IN, IMAGE_LABEL, PREVIEW_SETTINGS_LABEL, TOOLBAR_SETTINGS, } from '../affine-shared/services/index.js';
+/**
+ * The outline (plan) panel's own wordings: the placeholder text a preview
+ * card shows in place of an empty bookmark title, code language, database
+ * title, image caption or attachment name.
+ *
+ * Declared here rather than restated in `outline-preview.ts` so the manifest
+ * (`@labre/affine/translations`, `PACKAGE_WORDINGS`) can walk them — see
+ * `packages/affine/shared/src/services/translation-service/README.md`.
+ */
+export const OUTLINE_PLACEHOLDER_BOOKMARK = [
+    'com.labre.outline.placeholder.bookmark',
+    'Bookmark',
+];
+export const OUTLINE_PLACEHOLDER_CODE = BLOCK_TYPE_CODE_BLOCK;
+export const OUTLINE_PLACEHOLDER_DATABASE = [
+    'com.labre.outline.placeholder.database',
+    'Database',
+];
+export const OUTLINE_PLACEHOLDER_IMAGE = IMAGE_LABEL;
+export const OUTLINE_PLACEHOLDER_ATTACHMENT = ATTACHMENT_LABEL;
+/* ── Notice banner (edgeless-only content hidden in page mode) ────────── */
+export const OUTLINE_NOTICE_HIDDEN_LABEL = [
+    'com.labre.outline.notice.hidden-label',
+    'SOME CONTENTS HIDDEN',
+];
+export const OUTLINE_NOTICE_HIDDEN_TEXT = [
+    'com.labre.outline.notice.hidden-text',
+    'Some contents are not visible on canvas.',
+];
+/**
+ * The banner's call to action, said around a sort icon. The icon carries no
+ * text of its own and cannot be interpolated into a `translateKey` param, so
+ * rather than translate the two half-sentences either side of it separately
+ * — the split `manifest.unit.spec.ts` and the brief both warn against — the
+ * icon is rendered BEFORE the (now whole) sentence instead of in the middle
+ * of it.
+ */
+export const OUTLINE_NOTICE_ORGANIZE = [
+    'com.labre.outline.notice.organize',
+    'Click here or to organize content.',
+];
+/* ── Panel body ─────────────────────────────────────────────────────────── */
+export const OUTLINE_EMPTY_PANEL = [
+    'com.labre.outline.empty-panel',
+    'Use headings to create a table of contents.',
+];
+export const OUTLINE_HIDDEN_CONTENTS = [
+    'com.labre.outline.hidden-contents',
+    'Hidden Contents',
+];
+/* ── Note card ──────────────────────────────────────────────────────────── */
+export const OUTLINE_MODE_BOTH = DISPLAY_MODE_BOTH;
+export const OUTLINE_MODE_EDGELESS = DISPLAY_MODE_EDGELESS;
+export const OUTLINE_MODE_PAGE = DISPLAY_MODE_PAGE;
+export const OUTLINE_CARD_SHOW_IN = DISPLAY_MODE_SHOW_IN;
+export const OUTLINE_CARD_DISPLAY_MODE_TOOLTIP = [
+    'com.labre.outline.card.display-mode-tooltip',
+    'Display Mode',
+];
+/* ── Block preview ──────────────────────────────────────────────────────── */
+export const OUTLINE_PREVIEW_DELETED_DOC = CHROME_DELETED_DOC;
+/* ── Header ─────────────────────────────────────────────────────────────── */
+/**
+ * Shared by the full panel's header AND the floating mini-viewer's own header
+ * (`outline-viewer.ts`) — the exact same title over the exact same list.
+ */
+export const OUTLINE_TABLE_OF_CONTENTS = [
+    'com.labre.outline.table-of-contents',
+    'Table of Contents',
+];
+export const OUTLINE_PREVIEW_SETTINGS_TOOLTIP = PREVIEW_SETTINGS_LABEL;
+export const OUTLINE_VISIBILITY_AND_SORT_TOOLTIP = [
+    'com.labre.outline.visibility-and-sort-tooltip',
+    'Visibility and sort',
+];
+/* ── Preview settings menu ──────────────────────────────────────────────── */
+export const OUTLINE_SETTINGS_LABEL = TOOLBAR_SETTINGS;
+export const OUTLINE_SHOW_TYPE_ICON = [
+    'com.labre.outline.setting-menu.show-type-icon',
+    'Show type icon',
+];
+/* ── Floating mini-viewer ───────────────────────────────────────────────── */
+export const OUTLINE_OPEN_IN_SIDEBAR_TOOLTIP = [
+    'com.labre.outline.viewer.open-in-sidebar',
+    'Open in sidebar',
+];
+/**
+ * Every wording DECLARED IN THIS FILE (not re-exported from `chrome.ts`), in
+ * the order it renders them. L7 dedupe aliased `OUTLINE_PLACEHOLDER_CODE`/
+ * `_IMAGE`/`_ATTACHMENT`, `OUTLINE_MODE_BOTH`/`_EDGELESS`/`_PAGE`,
+ * `OUTLINE_CARD_SHOW_IN`, `OUTLINE_PREVIEW_DELETED_DOC`,
+ * `OUTLINE_PREVIEW_SETTINGS_TOOLTIP` and `OUTLINE_SETTINGS_LABEL` to
+ * `chrome.ts` wordings — not listed again here, same rule the note/slash-menu
+ * packages' own chrome aliases already follow.
+ */
+export const OUTLINE_WORDINGS = [
+    OUTLINE_PLACEHOLDER_BOOKMARK,
+    OUTLINE_PLACEHOLDER_DATABASE,
+    OUTLINE_NOTICE_HIDDEN_LABEL,
+    OUTLINE_NOTICE_HIDDEN_TEXT,
+    OUTLINE_NOTICE_ORGANIZE,
+    OUTLINE_EMPTY_PANEL,
+    OUTLINE_HIDDEN_CONTENTS,
+    OUTLINE_CARD_DISPLAY_MODE_TOOLTIP,
+    OUTLINE_TABLE_OF_CONTENTS,
+    OUTLINE_VISIBILITY_AND_SORT_TOOLTIP,
+    OUTLINE_SHOW_TYPE_ICON,
+    OUTLINE_OPEN_IN_SIDEBAR_TOOLTIP,
+];

package/dist/_pkgs/affine-gfx-brush/element-renderer.js

@@ -1,4 +1,4 @@
-import { ElementRendererExtension, } from '../affine-block-surface/index.js';
+import { ElementRendererExtension, taggedPath2D, } from '../affine-block-surface/index.js';
 import { DefaultTheme } from '../affine-model/index.js';
 export const brush = (model, ctx, matrix, renderer) => {
     const { rotate } = model;
@@ -8,6 +8,6 @@ export const brush = (model, ctx, matrix, renderer) => {
     ctx.setTransform(matrix.translateSelf(cx, cy).rotateSelf(rotate).translateSelf(-cx, -cy));
     const color = renderer.getColorValue(model.color, DefaultTheme.black, true);
     ctx.fillStyle = color;
-    ctx.fill(new Path2D(model.commands));
+    ctx.fill(taggedPath2D(model.commands));
 };
 export const BrushElementRendererExtension = ElementRendererExtension('brush', brush);

package/dist/_pkgs/affine-gfx-brush/toolbar/components/eraser/eraser-tool-button.js

@@ -1,8 +1,9 @@
 import { DefaultTool } from '../../../../affine-block-surface/index.js';
-import { ThemeProvider } from '../../../../affine-shared/services/index.js';
+import { ThemeProvider, translateKey } from '../../../../affine-shared/services/index.js';
 import { EdgelessToolbarToolMixin } from '../../../../affine-widget-edgeless-toolbar/index.js';
 import { css, html, LitElement } from 'lit';
 import { EraserTool } from '../../../eraser-tool.js';
+import { BRUSH_TOOLTIP_ERASER } from '../../../translations.js';
 import { EdgelessEraserDarkIcon, EdgelessEraserLightIcon } from './icons.js';
 export class EdgelessEraserToolButton extends EdgelessToolbarToolMixin(LitElement) {
     constructor() {
@@ -49,7 +50,7 @@ export class EdgelessEraserToolButton extends EdgelessToolbarToolMixin(LitElemen
       <edgeless-toolbar-button
         class="edgeless-eraser-button"
         .tooltip=${html `<affine-tooltip-content-with-shortcut
-          data-tip="${'Eraser'}"
+          data-tip="${translateKey(this.edgeless.std, ...BRUSH_TOOLTIP_ERASER)}"
           data-shortcut="${'E'}"
         ></affine-tooltip-content-with-shortcut>`}
         .tooltipOffset=${4}

package/dist/_pkgs/affine-gfx-brush/toolbar/components/pen/consts.d.ts

@@ -1,3 +1,4 @@
+import type { ChromeWording } from '../../../../affine-shared/services/index.js';
 import type { Pen } from './types.js';
 export declare const penIconMap: {
     dark: {
@@ -15,3 +16,5 @@ export declare const penInfoMap: {
         shortcut: string;
     };
 };
+/** `penInfoMap[pen].tip`'s i18n key/fallback pair — resolved at render. */
+export declare const penTipWording: (pen: Pen) => ChromeWording;

package/dist/_pkgs/affine-gfx-brush/toolbar/components/pen/consts.js

@@ -1,3 +1,4 @@
+import { BRUSH_TOOLTIP_HIGHLIGHTER, BRUSH_TOOLTIP_PEN, } from '../../../translations.js';
 import { EdgelessBrushDarkIcon, EdgelessBrushLightIcon, EdgelessHighlighterDarkIcon, EdgelessHighlighterLightIcon, } from './icons.js';
 export const penIconMap = {
     dark: {
@@ -19,3 +20,5 @@ export const penInfoMap = {
         shortcut: '⇧ P',
     },
 };
+/** `penInfoMap[pen].tip`'s i18n key/fallback pair — resolved at render. */
+export const penTipWording = (pen) => pen === 'brush' ? BRUSH_TOOLTIP_PEN : BRUSH_TOOLTIP_HIGHLIGHTER;

package/dist/_pkgs/affine-gfx-brush/toolbar/components/pen/pen-menu.js

@@ -34,7 +34,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { adjustColorAlpha } from '../../../../affine-components/color-picker/index.js';
 import { BRUSH_LINE_WIDTHS, DefaultTheme, HIGHLIGHTER_LINE_WIDTHS, } from '../../../../affine-model/index.js';
-import { FeatureFlagService, ThemeProvider, } from '../../../../affine-shared/services/index.js';
+import { FeatureFlagService, ThemeProvider, translateKey, } from '../../../../affine-shared/services/index.js';
 import { EdgelessToolbarToolMixin } from '../../../../affine-widget-edgeless-toolbar/index.js';
 import { SignalWatcher } from '../../../../global/lit/index.js';
 import { computed, } from '@preact/signals-core';
@@ -43,7 +43,7 @@ import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { BrushTool } from '../../../brush-tool.js';
 import { HighlighterTool } from '../../../highlighter-tool.js';
-import { penInfoMap } from './consts.js';
+import { penInfoMap, penTipWording } from './consts.js';
 let EdgelessPenMenu = (() => {
     let _classSuper = EdgelessToolbarToolMixin(SignalWatcher(LitElement));
     let _onChange_decorators;
@@ -136,7 +136,7 @@ let EdgelessPenMenu = (() => {
           <edgeless-tool-icon-button
             class="edgeless-brush-button"
             .tooltip=${html `<affine-tooltip-content-with-shortcut
-              data-tip="${penInfoMap.brush.tip}"
+              data-tip="${translateKey(this.edgeless.std, ...penTipWording('brush'))}"
               data-shortcut="${penInfoMap.brush.shortcut}"
             ></affine-tooltip-content-with-shortcut>`}
             .tooltipOffset=${20}
@@ -155,7 +155,7 @@ let EdgelessPenMenu = (() => {
           <edgeless-tool-icon-button
             class="edgeless-highlighter-button"
             .tooltip=${html `<affine-tooltip-content-with-shortcut
-              data-tip="${penInfoMap.highlighter.tip}"
+              data-tip="${translateKey(this.edgeless.std, ...penTipWording('highlighter'))}"
               data-shortcut="${penInfoMap.highlighter.shortcut}"
             ></affine-tooltip-content-with-shortcut>`}
             .tooltipOffset=${20}
@@ -190,6 +190,7 @@ let EdgelessPenMenu = (() => {
             .hasTransparent=${!this.edgeless.store
                 .get(FeatureFlagService)
                 .getFlag('enable_color_picker')}
+            .std=${this.edgeless.std}
           ></edgeless-color-panel>
         </div>
       </edgeless-slide-menu>

package/dist/_pkgs/affine-gfx-brush/toolbar/components/pen/pen-tool-button.js

@@ -1,5 +1,5 @@
 import { keepColor } from '../../../../affine-components/color-picker/index.js';
-import { EditPropsStore, ThemeProvider } from '../../../../affine-shared/services/index.js';
+import { EditPropsStore, ThemeProvider, translateKey, } from '../../../../affine-shared/services/index.js';
 import { EdgelessToolbarToolMixin } from '../../../../affine-widget-edgeless-toolbar/index.js';
 import { SignalWatcher } from '../../../../global/lit/index.js';
 import { computed, signal } from '@preact/signals-core';
@@ -8,7 +8,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 import { BrushTool } from '../../../brush-tool.js';
 import { HighlighterTool } from '../../../highlighter-tool.js';
-import { penIconMap, penInfoMap } from './consts.js';
+import { penIconMap, penInfoMap, penTipWording } from './consts.js';
 export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(SignalWatcher(LitElement)) {
     constructor() {
         super(...arguments);
@@ -49,6 +49,7 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(SignalWatche
             const type = this.pen$.value;
             return {
                 ...penInfoMap[type],
+                tip: translateKey(this.edgeless.std, ...penTipWording(type)),
                 type: this.pen$.value,
                 icon: this.penIcon$.value,
                 color: this.color$.value,