@formicoidea/labre-core 0.49.0 → 0.51.0

package/dist/_pkgs/data-view/core/data-view.d.ts

@@ -1,6 +1,6 @@
 import type { DatabaseAllEvents, EventTraceFn } from '../../affine-shared/services/index.js';
 import type { DisposableMember } from '../../global/disposable/index.js';
-import { type Clipboard, type DndController, type EventName, ShadowlessElement, type UIEventHandler } from '../../std/index.js';
+import { type BlockStdScope, type Clipboard, type DndController, type EventName, ShadowlessElement, type UIEventHandler } from '../../std/index.js';
 import { type ReadonlySignal } from '@preact/signals-core';
 import { type TemplateResult } from 'lit';
 import type { DataSource } from './data-source/index.js';
@@ -76,6 +76,13 @@ declare const DataViewRootUI_base: typeof ShadowlessElement & import("../../glob
 export declare class DataViewRootUI extends DataViewRootUI_base {
     static styles: import("lit").CSSResult;
     accessor logic: DataViewRootUILogic;
+    /**
+     * The editor this view renders in, absent outside one. Read by the menus a
+     * view opens, which render outside it (the colour grid's framework pages,
+     * ADR 0036 amendment of 2026-10-14). Typed as the context provides it,
+     * like the cells' `chromeStd`; it is still absent outside an editor.
+     */
+    accessor std: BlockStdScope;
     accessor currentView: string | undefined;
     focusFirstCell: () => void;
     openDetailPanel: (ops: {

package/dist/_pkgs/data-view/core/data-view.js

@@ -35,7 +35,8 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { IS_MOBILE } from '../../global/env/index.js';
 import { BlockSuiteError } from '../../global/exceptions/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
-import { ShadowlessElement, } from '../../std/index.js';
+import { ShadowlessElement, stdContext, } from '../../std/index.js';
+import { consume } from '@lit/context';
 import { computed, signal } from '@preact/signals-core';
 import { css, unsafeCSS } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -153,6 +154,9 @@ let DataViewRootUI = (() => {
     let _logic_decorators;
     let _logic_initializers = [];
     let _logic_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _currentView_decorators;
     let _currentView_initializers = [];
     let _currentView_extraInitializers = [];
@@ -160,7 +164,8 @@ let DataViewRootUI = (() => {
         constructor() {
             super(...arguments);
             this.#logic_accessor_storage = __runInitializers(this, _logic_initializers, void 0);
-            this.#currentView_accessor_storage = (__runInitializers(this, _logic_extraInitializers), __runInitializers(this, _currentView_initializers, undefined));
+            this.#std_accessor_storage = (__runInitializers(this, _logic_extraInitializers), __runInitializers(this, _std_initializers, void 0));
+            this.#currentView_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _currentView_initializers, undefined));
             this.focusFirstCell = (__runInitializers(this, _currentView_extraInitializers), () => {
                 this.logic.focusFirstCell();
             });
@@ -171,8 +176,10 @@ let DataViewRootUI = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _logic_decorators = [property({ attribute: false })];
+            _std_decorators = [consume({ context: stdContext })];
             _currentView_decorators = [state()];
             __esDecorate(this, null, _logic_decorators, { kind: "accessor", name: "logic", static: false, private: false, access: { has: obj => "logic" in obj, get: obj => obj.logic, set: (obj, value) => { obj.logic = value; } }, metadata: _metadata }, _logic_initializers, _logic_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, _currentView_decorators, { kind: "accessor", name: "currentView", static: false, private: false, access: { has: obj => "currentView" in obj, get: obj => obj.currentView, set: (obj, value) => { obj.currentView = value; } }, metadata: _metadata }, _currentView_initializers, _currentView_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -186,6 +193,15 @@ let DataViewRootUI = (() => {
         #logic_accessor_storage;
         get logic() { return this.#logic_accessor_storage; }
         set logic(value) { this.#logic_accessor_storage = value; }
+        #std_accessor_storage;
+        /**
+         * The editor this view renders in, absent outside one. Read by the menus a
+         * view opens, which render outside it (the colour grid's framework pages,
+         * ADR 0036 amendment of 2026-10-14). Typed as the context provides it,
+         * like the cells' `chromeStd`; it is still absent outside an editor.
+         */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         #currentView_accessor_storage;
         get currentView() { return this.#currentView_accessor_storage; }
         set currentView(value) { this.#currentView_accessor_storage = value; }

package/dist/_pkgs/data-view/core/effect.js

@@ -1,7 +1,7 @@
 import { DataViewPropertiesSettingView } from './common/properties.js';
 import { Button } from './component/button/button.js';
 import { Overflow } from './component/overflow/overflow.js';
-import { MultiTagSelect, MultiTagView } from './component/tags/index.js';
+import { DataViewColorCarousel, MultiTagSelect, MultiTagView, } from './component/tags/index.js';
 import { DataViewRootUI } from './data-view.js';
 import { RecordDetail } from './detail/detail.js';
 import { RecordField } from './detail/field.js';
@@ -33,6 +33,7 @@ export function coreEffects() {
     customElements.define('data-view-group-title-boolean-view', BooleanGroupView);
     customElements.define('data-view-group-title-date-view', DateGroupView);
     customElements.define('affine-multi-tag-view', MultiTagView);
+    customElements.define('dv-color-carousel', DataViewColorCarousel);
     customElements.define('uni-lit', UniLit);
     customElements.define('uni-any-render', UniAnyRender);
     customElements.define('variable-ref-view', VariableRefView);

package/dist/_pkgs/data-view/core/filter/eval.d.ts

@@ -1,2 +1,7 @@
 import type { Filter } from './types.js';
-export declare const evalFilter: (filterGroup: Filter, row: Record<string, unknown>) => boolean;
+/**
+ * `undecided` is what a condition nothing can apply answers: `true` for a
+ * view filter (an unfinished condition hides no row), `false` for a colour
+ * rule (an unfinished condition colours no row, ADR 0036).
+ */
+export declare const evalFilter: (filterGroup: Filter, row: Record<string, unknown>, undecided?: boolean) => boolean;

package/dist/_pkgs/data-view/core/filter/eval.js

@@ -32,7 +32,12 @@ const applyFilter = (func, value, filter) => {
         return undefined;
     }
 };
-export const evalFilter = (filterGroup, row) => {
+/**
+ * `undecided` is what a condition nothing can apply answers: `true` for a
+ * view filter (an unfinished condition hides no row), `false` for a colour
+ * rule (an unfinished condition colours no row, ADR 0036).
+ */
+export const evalFilter = (filterGroup, row, undecided = true) => {
     const evalF = (filter) => {
         if (filter.type === 'filter') {
             const value = evalRef(filter.left, row);
@@ -46,7 +51,7 @@ export const evalFilter = (filterGroup, row) => {
                     return result;
                 }
             }
-            return true;
+            return undecided;
         }
         else if (filter.type === 'group') {
             if (filter.op === 'and') {

package/dist/_pkgs/data-view/core/group-by/renderer/select-group.d.ts

@@ -1,3 +1,4 @@
+import { type BlockStdScope } from '../../../../std/index.js';
 import type { SelectTag } from '../../logical/index.js';
 import { BaseGroup } from './base.js';
 export declare class SelectGroupView extends BaseGroup<string, {
@@ -5,6 +6,8 @@ export declare class SelectGroupView extends BaseGroup<string, {
 }> {
     static styles: import("lit").CSSResult;
     private readonly _click;
+    /** Absent outside an editor host: the colour names read English. */
+    accessor std: BlockStdScope;
     get tag(): {
         id: string;
         value: string;

package/dist/_pkgs/data-view/core/group-by/renderer/select-group.js

@@ -1,48 +1,59 @@
+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 { menu, popMenu, popupTargetFromElement, } from '../../../../affine-components/context-menu/index.js';
+import { stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { selectOptionColors } from '../../component/tags/colors.js';
+import { selectOptionColorGrid } from '../../component/tags/color-menu.js';
+import { wordingOf } from '../../utils/wording.js';
 import { BaseGroup } from './base.js';
-export class SelectGroupView extends BaseGroup {
-    constructor() {
-        super(...arguments);
-        this._click = (e) => {
-            if (this.readonly) {
-                return;
-            }
-            e.stopPropagation();
-            popMenu(popupTargetFromElement(this), {
-                options: {
-                    items: [
-                        menu.input({
-                            initialValue: this.tag?.value ?? '',
-                            onChange: text => {
-                                this.updateTag({ value: text });
-                            },
-                        }),
-                        ...selectOptionColors.map(({ color, name }) => {
-                            const styles = styleMap({
-                                backgroundColor: color,
-                                borderRadius: '50%',
-                                width: '20px',
-                                height: '20px',
-                            });
-                            return menu.action({
-                                name: name,
-                                isSelected: this.tag?.color === color,
-                                prefix: html ` <div style=${styles}></div>`,
-                                select: () => {
-                                    this.updateTag({ color });
-                                },
-                            });
-                        }),
-                    ],
-                },
-            });
-        };
-    }
-    static { this.styles = css `
+let SelectGroupView = (() => {
+    let _classSuper = BaseGroup;
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
+    return class SelectGroupView extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
+            __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 = css `
     data-view-group-title-select-view {
       overflow: hidden;
     }
@@ -66,41 +77,78 @@ export class SelectGroupView extends BaseGroup {
       white-space: nowrap;
     }
   `; }
-    get tag() {
-        return this.data.options?.find(v => v.id === this.value);
-    }
-    render() {
-        const tag = this.tag;
-        if (!tag) {
-            return html ` <div
+        #std_accessor_storage;
+        /** Absent outside an editor host: the colour names read English. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
+        get tag() {
+            return this.data.options?.find(v => v.id === this.value);
+        }
+        render() {
+            const tag = this.tag;
+            if (!tag) {
+                return html ` <div
         style="font-size: 14px;color: var(--affine-text-primary-color);line-height: 22px;"
       >
         Ungroups
       </div>`;
-        }
-        const style = styleMap({
-            backgroundColor: tag.color,
-        });
-        const classList = classMap({
-            'data-view-group-title-select-view': true,
-            readonly: this.readonly,
-        });
-        return html ` <div @click="${this._click}" class="${classList}">
+            }
+            const style = styleMap({
+                backgroundColor: tag.color,
+            });
+            const classList = classMap({
+                'data-view-group-title-select-view': true,
+                readonly: this.readonly,
+            });
+            return html ` <div @click="${this._click}" class="${classList}">
       <div class="tag" style="${style}">${tag.value}</div>
     </div>`;
-    }
-    updateTag(tag) {
-        this.updateData?.({
-            ...this.data,
-            options: this.data.options.map(v => {
-                if (v.id === this.value) {
-                    return {
-                        ...v,
-                        ...tag,
-                    };
+        }
+        updateTag(tag) {
+            this.updateData?.({
+                ...this.data,
+                options: this.data.options.map(v => {
+                    if (v.id === this.value) {
+                        return {
+                            ...v,
+                            ...tag,
+                        };
+                    }
+                    return v;
+                }),
+            });
+        }
+        constructor() {
+            super(...arguments);
+            this._click = (e) => {
+                if (this.readonly) {
+                    return;
                 }
-                return v;
-            }),
-        });
-    }
-}
+                e.stopPropagation();
+                popMenu(popupTargetFromElement(this), {
+                    options: {
+                        items: [
+                            menu.input({
+                                initialValue: this.tag?.value ?? '',
+                                onChange: text => {
+                                    this.updateTag({ value: text });
+                                },
+                            }),
+                            ...selectOptionColorGrid({
+                                current: this.tag?.color,
+                                say: wordingOf(this.std),
+                                std: this.std,
+                                select: color => {
+                                    this.updateTag({ color });
+                                },
+                            }),
+                        ],
+                    },
+                });
+            };
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            __runInitializers(this, _std_extraInitializers);
+        }
+    };
+})();
+export { SelectGroupView };

package/dist/_pkgs/data-view/core/view/color-rules.d.ts

@@ -0,0 +1,85 @@
+import type { Filter, FilterGroup } from '../filter/types.js';
+import type { SingleView } from '../view-manager/single-view.js';
+/**
+ * Conditional colours of a view (ADR 0036; labre PRD REQ-DB-4, REQ-DB-10):
+ * the stored `colorRules` of a view, read, evaluated and written here, in
+ * core, so every stored rule paints whatever bundle or flag the host has;
+ * the editor is a view setting like the filter (`color-rules-menu.ts`).
+ *
+ * A rule is `{ id, color, filter }`: `filter` is a view filter's own shape
+ * (`FilterGroup`, same functions, same editor), `color` a colour of the
+ * select options' palette, stored as an option stores it.
+ */
+export type ViewColorRule = {
+    id: string;
+    color: string;
+    filter: FilterGroup;
+};
+/**
+ * The custom property a coloured row or card carries; each layout's
+ * stylesheet reads it as its background in place of its own, and a
+ * selection or a hover still paints over it.
+ *
+ * ponytail: the virtual table (`enable_table_virtual_scroll`, off by
+ * default) paints no rule, its rows being grid cells; upgrade: paint each
+ * `DatabaseCellContainer` of `table/pc-virtual/row/cell.ts` from
+ * `viewRowColor`.
+ */
+export declare const ROW_COLOR_PROPERTY = "--data-view-row-color";
+/**
+ * The stored rules of a view, in order, keeping only what reads as a rule
+ * (an id, a colour string, a filter group): a value a newer client wrote in
+ * another shape is skipped, never thrown on. Absent, no rule.
+ */
+export declare function viewColorRules(data: object | undefined): ViewColorRule[];
+/**
+ * The palette colour a stored value names, or `undefined` for a value this
+ * build does not know. Only a palette colour is ever painted: a stored
+ * string is never put into a style as is, except a softened framework
+ * colour that passes the strict `isSoftenedChipColor` shape (ADR 0036
+ * amendment of 2026-10-14, "framework pages"). That check reads the string
+ * alone, never a flag or a registered palette, so a rule painted with a
+ * framework page paints whatever the host has switched off.
+ */
+export declare function colorRulePaint(color: string): string | undefined;
+/**
+ * The colour of a row, given what `cellOf` reads for a property: the first
+ * rule whose filter matches wins. A rule with no condition matches no row,
+ * and a condition that cannot decide (a value not picked yet) does not
+ * match: a rule being written colours nothing until it says something. A
+ * matching rule whose colour this build does not know still wins, and
+ * paints nothing, as the newer client that wrote it would paint its own
+ * colour there and not a later rule's.
+ */
+export declare function colorRulesMatch(rules: readonly ViewColorRule[], cellOf: (propertyId: string) => unknown): string | undefined;
+/**
+ * The colour of `rowId` in `view`, read inside a render so the row repaints
+ * when a rule or a value it reads changes. A fallback view (ADR 0035 §6)
+ * trusts none of its stored settings, rules included.
+ */
+export declare function viewRowColor(view: SingleView, rowId: string): string | undefined;
+/** Set or clear the colour a row or card element paints. */
+export declare function paintRowColor(element: HTMLElement, color: string | undefined): void;
+/** The same, for a template's `styleMap`. */
+export declare function rowColorStyle(color: string | undefined): {
+    "--data-view-row-color": string;
+} | {
+    "--data-view-row-color"?: undefined;
+};
+/**
+ * Write the rules of `view`. Written on a gesture alone, and not when it
+ * changes nothing; a read-only view and a fallback view are never written.
+ * Returns whether it wrote.
+ */
+export declare function viewColorRulesSet(view: SingleView, rules: readonly ViewColorRule[]): boolean;
+/**
+ * Add a rule at the end, on `condition`, in the next palette colour no rule
+ * uses yet (the first one when every colour is taken). Its id, or `null`
+ * when nothing was written.
+ */
+export declare function colorRuleAdd(view: SingleView, condition: Filter): string | null;
+/** Change a rule's colour or condition. */
+export declare function colorRuleUpdate(view: SingleView, id: string, patch: Partial<Pick<ViewColorRule, 'color' | 'filter'>>): boolean;
+export declare function colorRuleDelete(view: SingleView, id: string): boolean;
+/** Move a rule one place earlier (`-1`) or later (`1`): order decides. */
+export declare function colorRuleMove(view: SingleView, id: string, delta: -1 | 1): boolean;

package/dist/_pkgs/data-view/core/view/color-rules.js

@@ -0,0 +1,165 @@
+import { nanoid } from '../../../store/index.js';
+import { selectOptionColors } from '../component/tags/colors.js';
+import { isSoftenedChipColor } from '../component/tags/softened-colors.js';
+import { evalFilter } from '../filter/eval.js';
+/**
+ * The custom property a coloured row or card carries; each layout's
+ * stylesheet reads it as its background in place of its own, and a
+ * selection or a hover still paints over it.
+ *
+ * ponytail: the virtual table (`enable_table_virtual_scroll`, off by
+ * default) paints no rule, its rows being grid cells; upgrade: paint each
+ * `DatabaseCellContainer` of `table/pc-virtual/row/cell.ts` from
+ * `viewRowColor`.
+ */
+export const ROW_COLOR_PROPERTY = '--data-view-row-color';
+const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+/**
+ * The stored rules of a view, in order, keeping only what reads as a rule
+ * (an id, a colour string, a filter group): a value a newer client wrote in
+ * another shape is skipped, never thrown on. Absent, no rule.
+ */
+export function viewColorRules(data) {
+    const stored = data?.colorRules;
+    if (!Array.isArray(stored))
+        return [];
+    return stored.filter((rule) => isRecord(rule) &&
+        typeof rule.id === 'string' &&
+        typeof rule.color === 'string' &&
+        isRecord(rule.filter) &&
+        rule.filter.type === 'group' &&
+        Array.isArray(rule.filter.conditions));
+}
+/**
+ * The palette colour a stored value names, or `undefined` for a value this
+ * build does not know. Only a palette colour is ever painted: a stored
+ * string is never put into a style as is, except a softened framework
+ * colour that passes the strict `isSoftenedChipColor` shape (ADR 0036
+ * amendment of 2026-10-14, "framework pages"). That check reads the string
+ * alone, never a flag or a registered palette, so a rule painted with a
+ * framework page paints whatever the host has switched off.
+ */
+export function colorRulePaint(color) {
+    if (isSoftenedChipColor(color))
+        return color;
+    return selectOptionColors.find(item => item.color === color || item.oldColor === color)?.color;
+}
+/** The property ids a filter reads, nested groups included. */
+function referencedProperties(filter, into) {
+    if (filter.type === 'filter')
+        into.add(filter.left.name);
+    else
+        filter.conditions.forEach(condition => referencedProperties(condition, into));
+    return into;
+}
+/**
+ * The colour of a row, given what `cellOf` reads for a property: the first
+ * rule whose filter matches wins. A rule with no condition matches no row,
+ * and a condition that cannot decide (a value not picked yet) does not
+ * match: a rule being written colours nothing until it says something. A
+ * matching rule whose colour this build does not know still wins, and
+ * paints nothing, as the newer client that wrote it would paint its own
+ * colour there and not a later rule's.
+ */
+export function colorRulesMatch(rules, cellOf) {
+    for (const rule of rules) {
+        if (!rule.filter.conditions.length)
+            continue;
+        const row = {};
+        referencedProperties(rule.filter, new Set()).forEach(id => {
+            row[id] = cellOf(id);
+        });
+        if (evalFilter(rule.filter, row, false))
+            return colorRulePaint(rule.color);
+    }
+    return undefined;
+}
+/**
+ * The colour of `rowId` in `view`, read inside a render so the row repaints
+ * when a rule or a value it reads changes. A fallback view (ADR 0035 §6)
+ * trusts none of its stored settings, rules included.
+ */
+export function viewRowColor(view, rowId) {
+    if (view.shownAsFallback$.value)
+        return undefined;
+    const rules = viewColorRules(view.manager.dataSource.viewDataGet(view.id));
+    if (!rules.length)
+        return undefined;
+    const known = new Set(view.propertiesRaw$.value.map(property => property.id));
+    return colorRulesMatch(rules, id => known.has(id) ? view.cellGetOrCreate(rowId, id).jsonValue$.value : undefined);
+}
+/** Set or clear the colour a row or card element paints. */
+export function paintRowColor(element, color) {
+    if (color)
+        element.style.setProperty(ROW_COLOR_PROPERTY, color);
+    else
+        element.style.removeProperty(ROW_COLOR_PROPERTY);
+}
+/** The same, for a template's `styleMap`. */
+export function rowColorStyle(color) {
+    return color ? { [ROW_COLOR_PROPERTY]: color } : {};
+}
+/**
+ * Write the rules of `view`. Written on a gesture alone, and not when it
+ * changes nothing; a read-only view and a fallback view are never written.
+ * Returns whether it wrote.
+ */
+export function viewColorRulesSet(view, rules) {
+    if (view.readonly$.peek() || view.shownAsFallback$.peek())
+        return false;
+    const dataSource = view.manager.dataSource;
+    const current = viewColorRules(dataSource.viewDataGet(view.id));
+    if (JSON.stringify(current) === JSON.stringify(rules))
+        return false;
+    // The model's type, so the stored shape is the one ADR 0036 declares.
+    const colorRules = rules.map(rule => ({
+        id: rule.id,
+        color: rule.color,
+        filter: rule.filter,
+    }));
+    dataSource.viewDataUpdate(view.id, () => ({ colorRules }));
+    return true;
+}
+const rulesOf = (view) => viewColorRules(view.manager.dataSource.viewDataGet(view.id));
+/**
+ * Add a rule at the end, on `condition`, in the next palette colour no rule
+ * uses yet (the first one when every colour is taken). Its id, or `null`
+ * when nothing was written.
+ */
+export function colorRuleAdd(view, condition) {
+    const rules = rulesOf(view);
+    const used = new Set(rules.map(rule => colorRulePaint(rule.color)));
+    const color = (selectOptionColors.find(item => !used.has(item.color)) ??
+        selectOptionColors[0])?.color;
+    if (!color)
+        return null;
+    const rule = {
+        id: nanoid(),
+        color,
+        filter: { type: 'group', op: 'and', conditions: [condition] },
+    };
+    return viewColorRulesSet(view, [...rules, rule]) ? rule.id : null;
+}
+/** Change a rule's colour or condition. */
+export function colorRuleUpdate(view, id, patch) {
+    const rules = rulesOf(view);
+    if (!rules.some(rule => rule.id === id))
+        return false;
+    return viewColorRulesSet(view, rules.map(rule => (rule.id === id ? { ...rule, ...patch } : rule)));
+}
+export function colorRuleDelete(view, id) {
+    const rules = rulesOf(view);
+    return viewColorRulesSet(view, rules.filter(rule => rule.id !== id));
+}
+/** Move a rule one place earlier (`-1`) or later (`1`): order decides. */
+export function colorRuleMove(view, id, delta) {
+    const rules = [...rulesOf(view)];
+    const from = rules.findIndex(rule => rule.id === id);
+    const to = from + delta;
+    const rule = rules[from];
+    if (from < 0 || !rule || to < 0 || to >= rules.length)
+        return false;
+    rules.splice(from, 1);
+    rules.splice(to, 0, rule);
+    return viewColorRulesSet(view, rules);
+}

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

@@ -4,3 +4,4 @@ export * from './data-view-base.js';
 export * from './default-name.js';
 export * from './types.js';
 export * from './open-in.js';
+export * from './color-rules.js';

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

@@ -4,3 +4,4 @@ export * from './data-view-base.js';
 export * from './default-name.js';
 export * from './types.js';
 export * from './open-in.js';
+export * from './color-rules.js';

package/dist/_pkgs/data-view/property-presets/multi-select/cell-renderer.js

@@ -26,6 +26,7 @@ export class MultiSelectCell extends BaseCellRenderer {
                 minWidth: 400,
                 initialDraftText,
                 wording: this.wording,
+                std: this.chromeStd,
             });
         };
         this._editComplete = () => {

package/dist/_pkgs/data-view/property-presets/select/cell-renderer.js

@@ -26,6 +26,7 @@ export class SelectCell extends BaseCellRenderer {
                 minWidth: 400,
                 initialDraftText,
                 wording: this.wording,
+                std: this.chromeStd,
             });
         };
         this._editComplete = () => {