@formicoidea/labre-core 0.52.0 → 0.54.0

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

@@ -35,17 +35,23 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { menu, popMenu, popupTargetFromElement, } from '../../../../affine-components/context-menu/index.js';
 import { unsafeCSSVarV2 } from '../../../../affine-shared/theme/index.js';
 import { SignalWatcher, WithDisposable } from '../../../../global/lit/index.js';
-import { DeleteIcon, DuplicateIcon, InsertLeftIcon, InsertRightIcon, MoveLeftIcon, MoveRightIcon, ViewIcon, } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { InsertLeftIcon, InsertRightIcon, MoveLeftIcon, MoveRightIcon, } from '@blocksuite/icons/lit';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
 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 { propertyMenuItems } from '../../../core/common/property-menu.js';
+import { wordingOf } from '../../../core/utils/wording.js';
 import { numberFormats } from '../../../property-presets/number/utils/formats.js';
+import { DATA_VIEW_INSERT_LEFT, DATA_VIEW_INSERT_RIGHT, DATA_VIEW_PROPERTY_SETTINGS, VIEWS_BAR_MOVE_LEFT, VIEWS_BAR_MOVE_RIGHT, } from '../../../translations.js';
 import { MOBILE_TOUCH_TARGET } from '../consts.js';
 let MobileTableColumnHeader = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _column_decorators;
     let _column_initializers = [];
     let _column_extraInitializers = [];
@@ -55,8 +61,10 @@ let MobileTableColumnHeader = (() => {
     return class MobileTableColumnHeader extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _column_decorators = [property({ attribute: false })];
             _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, _column_decorators, { kind: "accessor", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_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);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -84,16 +92,15 @@ let MobileTableColumnHeader = (() => {
   `; }
         popMenu(ele) {
             const enableNumberFormatting = this.tableViewManager.featureFlags$.value.enable_number_formatting;
+            const wording = wordingOf(this.std);
             popMenu(popupTargetFromElement(ele ?? this), {
                 options: {
                     title: {
-                        text: 'Property settings',
+                        text: wording(DATA_VIEW_PROPERTY_SETTINGS),
                     },
-                    items: [
-                        inputConfig(this.column),
-                        typeConfig(this.column),
-                        // Number format begin
-                        ...(enableNumberFormatting
+                    items: propertyMenuItems(this.column, {
+                        wording,
+                        afterType: enableNumberFormatting
                             ? [
                                 menu.subMenu({
                                     name: 'Number Format',
@@ -127,122 +134,88 @@ let MobileTableColumnHeader = (() => {
                                     },
                                 }),
                             ]
-                            : []),
-                        // Number format end
-                        menu.group({
-                            items: [
-                                menu.action({
-                                    name: 'Hide In View',
-                                    prefix: ViewIcon(),
-                                    hide: () => !this.column.hideCanSet,
-                                    select: () => {
-                                        this.column.hideSet(true);
-                                    },
-                                }),
-                            ],
-                        }),
-                        menu.group({
-                            items: [
-                                menu.action({
-                                    name: 'Insert Left Column',
-                                    prefix: InsertLeftIcon(),
-                                    select: () => {
-                                        this.tableViewManager.propertyAdd({
-                                            id: this.column.id,
-                                            before: true,
-                                        });
-                                        Promise.resolve()
-                                            .then(() => {
-                                            const pre = this.previousElementSibling?.previousElementSibling;
-                                            if (pre instanceof MobileTableColumnHeader) {
-                                                pre.editTitle();
-                                                pre.scrollIntoView({
-                                                    inline: 'nearest',
-                                                    block: 'nearest',
-                                                });
+                            : [],
+                        beforeOperations: [
+                            menu.group({
+                                items: [
+                                    menu.action({
+                                        name: wording(DATA_VIEW_INSERT_LEFT),
+                                        prefix: InsertLeftIcon(),
+                                        select: () => {
+                                            this.tableViewManager.propertyAdd({
+                                                id: this.column.id,
+                                                before: true,
+                                            });
+                                            Promise.resolve()
+                                                .then(() => {
+                                                const pre = this.previousElementSibling?.previousElementSibling;
+                                                if (pre instanceof MobileTableColumnHeader) {
+                                                    pre.editTitle();
+                                                    pre.scrollIntoView({
+                                                        inline: 'nearest',
+                                                        block: 'nearest',
+                                                    });
+                                                }
+                                            })
+                                                .catch(console.error);
+                                        },
+                                    }),
+                                    menu.action({
+                                        name: wording(DATA_VIEW_INSERT_RIGHT),
+                                        prefix: InsertRightIcon(),
+                                        select: () => {
+                                            this.tableViewManager.propertyAdd({
+                                                id: this.column.id,
+                                                before: false,
+                                            });
+                                            Promise.resolve()
+                                                .then(() => {
+                                                const next = this.nextElementSibling?.nextElementSibling;
+                                                if (next instanceof MobileTableColumnHeader) {
+                                                    next.editTitle();
+                                                    next.scrollIntoView({
+                                                        inline: 'nearest',
+                                                        block: 'nearest',
+                                                    });
+                                                }
+                                            })
+                                                .catch(console.error);
+                                        },
+                                    }),
+                                    menu.action({
+                                        name: wording(VIEWS_BAR_MOVE_LEFT),
+                                        prefix: MoveLeftIcon(),
+                                        hide: () => this.column.isFirst$.value,
+                                        select: () => {
+                                            const pre = this.column.prev$.value;
+                                            if (!pre) {
+                                                return;
                                             }
-                                        })
-                                            .catch(console.error);
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Insert Right Column',
-                                    prefix: InsertRightIcon(),
-                                    select: () => {
-                                        this.tableViewManager.propertyAdd({
-                                            id: this.column.id,
-                                            before: false,
-                                        });
-                                        Promise.resolve()
-                                            .then(() => {
-                                            const next = this.nextElementSibling?.nextElementSibling;
-                                            if (next instanceof MobileTableColumnHeader) {
-                                                next.editTitle();
-                                                next.scrollIntoView({
-                                                    inline: 'nearest',
-                                                    block: 'nearest',
-                                                });
+                                            this.column.move({
+                                                id: pre.id,
+                                                before: true,
+                                            });
+                                        },
+                                    }),
+                                    menu.action({
+                                        name: wording(VIEWS_BAR_MOVE_RIGHT),
+                                        prefix: MoveRightIcon(),
+                                        hide: () => this.column.isLast$.value,
+                                        select: () => {
+                                            const next = this.column.next$.value;
+                                            if (!next) {
+                                                return;
                                             }
-                                        })
-                                            .catch(console.error);
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Move Left',
-                                    prefix: MoveLeftIcon(),
-                                    hide: () => this.column.isFirst$.value,
-                                    select: () => {
-                                        const pre = this.column.prev$.value;
-                                        if (!pre) {
-                                            return;
-                                        }
-                                        this.column.move({
-                                            id: pre.id,
-                                            before: true,
-                                        });
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Move Right',
-                                    prefix: MoveRightIcon(),
-                                    hide: () => this.column.isLast$.value,
-                                    select: () => {
-                                        const next = this.column.next$.value;
-                                        if (!next) {
-                                            return;
-                                        }
-                                        this.column.move({
-                                            id: next.id,
-                                            before: false,
-                                        });
-                                    },
-                                }),
-                            ],
-                        }),
-                        menu.group({
-                            items: [
-                                menu.action({
-                                    name: 'Duplicate',
-                                    prefix: DuplicateIcon(),
-                                    hide: () => !this.column.canDuplicate,
-                                    select: () => {
-                                        this.column.duplicate?.();
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Delete',
-                                    prefix: DeleteIcon(),
-                                    hide: () => !this.column.canDelete,
-                                    select: () => {
-                                        this.column.delete?.();
-                                    },
-                                    class: {
-                                        'delete-item': true,
-                                    },
-                                }),
-                            ],
-                        }),
-                    ],
+                                            this.column.move({
+                                                id: next.id,
+                                                before: false,
+                                            });
+                                        },
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 },
             });
         }
@@ -265,6 +238,10 @@ let MobileTableColumnHeader = (() => {
       </div>
     `;
         }
+        #std_accessor_storage;
+        /** Absent outside an editor host: the menu reads English. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         #column_accessor_storage;
         get column() { return this.#column_accessor_storage; }
         set column(value) { this.#column_accessor_storage = value; }
@@ -282,7 +259,8 @@ let MobileTableColumnHeader = (() => {
             this.editTitle = () => {
                 this._clickColumn();
             };
-            this.#column_accessor_storage = __runInitializers(this, _column_initializers, void 0);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.#column_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _column_initializers, void 0));
             this.#tableViewManager_accessor_storage = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _tableViewManager_initializers, void 0));
             __runInitializers(this, _tableViewManager_extraInitializers);
         }

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

@@ -45,7 +45,7 @@ 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 { 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';
 const styles = css `
@@ -168,7 +168,9 @@ let MobileTableGroup = (() => {
               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>`}
     `;

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

@@ -42,6 +42,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 { mobileStickyTitle } from './table-view-style.js';
 let MobileTableHeader = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
     let _renderGroupHeader_decorators;
@@ -85,16 +86,23 @@ 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">

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

@@ -46,6 +46,9 @@ import { html } from 'lit/static-html.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';
+/** Two 24px ops, the 20px gap between them and their 8px inset. */
+const ROW_OPS_WIDTH = 24 * 2 + 20 + 8;
 let MobileTableRow = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
     let _tableViewLogic_decorators;
@@ -137,13 +140,20 @@ let MobileTableRow = (() => {
                     const ele = e.currentTarget;
                     popMobileRowMenu(popupTargetFromElement(ele), this.rowId, this.tableViewLogic, this.view);
                 };
+                const isTitle = column.view.mainProperties$.value.titleColumn === column.id;
+                const hasOps = isTitle && !column.readonly$.value;
                 return html `
-            <div style="display: flex;">
+            <div
+              class="${isTitle ? mobileStickyTitle : ''}"
+              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 two row ops drawn over its right end.
+                    paddingRight: hasOps ? `${ROW_OPS_WIDTH}px` : undefined,
                 })}
                 .tableViewLogic="${this.tableViewLogic}"
                 .column="${column}"
@@ -158,20 +168,19 @@ let MobileTableRow = (() => {
               >
               </mobile-table-cell>
               <div class="${cellDivider}"></div>
-            </div>
-            ${!column.readonly$.value &&
-                    column.view.mainProperties$.value.titleColumn === column.id
+              ${hasOps
                     ? html ` <div class="mobile-row-ops">
-                  <div class="mobile-row-op" @click="${clickDetail}">
-                    ${CenterPeekIcon()}
-                  </div>
-                  ${!view.readonly$.value
+                    <div class="mobile-row-op" @click="${clickDetail}">
+                      ${CenterPeekIcon()}
+                    </div>
+                    ${!view.readonly$.value
                         ? html ` <div class="mobile-row-op" @click="${openMenu}">
-                        ${MoreHorizontalIcon()}
-                      </div>`
+                          ${MoreHorizontalIcon()}
+                        </div>`
                         : nothing}
-                </div>`
+                  </div>`
                     : nothing}
+            </div>
           `;
             })}
       <div class="database-cell add-column-button"></div>

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.js

@@ -7,7 +7,7 @@ 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);
@@ -71,7 +71,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

package/dist/_pkgs/data-view/widget-presets/quick-setting-bar/filter/list-view.d.ts

@@ -1,4 +1,4 @@
-import { ShadowlessElement } from '../../../../std/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../../std/index.js';
 import { type ReadonlySignal } from '@preact/signals-core';
 import type { Variable } from '../../../core/expression/types.js';
 import type { Filter, FilterGroup } from '../../../core/filter/types.js';
@@ -22,6 +22,8 @@ export declare class FilterBar extends FilterBar_base {
     accessor onChange: (filter: FilterGroup) => void;
     accessor vars: ReadonlySignal<Variable[]>;
     accessor dataViewLogic: DataViewUILogicBase;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/_pkgs/data-view/widget-presets/quick-setting-bar/filter/list-view.js

@@ -35,11 +35,14 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { popupTargetFromElement, } from '../../../../affine-components/context-menu/index.js';
 import { SignalWatcher } from '../../../../global/lit/index.js';
 import { ArrowDownSmallIcon, FilterIcon, PlusIcon, } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { computed } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { popCreateFilter } from '../../../core/index.js';
+import { wordingOf } from '../../../core/utils/wording.js';
+import { DATA_VIEW_ADD_FILTER } from '../../../translations.js';
 import { popFilterGroup } from './group-panel-view.js';
 let FilterBar = (() => {
     let _classSuper = SignalWatcher(ShadowlessElement);
@@ -55,6 +58,9 @@ let FilterBar = (() => {
     let _dataViewLogic_decorators;
     let _dataViewLogic_initializers = [];
     let _dataViewLogic_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     return class FilterBar extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -62,10 +68,12 @@ let FilterBar = (() => {
             _onChange_decorators = [property({ attribute: false })];
             _vars_decorators = [property({ attribute: false })];
             _dataViewLogic_decorators = [property({ attribute: false })];
+            _std_decorators = [consume({ context: stdContext })];
             __esDecorate(this, null, _filterGroup_decorators, { kind: "accessor", name: "filterGroup", static: false, private: false, access: { has: obj => "filterGroup" in obj, get: obj => obj.filterGroup, set: (obj, value) => { obj.filterGroup = value; } }, metadata: _metadata }, _filterGroup_initializers, _filterGroup_extraInitializers);
             __esDecorate(this, null, _onChange_decorators, { kind: "accessor", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange, set: (obj, value) => { obj.onChange = value; } }, metadata: _metadata }, _onChange_initializers, _onChange_extraInitializers);
             __esDecorate(this, null, _vars_decorators, { kind: "accessor", name: "vars", static: false, private: false, access: { has: obj => "vars" in obj, get: obj => obj.vars, set: (obj, value) => { obj.vars = value; } }, metadata: _metadata }, _vars_initializers, _vars_extraInitializers);
             __esDecorate(this, null, _dataViewLogic_decorators, { kind: "accessor", name: "dataViewLogic", static: false, private: false, access: { has: obj => "dataViewLogic" in obj, get: obj => obj.dataViewLogic, set: (obj, value) => { obj.dataViewLogic = value; } }, metadata: _metadata }, _dataViewLogic_initializers, _dataViewLogic_extraInitializers);
+            __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);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = css `
@@ -102,6 +110,13 @@ let FilterBar = (() => {
       line-height: 22px;
     }
 
+    /* A finger needs 44px: the host's touch-target floor (P7). */
+    @media (pointer: coarse) {
+      .filter-bar-add-filter {
+        min-height: 44px;
+      }
+    }
+
     filter-bar::-webkit-scrollbar {
       -webkit-appearance: none;
       display: block;
@@ -178,6 +193,10 @@ let FilterBar = (() => {
         #dataViewLogic_accessor_storage;
         get dataViewLogic() { return this.#dataViewLogic_accessor_storage; }
         set dataViewLogic(value) { this.#dataViewLogic_accessor_storage = value; }
+        #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; }
         constructor() {
             super(...arguments);
             this._setFilter = (index, filter) => {
@@ -232,7 +251,7 @@ let FilterBar = (() => {
       class="filter-bar-add-filter dv-icon-16 dv-round-4 dv-hover"
       @click="${this.addFilter}"
     >
-      ${PlusIcon()} Add filter
+      ${PlusIcon()} ${wordingOf(this.std)(DATA_VIEW_ADD_FILTER)}
     </div>`;
             };
             this.setConditions = (conditions) => {
@@ -244,7 +263,8 @@ let FilterBar = (() => {
             this.#onChange_accessor_storage = __runInitializers(this, _onChange_initializers, void 0);
             this.#vars_accessor_storage = (__runInitializers(this, _onChange_extraInitializers), __runInitializers(this, _vars_initializers, void 0));
             this.#dataViewLogic_accessor_storage = (__runInitializers(this, _vars_extraInitializers), __runInitializers(this, _dataViewLogic_initializers, void 0));
-            __runInitializers(this, _dataViewLogic_extraInitializers);
+            this.#std_accessor_storage = (__runInitializers(this, _dataViewLogic_extraInitializers), __runInitializers(this, _std_initializers, void 0));
+            __runInitializers(this, _std_extraInitializers);
         }
     };
 })();

package/dist/_pkgs/data-view/widget-presets/tools/presets/search/search.d.ts

@@ -1,3 +1,4 @@
+import { type BlockStdScope } from '../../../../../std/index.js';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
 import type { KanbanViewUILogic } from '../../../../view-presets/kanban/pc/kanban-view-ui-logic.js';
 import type { VirtualTableViewUILogic } from '../../../../view-presets/table/pc-virtual/table-view-ui-logic.js';
@@ -9,6 +10,8 @@ export declare class DataViewHeaderToolsSearch extends WidgetBase<VirtualTableVi
     private readonly _onSearchBlur;
     private readonly _onSearchKeydown;
     preventBlur: boolean;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     private accessor _searchInput;