@formicoidea/labre-core 0.41.0 → 0.42.0

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/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/translations.d.ts

@@ -23,6 +23,14 @@ export declare const COLOR_PICKER_TAB_CUSTOM: ChromeWording;
 export declare const COLOR_PICKER_MODE_NORMAL: ChromeWording;
 export declare const COLOR_PICKER_MODE_LIGHT: ChromeWording;
 export declare const COLOR_PICKER_MODE_DARK: ChromeWording;
+/**
+ * The carousel's own two words (`docs/adr/0027`). The PAGE names are not
+ * here: the base page is the one below, and a framework's page is named by the
+ * framework itself, through the `labelWording` it registers — the same key its
+ * senior button already uses.
+ */
+export declare const PALETTE_GROUP_DEFAULT: ChromeWording;
+export declare const PALETTE_GROUP_CHOOSE: ChromeWording;
 export { COLOR_LABEL, FILL_COLOR_LABEL };
 export declare const BORDER_COLOR_LABEL: ChromeWording;
 export declare const CONTEXT_MENU_NO_RESULTS: ChromeWording;

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

@@ -51,6 +51,21 @@ export const COLOR_PICKER_MODE_DARK = [
     'com.labre.color-picker.mode.dark',
     'Dark',
 ];
+/* ── Palette carousel (the framework pages of a colour picker) ───────── */
+/**
+ * The carousel's own two words (`docs/adr/0027`). The PAGE names are not
+ * here: the base page is the one below, and a framework's page is named by the
+ * framework itself, through the `labelWording` it registers — the same key its
+ * senior button already uses.
+ */
+export const PALETTE_GROUP_DEFAULT = [
+    'com.labre.color-picker.palette.default',
+    'Default',
+];
+export const PALETTE_GROUP_CHOOSE = [
+    'com.labre.color-picker.palette.choose',
+    'Choose a palette',
+];
 /* ── Shape colour picker ─────────────────────────────────────────────── */
 export { COLOR_LABEL, FILL_COLOR_LABEL };
 export const BORDER_COLOR_LABEL = [
@@ -408,6 +423,8 @@ export const COMPONENTS_WORDINGS = [
     COLOR_PICKER_MODE_NORMAL,
     COLOR_PICKER_MODE_LIGHT,
     COLOR_PICKER_MODE_DARK,
+    PALETTE_GROUP_DEFAULT,
+    PALETTE_GROUP_CHOOSE,
     BORDER_COLOR_LABEL,
     CONTEXT_MENU_NO_RESULTS,
     CONTEXT_MENU_DONE,

package/dist/_pkgs/affine-foundation/view.js

@@ -1,7 +1,7 @@
 import { FileDropExtension } from '../affine-components/drop-indicator/index.js';
 import { PeekViewExtension, } from '../affine-components/peek/index.js';
 import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
-import { AutoClearSelectionService, BlockCommentManager, BlockLifecycleTelemetryWatcher, CitationService, DefaultOpenDocExtension, DNDAPIExtension, DocDisplayMetaService, DocModeService, EditPropsStore, EmbedOptionService, FileSizeLimitService, FontConfigExtension, fontConfigSchema, FontLoaderService, LinkPreviewCache, LinkPreviewCacheConfigSchema, LinkPreviewCacheExtension, LinkPreviewService, PageViewportServiceExtension, PivotMaterialityPublisher, TelemetryExtension, ThemeService, ToolbarRegistryExtension, } from '../affine-shared/services/index.js';
+import { AutoClearSelectionService, BlockCommentManager, BlockLifecycleTelemetryWatcher, CitationService, DefaultOpenDocExtension, DNDAPIExtension, DocDisplayMetaService, DocModeService, DocumentDamageTelemetryWatcher, EditPropsStore, EmbedOptionService, FileSizeLimitService, FontConfigExtension, fontConfigSchema, FontLoaderService, LinkPreviewCache, LinkPreviewCacheConfigSchema, LinkPreviewCacheExtension, LinkPreviewService, PageViewportServiceExtension, PivotMaterialityPublisher, TelemetryExtension, ThemeService, ToolbarRegistryExtension, } from '../affine-shared/services/index.js';
 import { InteractivityManager, ToolController } from '../std/gfx/index.js';
 import { z } from 'zod';
 import { clipboardConfigs } from './clipboard.js';
@@ -44,6 +44,7 @@ export class FoundationViewExtension extends ViewExtensionProvider {
             BlockCommentManager,
             // Inert without an injected TelemetryService; see telemetry README.
             BlockLifecycleTelemetryWatcher,
+            DocumentDamageTelemetryWatcher,
         ]);
         context.register(clipboardConfigs);
         if (this.isEdgeless(context.scope)) {

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

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

package/dist/_pkgs/affine-gfx-brush/toolbar/configs/brush.js

@@ -1,5 +1,5 @@
 import { EdgelessCRUDIdentifier } from '../../../affine-block-surface/index.js';
-import { packColor, } from '../../../affine-components/color-picker/index.js';
+import { frameworkPaletteGroups, packColor, } from '../../../affine-components/color-picker/index.js';
 import { BrushElementModel, DefaultTheme, LineWidth, resolveColor, } from '../../../affine-model/index.js';
 import { ToolbarModuleExtension, translateKey, } from '../../../affine-shared/services/index.js';
 import { getMostCommonResolvedValue, getMostCommonValue, } from '../../../affine-shared/utils/index.js';
@@ -72,6 +72,9 @@ export const brushToolbarConfig = {
                             break;
                     }
                 };
+                // A stroke drawn on a framework board opens on that framework's hues
+                // (`docs/adr/0027`); the editor palette stays page one.
+                const carousel = frameworkPaletteGroups(ctx.std, models, DefaultTheme.Palettes);
                 return html `
           <edgeless-color-picker-button
             class="color"
@@ -81,6 +84,8 @@ export const brushToolbarConfig = {
             .theme=${theme}
             .originalColor=${originalColor}
             .enableCustomColor=${enableCustomColor}
+            .paletteGroups=${carousel.groups}
+            .activeGroupKey=${carousel.activeKey}
             .std=${ctx.std}
           >
           </edgeless-color-picker-button>

package/dist/_pkgs/affine-gfx-brush/toolbar/configs/highlighter.js

@@ -1,5 +1,5 @@
 import { EdgelessCRUDIdentifier } from '../../../affine-block-surface/index.js';
-import { adjustColorAlpha, keepColor, packColor, } from '../../../affine-components/color-picker/index.js';
+import { adjustColorAlpha, frameworkPaletteGroups, keepColor, packColor, } from '../../../affine-components/color-picker/index.js';
 import { DEFAULT_HIGHLIGHTER_LINE_WIDTH, DefaultTheme, HIGHLIGHTER_LINE_WIDTHS, HighlighterElementModel, resolveColor, } from '../../../affine-model/index.js';
 import { ToolbarModuleExtension, translateKey, } from '../../../affine-shared/services/index.js';
 import { getMostCommonResolvedValue, getMostCommonValue, } from '../../../affine-shared/utils/index.js';
@@ -82,6 +82,9 @@ export const highlighterToolbarConfig = {
                         control: 'color picker',
                     });
                 };
+                // A highlight drawn over a framework board opens on that framework's
+                // hues (`docs/adr/0027`); the short stroke palette stays page one.
+                const carousel = frameworkPaletteGroups(ctx.std, models, DefaultTheme.StrokeColorShortPalettes);
                 return html `
           <edgeless-color-picker-button
             .colorPanelClass="${'one-way small'}"
@@ -91,6 +94,8 @@ export const highlighterToolbarConfig = {
             .theme=${theme}
             .originalColor=${originalColor}
             .palettes=${DefaultTheme.StrokeColorShortPalettes}
+            .paletteGroups=${carousel.groups}
+            .activeGroupKey=${carousel.activeKey}
             .shouldKeepColor=${true}
             .enableCustomColor=${false}
             .std=${ctx.std}

package/dist/_pkgs/affine-gfx-connector/connector-manager.d.ts

@@ -1,5 +1,5 @@
 import { AStarRunner, Overlay } from '../affine-block-surface/index.js';
-import { type BrushElementModel, type Connection, ConnectorElementModel, GroupElementModel, type LocalConnectorElementModel } from '../affine-model/index.js';
+import { type BrushElementModel, type Connection, ConnectorElementModel, type ConnectorLabelEnd, GroupElementModel, type LocalConnectorElementModel } from '../affine-model/index.js';
 import type { IBound, IVec } from '../global/gfx/index.js';
 import { Bound, PointLocation } from '../global/gfx/index.js';
 import type { BlockStdScope } from '../std/index.js';
@@ -26,6 +26,14 @@ export declare function isCenterAnchorEligible(ele: GfxModel): boolean;
  */
 export declare function isCenterAnchorEnabled(std: BlockStdScope): boolean;
 export declare function isConnectorWithLabel(model: GfxModel | GfxLocalElementModel): boolean;
+/**
+ * The end-label twin of `isConnectorWithLabel`: a connector carrying a painted
+ * label beside its `source` / `target` endpoint.
+ *
+ * A `LocalConnectorElementModel` has no labels at all — it is the preview a
+ * drag paints — so the `instanceof` is the guard, exactly as above.
+ */
+export declare function isConnectorWithEndLabel(model: GfxModel | GfxLocalElementModel, end: ConnectorLabelEnd): boolean;
 export declare function calculateNearestLocation(point: IVec, bounds: IBound, locations?: IVec[], shortestDistance?: number): IVec;
 export declare function isConnectorAndBindingsAllSelected(connector: ConnectorElementModel | LocalConnectorElementModel, selected: GfxModel[]): boolean;
 export declare function getAnchors(ele: GfxModel, includeCenterAnchor?: boolean): {

package/dist/_pkgs/affine-gfx-connector/connector-manager.js

@@ -160,6 +160,46 @@ function computePerimeterPointForCenterAnchor(connectable, centerPoint, otherPoi
 export function isConnectorWithLabel(model) {
     return model instanceof ConnectorElementModel && model.hasLabel();
 }
+/**
+ * The end-label twin of `isConnectorWithLabel`: a connector carrying a painted
+ * label beside its `source` / `target` endpoint.
+ *
+ * A `LocalConnectorElementModel` has no labels at all — it is the preview a
+ * drag paints — so the `instanceof` is the guard, exactly as above.
+ */
+export function isConnectorWithEndLabel(model, end) {
+    return model instanceof ConnectorElementModel && model.hasEndLabel(end);
+}
+/**
+ * Translates one end label's box by how far its endpoint moved, so the label
+ * keeps the position the author gave it RELATIVE to that end.
+ *
+ * `ConnectorPathGenerator.updatePath` is the only caller: the label follows the
+ * end on every re-route, and on nothing else.
+ */
+function followEndpoint(model, end, previousPath) {
+    const box = model.endLabelXYWH(end);
+    if (!box || !model.hasEndLabel(end))
+        return;
+    const nextPath = model.absolutePath;
+    if (nextPath.length === 0 || previousPath.length === 0)
+        return;
+    const endpointOf = (path) => end === 'source' ? path[0] : path[path.length - 1];
+    const from = endpointOf(previousPath);
+    const to = endpointOf(nextPath);
+    const dx = to[0] - from[0];
+    const dy = to[1] - from[1];
+    if (dx === 0 && dy === 0)
+        return;
+    const [x, y, w, h] = box;
+    const moved = [x + dx, y + dy, w, h];
+    if (end === 'source') {
+        model.sourceLabelXYWH = moved;
+    }
+    else {
+        model.targetLabelXYWH = moved;
+    }
+}
 export function calculateNearestLocation(point, bounds, locations = ConnectorEndpointLocations, shortestDistance = Number.POSITIVE_INFINITY) {
     const { x, y, w, h } = bounds;
     return locations
@@ -1000,6 +1040,10 @@ export class ConnectorPathGenerator extends PathGenerator {
         const relativePoints = points.map((p) => {
             return p.setVec(Vec.sub(p, [bound.x, bound.y]));
         });
+        // Captured before the assignment below rebuilds it: the end labels are
+        // re-anchored by how far THEIR endpoint travelled, which is only knowable
+        // against the path this call replaces.
+        const previousPath = connector.absolutePath;
         connector.updatingPath = true;
         // the property assignment order matters
         connector.xywh = bound.serialize();
@@ -1015,6 +1059,23 @@ export class ConnectorPathGenerator extends PathGenerator {
                 model.labelXYWH = [cx - w / 2, cy - h / 2, w, h];
             }
         }
+        // The end labels follow THEIR OWN endpoint, not the connector's centre.
+        // Dragging one of the two nodes moves one end and leaves the other where
+        // it was: re-deriving both boxes from the offset distance (what the centre
+        // label does) would recentre them, and translating both by the element's
+        // delta would slide the far one off its line. Translating each by its
+        // endpoint's delta is the only rule under which a `0..*` typed beside an
+        // end stays beside that end — and the only one that preserves a box the
+        // author dragged somewhere else. Same persistence gate as above: these are
+        // `@field()`s too, so a watching peer must not write them.
+        if (connector instanceof ConnectorElementModel) {
+            const mayPersist = (options?.persistLabelXYWH ?? true) &&
+                !connector.surface?.store?.readonly;
+            if (mayPersist) {
+                followEndpoint(connector, 'source', previousPath);
+                followEndpoint(connector, 'target', previousPath);
+            }
+        }
         connector.updatingPath = false;
     }
     _computeStartEndPoint(connector) {