@formicoidea/labre-core 0.53.0 → 0.55.0

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

@@ -35,15 +35,22 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { unsafeCSSVarV2 } from '../../../../affine-shared/theme/index.js';
 import { SignalWatcher, WithDisposable } from '../../../../global/lit/index.js';
 import { PlusIcon } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
-import { css } from 'lit';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
+import { css, nothing } from 'lit';
 import { property, query } 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 { wordingOf } from '../../../core/utils/wording.js';
+import { DATA_VIEW_NEW_PROPERTY } from '../../../translations.js';
 import { cellDivider } from '../styles.js';
+import { mobileStickyTitle } from './table-view-style.js';
 let MobileTableHeader = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _renderGroupHeader_decorators;
     let _renderGroupHeader_initializers = [];
     let _renderGroupHeader_extraInitializers = [];
@@ -56,9 +63,11 @@ let MobileTableHeader = (() => {
     return class MobileTableHeader extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _renderGroupHeader_decorators = [property({ attribute: false })];
             _scaleDiv_decorators = [query('.scale-div')];
             _tableViewManager_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, _renderGroupHeader_decorators, { kind: "accessor", name: "renderGroupHeader", static: false, private: false, access: { has: obj => "renderGroupHeader" in obj, get: obj => obj.renderGroupHeader, set: (obj, value) => { obj.renderGroupHeader = value; } }, metadata: _metadata }, _renderGroupHeader_initializers, _renderGroupHeader_extraInitializers);
             __esDecorate(this, null, _scaleDiv_decorators, { kind: "accessor", name: "scaleDiv", static: false, private: false, access: { has: obj => "scaleDiv" in obj, get: obj => obj.scaleDiv, set: (obj, value) => { obj.scaleDiv = value; } }, metadata: _metadata }, _scaleDiv_initializers, _scaleDiv_extraInitializers);
             __esDecorate(this, null, _tableViewManager_decorators, { kind: "accessor", name: "tableViewManager", static: false, private: false, access: { has: obj => "tableViewManager" in obj, get: obj => obj.tableViewManager, set: (obj, value) => { obj.tableViewManager = value; } }, metadata: _metadata }, _tableViewManager_initializers, _tableViewManager_extraInitializers);
@@ -68,11 +77,18 @@ let MobileTableHeader = (() => {
     .mobile-table-add-column {
       font-size: 18px;
       color: ${unsafeCSSVarV2('icon/primary')};
-      margin-left: 8px;
       display: flex;
       align-items: center;
+      justify-content: center;
+      min-width: 44px;
+      min-height: 44px;
+      cursor: pointer;
     }
   `; }
+        #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; }
         get readonly() {
             return this.tableViewManager.readonly$.value;
         }
@@ -85,21 +101,36 @@ let MobileTableHeader = (() => {
                     width: `${column.width$.value}px`,
                     border: index === 0 ? 'none' : undefined,
                 });
+                const isTitle = this.tableViewManager.mainProperties$.value.titleColumn ===
+                    column.id;
                 return html `
-              <mobile-table-column-header
-                style="${style}"
-                data-column-id="${column.id}"
-                data-column-index="${index}"
-                class="mobile-table-cell"
-                .column="${column}"
-                .tableViewManager="${this.tableViewManager}"
-              ></mobile-table-column-header>
-              <div class="${cellDivider}" style="height: auto;"></div>
+              <div
+                class="${isTitle ? mobileStickyTitle : ''}"
+                style="display: flex;"
+              >
+                <mobile-table-column-header
+                  style="${style}"
+                  data-column-id="${column.id}"
+                  data-column-index="${index}"
+                  class="mobile-table-cell"
+                  .column="${column}"
+                  .tableViewManager="${this.tableViewManager}"
+                ></mobile-table-column-header>
+                <div class="${cellDivider}" style="height: auto;"></div>
+              </div>
             `;
             })}
-        <div @click="${this._onAddColumn}" class="mobile-table-add-column">
-          ${PlusIcon()}
-        </div>
+        ${this.readonly
+                ? nothing
+                : html `<div
+              @click="${this._onAddColumn}"
+              class="mobile-table-add-column"
+              data-testid="dv-table-add-property"
+              role="button"
+              aria-label="${wordingOf(this.std)(DATA_VIEW_NEW_PROPERTY)}"
+            >
+              ${PlusIcon()}
+            </div>`}
         <div class="scale-div" style="width: 1px;height: 1px;"></div>
       </div>
     `;
@@ -115,17 +146,26 @@ let MobileTableHeader = (() => {
         set tableViewManager(value) { this.#tableViewManager_accessor_storage = value; }
         constructor() {
             super(...arguments);
-            this._onAddColumn = () => {
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            /**
+             * "+" adds a property and opens ITS "Property settings" sheet. Up to 0.54
+             * the last header was looked up in the same tick, before the header had
+             * drawn the new column, so the sheet opened on the previous last property.
+             */
+            this._onAddColumn = (__runInitializers(this, _std_extraInitializers), () => {
                 if (this.readonly)
                     return;
-                this.tableViewManager.propertyAdd('end');
-                this.editLastColumnTitle();
-            };
-            this.editLastColumnTitle = () => {
-                const columns = this.querySelectorAll('mobile-table-column-header');
-                const column = columns.item(columns.length - 1);
-                column.editTitle();
-            };
+                const id = this.tableViewManager.propertyAdd('end');
+                if (!id)
+                    return;
+                this.updateComplete
+                    .then(() => {
+                    Array.from(this.querySelectorAll('mobile-table-column-header'))
+                        .find(header => header.column.id === id)
+                        ?.editTitle();
+                })
+                    .catch(console.error);
+            });
             this.#renderGroupHeader_accessor_storage = __runInitializers(this, _renderGroupHeader_initializers, void 0);
             this.#scaleDiv_accessor_storage = (__runInitializers(this, _renderGroupHeader_extraInitializers), __runInitializers(this, _scaleDiv_initializers, void 0));
             this.#tableViewManager_accessor_storage = (__runInitializers(this, _scaleDiv_extraInitializers), __runInitializers(this, _tableViewManager_initializers, void 0));

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

@@ -1,4 +1,6 @@
 import { type PopupTarget } from '../../../../affine-components/context-menu/index.js';
 import type { SingleView } from '../../../core/index.js';
+import { type Wording } from '../../../core/utils/wording.js';
 import type { MobileTableViewUILogic } from './table-view-ui-logic.js';
-export declare const popMobileRowMenu: (target: PopupTarget, rowId: string, tableViewLogic: MobileTableViewUILogic, view: SingleView) => void;
+/** A row's menu on a phone, opened by a long press on the row. */
+export declare const popMobileRowMenu: (target: PopupTarget, rowId: string, tableViewLogic: MobileTableViewUILogic, view: SingleView, wording?: Wording) => void;

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

@@ -1,11 +1,15 @@
 import { menu, popFilterableSimpleMenu, } from '../../../../affine-components/context-menu/index.js';
+import { OPEN_LABEL } from '../../../../affine-components/translations.js';
+import { TOOLBAR_DELETE } from '../../../../affine-shared/services/index.js';
 import { DeleteIcon, ExpandFullIcon } from '@blocksuite/icons/lit';
-export const popMobileRowMenu = (target, rowId, tableViewLogic, view) => {
+import { englishWording } from '../../../core/utils/wording.js';
+/** A row's menu on a phone, opened by a long press on the row. */
+export const popMobileRowMenu = (target, rowId, tableViewLogic, view, wording = englishWording) => {
     popFilterableSimpleMenu(target, [
         menu.group({
             items: [
                 menu.action({
-                    name: 'Expand Row',
+                    name: wording(OPEN_LABEL),
                     prefix: ExpandFullIcon(),
                     select: () => {
                         tableViewLogic.root.openDetailPanel({
@@ -20,7 +24,7 @@ export const popMobileRowMenu = (target, rowId, tableViewLogic, view) => {
             name: '',
             items: [
                 menu.action({
-                    name: 'Delete Row',
+                    name: wording(TOOLBAR_DELETE),
                     class: { 'delete-item': true },
                     prefix: DeleteIcon(),
                     select: () => {

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

@@ -1,8 +1,30 @@
-import { ShadowlessElement } from '../../../../std/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../../std/index.js';
 import type { MobileTableViewUILogic } from './table-view-ui-logic.js';
+/** The "Open" chip's widest drawing, its 8px inset and 4px of air. */
+export declare const ROW_OPEN_WIDTH: number;
+/** How long a finger rests on a row before its menu opens. */
+export declare const ROW_LONG_PRESS_MS = 500;
 declare const MobileTableRow_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
+/**
+ * A row of the phone table (P7, "Bases éditables sur mobile", after Notion's
+ * phone table). A tap on a cell edits it; the title column carries an "Open"
+ * chip that opens the row through the root's detail panel, the path of the
+ * desktop row's open button; a long press opens the row menu (open, delete).
+ *
+ * Up to 0.54 the title cell carried two floating ops (open and "...") drawn
+ * over the end of the title. The chip reserves its room instead, and the
+ * "..." moved to the long press so deleting a row stays possible on a phone.
+ */
 export declare class MobileTableRow extends MobileTableRow_base {
     static styles: import("lit").CSSResult;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
+    private pressTimer;
+    private pressOrigin;
+    /** A long press fired: the click the finger's release makes is eaten. */
+    private pressFired;
+    private readonly cancelPress;
+    private readonly openRow;
     get groupKey(): string | undefined;
     connectedCallback(): void;
     protected render(): unknown;

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

@@ -33,21 +33,42 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { popupTargetFromElement } from '../../../../affine-components/context-menu/index.js';
-import { unsafeCSSVarV2 } from '../../../../affine-shared/theme/index.js';
+import { OPEN_LABEL } from '../../../../affine-components/translations.js';
 import { SignalWatcher, WithDisposable } from '../../../../global/lit/index.js';
-import { CenterPeekIcon, MoreHorizontalIcon } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { css, nothing, unsafeCSS } from 'lit';
 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 { wordingOf } from '../../../core/utils/wording.js';
 import { paintRowColor, ROW_COLOR_PROPERTY, viewRowColor, } from '../../../core/view/color-rules.js';
 import { cellDivider } from '../styles.js';
 import { popMobileRowMenu } from './menu.js';
+import { mobileStickyTitle } from './table-view-style.js';
+/** The "Open" chip's widest drawing, its 8px inset and 4px of air. */
+export const ROW_OPEN_WIDTH = 60 + 8 + 4;
+/** How long a finger rests on a row before its menu opens. */
+export const ROW_LONG_PRESS_MS = 500;
+/** A finger that travels further is scrolling, not pressing. */
+const LONG_PRESS_SLOP = 8;
+/**
+ * A row of the phone table (P7, "Bases éditables sur mobile", after Notion's
+ * phone table). A tap on a cell edits it; the title column carries an "Open"
+ * chip that opens the row through the root's detail panel, the path of the
+ * desktop row's open button; a long press opens the row menu (open, delete).
+ *
+ * Up to 0.54 the title cell carried two floating ops (open and "...") drawn
+ * over the end of the title. The chip reserves its room instead, and the
+ * "..." moved to the long press so deleting a row stays possible on a phone.
+ */
 let MobileTableRow = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _tableViewLogic_decorators;
     let _tableViewLogic_initializers = [];
     let _tableViewLogic_extraInitializers = [];
@@ -60,16 +81,18 @@ let MobileTableRow = (() => {
     return class MobileTableRow extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _tableViewLogic_decorators = [property({ attribute: false })];
             _rowId_decorators = [property({ attribute: false })];
             _rowIndex_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, _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);
             __esDecorate(this, null, _rowId_decorators, { kind: "accessor", name: "rowId", static: false, private: false, access: { has: obj => "rowId" in obj, get: obj => obj.rowId, set: (obj, value) => { obj.rowId = value; } }, metadata: _metadata }, _rowId_initializers, _rowId_extraInitializers);
             __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.
+        // Touch targets are 44px tall (B5, ADR 0035 §1): the row, and the chip
+        // through an invisible hit area, so it keeps its drawn size.
         static { this.styles = css `
     .mobile-table-row {
       width: 100%;
@@ -79,71 +102,114 @@ let MobileTableRow = (() => {
       position: relative;
       min-height: 44px;
       background-color: var(${unsafeCSS(ROW_COLOR_PROPERTY)}, transparent);
+      -webkit-touch-callout: none;
     }
 
-    .mobile-row-ops {
-      position: relative;
-      width: 0;
-      margin-top: 5px;
-      height: max-content;
-      display: flex;
-      gap: 20px;
-      cursor: pointer;
-      justify-content: end;
-      right: 8px;
+    /* A long press opens the row menu, not a text selection; an edited cell
+       keeps its own. */
+    .mobile-table-row mobile-table-cell:not([data-editing='true']) {
+      -webkit-user-select: none;
+      user-select: none;
     }
 
-    .affine-database-block-row:has([data-editing='true']) .mobile-row-ops {
-      visibility: hidden;
-      opacity: 0;
-    }
-
-    .mobile-row-op {
+    .mobile-row-open {
+      position: absolute;
+      top: 10px;
+      right: 8px;
       display: flex;
-      padding: 4px;
+      align-items: center;
+      height: 24px;
+      max-width: 60px;
+      padding: 0 6px;
+      box-sizing: border-box;
+      border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
       border-radius: 4px;
-      box-shadow: 0px 0px 4px 0px rgba(66, 65, 73, 0.14);
       background-color: var(--affine-background-primary-color);
-      position: relative;
-      font-size: 16px;
-      color: ${unsafeCSSVarV2('icon/primary')};
+      color: ${unsafeCSS(cssVarV2.text.secondary)};
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 20px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
     }
 
-    .mobile-row-op::after {
+    .mobile-row-open::after {
       content: '';
       position: absolute;
-      inset: -10px;
+      inset: -10px -4px;
+    }
+
+    .mobile-row-title:has(mobile-table-cell[data-editing='true'])
+      .mobile-row-open {
+      display: none;
     }
   `; }
+        #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; }
         get groupKey() {
             return this.closest('affine-data-view-table-group')?.group?.key;
         }
         connectedCallback() {
             super.connectedCallback();
             this.classList.add('mobile-table-row');
+            this.disposables.add(this.cancelPress);
+            this.disposables.addFromEvent(this, 'pointerdown', (e) => {
+                this.pressFired = false;
+                this.cancelPress();
+                if (this.view.readonly$.value)
+                    return;
+                this.pressOrigin = { x: e.clientX, y: e.clientY };
+                this.pressTimer = setTimeout(() => {
+                    this.cancelPress();
+                    this.pressFired = true;
+                    popMobileRowMenu(popupTargetFromElement(this), this.rowId, this.tableViewLogic, this.view, wordingOf(this.std));
+                }, ROW_LONG_PRESS_MS);
+            });
+            this.disposables.addFromEvent(this, 'pointermove', (e) => {
+                const origin = this.pressOrigin;
+                if (!origin)
+                    return;
+                const moved = Math.hypot(e.clientX - origin.x, e.clientY - origin.y);
+                if (moved > LONG_PRESS_SLOP)
+                    this.cancelPress();
+            });
+            this.disposables.addFromEvent(this, 'pointerup', this.cancelPress);
+            this.disposables.addFromEvent(this, 'pointercancel', this.cancelPress);
+            // Android opens its own menu on a long press; the row's is the one.
+            this.disposables.addFromEvent(this, 'contextmenu', (e) => {
+                e.preventDefault();
+            });
+            this.disposables.addFromEvent(this, 'click', (e) => {
+                if (!this.pressFired)
+                    return;
+                this.pressFired = false;
+                e.stopPropagation();
+                e.preventDefault();
+            }, { capture: true });
         }
         render() {
             const view = this.view;
             paintRowColor(this, viewRowColor(view, this.rowId));
+            const openLabel = wordingOf(this.std)(OPEN_LABEL);
             return html `
       ${repeat(view.properties$.value, v => v.id, (column, i) => {
-                const clickDetail = () => {
-                    this.tableViewLogic.root.openDetailPanel({
-                        view: this.view,
-                        rowId: this.rowId,
-                    });
-                };
-                const openMenu = (e) => {
-                    const ele = e.currentTarget;
-                    popMobileRowMenu(popupTargetFromElement(ele), this.rowId, this.tableViewLogic, this.view);
-                };
+                const isTitle = column.view.mainProperties$.value.titleColumn === column.id;
                 return html `
-            <div style="display: flex;">
+            <div
+              class="${isTitle ? `${mobileStickyTitle} mobile-row-title` : ''}"
+              style="display: flex;"
+            >
               <mobile-table-cell
                 class="mobile-table-cell"
                 style=${styleMap({
                     width: `${column.width$.value}px`,
                     border: i === 0 ? 'none' : undefined,
+                    // Room for the "Open" chip drawn over its right end.
+                    paddingRight: isTitle ? `${ROW_OPEN_WIDTH}px` : undefined,
                 })}
                 .tableViewLogic="${this.tableViewLogic}"
                 .column="${column}"
@@ -158,32 +224,30 @@ let MobileTableRow = (() => {
               >
               </mobile-table-cell>
               <div class="${cellDivider}"></div>
-            </div>
-            ${!column.readonly$.value &&
-                    column.view.mainProperties$.value.titleColumn === column.id
-                    ? html ` <div class="mobile-row-ops">
-                  <div class="mobile-row-op" @click="${clickDetail}">
-                    ${CenterPeekIcon()}
-                  </div>
-                  ${!view.readonly$.value
-                        ? html ` <div class="mobile-row-op" @click="${openMenu}">
-                        ${MoreHorizontalIcon()}
-                      </div>`
-                        : nothing}
-                </div>`
+              ${isTitle
+                    ? html `<div
+                    class="mobile-row-open"
+                    data-testid="dv-row-open"
+                    role="button"
+                    aria-label="${openLabel}"
+                    @click="${this.openRow}"
+                  >
+                    ${openLabel}
+                  </div>`
                     : nothing}
+            </div>
           `;
             })}
       <div class="database-cell add-column-button"></div>
     `;
         }
-        #tableViewLogic_accessor_storage = __runInitializers(this, _tableViewLogic_initializers, void 0);
+        #tableViewLogic_accessor_storage;
         get tableViewLogic() { return this.#tableViewLogic_accessor_storage; }
         set tableViewLogic(value) { this.#tableViewLogic_accessor_storage = value; }
-        #rowId_accessor_storage = (__runInitializers(this, _tableViewLogic_extraInitializers), __runInitializers(this, _rowId_initializers, void 0));
+        #rowId_accessor_storage;
         get rowId() { return this.#rowId_accessor_storage; }
         set rowId(value) { this.#rowId_accessor_storage = value; }
-        #rowIndex_accessor_storage = (__runInitializers(this, _rowId_extraInitializers), __runInitializers(this, _rowIndex_initializers, void 0));
+        #rowIndex_accessor_storage;
         get rowIndex() { return this.#rowIndex_accessor_storage; }
         set rowIndex(value) { this.#rowIndex_accessor_storage = value; }
         get view() {
@@ -191,6 +255,25 @@ let MobileTableRow = (() => {
         }
         constructor() {
             super(...arguments);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.pressTimer = __runInitializers(this, _std_extraInitializers);
+            /** A long press fired: the click the finger's release makes is eaten. */
+            this.pressFired = false;
+            this.cancelPress = () => {
+                clearTimeout(this.pressTimer);
+                this.pressTimer = undefined;
+                this.pressOrigin = undefined;
+            };
+            this.openRow = (e) => {
+                e.stopPropagation();
+                this.tableViewLogic.root.openDetailPanel({
+                    view: this.view,
+                    rowId: this.rowId,
+                });
+            };
+            this.#tableViewLogic_accessor_storage = __runInitializers(this, _tableViewLogic_initializers, void 0);
+            this.#rowId_accessor_storage = (__runInitializers(this, _tableViewLogic_extraInitializers), __runInitializers(this, _rowId_initializers, void 0));
+            this.#rowIndex_accessor_storage = (__runInitializers(this, _rowId_extraInitializers), __runInitializers(this, _rowIndex_initializers, void 0));
             __runInitializers(this, _rowIndex_extraInitializers);
         }
     };

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

@@ -1,3 +1,20 @@
+/**
+ * The view element itself never scrolls: the inner wrapper does.
+ *
+ * Upstream disabled horizontal scrolling of the mobile table altogether "to
+ * prevent crashes on iOS Safari" (AFFiNE#12203, blocksuite#8784), which left
+ * every column past the first unreachable on a phone. The scroll now lives on
+ * ONE inner element, contained (`overscroll-behavior`) so it never chains into
+ * the page; the host stays clipped as before.
+ * ponytail: unverified on a real iOS Safari here; if the crash comes back, the
+ * fallback is a paged column switcher, not `hidden` again.
+ */
+export declare const mobileTableViewHost: string;
 export declare const mobileTableViewWrapper: string;
+/**
+ * The title column stays in view while the others scroll under it: opaque,
+ * with the row's colour painted over the page colour.
+ */
+export declare const mobileStickyTitle: string;
 export declare const mobileTableViewContainer: string;
 export declare const mobileCellDivider: string;

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

@@ -1,16 +1,41 @@
 import { css } from '@emotion/css';
 import { cssVarV2 } from '@toeverything/theme/v2';
+import { ROW_COLOR_PROPERTY } from '../../../core/view/color-rules.js';
+/**
+ * The view element itself never scrolls: the inner wrapper does.
+ *
+ * Upstream disabled horizontal scrolling of the mobile table altogether "to
+ * prevent crashes on iOS Safari" (AFFiNE#12203, blocksuite#8784), which left
+ * every column past the first unreachable on a phone. The scroll now lives on
+ * ONE inner element, contained (`overscroll-behavior`) so it never chains into
+ * the page; the host stays clipped as before.
+ * ponytail: unverified on a real iOS Safari here; if the crash comes back, the
+ * fallback is a paged column switcher, not `hidden` again.
+ */
+export const mobileTableViewHost = css({
+    position: 'relative',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+});
 export const mobileTableViewWrapper = css({
     position: 'relative',
     width: '100%',
     paddingBottom: '4px',
-    /**
-     * Disable horizontal scrolling to prevent crashes on iOS Safari
-     * See https://github.com/toeverything/AFFiNE/pull/12203
-     * and https://github.com/toeverything/blocksuite/pull/8784
-     */
-    overflowX: 'hidden',
+    overflowX: 'auto',
     overflowY: 'hidden',
+    overscrollBehaviorX: 'contain',
+});
+/**
+ * The title column stays in view while the others scroll under it: opaque,
+ * with the row's colour painted over the page colour.
+ */
+export const mobileStickyTitle = css({
+    position: 'sticky',
+    left: 0,
+    zIndex: 1,
+    backgroundColor: 'var(--affine-background-primary-color)',
+    backgroundImage: `linear-gradient(var(${ROW_COLOR_PROPERTY}, transparent), var(${ROW_COLOR_PROPERTY}, transparent))`,
 });
 export const mobileTableViewContainer = css({
     position: 'relative',

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

@@ -8,7 +8,11 @@ export declare class MobileTableViewUILogic extends DataViewUILogicBase<TableSin
     ui$: import("@preact/signals-core").Signal<MobileTableViewUI | undefined>;
     private get readonly();
     clearSelection: () => void;
-    addRow: (position: InsertToPosition) => string | undefined;
+    /**
+     * A new row opens at once, as on the desktop table and the flat views: on a
+     * phone its title and properties are typed in the row page.
+     */
+    addRow: (position: InsertToPosition, groupKey?: string) => string | undefined;
     focusFirstCell: () => void;
     showIndicator: (_evt: MouseEvent) => boolean;
     hideIndicator: () => void;

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

@@ -7,16 +7,23 @@ import { html } from 'lit/static-html.js';
 import { createUniComponentFromWebComponent, renderUniLit, } from '../../../core/index.js';
 import { DataViewUIBase, DataViewUILogicBase, } from '../../../core/view/data-view-base.js';
 import { LEFT_TOOL_BAR_WIDTH } from '../consts.js';
-import { mobileTableViewContainer, mobileTableViewWrapper, } from './table-view-style.js';
+import { mobileTableViewContainer, mobileTableViewHost, mobileTableViewWrapper, } from './table-view-style.js';
 export class MobileTableViewUILogic extends DataViewUILogicBase {
     constructor() {
         super(...arguments);
         this.ui$ = signal(undefined);
         this.clearSelection = () => { };
-        this.addRow = (position) => {
+        /**
+         * A new row opens at once, as on the desktop table and the flat views: on a
+         * phone its title and properties are typed in the row page.
+         */
+        this.addRow = (position, groupKey) => {
             if (this.readonly)
                 return;
-            return this.view.rowAdd(position);
+            const rowId = this.view.rowAdd(position, groupKey);
+            if (rowId)
+                this.root.openDetailPanel({ view: this.view, rowId });
+            return rowId;
         };
         this.focusFirstCell = () => { };
         this.showIndicator = (_evt) => {
@@ -71,7 +78,7 @@ export class MobileTableViewUI extends DataViewUIBase {
     connectedCallback() {
         super.connectedCallback();
         this.logic.ui$.value = this;
-        this.classList.add(mobileTableViewWrapper);
+        this.classList.add(mobileTableViewHost);
     }
     renderTable() {
         const groups = this.logic.view.groupTrait.visibleGroups$.value;

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

@@ -48,7 +48,7 @@ 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 { DATA_VIEW_GROUP_COLLAPSE, DATA_VIEW_GROUP_EXPAND, DATA_VIEW_NEW_RECORD, } from '../../../translations.js';
 import { getCollapsedState, setCollapsedState } from '../collapsed-state.js';
 import { LEFT_TOOL_BAR_WIDTH } from '../consts.js';
 import { TableViewAreaSelection } from '../selection.js';
@@ -193,7 +193,9 @@ let TableGroup = (() => {
               data-test-id="affine-database-add-row-button"
               role="button"
             >
-              ${PlusIcon()}<span style="font-size: 12px">New Record</span>
+              ${PlusIcon()}<span style="font-size: 12px"
+                >${wordingOf(this.std)(DATA_VIEW_NEW_RECORD)}</span
+              >
             </div>
           </div>`}
       <affine-database-column-stats