@formicoidea/labre-core 0.47.1 → 0.49.0

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) {
@@ -77,7 +80,7 @@ class TagManager {
     constructor(ops) {
         this.ops = ops;
         this.changeTag = (option) => {
-            this.ops.onOptionsChange(this.ops.options.value.map(item => {
+            this.ops.onOptionsChange?.(this.ops.options.value.map(item => {
                 if (item.id === option.id) {
                     return {
                         ...item,
@@ -90,7 +93,7 @@ class TagManager {
         this.color$ = signal(getTagColor());
         this.createOption = () => {
             const value = this.text$.value.trim();
-            if (value === '')
+            if (value === '' || !this.ops.onOptionsChange)
                 return;
             const id = nanoid();
             this.ops.onOptionsChange([
@@ -109,7 +112,7 @@ class TagManager {
             }
         };
         this.deleteOption = (id) => {
-            this.ops.onOptionsChange(this.ops.options.value.filter(item => item.id !== id));
+            this.ops.onOptionsChange?.(this.ops.options.value.filter(item => item.id !== id));
         };
         this.filteredOptions$ = computed(() => {
             let matched = false;
@@ -129,7 +132,7 @@ class TagManager {
                     matched = true;
                 }
             }
-            if (this.text$.value && !matched) {
+            if (this.text$.value && !matched && this.ops.onOptionsChange) {
                 options.push({
                     id: 'create',
                     color: this.color$.value,
@@ -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}"
@@ -246,11 +259,17 @@ let MultiTagSelect = (() => {
     </div>`;
         }
         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>
-      <div class="${selectOptionsTipsStyle}">Select tag or create one</div>
+      ${editable
+                ? html `<div class="${selectOptionsTipsStyle}">
+            ${this.say(TAG_SELECT_TIP)}
+          </div>`
+                : nothing}
       <div data-testid="tag-option-list" class="${selectOptionsContainerStyle}">
         ${repeat(this.tagManager.filteredOptions$.value, select => select.id, (select, index) => {
                 const isSelected = index === this.selectedIndex$.value;
@@ -267,7 +286,9 @@ let MultiTagSelect = (() => {
                 };
                 return html `
               <div
-                ${!select.isCreate ? sortable(select.id) : nothing}
+                ${reorderable && !select.isCreate
+                    ? sortable(select.id)
+                    : nothing}
                 class="${classes}"
                 @mouseenter="${mouseenter}"
                 @click="${select.select}"
@@ -275,17 +296,19 @@ let MultiTagSelect = (() => {
                 <div class="${selectOptionContentStyle}">
                   ${select.isCreate
                     ? html ` <div class="${selectOptionNewIconStyle}">
-                        Create
+                        ${this.say(TAG_SELECT_CREATE)}
                       </div>`
-                    : html `
-                        <div
-                          ${dragHandler(select.id)}
-                          class="${selectOptionDragHandlerStyle}"
-                        ></div>
-                      `}
+                    : reorderable
+                        ? html `
+                          <div
+                            ${dragHandler(select.id)}
+                            class="${selectOptionDragHandlerStyle}"
+                          ></div>
+                        `
+                        : nothing}
                   ${this.renderTag(select.value, select.color)}
                 </div>
-                ${!select.isCreate
+                ${editable && !select.isCreate
                     ? html ` <div
                       class="${selectOptionIconStyle}"
                       @click="${clickOption}"
@@ -343,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; }
@@ -352,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) => {
@@ -360,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,
@@ -392,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: () => {
@@ -445,7 +484,10 @@ let MultiTagSelect = (() => {
                 onDragEnd: evt => {
                     const over = evt.over;
                     const activeId = evt.active.id;
-                    if (over && over.id !== activeId) {
+                    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);
@@ -470,18 +512,21 @@ let MultiTagSelect = (() => {
             this.#mode_accessor_storage = __runInitializers(this, _mode_initializers, 'multi');
             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, void 0));
-            this.#options_accessor_storage = (__runInitializers(this, _onOptionsChange_extraInitializers), __runInitializers(this, _options_initializers, void 0));
+            this.#onOptionsChange_accessor_storage = (__runInitializers(this, _onComplete_extraInitializers), __runInitializers(this, _onOptionsChange_initializers, undefined));
+            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;
     }
@@ -518,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"
               />
@@ -539,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>
@@ -576,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);
     }

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

@@ -0,0 +1,44 @@
+import type { ReadonlySignal } from '@preact/signals-core';
+/**
+ * Cell hydration (ADR 0035 §9e, issue B2): a widening of the data-source
+ * contract, not a seam.
+ *
+ * A host source whose values arrive after its rows (Labre keeps them in SQL,
+ * labre ADR-0047) says, per cell, whether the value it answers is the real one
+ * yet, and, for the whole source, whether values are still loading or failed.
+ * Every member is optional: a source that says nothing is `ready` at once,
+ * which is the inline source and every 0.48 host source, unchanged.
+ *
+ * Nothing is written in any state. A cell that is not `ready` mounts no
+ * renderer and refuses `valueSet`, so neither the user nor a paste, a fill or
+ * a kanban drop can write over a value the source has not delivered.
+ */
+export type CellStatus = 'ready' | 'pending' | 'error';
+export type ValuesStatus = 'loading' | 'ready' | 'error';
+export interface ValuesState {
+    readonly status: ValuesStatus;
+    /** `Date.now()` when the source entered `status`. */
+    readonly since: number;
+}
+export interface DataSourceHydration {
+    cellStatus?(rowId: string, propertyId: string): CellStatus;
+    valuesState$?: ReadonlySignal<ValuesState>;
+    /** Present when the source can try again after an `error`. */
+    retryValues?(): void;
+}
+export declare const VALUES_READY: ValuesState;
+/** How long values may load before a banner says so (REQ-DB-12). */
+export declare const VALUES_SLOW_AFTER_MS = 3000;
+export declare function cellStatusOf(source: DataSourceHydration, rowId: string, propertyId: string): CellStatus;
+export declare function valuesStateOf(source: DataSourceHydration): ValuesState;
+/** What a count shows while values are not ready. */
+export declare const VALUES_PENDING_MARK = "\u2026";
+/** Counts (group headers, column statistics) show an ellipsis until `true`. */
+export declare function valuesReady(source: DataSourceHydration): boolean;
+export type ValuesBanner = 'none' | 'slow' | 'error';
+/**
+ * Which banner a view shows: none while values load for less than
+ * {@link VALUES_SLOW_AFTER_MS}, `slow` after, `error` as soon as loading
+ * failed. Pure, so the 3 s rule is tested without a timer.
+ */
+export declare function valuesBannerOf(state: ValuesState, now: number): ValuesBanner;

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

@@ -0,0 +1,31 @@
+export const VALUES_READY = Object.freeze({
+    status: 'ready',
+    since: 0,
+});
+/** How long values may load before a banner says so (REQ-DB-12). */
+export const VALUES_SLOW_AFTER_MS = 3000;
+export function cellStatusOf(source, rowId, propertyId) {
+    return source.cellStatus?.(rowId, propertyId) ?? 'ready';
+}
+export function valuesStateOf(source) {
+    return source.valuesState$?.value ?? VALUES_READY;
+}
+/** What a count shows while values are not ready. */
+export const VALUES_PENDING_MARK = '…';
+/** Counts (group headers, column statistics) show an ellipsis until `true`. */
+export function valuesReady(source) {
+    return valuesStateOf(source).status === 'ready';
+}
+/**
+ * Which banner a view shows: none while values load for less than
+ * {@link VALUES_SLOW_AFTER_MS}, `slow` after, `error` as soon as loading
+ * failed. Pure, so the 3 s rule is tested without a timer.
+ */
+export function valuesBannerOf(state, now) {
+    if (state.status === 'error')
+        return 'error';
+    if (state.status === 'loading' && now - state.since >= VALUES_SLOW_AFTER_MS) {
+        return 'slow';
+    }
+    return 'none';
+}

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

@@ -1 +1,2 @@
 export * from './base.js';
+export * from './hydration.js';

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

@@ -1 +1,2 @@
 export * from './base.js';
+export * from './hydration.js';

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

@@ -2,6 +2,7 @@ import type { DatabaseAllEvents, EventTraceFn } from '../../affine-shared/servic
 import type { DisposableMember } from '../../global/disposable/index.js';
 import { type Clipboard, type DndController, type EventName, ShadowlessElement, type UIEventHandler } from '../../std/index.js';
 import { type ReadonlySignal } from '@preact/signals-core';
+import { type TemplateResult } from 'lit';
 import type { DataSource } from './data-source/index.js';
 import type { DataViewSelection } from './types.js';
 import type { DataViewUILogicBase } from './view/data-view-base.js';
@@ -22,10 +23,22 @@ export type DataViewRendererConfig = {
     selection$: ReadonlySignal<DataViewSelection | undefined>;
     setSelection: (selection: DataViewSelection | undefined) => void;
     eventTrace: EventTraceFn<DatabaseAllEvents>;
+    /**
+     * Drawn instead of the current view, header widget included, when it
+     * returns something (a source the view names that the host cannot resolve,
+     * ADR 0035 §7): the caller draws what of its header still makes sense.
+     * Absent: every view draws as in 0.48.
+     */
+    viewPlaceholder?: (logic: DataViewUILogicBase) => TemplateResult | undefined;
     detailPanelConfig: {
         openDetailPanel: (target: HTMLElement, data: {
             view: SingleView;
             rowId: string;
+            /**
+             * A Ctrl/Cmd click: the host may open the row in a new tab (ADR 0035
+             * §9a). Absent for a gesture with no such modifier.
+             */
+            newTab?: boolean;
         }) => Promise<void>;
     };
 };
@@ -45,13 +58,19 @@ export declare class DataViewRootUILogic {
     readonly currentViewId$: ReadonlySignal<string | undefined>;
     readonly currentView$: ReadonlySignal<DataViewUILogicBase<SingleView, DataViewSelection> | undefined>;
     focusFirstCell: () => void;
+    /**
+     * The one way a view opens a row, whatever its preset (the database block
+     * routes it to the host's opener or to its own detail panel, ADR 0035 §9a).
+     * `newTab` says the gesture asked for a new tab (`isNewTabClick`).
+     */
     openDetailPanel: (ops: {
         view: SingleView;
         rowId: string;
+        newTab?: boolean;
         onClose?: () => void;
     }) => void;
     setupViewChangeListener(): () => void;
-    render(): import("lit-html").TemplateResult;
+    render(): TemplateResult;
 }
 declare const DataViewRootUI_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class DataViewRootUI extends DataViewRootUI_base {
@@ -62,10 +81,11 @@ export declare class DataViewRootUI extends DataViewRootUI_base {
     openDetailPanel: (ops: {
         view: SingleView;
         rowId: string;
+        newTab?: boolean;
         onClose?: () => void;
     }) => void;
     connectedCallback(): void;
-    render(): import("lit-html").TemplateResult | undefined;
+    render(): TemplateResult | undefined;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -110,6 +110,11 @@ export class DataViewRootUILogic {
         this.focusFirstCell = () => {
             this.currentView$.value?.focusFirstCell();
         };
+        /**
+         * The one way a view opens a row, whatever its preset (the database block
+         * routes it to the host's opener or to its own detail panel, ADR 0035 §9a).
+         * `newTab` says the gesture asked for a new tab (`isNewTabClick`).
+         */
         this.openDetailPanel = (ops) => {
             const openDetailPanel = this.config.detailPanelConfig.openDetailPanel;
             const target = this.dataViewRenderer;
@@ -117,6 +122,7 @@ export class DataViewRootUILogic {
                 openDetailPanel(target, {
                     view: ops.view,
                     rowId: ops.rowId,
+                    ...(ops.newTab ? { newTab: true } : {}),
                 })
                     .catch(console.error)
                     .finally(ops.onClose);
@@ -197,6 +203,14 @@ let DataViewRootUI = (() => {
             if (!currentView) {
                 return;
             }
+            const placeholder = this.logic.config.viewPlaceholder?.(currentView);
+            if (placeholder) {
+                return html `
+        <div style="display: contents" class="${containerClass}">
+          ${placeholder}
+        </div>
+      `;
+            }
             return html `
       <div style="display: contents" class="${containerClass}">
         ${renderUniLit(currentView.renderer, {

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

@@ -6,6 +6,7 @@ import { DataViewRootUI } from './data-view.js';
 import { RecordDetail } from './detail/detail.js';
 import { RecordField } from './detail/field.js';
 import { VariableRefView } from './expression/ref/ref-view.js';
+import { DataViewHiddenGroups } from './group-by/group-visibility.js';
 import { BooleanGroupView } from './group-by/renderer/boolean-group.js';
 import { DateGroupView } from './group-by/renderer/date-group.js';
 import { NumberGroupView } from './group-by/renderer/number-group.js';
@@ -13,6 +14,7 @@ import { SelectGroupView } from './group-by/renderer/select-group.js';
 import { StringGroupView } from './group-by/renderer/string-group.js';
 import { GroupSetting } from './group-by/setting.js';
 import { AffineLitIcon, UniAnyRender, UniLit } from './index.js';
+import { StandaloneCellHost } from './property/standalone-cell.js';
 import { AnyRender } from './utils/uni-component/render-template.js';
 export function coreEffects() {
     customElements.define('affine-data-view-renderer', DataViewRootUI);
@@ -26,6 +28,7 @@ export function coreEffects() {
     customElements.define('data-view-group-title-number-view', NumberGroupView);
     customElements.define('affine-lit-icon', AffineLitIcon);
     customElements.define('data-view-group-setting', GroupSetting);
+    customElements.define('dv-hidden-groups', DataViewHiddenGroups);
     customElements.define('affine-multi-tag-select', MultiTagSelect);
     customElements.define('data-view-group-title-boolean-view', BooleanGroupView);
     customElements.define('data-view-group-title-date-view', DateGroupView);
@@ -34,4 +37,5 @@ export function coreEffects() {
     customElements.define('uni-any-render', UniAnyRender);
     customElements.define('variable-ref-view', VariableRefView);
     customElements.define('affine-data-view-record-detail', RecordDetail);
+    customElements.define('dv-standalone-cell', StandaloneCellHost);
 }

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

@@ -0,0 +1,3 @@
+import { type ReadonlySignal } from '@preact/signals-core';
+export declare function groupCollapsed$(viewId: string, groupKey: string): ReadonlySignal<boolean>;
+export declare function groupCollapsedSet(viewId: string, groupKey: string, collapsed: boolean): void;

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

@@ -0,0 +1,59 @@
+import { signal } from '@preact/signals-core';
+/**
+ * Whether a group of a view is folded, for every preset (ADR 0035 §8, B8,
+ * PRD REQ-DB-16). Personal and per device: kept in `localStorage`, never in
+ * the document, like the local hide of ADR 0031. A host seam was not chosen:
+ * it would be a row in the seams table forever for a device ergonomic, and a
+ * fold that follows the user across devices is not asked for.
+ *
+ * Only a folded group has an entry (`'1'`); unfolding removes it. Any other
+ * value, a storage that throws (private mode, blocked site data) or no
+ * storage at all reads as unfolded. One signal per key, shared by every
+ * element drawing that group, so a fold is seen everywhere at once.
+ *
+ * Until 0.49 the table kept this in `sessionStorage` under
+ * `affine:table-group:*`; those entries were per tab and are not read back.
+ */
+const PREFIX = 'labre:data-view:group-collapsed:';
+const storageKey = (viewId, groupKey) => `${PREFIX}${viewId}:${groupKey}`;
+const states = new Map();
+function readStored(key) {
+    try {
+        return globalThis.localStorage?.getItem(key) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+function writeStored(key, collapsed) {
+    try {
+        if (collapsed) {
+            globalThis.localStorage?.setItem(key, '1');
+        }
+        else {
+            globalThis.localStorage?.removeItem(key);
+        }
+    }
+    catch {
+        // A storage that refuses keeps the fold for this session only.
+    }
+}
+function stateOf(viewId, groupKey) {
+    const key = storageKey(viewId, groupKey);
+    let state = states.get(key);
+    if (!state) {
+        state = signal(readStored(key));
+        states.set(key, state);
+    }
+    return state;
+}
+export function groupCollapsed$(viewId, groupKey) {
+    return stateOf(viewId, groupKey);
+}
+export function groupCollapsedSet(viewId, groupKey, collapsed) {
+    const state = stateOf(viewId, groupKey);
+    if (state.peek() === collapsed)
+        return;
+    state.value = collapsed;
+    writeStored(storageKey(viewId, groupKey), collapsed);
+}

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

@@ -0,0 +1,21 @@
+import type { GroupProperty } from '../common/types.js';
+import type { Row } from '../view-manager/row.js';
+/**
+ * The group ops every grouped preset hands its `GroupTrait`, over the view's
+ * stored `groupProperties` (the shape table and kanban have always stored:
+ * `{ key, hide, manuallyCardSort }`). One copy for table, kanban, gallery and
+ * list (ADR 0035 §8, B8), so a hidden group and a manual order read and write
+ * the same way in every view.
+ *
+ * Every write lists the entry of every group key it is given, so a hidden
+ * group keeps its `hide` and its card order through a reorder; nothing is
+ * written when the value would not change.
+ */
+export declare const groupPropertiesOps: (read: () => GroupProperty[], write: (groupProperties: GroupProperty[]) => void) => {
+    sortGroup: (keys: string[]) => string[];
+    sortRow: (key: string, rows: Row[]) => Row[];
+    changeGroupSort: (keys: string[]) => void;
+    changeRowSort: (groupKeys: string[], groupKey: string, keys: string[]) => void;
+    groupHidden: (key: string) => boolean;
+    groupHideSet: (groupKeys: string[], groupKey: string, hide: boolean) => void;
+};