@formicoidea/labre-core 0.30.1 → 0.32.0

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

@@ -1,5 +1,5 @@
 import { popupTargetFromElement } from '../../../../../affine-components/context-menu/index.js';
-import { TableViewAreaSelection, TableViewRowSelection } from '../../selection';
+import { TableViewAreaSelection, TableViewRowSelection } from '../../selection.js';
 import { handleCharStartEdit } from '../../utils.js';
 import { popRowMenu } from '../menu.js';
 export class TableHotkeysController {
@@ -12,39 +12,26 @@ export class TableHotkeysController {
     get host() {
         return this.logic.ui$.value;
     }
-    hostConnected() {
-        this.host?.disposables.add(this.logic.bindHotkey({
-            Backspace: () => {
-                const selection = this.selectionController.selection;
-                if (!selection) {
-                    return;
-                }
-                if (TableViewRowSelection.is(selection)) {
-                    const rows = TableViewRowSelection.rowsIds(selection);
-                    this.selectionController.selection = undefined;
-                    this.logic.view.rowsDelete(rows);
-                    this.logic.ui$.value?.requestUpdate();
-                    return;
-                }
-                const { focus, rowsSelection, columnsSelection, isEditing, groupKey, } = selection;
-                if (focus && !isEditing) {
-                    if (rowsSelection && columnsSelection) {
-                        // multi cell
-                        for (let i = rowsSelection.start; i <= rowsSelection.end; i++) {
-                            const { start, end } = columnsSelection;
-                            for (let j = start; j <= end; j++) {
-                                const container = this.selectionController.getCellContainer(groupKey, i, j);
-                                const rowId = container?.dataset.rowId;
-                                const columnId = container?.dataset.columnId;
-                                if (rowId && columnId) {
-                                    container?.column.valueSetFromString(rowId, '');
-                                }
-                            }
-                        }
-                    }
-                    else {
-                        // single cell
-                        const container = this.selectionController.getCellContainer(groupKey, focus.rowIndex, focus.columnIndex);
+    _handleDeleteOrBackspace() {
+        const selection = this.selectionController.selection;
+        if (!selection) {
+            return;
+        }
+        if (TableViewRowSelection.is(selection)) {
+            const rows = TableViewRowSelection.rowsIds(selection);
+            this.selectionController.selection = undefined;
+            this.logic.view.rowsDelete(rows);
+            this.logic.ui$.value?.requestUpdate();
+            return;
+        }
+        const { focus, rowsSelection, columnsSelection, isEditing, groupKey } = selection;
+        if (focus && !isEditing) {
+            if (rowsSelection && columnsSelection) {
+                // multi cell
+                for (let i = rowsSelection.start; i <= rowsSelection.end; i++) {
+                    const { start, end } = columnsSelection;
+                    for (let j = start; j <= end; j++) {
+                        const container = this.selectionController.getCellContainer(groupKey, i, j);
                         const rowId = container?.dataset.rowId;
                         const columnId = container?.dataset.columnId;
                         if (rowId && columnId) {
@@ -52,6 +39,25 @@ export class TableHotkeysController {
                         }
                     }
                 }
+            }
+            else {
+                // single cell
+                const container = this.selectionController.getCellContainer(groupKey, focus.rowIndex, focus.columnIndex);
+                const rowId = container?.dataset.rowId;
+                const columnId = container?.dataset.columnId;
+                if (rowId && columnId) {
+                    container?.column.valueSetFromString(rowId, '');
+                }
+            }
+        }
+    }
+    hostConnected() {
+        this.host?.disposables.add(this.logic.bindHotkey({
+            Backspace: () => {
+                this._handleDeleteOrBackspace();
+            },
+            Delete: () => {
+                this._handleDeleteOrBackspace();
             },
             Escape: () => {
                 const selection = this.selectionController.selection;

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

@@ -1,7 +1,7 @@
 import { ShadowlessElement } from '../../../../../std/index.js';
 import type { ReactiveController } from 'lit';
 import type { Ref } from 'lit/directives/ref.js';
-import { type CellFocus, type MultiSelection, RowWithGroup, TableViewAreaSelection, type TableViewSelection, type TableViewSelectionWithType } from '../../selection';
+import { type CellFocus, type MultiSelection, RowWithGroup, TableViewAreaSelection, type TableViewSelection, type TableViewSelectionWithType } from '../../selection.js';
 import type { TableViewCellContainer } from '../cell.js';
 import type { TableRowView } from '../row/row.js';
 import type { TableViewUILogic } from '../table-view-ui-logic.js';

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

@@ -40,7 +40,7 @@ import { property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { autoScrollOnBoundary } from '../../../../core/utils/auto-scroll.js';
 import { startDrag } from '../../../../core/utils/drag.js';
-import { RowWithGroup, TableViewAreaSelection, TableViewRowSelection, } from '../../selection';
+import { RowWithGroup, TableViewAreaSelection, TableViewRowSelection, } from '../../selection.js';
 import { DragToFillElement, fillSelectionWithFocusCellData, } from './drag-to-fill.js';
 export class TableSelectionController {
     get areaSelectionElement() {

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

@@ -5,6 +5,15 @@ 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;
+    collapsed$: import("@preact/signals-core").Signal<boolean>;
+    private storageLoaded;
+    /**
+     * 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
+     * id and pin the group open.
+     */
+    private _loadCollapsedState;
+    private readonly _toggleCollapse;
     private readonly clickAddRow;
     private readonly clickAddRowInStart;
     private readonly clickGroupOptions;
@@ -14,6 +23,7 @@ export declare class TableGroup extends TableGroup_base {
     showIndicator: () => void;
     get rows(): Row[];
     private renderRows;
+    willUpdate(changed: Map<PropertyKey, unknown>): void;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     accessor rowsContainer: HTMLElement | null;

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

@@ -34,19 +34,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 } from '@blocksuite/icons/lit';
+import { PlusIcon, ToggleDownIcon, ToggleRightIcon, } from '@blocksuite/icons/lit';
 import { ShadowlessElement } from '../../../../std/index.js';
-import { effect } from '@preact/signals-core';
+import { effect, signal } from '@preact/signals-core';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { css, html, unsafeCSS } from 'lit';
+import { css, html, nothing, unsafeCSS } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { GroupTitle } from '../../../core/group-by/group-title.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 { getCollapsedState, setCollapsedState } from '../collapsed-state.js';
 import { LEFT_TOOL_BAR_WIDTH } from '../consts.js';
-import { TableViewAreaSelection } from '../selection';
+import { TableViewAreaSelection } from '../selection.js';
 import { DataViewColumnPreview } from './header/column-renderer.js';
 import { getVerticalIndicator } from './header/vertical-indicator.js';
 const styles = css `
@@ -85,6 +86,28 @@ const styles = css `
     line-height: 20px;
     color: var(--affine-text-secondary-color);
   }
+
+  .group-toggle-btn {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 150ms cubic-bezier(0.42, 0, 1, 1);
+  }
+
+  .group-toggle-btn:hover {
+    background: var(--affine-hover-color);
+  }
+
+  .group-toggle-btn svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    user-select: none;
+  }
 `;
 let TableGroup = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
@@ -109,6 +132,20 @@ let TableGroup = (() => {
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = styles; }
+        /**
+         * 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
+         * id and pin the group open.
+         */
+        _loadCollapsedState() {
+            if (this.storageLoaded)
+                return;
+            this.storageLoaded = true;
+            const view = this.tableViewLogic?.view;
+            if (!view)
+                return;
+            this.collapsed$.value = getCollapsedState(view.id, this.group?.key ?? 'all');
+        }
         #group_accessor_storage;
         get group() { return this.#group_accessor_storage; }
         set group(value) { this.#group_accessor_storage = value; }
@@ -153,12 +190,25 @@ let TableGroup = (() => {
       </affine-database-column-stats>
     `;
         }
+        willUpdate(changed) {
+            super.willUpdate(changed);
+            if (!this.storageLoaded &&
+                (changed.has('group') || changed.has('tableViewLogic'))) {
+                this._loadCollapsedState();
+            }
+        }
         connectedCallback() {
             super.connectedCallback();
             this.showIndicator();
+            this._loadCollapsedState();
         }
         render() {
-            return this.renderRows(this.rows);
+            // Collapsed, only the header survives — the column header, the rows, the
+            // add-row affordance and the stats row all fold away with them.
+            return html `
+      ${this.collapsed$.value ? this.renderGroupHeader() : nothing}
+      ${this.collapsed$.value ? nothing : this.renderRows(this.rows)}
+    `;
         }
         #rowsContainer_accessor_storage;
         get rowsContainer() { return this.#rowsContainer_accessor_storage; }
@@ -171,6 +221,17 @@ let TableGroup = (() => {
         }
         constructor() {
             super(...arguments);
+            this.collapsed$ = signal(false);
+            this.storageLoaded = false;
+            this._toggleCollapse = (e) => {
+                e?.stopPropagation();
+                const next = !this.collapsed$.value;
+                this.collapsed$.value = next;
+                const view = this.tableViewLogic?.view;
+                if (view) {
+                    setCollapsedState(view.id, this.group?.key ?? 'all', next);
+                }
+            };
             this.clickAddRow = () => {
                 this.view.rowAdd('end', this.group?.key);
                 const selectionController = this.tableViewLogic.selectionController;
@@ -236,8 +297,26 @@ let TableGroup = (() => {
                 }
                 return html `
       <div
-        style="position: sticky;left: 0;width: max-content;padding: 6px 0;margin-bottom: 4px;display:flex;align-items:center;gap: 12px;max-width: 400px"
+        style="position: sticky;left: 0;width: max-content;padding: 6px 0;margin-bottom: 4px;display:flex;align-items:center;gap: 8px;max-width: 400px"
       >
+        <div
+          class="group-toggle-btn"
+          role="button"
+          aria-expanded=${this.collapsed$.value ? 'false' : 'true'}
+          aria-label=${this.collapsed$.value ? 'Expand group' : 'Collapse group'}
+          tabindex="0"
+          @click=${this._toggleCollapse}
+          @keydown=${(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this._toggleCollapse();
+                    }
+                }}
+        >
+          ${this.collapsed$.value
+                    ? ToggleRightIcon({ width: '16px', height: '16px' })
+                    : ToggleDownIcon({ width: '16px', height: '16px' })}
+        </div>
         ${GroupTitle(this.group, {
                     readonly: this.view.readonly$.value,
                     clickAdd: this.clickAddRowInStart,

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

@@ -43,7 +43,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 import { cellDivider } from '../../styles.js';
-import { tableStyle } from '../table-view-style';
+import { tableStyle } from '../table-view-style.js';
 import {} from '../table-view-ui-logic.js';
 import { styles } from './styles.js';
 let DatabaseColumnHeader = (() => {

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

@@ -1,7 +1,7 @@
 import { menu, popFilterableSimpleMenu, } from '../../../../affine-components/context-menu/index.js';
 import { CopyIcon, DeleteIcon, ExpandFullIcon, MoveLeftIcon, MoveRightIcon, } from '@blocksuite/icons/lit';
 import { html } from 'lit';
-import { TableViewRowSelection } from '../selection';
+import { TableViewRowSelection } from '../selection.js';
 export const openDetail = (tableViewLogic, rowId, selection) => {
     const old = selection.selection;
     selection.selection = undefined;

package/dist/_pkgs/data-view/view-presets/table/pc/row/row-select-checkbox.d.ts

@@ -1,5 +1,5 @@
 import { ShadowlessElement } from '../../../../../std/index.js';
-import type { TableViewUILogic } from '../table-view-ui-logic';
+import type { TableViewUILogic } from '../table-view-ui-logic.js';
 declare const RowSelectCheckbox_base: typeof ShadowlessElement & import("../../../../../global/utils/types.js").Constructor<import("../../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class RowSelectCheckbox extends RowSelectCheckbox_base {
     static styles: import("lit").CSSResult;

package/dist/_pkgs/data-view/view-presets/table/pc/row/row-select-checkbox.js

@@ -39,7 +39,7 @@ import { computed } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { TableViewRowSelection } from '../../selection';
+import { TableViewRowSelection } from '../../selection.js';
 let RowSelectCheckbox = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
     let _groupKey_decorators;

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

@@ -1,5 +1,5 @@
 import { ShadowlessElement } from '../../../../../std/index.js';
-import { type TableViewSelection } from '../../selection';
+import { type TableViewSelection } from '../../selection.js';
 import type { TableViewUILogic } from '../table-view-ui-logic.js';
 declare const TableRowView_base: typeof ShadowlessElement & import("../../../../../global/utils/types.js").Constructor<import("../../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class TableRowView extends TableRowView_base {

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

@@ -42,8 +42,8 @@ import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
-import { TableViewRowSelection, } from '../../selection';
-import { cellDivider } from '../../styles';
+import { TableViewRowSelection, } from '../../selection.js';
+import { cellDivider } from '../../styles.js';
 import { openDetail, popRowMenu } from '../menu.js';
 let TableRowView = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { LEFT_TOOL_BAR_WIDTH } from '../consts';
+import { LEFT_TOOL_BAR_WIDTH } from '../consts.js';
 export const tableViewStyle = css({
     position: 'relative',
     display: 'flex',

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

@@ -2,7 +2,7 @@ import type { InsertToPosition } from '../../../../affine-shared/utils/index.js'
 import type { TemplateResult } from 'lit';
 import type { GroupTrait } from '../../../core/group-by/trait.js';
 import { DataViewUIBase, DataViewUILogicBase } from '../../../core/view/data-view-base.js';
-import type { TableViewSelectionWithType } from '../selection';
+import type { TableViewSelectionWithType } from '../selection.js';
 import type { TableSingleView } from '../table-view-manager.js';
 import { TableClipboardController } from './controller/clipboard.js';
 import { TableDragController } from './controller/drag.js';

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

@@ -11,7 +11,7 @@ import { TableClipboardController } from './controller/clipboard.js';
 import { TableDragController } from './controller/drag.js';
 import { TableHotkeysController } from './controller/hotkeys.js';
 import { TableSelectionController } from './controller/selection.js';
-import { addGroupIconStyle, addGroupStyle, tableGroupsContainerStyle, tableScrollContainerStyle, tableViewStyle, tableWrapperStyle, } from './table-view-style';
+import { addGroupIconStyle, addGroupStyle, tableGroupsContainerStyle, tableScrollContainerStyle, tableViewStyle, tableWrapperStyle, } from './table-view-style.js';
 export class TableViewUILogic extends DataViewUILogicBase {
     constructor() {
         super(...arguments);

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

@@ -1,5 +1,5 @@
 import { DisposableGroup } from '../../../../../global/disposable/index.js';
-import { TableViewAreaSelection, TableViewRowSelection, } from '../../selection';
+import { TableViewAreaSelection, TableViewRowSelection, } from '../../selection.js';
 const BLOCKSUITE_DATABASE_TABLE = 'blocksuite/database/table';
 const TEXT = 'text/plain';
 export class TableClipboardController {

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/controller/drag-to-fill.d.ts

@@ -1,5 +1,5 @@
 import { ShadowlessElement } from '../../../../../std/index.js';
-import type { TableViewAreaSelection } from '../../selection';
+import type { TableViewAreaSelection } from '../../selection.js';
 import type { VirtualTableViewUILogic } from '../table-view-ui-logic.js';
 export declare class DragToFillElement extends ShadowlessElement {
     static styles: import("lit").CSSResult;

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/controller/drag-to-fill.js

@@ -37,7 +37,7 @@ import {} from '../../../../../store/index.js';
 import { css, html } from 'lit';
 import { state } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import isEqual from 'lodash-es/isEqual';
+import isEqual from 'lodash-es/isEqual.js';
 import * as Y from 'yjs';
 import { t } from '../../../../core/index.js';
 let DragToFillElement = (() => {

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/controller/drag.d.ts

@@ -1,6 +1,6 @@
 import type { InsertToPosition } from '../../../../../affine-shared/utils/index.js';
 import type { ReactiveController } from 'lit';
-import type { VirtualTableViewUILogic } from '../table-view-ui-logic';
+import type { VirtualTableViewUILogic } from '../table-view-ui-logic.js';
 export declare class TableDragController implements ReactiveController {
     private readonly logic;
     dropPreview: {
@@ -22,6 +22,6 @@ export declare class TableDragController implements ReactiveController {
         x: number;
     } | undefined;
     constructor(logic: VirtualTableViewUILogic);
-    get host(): import("../table-view-ui-logic").TableViewUI | undefined;
+    get host(): import("../table-view-ui-logic.js").TableViewUI | undefined;
     hostConnected(): void;
 }

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/controller/hotkeys.d.ts

@@ -1,11 +1,12 @@
 import { DisposableGroup } from '../../../../../global/disposable/index.js';
 import type { ReactiveController } from 'lit';
-import type { VirtualTableViewUILogic } from '../table-view-ui-logic';
+import type { VirtualTableViewUILogic } from '../table-view-ui-logic.js';
 export declare class TableHotkeysController implements ReactiveController {
     private readonly logic;
     disposables: DisposableGroup;
     get selectionController(): import("./selection.js").TableSelectionController;
     constructor(logic: VirtualTableViewUILogic);
-    get host(): import("../table-view-ui-logic").TableViewUI | undefined;
+    get host(): import("../table-view-ui-logic.js").TableViewUI | undefined;
+    private _handleDeleteOrBackspace;
     hostConnected(): void;
 }

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

@@ -1,8 +1,8 @@
 import { popupTargetFromElement } from '../../../../../affine-components/context-menu/index.js';
 import { DisposableGroup } from '../../../../../global/disposable/index.js';
-import { TableViewAreaSelection, TableViewRowSelection } from '../../selection';
+import { TableViewAreaSelection, TableViewRowSelection } from '../../selection.js';
 import { handleCharStartEdit } from '../../utils.js';
-import { popRowMenu } from '../row/menu';
+import { popRowMenu } from '../row/menu.js';
 export class TableHotkeysController {
     get selectionController() {
         return this.logic.selectionController;
@@ -14,39 +14,26 @@ export class TableHotkeysController {
     get host() {
         return this.logic.ui$.value;
     }
-    hostConnected() {
-        this.disposables.add(this.logic.bindHotkey({
-            Backspace: () => {
-                const selection = this.selectionController.selection;
-                if (!selection) {
-                    return;
-                }
-                if (TableViewRowSelection.is(selection)) {
-                    const rows = TableViewRowSelection.rowsIds(selection);
-                    this.selectionController.selection = undefined;
-                    this.logic.view.rowsDelete(rows);
-                    this.logic.ui$.value?.requestUpdate();
-                    return;
-                }
-                const { focus, rowsSelection, columnsSelection, isEditing, groupKey, } = selection;
-                if (focus && !isEditing) {
-                    if (rowsSelection && columnsSelection) {
-                        // multi cell
-                        for (let i = rowsSelection.start; i <= rowsSelection.end; i++) {
-                            const { start, end } = columnsSelection;
-                            for (let j = start; j <= end; j++) {
-                                const container = this.selectionController.getCellContainer(groupKey, i, j);
-                                const rowId = container?.dataset.rowId;
-                                const columnId = container?.dataset.columnId;
-                                if (rowId && columnId) {
-                                    container?.column$.value?.valueSetFromString(rowId, '');
-                                }
-                            }
-                        }
-                    }
-                    else {
-                        // single cell
-                        const container = this.selectionController.getCellContainer(groupKey, focus.rowIndex, focus.columnIndex);
+    _handleDeleteOrBackspace() {
+        const selection = this.selectionController.selection;
+        if (!selection) {
+            return;
+        }
+        if (TableViewRowSelection.is(selection)) {
+            const rows = TableViewRowSelection.rowsIds(selection);
+            this.selectionController.selection = undefined;
+            this.logic.view.rowsDelete(rows);
+            this.logic.ui$.value?.requestUpdate();
+            return;
+        }
+        const { focus, rowsSelection, columnsSelection, isEditing, groupKey } = selection;
+        if (focus && !isEditing) {
+            if (rowsSelection && columnsSelection) {
+                // multi cell
+                for (let i = rowsSelection.start; i <= rowsSelection.end; i++) {
+                    const { start, end } = columnsSelection;
+                    for (let j = start; j <= end; j++) {
+                        const container = this.selectionController.getCellContainer(groupKey, i, j);
                         const rowId = container?.dataset.rowId;
                         const columnId = container?.dataset.columnId;
                         if (rowId && columnId) {
@@ -54,6 +41,25 @@ export class TableHotkeysController {
                         }
                     }
                 }
+            }
+            else {
+                // single cell
+                const container = this.selectionController.getCellContainer(groupKey, focus.rowIndex, focus.columnIndex);
+                const rowId = container?.dataset.rowId;
+                const columnId = container?.dataset.columnId;
+                if (rowId && columnId) {
+                    container?.column$.value?.valueSetFromString(rowId, '');
+                }
+            }
+        }
+    }
+    hostConnected() {
+        this.disposables.add(this.logic.bindHotkey({
+            Backspace: () => {
+                this._handleDeleteOrBackspace();
+            },
+            Delete: () => {
+                this._handleDeleteOrBackspace();
             },
             Escape: () => {
                 const selection = this.selectionController.selection;

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/controller/selection.d.ts

@@ -2,8 +2,8 @@ import { DisposableGroup } from '../../../../../global/disposable/index.js';
 import { ShadowlessElement } from '../../../../../std/index.js';
 import { type ReadonlySignal } from '@preact/signals-core';
 import type { ReactiveController } from 'lit';
-import { RowWithGroup, TableViewAreaSelection, type TableViewSelection, type TableViewSelectionWithType } from '../../selection';
-import type { DatabaseCellContainer } from '../row/cell';
+import { RowWithGroup, TableViewAreaSelection, type TableViewSelection, type TableViewSelectionWithType } from '../../selection.js';
+import type { DatabaseCellContainer } from '../row/cell.js';
 import type { VirtualTableViewUILogic } from '../table-view-ui-logic.js';
 import type { TableGridCell } from '../types.js';
 import { DragToFillElement } from './drag-to-fill.js';

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

@@ -42,7 +42,7 @@ import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { autoScrollOnBoundary } from '../../../../core/utils/auto-scroll.js';
 import { startDrag } from '../../../../core/utils/drag.js';
-import { RowWithGroup, TableViewAreaSelection, TableViewRowSelection, } from '../../selection';
+import { RowWithGroup, TableViewAreaSelection, TableViewRowSelection, } from '../../selection.js';
 import { DragToFillElement, fillSelectionWithFocusCellData, } from './drag-to-fill.js';
 export class TableSelectionController {
     // private get areaSelectionElement() {

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

@@ -1,20 +1,20 @@
-import { KanbanViewUI } from '../../kanban/pc/kanban-view-ui-logic';
-import { DragToFillElement } from './controller/drag-to-fill';
-import { SelectionElement } from './controller/selection';
-import { TableGroupFooter } from './group/bottom/group-footer';
-import { VirtualDataBaseColumnStats } from './group/bottom/stats/column-stats-bar';
-import { VirtualDatabaseColumnStatsCell } from './group/bottom/stats/column-stats-column';
-import { TableGroupHeader } from './group/top/group-header';
-import { VirtualTableHeader } from './group/top/header/column-header';
-import { DataViewColumnPreview } from './group/top/header/column-move-preview';
-import { DatabaseNumberFormatBar } from './group/top/header/number-format-bar';
-import { DatabaseHeaderColumn } from './group/top/header/single-column-header';
-import { TableVerticalIndicator } from './group/top/header/vertical-indicator';
-import { DatabaseCellContainer } from './row/cell';
-import { TableRowHeader } from './row/row-header';
-import { TableRowLast } from './row/row-last';
-import { TableViewUI } from './table-view-ui-logic';
-import { VirtualElementWrapper } from './virtual/virtual-cell';
+import { KanbanViewUI } from '../../kanban/pc/kanban-view-ui-logic.js';
+import { DragToFillElement } from './controller/drag-to-fill.js';
+import { SelectionElement } from './controller/selection.js';
+import { TableGroupFooter } from './group/bottom/group-footer.js';
+import { VirtualDataBaseColumnStats } from './group/bottom/stats/column-stats-bar.js';
+import { VirtualDatabaseColumnStatsCell } from './group/bottom/stats/column-stats-column.js';
+import { TableGroupHeader } from './group/top/group-header.js';
+import { VirtualTableHeader } from './group/top/header/column-header.js';
+import { DataViewColumnPreview } from './group/top/header/column-move-preview.js';
+import { DatabaseNumberFormatBar } from './group/top/header/number-format-bar.js';
+import { DatabaseHeaderColumn } from './group/top/header/single-column-header.js';
+import { TableVerticalIndicator } from './group/top/header/vertical-indicator.js';
+import { DatabaseCellContainer } from './row/cell.js';
+import { TableRowHeader } from './row/row-header.js';
+import { TableRowLast } from './row/row-last.js';
+import { TableViewUI } from './table-view-ui-logic.js';
+import { VirtualElementWrapper } from './virtual/virtual-cell.js';
 export function pcVirtualEffects() {
     customElements.define('dv-table-view-ui-virtual', TableViewUI);
     customElements.define('dv-kanban-view-ui', KanbanViewUI);

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

@@ -1,6 +1,6 @@
 import { ShadowlessElement } from '../../../../../../std/index.js';
-import type { VirtualTableViewUILogic } from '../../table-view-ui-logic';
-import type { TableGridGroup } from '../../types';
+import type { VirtualTableViewUILogic } from '../../table-view-ui-logic.js';
+import type { TableGridGroup } from '../../types.js';
 declare const TableGroupFooter_base: typeof ShadowlessElement & import("../../../../../../global/utils/types.js").Constructor<import("../../../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class TableGroupFooter extends TableGroupFooter_base {
     accessor tableViewLogic: VirtualTableViewUILogic;

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

@@ -38,8 +38,8 @@ import { ShadowlessElement } from '../../../../../../std/index.js';
 import { computed } from '@preact/signals-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { TableViewAreaSelection } from '../../../selection';
-import * as styles from './group-footer-css';
+import { TableViewAreaSelection } from '../../../selection.js';
+import * as styles from './group-footer-css.js';
 let TableGroupFooter = (() => {
     let _classSuper = WithDisposable(ShadowlessElement);
     let _tableViewLogic_decorators;

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/group/bottom/stats/column-stats-bar.d.ts

@@ -1,6 +1,6 @@
 import { ShadowlessElement } from '../../../../../../../std/index.js';
-import type { Group } from '../../../../../../core/group-by/trait';
-import type { TableSingleView } from '../../../../table-view-manager';
+import type { Group } from '../../../../../../core/group-by/trait.js';
+import type { TableSingleView } from '../../../../table-view-manager.js';
 declare const VirtualDataBaseColumnStats_base: typeof ShadowlessElement & import("../../../../../../../global/utils/types.js").Constructor<import("../../../../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class VirtualDataBaseColumnStats extends VirtualDataBaseColumnStats_base {
     static styles: import("lit").CSSResult;