@formicoidea/labre-core 0.40.0 → 0.42.0

package/dist/_pkgs/affine-components/open-doc-dropdown-menu/dropdown-menu.js

@@ -32,7 +32,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { ToolbarContext, } from '../../affine-shared/services/index.js';
+import { ToolbarContext, translateKey, } from '../../affine-shared/services/index.js';
 import { unsafeCSSVarV2 } from '../../affine-shared/theme/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
 import { PropTypes, requiredProperties } from '../../std/index.js';
@@ -42,6 +42,7 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { EditorChevronDown } from '../toolbar/index.js';
+import { OPEN_DOC_MENU_ARIA, OPEN_DOC_WITH_ARIA, OPEN_LABEL, } from '../translations.js';
 let OpenDocDropdownMenu = (() => {
     let _classDecorators = [requiredProperties({
             actions: PropTypes.array,
@@ -138,13 +139,15 @@ let OpenDocDropdownMenu = (() => {
         @click=${() => currentAction.run?.(context)}
       >
         ${currentAction.icon}
-        <span class="label">Open</span>
+        <span class="label">${translateKey(context.std, ...OPEN_LABEL)}</span>
       </editor-icon-button>
       <editor-menu-button
-        aria-label="Open doc menu"
+        aria-label="${translateKey(context.std, ...OPEN_DOC_MENU_ARIA)}"
         .contentPadding="${'8px'}"
         .button=${html `
-          <editor-icon-button aria-label="Open doc with">
+          <editor-icon-button
+            aria-label="${translateKey(context.std, ...OPEN_DOC_WITH_ARIA)}"
+          >
             ${EditorChevronDown}
           </editor-icon-button>
         `}

package/dist/_pkgs/affine-components/resource/resource.d.ts

@@ -1,4 +1,5 @@
 import type { Disposable } from '../../global/disposable/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import type { BlobEngine, BlobState } from '../../sync/index.js';
 import { type ReadonlySignal } from '@preact/signals-core';
 import type { TemplateResult } from 'lit-html';
@@ -20,11 +21,25 @@ export type ResolvedStateInfo = StateInfo & ResolvedStateInfoPart;
 export declare class ResourceController implements Disposable {
     readonly blobId$: ReadonlySignal<string | undefined>;
     readonly kind: ResourceKind;
+    /**
+     * Optional: lets `blob()`'s error messages resolve through a host's
+     * catalogue. Absent (the common case: most callers construct this
+     * controller outside any rendered component), the English fallback shows
+     * exactly as before.
+     */
+    readonly std?: BlockStdScope | undefined;
     readonly blobUrl$: import("@preact/signals-core").Signal<string | null>;
     readonly state$: import("@preact/signals-core").Signal<Partial<BlobState>>;
     readonly resolvedState$: ReadonlySignal<ResolvedStateInfoPart>;
     private engine?;
-    constructor(blobId$: ReadonlySignal<string | undefined>, kind?: ResourceKind);
+    constructor(blobId$: ReadonlySignal<string | undefined>, kind?: ResourceKind, 
+    /**
+     * Optional: lets `blob()`'s error messages resolve through a host's
+     * catalogue. Absent (the common case: most callers construct this
+     * controller outside any rendered component), the English fallback shows
+     * exactly as before.
+     */
+    std?: BlockStdScope | undefined);
     setEngine(engine: BlobEngine): this;
     determineState(hasExceeded: boolean, hasError: boolean, uploading: boolean, downloading: boolean): StateKind;
     resolveStateWith(info: {

package/dist/_pkgs/affine-components/resource/resource.js

@@ -1,8 +1,18 @@
-import { computed, effect, signal, } from '@preact/signals-core';
+import { translateKey } from '../../affine-shared/services/index.js';
+import { computed, effect, signal, untracked, } from '@preact/signals-core';
+import { RESOURCE_NOT_FOUND_WORDINGS, RESOURCE_RETRIEVE_FAILED_WORDINGS, } from '../translations.js';
 export class ResourceController {
-    constructor(blobId$, kind = 'File') {
+    constructor(blobId$, kind = 'File', 
+    /**
+     * Optional: lets `blob()`'s error messages resolve through a host's
+     * catalogue. Absent (the common case: most callers construct this
+     * controller outside any rendered component), the English fallback shows
+     * exactly as before.
+     */
+    std) {
         this.blobId$ = blobId$;
         this.kind = kind;
+        this.std = std;
         this.blobUrl$ = signal(null);
         // TODO(@fundon): default `loading` status.
         this.state$ = signal({});
@@ -61,30 +71,43 @@ export class ResourceController {
         return result;
     }
     updateState(state) {
-        this.state$.value = { ...this.state$.value, ...state };
+        // `peek()`, never `.value`: merging must not subscribe whatever effect
+        // happens to be running to `state$`, otherwise the write below re-runs
+        // that effect, which writes again — see `subscribe()` and issue #319.
+        this.state$.value = { ...this.state$.peek(), ...state };
     }
     // The explicit return type keeps declaration emit off signals-core's
     // `DisposeFn`, whose `[Symbol.dispose]` member tsc cannot serialize.
     subscribe() {
         return effect(() => {
+            // Only the blob id is tracked: a new id re-runs the effect, nothing else
+            // does. The subscription body stays `untracked` because a host whose
+            // `blobState$` replays on subscribe (a `BehaviorSubject`) writes `state$`
+            // synchronously from inside this very effect; tracked, that write would
+            // re-run the effect, re-subscribe, replay, write again — until
+            // signals-core gives up with `Cycle detected` (issue #319).
             const blobId = this.blobId$.value;
             if (!blobId)
                 return;
-            const blobState$ = this.engine?.blobState$(blobId);
-            if (!blobState$)
-                return;
-            const subscription = blobState$.subscribe(state => {
-                let { uploading, downloading, errorMessage } = state;
-                if (state.overSize) {
-                    uploading = false;
-                    downloading = false;
-                }
-                else if ((uploading || downloading) && errorMessage) {
-                    errorMessage = null;
-                }
-                this.updateState({ ...state, uploading, downloading, errorMessage });
+            return untracked(() => {
+                const blobState$ = this.engine?.blobState$(blobId);
+                if (!blobState$)
+                    return;
+                const subscription = blobState$.subscribe(state => {
+                    let { uploading, downloading, errorMessage } = state;
+                    if (state.overSize) {
+                        uploading = false;
+                        downloading = false;
+                    }
+                    else if ((uploading || downloading) && errorMessage) {
+                        errorMessage = null;
+                    }
+                    // A later emission can land while some unrelated effect is being
+                    // evaluated; it must not become a dependency of that effect either.
+                    untracked(() => this.updateState({ ...state, uploading, downloading, errorMessage }));
+                });
+                return () => subscription.unsubscribe();
             });
-            return () => subscription.unsubscribe();
         });
     }
     async blob() {
@@ -98,12 +121,17 @@ export class ResourceController {
                 throw new Error('Blob engine is not initialized');
             }
             blob = (await this.engine.get(blobId)) ?? null;
-            if (!blob)
-                errorMessage = `${this.kind} not found`;
+            if (!blob) {
+                const wording = RESOURCE_NOT_FOUND_WORDINGS[this.kind];
+                errorMessage = this.std
+                    ? translateKey(this.std, ...wording)
+                    : wording[1];
+            }
         }
         catch (err) {
             console.error(err);
-            errorMessage = `Failed to retrieve ${this.kind}`;
+            const wording = RESOURCE_RETRIEVE_FAILED_WORDINGS[this.kind];
+            errorMessage = this.std ? translateKey(this.std, ...wording) : wording[1];
         }
         if (errorMessage)
             this.updateState({ errorMessage });

package/dist/_pkgs/affine-components/resource/status.d.ts

@@ -1,6 +1,8 @@
+import type { BlockStdScope } from '../../std/index.js';
 import { LitElement } from 'lit';
 declare const ResourceStatus_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class ResourceStatus extends ResourceStatus_base {
+    accessor std: BlockStdScope;
     static styles: import("lit").CSSResult;
     private _popper;
     private _updatePopper;

package/dist/_pkgs/affine-components/resource/status.js

@@ -32,14 +32,17 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+import { translateKey } from '../../affine-shared/services/index.js';
 import { fontBaseStyle, panelBaseColorsStyle, } from '../../affine-shared/styles/index.js';
 import { unsafeCSSVar, unsafeCSSVarV2 } from '../../affine-shared/theme/index.js';
 import { createButtonPopper, stopPropagation, } from '../../affine-shared/utils/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { InformationIcon } from '@blocksuite/icons/lit';
-import { PropTypes, requiredProperties } from '../../std/index.js';
+import { PropTypes, requiredProperties, stdContext } from '../../std/index.js';
+import { consume } from '@lit/context';
 import { css, html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { RESOURCE_STATUS_DOWNLOAD_FAILED, RESOURCE_STATUS_RELOAD, RESOURCE_STATUS_RETRY, RESOURCE_STATUS_UPLOAD_FAILED, } from '../translations.js';
 let ResourceStatus = (() => {
     let _classDecorators = [requiredProperties({
             message: PropTypes.string,
@@ -50,6 +53,9 @@ let ResourceStatus = (() => {
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = WithDisposable(LitElement);
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let __content_decorators;
     let __content_initializers = [];
     let __content_extraInitializers = [];
@@ -72,12 +78,14 @@ let ResourceStatus = (() => {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             __content_decorators = [query('div.popper')];
             __trigger_decorators = [query('button.status')];
             __actionButton_decorators = [query('button.action')];
             _message_decorators = [property({ attribute: false })];
             _needUpload_decorators = [property({ attribute: false })];
             _action_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             __esDecorate(this, null, __content_decorators, { kind: "accessor", name: "_content", static: false, private: false, access: { has: obj => "_content" in obj, get: obj => obj._content, set: (obj, value) => { obj._content = value; } }, metadata: _metadata }, __content_initializers, __content_extraInitializers);
             __esDecorate(this, null, __trigger_decorators, { kind: "accessor", name: "_trigger", static: false, private: false, access: { has: obj => "_trigger" in obj, get: obj => obj._trigger, set: (obj, value) => { obj._trigger = value; } }, metadata: _metadata }, __trigger_initializers, __trigger_extraInitializers);
             __esDecorate(this, null, __actionButton_decorators, { kind: "accessor", name: "_actionButton", static: false, private: false, access: { has: obj => "_actionButton" in obj, get: obj => obj._actionButton, set: (obj, value) => { obj._actionButton = value; } }, metadata: _metadata }, __actionButton_initializers, __actionButton_extraInitializers);
@@ -88,6 +96,9 @@ let ResourceStatus = (() => {
             ResourceStatus = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        #std_accessor_storage;
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         static { this.styles = css `
     button.status {
       display: flex;
@@ -183,19 +194,22 @@ let ResourceStatus = (() => {
         }
         render() {
             const { message, needUpload } = this;
-            const { type, label } = needUpload
-                ? {
-                    type: 'Upload',
-                    label: 'Retry',
-                }
-                : {
-                    type: 'Download',
-                    label: 'Reload',
-                };
+            const headerWording = needUpload
+                ? RESOURCE_STATUS_UPLOAD_FAILED
+                : RESOURCE_STATUS_DOWNLOAD_FAILED;
+            const actionWording = needUpload
+                ? RESOURCE_STATUS_RETRY
+                : RESOURCE_STATUS_RELOAD;
+            const header = this.std
+                ? translateKey(this.std, ...headerWording)
+                : headerWording[1];
+            const label = this.std
+                ? translateKey(this.std, ...actionWording)
+                : actionWording[1];
             return html `
       <button class="status">${InformationIcon()}</button>
       <div class="popper">
-        <div class="header">${type} failed</div>
+        <div class="header">${header}</div>
         <div class="content">${message}</div>
         <div class="footer">
           <button class="action">${label}</button>
@@ -223,7 +237,8 @@ let ResourceStatus = (() => {
         set action(value) { this.#action_accessor_storage = value; }
         constructor() {
             super(...arguments);
-            this._popper = null;
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this._popper = (__runInitializers(this, _std_extraInitializers), null);
             this.#_content_accessor_storage = __runInitializers(this, __content_initializers, void 0);
             this.#_trigger_accessor_storage = (__runInitializers(this, __content_extraInitializers), __runInitializers(this, __trigger_initializers, void 0));
             this.#_actionButton_accessor_storage = (__runInitializers(this, __trigger_extraInitializers), __runInitializers(this, __actionButton_initializers, void 0));

package/dist/_pkgs/affine-components/size-dropdown-menu/dropdown-menu.d.ts

@@ -1,3 +1,4 @@
+import type { BlockStdScope } from '../../std/index.js';
 import type { ReadonlySignal, Signal } from '@preact/signals-core';
 import { LitElement, type TemplateResult } from 'lit';
 import { type EditorMenuButton } from '../toolbar/index.js';
@@ -7,13 +8,15 @@ type SizeItem = {
 };
 declare const SizeDropdownMenu_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class SizeDropdownMenu extends SizeDropdownMenu_base {
+    accessor std: BlockStdScope;
     static styles: import("lit").CSSResult;
     accessor sizes: readonly SizeItem[];
     accessor size$: Signal<number> | ReadonlySignal<number>;
     accessor maxSize: number;
     accessor minSize: number;
     accessor format: ((e: number) => string) | undefined;
-    accessor label: string;
+    accessor label: string | undefined;
+    get resolvedLabel(): string;
     accessor icon: TemplateResult | undefined;
     accessor type: 'normal' | 'check';
     clamp(value: number, min?: number, max?: number): number;

package/dist/_pkgs/affine-components/size-dropdown-menu/dropdown-menu.js

@@ -32,16 +32,19 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+import { translateKey } from '../../affine-shared/services/index.js';
 import { stopPropagation } from '../../affine-shared/utils/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
 import { DoneIcon } from '@blocksuite/icons/lit';
-import { PropTypes, requiredProperties } from '../../std/index.js';
+import { PropTypes, requiredProperties, stdContext } from '../../std/index.js';
+import { consume } from '@lit/context';
 import { css, html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { when } from 'lit-html/directives/when.js';
 import clamp from 'lodash-es/clamp.js';
 import { EditorChevronDown } from '../toolbar/index.js';
+import { SIZE_LABEL_SCALE } from '../translations.js';
 const MIN_SIZE = 0;
 const MAX_SIZE = 400;
 const SIZE_LIST = [
@@ -57,6 +60,9 @@ let SizeDropdownMenu = (() => {
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = SignalWatcher(WithDisposable(LitElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _sizes_decorators;
     let _sizes_initializers = [];
     let _sizes_extraInitializers = [];
@@ -91,6 +97,7 @@ let SizeDropdownMenu = (() => {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _sizes_decorators = [property({ attribute: false })];
             _size$_decorators = [property({ attribute: false })];
             _maxSize_decorators = [property({ attribute: false })];
@@ -101,6 +108,7 @@ let SizeDropdownMenu = (() => {
             _type_decorators = [property({ attribute: 'data-type' })];
             _input_decorators = [query('input')];
             _menuButton_decorators = [query('editor-menu-button')];
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             __esDecorate(this, null, _sizes_decorators, { kind: "accessor", name: "sizes", static: false, private: false, access: { has: obj => "sizes" in obj, get: obj => obj.sizes, set: (obj, value) => { obj.sizes = value; } }, metadata: _metadata }, _sizes_initializers, _sizes_extraInitializers);
             __esDecorate(this, null, _size$_decorators, { kind: "accessor", name: "size$", static: false, private: false, access: { has: obj => "size$" in obj, get: obj => obj.size$, set: (obj, value) => { obj.size$ = value; } }, metadata: _metadata }, _size$_initializers, _size$_extraInitializers);
             __esDecorate(this, null, _maxSize_decorators, { kind: "accessor", name: "maxSize", static: false, private: false, access: { has: obj => "maxSize" in obj, get: obj => obj.maxSize, set: (obj, value) => { obj.maxSize = value; } }, metadata: _metadata }, _maxSize_initializers, _maxSize_extraInitializers);
@@ -115,6 +123,9 @@ let SizeDropdownMenu = (() => {
             SizeDropdownMenu = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        #std_accessor_storage;
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         static { this.styles = css `
     div[data-orientation] {
       width: 68px;
@@ -169,6 +180,13 @@ let SizeDropdownMenu = (() => {
         #label_accessor_storage;
         get label() { return this.#label_accessor_storage; }
         set label(value) { this.#label_accessor_storage = value; }
+        get resolvedLabel() {
+            if (this.label !== undefined)
+                return this.label;
+            return this.std
+                ? translateKey(this.std, ...SIZE_LABEL_SCALE)
+                : SIZE_LABEL_SCALE[1];
+        }
         #icon_accessor_storage;
         get icon() { return this.#icon_accessor_storage; }
         set icon(value) { this.#icon_accessor_storage = value; }
@@ -197,7 +215,7 @@ let SizeDropdownMenu = (() => {
             });
         }
         render() {
-            const { sizes, format, type, icon, label, size$: { value: size }, } = this;
+            const { sizes, format, type, icon, resolvedLabel: label, size$: { value: size }, } = this;
             const isCheckType = type === 'check';
             const placeholder = format?.(Math.trunc(size)) ?? Math.trunc(size);
             return html `
@@ -251,12 +269,13 @@ let SizeDropdownMenu = (() => {
         }
         constructor() {
             super(...arguments);
-            this.#sizes_accessor_storage = __runInitializers(this, _sizes_initializers, SIZE_LIST);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.#sizes_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _sizes_initializers, SIZE_LIST));
             this.#size$_accessor_storage = (__runInitializers(this, _sizes_extraInitializers), __runInitializers(this, _size$_initializers, void 0));
             this.#maxSize_accessor_storage = (__runInitializers(this, _size$_extraInitializers), __runInitializers(this, _maxSize_initializers, MAX_SIZE));
             this.#minSize_accessor_storage = (__runInitializers(this, _maxSize_extraInitializers), __runInitializers(this, _minSize_initializers, MIN_SIZE));
             this.#format_accessor_storage = (__runInitializers(this, _minSize_extraInitializers), __runInitializers(this, _format_initializers, void 0));
-            this.#label_accessor_storage = (__runInitializers(this, _format_extraInitializers), __runInitializers(this, _label_initializers, 'Scale'));
+            this.#label_accessor_storage = (__runInitializers(this, _format_extraInitializers), __runInitializers(this, _label_initializers, undefined));
             this.#icon_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _icon_initializers, void 0));
             this.#type_accessor_storage = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, _type_initializers, 'normal'));
             this._onKeydown = (__runInitializers(this, _type_extraInitializers), (e) => {

package/dist/_pkgs/affine-components/toast/toast.d.ts

@@ -2,7 +2,7 @@ import type { EditorHost } from '../../std/index.js';
 /**
  * @example
  * ```ts
- * toast('Hello World');
+ * toast(host, message);
  * ```
  */
 export declare const toast: (editorHost: EditorHost, message: string, duration?: number) => HTMLDivElement;

package/dist/_pkgs/affine-components/toast/toast.js

@@ -6,7 +6,7 @@ let ToastContainer = null;
 /**
  * @example
  * ```ts
- * toast('Hello World');
+ * toast(host, message);
  * ```
  */
 export const toast = (editorHost, message, duration = 2500) => {

package/dist/_pkgs/affine-components/toggle-button/toggle-button.d.ts

@@ -1,8 +1,11 @@
+import type { BlockStdScope } from '../../std/index.js';
 import { ShadowlessElement } from '../../std/index.js';
 export declare const TOGGLE_BUTTON_PARENT_CLASS = "blocksuite-toggle-button-parent";
 declare const ToggleButton_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class ToggleButton extends ToggleButton_base {
+    accessor std: BlockStdScope;
     static styles: import("lit").CSSResult;
+    private _ariaLabel;
     render(): import("lit-html").TemplateResult<1>;
     accessor collapsed: boolean;
     accessor updateCollapsed: (collapsed: boolean) => void;

package/dist/_pkgs/affine-components/toggle-button/toggle-button.js

@@ -32,16 +32,22 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+import { translateKey } from '../../affine-shared/services/index.js';
 import { unsafeCSSVarV2 } from '../../affine-shared/theme/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { ToggleDownIcon, ToggleRightIcon } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../std/index.js';
+import { ShadowlessElement, stdContext } from '../../std/index.js';
+import { consume } from '@lit/context';
 import { css, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit-html';
+import { TOGGLE_COLLAPSE_ARIA, TOGGLE_EXPAND_ARIA } from '../translations.js';
 export const TOGGLE_BUTTON_PARENT_CLASS = 'blocksuite-toggle-button-parent';
 let ToggleButton = (() => {
     let _classSuper = WithDisposable(ShadowlessElement);
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _collapsed_decorators;
     let _collapsed_initializers = [];
     let _collapsed_extraInitializers = [];
@@ -54,14 +60,19 @@ let ToggleButton = (() => {
     return class ToggleButton extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _collapsed_decorators = [property({ attribute: false })];
             _updateCollapsed_decorators = [property({ attribute: false })];
             _controls_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             __esDecorate(this, null, _collapsed_decorators, { kind: "accessor", name: "collapsed", static: false, private: false, access: { has: obj => "collapsed" in obj, get: obj => obj.collapsed, set: (obj, value) => { obj.collapsed = value; } }, metadata: _metadata }, _collapsed_initializers, _collapsed_extraInitializers);
             __esDecorate(this, null, _updateCollapsed_decorators, { kind: "accessor", name: "updateCollapsed", static: false, private: false, access: { has: obj => "updateCollapsed" in obj, get: obj => obj.updateCollapsed, set: (obj, value) => { obj.updateCollapsed = value; } }, metadata: _metadata }, _updateCollapsed_initializers, _updateCollapsed_extraInitializers);
             __esDecorate(this, null, _controls_decorators, { kind: "accessor", name: "controls", static: false, private: false, access: { has: obj => "controls" in obj, get: obj => obj.controls, set: (obj, value) => { obj.controls = value; } }, metadata: _metadata }, _controls_initializers, _controls_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        #std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         static { this.styles = css `
     .toggle-icon {
       display: flex;
@@ -114,6 +125,10 @@ let ToggleButton = (() => {
       }
     }
   `; }
+        _ariaLabel() {
+            const wording = this.collapsed ? TOGGLE_EXPAND_ARIA : TOGGLE_COLLAPSE_ARIA;
+            return this.std ? translateKey(this.std, ...wording) : wording[1];
+        }
         render() {
             return html `
       <button
@@ -121,7 +136,7 @@ let ToggleButton = (() => {
         contenteditable="false"
         class="toggle-icon"
         data-collapsed=${this.collapsed}
-        aria-label=${this.collapsed ? 'Expand content' : 'Collapse content'}
+        aria-label=${this._ariaLabel()}
         aria-expanded=${!this.collapsed}
         aria-controls=${this.controls}
         @click=${() => this.updateCollapsed(!this.collapsed)}
@@ -133,7 +148,7 @@ let ToggleButton = (() => {
       </button>
     `;
         }
-        #collapsed_accessor_storage = __runInitializers(this, _collapsed_initializers, void 0);
+        #collapsed_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _collapsed_initializers, void 0));
         get collapsed() { return this.#collapsed_accessor_storage; }
         set collapsed(value) { this.#collapsed_accessor_storage = value; }
         #updateCollapsed_accessor_storage = (__runInitializers(this, _collapsed_extraInitializers), __runInitializers(this, _updateCollapsed_initializers, void 0));

package/dist/_pkgs/affine-components/toolbar/icon-button.d.ts

@@ -1,7 +1,9 @@
 import type { Placement } from '@floating-ui/dom';
+import type { BlockStdScope } from '../../std/index.js';
 import type { TemplateResult } from 'lit';
 import { LitElement } from 'lit';
 export declare class EditorIconButton extends LitElement {
+    accessor std: BlockStdScope;
     static styles: import("lit").CSSResult;
     constructor();
     connectedCallback(): void;

package/dist/_pkgs/affine-components/toolbar/icon-button.js

@@ -32,13 +32,20 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+import { translateKey } from '../../affine-shared/services/index.js';
 import { unsafeCSSVarV2 } from '../../affine-shared/theme/index.js';
+import { stdContext } from '../../std/index.js';
+import { consume } from '@lit/context';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { cache } from 'lit/directives/cache.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { ICON_BUTTON_COMING_SOON } from '../translations.js';
 let EditorIconButton = (() => {
     let _classSuper = LitElement;
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _active_decorators;
     let _active_initializers = [];
     let _active_extraInitializers = [];
@@ -96,6 +103,7 @@ let EditorIconButton = (() => {
     return class EditorIconButton extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _active_decorators = [property({ type: Boolean, reflect: true })];
             _activeMode_decorators = [property({ attribute: false })];
             _arrow_decorators = [property({ attribute: false })];
@@ -114,6 +122,7 @@ let EditorIconButton = (() => {
             _tooltip_decorators = [property({ attribute: false })];
             _tooltipOffset_decorators = [property({ attribute: false })];
             _withHover_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             __esDecorate(this, null, _active_decorators, { kind: "accessor", name: "active", static: false, private: false, access: { has: obj => "active" in obj, get: obj => obj.active, set: (obj, value) => { obj.active = value; } }, metadata: _metadata }, _active_initializers, _active_extraInitializers);
             __esDecorate(this, null, _activeMode_decorators, { kind: "accessor", name: "activeMode", static: false, private: false, access: { has: obj => "activeMode" in obj, get: obj => obj.activeMode, set: (obj, value) => { obj.activeMode = value; } }, metadata: _metadata }, _activeMode_initializers, _activeMode_extraInitializers);
             __esDecorate(this, null, _arrow_decorators, { kind: "accessor", name: "arrow", static: false, private: false, access: { has: obj => "arrow" in obj, get: obj => obj.arrow, set: (obj, value) => { obj.arrow = value; } }, metadata: _metadata }, _arrow_initializers, _arrow_extraInitializers);
@@ -134,6 +143,9 @@ let EditorIconButton = (() => {
             __esDecorate(this, null, _withHover_decorators, { kind: "accessor", name: "withHover", static: false, private: false, access: { has: obj => "withHover" in obj, get: obj => obj.withHover, set: (obj, value) => { obj.withHover = value; } }, metadata: _metadata }, _withHover_initializers, _withHover_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        #std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         static { this.styles = css `
     :host([disabled]),
     :host(:disabled) {
@@ -235,7 +247,11 @@ let EditorIconButton = (() => {
             this.role = 'button';
         }
         render() {
-            const tooltip = this.coming ? '(Coming soon)' : this.tooltip;
+            const tooltip = this.coming
+                ? this.std
+                    ? translateKey(this.std, ...ICON_BUTTON_COMING_SOON)
+                    : ICON_BUTTON_COMING_SOON[1]
+                : this.tooltip;
             const classnames = `icon-container active-mode-${this.activeMode} ${this.hoverState ? 'hovered' : ''}`;
             const padding = this.iconContainerPadding;
             const iconContainerStyles = styleMap({
@@ -273,7 +289,7 @@ let EditorIconButton = (() => {
       </div>
     `;
         }
-        #active_accessor_storage = __runInitializers(this, _active_initializers, false);
+        #active_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _active_initializers, false));
         get active() { return this.#active_accessor_storage; }
         set active(value) { this.#active_accessor_storage = value; }
         #activeMode_accessor_storage = (__runInitializers(this, _active_extraInitializers), __runInitializers(this, _activeMode_initializers, 'color'));

package/dist/_pkgs/affine-components/toolbar/tooltip.d.ts

@@ -7,12 +7,12 @@ import { type HoverOptions } from '../hover/index.js';
  * ```ts
  * // Simple usage
  * html`
- * <affine-tooltip>Content</affine-tooltip>
+ * <affine-tooltip>${content}</affine-tooltip>
  * `
  * // With placement
  * html`
  * <affine-tooltip tip-position="top">
- *   Content
+ *   ${content}
  * </affine-tooltip>
  * `
  *
@@ -26,7 +26,7 @@ import { type HoverOptions } from '../hover/index.js';
  *   .tooltipStyle=${css`:host { z-index: 0; --affine-tooltip: #fff; }`}
  *   .allowInteractive=${false}
  * >
- *   Content
+ *   ${content}
  * </affine-tooltip>
  * `
  * ```

package/dist/_pkgs/affine-components/toolbar/tooltip.js

@@ -110,12 +110,12 @@ const updateArrowStyles = ({ placement, middlewareData, }) => {
  * ```ts
  * // Simple usage
  * html`
- * <affine-tooltip>Content</affine-tooltip>
+ * <affine-tooltip>${content}</affine-tooltip>
  * `
  * // With placement
  * html`
  * <affine-tooltip tip-position="top">
- *   Content
+ *   ${content}
  * </affine-tooltip>
  * `
  *
@@ -129,7 +129,7 @@ const updateArrowStyles = ({ placement, middlewareData, }) => {
  *   .tooltipStyle=${css`:host { z-index: 0; --affine-tooltip: #fff; }`}
  *   .allowInteractive=${false}
  * >
- *   Content
+ *   ${content}
  * </affine-tooltip>
  * `
  * ```