@formicoidea/labre-core 0.48.0 → 0.49.0

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

@@ -0,0 +1,194 @@
+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 list preset (ADR 0035 §1, B7): one line per row, the title on the left
+ * and the visible properties on the right, each drawn by the cell a table
+ * draws, so a select is the table's tag and opens the table's tag menu. An
+ * empty value draws no chip, as in Notion's list: it is set from the opened
+ * row. Narrow screens wrap the chips under the title.
+ */
+export class ListViewUILogic extends FlatViewUILogic {
+    constructor() {
+        super(...arguments);
+        this.renderer = createUniComponentFromWebComponent(ListViewUI);
+    }
+}
+export class ListViewUI extends FlatViewUI {
+    static { this.styles = [
+        flatOpenButtonStyles,
+        flatGroupStyles,
+        groupToggleStyles,
+        css `
+      dv-list-view-ui {
+        display: block;
+      }
+
+      .dv-list {
+        display: flex;
+        flex-direction: column;
+        padding: 4px 0 8px;
+      }
+
+      .dv-list-row {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-height: 36px;
+        padding: 2px 40px 2px 8px;
+        box-sizing: border-box;
+        border-bottom: 1px solid
+          ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
+        cursor: pointer;
+      }
+
+      .dv-list-row-title {
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        font-size: var(--data-view-cell-text-size);
+        line-height: var(--data-view-cell-text-line-height);
+      }
+
+      .dv-list-row-properties {
+        display: flex;
+        flex: 0 1 auto;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 8px;
+        min-width: 0;
+        max-width: 60%;
+        overflow: hidden;
+      }
+
+      .dv-list-row-property {
+        display: flex;
+        align-items: center;
+        flex: 0 1 auto;
+        min-width: 0;
+        max-width: 200px;
+        overflow: hidden;
+      }
+
+      .dv-list-row .dv-flat-open {
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      .dv-list-row:focus-within .dv-flat-open {
+        visibility: visible;
+      }
+
+      .dv-list-new {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        min-height: 36px;
+        padding: 0 8px;
+        border: none;
+        background: transparent;
+        color: var(--affine-text-secondary-color);
+        font-family: inherit;
+        font-size: var(--data-view-cell-text-size);
+        text-align: start;
+        cursor: pointer;
+      }
+
+      .dv-list-new svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      @media (hover: hover) {
+        .dv-list-row:hover,
+        .dv-list-new:hover {
+          background-color: var(--affine-hover-color);
+        }
+
+        .dv-list-row:hover .dv-flat-open {
+          visibility: visible;
+        }
+      }
+
+      @media (pointer: coarse) {
+        .dv-list-row,
+        .dv-list-new {
+          min-height: 44px;
+        }
+      }
+
+      @media (max-width: 640px) {
+        .dv-list-row {
+          flex-wrap: wrap;
+          padding-top: 6px;
+          padding-bottom: 6px;
+        }
+
+        .dv-list-row-title {
+          flex-basis: 100%;
+        }
+
+        .dv-list-row-properties {
+          flex-wrap: wrap;
+          justify-content: flex-start;
+          max-width: 100%;
+        }
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.dataset.testid = 'dv-list-view';
+    }
+    renderRow(rowId) {
+        const view = this.view;
+        const title = view.titleProperty$.value;
+        // A value still loading keeps its chip, as a skeleton.
+        const chips = view.bodyProperties$.value.filter(property => {
+            const cell = property.cellGetOrCreate(rowId);
+            return cell.status$?.value === 'pending' || !cell.isEmpty$.value;
+        });
+        return html `<div
+      class="dv-list-row"
+      data-testid="dv-list-row"
+      data-row-id="${rowId}"
+      @click="${this.onRowClick}"
+    >
+      <div class="dv-list-row-title">
+        ${title ? this.renderCell(title, rowId, true) : nothing}
+      </div>
+      ${chips.length
+            ? html `<div class="dv-list-row-properties">
+            ${repeat(chips, property => property.id, property => html `<div class="dv-list-row-property">
+                  ${this.renderCell(property, rowId)}
+                </div>`)}
+          </div>`
+            : nothing}
+      ${this.renderOpenButton(rowId)}
+    </div>`;
+    }
+    renderNewRow(groupKey) {
+        if (this.view.readonly$.value)
+            return nothing;
+        return html `<button
+      class="dv-list-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-list">
+          ${repeat(rows, row => row.rowId, row => this.renderRow(row.rowId))}
+          ${this.renderNewRow(group?.key)}
+        </div>`)}`;
+    }
+}

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

@@ -0,0 +1 @@
+export declare const listViewMeta: import("../../index.js").ViewMeta<"list", import("./define.js").ListViewData>;

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

@@ -0,0 +1,11 @@
+import { createIcon } from '../../core/utils/uni-icon.js';
+import { listViewModel } from './define.js';
+import { ListViewUILogic } from './list-view.js';
+// One UI for both: the chips wrap under the title on a narrow screen.
+export const listViewMeta = listViewModel.createMeta({
+    icon: createIcon('DatabaseListViewIcon'),
+    pcLogic: () => ListViewUILogic,
+    // Named, not left to the pc fallback: a touch screen draws this UI on
+    // purpose (B5, `mobile-editing.unit.spec.ts`).
+    mobileLogic: () => ListViewUILogic,
+});

package/dist/_pkgs/data-view/view-presets/table/collapsed-state.d.ts

@@ -1,18 +1,7 @@
 /**
- * Shared utility for managing table group collapsed state in sessionStorage.
- * Used by both PC and mobile table group implementations.
- */
-/**
- * Gets the collapsed state for a specific table group from sessionStorage.
- * @param viewId - The ID of the table view
- * @param groupKey - The key of the group
- * @returns The collapsed state as a boolean, or false if not found or invalid
+ * The table's two entry points into the shared, per-device group fold
+ * (`core/group-by/collapsed-state.ts`, ADR 0035 B8), kept so the pc and
+ * mobile table groups read and write it as before.
  */
 export declare function getCollapsedState(viewId: string, groupKey: string): boolean;
-/**
- * Sets the collapsed state for a specific table group in sessionStorage.
- * @param viewId - The ID of the table view
- * @param groupKey - The key of the group
- * @param collapsed - The collapsed state to store
- */
 export declare function setCollapsedState(viewId: string, groupKey: string, collapsed: boolean): void;

package/dist/_pkgs/data-view/view-presets/table/collapsed-state.js

@@ -1,36 +1,12 @@
+import { groupCollapsed$, groupCollapsedSet, } from '../../core/group-by/collapsed-state.js';
 /**
- * Shared utility for managing table group collapsed state in sessionStorage.
- * Used by both PC and mobile table group implementations.
- */
-/**
- * Gets the collapsed state for a specific table group from sessionStorage.
- * @param viewId - The ID of the table view
- * @param groupKey - The key of the group
- * @returns The collapsed state as a boolean, or false if not found or invalid
+ * The table's two entry points into the shared, per-device group fold
+ * (`core/group-by/collapsed-state.ts`, ADR 0035 B8), kept so the pc and
+ * mobile table groups read and write it as before.
  */
 export function getCollapsedState(viewId, groupKey) {
-    try {
-        const value = sessionStorage.getItem(`affine:table-group:${viewId}:${groupKey}:collapsed`);
-        if (!value)
-            return false;
-        const parsed = JSON.parse(value);
-        return typeof parsed === 'boolean' ? parsed : false;
-    }
-    catch {
-        return false;
-    }
+    return groupCollapsed$(viewId, groupKey).peek();
 }
-/**
- * Sets the collapsed state for a specific table group in sessionStorage.
- * @param viewId - The ID of the table view
- * @param groupKey - The key of the group
- * @param collapsed - The collapsed state to store
- */
 export function setCollapsedState(viewId, groupKey, collapsed) {
-    try {
-        sessionStorage.setItem(`affine:table-group:${viewId}:${groupKey}:collapsed`, JSON.stringify(collapsed));
-    }
-    catch {
-        // ignore
-    }
+    groupCollapsedSet(viewId, groupKey, collapsed);
 }

package/dist/_pkgs/data-view/view-presets/table/consts.d.ts

@@ -4,6 +4,8 @@ export declare const DEFAULT_COLUMN_WIDTH = 180;
 export declare const DEFAULT_COLUMN_MIN_WIDTH = 100;
 /** column title height */
 export declare const DEFAULT_COLUMN_TITLE_HEIGHT = 34;
+/** A finger's minimum target on the mobile renderers (B5, ADR 0035 §1). */
+export declare const MOBILE_TOUCH_TARGET = 44;
 /** column title height */
 export declare const DEFAULT_ADD_BUTTON_WIDTH = 40;
 export declare const LEFT_TOOL_BAR_WIDTH = 24;

package/dist/_pkgs/data-view/view-presets/table/consts.js

@@ -4,6 +4,8 @@ export const DEFAULT_COLUMN_WIDTH = 180;
 export const DEFAULT_COLUMN_MIN_WIDTH = 100;
 /** column title height */
 export const DEFAULT_COLUMN_TITLE_HEIGHT = 34;
+/** A finger's minimum target on the mobile renderers (B5, ADR 0035 §1). */
+export const MOBILE_TOUCH_TARGET = 44;
 /** column title height */
 export const DEFAULT_ADD_BUTTON_WIDTH = 40;
 export const LEFT_TOOL_BAR_WIDTH = 24;

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

@@ -1,8 +1,10 @@
 import { viewType } from '../../core/view/data-view.js';
+import { VIEW_NAME_TABLE } from '../../translations.js';
 import { TableSingleView } from './table-view-manager.js';
 export const tableViewType = viewType('table');
 export const tableViewModel = tableViewType.createModel({
-    defaultName: 'Table View',
+    defaultName: VIEW_NAME_TABLE[1],
+    defaultNameKey: VIEW_NAME_TABLE[0],
     dataViewManager: TableSingleView,
     defaultData: viewManager => {
         return {

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

@@ -37,7 +37,7 @@ import { ShadowlessElement } from '../../../../std/index.js';
 import { computed, effect, signal } from '@preact/signals-core';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { renderUniLit, } from '../../../core/index.js';
+import { renderCellStatus, renderUniLit, } from '../../../core/index.js';
 import { TableViewAreaSelection } from '../selection.js';
 let MobileTableCell = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
@@ -136,6 +136,9 @@ let MobileTableCell = (() => {
                 return;
             }
             const { view } = renderer;
+            const status = renderCellStatus(this.cell$.value);
+            if (status)
+                return status;
             this.view.lockRows(this.isEditing$.value);
             this.dataset['editing'] = `${this.isEditing$.value}`;
             const props = {

package/dist/_pkgs/data-view/view-presets/table/mobile/column-header.js

@@ -43,7 +43,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 import { inputConfig, typeConfig } from '../../../core/common/property-menu.js';
 import { numberFormats } from '../../../property-presets/number/utils/formats.js';
-import { DEFAULT_COLUMN_TITLE_HEIGHT } from '../consts.js';
+import { MOBILE_TOUCH_TARGET } from '../consts.js';
 let MobileTableColumnHeader = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
     let _column_decorators;
@@ -249,7 +249,7 @@ let MobileTableColumnHeader = (() => {
         render() {
             const column = this.column;
             const style = styleMap({
-                height: DEFAULT_COLUMN_TITLE_HEIGHT + 'px',
+                height: MOBILE_TOUCH_TARGET + 'px',
             });
             return html `
       <div

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

@@ -1,10 +1,12 @@
-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 { Row } from '../../../core/index.js';
 import type { MobileTableViewUILogic } from './table-view-ui-logic.js';
 declare const MobileTableGroup_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class MobileTableGroup extends MobileTableGroup_base {
     static styles: import("lit").CSSResult;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
     collapsed$: import("@preact/signals-core").Signal<boolean>;
     private storageLoaded;
     /**

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

@@ -35,13 +35,17 @@ 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 { PlusIcon, ToggleDownIcon, ToggleRightIcon, } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { signal } from '@preact/signals-core';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { css, html, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { GroupTitle } from '../../../core/group-by/group-title.js';
+import { hideGroupAction } from '../../../core/group-by/group-visibility.js';
+import { wordingOf } from '../../../core/utils/wording.js';
+import { DATA_VIEW_GROUP_COLLAPSE, DATA_VIEW_GROUP_EXPAND, } from '../../../translations.js';
 import { getCollapsedState, setCollapsedState } from '../collapsed-state.js';
 import { LEFT_TOOL_BAR_WIDTH } from '../consts.js';
 const styles = css `
@@ -94,6 +98,9 @@ const styles = css `
 `;
 let MobileTableGroup = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _group_decorators;
     let _group_initializers = [];
     let _group_extraInitializers = [];
@@ -103,13 +110,19 @@ let MobileTableGroup = (() => {
     return class MobileTableGroup 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 })];
             _tableViewLogic_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, _tableViewLogic_decorators, { kind: "accessor", name: "tableViewLogic", static: false, private: false, access: { has: obj => "tableViewLogic" in obj, get: obj => obj.tableViewLogic, set: (obj, value) => { obj.tableViewLogic = value; } }, metadata: _metadata }, _tableViewLogic_initializers, _tableViewLogic_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = styles; }
+        #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; }
         /**
          * Read the stored collapsed state once, as soon as the group and its view
          * are both known. Reading it earlier would key the lookup on a missing view
@@ -190,7 +203,8 @@ let MobileTableGroup = (() => {
         }
         constructor() {
             super(...arguments);
-            this.collapsed$ = signal(false);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.collapsed$ = (__runInitializers(this, _std_extraInitializers), signal(false));
             this.storageLoaded = false;
             this._toggleCollapse = (e) => {
                 e?.stopPropagation();
@@ -225,6 +239,7 @@ let MobileTableGroup = (() => {
                             });
                         },
                     }),
+                    hideGroupAction(group, wordingOf(this.std)),
                     menu.action({
                         name: 'Delete Cards',
                         select: () => {
@@ -246,9 +261,9 @@ let MobileTableGroup = (() => {
           class="group-toggle-btn"
           role="button"
           aria-expanded=${this.collapsed$.value ? 'false' : 'true'}
-          aria-label=${this.collapsed$.value
-                    ? 'Expand group'
-                    : 'Collapse group'}
+          aria-label=${wordingOf(this.std)(this.collapsed$.value
+                    ? DATA_VIEW_GROUP_EXPAND
+                    : DATA_VIEW_GROUP_COLLAPSE)}
           tabindex="0"
           @click=${this._toggleCollapse}
           @keydown=${(e) => {

package/dist/_pkgs/data-view/view-presets/table/mobile/row.js

@@ -67,6 +67,8 @@ let MobileTableRow = (() => {
             __esDecorate(this, null, _rowIndex_decorators, { kind: "accessor", name: "rowIndex", static: false, private: false, access: { has: obj => "rowIndex" in obj, get: obj => obj.rowIndex, set: (obj, value) => { obj.rowIndex = value; } }, metadata: _metadata }, _rowIndex_initializers, _rowIndex_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        // Touch targets are 44px tall (B5, ADR 0035 §1): the row, and each row op
+        // through an invisible hit area, so the ops keep their drawn size.
         static { this.styles = css `
     .mobile-table-row {
       width: 100%;
@@ -74,7 +76,7 @@ let MobileTableRow = (() => {
       flex-direction: row;
       border-bottom: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
       position: relative;
-      min-height: 34px;
+      min-height: 44px;
     }
 
     .mobile-row-ops {
@@ -83,7 +85,7 @@ let MobileTableRow = (() => {
       margin-top: 5px;
       height: max-content;
       display: flex;
-      gap: 4px;
+      gap: 20px;
       cursor: pointer;
       justify-content: end;
       right: 8px;
@@ -104,6 +106,12 @@ let MobileTableRow = (() => {
       font-size: 16px;
       color: ${unsafeCSSVarV2('icon/primary')};
     }
+
+    .mobile-row-op::after {
+      content: '';
+      position: absolute;
+      inset: -10px;
+    }
   `; }
         get groupKey() {
             return this.closest('affine-data-view-table-group')?.group?.key;

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

@@ -74,7 +74,7 @@ export class MobileTableViewUI extends DataViewUIBase {
         this.classList.add(mobileTableViewWrapper);
     }
     renderTable() {
-        const groups = this.logic.view.groupTrait.groupsDataList$.value;
+        const groups = this.logic.view.groupTrait.visibleGroups$.value;
         if (groups) {
             return html `
         <div style="display:flex;flex-direction: column;gap: 16px;">
@@ -86,6 +86,9 @@ export class MobileTableViewUI extends DataViewUIBase {
               ></mobile-table-group>`;
             })}
           ${this.logic.renderAddGroup(this.logic.view.groupTrait)}
+          <dv-hidden-groups
+            .groupTrait="${this.logic.view.groupTrait}"
+          ></dv-hidden-groups>
         </div>
       `;
         }

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

@@ -37,7 +37,7 @@ import { ShadowlessElement } from '../../../../std/index.js';
 import { computed, signal } from '@preact/signals-core';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { renderUniLit } from '../../../core/index.js';
+import { renderCellStatus, renderUniLit } from '../../../core/index.js';
 import { TableViewAreaSelection, } from '../selection.js';
 let TableViewCellContainer = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
@@ -143,6 +143,9 @@ let TableViewCellContainer = (() => {
                 return;
             }
             const { view } = renderer;
+            const status = renderCellStatus(this.cell$.value);
+            if (status)
+                return status;
             this.view.lockRows(this.isEditing$.value);
             this.dataset['editing'] = `${this.isEditing$.value}`;
             const props = {

package/dist/_pkgs/data-view/view-presets/table/pc/controller/hotkeys.js

@@ -307,7 +307,7 @@ export class TableHotkeysController {
                 if (selection) {
                     context.get('keyboardState').raw.preventDefault();
                     this.selectionController.selection = TableViewRowSelection.create({
-                        rows: this.logic.view.groupTrait.groupsDataList$.value?.flatMap(group => group?.rows.map(row => ({
+                        rows: this.logic.view.groupTrait.visibleGroups$.value?.flatMap(group => group?.rows.map(row => ({
                             groupKey: group.key,
                             id: row.rowId,
                         })) ?? []) ??

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

@@ -1,10 +1,12 @@
-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 { Row } from '../../../core/index.js';
 import type { TableViewUILogic } from './table-view-ui-logic.js';
 declare const TableGroup_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class TableGroup extends TableGroup_base {
     static styles: import("lit").CSSResult;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
     collapsed$: import("@preact/signals-core").Signal<boolean>;
     private storageLoaded;
     /**

package/dist/_pkgs/data-view/view-presets/table/pc/group.js

@@ -35,16 +35,20 @@ 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 { PlusIcon, ToggleDownIcon, ToggleRightIcon, } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { effect, signal } from '@preact/signals-core';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { css, html, nothing, unsafeCSS } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { GroupTitle } from '../../../core/group-by/group-title.js';
+import { hideGroupAction } from '../../../core/group-by/group-visibility.js';
 import { createDndContext } from '../../../core/utils/wc-dnd/dnd-context.js';
 import { defaultActivators } from '../../../core/utils/wc-dnd/sensors/index.js';
 import { linearMove } from '../../../core/utils/wc-dnd/utils/linear-move.js';
+import { wordingOf } from '../../../core/utils/wording.js';
+import { DATA_VIEW_GROUP_COLLAPSE, DATA_VIEW_GROUP_EXPAND, } from '../../../translations.js';
 import { getCollapsedState, setCollapsedState } from '../collapsed-state.js';
 import { LEFT_TOOL_BAR_WIDTH } from '../consts.js';
 import { TableViewAreaSelection } from '../selection.js';
@@ -111,6 +115,9 @@ const styles = css `
 `;
 let TableGroup = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _group_decorators;
     let _group_initializers = [];
     let _group_extraInitializers = [];
@@ -123,15 +130,21 @@ let TableGroup = (() => {
     return class TableGroup 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 })];
             _rowsContainer_decorators = [query('.affine-database-block-rows')];
             _tableViewLogic_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, _rowsContainer_decorators, { kind: "accessor", name: "rowsContainer", static: false, private: false, access: { has: obj => "rowsContainer" in obj, get: obj => obj.rowsContainer, set: (obj, value) => { obj.rowsContainer = value; } }, metadata: _metadata }, _rowsContainer_initializers, _rowsContainer_extraInitializers);
             __esDecorate(this, null, _tableViewLogic_decorators, { kind: "accessor", name: "tableViewLogic", static: false, private: false, access: { has: obj => "tableViewLogic" in obj, get: obj => obj.tableViewLogic, set: (obj, value) => { obj.tableViewLogic = value; } }, metadata: _metadata }, _tableViewLogic_initializers, _tableViewLogic_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = styles; }
+        #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; }
         /**
          * Read the stored collapsed state once, as soon as the group and its view
          * are both known. Reading it earlier would key the lookup on a missing view
@@ -221,7 +234,8 @@ let TableGroup = (() => {
         }
         constructor() {
             super(...arguments);
-            this.collapsed$ = signal(false);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.collapsed$ = (__runInitializers(this, _std_extraInitializers), signal(false));
             this.storageLoaded = false;
             this._toggleCollapse = (e) => {
                 e?.stopPropagation();
@@ -282,6 +296,7 @@ let TableGroup = (() => {
                             });
                         },
                     }),
+                    hideGroupAction(group, wordingOf(this.std)),
                     menu.action({
                         name: 'Delete Cards',
                         select: () => {
@@ -303,9 +318,9 @@ let TableGroup = (() => {
           class="group-toggle-btn"
           role="button"
           aria-expanded=${this.collapsed$.value ? 'false' : 'true'}
-          aria-label=${this.collapsed$.value
-                    ? 'Expand group'
-                    : 'Collapse group'}
+          aria-label=${wordingOf(this.std)(this.collapsed$.value
+                    ? DATA_VIEW_GROUP_EXPAND
+                    : DATA_VIEW_GROUP_COLLAPSE)}
           tabindex="0"
           @click=${this._toggleCollapse}
           @keydown=${(e) => {

package/dist/_pkgs/data-view/view-presets/table/pc/menu.d.ts

@@ -1,5 +1,5 @@
 import { type PopupTarget } from '../../../../affine-components/context-menu/index.js';
 import type { TableSelectionController } from './controller/selection.js';
 import type { TableViewUILogic } from './table-view-ui-logic.js';
-export declare const openDetail: (tableViewLogic: TableViewUILogic, rowId: string, selection: TableSelectionController) => void;
+export declare const openDetail: (tableViewLogic: TableViewUILogic, rowId: string, selection: TableSelectionController, newTab?: boolean) => void;
 export declare const popRowMenu: (tableViewLogic: TableViewUILogic, ele: PopupTarget, selectionController: TableSelectionController) => void;