@formicoidea/labre-core 0.47.1 → 0.49.0

package/dist/_pkgs/data-view/view-presets/gallery/define.js

@@ -0,0 +1,15 @@
+import { viewType } from '../../core/view/data-view.js';
+import { VIEW_NAME_GALLERY } from '../../translations.js';
+import { FlatSingleView, flatViewDefaultData, } from '../flat/flat-view-manager.js';
+export const galleryViewType = viewType('gallery');
+export class GallerySingleView extends FlatSingleView {
+    get type() {
+        return this.data$.value?.mode ?? galleryViewType.type;
+    }
+}
+export const galleryViewModel = galleryViewType.createModel({
+    defaultName: VIEW_NAME_GALLERY[1],
+    defaultNameKey: VIEW_NAME_GALLERY[0],
+    dataViewManager: GallerySingleView,
+    defaultData: flatViewDefaultData,
+});

package/dist/_pkgs/data-view/view-presets/gallery/effect.d.ts

@@ -0,0 +1 @@
+export declare function galleryEffects(): void;

package/dist/_pkgs/data-view/view-presets/gallery/effect.js

@@ -0,0 +1,4 @@
+import { GalleryViewUI } from './gallery-view.js';
+export function galleryEffects() {
+    customElements.define('dv-gallery-view-ui', GalleryViewUI);
+}

package/dist/_pkgs/data-view/view-presets/gallery/gallery-view.d.ts

@@ -0,0 +1,27 @@
+import { FlatViewUI, FlatViewUILogic } from '../flat/flat-view-ui.js';
+import type { GallerySingleView } from './define.js';
+/**
+ * The gallery preset (ADR 0035 §1, B6): one card per row, its title then its
+ * visible properties, each drawn by the cell a table draws. A card is a
+ * kanban card out of its column, flat as every document surface is (DESIGN.md,
+ * the Flat-Page Rule): a hairline, no shadow.
+ *
+ * ponytail: no cover image on the card. The product asks for none in v2.0
+ * (PRD REQ-DB-1 to 16); the upgrade is a stored `header.coverColumn`, as the
+ * kanban's, drawn above the title with the image property's renderer.
+ */
+export declare class GalleryViewUILogic extends FlatViewUILogic<GallerySingleView> {
+    renderer: import("../../../affine-shared/types/uni-component.js").UniComponent<unknown, {}>;
+}
+export declare class GalleryViewUI extends FlatViewUI<GalleryViewUILogic> {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    private renderCard;
+    private renderNewCard;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dv-gallery-view-ui': GalleryViewUI;
+    }
+}

package/dist/_pkgs/data-view/view-presets/gallery/gallery-view.js

@@ -0,0 +1,179 @@
+import { PlusIcon } from '@blocksuite/icons/lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, nothing, unsafeCSS } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { groupToggleStyles } from '../../core/group-by/group-visibility.js';
+import { createUniComponentFromWebComponent } from '../../core/utils/uni-component/uni-component.js';
+import { DATA_VIEW_NEW_PAGE } from '../../translations.js';
+import { flatGroupStyles, flatOpenButtonStyles, FlatViewUI, FlatViewUILogic, } from '../flat/flat-view-ui.js';
+/**
+ * The gallery preset (ADR 0035 §1, B6): one card per row, its title then its
+ * visible properties, each drawn by the cell a table draws. A card is a
+ * kanban card out of its column, flat as every document surface is (DESIGN.md,
+ * the Flat-Page Rule): a hairline, no shadow.
+ *
+ * ponytail: no cover image on the card. The product asks for none in v2.0
+ * (PRD REQ-DB-1 to 16); the upgrade is a stored `header.coverColumn`, as the
+ * kanban's, drawn above the title with the image property's renderer.
+ */
+export class GalleryViewUILogic extends FlatViewUILogic {
+    constructor() {
+        super(...arguments);
+        this.renderer = createUniComponentFromWebComponent(GalleryViewUI);
+    }
+}
+export class GalleryViewUI extends FlatViewUI {
+    static { this.styles = [
+        flatOpenButtonStyles,
+        flatGroupStyles,
+        groupToggleStyles,
+        css `
+      dv-gallery-view-ui {
+        display: block;
+      }
+
+      .dv-gallery {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        gap: 12px;
+        padding: 4px 0 8px;
+      }
+
+      .dv-gallery-card {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+        min-height: 72px;
+        padding: 8px;
+        box-sizing: border-box;
+        border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
+        border-radius: 8px;
+        background-color: var(--affine-background-primary-color);
+        cursor: pointer;
+      }
+
+      .dv-gallery-card-title {
+        padding: 2px 32px 4px 4px;
+        font-weight: 500;
+        font-size: var(--data-view-cell-text-size);
+        line-height: var(--data-view-cell-text-line-height);
+        overflow: hidden;
+      }
+
+      .dv-gallery-card-property {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-height: 28px;
+        padding: 0 4px;
+        border-radius: 4px;
+        overflow: hidden;
+      }
+
+      .dv-gallery-card-property-icon {
+        display: flex;
+        flex-shrink: 0;
+        color: var(--affine-icon-color);
+      }
+
+      .dv-gallery-card-property-icon svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      .dv-gallery-card-property dv-standalone-cell {
+        flex: 1;
+      }
+
+      .dv-gallery-card:focus-within .dv-flat-open {
+        visibility: visible;
+      }
+
+      .dv-gallery-new {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        min-height: 72px;
+        border: 1px dashed ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
+        border-radius: 8px;
+        background: transparent;
+        color: var(--affine-text-secondary-color);
+        font-family: inherit;
+        font-size: var(--data-view-cell-text-size);
+        cursor: pointer;
+      }
+
+      .dv-gallery-new svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      @media (hover: hover) {
+        .dv-gallery-card:hover,
+        .dv-gallery-new:hover,
+        .dv-gallery-card-property:hover {
+          background-color: var(--affine-hover-color);
+        }
+
+        .dv-gallery-card:hover .dv-flat-open {
+          visibility: visible;
+        }
+      }
+
+      @media (pointer: coarse) {
+        .dv-gallery-card-property {
+          min-height: 44px;
+        }
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.dataset.testid = 'dv-gallery-view';
+    }
+    renderCard(rowId) {
+        const view = this.view;
+        const title = view.titleProperty$.value;
+        return html `<div
+      class="dv-gallery-card"
+      data-testid="dv-gallery-card"
+      data-row-id="${rowId}"
+      @click="${this.onRowClick}"
+    >
+      ${title
+            ? html `<div class="dv-gallery-card-title">
+            ${this.renderCell(title, rowId, true)}
+          </div>`
+            : nothing}
+      ${repeat(view.bodyProperties$.value, property => property.id, property => html `<div class="dv-gallery-card-property">
+            <uni-lit
+              class="dv-gallery-card-property-icon"
+              .uni="${property.icon}"
+            ></uni-lit>
+            ${this.renderCell(property, rowId)}
+          </div>`)}
+      ${this.renderOpenButton(rowId)}
+    </div>`;
+    }
+    renderNewCard(groupKey) {
+        if (this.view.readonly$.value)
+            return nothing;
+        return html `<button
+      class="dv-gallery-new"
+      data-testid="dv-flat-new"
+      @click="${() => this.logic.addRow('end', groupKey)}"
+    >
+      ${PlusIcon()}<span>${this.wording(DATA_VIEW_NEW_PAGE)}</span>
+    </button>`;
+    }
+    render() {
+        return html `${this.renderHeaderWidget()}
+    ${this.renderGrouped((rows, group) => html `<div class="dv-gallery">
+          ${repeat(rows, row => row.rowId, row => this.renderCard(row.rowId))}
+          ${this.renderNewCard(group?.key)}
+        </div>`)}`;
+    }
+}

package/dist/_pkgs/data-view/view-presets/gallery/index.d.ts

@@ -0,0 +1,2 @@
+export * from './define.js';
+export * from './renderer.js';

package/dist/_pkgs/data-view/view-presets/gallery/index.js

@@ -0,0 +1,2 @@
+export * from './define.js';
+export * from './renderer.js';

package/dist/_pkgs/data-view/view-presets/gallery/renderer.d.ts

@@ -0,0 +1 @@
+export declare const galleryViewMeta: import("../../index.js").ViewMeta<"gallery", import("./define.js").GalleryViewData>;

package/dist/_pkgs/data-view/view-presets/gallery/renderer.js

@@ -0,0 +1,11 @@
+import { createIcon } from '../../core/utils/uni-icon.js';
+import { galleryViewModel } from './define.js';
+import { GalleryViewUILogic } from './gallery-view.js';
+// One UI for both: the cards reflow, and a tap opens the row or edits a value.
+export const galleryViewMeta = galleryViewModel.createMeta({
+    icon: createIcon('GridIcon'),
+    pcLogic: () => GalleryViewUILogic,
+    // Named, not left to the pc fallback: a touch screen draws this UI on
+    // purpose (B5, `mobile-editing.unit.spec.ts`).
+    mobileLogic: () => GalleryViewUILogic,
+});

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

@@ -1,9 +1,14 @@
 export * from './calendar/index.js';
 export * from './convert.js';
+export * from './flat/flat-view-manager.js';
+export * from './gallery/index.js';
 export * from './kanban/index.js';
+export * from './list/index.js';
 export * from './table/index.js';
 export declare const viewPresets: {
     tableViewMeta: import("../index.js").ViewMeta<"table", import("./index.js").TableViewData>;
     kanbanViewMeta: import("../index.js").ViewMeta<"kanban", import("./index.js").KanbanViewData>;
     calendarViewMeta: import("../index.js").ViewMeta<"calendar", import("./index.js").CalendarViewData>;
+    galleryViewMeta: import("../index.js").ViewMeta<"gallery", import("./index.js").GalleryViewData>;
+    listViewMeta: import("../index.js").ViewMeta<"list", import("./index.js").ListViewData>;
 };

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

@@ -1,12 +1,19 @@
 import { calendarViewMeta } from './calendar/index.js';
+import { galleryViewMeta } from './gallery/index.js';
 import { kanbanViewMeta } from './kanban/index.js';
+import { listViewMeta } from './list/index.js';
 import { tableViewMeta } from './table/index.js';
 export * from './calendar/index.js';
 export * from './convert.js';
+export * from './flat/flat-view-manager.js';
+export * from './gallery/index.js';
 export * from './kanban/index.js';
+export * from './list/index.js';
 export * from './table/index.js';
 export const viewPresets = {
     tableViewMeta: tableViewMeta,
     kanbanViewMeta: kanbanViewMeta,
     calendarViewMeta: calendarViewMeta,
+    galleryViewMeta: galleryViewMeta,
+    listViewMeta: listViewMeta,
 };

package/dist/_pkgs/data-view/view-presets/kanban/define.js

@@ -1,10 +1,12 @@
 import { BlockSuiteError, ErrorCode } from '../../../global/exceptions/index.js';
 import { defaultGroupBy, getGroupByService, t } from '../../core/index.js';
 import { viewType } from '../../core/view/data-view.js';
+import { VIEW_NAME_KANBAN } from '../../translations.js';
 import { KanbanSingleView } from './kanban-view-manager.js';
 export const kanbanViewType = viewType('kanban');
 export const kanbanViewModel = kanbanViewType.createModel({
-    defaultName: 'Kanban View',
+    defaultName: VIEW_NAME_KANBAN[1],
+    defaultNameKey: VIEW_NAME_KANBAN[0],
     dataViewManager: KanbanSingleView,
     defaultData: viewManager => {
         const groupByService = getGroupByService(viewManager.dataSource);

package/dist/_pkgs/data-view/view-presets/kanban/kanban-view-manager.js

@@ -4,7 +4,8 @@ import { evalFilter } from '../../core/filter/eval.js';
 import { generateDefaultValues } from '../../core/filter/generate-default-values.js';
 import { FilterTrait, filterTraitKey } from '../../core/filter/trait.js';
 import { emptyFilterGroup } from '../../core/filter/utils.js';
-import { GroupTrait, groupTraitKey, sortByManually, } from '../../core/group-by/trait.js';
+import { groupPropertiesOps } from '../../core/group-by/group-properties.js';
+import { GroupTrait, groupTraitKey } from '../../core/group-by/trait.js';
 import { fromJson } from '../../core/property/utils.js';
 import { PropertyBase } from '../../core/view-manager/property.js';
 import { SingleViewBase } from '../../core/view-manager/single-view.js';
@@ -52,58 +53,9 @@ export class KanbanSingleView extends SingleViewBase {
                     };
                 });
             },
-            sortGroup: ids => sortByManually(ids, v => v, this.view?.groupProperties.map(v => v.key) ?? []),
-            sortRow: (key, rows) => {
-                const property = this.view?.groupProperties.find(v => v.key === key);
-                return sortByManually(rows, v => v.rowId, property?.manuallyCardSort ?? []);
-            },
-            changeGroupSort: keys => {
-                const map = new Map(this.view?.groupProperties.map(v => [v.key, v]));
-                this.dataUpdate(() => {
-                    return {
-                        groupProperties: keys.map(key => {
-                            const property = map.get(key);
-                            if (property) {
-                                return property;
-                            }
-                            return {
-                                key,
-                                hide: false,
-                                manuallyCardSort: [],
-                            };
-                        }),
-                    };
-                });
-            },
-            changeRowSort: (groupKeys, groupKey, keys) => {
-                const map = new Map(this.view?.groupProperties.map(v => [v.key, v]));
-                this.dataUpdate(() => {
-                    return {
-                        groupProperties: groupKeys.map(key => {
-                            if (key === groupKey) {
-                                const group = map.get(key);
-                                return group
-                                    ? {
-                                        ...group,
-                                        manuallyCardSort: keys,
-                                    }
-                                    : {
-                                        key,
-                                        hide: false,
-                                        manuallyCardSort: keys,
-                                    };
-                            }
-                            else {
-                                return (map.get(key) ?? {
-                                    key,
-                                    hide: false,
-                                    manuallyCardSort: [],
-                                });
-                            }
-                        }),
-                    };
-                });
-            },
+            ...groupPropertiesOps(() => this.view?.groupProperties ?? [], groupProperties => {
+                this.dataUpdate(() => ({ groupProperties }));
+            }),
         }));
         this.mainProperties$ = computed(() => {
             return (this.data$.value?.header ?? {

package/dist/_pkgs/data-view/view-presets/kanban/mobile/card.js

@@ -102,7 +102,7 @@ const styles = css `
     right: 8px;
     top: 8px;
     display: flex;
-    gap: 4px;
+    gap: 20px;
   }
 
   .mobile-card-op {
@@ -115,6 +115,13 @@ const styles = css `
     font-size: 16px;
     color: ${unsafeCSSVarV2('icon/primary')};
   }
+
+  /* A 44px touch target around the drawn 24px op (B5, ADR 0035 §1). */
+  .mobile-card-op::after {
+    content: '';
+    position: absolute;
+    inset: -10px;
+  }
 `;
 let MobileKanbanCard = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));

package/dist/_pkgs/data-view/view-presets/kanban/mobile/cell.js

@@ -40,6 +40,7 @@ import { computed, effect, signal } from '@preact/signals-core';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
+import { renderCellStatus } from '../../../core/component/cell-status/cell-status.js';
 import { renderUniLit } from '../../../core/utils/uni-component/uni-component.js';
 const styles = css `
   mobile-kanban-cell {
@@ -47,7 +48,8 @@ const styles = css `
     display: flex;
     align-items: center;
     padding: 4px;
-    min-height: 20px;
+    /* A finger's target (B5, ADR 0035 §1); was 20px when mobile was read-only. */
+    min-height: 44px;
     border: 1px solid transparent;
     box-sizing: border-box;
   }
@@ -139,6 +141,9 @@ let MobileKanbanCell = (() => {
             if (!renderer)
                 return;
             const { view } = renderer;
+            const status = renderCellStatus(props.cell);
+            if (status)
+                return html ` ${this.renderIcon()} ${status}`;
             this.view.lockRows(this.isEditing$.value);
             this.dataset['editing'] = `${this.isEditing$.value}`;
             return html ` ${this.renderIcon()}

package/dist/_pkgs/data-view/view-presets/kanban/mobile/group.d.ts

@@ -1,9 +1,11 @@
-import { ShadowlessElement } from '../../../../std/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../../std/index.js';
 import type { Group } from '../../../core/group-by/trait.js';
 import type { MobileKanbanViewUILogic } from './kanban-view-ui-logic.js';
 declare const MobileKanbanGroup_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class MobileKanbanGroup extends MobileKanbanGroup_base {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
     private readonly clickAddCard;
     private readonly clickAddCardInStart;
     private readonly clickGroupOptions;

package/dist/_pkgs/data-view/view-presets/kanban/mobile/group.js

@@ -35,13 +35,16 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { menu, popFilterableSimpleMenu, popupTargetFromElement, } from '../../../../affine-components/context-menu/index.js';
 import { SignalWatcher, WithDisposable } from '../../../../global/lit/index.js';
 import { AddCursorIcon } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { css, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 import { GroupTitle } from '../../../core/group-by/group-title.js';
+import { groupToggleStyles, hideGroupAction, renderGroupToggle, } from '../../../core/group-by/group-visibility.js';
 import { dragHandler } from '../../../core/utils/wc-dnd/dnd-context.js';
+import { wordingOf } from '../../../core/utils/wording.js';
 const styles = css `
   mobile-kanban-group {
     width: 260px;
@@ -69,9 +72,36 @@ const styles = css `
     gap: 12px;
   }
 
+  .mobile-group-body[hidden] {
+    display: none;
+  }
+
+  @media (pointer: coarse) {
+    .mobile-group-header {
+      height: auto;
+      min-height: 44px;
+    }
+  }
+
+  .mobile-group-header-main {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    overflow: hidden;
+  }
+
+  .dv-kanban-hidden-groups {
+    width: 260px;
+    flex-shrink: 0;
+  }
+
   .mobile-add-card {
     display: flex;
     align-items: center;
+    min-height: 44px;
     padding: 4px;
     border-radius: 4px;
     font-size: var(--data-view-cell-text-size);
@@ -81,6 +111,9 @@ const styles = css `
 `;
 let MobileKanbanGroup = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _group_decorators;
     let _group_initializers = [];
     let _group_extraInitializers = [];
@@ -90,24 +123,35 @@ let MobileKanbanGroup = (() => {
     return class MobileKanbanGroup extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _group_decorators = [property({ attribute: false })];
             _kanbanViewLogic_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             __esDecorate(this, null, _group_decorators, { kind: "accessor", name: "group", static: false, private: false, access: { has: obj => "group" in obj, get: obj => obj.group, set: (obj, value) => { obj.group = value; } }, metadata: _metadata }, _group_initializers, _group_extraInitializers);
             __esDecorate(this, null, _kanbanViewLogic_decorators, { kind: "accessor", name: "kanbanViewLogic", static: false, private: false, access: { has: obj => "kanbanViewLogic" in obj, get: obj => obj.kanbanViewLogic, set: (obj, value) => { obj.kanbanViewLogic = value; } }, metadata: _metadata }, _kanbanViewLogic_initializers, _kanbanViewLogic_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static { this.styles = styles; }
+        static { this.styles = [styles, groupToggleStyles]; }
+        #std_accessor_storage;
+        /** Absent outside an editor host: the wordings read English. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         render() {
             const cards = this.group.rows;
+            // Folded (personal, B8): the header and its count stay, the cards go.
+            const collapsed = this.group.manager.collapsed$(this.group.key).value;
             return html `
       <div class="mobile-group-header" ${dragHandler(this.group.key)}>
-        ${GroupTitle(this.group, {
+        ${renderGroupToggle(this.group, wordingOf(this.std))}
+        <div class="mobile-group-header-main">
+          ${GroupTitle(this.group, {
                 readonly: this.view.readonly$.value,
                 clickAdd: this.clickAddCardInStart,
                 clickOps: this.clickGroupOptions,
             })}
+        </div>
       </div>
-      <div class="mobile-group-body">
+      <div class="mobile-group-body" ?hidden="${collapsed}">
         ${repeat(cards, row => row.rowId, row => {
                 return html `
               <mobile-kanban-card
@@ -142,10 +186,11 @@ let MobileKanbanGroup = (() => {
         }
         constructor() {
             super(...arguments);
-            this.clickAddCard = () => {
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.clickAddCard = (__runInitializers(this, _std_extraInitializers), () => {
                 this.view.addCard('end', this.group.key);
                 this.requestUpdate();
-            };
+            });
             this.clickAddCardInStart = () => {
                 this.view.addCard('start', this.group.key);
                 this.requestUpdate();
@@ -165,6 +210,7 @@ let MobileKanbanGroup = (() => {
                                     this.requestUpdate();
                                 },
                             }),
+                            hideGroupAction(this.group, wordingOf(this.std)),
                             menu.action({
                                 name: 'Delete Cards',
                                 select: () => {

package/dist/_pkgs/data-view/view-presets/kanban/mobile/kanban-view-ui-logic.js

@@ -97,7 +97,7 @@ export class MobileKanbanViewUI extends DataViewUIBase {
         this.classList.add(mobileKanbanViewWrapper);
     }
     render() {
-        const groups = this.logic.groupManager.groupsDataList$.value;
+        const groups = this.logic.groupManager.visibleGroups$.value;
         if (!groups) {
             return html ``;
         }
@@ -122,6 +122,10 @@ export class MobileKanbanViewUI extends DataViewUIBase {
             ></mobile-kanban-group>`;
         })}
         ${this.logic.renderAddGroup()}
+        <dv-hidden-groups
+          class="dv-kanban-hidden-groups"
+          .groupTrait="${this.logic.groupManager}"
+        ></dv-hidden-groups>
       </div>
     `;
     }

package/dist/_pkgs/data-view/view-presets/kanban/pc/card.js

@@ -43,6 +43,7 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
+import { isNewTabClick } from '../../../core/utils/new-tab-click.js';
 import { openDetail, popCardMenu } from './menu.js';
 const styles = css `
   affine-data-view-kanban-card {
@@ -272,6 +273,7 @@ let KanbanCard = (() => {
                 this.kanbanViewLogic.root.openDetailPanel({
                     view: this.view,
                     rowId: this.cardId,
+                    newTab: isNewTabClick(e),
                     onClose: () => {
                         if (selection) {
                             selection.selection = preSelection;

package/dist/_pkgs/data-view/view-presets/kanban/pc/cell.js

@@ -39,6 +39,7 @@ import { signal } from '@preact/signals-core';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
+import { renderCellStatus } from '../../../core/component/cell-status/cell-status.js';
 import { renderUniLit } from '../../../core/utils/uni-component/uni-component.js';
 const styles = css `
   affine-data-view-kanban-cell {
@@ -150,6 +151,9 @@ let KanbanCell = (() => {
             if (!renderer)
                 return;
             const { view } = renderer;
+            const status = renderCellStatus(props.cell);
+            if (status)
+                return html ` ${this.renderIcon()} ${status}`;
             this.view.lockRows(this.isEditing$.value);
             this.dataset['editing'] = `${this.isEditing$.value}`;
             this.style.border = this.isFocus$.value

package/dist/_pkgs/data-view/view-presets/kanban/pc/group.d.ts

@@ -1,9 +1,11 @@
-import { ShadowlessElement } from '../../../../std/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../../std/index.js';
 import type { Group } from '../../../core/group-by/trait.js';
 import type { KanbanViewUILogic } from './kanban-view-ui-logic.js';
 declare const KanbanGroup_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class KanbanGroup extends KanbanGroup_base {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
     private readonly clickAddCard;
     private readonly clickAddCardInStart;
     private readonly clickGroupOptions;