@formicoidea/labre-core 0.40.0 → 0.42.0

package/dist/_pkgs/affine-components/card-style-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 { SignalWatcher } from '../../global/lit/index.js';
 import { PaletteIcon } from '@blocksuite/icons/lit';
 import { PropTypes, requiredProperties } from '../../std/index.js';
@@ -43,6 +43,7 @@ import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { EmbedCardDarkCubeIcon, EmbedCardDarkHorizontalIcon, EmbedCardDarkListIcon, EmbedCardDarkVerticalIcon, EmbedCardLightCubeIcon, EmbedCardLightHorizontalIcon, EmbedCardLightListIcon, EmbedCardLightVerticalIcon, } from '../icons/index.js';
+import { CARD_STYLE_LABEL } from '../translations.js';
 const cardStyleMap = {
     light: {
         cube: EmbedCardLightCubeIcon,
@@ -118,8 +119,8 @@ let CardStyleDropdownMenu = (() => {
         .contentPadding="${'8px'}"
         .button=${html `
           <editor-icon-button
-            aria-label="Card style"
-            .tooltip="${'Card style'}"
+            aria-label="${translateKey(context.std, ...CARD_STYLE_LABEL)}"
+            .tooltip="${translateKey(context.std, ...CARD_STYLE_LABEL)}"
           >
             ${PaletteIcon()}
           </editor-icon-button>

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

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

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

@@ -32,14 +32,21 @@ 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 { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
+import { stdContext } from '../../std/index.js';
 import { baseTheme } from '@toeverything/theme';
+import { consume } from '@lit/context';
 import { css, html, LitElement, nothing, unsafeCSS, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { FAVICON_ALT } from '../translations.js';
 let CitationCard = (() => {
     let _classSuper = SignalWatcher(WithDisposable(LitElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _icon_decorators;
     let _icon_initializers = [];
     let _icon_extraInitializers = [];
@@ -64,6 +71,7 @@ let CitationCard = (() => {
     return class CitationCard extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _icon_decorators = [property({ attribute: false })];
             _citationTitle_decorators = [property({ attribute: false })];
             _citationContent_decorators = [property({ attribute: false })];
@@ -71,6 +79,7 @@ let CitationCard = (() => {
             _onClickCallback_decorators = [property({ attribute: false })];
             _onDoubleClickCallback_decorators = [property({ attribute: false })];
             _active_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, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
             __esDecorate(this, null, _citationTitle_decorators, { kind: "accessor", name: "citationTitle", static: false, private: false, access: { has: obj => "citationTitle" in obj, get: obj => obj.citationTitle, set: (obj, value) => { obj.citationTitle = value; } }, metadata: _metadata }, _citationTitle_initializers, _citationTitle_extraInitializers);
             __esDecorate(this, null, _citationContent_decorators, { kind: "accessor", name: "citationContent", static: false, private: false, access: { has: obj => "citationContent" in obj, get: obj => obj.citationContent, set: (obj, value) => { obj.citationContent = value; } }, metadata: _metadata }, _citationContent_initializers, _citationContent_extraInitializers);
@@ -80,6 +89,9 @@ let CitationCard = (() => {
             __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);
             if (_metadata) Object.defineProperty(this, 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 `
     .citation-container {
       width: 100%;
@@ -224,12 +236,16 @@ let CitationCard = (() => {
         set active(value) { this.#active_accessor_storage = value; }
         constructor() {
             super(...arguments);
-            this._IconTemplate = (icon) => {
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this._IconTemplate = (__runInitializers(this, _std_extraInitializers), (icon) => {
                 if (typeof icon === 'string') {
-                    return html `<img src="${icon}" alt="favicon" />`;
+                    const alt = this.std
+                        ? translateKey(this.std, ...FAVICON_ALT)
+                        : FAVICON_ALT[1];
+                    return html `<img src="${icon}" alt="${alt}" />`;
                 }
                 return icon;
-            };
+            });
             this.#icon_accessor_storage = __runInitializers(this, _icon_initializers, undefined);
             this.#citationTitle_accessor_storage = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, _citationTitle_initializers, ''));
             this.#citationContent_accessor_storage = (__runInitializers(this, _citationTitle_extraInitializers), __runInitializers(this, _citationContent_initializers, undefined));

package/dist/_pkgs/affine-components/color-picker/button.d.ts

@@ -1,19 +1,50 @@
 import type { Color, ColorScheme, Palette } from '../../affine-model/index.js';
-import { LitElement } from 'lit';
+import type { BlockStdScope } from '../../std/index.js';
+import { LitElement, type PropertyValues } from 'lit';
 import type { EditorMenuButton } from '../toolbar/menu-button.js';
+import type { PaletteGroup } from './framework-palette.js';
+import { type PaletteCarouselDirection } from './palette-carousel.js';
 import type { PickColorEvent } from './types.js';
 type Type = 'normal' | 'custom';
 declare const EdgelessColorPickerButton_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class EdgelessColorPickerButton extends EdgelessColorPickerButton_base {
     #private;
+    static styles: import("lit").CSSResult;
     switchToCustomTab: (e: MouseEvent) => void;
     get colorWithoutAlpha(): string;
     get customButtonStyle(): {
         '--b': string;
         '--c': string;
     };
+    /**
+     * The page of {@link paletteGroups} currently on screen — the one the caller
+     * asked for until the user pages away from it, and never reset by a re-render
+     * (a toolbar rebuilds `paletteGroups` on every update, so reading the prop
+     * back would undo the click that moved the carousel).
+     */
+    get groupIndex(): number;
+    /**
+     * The swatches on screen: the carousel's current page — unless there is no
+     * carousel. A single page means no framework offered hues, and then the
+     * caller's own {@link palettes} wins: that is how a Wardley node keeps its
+     * notation swatches when the Wardley flag is off, its node toolbar being
+     * always-on while its palette is not (`docs/adr/0009`).
+     */
+    get activePalettes(): readonly Palette[];
+    /**
+     * "Custom" is measured against the UNION of the pages, not the one on screen:
+     * a Wardley blue is one of the offered swatches whichever page is showing,
+     * and paging to `Default` must not make the element look custom-coloured.
+     */
     get isCustomColor(): boolean;
     get tabContentPadding(): string;
+    /**
+     * A NEW selection re-opens on ITS framework: the page the user paged to
+     * belongs to the element they were recolouring, not to the next one. Only a
+     * change of {@link activeGroupKey} clears it, so paging survives the
+     * re-render the click itself provokes.
+     */
+    willUpdate(changed: PropertyValues): void;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
     accessor originalColor: Color;
@@ -24,7 +55,37 @@ export declare class EdgelessColorPickerButton extends EdgelessColorPickerButton
     accessor label: string;
     accessor menuButton: EditorMenuButton;
     accessor palettes: Palette[];
+    /**
+     * The carousel's pages, base palette first (`docs/adr/0027`). Empty — every
+     * call site that has not opted in — falls back to {@link palettes} and draws
+     * no header, which is exactly the panel this component rendered before.
+     */
+    accessor paletteGroups: readonly PaletteGroup[];
+    /** The page to open on: the framework of the selected element, usually. */
+    accessor activeGroupKey: string | undefined;
+    /**
+     * Component state only, never persisted: which page the user paged TO.
+     * `undefined` means "still on the one the caller asked for".
+     */
+    accessor pickedGroupIndex: number | undefined;
+    /**
+     * View state, like {@link pickedGroupIndex}: whether the header's list of
+     * pages is showing IN PLACE of the swatch grid. Reset when the picker
+     * re-opens and when the selection changes, so it never greets a new element.
+     */
+    accessor paletteListOpen: boolean;
+    /**
+     * View state again: which way the page on screen arrived, so the swatches
+     * and the name slide in from the right side of the panel. Never persisted,
+     * and cleared with the rest when the selection changes.
+     */
+    accessor pageDirection: PaletteCarouselDirection;
     accessor pick: (event: PickColorEvent) => void;
+    /**
+     * Optional, forwarded to the nested `edgeless-color-panel` — see
+     * `EdgelessColorPanel.std` (`color-panel.ts`) for what it changes.
+     */
+    accessor std: BlockStdScope | undefined;
     accessor tabType: Type;
     accessor theme: ColorScheme;
     accessor tooltip: string | undefined;

package/dist/_pkgs/affine-components/color-picker/button.js

@@ -40,6 +40,7 @@ import { choose } from 'lit/directives/choose.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit-html/directives/when.js';
+import { paletteCarouselPage, paletteCarouselStyles, paletteCarouselWheel, renderPaletteCarousel, } from './palette-carousel.js';
 import { calcCustomButtonStyle, keepColor, packColorsWith, preprocessColor, rgbaToHex8, } from './utils.js';
 let EdgelessColorPickerButton = (() => {
     let _classSuper = WithDisposable(LitElement);
@@ -67,9 +68,27 @@ let EdgelessColorPickerButton = (() => {
     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 _pick_decorators;
     let _pick_initializers = [];
     let _pick_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _tabType_decorators;
     let _tabType_initializers = [];
     let _tabType_extraInitializers = [];
@@ -93,7 +112,13 @@ let EdgelessColorPickerButton = (() => {
             _label_decorators = [property()];
             _menuButton_decorators = [query('editor-menu-button')];
             _palettes_decorators = [property({ attribute: false })];
+            _paletteGroups_decorators = [property({ attribute: false })];
+            _activeGroupKey_decorators = [property({ attribute: false })];
+            _pickedGroupIndex_decorators = [state()];
+            _paletteListOpen_decorators = [state()];
+            _pageDirection_decorators = [state()];
             _pick_decorators = [property({ attribute: false })];
+            _std_decorators = [property({ attribute: false })];
             _tabType_decorators = [state()];
             _theme_decorators = [property({ attribute: false })];
             _tooltip_decorators = [property()];
@@ -106,13 +131,20 @@ let EdgelessColorPickerButton = (() => {
             __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_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);
             __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, _pick_decorators, { kind: "accessor", name: "pick", static: false, private: false, access: { has: obj => "pick" in obj, get: obj => obj.pick, set: (obj, value) => { obj.pick = value; } }, metadata: _metadata }, _pick_initializers, _pick_extraInitializers);
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             __esDecorate(this, null, _tabType_decorators, { kind: "accessor", name: "tabType", static: false, private: false, access: { has: obj => "tabType" in obj, get: obj => obj.tabType, set: (obj, value) => { obj.tabType = value; } }, metadata: _metadata }, _tabType_initializers, _tabType_extraInitializers);
             __esDecorate(this, null, _theme_decorators, { kind: "accessor", name: "theme", static: false, private: false, access: { has: obj => "theme" in obj, get: obj => obj.theme, set: (obj, value) => { obj.theme = value; } }, metadata: _metadata }, _theme_initializers, _theme_extraInitializers);
             __esDecorate(this, null, _tooltip_decorators, { kind: "accessor", name: "tooltip", static: false, private: false, access: { has: obj => "tooltip" in obj, get: obj => obj.tooltip, set: (obj, value) => { obj.tooltip = value; } }, metadata: _metadata }, _tooltip_initializers, _tooltip_extraInitializers);
             __esDecorate(this, null, _enableCustomColor_decorators, { kind: "accessor", name: "enableCustomColor", static: false, private: false, access: { has: obj => "enableCustomColor" in obj, get: obj => obj.enableCustomColor, set: (obj, value) => { obj.enableCustomColor = value; } }, metadata: _metadata }, _enableCustomColor_initializers, _enableCustomColor_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        static { this.styles = paletteCarouselStyles; }
         #select;
         get colorWithoutAlpha() {
             return keepColor(this.color.startsWith('--')
@@ -125,8 +157,40 @@ let EdgelessColorPickerButton = (() => {
         get customButtonStyle() {
             return calcCustomButtonStyle(this.color, this.isCustomColor, this);
         }
+        /**
+         * The page of {@link paletteGroups} currently on screen — the one the caller
+         * asked for until the user pages away from it, and never reset by a re-render
+         * (a toolbar rebuilds `paletteGroups` on every update, so reading the prop
+         * back would undo the click that moved the carousel).
+         */
+        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 swatches on screen: the carousel's current page — unless there is no
+         * carousel. A single page means no framework offered hues, and then the
+         * caller's own {@link palettes} wins: that is how a Wardley node keeps its
+         * notation swatches when the Wardley flag is off, its node toolbar being
+         * always-on while its palette is not (`docs/adr/0009`).
+         */
+        get activePalettes() {
+            if (this.paletteGroups.length < 2)
+                return this.palettes;
+            return this.paletteGroups[this.groupIndex]?.palettes ?? this.palettes;
+        }
+        /**
+         * "Custom" is measured against the UNION of the pages, not the one on screen:
+         * a Wardley blue is one of the offered swatches whichever page is showing,
+         * and paging to `Default` must not make the element look custom-coloured.
+         */
         get isCustomColor() {
-            return !this.palettes
+            const offered = this.paletteGroups.length > 1
+                ? this.paletteGroups.flatMap(group => group.palettes)
+                : this.palettes;
+            return !offered
                 .map(({ value }) => resolveColor(value, this.theme))
                 .includes(this.color);
         }
@@ -138,9 +202,26 @@ let EdgelessColorPickerButton = (() => {
             this.pick?.({ type: 'pick', detail });
             this.pick?.({ type: 'end' });
         }
+        /**
+         * A NEW selection re-opens on ITS framework: the page the user paged to
+         * belongs to the element they were recolouring, not to the next one. Only a
+         * change of {@link activeGroupKey} clears it, so paging survives the
+         * re-render the click itself provokes.
+         */
+        willUpdate(changed) {
+            if (changed.has('activeGroupKey')) {
+                this.pickedGroupIndex = undefined;
+                this.paletteListOpen = false;
+                this.pageDirection = 'settle';
+            }
+        }
+        /** Page, and remember which way it went, for the entry animation. */
+        #page;
         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 !== 'normal') {
                     this.tabType = 'normal';
                 }
@@ -172,28 +253,53 @@ let EdgelessColorPickerButton = (() => {
                 [
                     'normal',
                     () => html `
-              <div data-orientation="vertical">
+              <div
+                data-orientation="vertical"
+                @wheel=${paletteCarouselWheel({
+                        groups: this.paletteGroups,
+                        index: this.groupIndex,
+                        onPage: this.#page,
+                        open: this.paletteListOpen,
+                    })}
+              >
                 <slot name="other"></slot>
                 <slot name="separator"></slot>
-                <edgeless-color-panel
-                  role="listbox"
-                  class=${ifDefined(this.colorPanelClass)}
-                  .value=${this.color}
-                  .theme=${this.theme}
-                  .palettes=${this.palettes}
-                  .hollowCircle=${this.hollowCircle}
-                  .hasTransparent=${false}
-                  @select=${this.#select}
-                >
-                  ${when(this.enableCustomColor, () => html `
-                      <edgeless-color-custom-button
-                        slot="custom"
-                        style=${styleMap(this.customButtonStyle)}
-                        ?active=${this.isCustomColor}
-                        @click=${this.switchToCustomTab}
-                      ></edgeless-color-custom-button>
-                    `)}
-                </edgeless-color-panel>
+                ${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: this.theme,
+                    })}
+                ${when(!this.paletteListOpen, () => paletteCarouselPage({
+                        groups: this.paletteGroups,
+                        index: this.groupIndex,
+                        direction: this.pageDirection,
+                    }, html `
+                      <edgeless-color-panel
+                        role="listbox"
+                        class=${ifDefined(this.colorPanelClass)}
+                        .value=${this.color}
+                        .theme=${this.theme}
+                        .palettes=${this.activePalettes}
+                        .hollowCircle=${this.hollowCircle}
+                        .hasTransparent=${false}
+                        .std=${this.std}
+                        @select=${this.#select}
+                      >
+                        ${when(this.enableCustomColor, () => html `
+                            <edgeless-color-custom-button
+                              slot="custom"
+                              style=${styleMap(this.customButtonStyle)}
+                              ?active=${this.isCustomColor}
+                              @click=${this.switchToCustomTab}
+                            ></edgeless-color-custom-button>
+                          `)}
+                      </edgeless-color-panel>
+                    `))}
               </div>
             `,
                 ],
@@ -240,9 +346,51 @@ let EdgelessColorPickerButton = (() => {
         #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 — every
+         * call site that has not opted in — falls back to {@link palettes} and draws
+         * no header, which is exactly the panel this component rendered before.
+         */
+        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.
+         * `undefined` means "still on the one the caller asked for".
+         */
+        get pickedGroupIndex() { return this.#pickedGroupIndex_accessor_storage; }
+        set pickedGroupIndex(value) { this.#pickedGroupIndex_accessor_storage = value; }
+        #paletteListOpen_accessor_storage;
+        /**
+         * View state, like {@link pickedGroupIndex}: whether the header's list of
+         * pages is showing IN PLACE of the swatch grid. Reset when the picker
+         * re-opens and when the selection changes, so it never greets a new element.
+         */
+        get paletteListOpen() { return this.#paletteListOpen_accessor_storage; }
+        set paletteListOpen(value) { this.#paletteListOpen_accessor_storage = value; }
+        #pageDirection_accessor_storage;
+        /**
+         * View state again: which way the page on screen arrived, so the swatches
+         * and the name slide in from the right side of the panel. Never persisted,
+         * and cleared with the rest when the selection changes.
+         */
+        get pageDirection() { return this.#pageDirection_accessor_storage; }
+        set pageDirection(value) { this.#pageDirection_accessor_storage = value; }
         #pick_accessor_storage;
         get pick() { return this.#pick_accessor_storage; }
         set pick(value) { this.#pick_accessor_storage = value; }
+        #std_accessor_storage;
+        /**
+         * Optional, forwarded to the nested `edgeless-color-panel` — see
+         * `EdgelessColorPanel.std` (`color-panel.ts`) for what it changes.
+         */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         #tabType_accessor_storage;
         get tabType() { return this.#tabType_accessor_storage; }
         set tabType(value) { this.#tabType_accessor_storage = value; }
@@ -267,6 +415,11 @@ let EdgelessColorPickerButton = (() => {
                 // refresh menu's position
                 this.menuButton.show(true);
             };
+            /** Page, and remember which way it went, for the entry animation. */
+            this.#page = (index, direction) => {
+                this.pickedGroupIndex = index;
+                this.pageDirection = direction;
+            };
             this.#originalColor_accessor_storage = __runInitializers(this, _originalColor_initializers, void 0);
             this.#color_accessor_storage = (__runInitializers(this, _originalColor_extraInitializers), __runInitializers(this, _color_initializers, void 0));
             this.#colorPanelClass_accessor_storage = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _colorPanelClass_initializers, undefined));
@@ -275,8 +428,14 @@ let EdgelessColorPickerButton = (() => {
             this.#label_accessor_storage = (__runInitializers(this, _isText_extraInitializers), __runInitializers(this, _label_initializers, void 0));
             this.#menuButton_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _menuButton_initializers, void 0));
             this.#palettes_accessor_storage = (__runInitializers(this, _menuButton_extraInitializers), __runInitializers(this, _palettes_initializers, DefaultTheme.Palettes));
-            this.#pick_accessor_storage = (__runInitializers(this, _palettes_extraInitializers), __runInitializers(this, _pick_initializers, void 0));
-            this.#tabType_accessor_storage = (__runInitializers(this, _pick_extraInitializers), __runInitializers(this, _tabType_initializers, 'normal'));
+            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.#pick_accessor_storage = (__runInitializers(this, _pageDirection_extraInitializers), __runInitializers(this, _pick_initializers, void 0));
+            this.#std_accessor_storage = (__runInitializers(this, _pick_extraInitializers), __runInitializers(this, _std_initializers, undefined));
+            this.#tabType_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _tabType_initializers, 'normal'));
             this.#theme_accessor_storage = (__runInitializers(this, _tabType_extraInitializers), __runInitializers(this, _theme_initializers, void 0));
             this.#tooltip_accessor_storage = (__runInitializers(this, _theme_extraInitializers), __runInitializers(this, _tooltip_initializers, undefined));
             this.#enableCustomColor_accessor_storage = (__runInitializers(this, _tooltip_extraInitializers), __runInitializers(this, _enableCustomColor_initializers, true));

package/dist/_pkgs/affine-components/color-picker/color-panel.d.ts

@@ -1,4 +1,5 @@
 import type { Color, ColorScheme, Palette } from '../../affine-model/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import { LitElement, type PropertyValues } from 'lit';
 export declare class EdgelessColorButton extends LitElement {
     static styles: import("lit").CSSResult;
@@ -19,6 +20,13 @@ export declare class EdgelessColorPanel extends LitElement {
     accessor hasTransparent: boolean;
     accessor hollowCircle: boolean;
     accessor palettes: readonly Palette[];
+    /**
+     * Optional: with none, every swatch's label resolves to its English
+     * fallback (or, for a swatch neither {@link resolvePaletteLabel} tier
+     * knows, its raw `key`) — exactly the panel's behaviour before this
+     * property existed.
+     */
+    accessor std: BlockStdScope | undefined;
     accessor theme: ColorScheme;
     accessor value: Color | null;
     accessor columns: number | undefined;

package/dist/_pkgs/affine-components/color-picker/color-panel.js

@@ -42,6 +42,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 import isEqual from 'lodash-es/isEqual.js';
 import { AdditionIcon } from './icons.js';
+import { resolvePaletteLabel } from './utils.js';
 let EdgelessColorButton = (() => {
     let _classSuper = LitElement;
     let _active_decorators;
@@ -186,6 +187,9 @@ let EdgelessColorPanel = (() => {
     let _palettes_decorators;
     let _palettes_initializers = [];
     let _palettes_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _theme_decorators;
     let _theme_initializers = [];
     let _theme_extraInitializers = [];
@@ -201,12 +205,14 @@ let EdgelessColorPanel = (() => {
             _hasTransparent_decorators = [property({ attribute: false })];
             _hollowCircle_decorators = [property({ attribute: false })];
             _palettes_decorators = [property({ type: Array })];
+            _std_decorators = [property({ attribute: false })];
             _theme_decorators = [property({ attribute: false })];
             _value_decorators = [property({ attribute: false })];
             _columns_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _hasTransparent_decorators, { kind: "accessor", name: "hasTransparent", static: false, private: false, access: { has: obj => "hasTransparent" in obj, get: obj => obj.hasTransparent, set: (obj, value) => { obj.hasTransparent = value; } }, metadata: _metadata }, _hasTransparent_initializers, _hasTransparent_extraInitializers);
             __esDecorate(this, null, _hollowCircle_decorators, { kind: "accessor", name: "hollowCircle", static: false, private: false, access: { has: obj => "hollowCircle" in obj, get: obj => obj.hollowCircle, set: (obj, value) => { obj.hollowCircle = value; } }, metadata: _metadata }, _hollowCircle_initializers, _hollowCircle_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, _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, _theme_decorators, { kind: "accessor", name: "theme", static: false, private: false, access: { has: obj => "theme" in obj, get: obj => obj.theme, set: (obj, value) => { obj.theme = value; } }, metadata: _metadata }, _theme_initializers, _theme_extraInitializers);
             __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(this, null, _columns_decorators, { kind: "accessor", name: "columns", static: false, private: false, access: { has: obj => "columns" in obj, get: obj => obj.columns, set: (obj, value) => { obj.columns = value; } }, metadata: _metadata }, _columns_initializers, _columns_extraInitializers);
@@ -269,7 +275,7 @@ let EdgelessColorPanel = (() => {
                 const activated = isEqual(resolvedColor, this.resolvedValue);
                 return html `<edgeless-color-button
             class=${classMap({ large: true })}
-            .label=${palette.key}
+            .label=${resolvePaletteLabel(this.std, palette)}
             .color=${palette.value}
             .theme=${this.theme}
             .hollowCircle=${this.hollowCircle}
@@ -293,7 +299,16 @@ let EdgelessColorPanel = (() => {
         #palettes_accessor_storage = (__runInitializers(this, _hollowCircle_extraInitializers), __runInitializers(this, _palettes_initializers, DefaultTheme.Palettes));
         get palettes() { return this.#palettes_accessor_storage; }
         set palettes(value) { this.#palettes_accessor_storage = value; }
-        #theme_accessor_storage = (__runInitializers(this, _palettes_extraInitializers), __runInitializers(this, _theme_initializers, void 0));
+        #std_accessor_storage = (__runInitializers(this, _palettes_extraInitializers), __runInitializers(this, _std_initializers, undefined));
+        /**
+         * Optional: with none, every swatch's label resolves to its English
+         * fallback (or, for a swatch neither {@link resolvePaletteLabel} tier
+         * knows, its raw `key`) — exactly the panel's behaviour before this
+         * property existed.
+         */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
+        #theme_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _theme_initializers, void 0));
         get theme() { return this.#theme_accessor_storage; }
         set theme(value) { this.#theme_accessor_storage = value; }
         #value_accessor_storage = (__runInitializers(this, _theme_extraInitializers), __runInitializers(this, _value_initializers, null));

package/dist/_pkgs/affine-components/color-picker/color-picker.d.ts

@@ -1,9 +1,13 @@
+import type { BlockStdScope } from '../../std/index.js';
 import { LitElement } from 'lit';
 import type { Hsva, ModeRgba, ModeTab, ModeType, NavType, PickColorEvent, Point, Rgb } from './types.js';
 declare const EdgelessColorPicker_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class EdgelessColorPicker extends EdgelessColorPicker_base {
     #private;
     static styles: import("lit").CSSResult;
+    accessor std: BlockStdScope;
+    private _tabLabel;
+    private _modeLabel;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
     accessor alpha100$: import("@preact/signals-core").ReadonlySignal<string>;