@formicoidea/labre-core 0.41.0 → 0.43.1

package/dist/_pkgs/affine-components/edgeless-shape-color-picker/color-picker.js

@@ -40,13 +40,13 @@ import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
 import { stdContext } from '../../std/index.js';
 import { consume } from '@lit/context';
 import { batch, signal } from '@preact/signals-core';
-import { css, html, LitElement } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
 import { choose } from 'lit-html/directives/choose.js';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { when } from 'lit-html/directives/when.js';
-import { calcCustomButtonStyle, keepColor, packColorsWith, preprocessColor, rgbaToHex8, } from '../color-picker/index.js';
+import { calcCustomButtonStyle, keepColor, packColorsWith, paletteCarouselPage, paletteCarouselStyles, paletteCarouselWheel, preprocessColor, renderPaletteCarousel, rgbaToHex8, } from '../color-picker/index.js';
 import { BORDER_COLOR_LABEL, COLOR_LABEL, FILL_COLOR_LABEL, } from '../translations.js';
 let EdgelessShapeColorPicker = (() => {
     let _classSuper = WithDisposable(SignalWatcher(LitElement));
@@ -59,6 +59,21 @@ let EdgelessShapeColorPicker = (() => {
     let _palettes_decorators;
     let _palettes_initializers = [];
     let _palettes_extraInitializers = [];
+    let _paletteGroups_decorators;
+    let _paletteGroups_initializers = [];
+    let _paletteGroups_extraInitializers = [];
+    let _activeGroupKey_decorators;
+    let _activeGroupKey_initializers = [];
+    let _activeGroupKey_extraInitializers = [];
+    let _pickedGroupIndex_decorators;
+    let _pickedGroupIndex_initializers = [];
+    let _pickedGroupIndex_extraInitializers = [];
+    let _paletteListOpen_decorators;
+    let _paletteListOpen_initializers = [];
+    let _paletteListOpen_extraInitializers = [];
+    let _pageDirection_decorators;
+    let _pageDirection_initializers = [];
+    let _pageDirection_extraInitializers = [];
     let _menuButton_decorators;
     let _menuButton_initializers = [];
     let _menuButton_extraInitializers = [];
@@ -68,10 +83,20 @@ let EdgelessShapeColorPicker = (() => {
             _std_decorators = [consume({ context: stdContext })];
             _payload_decorators = [property({ attribute: false })];
             _palettes_decorators = [property({ attribute: false })];
+            _paletteGroups_decorators = [property({ attribute: false })];
+            _activeGroupKey_decorators = [property({ attribute: false })];
+            _pickedGroupIndex_decorators = [state()];
+            _paletteListOpen_decorators = [state()];
+            _pageDirection_decorators = [state()];
             _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, _payload_decorators, { kind: "accessor", name: "payload", static: false, private: false, access: { has: obj => "payload" in obj, get: obj => obj.payload, set: (obj, value) => { obj.payload = value; } }, metadata: _metadata }, _payload_initializers, _payload_extraInitializers);
             __esDecorate(this, null, _palettes_decorators, { kind: "accessor", name: "palettes", static: false, private: false, access: { has: obj => "palettes" in obj, get: obj => obj.palettes, set: (obj, value) => { obj.palettes = value; } }, metadata: _metadata }, _palettes_initializers, _palettes_extraInitializers);
+            __esDecorate(this, null, _paletteGroups_decorators, { kind: "accessor", name: "paletteGroups", static: false, private: false, access: { has: obj => "paletteGroups" in obj, get: obj => obj.paletteGroups, set: (obj, value) => { obj.paletteGroups = value; } }, metadata: _metadata }, _paletteGroups_initializers, _paletteGroups_extraInitializers);
+            __esDecorate(this, null, _activeGroupKey_decorators, { kind: "accessor", name: "activeGroupKey", static: false, private: false, access: { has: obj => "activeGroupKey" in obj, get: obj => obj.activeGroupKey, set: (obj, value) => { obj.activeGroupKey = value; } }, metadata: _metadata }, _activeGroupKey_initializers, _activeGroupKey_extraInitializers);
+            __esDecorate(this, null, _pickedGroupIndex_decorators, { kind: "accessor", name: "pickedGroupIndex", static: false, private: false, access: { has: obj => "pickedGroupIndex" in obj, get: obj => obj.pickedGroupIndex, set: (obj, value) => { obj.pickedGroupIndex = value; } }, metadata: _metadata }, _pickedGroupIndex_initializers, _pickedGroupIndex_extraInitializers);
+            __esDecorate(this, null, _paletteListOpen_decorators, { kind: "accessor", name: "paletteListOpen", static: false, private: false, access: { has: obj => "paletteListOpen" in obj, get: obj => obj.paletteListOpen, set: (obj, value) => { obj.paletteListOpen = value; } }, metadata: _metadata }, _paletteListOpen_initializers, _paletteListOpen_extraInitializers);
+            __esDecorate(this, null, _pageDirection_decorators, { kind: "accessor", name: "pageDirection", static: false, private: false, access: { has: obj => "pageDirection" in obj, get: obj => obj.pageDirection, set: (obj, value) => { obj.pageDirection = value; } }, metadata: _metadata }, _pageDirection_initializers, _pageDirection_extraInitializers);
             __esDecorate(this, null, _menuButton_decorators, { kind: "accessor", name: "menuButton", static: false, private: false, access: { has: obj => "menuButton" in obj, get: obj => obj.menuButton, set: (obj, value) => { obj.menuButton = value; } }, metadata: _metadata }, _menuButton_initializers, _menuButton_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -95,6 +120,8 @@ let EdgelessShapeColorPicker = (() => {
       color: ${unsafeCSSVarV2('text/secondary')};
       font-weight: 400;
     }
+
+    ${paletteCarouselStyles}
   `; }
         #pickFillColor;
         #pickStrokeColor;
@@ -103,8 +130,41 @@ let EdgelessShapeColorPicker = (() => {
         #calcCustomButtonStyle(color, isCustomColor) {
             return calcCustomButtonStyle(color, isCustomColor, this);
         }
+        /**
+         * The page of {@link paletteGroups} on screen — see the twin getter on
+         * `edgeless-color-picker-button` for why a click wins over the prop.
+         */
+        get groupIndex() {
+            if (this.pickedGroupIndex !== undefined)
+                return this.pickedGroupIndex;
+            const asked = this.paletteGroups.findIndex(group => group.key === this.activeGroupKey);
+            return asked < 0 ? 0 : asked;
+        }
+        /** The page on screen, or the caller's own list when there is no carousel. */
+        get activePalettes() {
+            if (this.paletteGroups.length < 2)
+                return this.palettes;
+            return this.paletteGroups[this.groupIndex]?.palettes ?? this.palettes;
+        }
+        /**
+         * A new selection re-opens on ITS framework — see the twin on
+         * `edgeless-color-picker-button`.
+         */
+        willUpdate(changed) {
+            if (changed.has('activeGroupKey')) {
+                this.pickedGroupIndex = undefined;
+                this.paletteListOpen = false;
+                this.pageDirection = 'settle';
+            }
+        }
+        /** Page, and remember which way it went — see the twin. */
+        #page;
+        /** Measured against the UNION of the pages, for the reason the twin states. */
         #calcCustomButtonState(color, theme) {
-            return !this.palettes
+            const offered = this.paletteGroups.length > 1
+                ? this.paletteGroups.flatMap(group => group.palettes)
+                : this.palettes;
+            return !offered
                 .map(({ value }) => resolveColor(value, theme))
                 .includes(color);
         }
@@ -126,13 +186,15 @@ let EdgelessShapeColorPicker = (() => {
         firstUpdated() {
             this.disposables.addFromEvent(this.menuButton, 'toggle', (e) => {
                 const opened = e.detail;
+                // A re-opened picker shows its swatches, never the list it was left on.
+                this.paletteListOpen = false;
                 if (!opened && this.tabType$.peek() === 'custom') {
                     this.tabType$.value = 'normal';
                 }
             });
         }
         render() {
-            const { tabType$: { value: tabType }, colorType$: { value: colorType }, palettes, fillColorWithoutAlpha, payload: { fillColor, strokeColor, strokeWidth, strokeStyle, originalFillColor, originalStrokeColor, theme, enableCustomColor, }, } = this;
+            const { tabType$: { value: tabType }, colorType$: { value: colorType }, activePalettes, fillColorWithoutAlpha, payload: { fillColor, strokeColor, strokeWidth, strokeStyle, originalFillColor, originalStrokeColor, theme, enableCustomColor, }, } = this;
             return html `
       <editor-menu-button
         .contentPadding="${tabType === 'normal' ? '8px' : '0px'}"
@@ -152,69 +214,96 @@ let EdgelessShapeColorPicker = (() => {
           </editor-icon-button>
         `}
       >
-        <div class="pickers" data-orientation="vertical">
+        <div
+          class="pickers"
+          data-orientation="vertical"
+          @wheel=${paletteCarouselWheel({
+                groups: this.paletteGroups,
+                index: this.groupIndex,
+                onPage: this.#page,
+                open: this.paletteListOpen,
+            })}
+        >
           ${choose(tabType, [
                 [
                     'normal',
                     () => {
                         return html `
-                  ${repeat([
-                            {
-                                label: this.std
-                                    ? translateKey(this.std, ...FILL_COLOR_LABEL)
-                                    : FILL_COLOR_LABEL[1],
-                                type: 'fillColor',
-                                value: fillColor,
-                                hollowCircle: false,
-                                onPick: this.#pickFillColor,
-                            },
-                            {
-                                label: this.std
-                                    ? translateKey(this.std, ...BORDER_COLOR_LABEL)
-                                    : BORDER_COLOR_LABEL[1],
-                                type: 'strokeColor',
-                                value: strokeColor,
-                                hollowCircle: true,
-                                onPick: this.#pickStrokeColor,
-                            },
-                        ], item => item.type, ({ label, type, value, onPick, hollowCircle }) => html `
-                      <div class="picker-label">${label}</div>
-                      <edgeless-color-panel
-                        aria-label="${label}"
-                        role="listbox"
-                        .hasTransparent=${false}
-                        .hollowCircle=${hollowCircle}
-                        .value=${value}
-                        .theme=${theme}
-                        .palettes=${palettes}
-                        .std=${this.std}
-                        @select=${onPick}
-                      >
-                        ${when(enableCustomColor, () => {
-                            const isCustomColor = this.#calcCustomButtonState(value, theme);
-                            const styleInfo = this.#calcCustomButtonStyle(value, isCustomColor);
-                            return html `
-                            <edgeless-color-custom-button
-                              slot="custom"
-                              style=${styleMap(styleInfo)}
-                              ?active=${isCustomColor}
-                              @click=${() => this.#switchToCustomWith(type)}
-                            ></edgeless-color-custom-button>
-                          `;
+                  ${renderPaletteCarousel({
+                            groups: this.paletteGroups,
+                            index: this.groupIndex,
+                            onPage: this.#page,
+                            onToggle: open => (this.paletteListOpen = open),
+                            open: this.paletteListOpen,
+                            direction: this.pageDirection,
+                            std: this.std,
+                            theme,
                         })}
-                      </edgeless-color-panel>
-                    `)}
-                  <div class="picker-label">
-                    ${this.std
-                            ? translateKey(this.std, ...BOARD_BORDER_STYLE_LABEL)
-                            : BOARD_BORDER_STYLE_LABEL[1]}
-                  </div>
-                  <edgeless-line-styles-panel
-                    class="picker"
-                    .lineSize=${strokeWidth}
-                    .lineStyle=${strokeStyle}
-                    @select=${this.#pickStrokeStyle}
-                  ></edgeless-line-styles-panel>
+                  ${this.paletteListOpen
+                            ? nothing
+                            : html `${repeat([
+                                {
+                                    label: this.std
+                                        ? translateKey(this.std, ...FILL_COLOR_LABEL)
+                                        : FILL_COLOR_LABEL[1],
+                                    type: 'fillColor',
+                                    value: fillColor,
+                                    hollowCircle: false,
+                                    onPick: this.#pickFillColor,
+                                },
+                                {
+                                    label: this.std
+                                        ? translateKey(this.std, ...BORDER_COLOR_LABEL)
+                                        : BORDER_COLOR_LABEL[1],
+                                    type: 'strokeColor',
+                                    value: strokeColor,
+                                    hollowCircle: true,
+                                    onPick: this.#pickStrokeColor,
+                                },
+                            ], item => item.type, ({ label, type, value, onPick, hollowCircle, }) => html `
+                            <div class="picker-label">${label}</div>
+                            ${paletteCarouselPage({
+                                groups: this.paletteGroups,
+                                index: this.groupIndex,
+                                direction: this.pageDirection,
+                            }, html `
+                                <edgeless-color-panel
+                                  aria-label="${label}"
+                                  role="listbox"
+                                  .hasTransparent=${false}
+                                  .hollowCircle=${hollowCircle}
+                                  .value=${value}
+                                  .theme=${theme}
+                                  .palettes=${activePalettes}
+                                  .std=${this.std}
+                                  @select=${onPick}
+                                >
+                                  ${when(enableCustomColor, () => {
+                                const isCustomColor = this.#calcCustomButtonState(value, theme);
+                                const styleInfo = this.#calcCustomButtonStyle(value, isCustomColor);
+                                return html `
+                                      <edgeless-color-custom-button
+                                        slot="custom"
+                                        style=${styleMap(styleInfo)}
+                                        ?active=${isCustomColor}
+                                        @click=${() => this.#switchToCustomWith(type)}
+                                      ></edgeless-color-custom-button>
+                                    `;
+                            })}
+                                </edgeless-color-panel>
+                              `)}
+                          `)}
+                        <div class="picker-label">
+                          ${this.std
+                                ? translateKey(this.std, ...BOARD_BORDER_STYLE_LABEL)
+                                : BOARD_BORDER_STYLE_LABEL[1]}
+                        </div>
+                        <edgeless-line-styles-panel
+                          class="picker"
+                          .lineSize=${strokeWidth}
+                          .lineStyle=${strokeStyle}
+                          @select=${this.#pickStrokeStyle}
+                        ></edgeless-line-styles-panel>`}
                 `;
                     },
                 ],
@@ -245,6 +334,33 @@ let EdgelessShapeColorPicker = (() => {
         #palettes_accessor_storage;
         get palettes() { return this.#palettes_accessor_storage; }
         set palettes(value) { this.#palettes_accessor_storage = value; }
+        #paletteGroups_accessor_storage;
+        /**
+         * The carousel's pages, base palette first (`docs/adr/0027`). Empty falls
+         * back to {@link palettes} and draws no header — the panel as it was.
+         */
+        get paletteGroups() { return this.#paletteGroups_accessor_storage; }
+        set paletteGroups(value) { this.#paletteGroups_accessor_storage = value; }
+        #activeGroupKey_accessor_storage;
+        /** The page to open on: the framework of the selected element, usually. */
+        get activeGroupKey() { return this.#activeGroupKey_accessor_storage; }
+        set activeGroupKey(value) { this.#activeGroupKey_accessor_storage = value; }
+        #pickedGroupIndex_accessor_storage;
+        /** Component state only, never persisted: which page the user paged TO. */
+        get pickedGroupIndex() { return this.#pickedGroupIndex_accessor_storage; }
+        set pickedGroupIndex(value) { this.#pickedGroupIndex_accessor_storage = value; }
+        #paletteListOpen_accessor_storage;
+        /**
+         * View state too: whether the header's list of pages is showing IN PLACE of
+         * the two grids and the line styles — see the twin on
+         * `edgeless-color-picker-button`.
+         */
+        get paletteListOpen() { return this.#paletteListOpen_accessor_storage; }
+        set paletteListOpen(value) { this.#paletteListOpen_accessor_storage = value; }
+        #pageDirection_accessor_storage;
+        /** Which way the page arrived — see the twin. Both grids take it together. */
+        get pageDirection() { return this.#pageDirection_accessor_storage; }
+        set pageDirection(value) { this.#pageDirection_accessor_storage = value; }
         #menuButton_accessor_storage;
         get menuButton() { return this.#menuButton_accessor_storage; }
         set menuButton(value) { this.#menuButton_accessor_storage = value; }
@@ -297,9 +413,19 @@ let EdgelessShapeColorPicker = (() => {
                     cancelable: true,
                 }));
             };
+            /** Page, and remember which way it went — see the twin. */
+            this.#page = (index, direction) => {
+                this.pickedGroupIndex = index;
+                this.pageDirection = direction;
+            };
             this.#payload_accessor_storage = __runInitializers(this, _payload_initializers, void 0);
             this.#palettes_accessor_storage = (__runInitializers(this, _payload_extraInitializers), __runInitializers(this, _palettes_initializers, DefaultTheme.Palettes));
-            this.#menuButton_accessor_storage = (__runInitializers(this, _palettes_extraInitializers), __runInitializers(this, _menuButton_initializers, void 0));
+            this.#paletteGroups_accessor_storage = (__runInitializers(this, _palettes_extraInitializers), __runInitializers(this, _paletteGroups_initializers, []));
+            this.#activeGroupKey_accessor_storage = (__runInitializers(this, _paletteGroups_extraInitializers), __runInitializers(this, _activeGroupKey_initializers, undefined));
+            this.#pickedGroupIndex_accessor_storage = (__runInitializers(this, _activeGroupKey_extraInitializers), __runInitializers(this, _pickedGroupIndex_initializers, undefined));
+            this.#paletteListOpen_accessor_storage = (__runInitializers(this, _pickedGroupIndex_extraInitializers), __runInitializers(this, _paletteListOpen_initializers, false));
+            this.#pageDirection_accessor_storage = (__runInitializers(this, _paletteListOpen_extraInitializers), __runInitializers(this, _pageDirection_initializers, 'settle'));
+            this.#menuButton_accessor_storage = (__runInitializers(this, _pageDirection_extraInitializers), __runInitializers(this, _menuButton_initializers, void 0));
             __runInitializers(this, _menuButton_extraInitializers);
         }
     };

package/dist/_pkgs/affine-components/icons/ai.js

@@ -9,11 +9,11 @@ export const AIStarIcon = html `<svg
   <g clip-path="url(#clip0_7444_26654)">
     <path
       d="M9.40033 4.57585C9.36627 4.27519 9.11207 4.04792 8.80948 4.04761C8.50689 4.0473 8.25223 4.27405 8.21756 4.57465C7.99211 6.52928 7.40771 7.90373 6.46492 8.84651C5.52213 9.7893 4.14769 10.3737 2.19305 10.5991C1.89246 10.6338 1.66571 10.8885 1.66602 11.1911C1.66633 11.4937 1.8936 11.7479 2.19426 11.7819C4.11659 11.9997 5.52025 12.5838 6.48542 13.5315C7.44696 14.4757 8.04356 15.8498 8.21597 17.7908C8.24327 18.0981 8.50096 18.3337 8.80954 18.3333C9.11813 18.333 9.37528 18.0969 9.40189 17.7894C9.56714 15.8804 10.1632 14.4774 11.1295 13.5111C12.0958 12.5448 13.4988 11.9487 15.4078 11.7835C15.7153 11.7569 15.9514 11.4997 15.9517 11.1911C15.9521 10.8825 15.7165 10.6249 15.4092 10.5976C13.4683 10.4252 12.0941 9.82855 11.15 8.86701C10.2022 7.90184 9.61807 6.49818 9.40033 4.57585Z"
-      fill="#1E96EB"
+      fill="var(--affine-primary-color)"
     />
     <path
       d="M15.7849 1.87208C15.7717 1.75516 15.6728 1.66678 15.5551 1.66666C15.4375 1.66654 15.3384 1.75472 15.3249 1.87162C15.2373 2.63175 15.01 3.16626 14.6434 3.5329C14.2767 3.89954 13.7422 4.1268 12.9821 4.21448C12.8652 4.22796 12.777 4.327 12.7771 4.44467C12.7772 4.56234 12.8656 4.6612 12.9826 4.67445C13.7301 4.75912 14.276 4.9863 14.6513 5.35485C15.0253 5.72203 15.2573 6.25642 15.3243 7.01121C15.335 7.13075 15.4352 7.22235 15.5552 7.22221C15.6752 7.22208 15.7752 7.13025 15.7855 7.01069C15.8498 6.26831 16.0816 5.72268 16.4574 5.3469C16.8332 4.97111 17.3788 4.73932 18.1212 4.67505C18.2407 4.6647 18.3325 4.5647 18.3327 4.44469C18.3328 4.32469 18.2412 4.22448 18.1217 4.21386C17.3669 4.14681 16.8325 3.9148 16.4653 3.54087C16.0968 3.16552 15.8696 2.61966 15.7849 1.87208Z"
-      fill="#1E96EB"
+      fill="var(--affine-primary-color)"
     />
   </g>
   <defs>
@@ -46,7 +46,7 @@ export const AIStopIcon = html `<svg
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M17.0827 10C17.0827 13.912 13.9114 17.0834 9.99935 17.0834C6.08733 17.0834 2.91602 13.912 2.91602 10C2.91602 6.088 6.08733 2.91669 9.99935 2.91669C13.9114 2.91669 17.0827 6.088 17.0827 10ZM18.3327 10C18.3327 14.6024 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6024 1.66602 10C1.66602 5.39765 5.39698 1.66669 9.99935 1.66669C14.6017 1.66669 18.3327 5.39765 18.3327 10ZM8.33268 6.66669C7.41221 6.66669 6.66602 7.41288 6.66602 8.33335V11.6667C6.66602 12.5872 7.41221 13.3334 8.33268 13.3334H11.666C12.5865 13.3334 13.3327 12.5872 13.3327 11.6667V8.33335C13.3327 7.41288 12.5865 6.66669 11.666 6.66669H8.33268Z"
-      fill="#1E96EB"
+      fill="var(--affine-primary-color)"
     />
   </g>
   <defs>

package/dist/_pkgs/affine-components/icons/list.js

@@ -1,3 +1,9 @@
+/**
+ * The chrome accent, reached through its token rather than written as a hex:
+ * the six-dot burst is chrome, so it has to follow the host's theme (DESIGN.md,
+ * The Borrowed Blue Rule).
+ */
+const ACCENT = 'var(--affine-primary-color)';
 export const playCheckAnimation = async (refElement, { left = 0, size = 20 } = {}) => {
     const sparkingEl = document.createElement('div');
     sparkingEl.classList.add('affine-check-animation');
@@ -14,7 +20,7 @@ export const playCheckAnimation = async (refElement, { left = 0, size = 20 } = {
     refElement.append(sparkingEl);
     await sparkingEl.animate([
         {
-            boxShadow: '0 -18px 0 -8px #1e96eb, 16px -8px 0 -8px #1e96eb, 16px 8px 0 -8px #1e96eb, 0 18px 0 -8px #1e96eb, -16px 8px 0 -8px #1e96eb, -16px -8px 0 -8px #1e96eb',
+            boxShadow: `0 -18px 0 -8px ${ACCENT}, 16px -8px 0 -8px ${ACCENT}, 16px 8px 0 -8px ${ACCENT}, 0 18px 0 -8px ${ACCENT}, -16px 8px 0 -8px ${ACCENT}, -16px -8px 0 -8px ${ACCENT}`,
         },
     ], { duration: 240, easing: 'ease', fill: 'forwards' }).finished;
     await sparkingEl.animate([

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

@@ -1,5 +1,5 @@
 import { translateKey } from '../../affine-shared/services/index.js';
-import { computed, effect, signal, } from '@preact/signals-core';
+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', 
@@ -71,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() {

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

@@ -218,9 +218,14 @@ let SizeDropdownMenu = (() => {
             const { sizes, format, type, icon, resolvedLabel: label, size$: { value: size }, } = this;
             const isCheckType = type === 'check';
             const placeholder = format?.(Math.trunc(size)) ?? Math.trunc(size);
+            // `class` is STATIC. It used to be `${label.toLowerCase()}-menu`, which
+            // made a CSS class depend on the host's language the day `label` joined
+            // the translation seam (#390) — `échelle-menu` in French. Nothing in the
+            // repo selects it (checked across the styles and both test suites): it is
+            // the stable identifier it was always meant to be.
             return html `
       <editor-menu-button
-        class="${`${label.toLowerCase()}-menu`}"
+        class="size-menu"
         .contentPadding="${'8px'}"
         .button=${html `
           <editor-icon-button

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

@@ -1,7 +1,7 @@
 export { EditorChevronDown } from './chevron-down.js';
 export { ToolbarMoreMenuConfigExtension } from './config.js';
 export { EditorIconButton } from './icon-button.js';
-export { EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
+export { EDITOR_MENU_TOGGLE, EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
 export { MenuContext } from './menu-context.js';
 export { type PickerMenu, type PickerMenuItem, renderCurrentPickerItemWith, renderPickerMenu, renderPickerMenuItems, } from './picker-menu.js';
 export { EditorToolbarSeparator } from './separator.js';

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

@@ -6,7 +6,7 @@ import { Tooltip } from './tooltip.js';
 export { EditorChevronDown } from './chevron-down.js';
 export { ToolbarMoreMenuConfigExtension } from './config.js';
 export { EditorIconButton } from './icon-button.js';
-export { EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
+export { EDITOR_MENU_TOGGLE, EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
 export { MenuContext } from './menu-context.js';
 export { renderCurrentPickerItemWith, renderPickerMenu, renderPickerMenuItems, } from './picker-menu.js';
 export { EditorToolbarSeparator } from './separator.js';

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

@@ -1,5 +1,12 @@
 import { type ButtonPopperOptions } from '../../affine-shared/utils/index.js';
 import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * A panel in a toolbar opened or closed, announced across shadow boundaries.
+ *
+ * `detail` is whether it is now open, and the deepest element of
+ * `composedPath()` is the button it belongs to.
+ */
+export declare const EDITOR_MENU_TOGGLE = "editor-menu-toggle";
 declare const EditorMenuButton_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class EditorMenuButton extends EditorMenuButton_base {
     static styles: import("lit").CSSResult;

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

@@ -37,6 +37,13 @@ import { createButtonPopper, } from '../../affine-shared/utils/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { css, html, LitElement, } from 'lit';
 import { property, query } from 'lit/decorators.js';
+/**
+ * A panel in a toolbar opened or closed, announced across shadow boundaries.
+ *
+ * `detail` is whether it is now open, and the deepest element of
+ * `composedPath()` is the button it belongs to.
+ */
+export const EDITOR_MENU_TOGGLE = 'editor-menu-toggle';
 let EditorMenuButton = (() => {
     let _classSuper = WithDisposable(LitElement);
     let __content_decorators;
@@ -97,6 +104,20 @@ let EditorMenuButton = (() => {
                     else {
                         delete this.dataset.open;
                     }
+                    // Said again, out loud, for whoever is holding this button — the row
+                    // it sits on has to know, and `data-open` alone cannot tell it: a
+                    // picker keeps its menu button inside its OWN shadow root, where no
+                    // `querySelector` and no `MutationObserver` of the row's reaches. This
+                    // one bubbles AND is composed, so it crosses every boundary between
+                    // here and the row. See `EditorToolbar`, which stops clipping while a
+                    // panel is open. The `toggle` event above is deliberately left as it
+                    // is: it does not bubble, and things listen for it by that name.
+                    this.dispatchEvent(new CustomEvent(EDITOR_MENU_TOGGLE, {
+                        detail: opened,
+                        bubbles: true,
+                        cancelable: false,
+                        composed: true,
+                    }));
                 },
                 mainAxis: 0,
                 offsetHeight: 6 * 4,
@@ -184,6 +205,15 @@ export class EditorMenuContent extends LitElement {
     .content-wrapper {
       overscroll-behavior: contain;
       overflow-y: auto;
+      /* Spelled out because CSS Overflow computes a visible axis to auto as
+       * soon as the other one is not visible: the overflow-y above would
+       * silently make this popup scrollable SIDEWAYS too. Anything animated by
+       * a positive translateX inside it — the palette carousel's incoming page,
+       * see color-picker/palette-carousel.ts — then grows the scrollable
+       * region for the length of the animation and flashes a horizontal
+       * scrollbar (issue #392). Not clip: combined with overflow-y: auto the
+       * spec falls it back to hidden anyway. */
+      overflow-x: hidden;
       padding: var(--content-padding, 0 6px);
     }
 

package/dist/_pkgs/affine-components/toolbar/picker-menu.d.ts

@@ -38,6 +38,21 @@ export type PickerMenu<T> = {
     label: string;
     icon?: TemplateResult;
     tooltip?: string;
+    /**
+     * The accessible name of the MENU shell (`aria-label` on
+     * `editor-menu-button`), which the caller supplies whole (#390).
+     *
+     * It used to be sewn together here as `` `${label.toLowerCase()}-menu` ``.
+     * That was a stable identifier while {@link label} was an English literal;
+     * once the caller started handing over a TRANSLATED label it became half a
+     * sentence in each language ("changer le type de forme-menu"). A menu's
+     * accessible name is its own wording, never a composition — the precedent
+     * is `ROOT_ALIGNMENT_MENU_ARIA` in `blocks/root`.
+     *
+     * Left out, the name is composed from {@link label} as before, so a caller
+     * that still passes an English literal is unaffected.
+     */
+    menuAria?: string;
     items: PickerMenuItem<T>[];
     currentValue: T;
     onPick: (value: T) => void;
@@ -51,5 +66,5 @@ export type PickerMenu<T> = {
 };
 /** The field of the item that currently matches — its icon, usually. */
 export declare function renderCurrentPickerItemWith<T, F extends keyof PickerMenuItem<T>>(items: PickerMenuItem<T>[], currentValue: T, field: F): PickerMenuItem<T>[F] | undefined;
-export declare function renderPickerMenu<T>({ label, tooltip, icon, items, currentValue, onPick, testId, }: PickerMenu<T>): TemplateResult<1>;
+export declare function renderPickerMenu<T>({ label, tooltip, menuAria, icon, items, currentValue, onPick, testId, }: PickerMenu<T>): TemplateResult<1>;
 export declare function renderPickerMenuItems<T>(items: PickerMenuItem<T>[], currentValue: T, onPick: (value: T) => void, testId?: string): unknown;

package/dist/_pkgs/affine-components/toolbar/picker-menu.js

@@ -6,11 +6,11 @@ import { EditorChevronDown } from './chevron-down.js';
 export function renderCurrentPickerItemWith(items, currentValue, field) {
     return items.find(({ value }) => value === currentValue)?.[field];
 }
-export function renderPickerMenu({ label, tooltip, icon, items, currentValue, onPick, testId, }) {
+export function renderPickerMenu({ label, tooltip, menuAria, icon, items, currentValue, onPick, testId, }) {
     return html `
     <editor-menu-button
       data-testid=${ifDefined(testId)}
-      aria-label="${`${label.toLowerCase()}-menu`}"
+      aria-label="${menuAria ?? `${label.toLowerCase()}-menu`}"
       .button=${html `
         <editor-icon-button
           data-testid=${ifDefined(testId ? `${testId}-button` : undefined)}

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

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
 declare const EditorToolbar_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class EditorToolbar extends EditorToolbar_base {
+    #private;
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;