@formicoidea/labre-core 0.41.0 → 0.43.1

package/dist/_pkgs/affine-block-surface/framework-background/stacking.js

@@ -61,10 +61,12 @@ export function indexOverBackgrounds(siblings, box) {
  *    is still below every artefact already drawn there. Otherwise nothing.
  * 2. `element` IS a background. If another background it overlaps sits above
  *    it, the same raise applies — superposed boards stack in the order they
- *    were placed, each still under its own artefacts. Otherwise, if it covers
- *    an artefact it overlaps, it is acting as a lid: lower it to just above
- *    the floor it lies on, or to the back of the surface when it lies on bare
- *    canvas. Otherwise nothing.
+ *    were placed, each still under its own artefacts — unless it ENCLOSES that
+ *    background, in which case it is the sheet the other is drawn on and stays
+ *    under it ({@link encloses}). Otherwise, if it covers an artefact it
+ *    overlaps, it is acting as a lid: lower it to just above the floor it lies
+ *    on, or to the back of the surface when it lies on bare canvas. Otherwise
+ *    nothing.
  *
  * `siblings` are the OTHER top-level elements of the surface — canvas elements
  * and blocks alike, since the surface paints both by index — with `element`
@@ -89,18 +91,64 @@ export function indexOverBackgrounds(siblings, box) {
 export function stackingIndexFor(element, siblings) {
     const box = Bound.deserialize(element.xywh);
     const overlapping = siblings.filter(sibling => Bound.deserialize(sibling.xywh).isOverlapWithBound(box));
-    const buried = overlapping.some(sibling => sibling.isBackground && sibling.index > element.index);
+    // The stack {@link indexOverBackgrounds} is allowed to land ON, which is the
+    // same carve-out as `buried`'s applied to the DESTINATION rather than to the
+    // question. The recette of 2026-09-15 needed both halves: a frame buried under
+    // a PEER board is raised, and the depth it was raised to was read off the
+    // unfiltered list — whose topmost overlapping background is the frame's OWN
+    // inner subject. So the sheet cleared the peer and landed just above the thing
+    // drawn on it, which is the very state `encloses` exists to prevent.
+    //
+    // DEMOTED, not removed: what it encloses is not a floor it may stand on, but
+    // it is still something the minted key has to stay UNDER. Dropping those
+    // entries would take the upper bound away with them and `generateKeyBetween`
+    // would append past its own content instead of slotting in below it.
+    const floors = siblings.map(sibling => encloses(element, box, sibling)
+        ? { ...sibling, isBackground: false }
+        : sibling);
+    const buried = overlapping.some(sibling => sibling.isBackground &&
+        sibling.index > element.index &&
+        !encloses(element, box, sibling));
     const lidding = element.isBackground &&
         overlapping.some(sibling => !sibling.isBackground && sibling.index < element.index);
     const next = buried
-        ? indexOverBackgrounds(siblings, box)
+        ? indexOverBackgrounds(floors, box)
         : lidding
             ? // Down to the floor it lies on, or to the back of the surface when
-                // there is none — the depth `createWardleyArea` mints by hand.
-                (indexOverBackgrounds(siblings, box) ?? backOf(siblings))
+                // there is none — the depth `createWardleyArea` mints by hand. The back
+                // is measured against EVERY sibling: "under everything" means under the
+                // content too, enclosed or not.
+                (indexOverBackgrounds(floors, box) ?? backOf(siblings))
             : null;
     return next === element.index ? null : next;
 }
+/**
+ * Whether `element` is the SHEET `sibling` is drawn on — a background that
+ * strictly encloses another background.
+ *
+ * The carve-out the "superposed boards" clause needs, and the recette of
+ * 2026-09-15 is what named it: a UML diagram frame holds inner backgrounds of
+ * its own — a use case subject (§18.1.4), an activity partition (§15.6.4), a
+ * composite state (§14.2.4), a combined fragment (§17.6.4) — and a C4 board
+ * holds boundaries. Every one of them is drawn INSIDE the sheet and therefore
+ * above it, which made the sheet permanently "buried" under its own content:
+ * moving or resizing it raised it just above the topmost background it
+ * overlapped, and when that background was the topmost element of the stack the
+ * opaque sheet went to the very front and hid everything drawn on it.
+ *
+ * Two superposed PEER boards are a different gesture and keep the old answer.
+ * The discriminator is containment and not mere overlap: a sheet is bigger than
+ * what is drawn on it, so `element` is its floor only when it wholly encloses
+ * it AND covers more ground than it. Equal boxes — two boards dropped on the
+ * same spot — enclose each other, which is no statement at all, so they are
+ * peers and the raise still applies.
+ */
+function encloses(element, box, sibling) {
+    if (!element.isBackground)
+        return false;
+    const inner = Bound.deserialize(sibling.xywh);
+    return box.contains(inner) && inner.w * inner.h < box.w * box.h;
+}
 /** A key below every sibling: the back of the surface. */
 function backOf(siblings) {
     const lowest = siblings.reduce((min, sibling) => min === null || sibling.index < min ? sibling.index : min, null);

package/dist/_pkgs/affine-block-surface/renderer/canvas-renderer.d.ts

@@ -4,6 +4,7 @@ import type { BlockStdScope } from '../../std/index.js';
 import type { GfxLocalElementModel, GridManager, LayerManager, SurfaceBlockModel, Viewport } from '../../std/gfx/index.js';
 import { Subject } from 'rxjs';
 import type { SurfaceElementModel } from '../element-model/base.js';
+import { RoughCanvas } from '../utils/rough/canvas.js';
 import type { Overlay } from './overlay.js';
 type EnvProvider = {
     generateColorProperty: (color: Color, fallback?: Color) => string;
@@ -131,6 +132,17 @@ export declare class CanvasRenderer {
     dispose(): void;
     generateColorProperty(color: Color, fallback?: Color): string;
     getCanvasByBound(bound?: IBound, surfaceElements?: SurfaceElementModel[], canvas?: HTMLCanvasElement, clearBeforeDrawing?: boolean, withZoom?: boolean): HTMLCanvasElement;
+    /**
+     * Paint `bound` into any 2D context at 1:1 — no device pixel ratio, no zoom.
+     * The SVG export's door: it hands the same element renderers an SVG-emitting
+     * context instead of a canvas one.
+     *
+     * `surfaceElements` is painted in the order given, so a caller that wants the
+     * canvas' z-order passes what `GfxController.getElementsByBound` returned
+     * (already sorted by `layer.compare`). Omitting it falls back to the grid
+     * search, which is NOT layer-ordered.
+     */
+    renderBoundTo(ctx: CanvasRenderingContext2D, rc: RoughCanvas, bound: IBound, surfaceElements?: SurfaceElementModel[]): void;
     getColorScheme(): ColorScheme;
     getColorValue(color: Color, fallback?: Color, real?: boolean): string;
     getPropertyValue(property: string): string;

package/dist/_pkgs/affine-block-surface/renderer/canvas-renderer.js

@@ -527,6 +527,21 @@ export class CanvasRenderer {
         this._renderByBound(ctx, matrix, rc, bound, surfaceElements);
         return canvas;
     }
+    /**
+     * Paint `bound` into any 2D context at 1:1 — no device pixel ratio, no zoom.
+     * The SVG export's door: it hands the same element renderers an SVG-emitting
+     * context instead of a canvas one.
+     *
+     * `surfaceElements` is painted in the order given, so a caller that wants the
+     * canvas' z-order passes what `GfxController.getElementsByBound` returned
+     * (already sorted by `layer.compare`). Omitting it falls back to the grid
+     * search, which is NOT layer-ordered.
+     */
+    renderBoundTo(ctx, rc, bound, surfaceElements) {
+        const matrix = new DOMMatrix();
+        ctx.setTransform(matrix);
+        this._renderByBound(ctx, matrix, rc, bound, surfaceElements);
+    }
     getColorScheme() {
         return this.provider.getColorScheme?.() ?? ColorScheme.Light;
     }

package/dist/_pkgs/affine-block-surface/renderer/element-highlight-overlay.js

@@ -1,4 +1,4 @@
-import { ThemeProvider } from '../../affine-shared/services/index.js';
+import { getChromeAccentColor } from '../../affine-shared/services/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
 import { effect } from '@preact/signals-core';
 import { Overlay } from './overlay.js';
@@ -8,8 +8,6 @@ const HIGHLIGHT_STROKE_WIDTH = 2;
 const HIGHLIGHT_GAP = 4;
 /** Ring corner radius, in screen pixels. */
 const HIGHLIGHT_RADIUS = 4;
-/** Used when no theme is provided, matches the legacy frame highlight. */
-const FALLBACK_HIGHLIGHT_COLOR = '#1E96EB';
 /**
  * Draws the transient emphasis ring around the elements held by
  * `gfx.highlight` (`ElementHighlightManager`).
@@ -20,10 +18,7 @@ const FALLBACK_HIGHLIGHT_COLOR = '#1E96EB';
 export class ElementHighlightOverlay extends Overlay {
     static { this.overlayName = 'element-highlight'; }
     get _strokeColor() {
-        return (this.gfx.std
-            .getOptional(ThemeProvider)
-            ?.getCssVariableColor('--affine-primary-color') ??
-            FALLBACK_HIGHLIGHT_COLOR);
+        return getChromeAccentColor(this.gfx.std);
     }
     constructor(gfx) {
         super(gfx);

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-block-surface-ref/configs/tooltips.js

@@ -6,8 +6,8 @@ export const EdgelessTooltip = html `<svg width="170" height="106" viewBox="0 0
 <rect width="170" height="106" rx="2" fill="white"/>
 </mask>
 <g mask="url(#mask0_16460_1252)">
-<rect x="100.5" y="42.6565" width="141" height="51" stroke="#1E96EB" stroke-width="3" stroke-dasharray="5 5"/>
-<circle cx="101.5" cy="43.5" r="6" fill="white" stroke="#1E96EB" stroke-width="3"/>
+<rect x="100.5" y="42.6565" width="141" height="51" stroke="var(--affine-primary-color)" stroke-width="3" stroke-dasharray="5 5"/>
+<circle cx="101.5" cy="43.5" r="6" fill="white" stroke="var(--affine-primary-color)" stroke-width="3"/>
 <rect x="105" y="8" width="59" height="26" rx="10" fill="black" fill-opacity="0.1"/>
 <text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="12" letter-spacing="0em"><tspan x="117" y="25.3636">Group</tspan></text>
 <mask id="mask1_16460_1252" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="98" height="106">

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));