@formicoidea/labre-core 0.49.0 → 0.51.0

package/dist/_pkgs/data-view/core/component/tags/color-carousel.js

@@ -0,0 +1,199 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { paletteCarouselPage, paletteCarouselStyles, paletteCarouselWheel, renderPaletteCarousel, } from '../../../../affine-components/color-picker/index.js';
+import { ColorScheme } from '../../../../affine-model/index.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+/**
+ * The database colour grid when it has more than one page (ADR 0036
+ * amendment of 2026-10-14, "framework pages"): the canvas carousel's own
+ * header, list and page (`renderPaletteCarousel`, `paletteCarouselPage`,
+ * ADR 0027) above the same `<edgeless-color-panel>` a single page shows.
+ *
+ * An element, not a render helper as on the canvas: a menu entry is a
+ * function the menu calls again on every render, so the page on screen and
+ * the open list need a home that outlives one call. Nothing here is
+ * persisted; a pick bubbles as the panel's own `select` event.
+ */
+let DataViewColorCarousel = (() => {
+    let _classSuper = LitElement;
+    let _current_decorators;
+    let _current_initializers = [];
+    let _current_extraInitializers = [];
+    let _direction_decorators;
+    let _direction_initializers = [];
+    let _direction_extraInitializers = [];
+    let _groups_decorators;
+    let _groups_initializers = [];
+    let _groups_extraInitializers = [];
+    let _listOpen_decorators;
+    let _listOpen_initializers = [];
+    let _listOpen_extraInitializers = [];
+    let _pickedIndex_decorators;
+    let _pickedIndex_initializers = [];
+    let _pickedIndex_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
+    return class DataViewColorCarousel extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _current_decorators = [property({ attribute: false })];
+            _direction_decorators = [state()];
+            _groups_decorators = [property({ attribute: false })];
+            _listOpen_decorators = [state()];
+            _pickedIndex_decorators = [state()];
+            _std_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _current_decorators, { kind: "accessor", name: "current", static: false, private: false, access: { has: obj => "current" in obj, get: obj => obj.current, set: (obj, value) => { obj.current = value; } }, metadata: _metadata }, _current_initializers, _current_extraInitializers);
+            __esDecorate(this, null, _direction_decorators, { kind: "accessor", name: "direction", static: false, private: false, access: { has: obj => "direction" in obj, get: obj => obj.direction, set: (obj, value) => { obj.direction = value; } }, metadata: _metadata }, _direction_initializers, _direction_extraInitializers);
+            __esDecorate(this, null, _groups_decorators, { kind: "accessor", name: "groups", static: false, private: false, access: { has: obj => "groups" in obj, get: obj => obj.groups, set: (obj, value) => { obj.groups = value; } }, metadata: _metadata }, _groups_initializers, _groups_extraInitializers);
+            __esDecorate(this, null, _listOpen_decorators, { kind: "accessor", name: "listOpen", static: false, private: false, access: { has: obj => "listOpen" in obj, get: obj => obj.listOpen, set: (obj, value) => { obj.listOpen = value; } }, metadata: _metadata }, _listOpen_initializers, _listOpen_extraInitializers);
+            __esDecorate(this, null, _pickedIndex_decorators, { kind: "accessor", name: "pickedIndex", static: false, private: false, access: { has: obj => "pickedIndex" in obj, get: obj => obj.pickedIndex, set: (obj, value) => { obj.pickedIndex = value; } }, metadata: _metadata }, _pickedIndex_initializers, _pickedIndex_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);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = [
+            paletteCarouselStyles,
+            css `
+      :host {
+        display: block;
+      }
+
+      .dv-color-carousel {
+        display: flex;
+        flex-direction: column;
+        padding: 4px;
+      }
+    `,
+        ]; }
+        /** The page on screen: the one the user paged to, else the current colour's. */
+        get pageIndex() {
+            if (this.pickedIndex !== undefined)
+                return this.pickedIndex;
+            const holding = this.groups.findIndex(group => group.palettes.some(palette => palette.value === this.current));
+            return Math.max(holding, 0);
+        }
+        updated() {
+            if (!this._refocusHeader)
+                return;
+            this._refocusHeader = false;
+            this.renderRoot
+                .querySelector('.palette-carousel-name')
+                ?.focus();
+        }
+        render() {
+            const { groups, listOpen, direction } = this;
+            const index = this.pageIndex;
+            const page = groups[index];
+            if (!page)
+                return nothing;
+            return html `<div
+      class="dv-color-carousel"
+      data-orientation="vertical"
+      @wheel=${paletteCarouselWheel({
+                groups,
+                index,
+                onPage: this._page,
+                open: listOpen,
+            })}
+    >
+      ${renderPaletteCarousel({
+                groups,
+                index,
+                onPage: this._page,
+                onToggle: this._toggle,
+                open: listOpen,
+                direction,
+                std: this.std,
+                theme: ColorScheme.Light,
+            })}
+      ${listOpen
+                ? nothing
+                : paletteCarouselPage({ groups, index, direction }, html `<edgeless-color-panel
+              data-testid="dv-color-grid"
+              .palettes=${page.palettes}
+              .value=${this.current}
+              .theme=${ColorScheme.Light}
+              .columns=${5}
+            ></edgeless-color-panel>`)}
+    </div>`;
+        }
+        #current_accessor_storage;
+        get current() { return this.#current_accessor_storage; }
+        set current(value) { this.#current_accessor_storage = value; }
+        #direction_accessor_storage;
+        get direction() { return this.#direction_accessor_storage; }
+        set direction(value) { this.#direction_accessor_storage = value; }
+        #groups_accessor_storage;
+        /** The pages, the ten chip colours first (`selectOptionColorPages`). */
+        get groups() { return this.#groups_accessor_storage; }
+        set groups(value) { this.#groups_accessor_storage = value; }
+        #listOpen_accessor_storage;
+        get listOpen() { return this.#listOpen_accessor_storage; }
+        set listOpen(value) { this.#listOpen_accessor_storage = value; }
+        #pickedIndex_accessor_storage;
+        get pickedIndex() { return this.#pickedIndex_accessor_storage; }
+        set pickedIndex(value) { this.#pickedIndex_accessor_storage = value; }
+        #std_accessor_storage;
+        /** Only for the header's own wording ("Choose a palette"). */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            this._refocusHeader = false;
+            this._page = (index, direction) => {
+                this.pickedIndex = index;
+                this.direction = direction;
+            };
+            /**
+             * Closing the list removes the button that had the focus; the keyboard
+             * path goes on from the header, one Tab away from the new page's grid.
+             */
+            this._toggle = (open) => {
+                this._refocusHeader =
+                    !open && this.listOpen && !!this.shadowRoot?.activeElement;
+                this.listOpen = open;
+            };
+            this.#current_accessor_storage = __runInitializers(this, _current_initializers, null);
+            this.#direction_accessor_storage = (__runInitializers(this, _current_extraInitializers), __runInitializers(this, _direction_initializers, 'settle'));
+            this.#groups_accessor_storage = (__runInitializers(this, _direction_extraInitializers), __runInitializers(this, _groups_initializers, []));
+            this.#listOpen_accessor_storage = (__runInitializers(this, _groups_extraInitializers), __runInitializers(this, _listOpen_initializers, false));
+            this.#pickedIndex_accessor_storage = (__runInitializers(this, _listOpen_extraInitializers), __runInitializers(this, _pickedIndex_initializers, undefined));
+            this.#std_accessor_storage = (__runInitializers(this, _pickedIndex_extraInitializers), __runInitializers(this, _std_initializers, undefined));
+            __runInitializers(this, _std_extraInitializers);
+        }
+    };
+})();
+export { DataViewColorCarousel };

package/dist/_pkgs/data-view/core/component/tags/color-menu.d.ts

@@ -0,0 +1,49 @@
+import { type FrameworkPalette, type NamedPalette, type PaletteGroup } from '../../../../affine-components/color-picker/index.js';
+import type { MenuConfig } from '../../../../affine-components/context-menu/index.js';
+import { type ChromeWording } from '../../../../affine-shared/services/index.js';
+import type { BlockStdScope } from '../../../../std/index.js';
+/**
+ * The select options' palette as the canvas swatch grid's palettes. A
+ * swatch's value is the option colour string itself, so a pick writes what
+ * the former menu rows wrote (ADR 0036 amendment of 2026-10-14). The grid
+ * gets no `std` (a popup renders outside the editor), so it shows a label
+ * wording's fallback: the name is resolved here and handed over as that
+ * fallback.
+ */
+export declare function selectOptionColorPalettes(say: (wording: ChromeWording) => string): NamedPalette[];
+/**
+ * One framework palette as a page of softened chip colours (ADR 0036
+ * amendment of 2026-10-14, "framework pages"): each swatch softened from its
+ * light value by `softenedChipColor`, named with the framework's own swatch
+ * wording (or the default theme's for the shared neutrals), resolved here as
+ * the grid gets no `std`. A value that softens to nothing (transparent) and
+ * a second swatch softening to the same string are left out.
+ */
+export declare function softenedFrameworkPalettes(framework: FrameworkPalette, say: (wording: ChromeWording) => string): NamedPalette[];
+/**
+ * The pages of the database colour grid: the ten chip colours first, always
+ * there, then one page per framework palette this editor registered, in the
+ * canvas carousel's order (`contributedFrameworkPalettes`). A palette is
+ * registered by its framework's FLAG-GATED view extension, so a framework
+ * switched off offers no page: tooling only (ADR 0009), what was picked from
+ * it keeps painting. Without `std` (a context outside an editor), the first
+ * page alone.
+ */
+export declare function selectOptionColorPages(say: (wording: ChromeWording) => string, std?: BlockStdScope): PaletteGroup[];
+/**
+ * The select options' colour picker as one menu entry: the canvas swatch
+ * grid (`<edgeless-color-panel>`), the current colour ringed. One copy, read
+ * by an option's menu (`multi-tag-select.ts`), by a colour rule's (ADR
+ * 0036) and by the kanban group header's, so all pick from the same pages
+ * with the same words. A pick closes the menu, as the menu rows it replaces
+ * did. With framework pages (`std` given, a framework on), the grid sits
+ * under the canvas carousel's header (`<dv-color-carousel>`) and opens on
+ * the page that holds the current colour; with the first page alone, the DOM
+ * is the single grid it always was.
+ */
+export declare function selectOptionColorGrid(options: {
+    current: string | undefined;
+    say: (wording: ChromeWording) => string;
+    select: (color: string) => void;
+    std?: BlockStdScope;
+}): MenuConfig[];

package/dist/_pkgs/data-view/core/component/tags/color-menu.js

@@ -0,0 +1,123 @@
+import { BASE_PALETTE_KEY, contributedFrameworkPalettes, } from '../../../../affine-components/color-picker/index.js';
+import { PALETTE_GROUP_DEFAULT } from '../../../../affine-components/translations.js';
+import { ColorScheme } from '../../../../affine-model/index.js';
+import { PALETTE_NAME_WORDINGS, } from '../../../../affine-shared/services/index.js';
+import { html } from 'lit';
+import { selectOptionColors } from './colors.js';
+import { softenedChipColor } from './softened-colors.js';
+/**
+ * The select options' palette as the canvas swatch grid's palettes. A
+ * swatch's value is the option colour string itself, so a pick writes what
+ * the former menu rows wrote (ADR 0036 amendment of 2026-10-14). The grid
+ * gets no `std` (a popup renders outside the editor), so it shows a label
+ * wording's fallback: the name is resolved here and handed over as that
+ * fallback.
+ */
+export function selectOptionColorPalettes(say) {
+    return selectOptionColors.map(item => ({
+        key: item.color,
+        value: item.color,
+        labelWording: [
+            item.wording?.[0] ?? item.name,
+            item.wording ? say(item.wording) : item.name,
+        ],
+    }));
+}
+/**
+ * One framework palette as a page of softened chip colours (ADR 0036
+ * amendment of 2026-10-14, "framework pages"): each swatch softened from its
+ * light value by `softenedChipColor`, named with the framework's own swatch
+ * wording (or the default theme's for the shared neutrals), resolved here as
+ * the grid gets no `std`. A value that softens to nothing (transparent) and
+ * a second swatch softening to the same string are left out.
+ */
+export function softenedFrameworkPalettes(framework, say) {
+    const seen = new Set();
+    const page = [];
+    for (const palette of framework.palettes) {
+        const value = softenedChipColor(palette.value);
+        if (!value || seen.has(value))
+            continue;
+        seen.add(value);
+        const wording = palette.labelWording ?? PALETTE_NAME_WORDINGS[palette.key];
+        page.push({
+            key: palette.key,
+            value,
+            ...(wording ? { labelWording: [wording[0], say(wording)] } : {}),
+        });
+    }
+    return page;
+}
+/**
+ * The pages of the database colour grid: the ten chip colours first, always
+ * there, then one page per framework palette this editor registered, in the
+ * canvas carousel's order (`contributedFrameworkPalettes`). A palette is
+ * registered by its framework's FLAG-GATED view extension, so a framework
+ * switched off offers no page: tooling only (ADR 0009), what was picked from
+ * it keeps painting. Without `std` (a context outside an editor), the first
+ * page alone.
+ */
+export function selectOptionColorPages(say, std) {
+    const base = {
+        key: BASE_PALETTE_KEY,
+        label: say(PALETTE_GROUP_DEFAULT),
+        palettes: selectOptionColorPalettes(say),
+    };
+    if (!std)
+        return [base];
+    const frameworks = contributedFrameworkPalettes(std)
+        .map(framework => ({
+        key: framework.framework,
+        label: say(framework.labelWording),
+        palettes: softenedFrameworkPalettes(framework, say),
+    }))
+        .filter(group => group.palettes.length > 0);
+    return [base, ...frameworks];
+}
+/**
+ * The select options' colour picker as one menu entry: the canvas swatch
+ * grid (`<edgeless-color-panel>`), the current colour ringed. One copy, read
+ * by an option's menu (`multi-tag-select.ts`), by a colour rule's (ADR
+ * 0036) and by the kanban group header's, so all pick from the same pages
+ * with the same words. A pick closes the menu, as the menu rows it replaces
+ * did. With framework pages (`std` given, a framework on), the grid sits
+ * under the canvas carousel's header (`<dv-color-carousel>`) and opens on
+ * the page that holds the current colour; with the first page alone, the DOM
+ * is the single grid it always was.
+ */
+export function selectOptionColorGrid(options) {
+    const groups = selectOptionColorPages(options.say, options.std);
+    return [
+        menu => {
+            const onSelect = (event) => {
+                event.stopPropagation();
+                const color = event.detail.value;
+                if (typeof color !== 'string')
+                    return;
+                options.select(color);
+                menu.options.onComplete?.();
+                menu.close();
+            };
+            if (groups.length > 1) {
+                return html `<dv-color-carousel
+          .groups=${groups}
+          .current=${options.current ?? null}
+          .std=${options.std}
+          @select=${onSelect}
+        ></dv-color-carousel>`;
+            }
+            // The scheme only picks a side of a dark/light pair; an option colour
+            // is a CSS variable string, resolved by the page's own theme.
+            return html `<div style="padding: 4px;">
+        <edgeless-color-panel
+          data-testid="dv-color-grid"
+          .palettes=${groups[0]?.palettes ?? []}
+          .value=${options.current ?? null}
+          .theme=${ColorScheme.Light}
+          .columns=${5}
+          @select=${onSelect}
+        ></edgeless-color-panel>
+      </div>`;
+        },
+    ];
+}

package/dist/_pkgs/data-view/core/component/tags/index.d.ts

@@ -1,3 +1,6 @@
+export * from './color-carousel.js';
 export * from './colors.js';
 export * from './multi-tag-select.js';
 export * from './multi-tag-view.js';
+export * from './color-menu.js';
+export * from './softened-colors.js';

package/dist/_pkgs/data-view/core/component/tags/index.js

@@ -1,3 +1,6 @@
+export * from './color-carousel.js';
 export * from './colors.js';
 export * from './multi-tag-select.js';
 export * from './multi-tag-view.js';
+export * from './color-menu.js';
+export * from './softened-colors.js';

package/dist/_pkgs/data-view/core/component/tags/multi-tag-select.d.ts

@@ -1,6 +1,6 @@
 import { type PopupTarget } from '../../../../affine-components/context-menu/index.js';
 import { type ChromeWording } from '../../../../affine-shared/services/index.js';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../../std/index.js';
 import { type ReadonlySignal } from '@preact/signals-core';
 import type { SelectTag } from '../../logical/index.js';
 export type TagOptionEdits = 'all' | 'create-rename';
@@ -59,6 +59,8 @@ export declare class MultiTagSelect extends MultiTagSelect_base {
     accessor value: ReadonlySignal<string[]>;
     accessor initialDraftText: string | undefined;
     accessor wording: ((wording: ChromeWording) => string) | undefined;
+    /** See `TagSelectOptions.std`: the popup renders outside the editor. */
+    accessor std: BlockStdScope | undefined;
     private say;
 }
 declare global {
@@ -70,6 +72,11 @@ export type TagSelectOptions = {
     name: string;
     minWidth?: number;
     container?: HTMLElement;
+    /**
+     * The editor the opener renders in, for the colour grid's framework pages
+     * (ADR 0036 amendment of 2026-10-14); absent, the ten chip colours alone.
+     */
+    std?: BlockStdScope;
 } & TagManagerOptions;
 export declare const popTagSelect: (target: PopupTarget, ops: TagSelectOptions) => () => void;
 export {};

package/dist/_pkgs/data-view/core/component/tags/multi-tag-select.js

@@ -58,7 +58,8 @@ import { defaultActivators } from '../../utils/wc-dnd/sensors/index.js';
 import { createSortContext, sortable, } from '../../utils/wc-dnd/sort/sort-context.js';
 import { verticalListSortingStrategy } from '../../utils/wc-dnd/sort/strategies/index.js';
 import { arrayMove } from '../../utils/wc-dnd/utils/array-move.js';
-import { getTagColor, selectOptionColors } from './colors.js';
+import { selectOptionColorGrid } from './color-menu.js';
+import { getTagColor } from './colors.js';
 import { selectedStyle, selectOptionContentStyle, selectOptionDragHandlerStyle, selectOptionIconStyle, selectOptionNewIconStyle, selectOptionsContainerStyle, selectOptionsTipsStyle, selectOptionStyle, tagContainerStyle, tagDeleteIconStyle, tagSelectContainerStyle, tagSelectInputContainerStyle, tagSelectInputStyle, tagTextStyle, } from './styles-css.js';
 const englishWording = (wording) => wording[1];
 // Parent elements that can hand over a tag draft typed in the table.
@@ -197,6 +198,9 @@ let MultiTagSelect = (() => {
     let _wording_decorators;
     let _wording_initializers = [];
     let _wording_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     return class MultiTagSelect extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -209,6 +213,7 @@ let MultiTagSelect = (() => {
             _value_decorators = [property({ attribute: false })];
             _initialDraftText_decorators = [property({ attribute: false })];
             _wording_decorators = [property({ attribute: false })];
+            _std_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _mode_decorators, { kind: "accessor", name: "mode", static: false, private: false, access: { has: obj => "mode" in obj, get: obj => obj.mode, set: (obj, value) => { obj.mode = value; } }, metadata: _metadata }, _mode_initializers, _mode_extraInitializers);
             __esDecorate(this, null, _onChange_decorators, { kind: "accessor", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange, set: (obj, value) => { obj.onChange = value; } }, metadata: _metadata }, _onChange_initializers, _onChange_extraInitializers);
             __esDecorate(this, null, _onComplete_decorators, { kind: "accessor", name: "onComplete", static: false, private: false, access: { has: obj => "onComplete" in obj, get: obj => obj.onComplete, set: (obj, value) => { obj.onComplete = value; } }, metadata: _metadata }, _onComplete_initializers, _onComplete_extraInitializers);
@@ -218,6 +223,7 @@ let MultiTagSelect = (() => {
             __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(this, null, _initialDraftText_decorators, { kind: "accessor", name: "initialDraftText", static: false, private: false, access: { has: obj => "initialDraftText" in obj, get: obj => obj.initialDraftText, set: (obj, value) => { obj.initialDraftText = value; } }, metadata: _metadata }, _initialDraftText_initializers, _initialDraftText_extraInitializers);
             __esDecorate(this, null, _wording_decorators, { kind: "accessor", name: "wording", static: false, private: false, access: { has: obj => "wording" in obj, get: obj => obj.wording, set: (obj, value) => { obj.wording = value; } }, metadata: _metadata }, _wording_initializers, _wording_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);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         get text() {
@@ -381,6 +387,10 @@ let MultiTagSelect = (() => {
         #wording_accessor_storage;
         get wording() { return this.#wording_accessor_storage; }
         set wording(value) { this.#wording_accessor_storage = value; }
+        #std_accessor_storage;
+        /** See `TagSelectOptions.std`: the popup renders outside the editor. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         say(wording) {
             return (this.wording ?? englishWording)(wording);
         }
@@ -423,24 +433,13 @@ let MultiTagSelect = (() => {
                             }),
                             menu.group({
                                 name: 'color',
-                                items: selectOptionColors.map(item => {
-                                    const styles = styleMap({
-                                        backgroundColor: item.color,
-                                        borderRadius: '50%',
-                                        width: '20px',
-                                        height: '20px',
-                                    });
-                                    return menu.action({
-                                        name: item.wording ? this.say(item.wording) : item.name,
-                                        prefix: html ` <div style=${styles}></div>`,
-                                        isSelected: option.color === item.color,
-                                        select: () => {
-                                            this.tagManager.changeTag({
-                                                id: option.id,
-                                                color: item.color,
-                                            });
-                                        },
-                                    });
+                                items: selectOptionColorGrid({
+                                    current: option.color,
+                                    say: wording => this.say(wording),
+                                    std: this.std,
+                                    select: color => {
+                                        this.tagManager.changeTag({ id: option.id, color });
+                                    },
                                 }),
                             }),
                         ],
@@ -519,7 +518,8 @@ let MultiTagSelect = (() => {
             this.#value_accessor_storage = __runInitializers(this, _value_initializers, void 0);
             this.#initialDraftText_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _initialDraftText_initializers, void 0));
             this.#wording_accessor_storage = (__runInitializers(this, _initialDraftText_extraInitializers), __runInitializers(this, _wording_initializers, undefined));
-            __runInitializers(this, _wording_extraInitializers);
+            this.#std_accessor_storage = (__runInitializers(this, _wording_extraInitializers), __runInitializers(this, _std_initializers, undefined));
+            __runInitializers(this, _std_extraInitializers);
         }
     };
 })();
@@ -626,6 +626,7 @@ export const popTagSelect = (target, ops) => {
     component.optionEdits = ops.optionEdits ?? 'all';
     component.initialDraftText = ops.initialDraftText;
     component.wording = ops.wording;
+    component.std = ops.std;
     component.onComplete = () => {
         ops.onComplete?.();
         remove();

package/dist/_pkgs/data-view/core/component/tags/softened-colors.d.ts

@@ -0,0 +1,42 @@
+import type { Color } from '../../../../affine-model/index.js';
+/**
+ * A framework colour SOFTENED into a chip colour (ADR 0036 amendment of
+ * 2026-10-14, "framework pages"): one theme-adaptive CSS string,
+ *
+ *     color-mix(in srgb, #rrggbb NN%, var(--affine-v2-layer-background-primary))
+ *
+ * which reads as a pastel tint on the light page background and as a deep
+ * one on the dark, so the chip's primary text stays readable in both, the
+ * way the ten `selectOptionColors` do through their own light/dark tokens.
+ *
+ * The token is spelled LITERALLY, never through `cssVarV2`: a host may
+ * rename the theme's variables (the Labre app's `@labre/theme` answers
+ * `cssVarV2` with `--labre-v2-*`) and keeps the `--affine-v2-*` names as
+ * aliases in every theme scope, so the literal spelling is the one that
+ * paints under every host and the one a stored value can rely on forever.
+ */
+export declare const SOFTENED_BACKGROUND_TOKEN = "--affine-v2-layer-background-primary";
+/**
+ * The colour's share of a softened swatch, in percent. 30% keeps the light
+ * tint pale enough for the light theme's primary text (worst case, black:
+ * 8.8:1) and the dark one deep enough for the dark theme's (worst case,
+ * white: 5.4:1), measured with the theme's own tokens by
+ * `softened-chip-colors.unit.spec.ts` in `@labre/affine`.
+ */
+export declare const SOFTENED_SHARE = 30;
+/**
+ * A colour is ALREADY pastel when it is a mix of at most this share of some
+ * colour with white. It then keeps its light look exactly: the stored source
+ * is that more saturated colour, mixed back at the share that reproduces the
+ * pastel on white, so only the dark theme sees it change. 35% is the largest
+ * share at which even a white source stays dark enough for the dark theme's
+ * primary text (4.6:1; 36% would give 4.4:1).
+ */
+export declare const PASTEL_MAX_SHARE = 35;
+/**
+ * The softened chip colour of a framework colour, from its LIGHT value, or
+ * `undefined` for a value that is not a plain `#rrggbb` (transparent, a CSS
+ * variable, an alpha colour): those offer no swatch.
+ */
+export declare function softenedChipColor(color: Color): string | undefined;
+export declare function isSoftenedChipColor(value: unknown): value is string;

package/dist/_pkgs/data-view/core/component/tags/softened-colors.js

@@ -0,0 +1,79 @@
+/**
+ * A framework colour SOFTENED into a chip colour (ADR 0036 amendment of
+ * 2026-10-14, "framework pages"): one theme-adaptive CSS string,
+ *
+ *     color-mix(in srgb, #rrggbb NN%, var(--affine-v2-layer-background-primary))
+ *
+ * which reads as a pastel tint on the light page background and as a deep
+ * one on the dark, so the chip's primary text stays readable in both, the
+ * way the ten `selectOptionColors` do through their own light/dark tokens.
+ *
+ * The token is spelled LITERALLY, never through `cssVarV2`: a host may
+ * rename the theme's variables (the Labre app's `@labre/theme` answers
+ * `cssVarV2` with `--labre-v2-*`) and keeps the `--affine-v2-*` names as
+ * aliases in every theme scope, so the literal spelling is the one that
+ * paints under every host and the one a stored value can rely on forever.
+ */
+export const SOFTENED_BACKGROUND_TOKEN = '--affine-v2-layer-background-primary';
+/**
+ * The colour's share of a softened swatch, in percent. 30% keeps the light
+ * tint pale enough for the light theme's primary text (worst case, black:
+ * 8.8:1) and the dark one deep enough for the dark theme's (worst case,
+ * white: 5.4:1), measured with the theme's own tokens by
+ * `softened-chip-colors.unit.spec.ts` in `@labre/affine`.
+ */
+export const SOFTENED_SHARE = 30;
+/**
+ * A colour is ALREADY pastel when it is a mix of at most this share of some
+ * colour with white. It then keeps its light look exactly: the stored source
+ * is that more saturated colour, mixed back at the share that reproduces the
+ * pastel on white, so only the dark theme sees it change. 35% is the largest
+ * share at which even a white source stays dark enough for the dark theme's
+ * primary text (4.6:1; 36% would give 4.4:1).
+ */
+export const PASTEL_MAX_SHARE = 35;
+const LIGHT_BACKGROUND = 255;
+const HEX6 = /^#([0-9a-f]{6})$/i;
+const channels = (hex) => {
+    const match = HEX6.exec(hex);
+    if (!match?.[1])
+        return undefined;
+    const value = Number.parseInt(match[1], 16);
+    return [(value >> 16) & 0xff, (value >> 8) & 0xff, value & 0xff];
+};
+const toHex = (rgb) => `#${rgb.map(value => value.toString(16).padStart(2, '0')).join('')}`;
+const lightValue = (color) => typeof color === 'string'
+    ? color
+    : 'light' in color
+        ? color.light
+        : color.normal;
+/**
+ * The softened chip colour of a framework colour, from its LIGHT value, or
+ * `undefined` for a value that is not a plain `#rrggbb` (transparent, a CSS
+ * variable, an alpha colour): those offer no swatch.
+ */
+export function softenedChipColor(color) {
+    const rgb = channels(lightValue(color));
+    if (!rgb)
+        return undefined;
+    // The smallest share at which this colour is a mix with white.
+    const needed = Math.ceil(100 * (1 - Math.min(...rgb) / LIGHT_BACKGROUND));
+    const pastel = needed <= PASTEL_MAX_SHARE;
+    const share = pastel ? Math.max(needed, SOFTENED_SHARE) : SOFTENED_SHARE;
+    const ratio = share / 100;
+    const source = pastel
+        ? rgb.map(value => Math.min(255, Math.max(0, Math.round((value - (1 - ratio) * LIGHT_BACKGROUND) / ratio))))
+        : rgb;
+    return `color-mix(in srgb, ${toHex(source)} ${share}%, var(${SOFTENED_BACKGROUND_TOKEN}))`;
+}
+/**
+ * Exactly the shape {@link softenedChipColor} writes, and nothing else: one
+ * lowercase `#rrggbb`, an integer share from 1 to 100, the one background
+ * token. A stored string goes into a style only through this check or the
+ * palette list (ADR 0036 §4), so a crafted value (a second declaration, a
+ * `url(`, another variable) is refused, not painted.
+ */
+const SOFTENED_CHIP_COLOR = new RegExp(`^color-mix\\(in srgb, #[0-9a-f]{6} (?:100|[1-9][0-9]?)%, var\\(${SOFTENED_BACKGROUND_TOKEN}\\)\\)$`);
+export function isSoftenedChipColor(value) {
+    return typeof value === 'string' && SOFTENED_CHIP_COLOR.test(value);
+}