@formicoidea/labre-core 0.41.0 → 0.42.0

package/dist/_pkgs/affine-block-surface/view.js

@@ -2,7 +2,7 @@ import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
 import { BlockViewExtension, CommandExtension, FlavourExtension, } from '../std/index.js';
 import { literal } from 'lit/static-html.js';
 import { effects } from './effects.js';
-import { auditCommands, EdgelessCRUDExtension, EdgelessLegacySlotExtension, EditPropsMiddlewareBuilder, mapQualityCommands, mapQualityWidget, ReadingManager, readingProposalWidget, readingToolbarExtension, SpotlightManager, ValidationManager, validationExceptionToolbarExtension, ValidationOverlay, violationDetailWidget, } from './extensions/index.js';
+import { auditCommands, EdgelessCRUDExtension, EdgelessLegacySlotExtension, EditPropsMiddlewareBuilder, exportSvgCommands, exportSvgToolbarExtension, mapQualityCommands, mapQualityWidget, ReadingManager, readingProposalWidget, readingToolbarExtension, SpotlightManager, ValidationManager, validationExceptionToolbarExtension, ValidationOverlay, violationDetailWidget, } from './extensions/index.js';
 import { ExportManagerExtension } from './extensions/export-manager/export-manager.js';
 import { BackgroundStackingExtension } from './framework-background/stacking.js';
 import { ElementHighlightOverlay } from './renderer/element-highlight-overlay.js';
@@ -65,6 +65,13 @@ export class SurfaceViewExtension extends ViewExtensionProvider {
             // extension does.
             context.register(mapQualityWidget);
             context.register(CommandExtension(mapQualityCommands));
+            // "Export SVG" in the "⋮" of every framework board, and the one command
+            // behind it. Generic like the two above and registered on the same terms:
+            // a board is a `FrameworkBackgroundElementModel`, whatever framework drew
+            // it, so the picture it takes away needs no framework at all
+            // (`docs/adr/0025`). Nothing is offered until a board is selected.
+            context.register(CommandExtension(exportSvgCommands));
+            context.register(exportSvgToolbarExtension);
         }
         else {
             context.register(BlockViewExtension('affine:surface', literal `affine-surface-void`));

package/dist/_pkgs/affine-block-surface-ref/configs/slash-menu.js

@@ -83,7 +83,7 @@ const surfaceRefSlashMenuConfig = {
                 const rootX = x;
                 const rootY = centerVertical - rootH / 2;
                 // Translated HERE and once: the captions are document content the
-                // moment they land (ADR 0016), so the host's catalogue is asked at
+                // moment they land (ADR 0023), so the host's catalogue is asked at
                 // placement and never again.
                 const root = {
                     children: [],

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

@@ -1,20 +1,50 @@
 import type { Color, ColorScheme, Palette } from '../../affine-model/index.js';
 import type { BlockStdScope } from '../../std/index.js';
-import { LitElement } from 'lit';
+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;
@@ -25,6 +55,31 @@ 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

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,6 +68,21 @@ 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 = [];
@@ -96,6 +112,11 @@ 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()];
@@ -110,6 +131,11 @@ 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);
@@ -118,6 +144,7 @@ let EdgelessColorPickerButton = (() => {
             __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('--')
@@ -130,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);
         }
@@ -143,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';
                 }
@@ -177,29 +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}
-                  .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>
+                ${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>
             `,
                 ],
@@ -246,6 +346,41 @@ 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; }
@@ -280,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));
@@ -288,7 +428,12 @@ 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.#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));

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

@@ -0,0 +1,106 @@
+/**
+ * The framework palettes a colour picker offers as a CAROUSEL, and the rule
+ * that decides which page it opens on (`docs/adr/0027`).
+ *
+ * Three pieces, in dependency order:
+ *
+ * 1. **The seam** — {@link FrameworkPaletteExtension}, registered from a
+ *    framework's FLAG-GATED view extension. Offering hues is TOOLING, so a
+ *    framework switched off disappears from the carousel while every colour it
+ *    ever wrote stays exactly where it is (`docs/adr/0009`).
+ * 2. **The resolver** — {@link frameworkOfElement}: which framework a selected
+ *    element belongs to, from what the document already says.
+ * 3. **The builder** — {@link frameworkPaletteGroups}: the carousel a toolbar
+ *    hands the picker, base palette first and never hidden (DESIGN.md, "The
+ *    Coexisting Palettes Rule").
+ *
+ * Nothing here is written to a document: a picked swatch is still a plain
+ * stored colour value, and `packages/affine/model` is untouched.
+ */
+import { type Palette } from '../../affine-model/index.js';
+import { type ChromeWording } from '../../affine-shared/services/index.js';
+import { type BlockStdScope, type FrameworkId } from '../../std/index.js';
+import { type GfxController, type GfxModel } from '../../std/gfx/index.js';
+import type { ExtensionType } from '../../store/index.js';
+import type { NamedPalette } from './types.js';
+/**
+ * A framework's contribution to the carousel: its own name and its own hues.
+ *
+ * `palettes` is the framework's existing `*_PALETTE_LIST` — the same array its
+ * node toolbar already seeds its picker with — so registering one is a
+ * one-liner in the view extension and no palette is restated.
+ */
+export type FrameworkPalette = {
+    framework: FrameworkId;
+    /** The framework's own name, as the carousel prints it. */
+    labelWording: ChromeWording;
+    palettes: NamedPalette[];
+};
+/**
+ * A framework registers its palette here, and nothing else registers one.
+ * Multi-instance, keyed by {@link FrameworkPalette.framework}, exactly like
+ * `TemplateCategoryIdentifier` (`gfx/template/src/contribute.ts`): two
+ * extensions claiming the same framework collide at set-up
+ * (`DuplicateServiceDefinitionError`) rather than showing the page twice.
+ */
+export declare const FrameworkPaletteIdentifier: import("../../global/di/types.js").ServiceIdentifier<FrameworkPalette> & (<U extends FrameworkPalette = FrameworkPalette>(variant: import("../../global/di/types.js").ServiceVariant) => import("../../global/di/types.js").ServiceIdentifier<U>);
+/**
+ * Register a framework's palette. Call it from `setup()` of the FLAG-GATED
+ * view extension, beside the senior tool:
+ *
+ * ```ts
+ * context.register(FrameworkPaletteExtension(WARDLEY_FRAMEWORK_PALETTE));
+ * ```
+ */
+export declare function FrameworkPaletteExtension(...palettes: FrameworkPalette[]): ExtensionType;
+/** One page of the carousel. */
+export type PaletteGroup = {
+    /** {@link BASE_PALETTE_KEY} for the editor's own palette, else a `FrameworkId`. */
+    key: string;
+    /** Already resolved through the host's catalogue — ready to print. */
+    label: string;
+    palettes: readonly Palette[];
+};
+/** The whole carousel, plus the page it opens on. */
+export type PaletteCarousel = {
+    groups: PaletteGroup[];
+    activeKey: string;
+};
+/** The key of the page that is never a framework's and never hidden. */
+export declare const BASE_PALETTE_KEY = "default";
+/**
+ * Which framework this element belongs to, read off the document.
+ *
+ * Three tiers, checked in order:
+ *
+ * 1. **Its own role's namespace.** A role id is `<framework>:<role>`, so a
+ *    Wardley component says `wardley` and a Wardley map says it too — boards
+ *    carry roles like everything else.
+ * 2. **For a connector, its ends.** A link is drawn between artefacts and
+ *    belongs to what it links; a plain connector stamps no role of its own.
+ *    Both ends must agree, otherwise the link crosses two notations and the
+ *    board below gets the last word.
+ * 3. **The smallest board that contains it.** A native shape dropped on a
+ *    Wardley map is being used as part of that map, whatever it stamps.
+ *
+ * `undefined` — a neutral element on the bare canvas — means "no framework",
+ * and the carousel then simply opens on the base palette.
+ */
+export declare function frameworkOfElement(gfx: GfxController, model: GfxModel): FrameworkId | undefined;
+/**
+ * The framework a whole selection belongs to — the one they all share, or
+ * `undefined` as soon as two of them disagree. A picker serving a mixed
+ * selection has no framework of origin to open on, so it opens on the base
+ * palette, which is true of every element in it.
+ */
+export declare function frameworkOfSelection(gfx: GfxController, models: readonly GfxModel[]): FrameworkId | undefined;
+/**
+ * The carousel a contextual toolbar hands its colour picker.
+ *
+ * The base palette is page one and is ALWAYS there (DESIGN.md, "The Coexisting
+ * Palettes Rule"); the frameworks whose tooling is on follow, in
+ * {@link FRAMEWORK_IDS} order so the pages read the same way on every board.
+ * `activeKey` is the framework of the selection when that framework is on the
+ * carousel, else the base palette.
+ */
+export declare function frameworkPaletteGroups(std: BlockStdScope, models: readonly GfxModel[], basePalettes: readonly Palette[]): PaletteCarousel;