@formicoidea/labre-core 0.47.1 → 0.49.0

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

@@ -1,19 +1,42 @@
 import { ShadowlessElement } from '../../../../std/index.js';
 import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * Marks the element of the trailing slot that only exists while something is
+ * hidden (the "N more" button): the rest of the slot is what stays.
+ */
+export declare const OVERFLOW_MORE_ATTR = "data-overflow-more";
 declare const Overflow_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
+/**
+ * A row that draws as many items as its width allows and hands the rest to
+ * a trailing slot (`renderMore`). Every item stays in the DOM, a hidden one
+ * transparent and out of the flow, so its width is measured on each pass;
+ * which ones are drawn is `fitOverflow` (`./fit.ts`), `pinned` included.
+ * Until the first measure every item is drawn.
+ */
 export declare class Overflow extends Overflow_base {
     static styles: import("lit").CSSResult;
     protected frameId: number | undefined;
-    protected widthList: number[];
+    /** Last measured width of the slot's `OVERFLOW_MORE_ATTR` element. */
+    private moreExtraWidth;
     adjustStyle(): void;
     connectedCallback(): void;
     protected doAdjustStyle(): void;
+    /** The items `renderMore` holds, in order. */
+    get hiddenIndices(): number[];
     render(): TemplateResult<1>;
+    protected willUpdate(changed: PropertyValues<this>): void;
     protected updated(_changedProperties: PropertyValues): void;
     accessor items: HTMLDivElement[] & NodeList;
     accessor more: HTMLDivElement;
-    accessor renderCount: number;
+    /** The drawn items' indices, ascending; `undefined` (all) until measured. */
+    accessor drawn: readonly number[] | undefined;
+    /** The item that is always drawn (the current view); `-1` for none. */
+    accessor pinned: number;
     accessor renderItem: Array<() => TemplateResult>;
-    accessor renderMore: (count: number) => TemplateResult;
+    /**
+     * The trailing slot: `count` items are drawn and `hidden` are the indices
+     * it stands for, empty when everything fits.
+     */
+    accessor renderMore: (count: number, hidden: readonly number[]) => TemplateResult | undefined;
 }
 export {};

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

@@ -38,6 +38,24 @@ import { css, html } from 'lit';
 import { property, query, queryAll, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { fitOverflow } from './fit.js';
+/**
+ * Until the "N more" button has been drawn once, its width is guessed; the
+ * next layout pass measures it and settles.
+ */
+const MORE_EXTRA_GUESS = 72;
+/**
+ * Marks the element of the trailing slot that only exists while something is
+ * hidden (the "N more" button): the rest of the slot is what stays.
+ */
+export const OVERFLOW_MORE_ATTR = 'data-overflow-more';
+/**
+ * A row that draws as many items as its width allows and hands the rest to
+ * a trailing slot (`renderMore`). Every item stays in the DOM, a hidden one
+ * transparent and out of the flow, so its width is measured on each pass;
+ * which ones are drawn is `fitOverflow` (`./fit.ts`), `pinned` included.
+ * Until the first measure every item is drawn.
+ */
 let Overflow = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
     let _items_decorators;
@@ -46,9 +64,12 @@ let Overflow = (() => {
     let _more_decorators;
     let _more_initializers = [];
     let _more_extraInitializers = [];
-    let _renderCount_decorators;
-    let _renderCount_initializers = [];
-    let _renderCount_extraInitializers = [];
+    let _drawn_decorators;
+    let _drawn_initializers = [];
+    let _drawn_extraInitializers = [];
+    let _pinned_decorators;
+    let _pinned_initializers = [];
+    let _pinned_extraInitializers = [];
     let _renderItem_decorators;
     let _renderItem_initializers = [];
     let _renderItem_extraInitializers = [];
@@ -60,12 +81,14 @@ let Overflow = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _items_decorators = [queryAll(':scope > .component-overflow-item')];
             _more_decorators = [query(':scope > .component-overflow-more')];
-            _renderCount_decorators = [state()];
+            _drawn_decorators = [state()];
+            _pinned_decorators = [property({ attribute: false })];
             _renderItem_decorators = [property({ attribute: false })];
             _renderMore_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _items_decorators, { kind: "accessor", name: "items", static: false, private: false, access: { has: obj => "items" in obj, get: obj => obj.items, set: (obj, value) => { obj.items = value; } }, metadata: _metadata }, _items_initializers, _items_extraInitializers);
             __esDecorate(this, null, _more_decorators, { kind: "accessor", name: "more", static: false, private: false, access: { has: obj => "more" in obj, get: obj => obj.more, set: (obj, value) => { obj.more = value; } }, metadata: _metadata }, _more_initializers, _more_extraInitializers);
-            __esDecorate(this, null, _renderCount_decorators, { kind: "accessor", name: "renderCount", static: false, private: false, access: { has: obj => "renderCount" in obj, get: obj => obj.renderCount, set: (obj, value) => { obj.renderCount = value; } }, metadata: _metadata }, _renderCount_initializers, _renderCount_extraInitializers);
+            __esDecorate(this, null, _drawn_decorators, { kind: "accessor", name: "drawn", static: false, private: false, access: { has: obj => "drawn" in obj, get: obj => obj.drawn, set: (obj, value) => { obj.drawn = value; } }, metadata: _metadata }, _drawn_initializers, _drawn_extraInitializers);
+            __esDecorate(this, null, _pinned_decorators, { kind: "accessor", name: "pinned", static: false, private: false, access: { has: obj => "pinned" in obj, get: obj => obj.pinned, set: (obj, value) => { obj.pinned = value; } }, metadata: _metadata }, _pinned_initializers, _pinned_extraInitializers);
             __esDecorate(this, null, _renderItem_decorators, { kind: "accessor", name: "renderItem", static: false, private: false, access: { has: obj => "renderItem" in obj, get: obj => obj.renderItem, set: (obj, value) => { obj.renderItem = value; } }, metadata: _metadata }, _renderItem_initializers, _renderItem_extraInitializers);
             __esDecorate(this, null, _renderMore_decorators, { kind: "accessor", name: "renderMore", static: false, private: false, access: { has: obj => "renderMore" in obj, get: obj => obj.renderMore, set: (obj, value) => { obj.renderMore = value; } }, metadata: _metadata }, _renderMore_initializers, _renderMore_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -85,6 +108,9 @@ let Overflow = (() => {
       pointer-events: none;
       position: absolute;
     }
+    .component-overflow-more {
+      display: flex;
+    }
   `; }
         adjustStyle() {
             if (this.frameId) {
@@ -105,40 +131,56 @@ let Overflow = (() => {
             });
         }
         doAdjustStyle() {
-            const moreWidth = this.more.getBoundingClientRect().width;
-            this.widthList[this.renderCount] = moreWidth;
-            const containerWidth = this.getBoundingClientRect().width;
-            let width = 0;
-            for (let i = 0; i < this.items.length; i++) {
-                const item = this.items[i];
-                if (!item)
-                    continue;
-                const itemWidth = item.getBoundingClientRect().width;
-                // Try to calculate the width occupied by rendering n+1 items;
-                // if it exceeds the limit, render n items(in i++ round).
-                const totalWidth = width + itemWidth + (this.widthList[i + 1] ?? moreWidth);
-                if (totalWidth > containerWidth) {
-                    this.renderCount = i;
-                    return;
-                }
-                width += itemWidth;
+            const slotWidth = this.more.getBoundingClientRect().width;
+            const moreButton = this.more.querySelector(`[${OVERFLOW_MORE_ATTR}]`);
+            const moreWidth = moreButton?.getBoundingClientRect().width;
+            if (moreWidth !== undefined)
+                this.moreExtraWidth = moreWidth;
+            const widths = Array.from(this.items, item => item.getBoundingClientRect().width);
+            const drawn = fitOverflow({
+                widths,
+                container: this.getBoundingClientRect().width,
+                trailing: slotWidth - (moreWidth ?? 0),
+                moreExtra: this.moreExtraWidth ?? MORE_EXTRA_GUESS,
+                pinned: this.pinned,
+            });
+            // Assigned only on a change: an equal array is a new identity, and a
+            // state write would re-render, re-measure and loop.
+            if (drawn.join() !== this.drawn?.join()) {
+                this.drawn = drawn;
             }
-            this.renderCount = this.items.length;
+        }
+        /** The items `renderMore` holds, in order. */
+        get hiddenIndices() {
+            if (!this.drawn)
+                return [];
+            const drawn = new Set(this.drawn);
+            return this.renderItem.flatMap((_, index) => drawn.has(index) ? [] : [index]);
         }
         render() {
+            const drawn = this.drawn ? new Set(this.drawn) : undefined;
+            const hidden = this.hiddenIndices;
             return html `
       ${repeat(this.renderItem, (render, index) => {
                 const className = classMap({
                     'component-overflow-item': true,
-                    hidden: index >= this.renderCount,
+                    hidden: drawn ? !drawn.has(index) : false,
                 });
                 return html `<div class="${className}">${render()}</div>`;
             })}
       <div class="component-overflow-more">
-        ${this.renderMore(this.renderCount)}
+        ${this.renderMore(this.renderItem.length - hidden.length, hidden)}
       </div>
     `;
         }
+        willUpdate(changed) {
+            super.willUpdate(changed);
+            // Another set of items: the drawn indices no longer name the same ones.
+            if (changed.has('renderItem') &&
+                changed.get('renderItem')?.length !== this.renderItem.length) {
+                this.drawn = undefined;
+            }
+        }
         updated(_changedProperties) {
             super.updated(_changedProperties);
             this.adjustStyle();
@@ -149,23 +191,34 @@ let Overflow = (() => {
         #more_accessor_storage;
         get more() { return this.#more_accessor_storage; }
         set more(value) { this.#more_accessor_storage = value; }
-        #renderCount_accessor_storage;
-        get renderCount() { return this.#renderCount_accessor_storage; }
-        set renderCount(value) { this.#renderCount_accessor_storage = value; }
+        #drawn_accessor_storage;
+        /** The drawn items' indices, ascending; `undefined` (all) until measured. */
+        get drawn() { return this.#drawn_accessor_storage; }
+        set drawn(value) { this.#drawn_accessor_storage = value; }
+        #pinned_accessor_storage;
+        /** The item that is always drawn (the current view); `-1` for none. */
+        get pinned() { return this.#pinned_accessor_storage; }
+        set pinned(value) { this.#pinned_accessor_storage = value; }
         #renderItem_accessor_storage;
         get renderItem() { return this.#renderItem_accessor_storage; }
         set renderItem(value) { this.#renderItem_accessor_storage = value; }
         #renderMore_accessor_storage;
+        /**
+         * The trailing slot: `count` items are drawn and `hidden` are the indices
+         * it stands for, empty when everything fits.
+         */
         get renderMore() { return this.#renderMore_accessor_storage; }
         set renderMore(value) { this.#renderMore_accessor_storage = value; }
         constructor() {
             super(...arguments);
             this.frameId = undefined;
-            this.widthList = [];
+            /** Last measured width of the slot's `OVERFLOW_MORE_ATTR` element. */
+            this.moreExtraWidth = undefined;
             this.#items_accessor_storage = __runInitializers(this, _items_initializers, void 0);
             this.#more_accessor_storage = (__runInitializers(this, _items_extraInitializers), __runInitializers(this, _more_initializers, void 0));
-            this.#renderCount_accessor_storage = (__runInitializers(this, _more_extraInitializers), __runInitializers(this, _renderCount_initializers, 0));
-            this.#renderItem_accessor_storage = (__runInitializers(this, _renderCount_extraInitializers), __runInitializers(this, _renderItem_initializers, void 0));
+            this.#drawn_accessor_storage = (__runInitializers(this, _more_extraInitializers), __runInitializers(this, _drawn_initializers, undefined));
+            this.#pinned_accessor_storage = (__runInitializers(this, _drawn_extraInitializers), __runInitializers(this, _pinned_initializers, -1));
+            this.#renderItem_accessor_storage = (__runInitializers(this, _pinned_extraInitializers), __runInitializers(this, _renderItem_initializers, void 0));
             this.#renderMore_accessor_storage = (__runInitializers(this, _renderItem_extraInitializers), __runInitializers(this, _renderMore_initializers, void 0));
             __runInitializers(this, _renderMore_extraInitializers);
         }

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

@@ -1,7 +1,14 @@
+import { type ChromeWording } from '../../../../affine-shared/services/index.js';
 export type SelectOptionColor = {
     oldColor: string;
     color: string;
+    /** The English name, `wording`'s fallback. */
     name: string;
+    /**
+     * What the option menu shows, resolved where an editor is at hand;
+     * absent (a colour list a host built in 0.48), `name` is shown.
+     */
+    wording?: ChromeWording;
 };
 export declare const selectOptionColors: SelectOptionColor[];
 export declare const getColorByColor: (color: string) => string;

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

@@ -1,54 +1,66 @@
+import { PALETTE_NAME_BLUE, PALETTE_NAME_GREEN, PALETTE_NAME_GREY, PALETTE_NAME_MAGENTA, PALETTE_NAME_ORANGE, PALETTE_NAME_PURPLE, PALETTE_NAME_RED, PALETTE_NAME_WHITE, PALETTE_NAME_YELLOW, } from '../../../../affine-shared/services/index.js';
 import { cssVarV2 } from '@toeverything/theme/v2';
+import { TAG_COLOR_TEAL } from '../../../translations.js';
 export const selectOptionColors = [
     {
         oldColor: 'var(--affine-tag-red)',
         color: cssVarV2('chip/label/red'),
-        name: 'Red',
+        name: PALETTE_NAME_RED[1],
+        wording: PALETTE_NAME_RED,
     },
     {
         oldColor: 'var(--affine-tag-pink)',
         color: cssVarV2('chip/label/magenta'),
-        name: 'Magenta',
+        name: PALETTE_NAME_MAGENTA[1],
+        wording: PALETTE_NAME_MAGENTA,
     },
     {
         oldColor: 'var(--affine-tag-orange)',
         color: cssVarV2('chip/label/orange'),
-        name: 'Orange',
+        name: PALETTE_NAME_ORANGE[1],
+        wording: PALETTE_NAME_ORANGE,
     },
     {
         oldColor: 'var(--affine-tag-yellow)',
         color: cssVarV2('chip/label/yellow'),
-        name: 'Yellow',
+        name: PALETTE_NAME_YELLOW[1],
+        wording: PALETTE_NAME_YELLOW,
     },
     {
         oldColor: 'var(--affine-tag-green)',
         color: cssVarV2('chip/label/green'),
-        name: 'Green',
+        name: PALETTE_NAME_GREEN[1],
+        wording: PALETTE_NAME_GREEN,
     },
     {
         oldColor: 'var(--affine-tag-teal)',
         color: cssVarV2('chip/label/teal'),
-        name: 'Teal',
+        name: TAG_COLOR_TEAL[1],
+        wording: TAG_COLOR_TEAL,
     },
     {
         oldColor: 'var(--affine-tag-blue)',
         color: cssVarV2('chip/label/blue'),
-        name: 'Blue',
+        name: PALETTE_NAME_BLUE[1],
+        wording: PALETTE_NAME_BLUE,
     },
     {
         oldColor: 'var(--affine-tag-purple)',
         color: cssVarV2('chip/label/purple'),
-        name: 'Purple',
+        name: PALETTE_NAME_PURPLE[1],
+        wording: PALETTE_NAME_PURPLE,
     },
     {
         oldColor: 'var(--affine-tag-gray)',
         color: cssVarV2('chip/label/grey'),
-        name: 'Grey',
+        name: PALETTE_NAME_GREY[1],
+        wording: PALETTE_NAME_GREY,
     },
     {
         oldColor: 'var(--affine-tag-white)',
         color: cssVarV2('chip/label/white'),
-        name: 'White',
+        name: PALETTE_NAME_WHITE[1],
+        wording: PALETTE_NAME_WHITE,
     },
 ];
 const oldColorMap = Object.fromEntries(selectOptionColors.map(tag => [tag.oldColor, tag.color]));

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

@@ -1,15 +1,35 @@
 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 ReadonlySignal } from '@preact/signals-core';
 import type { SelectTag } from '../../logical/index.js';
+export type TagOptionEdits = 'all' | 'create-rename';
 export type TagManagerOptions = {
     mode?: 'single' | 'multi';
     value: ReadonlySignal<string[]>;
     onChange: (value: string[]) => void;
     options: ReadonlySignal<SelectTag[]>;
-    onOptionsChange: (options: SelectTag[]) => void;
+    /**
+     * Absent, the options are fixed: the menu picks among them and offers no
+     * "Create", no option menu and no reordering (a standalone cell whose host
+     * cannot write the property's config, `standalone-cell.ts`).
+     */
+    onOptionsChange?: (options: SelectTag[]) => void;
+    /**
+     * Which edits `onOptionsChange` takes; absent, `'all'` (the table).
+     * `'create-rename'`: "Create" and the option menu's name only, no delete,
+     * no colour and no reordering: a host that writes an option's definition
+     * one edit at a time and offers no more (the title band, ADR 0035
+     * amendment of 2026-10-14).
+     */
+    optionEdits?: TagOptionEdits;
     onComplete?: () => void;
     initialDraftText?: string;
+    /**
+     * Resolves the menu's own wordings; the caller holds the editor, the
+     * popup renders outside it. Absent, the English fallbacks.
+     */
+    wording?: (wording: ChromeWording) => string;
 };
 export declare function consumeTagDraftFromTableCellHost(fromElement: Element): string | undefined;
 declare const MultiTagSelect_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
@@ -32,11 +52,14 @@ export declare class MultiTagSelect extends MultiTagSelect_base {
     accessor mode: 'multi' | 'single';
     accessor onChange: (value: string[]) => void;
     accessor onComplete: () => void;
-    accessor onOptionsChange: (options: SelectTag[]) => void;
+    accessor onOptionsChange: ((options: SelectTag[]) => void) | undefined;
+    accessor optionEdits: TagOptionEdits;
     accessor options: ReadonlySignal<SelectTag[]>;
     private readonly selectedIndex$;
     accessor value: ReadonlySignal<string[]>;
     accessor initialDraftText: string | undefined;
+    accessor wording: ((wording: ChromeWording) => string) | undefined;
+    private say;
 }
 declare global {
     interface HTMLElementTagNameMap {