@formicoidea/labre-core 0.40.0 → 0.42.0

package/dist/_pkgs/affine-widget-slash-menu/slash-menu-popover.js

@@ -34,8 +34,8 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { createLitPortal } from '../affine-components/portal/index.js';
 import { cleanSpecifiedTail, getInlineEditorByModel, getTextContentFromInlineRange, } from '../affine-rich-text/index.js';
-import { DocModeProvider, TelemetryProvider, } from '../affine-shared/services/index.js';
-import { createKeydownObserver, getCurrentNativeRange, getPopperPosition, isControlledKeyboardEvent, isFuzzyMatch, substringMatchScore, } from '../affine-shared/utils/index.js';
+import { DocModeProvider, TelemetryProvider, translateKey, } from '../affine-shared/services/index.js';
+import { createKeydownObserver, getCurrentNativeRange, getPopperPosition, isControlledKeyboardEvent, substringMatchScore, } from '../affine-shared/utils/index.js';
 import { WithDisposable } from '../global/lit/index.js';
 import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
 import { autoPlacement, offset } from '@floating-ui/dom';
@@ -48,7 +48,8 @@ import groupBy from 'lodash-es/groupBy.js';
 import throttle from 'lodash-es/throttle.js';
 import { AFFINE_SLASH_MENU_MAX_HEIGHT, AFFINE_SLASH_MENU_TOOLTIP_TIMEOUT, AFFINE_SLASH_MENU_TRIGGER_KEY, } from './consts.js';
 import { slashItemToolTipStyle, styles } from './styles.js';
-import { isActionItem, isSubMenuItem, isTextInputKey, parseGroup, slashItemClassName, } from './utils.js';
+import { slashMenuGroupWording } from './translations.js';
+import { isActionItem, isSubMenuItem, isTextInputKey, parseGroup, resolveSlashItemDescription, resolveSlashItemName, resolveSlashTooltipCaption, slashItemClassName, slashItemMatchesQuery, } from './utils.js';
 let SlashMenu = (() => {
     let _classSuper = WithDisposable(LitElement);
     let __filteredItems_decorators;
@@ -139,13 +140,15 @@ let SlashMenu = (() => {
                     this._innerSlashMenuContext.searching = false;
                     return;
                 }
+                const std = this.context.std;
+                const bestScore = (item) => Math.max(substringMatchScore(item.name, searchStr), substringMatchScore(resolveSlashItemName(std, item), searchStr));
                 // Layer order traversal
                 let depth = 0;
                 let queue = this.items;
                 while (queue.length !== 0) {
                     // remove the sub menu item from the previous layer result
                     this._filteredItems = this._filteredItems.filter(item => !isSubMenuItem(item));
-                    this._filteredItems = this._filteredItems.concat(queue.filter(({ name, searchAlias = [] }) => [name, ...searchAlias].some(str => isFuzzyMatch(str, searchStr))));
+                    this._filteredItems = this._filteredItems.concat(queue.filter(item => slashItemMatchesQuery(std, item, searchStr)));
                     // We search first and second layer
                     if (this._filteredItems.length !== 0 && depth >= 1)
                         break;
@@ -162,8 +165,7 @@ let SlashMenu = (() => {
                     depth++;
                 }
                 this._filteredItems.sort((a, b) => {
-                    return -(substringMatchScore(a.name, searchStr) -
-                        substringMatchScore(b.name, searchStr));
+                    return -(bestScore(a) - bestScore(b));
                 });
                 this._queryState = this._filteredItems.length === 0 ? 'no_result' : 'on';
                 this._innerSlashMenuContext.searching = true;
@@ -371,7 +373,9 @@ let InnerSlashMenu = (() => {
             if (!shadowRoot) {
                 return;
             }
-            const ele = shadowRoot.querySelector(`icon-button[text="${item.name}"]`);
+            // `text` now carries the RESOLVED (translated) name — not `item.name` — so
+            // the lookup keys on `data-testid`, which stays the English identity.
+            const ele = shadowRoot.querySelector(`icon-button[data-testid="${item.name}"]`);
             if (!ele) {
                 return;
             }
@@ -545,14 +549,18 @@ let InnerSlashMenu = (() => {
                 subMenuElement.focus();
             };
             this._renderActionItem = (item) => {
-                const { name, icon, description, tooltip } = item;
+                const { name, icon, tooltip } = item;
+                const std = this.context.std;
+                const displayName = resolveSlashItemName(std, item);
+                const displayDescription = resolveSlashItemDescription(std, item);
+                const caption = tooltip && resolveSlashTooltipCaption(std, tooltip);
                 const hover = item === this._activeItem;
                 return html `<icon-button
       class="slash-menu-item ${slashItemClassName(item)}"
       width="100%"
       height="44px"
-      text=${name}
-      subText=${ifDefined(description)}
+      text=${displayName}
+      subText=${ifDefined(displayDescription)}
       data-testid="${name}"
       hover=${hover}
       @mousemove=${() => {
@@ -573,13 +581,17 @@ let InnerSlashMenu = (() => {
                     }}
       >
         <div class="tooltip-figure">${tooltip.figure}</div>
-        <div class="tooltip-caption">${tooltip.caption}</div>
+        <div class="tooltip-caption">${caption}</div>
       </affine-tooltip>`}
     </icon-button>`;
             };
             this._renderGroup = (groupName, items) => {
+                const wording = slashMenuGroupWording(groupName);
+                const displayGroupName = wording
+                    ? translateKey(this.context.std, ...wording)
+                    : groupName;
                 return html `<div class="slash-menu-group">
-      ${when(!this.context.searching, () => html `<div class="slash-menu-group-name">${groupName}</div>`)}
+      ${when(!this.context.searching, () => html `<div class="slash-menu-group-name">${displayGroupName}</div>`)}
       ${items.map(this._renderItem)}
     </div>`;
             };
@@ -591,14 +603,17 @@ let InnerSlashMenu = (() => {
                 return nothing;
             };
             this._renderSubMenuItem = (item) => {
-                const { name, icon, description } = item;
+                const { name, icon } = item;
+                const std = this.context.std;
+                const displayName = resolveSlashItemName(std, item);
+                const displayDescription = resolveSlashItemDescription(std, item);
                 const hover = item === this._activeItem;
                 return html `<icon-button
       class="slash-menu-item ${slashItemClassName(item)}"
       width="100%"
       height="44px"
-      text=${name}
-      subText=${ifDefined(description)}
+      text=${displayName}
+      subText=${ifDefined(displayDescription)}
       data-testid="${name}"
       hover=${hover}
       @mousemove=${() => {

package/dist/_pkgs/affine-widget-slash-menu/tooltips/copy.js

@@ -7,7 +7,7 @@ export const CopyTooltip = html `<svg width="170" height="68" viewBox="0 0 170 6
 </mask>
 <g mask="url(#mask0_16460_1240)">
 <path d="M4 7C4 5.89543 4.89543 5 6 5H172V32H6C4.89543 32 4 31.1046 4 30V7Z" fill="#F4F4F5"/>
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data.&#10;</tspan><tspan x="8" y="43.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="55.6364">either have, choose to share, or accept.&#10;</tspan><tspan x="8" y="71.6364">For example, one user&#x2019;s edits to a document might be on </tspan><tspan x="8" y="83.6364">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="95.6364">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="107.636">other users.&#10;</tspan><tspan x="8" y="123.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="135.636">those changes to their version of the document.</tspan></text>
+<rect x="8" y="8.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="20.1364" width="126.5" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="36.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="48.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="64.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="76.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="88.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="100.136" width="66" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="116.136" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="128.136" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/>
 </g>
 </svg>
 `;

package/dist/_pkgs/affine-widget-slash-menu/tooltips/delete.js

@@ -7,8 +7,8 @@ export const DeleteTooltip = html `<svg width="170" height="68" viewBox="0 0 170
 </mask>
 <g mask="url(#mask0_16460_1246)">
 <path d="M4 7C4 5.89543 4.89543 5 6 5H172V32H6C4.89543 32 4 31.1046 4 30V7Z" fill="#FDECEB"/>
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="43.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="55.6364">either have, choose to share, or accept.&#10;</tspan><tspan x="8" y="71.6364">For example, one user&#x2019;s edits to a document might be on </tspan><tspan x="8" y="83.6364">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="95.6364">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="107.636">other users.&#10;</tspan><tspan x="8" y="123.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="135.636">those changes to their version of the document.</tspan></text>
-<text fill="#EB4335" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data.&#10;</tspan></text>
+<rect x="8" y="36.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="48.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="64.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="76.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="88.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="100.136" width="66" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="116.136" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="128.136" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/>
+<rect x="8" y="8.1364" width="162" height="8" rx="4" fill="#EB4335" fill-opacity="0.3"/><rect x="8" y="20.1364" width="126.5" height="8" rx="4" fill="#EB4335" fill-opacity="0.3"/>
 </g>
 </svg>
 `;

package/dist/_pkgs/affine-widget-slash-menu/tooltips/index.js

@@ -1,3 +1,4 @@
+import { SLASH_MENU_COPY_DUPLICATE_CAPTION, SLASH_MENU_DELETE, SLASH_MENU_MOVE_DOWN, SLASH_MENU_MOVE_UP, SLASH_MENU_NOW, SLASH_MENU_TODAY, SLASH_MENU_TOMORROW, SLASH_MENU_YESTERDAY, } from '../translations.js';
 import { CopyTooltip } from './copy.js';
 import { DeleteTooltip } from './delete.js';
 import { MoveDownTooltip } from './move-down.js';
@@ -10,33 +11,41 @@ export const slashMenuToolTips = {
     Today: {
         figure: TodayTooltip,
         caption: 'Today',
+        captionWording: SLASH_MENU_TODAY,
     },
     Tomorrow: {
         figure: TomorrowTooltip,
         caption: 'Tomorrow',
+        captionWording: SLASH_MENU_TOMORROW,
     },
     Yesterday: {
         figure: YesterdayTooltip,
         caption: 'Yesterday',
+        captionWording: SLASH_MENU_YESTERDAY,
     },
     Now: {
         figure: NowTooltip,
         caption: 'Now',
+        captionWording: SLASH_MENU_NOW,
     },
     'Move Up': {
         figure: MoveUpTooltip,
         caption: 'Move Up',
+        captionWording: SLASH_MENU_MOVE_UP,
     },
     'Move Down': {
         figure: MoveDownTooltip,
         caption: 'Move Down',
+        captionWording: SLASH_MENU_MOVE_DOWN,
     },
     Copy: {
         figure: CopyTooltip,
         caption: 'Copy / Duplicate',
+        captionWording: SLASH_MENU_COPY_DUPLICATE_CAPTION,
     },
     Delete: {
         figure: DeleteTooltip,
         caption: 'Delete',
+        captionWording: SLASH_MENU_DELETE,
     },
 };

package/dist/_pkgs/affine-widget-slash-menu/tooltips/move-down.js

@@ -6,8 +6,8 @@ export const MoveDownTooltip = html `<svg width="170" height="68" viewBox="0 0 1
 <rect width="170" height="68" rx="2" fill="white"/>
 </mask>
 <g mask="url(#mask0_16460_1234)">
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data.&#10;</tspan></text>
-<text fill="#A9A9AD" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="43.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="55.6364">either have, choose to share, or accept.&#10;</tspan><tspan x="8" y="71.6364">For example, one user&#x2019;s edits to a document might be on </tspan><tspan x="8" y="83.6364">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="95.6364">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="107.636">other users.&#10;</tspan><tspan x="8" y="123.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="135.636">those changes to their version of the document.</tspan></text>
+<rect x="8" y="8.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="20.1364" width="126.5" height="8" rx="4" fill="#121212" fill-opacity="0.3"/>
+<rect x="8" y="36.1364" width="162" height="8" rx="4" fill="#A9A9AD" fill-opacity="0.55"/><rect x="8" y="48.1364" width="162" height="8" rx="4" fill="#A9A9AD" fill-opacity="0.55"/><rect x="8" y="64.1364" width="162" height="8" rx="4" fill="#A9A9AD" fill-opacity="0.55"/><rect x="8" y="76.1364" width="162" height="8" rx="4" fill="#A9A9AD" fill-opacity="0.55"/><rect x="8" y="88.1364" width="162" height="8" rx="4" fill="#A9A9AD" fill-opacity="0.55"/><rect x="8" y="100.136" width="66" height="8" rx="4" fill="#A9A9AD" fill-opacity="0.55"/><rect x="8" y="116.136" width="162" height="8" rx="4" fill="#A9A9AD" fill-opacity="0.55"/><rect x="8" y="128.136" width="162" height="8" rx="4" fill="#A9A9AD" fill-opacity="0.55"/>
 </g>
 <g clip-path="url(#clip0_16460_1234)">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M25.5073 51.0032C25.2022 50.723 24.7278 50.7432 24.4476 51.0483L20.75 55.0745L20.75 43C20.75 42.5858 20.4142 42.25 20 42.25C19.5858 42.25 19.25 42.5858 19.25 43L19.25 55.0745L15.5524 51.0483C15.2722 50.7432 14.7978 50.723 14.4927 51.0032C14.1876 51.2833 14.1674 51.7578 14.4476 52.0629L19.4476 57.5073C19.5896 57.662 19.79 57.75 20 57.75C20.21 57.75 20.4104 57.662 20.5524 57.5073L25.5524 52.0629C25.8326 51.7578 25.8124 51.2833 25.5073 51.0032Z" fill="#121212"/>

package/dist/_pkgs/affine-widget-slash-menu/tooltips/move-up.js

@@ -6,8 +6,8 @@ export const MoveUpTooltip = html `<svg width="170" height="68" viewBox="0 0 170
 <rect width="170" height="68" rx="2" fill="white"/>
 </mask>
 <g mask="url(#mask0_16460_1228)">
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="43.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="55.6364">either have, choose to share, or accept.&#10;</tspan><tspan x="8" y="71.6364">For example, one user&#x2019;s edits to a document might be on </tspan><tspan x="8" y="83.6364">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="95.6364">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="107.636">other users.&#10;</tspan><tspan x="8" y="123.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="135.636">those changes to their version of the document.</tspan></text>
-<text fill="#A9A9AD" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data.&#10;</tspan></text>
+<rect x="8" y="36.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="48.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="64.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="76.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="88.1364" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="100.136" width="66" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="116.136" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/><rect x="8" y="128.136" width="162" height="8" rx="4" fill="#121212" fill-opacity="0.3"/>
+<rect x="8" y="8.1364" width="162" height="8" rx="4" fill="#A9A9AD" fill-opacity="0.55"/><rect x="8" y="20.1364" width="126.5" height="8" rx="4" fill="#A9A9AD" fill-opacity="0.55"/>
 </g>
 <g clip-path="url(#clip0_16460_1228)">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M25.5073 16.9968C25.2022 17.277 24.7278 17.2568 24.4476 16.9517L20.75 12.9255L20.75 25C20.75 25.4142 20.4142 25.75 20 25.75C19.5858 25.75 19.25 25.4142 19.25 25L19.25 12.9255L15.5524 16.9517C15.2722 17.2568 14.7978 17.277 14.4927 16.9968C14.1876 16.7167 14.1674 16.2422 14.4476 15.9371L19.4476 10.4927C19.5896 10.338 19.79 10.25 20 10.25C20.21 10.25 20.4104 10.338 20.5524 10.4927L25.5524 15.9371C25.8326 16.2422 25.8124 16.7167 25.5073 16.9968Z" fill="#121212"/>

package/dist/_pkgs/affine-widget-slash-menu/tooltips/now.js

@@ -6,9 +6,9 @@ export const NowTooltip = html `<svg width="170" height="68" viewBox="0 0 170 68
 <rect width="170" height="68" rx="2" fill="white"/>
 </mask>
 <g mask="url(#mask0_16460_1143)">
-<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="38.0488" y="16.6364">now</tspan><tspan x="81.8574" y="16.6364"> and time.&#10;</tspan></text>
-<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Insert </tspan><tspan x="57.8047" y="16.6364"> date</tspan></text>
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="34.6364">11:45:14 Wed 3 Aug, 2022</tspan></text>
+<rect x="38.0488" y="9.1364" width="16.5" height="8" rx="4" fill="#8E8D91" fill-opacity="0.55"/><rect x="81.8574" y="9.1364" width="55" height="8" rx="4" fill="#8E8D91" fill-opacity="0.55"/>
+<rect x="8" y="9.1364" width="38.5" height="8" rx="4" fill="#8E8D91" fill-opacity="0.55"/><rect x="57.8047" y="9.1364" width="27.5" height="8" rx="4" fill="#8E8D91" fill-opacity="0.55"/>
+<rect x="8" y="27.1364" width="132" height="8" rx="4" fill="#121212" fill-opacity="0.3"/>
 </g>
 </svg>
 `;

package/dist/_pkgs/affine-widget-slash-menu/tooltips/today.js

@@ -7,8 +7,8 @@ export const TodayTooltip = html `<svg width="170" height="68" viewBox="0 0 170
 </mask>
 <g mask="url(#mask0_16460_1128)">
 <text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="95.5098" y="16.6364">.&#10;</tspan></text>
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="34.6364">Wed 3 Aug, 2022</tspan></text>
-<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Insert today&#x2019;s date</tspan></text>
+<rect x="8" y="27.1364" width="82.5" height="8" rx="4" fill="#121212" fill-opacity="0.3"/>
+<rect x="8" y="9.1364" width="104.5" height="8" rx="4" fill="#8E8D91" fill-opacity="0.55"/>
 </g>
 </svg>
 `;

package/dist/_pkgs/affine-widget-slash-menu/tooltips/tomorrow.js

@@ -6,9 +6,9 @@ export const TomorrowTooltip = html `<svg width="170" height="68" viewBox="0 0 1
 <rect width="170" height="68" rx="2" fill="white"/>
 </mask>
 <g mask="url(#mask0_16460_1133)">
-<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="38.0488" y="16.6364">tomorrow&#x2019;s</tspan><tspan x="114.211" y="16.6364">.&#10;</tspan></text>
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="34.6364">Wed 3 Aug, 2022</tspan></text>
-<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Insert </tspan><tspan x="90.1582" y="16.6364"> date</tspan></text>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="114.211" y="16.6364">.&#10;</tspan></text><rect x="38.0488" y="9.1364" width="55" height="8" rx="4" fill="#8E8D91" fill-opacity="0.55"/>
+<rect x="8" y="27.1364" width="82.5" height="8" rx="4" fill="#121212" fill-opacity="0.3"/>
+<rect x="8" y="9.1364" width="38.5" height="8" rx="4" fill="#8E8D91" fill-opacity="0.55"/><rect x="90.1582" y="9.1364" width="27.5" height="8" rx="4" fill="#8E8D91" fill-opacity="0.55"/>
 </g>
 </svg>
 `;

package/dist/_pkgs/affine-widget-slash-menu/tooltips/yesterday.js

@@ -6,9 +6,9 @@ export const YesterdayTooltip = html `<svg width="170" height="68" viewBox="0 0
 <rect width="170" height="68" rx="2" fill="white"/>
 </mask>
 <g mask="url(#mask0_16460_1138)">
-<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="38.0488" y="16.6364">yesterday&#x2019;s</tspan><tspan x="115.334" y="16.6364">.&#10;</tspan></text>
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="34.6364">Wed 3 Aug, 2022</tspan></text>
-<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Insert </tspan><tspan x="91.2812" y="16.6364"> date</tspan></text>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="115.334" y="16.6364">.&#10;</tspan></text><rect x="38.0488" y="9.1364" width="60.5" height="8" rx="4" fill="#8E8D91" fill-opacity="0.55"/>
+<rect x="8" y="27.1364" width="82.5" height="8" rx="4" fill="#121212" fill-opacity="0.3"/>
+<rect x="8" y="9.1364" width="38.5" height="8" rx="4" fill="#8E8D91" fill-opacity="0.55"/><rect x="91.2812" y="9.1364" width="27.5" height="8" rx="4" fill="#8E8D91" fill-opacity="0.55"/>
 </g>
 </svg>
 `;

package/dist/_pkgs/affine-widget-slash-menu/translations.d.ts

@@ -0,0 +1,91 @@
+import { type ChromeWording } from '../affine-shared/services/index.js';
+/**
+ * The slash menu's own wordings — one `ChromeWording` per static config
+ * literal (`name`, `description`, a tooltip's `caption`) that
+ * `defaultSlashMenuConfig` (`./config.ts`) and `slashMenuToolTips`
+ * (`./tooltips/index.ts`) render, plus one per group header the widget draws
+ * itself (`./config.ts`'s own `Date` and `Actions` groups).
+ *
+ * This is the DEMONSTRATOR of the "static config rendered by a widget"
+ * pattern (`packages/affine/shared/src/services/translation-service/README.md`):
+ * the toolbar precedent resolves `labelWording` / `tooltipWording` in
+ * `combine`; the slash menu resolves `nameWording` / `descriptionWording` /
+ * `captionWording` in `slash-menu-popover.ts`, at render.
+ *
+ * Only the items THIS package declares are converted here — every other
+ * package's `configs/slash-menu.ts` keeps its own English literals until its
+ * own lot converts them, and registers its own table the same way.
+ */
+export declare const SLASH_MENU_TODAY: ChromeWording;
+export declare const SLASH_MENU_TOMORROW: ChromeWording;
+export declare const SLASH_MENU_YESTERDAY: ChromeWording;
+export declare const SLASH_MENU_NOW: ChromeWording;
+/**
+ * "Move Up" and "Move Down" are shared with the note block's own move-up/down
+ * hotkey config (`packages/affine/blocks/note/src/move-block.ts`) — both this
+ * package and `blocks/note` are owned by the same lot, so the word moved to
+ * `chrome.ts` (`TOOLBAR_MOVE_UP` / `TOOLBAR_MOVE_DOWN`) rather than being
+ * declared here and reused there.
+ */
+export declare const SLASH_MENU_MOVE_UP: ChromeWording;
+export declare const SLASH_MENU_MOVE_DOWN: ChromeWording;
+export declare const SLASH_MENU_MOVE_UP_DESCRIPTION: ChromeWording;
+export declare const SLASH_MENU_MOVE_DOWN_DESCRIPTION: ChromeWording;
+/**
+ * "Copy", "Duplicate" and "Delete" are the editor's shared verbs, already
+ * declared once for every toolbar in `chrome.ts`: one word, one key.
+ */
+export declare const SLASH_MENU_COPY: ChromeWording;
+export declare const SLASH_MENU_DUPLICATE: ChromeWording;
+export declare const SLASH_MENU_DELETE: ChromeWording;
+export declare const SLASH_MENU_COPY_DESCRIPTION: ChromeWording;
+export declare const SLASH_MENU_DUPLICATE_DESCRIPTION: ChromeWording;
+/**
+ * The tooltip Copy and Duplicate share (`config.ts` points both items at
+ * `slashMenuToolTips['Copy']`): one caption, one key, reused by both items —
+ * exactly the case `CHROME_WORDINGS`' own doc comment describes.
+ */
+export declare const SLASH_MENU_COPY_DUPLICATE_CAPTION: ChromeWording;
+export declare const SLASH_MENU_DELETE_DESCRIPTION: ChromeWording;
+/**
+ * One `ChromeWording` per group header the slash menu can draw — a closed
+ * set inventoried across every `configs/slash-menu.ts` in the repo (`group:
+ * '<n>_<Name>@<i>'`, the `<Name>` between `_` and `@`):
+ *
+ * - `Basic` — callout, latex, note (paragraph/heading/list/quote/divider).
+ * - `Content & Media` — attachment, bookmark, image, latex, the generic embed
+ *   (iframe) block, and (postponed, `blocks/table`) table.
+ * - `Page` — the linked-doc embed block.
+ * - `Edgeless Element` — surface-ref.
+ * - `Date`, `Actions` — this package's own groups (`./config.ts`).
+ *
+ * NOT included: `Database`, used only by the postponed `blocks/database` and
+ * `blocks/data-view` — the PO's decision excludes those surfaces, and
+ * `Database` has no other user today. A framework or a later lot that adds a
+ * group name not in this table is unaffected: `slashMenuGroupWording` returns
+ * `undefined` and the header renders the raw group name, same as before any
+ * of this existed.
+ */
+export declare const SLASH_MENU_GROUP_BASIC: ChromeWording;
+export declare const SLASH_MENU_GROUP_CONTENT_MEDIA: ChromeWording;
+export declare const SLASH_MENU_GROUP_PAGE: ChromeWording;
+export declare const SLASH_MENU_GROUP_EDGELESS_ELEMENT: ChromeWording;
+export declare const SLASH_MENU_GROUP_DATE: ChromeWording;
+export declare const SLASH_MENU_GROUP_ACTIONS: ChromeWording;
+/**
+ * The wording for a group header, or `undefined` for a group name outside the
+ * closed set above — rendered raw, same as before this table existed.
+ */
+export declare function slashMenuGroupWording(groupName: string): ChromeWording | undefined;
+/**
+ * Every wording declared above, in declaration order — walked by
+ * `PACKAGE_WORDINGS` in `packages/affine/all/src/translations.ts` rather than
+ * restated there.
+ *
+ * `SLASH_MENU_MOVE_UP` / `_MOVE_DOWN` (aliases of the chrome table's
+ * `TOOLBAR_MOVE_UP` / `_MOVE_DOWN`) are deliberately NOT listed here, exactly
+ * like `SLASH_MENU_COPY` / `_DUPLICATE` / `_DELETE` above: an alias is walked
+ * once, from `CHROME_WORDINGS`, and listing it again here would offer a host
+ * the same key twice.
+ */
+export declare const SLASH_MENU_WORDINGS: readonly ChromeWording[];

package/dist/_pkgs/affine-widget-slash-menu/translations.js

@@ -0,0 +1,175 @@
+import { TOOLBAR_COPY, TOOLBAR_DELETE, TOOLBAR_DUPLICATE, TOOLBAR_MOVE_DOWN, TOOLBAR_MOVE_UP, } from '../affine-shared/services/index.js';
+/**
+ * The slash menu's own wordings — one `ChromeWording` per static config
+ * literal (`name`, `description`, a tooltip's `caption`) that
+ * `defaultSlashMenuConfig` (`./config.ts`) and `slashMenuToolTips`
+ * (`./tooltips/index.ts`) render, plus one per group header the widget draws
+ * itself (`./config.ts`'s own `Date` and `Actions` groups).
+ *
+ * This is the DEMONSTRATOR of the "static config rendered by a widget"
+ * pattern (`packages/affine/shared/src/services/translation-service/README.md`):
+ * the toolbar precedent resolves `labelWording` / `tooltipWording` in
+ * `combine`; the slash menu resolves `nameWording` / `descriptionWording` /
+ * `captionWording` in `slash-menu-popover.ts`, at render.
+ *
+ * Only the items THIS package declares are converted here — every other
+ * package's `configs/slash-menu.ts` keeps its own English literals until its
+ * own lot converts them, and registers its own table the same way.
+ */
+/* ── Date group ───────────────────────────────────────────────────────────
+ * One wording each: the item's `name` and its tooltip's `caption` say the
+ * exact same word ("Today" names the item AND captions its illustration), so
+ * one key serves both — the "un mot partagé = une clé" rule applied within a
+ * single item rather than across items.
+ */
+export const SLASH_MENU_TODAY = [
+    'com.labre.slash-menu.date.today',
+    'Today',
+];
+export const SLASH_MENU_TOMORROW = [
+    'com.labre.slash-menu.date.tomorrow',
+    'Tomorrow',
+];
+export const SLASH_MENU_YESTERDAY = [
+    'com.labre.slash-menu.date.yesterday',
+    'Yesterday',
+];
+export const SLASH_MENU_NOW = [
+    'com.labre.slash-menu.date.now',
+    'Now',
+];
+/* ── Actions group ─────────────────────────────────────────────────────── */
+/**
+ * "Move Up" and "Move Down" are shared with the note block's own move-up/down
+ * hotkey config (`packages/affine/blocks/note/src/move-block.ts`) — both this
+ * package and `blocks/note` are owned by the same lot, so the word moved to
+ * `chrome.ts` (`TOOLBAR_MOVE_UP` / `TOOLBAR_MOVE_DOWN`) rather than being
+ * declared here and reused there.
+ */
+export const SLASH_MENU_MOVE_UP = TOOLBAR_MOVE_UP;
+export const SLASH_MENU_MOVE_DOWN = TOOLBAR_MOVE_DOWN;
+export const SLASH_MENU_MOVE_UP_DESCRIPTION = [
+    'com.labre.slash-menu.actions.move-up.description',
+    'Shift this line up.',
+];
+export const SLASH_MENU_MOVE_DOWN_DESCRIPTION = [
+    'com.labre.slash-menu.actions.move-down.description',
+    'Shift this line down.',
+];
+/**
+ * "Copy", "Duplicate" and "Delete" are the editor's shared verbs, already
+ * declared once for every toolbar in `chrome.ts`: one word, one key.
+ */
+export const SLASH_MENU_COPY = TOOLBAR_COPY;
+export const SLASH_MENU_DUPLICATE = TOOLBAR_DUPLICATE;
+export const SLASH_MENU_DELETE = TOOLBAR_DELETE;
+export const SLASH_MENU_COPY_DESCRIPTION = [
+    'com.labre.slash-menu.actions.copy.description',
+    'Copy this line to clipboard.',
+];
+export const SLASH_MENU_DUPLICATE_DESCRIPTION = [
+    'com.labre.slash-menu.actions.duplicate.description',
+    'Create a duplicate of this line.',
+];
+/**
+ * The tooltip Copy and Duplicate share (`config.ts` points both items at
+ * `slashMenuToolTips['Copy']`): one caption, one key, reused by both items —
+ * exactly the case `CHROME_WORDINGS`' own doc comment describes.
+ */
+export const SLASH_MENU_COPY_DUPLICATE_CAPTION = [
+    'com.labre.slash-menu.actions.copy-duplicate.caption',
+    'Copy / Duplicate',
+];
+export const SLASH_MENU_DELETE_DESCRIPTION = [
+    'com.labre.slash-menu.actions.delete.description',
+    'Remove this line permanently.',
+];
+/* ── Group headers ─────────────────────────────────────────────────────── */
+/**
+ * One `ChromeWording` per group header the slash menu can draw — a closed
+ * set inventoried across every `configs/slash-menu.ts` in the repo (`group:
+ * '<n>_<Name>@<i>'`, the `<Name>` between `_` and `@`):
+ *
+ * - `Basic` — callout, latex, note (paragraph/heading/list/quote/divider).
+ * - `Content & Media` — attachment, bookmark, image, latex, the generic embed
+ *   (iframe) block, and (postponed, `blocks/table`) table.
+ * - `Page` — the linked-doc embed block.
+ * - `Edgeless Element` — surface-ref.
+ * - `Date`, `Actions` — this package's own groups (`./config.ts`).
+ *
+ * NOT included: `Database`, used only by the postponed `blocks/database` and
+ * `blocks/data-view` — the PO's decision excludes those surfaces, and
+ * `Database` has no other user today. A framework or a later lot that adds a
+ * group name not in this table is unaffected: `slashMenuGroupWording` returns
+ * `undefined` and the header renders the raw group name, same as before any
+ * of this existed.
+ */
+export const SLASH_MENU_GROUP_BASIC = [
+    'com.labre.slash-menu.group.basic',
+    'Basic',
+];
+export const SLASH_MENU_GROUP_CONTENT_MEDIA = [
+    'com.labre.slash-menu.group.content-media',
+    'Content & Media',
+];
+export const SLASH_MENU_GROUP_PAGE = [
+    'com.labre.slash-menu.group.page',
+    'Document',
+];
+export const SLASH_MENU_GROUP_EDGELESS_ELEMENT = [
+    'com.labre.slash-menu.group.edgeless-element',
+    'Canvas Element',
+];
+export const SLASH_MENU_GROUP_DATE = [
+    'com.labre.slash-menu.group.date',
+    'Date',
+];
+export const SLASH_MENU_GROUP_ACTIONS = [
+    'com.labre.slash-menu.group.actions',
+    'Actions',
+];
+/** The group table, keyed by the raw group name `parseGroup` extracts. */
+const SLASH_MENU_GROUP_WORDINGS = {
+    Basic: SLASH_MENU_GROUP_BASIC,
+    'Content & Media': SLASH_MENU_GROUP_CONTENT_MEDIA,
+    Page: SLASH_MENU_GROUP_PAGE,
+    'Edgeless Element': SLASH_MENU_GROUP_EDGELESS_ELEMENT,
+    Date: SLASH_MENU_GROUP_DATE,
+    Actions: SLASH_MENU_GROUP_ACTIONS,
+};
+/**
+ * The wording for a group header, or `undefined` for a group name outside the
+ * closed set above — rendered raw, same as before this table existed.
+ */
+export function slashMenuGroupWording(groupName) {
+    return SLASH_MENU_GROUP_WORDINGS[groupName];
+}
+/**
+ * Every wording declared above, in declaration order — walked by
+ * `PACKAGE_WORDINGS` in `packages/affine/all/src/translations.ts` rather than
+ * restated there.
+ *
+ * `SLASH_MENU_MOVE_UP` / `_MOVE_DOWN` (aliases of the chrome table's
+ * `TOOLBAR_MOVE_UP` / `_MOVE_DOWN`) are deliberately NOT listed here, exactly
+ * like `SLASH_MENU_COPY` / `_DUPLICATE` / `_DELETE` above: an alias is walked
+ * once, from `CHROME_WORDINGS`, and listing it again here would offer a host
+ * the same key twice.
+ */
+export const SLASH_MENU_WORDINGS = [
+    SLASH_MENU_TODAY,
+    SLASH_MENU_TOMORROW,
+    SLASH_MENU_YESTERDAY,
+    SLASH_MENU_NOW,
+    SLASH_MENU_MOVE_UP_DESCRIPTION,
+    SLASH_MENU_MOVE_DOWN_DESCRIPTION,
+    SLASH_MENU_COPY_DESCRIPTION,
+    SLASH_MENU_DUPLICATE_DESCRIPTION,
+    SLASH_MENU_COPY_DUPLICATE_CAPTION,
+    SLASH_MENU_DELETE_DESCRIPTION,
+    SLASH_MENU_GROUP_BASIC,
+    SLASH_MENU_GROUP_CONTENT_MEDIA,
+    SLASH_MENU_GROUP_PAGE,
+    SLASH_MENU_GROUP_EDGELESS_ELEMENT,
+    SLASH_MENU_GROUP_DATE,
+    SLASH_MENU_GROUP_ACTIONS,
+];

package/dist/_pkgs/affine-widget-slash-menu/types.d.ts

@@ -1,3 +1,4 @@
+import type { ChromeWording } from '../affine-shared/services/index.js';
 import type { BlockStdScope } from '../std/index.js';
 import type { BlockModel } from '../store/index.js';
 import type { TemplateResult } from 'lit';
@@ -8,10 +9,27 @@ export type SlashMenuContext = {
 export type SlashMenuTooltip = {
     figure: TemplateResult;
     caption: string;
+    /**
+     * {@link caption}, said as an i18n key with its English default — resolved
+     * against the host's catalogue when the tooltip renders, and shown instead
+     * of `caption` there. Mirrors `ToolbarAction.labelWording`: a static
+     * literal is the one wording a host cannot override.
+     */
+    captionWording?: ChromeWording;
 };
 type SlashMenuItemBase = {
     name: string;
+    /**
+     * The same word as {@link name}, said as an i18n key with its English
+     * default — resolved against the host's catalogue when the item renders,
+     * and shown instead of `name` there. `name` stays the item's English
+     * identity: it is what tests and `searchAlias` match against, and what
+     * `slashItemClassName` derives a CSS class from.
+     */
+    nameWording?: ChromeWording;
     description?: string;
+    /** {@link nameWording}, for {@link description}. */
+    descriptionWording?: ChromeWording;
     icon?: TemplateResult;
     /**
      * This field defines sorting and grouping of menu items like VSCode.