@formicoidea/labre-core 0.48.0 → 0.49.0

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,7 +1,9 @@
 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[]>;
@@ -13,8 +15,21 @@ export type TagManagerOptions = {
      * 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>;
@@ -38,10 +53,13 @@ export declare class MultiTagSelect extends MultiTagSelect_base {
     accessor onChange: (value: string[]) => void;
     accessor onComplete: () => 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 {

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

@@ -33,6 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { createPopup, menu, popMenu, popupTargetFromElement, } from '../../../../affine-components/context-menu/index.js';
+import { TOOLBAR_DELETE, } from '../../../../affine-shared/services/index.js';
 import { unsafeCSSVarV2 } from '../../../../affine-shared/theme/index.js';
 import { rangeWrap } from '../../../../affine-shared/utils/index.js';
 import { IS_MOBILE } from '../../../../global/env/index.js';
@@ -50,6 +51,7 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
+import { TAG_SELECT_CREATE, TAG_SELECT_PLACEHOLDER, TAG_SELECT_TIP, } from '../../../translations.js';
 import { stopPropagation } from '../../utils/event.js';
 import { dragHandler } from '../../utils/wc-dnd/dnd-context.js';
 import { defaultActivators } from '../../utils/wc-dnd/sensors/index.js';
@@ -58,6 +60,7 @@ import { verticalListSortingStrategy } from '../../utils/wc-dnd/sort/strategies/
 import { arrayMove } from '../../utils/wc-dnd/utils/array-move.js';
 import { getTagColor, selectOptionColors } 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.
 const TABLE_CELL_HOST_SELECTOR = 'dv-table-view-cell-container, affine-database-virtual-cell-container';
 export function consumeTagDraftFromTableCellHost(fromElement) {
@@ -179,6 +182,9 @@ let MultiTagSelect = (() => {
     let _onOptionsChange_decorators;
     let _onOptionsChange_initializers = [];
     let _onOptionsChange_extraInitializers = [];
+    let _optionEdits_decorators;
+    let _optionEdits_initializers = [];
+    let _optionEdits_extraInitializers = [];
     let _options_decorators;
     let _options_initializers = [];
     let _options_extraInitializers = [];
@@ -188,6 +194,9 @@ let MultiTagSelect = (() => {
     let _initialDraftText_decorators;
     let _initialDraftText_initializers = [];
     let _initialDraftText_extraInitializers = [];
+    let _wording_decorators;
+    let _wording_initializers = [];
+    let _wording_extraInitializers = [];
     return class MultiTagSelect extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -195,16 +204,20 @@ let MultiTagSelect = (() => {
             _onChange_decorators = [property({ attribute: false })];
             _onComplete_decorators = [property({ attribute: false })];
             _onOptionsChange_decorators = [property({ attribute: false })];
+            _optionEdits_decorators = [property({ attribute: false })];
             _options_decorators = [property({ attribute: false })];
             _value_decorators = [property({ attribute: false })];
             _initialDraftText_decorators = [property({ attribute: false })];
+            _wording_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);
             __esDecorate(this, null, _onOptionsChange_decorators, { kind: "accessor", name: "onOptionsChange", static: false, private: false, access: { has: obj => "onOptionsChange" in obj, get: obj => obj.onOptionsChange, set: (obj, value) => { obj.onOptionsChange = value; } }, metadata: _metadata }, _onOptionsChange_initializers, _onOptionsChange_extraInitializers);
+            __esDecorate(this, null, _optionEdits_decorators, { kind: "accessor", name: "optionEdits", static: false, private: false, access: { has: obj => "optionEdits" in obj, get: obj => obj.optionEdits, set: (obj, value) => { obj.optionEdits = value; } }, metadata: _metadata }, _optionEdits_initializers, _optionEdits_extraInitializers);
             __esDecorate(this, null, _options_decorators, { kind: "accessor", name: "options", static: false, private: false, access: { has: obj => "options" in obj, get: obj => obj.options, set: (obj, value) => { obj.options = value; } }, metadata: _metadata }, _options_initializers, _options_extraInitializers);
             __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);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         get text() {
@@ -223,7 +236,7 @@ let MultiTagSelect = (() => {
         <input
           class="${tagSelectInputStyle}"
           ${ref(this._selectInput)}
-          placeholder="Type here..."
+          placeholder="${this.say(TAG_SELECT_PLACEHOLDER)}"
           .value="${this.text.value}"
           @input="${this._onInput}"
           @keydown="${this._onInputKeydown}"
@@ -247,13 +260,14 @@ let MultiTagSelect = (() => {
         }
         renderTags() {
             const editable = !!this.onOptionsChange;
+            const reorderable = editable && this.optionEdits === 'all';
             return html `
       <div
         style="height: 0.5px;background-color: ${cssVarV2('layer/insideBorder/border')};margin: 4px 0;"
       ></div>
       ${editable
                 ? html `<div class="${selectOptionsTipsStyle}">
-            Select tag or create one
+            ${this.say(TAG_SELECT_TIP)}
           </div>`
                 : nothing}
       <div data-testid="tag-option-list" class="${selectOptionsContainerStyle}">
@@ -272,7 +286,9 @@ let MultiTagSelect = (() => {
                 };
                 return html `
               <div
-                ${editable && !select.isCreate ? sortable(select.id) : nothing}
+                ${reorderable && !select.isCreate
+                    ? sortable(select.id)
+                    : nothing}
                 class="${classes}"
                 @mouseenter="${mouseenter}"
                 @click="${select.select}"
@@ -280,9 +296,9 @@ let MultiTagSelect = (() => {
                 <div class="${selectOptionContentStyle}">
                   ${select.isCreate
                     ? html ` <div class="${selectOptionNewIconStyle}">
-                        Create
+                        ${this.say(TAG_SELECT_CREATE)}
                       </div>`
-                    : editable
+                    : reorderable
                         ? html `
                           <div
                             ${dragHandler(select.id)}
@@ -350,6 +366,9 @@ let MultiTagSelect = (() => {
         #onOptionsChange_accessor_storage;
         get onOptionsChange() { return this.#onOptionsChange_accessor_storage; }
         set onOptionsChange(value) { this.#onOptionsChange_accessor_storage = value; }
+        #optionEdits_accessor_storage;
+        get optionEdits() { return this.#optionEdits_accessor_storage; }
+        set optionEdits(value) { this.#optionEdits_accessor_storage = value; }
         #options_accessor_storage;
         get options() { return this.#options_accessor_storage; }
         set options(value) { this.#options_accessor_storage = value; }
@@ -359,6 +378,12 @@ let MultiTagSelect = (() => {
         #initialDraftText_accessor_storage;
         get initialDraftText() { return this.#initialDraftText_accessor_storage; }
         set initialDraftText(value) { this.#initialDraftText_accessor_storage = value; }
+        #wording_accessor_storage;
+        get wording() { return this.#wording_accessor_storage; }
+        set wording(value) { this.#wording_accessor_storage = value; }
+        say(wording) {
+            return (this.wording ?? englishWording)(wording);
+        }
         constructor() {
             super(...arguments);
             this._clickItemOption = (e, id) => {
@@ -367,20 +392,27 @@ let MultiTagSelect = (() => {
                 if (!option) {
                     return;
                 }
+                const rename = menu.input({
+                    initialValue: option.value,
+                    onChange: text => {
+                        this.tagManager.changeTag({
+                            id: option.id,
+                            value: text,
+                        });
+                    },
+                });
+                if (this.optionEdits === 'create-rename') {
+                    popMenu(popupTargetFromElement(e.currentTarget), {
+                        options: { items: [rename] },
+                    });
+                    return;
+                }
                 popMenu(popupTargetFromElement(e.currentTarget), {
                     options: {
                         items: [
-                            menu.input({
-                                initialValue: option.value,
-                                onChange: text => {
-                                    this.tagManager.changeTag({
-                                        id: option.id,
-                                        value: text,
-                                    });
-                                },
-                            }),
+                            rename,
                             menu.action({
-                                name: 'Delete',
+                                name: this.say(TOOLBAR_DELETE),
                                 prefix: DeleteIcon(),
                                 class: {
                                     'delete-item': true,
@@ -399,7 +431,7 @@ let MultiTagSelect = (() => {
                                         height: '20px',
                                     });
                                     return menu.action({
-                                        name: item.name,
+                                        name: item.wording ? this.say(item.wording) : item.name,
                                         prefix: html ` <div style=${styles}></div>`,
                                         isSelected: option.color === item.color,
                                         select: () => {
@@ -452,7 +484,10 @@ let MultiTagSelect = (() => {
                 onDragEnd: evt => {
                     const over = evt.over;
                     const activeId = evt.active.id;
-                    if (over && over.id !== activeId && this.onOptionsChange) {
+                    if (over &&
+                        over.id !== activeId &&
+                        this.onOptionsChange &&
+                        this.optionEdits === 'all') {
                         this.onOptionsChange(arrayMove(this.options.value, this.options.value.findIndex(v => v.id === activeId), this.options.value.findIndex(v => v.id === over.id)));
                         this.requestUpdate();
                         // const properties = this.filteredOptions$.value.map(v=>v.id);
@@ -478,17 +513,20 @@ let MultiTagSelect = (() => {
             this.#onChange_accessor_storage = (__runInitializers(this, _mode_extraInitializers), __runInitializers(this, _onChange_initializers, void 0));
             this.#onComplete_accessor_storage = (__runInitializers(this, _onChange_extraInitializers), __runInitializers(this, _onComplete_initializers, void 0));
             this.#onOptionsChange_accessor_storage = (__runInitializers(this, _onComplete_extraInitializers), __runInitializers(this, _onOptionsChange_initializers, undefined));
-            this.#options_accessor_storage = (__runInitializers(this, _onOptionsChange_extraInitializers), __runInitializers(this, _options_initializers, void 0));
+            this.#optionEdits_accessor_storage = (__runInitializers(this, _onOptionsChange_extraInitializers), __runInitializers(this, _optionEdits_initializers, 'all'));
+            this.#options_accessor_storage = (__runInitializers(this, _optionEdits_extraInitializers), __runInitializers(this, _options_initializers, void 0));
             this.selectedIndex$ = (__runInitializers(this, _options_extraInitializers), signal(0));
             this.#value_accessor_storage = __runInitializers(this, _value_initializers, void 0);
             this.#initialDraftText_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _initialDraftText_initializers, void 0));
-            __runInitializers(this, _initialDraftText_extraInitializers);
+            this.#wording_accessor_storage = (__runInitializers(this, _initialDraftText_extraInitializers), __runInitializers(this, _wording_initializers, undefined));
+            __runInitializers(this, _wording_extraInitializers);
         }
     };
 })();
 export { MultiTagSelect };
 const popMobileTagSelect = (target, ops) => {
     const tagManager = new TagManager(ops);
+    const say = ops.wording ?? englishWording;
     if (ops.initialDraftText) {
         tagManager.text$.value = ops.initialDraftText;
     }
@@ -525,7 +563,7 @@ const popMobileTagSelect = (target, ops) => {
               <input
                 .value="${tagManager.text$.value}"
                 @input="${onInput}"
-                placeholder="Type here..."
+                placeholder="${say(TAG_SELECT_PLACEHOLDER)}"
                 type="text"
                 style="outline: none;border: none;flex:1;min-width: 10px"
               />
@@ -546,7 +584,9 @@ const popMobileTagSelect = (target, ops) => {
                                     return html `
                       <div style="display: flex; align-items:center;">
                         ${option.isCreate
-                                        ? html ` <div style="margin-right: 8px;">Create</div>`
+                                        ? html ` <div style="margin-right: 8px;">
+                              ${say(TAG_SELECT_CREATE)}
+                            </div>`
                                         : ''}
                         <div class="${tagContainerStyle}" style=${style}>
                           <div class="${tagTextStyle}">${option.value}</div>
@@ -583,7 +623,9 @@ export const popTagSelect = (target, ops) => {
     component.onChange = ops.onChange;
     component.options = ops.options;
     component.onOptionsChange = ops.onOptionsChange;
+    component.optionEdits = ops.optionEdits ?? 'all';
     component.initialDraftText = ops.initialDraftText;
+    component.wording = ops.wording;
     component.onComplete = () => {
         ops.onComplete?.();
         remove();

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

@@ -8,7 +8,8 @@ import type { DatabaseFlags } from '../types.js';
 import type { ViewConvertConfig } from '../view/convert.js';
 import type { DataViewDataType, ViewMeta } from '../view/data-view.js';
 import type { ViewManager } from '../view-manager/view-manager.js';
-export interface DataSource {
+import { type CellStatus, type DataSourceHydration, type ValuesState } from './hydration.js';
+export interface DataSource extends DataSourceHydration {
     readonly$: ReadonlySignal<boolean>;
     properties$: ReadonlySignal<string[]>;
     featureFlags$: ReadonlySignal<DatabaseFlags>;
@@ -65,6 +66,9 @@ export interface DataSource {
 }
 export declare const DataSourceScope: import("../../../global/di/types.js").ServiceScope;
 export declare abstract class DataSourceBase implements DataSource {
+    /** Every cell is `ready` unless a source says otherwise (ADR 0035 §9e). */
+    cellStatus(_rowId: string, _propertyId: string): CellStatus;
+    valuesState$: ReadonlySignal<ValuesState>;
     propertyTypeCanSet(propertyId: string): boolean;
     propertyCanDuplicate(propertyId: string): boolean;
     propertyCanDelete(propertyId: string): boolean;

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

@@ -1,8 +1,10 @@
 import { Container, createScope, } from '../../../global/di/index.js';
-import { computed } from '@preact/signals-core';
+import { computed, signal } from '@preact/signals-core';
+import { VALUES_READY, } from './hydration.js';
 export const DataSourceScope = createScope('data-source');
 export class DataSourceBase {
     constructor() {
+        this.valuesState$ = signal(VALUES_READY);
         this.container = new Container();
         this.fixedProperties$ = computed(() => {
             return this.allPropertyMetas$.value
@@ -13,6 +15,10 @@ export class DataSourceBase {
             return new Set(this.fixedProperties$.value);
         });
     }
+    /** Every cell is `ready` unless a source says otherwise (ADR 0035 §9e). */
+    cellStatus(_rowId, _propertyId) {
+        return 'ready';
+    }
     propertyTypeCanSet(propertyId) {
         return !this.isFixedProperty(propertyId);
     }