@formicoidea/labre-core 0.48.0 → 0.49.0

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

@@ -1,11 +1,19 @@
 import { type MenuOptions, type PopupTarget } from '../../../affine-components/context-menu/index.js';
 import { ShadowlessElement } from '../../../std/index.js';
-import type { GroupTrait } from './trait.js';
+import { type Wording } from '../utils/wording.js';
+import type { Group, GroupTrait } from './trait.js';
 declare const GroupSetting_base: typeof ShadowlessElement & import("../../../global/utils/types.js").Constructor<import("../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class GroupSetting extends GroupSetting_base {
     static styles: import("lit").CSSResult;
     accessor groupTrait: GroupTrait;
-    groups$: import("@preact/signals-core").ReadonlySignal<import("./trait.js").Group<unknown, unknown, Record<string, unknown>>[] | undefined>;
+    /** Resolved by the menu's opener: a popup renders outside the host. */
+    accessor wording: Wording;
+    /**
+     * The eye of a group (B8): hide it from the view for everyone, or show it
+     * again. A hidden group keeps its row here, in its place in the order.
+     */
+    private renderVisibility;
+    groups$: import("@preact/signals-core").ReadonlySignal<Group<unknown, unknown, Record<string, unknown>>[] | undefined>;
     sortContext: import("../utils/wc-dnd/sort/sort-context.js").SortContext;
     connectedCallback(): void;
     protected render(): unknown;
@@ -21,5 +29,5 @@ export declare const popSelectGroupByProperty: (target: PopupTarget, group: Grou
     onClose?: () => void;
     onBack?: () => void;
 }) => void;
-export declare const popGroupSetting: (target: PopupTarget, group: GroupTrait, onBack: () => void) => void;
+export declare const popGroupSetting: (target: PopupTarget, group: GroupTrait, onBack: () => void, wording?: Wording) => void;
 export {};

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

@@ -34,16 +34,17 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { menu, popMenu, } from '../../../affine-components/context-menu/index.js';
 import { SignalWatcher, WithDisposable } from '../../../global/lit/index.js';
-import { DeleteIcon } from '@blocksuite/icons/lit';
+import { DeleteIcon, InvisibleIcon, ViewIcon } from '@blocksuite/icons/lit';
 import { ShadowlessElement } from '../../../std/index.js';
 import { computed } from '@preact/signals-core';
-import { css, html, unsafeCSS } from 'lit';
+import { css, html, nothing, unsafeCSS } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { DATA_VIEW_GROUP_HIDE, DATA_VIEW_GROUP_SHOW, } from '../../translations.js';
 import { KanbanSingleView } from '../../view-presets/kanban/kanban-view-manager.js';
-import { TableSingleView } from '../../view-presets/table/table-view-manager.js';
 import { dataViewCssVariable } from '../common/css-variable.js';
 import { renderUniLit } from '../utils/uni-component/uni-component.js';
+import { englishWording } from '../utils/wording.js';
 import { dragHandler } from '../utils/wc-dnd/dnd-context.js';
 import { defaultActivators } from '../utils/wc-dnd/sensors/index.js';
 import { createSortContext, sortable, } from '../utils/wc-dnd/sort/sort-context.js';
@@ -54,6 +55,9 @@ let GroupSetting = (() => {
     let _groupTrait_decorators;
     let _groupTrait_initializers = [];
     let _groupTrait_extraInitializers = [];
+    let _wording_decorators;
+    let _wording_initializers = [];
+    let _wording_extraInitializers = [];
     let _groupContainer_decorators;
     let _groupContainer_initializers = [];
     let _groupContainer_extraInitializers = [];
@@ -61,8 +65,10 @@ let GroupSetting = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _groupTrait_decorators = [property({ attribute: false })];
+            _wording_decorators = [property({ attribute: false })];
             _groupContainer_decorators = [query('.group-sort-setting')];
             __esDecorate(this, null, _groupTrait_decorators, { kind: "accessor", name: "groupTrait", static: false, private: false, access: { has: obj => "groupTrait" in obj, get: obj => obj.groupTrait, set: (obj, value) => { obj.groupTrait = value; } }, metadata: _metadata }, _groupTrait_initializers, _groupTrait_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, _groupContainer_decorators, { kind: "accessor", name: "groupContainer", static: false, private: false, access: { has: obj => "groupContainer" in obj, get: obj => obj.groupContainer, set: (obj, value) => { obj.groupContainer = value; } }, metadata: _metadata }, _groupContainer_initializers, _groupContainer_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -96,10 +102,73 @@ let GroupSetting = (() => {
     .group-item:hover .group-item-drag-bar {
       background-color: #c0bfc1;
     }
+
+    .group-item-visibility {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      margin-left: auto;
+      padding: 0;
+      border: none;
+      border-radius: 4px;
+      background: transparent;
+      color: var(--affine-icon-color);
+      cursor: pointer;
+    }
+
+    .group-item-visibility svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .group-item-visibility:hover {
+      background-color: var(--affine-hover-color);
+    }
+
+    @media (pointer: coarse) {
+      .group-item {
+        align-items: center;
+        min-height: 44px;
+      }
+
+      .group-item-visibility {
+        width: 44px;
+        height: 44px;
+      }
+    }
   `; }
         #groupTrait_accessor_storage;
         get groupTrait() { return this.#groupTrait_accessor_storage; }
         set groupTrait(value) { this.#groupTrait_accessor_storage = value; }
+        #wording_accessor_storage;
+        /** Resolved by the menu's opener: a popup renders outside the host. */
+        get wording() { return this.#wording_accessor_storage; }
+        set wording(value) { this.#wording_accessor_storage = value; }
+        /**
+         * The eye of a group (B8): hide it from the view for everyone, or show it
+         * again. A hidden group keeps its row here, in its place in the order.
+         */
+        renderVisibility(group) {
+            const trait = this.groupTrait;
+            if (!trait.groupsCanHide || trait.view.readonly$.value)
+                return nothing;
+            const hidden = trait.hiddenGroups$.value.includes(group);
+            const label = this.wording(hidden ? DATA_VIEW_GROUP_SHOW : DATA_VIEW_GROUP_HIDE);
+            return html `<button
+      class="group-item-visibility"
+      data-testid="dv-group-visibility"
+      aria-label="${label}"
+      title="${label}"
+      aria-pressed="${hidden ? 'true' : 'false'}"
+      @pointerdown="${(event) => event.stopPropagation()}"
+      @click="${() => trait.groupHideSet(group.key, !hidden)}"
+    >
+      ${hidden ? InvisibleIcon() : ViewIcon()}
+    </button>`;
+        }
         connectedCallback() {
             super.connectedCallback();
             this._disposables.addFromEvent(this, 'pointerdown', e => {
@@ -146,6 +215,7 @@ let GroupSetting = (() => {
                   style="position:absolute;left: 0;top: 0;right: 0;bottom: 0;"
                 ></div>
               </div>
+              ${this.renderVisibility(group)}
             </div>`;
             })}
       </div>
@@ -157,7 +227,8 @@ let GroupSetting = (() => {
         constructor() {
             super(...arguments);
             this.#groupTrait_accessor_storage = __runInitializers(this, _groupTrait_initializers, void 0);
-            this.groups$ = (__runInitializers(this, _groupTrait_extraInitializers), computed(() => {
+            this.#wording_accessor_storage = (__runInitializers(this, _groupTrait_extraInitializers), __runInitializers(this, _wording_initializers, englishWording));
+            this.groups$ = (__runInitializers(this, _wording_extraInitializers), computed(() => {
                 return this.groupTrait.groupsDataList$.value;
             }));
             this.sortContext = createSortContext({
@@ -323,7 +394,7 @@ export const popSelectGroupByProperty = (target, group, ops) => {
         options: selectGroupByProperty(group, ops),
     });
 };
-export const popGroupSetting = (target, group, onBack) => {
+export const popGroupSetting = (target, group, onBack, wording) => {
     const view = group.view;
     const groupProperty = group.property$.value;
     if (groupProperty == null) {
@@ -361,7 +432,7 @@ export const popGroupSetting = (target, group, onBack) => {
                             options: selectGroupByProperty(group, {
                                 onSelect: () => {
                                     menuHandler.close();
-                                    popGroupSetting(target, group, onBack);
+                                    popGroupSetting(target, group, onBack, wording);
                                 },
                             }),
                         }),
@@ -371,7 +442,7 @@ export const popGroupSetting = (target, group, onBack) => {
                     items: group.isDateGroup$.value
                         ? dateGroupSettingItems(group, () => {
                             menuHandler.close();
-                            popGroupSetting(target, group, onBack);
+                            popGroupSetting(target, group, onBack, wording);
                         })
                         : [],
                 }),
@@ -384,6 +455,7 @@ export const popGroupSetting = (target, group, onBack) => {
                             menu => html ` <data-view-group-setting
                     @mouseenter="${() => menu.closeSubMenu()}"
                     .groupTrait="${group}"
+                    .wording="${wording ?? englishWording}"
                     .columnId="${groupProperty.id}"
                   ></data-view-group-setting>`,
                         ],
@@ -394,7 +466,8 @@ export const popGroupSetting = (target, group, onBack) => {
                             name: 'Remove grouping',
                             prefix: DeleteIcon(),
                             class: { 'delete-item': true },
-                            hide: () => !(view instanceof TableSingleView),
+                            // Every layout but the kanban, which is a grouping (B8).
+                            hide: () => view instanceof KanbanSingleView,
                             select: () => {
                                 group.changeGroup(undefined);
                             },

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

@@ -57,6 +57,25 @@ export declare class GroupTrait {
     } | undefined>;
     groupDataMap$: ReadonlySignal<Record<string, Group<unknown, unknown, Record<string, unknown>>> | undefined>;
     groupsDataList$: ReadonlySignal<Group<unknown, unknown, Record<string, unknown>>[] | undefined>;
+    /**
+     * The groups a view draws: every group but the ones its stored
+     * `groupProperties` hide (ADR 0035 §8, B8). `groupsDataList$` keeps them
+     * all, because a reorder or a card move writes an entry for every key and
+     * must not drop a hidden group's.
+     */
+    visibleGroups$: ReadonlySignal<Group<unknown, unknown, Record<string, unknown>>[] | undefined>;
+    /** The hidden groups, listed at the end of the view to be shown again. */
+    hiddenGroups$: ReadonlySignal<Group<unknown, unknown, Record<string, unknown>>[]>;
+    /** Whether the view stores hidden groups (every preset of 0.49 does). */
+    get groupsCanHide(): boolean;
+    /**
+     * Hide or show a group for everyone: a view setting, written to the view's
+     * `groupProperties` on the gesture, never when nothing changes.
+     */
+    groupHideSet(groupKey: string, hide: boolean): void;
+    /** Whether a group is folded: personal, on this device, never stored. */
+    collapsed$(groupKey: string): ReadonlySignal<boolean>;
+    collapsedSet(groupKey: string, collapsed: boolean): void;
     updateData: (data: NonNullable<unknown>) => void;
     get addGroup(): ((config: import("../index.js").WithCommonPropertyConfig<{
         text: string;
@@ -69,6 +88,9 @@ export declare class GroupTrait {
         sortRow: (groupKey: string, rows: Row[]) => Row[];
         changeGroupSort: (keys: string[]) => void;
         changeRowSort: (groupKeys: string[], groupKey: string, keys: string[]) => void;
+        /** Absent: the view hides no group (ops written before 0.49). */
+        groupHidden?: (groupKey: string) => boolean;
+        groupHideSet?: (groupKeys: string[], groupKey: string, hide: boolean) => void;
     });
     /**
      * Whether the current grouping reads a date property, and so offers grains

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

@@ -1,7 +1,9 @@
 import { insertPositionToIndex, } from '../../../affine-shared/utils/index.js';
 import { computed, effect, signal, } from '@preact/signals-core';
+import { traceViewEvent } from '../telemetry.js';
 import { createTraitKey } from '../traits/key.js';
 import { computedLock } from '../utils/lock.js';
+import { groupCollapsed$, groupCollapsedSet } from './collapsed-state.js';
 import { compareDateKeys } from './compare-date-keys.js';
 import { defaultGroupBy } from './default.js';
 import { findGroupByConfigByName, getGroupByService } from './matcher.js';
@@ -74,6 +76,28 @@ export const reorderGroupKeys = (keys, groupKey, position) => {
     return reordered;
 };
 export class GroupTrait {
+    /** Whether the view stores hidden groups (every preset of 0.49 does). */
+    get groupsCanHide() {
+        return this.ops.groupHideSet != null;
+    }
+    /**
+     * Hide or show a group for everyone: a view setting, written to the view's
+     * `groupProperties` on the gesture, never when nothing changes.
+     */
+    groupHideSet(groupKey, hide) {
+        const set = this.ops.groupHideSet;
+        const groups = this.groupsDataList$.value;
+        if (!set || !groups || this.view.readonly$.value)
+            return;
+        set(groups.map(group => group.key), groupKey, hide);
+    }
+    /** Whether a group is folded: personal, on this device, never stored. */
+    collapsed$(groupKey) {
+        return groupCollapsed$(this.view.id, groupKey);
+    }
+    collapsedSet(groupKey, collapsed) {
+        groupCollapsedSet(this.view.id, groupKey, collapsed);
+    }
     get addGroup() {
         return this.property$.value?.meta$.value?.config.addGroup;
     }
@@ -167,6 +191,27 @@ export class GroupTrait {
                 .map(key => groupMap[key])
                 .filter((v) => v != null);
         }), this.view.isLocked$);
+        /**
+         * The groups a view draws: every group but the ones its stored
+         * `groupProperties` hide (ADR 0035 §8, B8). `groupsDataList$` keeps them
+         * all, because a reorder or a card move writes an entry for every key and
+         * must not drop a hidden group's.
+         */
+        this.visibleGroups$ = computed(() => {
+            const groups = this.groupsDataList$.value;
+            const hidden = this.ops.groupHidden;
+            if (!groups || !hidden)
+                return groups;
+            return groups.filter(group => !hidden(group.key));
+        });
+        /** The hidden groups, listed at the end of the view to be shown again. */
+        this.hiddenGroups$ = computed(() => {
+            const groups = this.groupsDataList$.value;
+            const hidden = this.ops.groupHidden;
+            if (!groups || !hidden)
+                return [];
+            return groups.filter(group => hidden(group.key));
+        });
         this.updateData = (data) => {
             const property = this.property$.value;
             if (!property) {
@@ -199,10 +244,17 @@ export class GroupTrait {
      * year — keeping the reading direction.
      */
     changeGroupMode(modeName) {
-        const propertyId = this.property$.value?.id;
+        const property = this.property$.value;
+        const propertyId = property?.id;
         if (!propertyId) {
             return;
         }
+        if (this.groupBy$.value?.name !== modeName) {
+            traceViewEvent(this.view, 'DatabaseGroupChanged', {
+                groupBy: modeName,
+                propertyType: property.type$.value,
+            });
+        }
         this.ops.groupBySet({
             type: 'groupBy',
             columnId: propertyId,
@@ -248,6 +300,9 @@ export class GroupTrait {
     }
     changeGroup(columnId) {
         if (columnId == null) {
+            if (this.groupBy$.value) {
+                traceViewEvent(this.view, 'DatabaseGroupChanged', { groupBy: 'none' });
+            }
             this.ops.groupBySet(undefined);
             return;
         }
@@ -258,6 +313,12 @@ export class GroupTrait {
             if (groupBy) {
                 groupBy.sort = { desc: !this.sortAsc$.value };
             }
+            if (groupBy && columnId !== this.groupBy$.value?.columnId) {
+                traceViewEvent(this.view, 'DatabaseGroupChanged', {
+                    groupBy: groupBy.name,
+                    propertyType: column.type$.value,
+                });
+            }
             this.ops.groupBySet(groupBy);
         }
     }

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

@@ -1,11 +1,14 @@
 export * from './common/index.js';
 export * from './component/index.js';
 export { DataSourceBase } from './data-source/base.js';
+export * from './data-source/hydration.js';
 export { DataViewRootUILogic } from './data-view.js';
+export { isNewTabClick } from './utils/new-tab-click.js';
 export * from './filter/index.js';
 export * from './group-by/index.js';
 export * from './logical/index.js';
 export * from './property/index.js';
+export * from './telemetry.js';
 export type { DataViewSelection } from './types.js';
 export * from './types.js';
 export * from './utils/index.js';

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

@@ -1,11 +1,14 @@
 export * from './common/index.js';
 export * from './component/index.js';
 export { DataSourceBase } from './data-source/base.js';
+export * from './data-source/hydration.js';
 export { DataViewRootUILogic } from './data-view.js';
+export { isNewTabClick } from './utils/new-tab-click.js';
 export * from './filter/index.js';
 export * from './group-by/index.js';
 export * from './logical/index.js';
 export * from './property/index.js';
+export * from './telemetry.js';
 export * from './types.js';
 export * from './utils/index.js';
 export * from './view/index.js';

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

@@ -1,4 +1,5 @@
-import { ShadowlessElement } from '../../../std/index.js';
+import { type ChromeWording, type TranslationParams } from '../../../affine-shared/services/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../std/index.js';
 import { type ReadonlySignal } from '@preact/signals-core';
 import type { PropertyValues } from 'lit';
 import type { Cell } from '../view-manager/cell.js';
@@ -7,6 +8,19 @@ declare const BaseCellRenderer_base: typeof ShadowlessElement & import("../../..
 export declare abstract class BaseCellRenderer<RawValue = unknown, JsonValue = unknown, Data extends Record<string, unknown> = Record<string, unknown>> extends BaseCellRenderer_base implements DataViewCellLifeCycle, CellRenderProps<Data, RawValue, JsonValue> {
     get expose(): this;
     accessor cell: Cell<RawValue, JsonValue, Data>;
+    /**
+     * The editor the cell renders in, for its chrome wordings only; absent
+     * outside one (a test, a detached mount), and then every wording is its
+     * English fallback. Not `std`: database cells already read theirs from
+     * the data source's host.
+     */
+    accessor chromeStd: BlockStdScope;
+    /**
+     * A wording resolved here, while the cell is in the editor's DOM: the
+     * popups a cell opens (the tag menu, the date picker) render outside it
+     * and receive the resolved text.
+     */
+    readonly wording: (wording: ChromeWording, params?: TranslationParams) => string;
     readonly$: ReadonlySignal<boolean>;
     value$: ReadonlySignal<RawValue | undefined>;
     get property(): import("../index.js").Property<RawValue, JsonValue, Data>;

package/dist/_pkgs/data-view/core/property/base-cell.js

@@ -32,8 +32,10 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+import { fillPlaceholders, translateKey, } from '../../../affine-shared/services/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 } from '@preact/signals-core';
 import { property } from 'lit/decorators.js';
 let BaseCellRenderer = (() => {
@@ -41,6 +43,9 @@ let BaseCellRenderer = (() => {
     let _cell_decorators;
     let _cell_initializers = [];
     let _cell_extraInitializers = [];
+    let _chromeStd_decorators;
+    let _chromeStd_initializers = [];
+    let _chromeStd_extraInitializers = [];
     let _isEditing$_decorators;
     let _isEditing$_initializers = [];
     let _isEditing$_extraInitializers = [];
@@ -51,9 +56,11 @@ let BaseCellRenderer = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _cell_decorators = [property({ attribute: false })];
+            _chromeStd_decorators = [consume({ context: stdContext })];
             _isEditing$_decorators = [property({ attribute: false })];
             _selectCurrentCell_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _cell_decorators, { kind: "accessor", name: "cell", static: false, private: false, access: { has: obj => "cell" in obj, get: obj => obj.cell, set: (obj, value) => { obj.cell = value; } }, metadata: _metadata }, _cell_initializers, _cell_extraInitializers);
+            __esDecorate(this, null, _chromeStd_decorators, { kind: "accessor", name: "chromeStd", static: false, private: false, access: { has: obj => "chromeStd" in obj, get: obj => obj.chromeStd, set: (obj, value) => { obj.chromeStd = value; } }, metadata: _metadata }, _chromeStd_initializers, _chromeStd_extraInitializers);
             __esDecorate(this, null, _isEditing$_decorators, { kind: "accessor", name: "isEditing$", static: false, private: false, access: { has: obj => "isEditing$" in obj, get: obj => obj.isEditing$, set: (obj, value) => { obj.isEditing$ = value; } }, metadata: _metadata }, _isEditing$_initializers, _isEditing$_extraInitializers);
             __esDecorate(this, null, _selectCurrentCell_decorators, { kind: "accessor", name: "selectCurrentCell", static: false, private: false, access: { has: obj => "selectCurrentCell" in obj, get: obj => obj.selectCurrentCell, set: (obj, value) => { obj.selectCurrentCell = value; } }, metadata: _metadata }, _selectCurrentCell_initializers, _selectCurrentCell_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -64,6 +71,15 @@ let BaseCellRenderer = (() => {
         #cell_accessor_storage;
         get cell() { return this.#cell_accessor_storage; }
         set cell(value) { this.#cell_accessor_storage = value; }
+        #chromeStd_accessor_storage;
+        /**
+         * The editor the cell renders in, for its chrome wordings only; absent
+         * outside one (a test, a detached mount), and then every wording is its
+         * English fallback. Not `std`: database cells already read theirs from
+         * the data source's host.
+         */
+        get chromeStd() { return this.#chromeStd_accessor_storage; }
+        set chromeStd(value) { this.#chromeStd_accessor_storage = value; }
         get property() {
             return this.cell.property;
         }
@@ -149,9 +165,18 @@ let BaseCellRenderer = (() => {
         constructor() {
             super(...arguments);
             this.#cell_accessor_storage = __runInitializers(this, _cell_initializers, void 0);
-            this.readonly$ = (__runInitializers(this, _cell_extraInitializers), computed(() => {
+            this.#chromeStd_accessor_storage = (__runInitializers(this, _cell_extraInitializers), __runInitializers(this, _chromeStd_initializers, void 0));
+            /**
+             * A wording resolved here, while the cell is in the editor's DOM: the
+             * popups a cell opens (the tag menu, the date picker) render outside it
+             * and receive the resolved text.
+             */
+            this.wording = (__runInitializers(this, _chromeStd_extraInitializers), (wording, params) => this.chromeStd
+                ? translateKey(this.chromeStd, ...wording, params)
+                : fillPlaceholders(wording[1], params));
+            this.readonly$ = computed(() => {
                 return this.cell.property.readonly$.value;
-            }));
+            });
             this.value$ = computed(() => {
                 return this.cell.value$.value;
             });

package/dist/_pkgs/data-view/core/property/standalone-cell.d.ts

@@ -3,6 +3,7 @@ import { ShadowlessElement } from '../../../std/index.js';
 import type { ExtensionType } from '../../../store/index.js';
 import { type ReadonlySignal } from '@preact/signals-core';
 import { nothing } from 'lit';
+import type { TagOptionEdits } from '../component/tags/multi-tag-select.js';
 import type { DatabaseFlags } from '../types.js';
 import type { Cell } from '../view-manager/cell.js';
 import type { PropertyMetaConfig } from './property-config.js';
@@ -17,7 +18,7 @@ import type { PropertyMetaConfig } from './property-config.js';
  * for one value would be a second store. What the presets actually read is
  * small, and this seam provides exactly that and nothing more:
  * - of the property: `name$`, `data$`, `type$`, `readonly$`, `dataUpdate`,
- *   `renderer$`, `meta$`, and `dataCanSet`;
+ *   `renderer$`, `meta$`, `dataCanSet` and `optionEdits`;
  * - of the view: `featureFlags$` (the number format), `serviceGet` (the link
  *   cell's editor host) and `readonly$`;
  * - of the cell: `value$` and `valueSet`, with the JSON value the raw one,
@@ -40,6 +41,12 @@ export interface StandaloneCellSource<RawValue = unknown, Data extends Record<st
      * renames, recolours, reorders or deletes none.
      */
     dataSet?(data: Data): void;
+    /**
+     * Which option edits `dataSet` stands for; absent, all. `'create-rename'`:
+     * a select creates and renames options and deletes, recolours and
+     * reorders none (`TagOptionEdits`).
+     */
+    readonly optionEdits?: TagOptionEdits;
     /** The view's flags (`enable_number_formatting`); absent, all off. */
     readonly featureFlags$?: ReadonlySignal<DatabaseFlags>;
     /** What `view.serviceGet` answers; absent, nothing. */
@@ -86,6 +93,13 @@ export declare class StandaloneCellHost extends StandaloneCellHost_base {
     accessor placeholder: string;
     /** Draws the value and opens no editor. */
     accessor readonly: boolean;
+    /**
+     * Told when the editor opens and closes. The gallery and list presets host
+     * a view's own cells here and lock the view's rows while one edits, as a
+     * table or kanban cell does (`view.lockRows`), so a value that changes the
+     * sort or the filter does not move or drop the row under the editor.
+     */
+    accessor onEditingChange: ((editing: boolean) => void) | undefined;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/_pkgs/data-view/core/property/standalone-cell.js

@@ -83,6 +83,7 @@ class StandaloneCell {
             meta$: signal(meta),
             renderer$: signal(meta.renderer.cellRenderer),
             dataCanSet: !!source.dataSet,
+            optionEdits: source.optionEdits,
             dataUpdate: (updater) => {
                 if (!source.dataSet)
                     return;
@@ -153,15 +154,20 @@ let StandaloneCellHost = (() => {
     let _readonly_decorators;
     let _readonly_initializers = [];
     let _readonly_extraInitializers = [];
+    let _onEditingChange_decorators;
+    let _onEditingChange_initializers = [];
+    let _onEditingChange_extraInitializers = [];
     return class StandaloneCellHost extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _cell_decorators = [property({ attribute: false })];
             _placeholder_decorators = [property({ attribute: false })];
             _readonly_decorators = [property({ attribute: false })];
+            _onEditingChange_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _cell_decorators, { kind: "accessor", name: "cell", static: false, private: false, access: { has: obj => "cell" in obj, get: obj => obj.cell, set: (obj, value) => { obj.cell = value; } }, metadata: _metadata }, _cell_initializers, _cell_extraInitializers);
             __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
             __esDecorate(this, null, _readonly_decorators, { kind: "accessor", name: "readonly", static: false, private: false, access: { has: obj => "readonly" in obj, get: obj => obj.readonly, set: (obj, value) => { obj.readonly = value; } }, metadata: _metadata }, _readonly_initializers, _readonly_extraInitializers);
+            __esDecorate(this, null, _onEditingChange_decorators, { kind: "accessor", name: "onEditingChange", static: false, private: false, access: { has: obj => "onEditingChange" in obj, get: obj => obj.onEditingChange, set: (obj, value) => { obj.onEditingChange = value; } }, metadata: _metadata }, _onEditingChange_initializers, _onEditingChange_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = css `
@@ -199,6 +205,7 @@ let StandaloneCellHost = (() => {
             if (!cell?.beforeEnterEditMode())
                 return;
             this.isEditing$.value = true;
+            this.onEditingChange?.(true);
             requestAnimationFrame(() => {
                 if (this.isEditing$.peek())
                     cell.afterEnterEditingMode();
@@ -217,6 +224,7 @@ let StandaloneCellHost = (() => {
                 this._exiting = false;
             }
             this.isEditing$.value = false;
+            this.onEditingChange?.(false);
         }
         connectedCallback() {
             super.connectedCallback();
@@ -285,6 +293,15 @@ let StandaloneCellHost = (() => {
         /** Draws the value and opens no editor. */
         get readonly() { return this.#readonly_accessor_storage; }
         set readonly(value) { this.#readonly_accessor_storage = value; }
+        #onEditingChange_accessor_storage;
+        /**
+         * Told when the editor opens and closes. The gallery and list presets host
+         * a view's own cells here and lock the view's rows while one edits, as a
+         * table or kanban cell does (`view.lockRows`), so a value that changes the
+         * sort or the filter does not move or drop the row under the editor.
+         */
+        get onEditingChange() { return this.#onEditingChange_accessor_storage; }
+        set onEditingChange(value) { this.#onEditingChange_accessor_storage = value; }
         constructor() {
             super(...arguments);
             this._cell$ = signal();
@@ -299,7 +316,8 @@ let StandaloneCellHost = (() => {
             this.#cell_accessor_storage = __runInitializers(this, _cell_initializers, void 0);
             this.#placeholder_accessor_storage = (__runInitializers(this, _cell_extraInitializers), __runInitializers(this, _placeholder_initializers, ''));
             this.#readonly_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _readonly_initializers, false));
-            __runInitializers(this, _readonly_extraInitializers);
+            this.#onEditingChange_accessor_storage = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _onEditingChange_initializers, undefined));
+            __runInitializers(this, _onEditingChange_extraInitializers);
         }
     };
 })();

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

@@ -0,0 +1,16 @@
+import type { DatabaseAllEvents, DatabaseAllViewEvents, EventTraceFn } from '../../affine-shared/services/index.js';
+import type { SingleView } from './view-manager/single-view.js';
+/**
+ * The tracer a database host gives its data source (`serviceSet`), the same
+ * function it passes the root as `config.eventTrace`. It exists for the
+ * gestures whose code holds a view or a trait but no UI logic (the group-by
+ * menus build from a `GroupTrait`): they report through the view's source.
+ * Absent, nothing is reported (a standalone data view, a test).
+ */
+export declare const DataViewEventTraceKey: import("../../global/di/types.js").ServiceIdentifier<EventTraceFn<DatabaseAllEvents>> & (<U extends EventTraceFn<DatabaseAllEvents> = EventTraceFn<DatabaseAllEvents>>(variant: import("../../global/di/types.js").ServiceVariant) => import("../../global/di/types.js").ServiceIdentifier<U>);
+/**
+ * Report a view-level event from code that only holds the view, with the
+ * same `viewId` / `viewType` params `DataViewUILogicBase.eventTrace` adds.
+ * Ids only (telemetry README, "Databases").
+ */
+export declare function traceViewEvent<K extends keyof DatabaseAllViewEvents>(view: SingleView, key: K, params: DatabaseAllViewEvents[K]): void;

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

@@ -0,0 +1,22 @@
+import { createIdentifier } from '../../global/di/index.js';
+/**
+ * The tracer a database host gives its data source (`serviceSet`), the same
+ * function it passes the root as `config.eventTrace`. It exists for the
+ * gestures whose code holds a view or a trait but no UI logic (the group-by
+ * menus build from a `GroupTrait`): they report through the view's source.
+ * Absent, nothing is reported (a standalone data view, a test).
+ */
+export const DataViewEventTraceKey = createIdentifier('data-view-event-trace');
+/**
+ * Report a view-level event from code that only holds the view, with the
+ * same `viewId` / `viewType` params `DataViewUILogicBase.eventTrace` adds.
+ * Ids only (telemetry README, "Databases").
+ */
+export function traceViewEvent(view, key, params) {
+    const trace = view.manager.dataSource.serviceGet(DataViewEventTraceKey);
+    trace?.(key, {
+        ...params,
+        viewId: view.id,
+        viewType: view.type,
+    });
+}

package/dist/_pkgs/data-view/core/utils/new-tab-click.d.ts

@@ -0,0 +1,2 @@
+/** A click that asks for a new tab: Ctrl on Windows and Linux, Cmd on macOS. */
+export declare function isNewTabClick(event: Pick<MouseEvent, 'ctrlKey' | 'metaKey'>): boolean;

package/dist/_pkgs/data-view/core/utils/new-tab-click.js

@@ -0,0 +1,4 @@
+/** A click that asks for a new tab: Ctrl on Windows and Linux, Cmd on macOS. */
+export function isNewTabClick(event) {
+    return event.ctrlKey || event.metaKey;
+}