@formicoidea/labre-core 0.47.1 → 0.49.0

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

@@ -1,8 +1,12 @@
 import { calendarEffects } from './calendar/effect.js';
+import { galleryEffects } from './gallery/effect.js';
 import { kanbanEffects } from './kanban/effect.js';
+import { listEffects } from './list/effect.js';
 import { tableEffects } from './table/effect.js';
 export function viewPresetsEffects() {
     calendarEffects();
+    galleryEffects();
     kanbanEffects();
+    listEffects();
     tableEffects();
 }

package/dist/_pkgs/data-view/view-presets/flat/flat-converts.d.ts

@@ -0,0 +1,2 @@
+import type { ViewConvertConfig } from '../../core/view/convert.js';
+export declare const flatViewConverts: ViewConvertConfig[];

package/dist/_pkgs/data-view/view-presets/flat/flat-converts.js

@@ -0,0 +1,35 @@
+import { calendarViewModel } from '../calendar/define.js';
+import { galleryViewModel } from '../gallery/define.js';
+import { kanbanViewModel } from '../kanban/define.js';
+import { listViewModel } from '../list/define.js';
+import { tableViewModel } from '../table/define.js';
+/**
+ * A layout switch into or out of a gallery or a list keeps the filter, the
+ * sort and the grouping (B8: every layout groups, as table and kanban already
+ * kept `groupBy` between them); the properties shown are the target layout's
+ * own default, as when Notion switches a view's layout. A source with no
+ * grouping leaves the target's default: a kanban still gets its own. Calendar
+ * is a source only: nothing converts into it (ADR 0035 §6).
+ */
+const keepFilterSortAndGroup = (data) => {
+    const { filter, sort, groupBy } = data;
+    // View data is an open record per mode: the target model types the rest.
+    return {
+        ...(filter ? { filter } : {}),
+        ...(sort ? { sort } : {}),
+        ...(groupBy ? { groupBy } : {}),
+    };
+};
+const flatModels = [galleryViewModel, listViewModel];
+const convert = (from, to) => ({
+    from,
+    to,
+    convert: keepFilterSortAndGroup,
+});
+export const flatViewConverts = [
+    ...[tableViewModel, kanbanViewModel, calendarViewModel, ...flatModels]
+        .flatMap(from => flatModels.map(to => [from.type, to.type]))
+        .filter(([from, to]) => from !== to)
+        .map(([from, to]) => convert(from, to)),
+    ...flatModels.flatMap(from => [tableViewModel, kanbanViewModel].map(to => convert(from.type, to.type))),
+];

package/dist/_pkgs/data-view/view-presets/flat/flat-view-manager.d.ts

@@ -0,0 +1,79 @@
+import { type InsertToPosition } from '../../../affine-shared/utils/index.js';
+import type { GroupBy, GroupProperty } from '../../core/common/types.js';
+import { FilterTrait } from '../../core/filter/trait.js';
+import type { FilterGroup } from '../../core/filter/types.js';
+import { GroupTrait } from '../../core/group-by/trait.js';
+import type { Sort } from '../../core/sort/types.js';
+import type { BasicViewDataType } from '../../core/view/data-view.js';
+import { PropertyBase } from '../../core/view-manager/property.js';
+import type { Row } from '../../core/view-manager/row.js';
+import { SingleViewBase } from '../../core/view-manager/single-view.js';
+import type { ViewManager } from '../../core/view-manager/view-manager.js';
+/**
+ * A property's place in a gallery or list view: the shape table and kanban
+ * already store, `columns[].hide` (ADR 0035 §8), so per-view visibility reads
+ * and writes the same way in every preset.
+ */
+export type FlatViewColumn = {
+    id: string;
+    hide?: boolean;
+};
+export type FlatViewDataType<Mode extends string = string> = BasicViewDataType<Mode, {
+    columns: FlatViewColumn[];
+    filter: FilterGroup;
+    sort?: Sort;
+    groupBy?: GroupBy;
+    groupProperties?: GroupProperty[];
+}>;
+/**
+ * What a new gallery or list view stores: its title shown, every other
+ * property hidden until the user shows it, as Notion does for these two
+ * layouts. Written once, by the gesture that creates the view; a stored view
+ * is never rewritten on load.
+ */
+export declare const flatViewDefaultData: (viewManager: ViewManager) => {
+    columns: FlatViewColumn[];
+    filter: FilterGroup;
+};
+/**
+ * The manager both ungrouped presets share, gallery and list (ADR 0035 §1,
+ * B6 and B7): the table's per-view property order and visibility, filter and
+ * sort, and its row creation from the filter's default values, without the
+ * table's widths and statistics. Grouping (B8) is the table's too: the same
+ * stored `groupBy` and `groupProperties`, the same trait and ops.
+ */
+export declare abstract class FlatSingleView<ViewData extends FlatViewDataType = FlatViewDataType> extends SingleViewBase<ViewData> {
+    propertiesRaw$: import("@preact/signals-core").ReadonlySignal<FlatProperty[]>;
+    properties$: import("@preact/signals-core").ReadonlySignal<FlatProperty[]>;
+    detailProperties$: import("@preact/signals-core").ReadonlySignal<FlatProperty[]>;
+    /** The title, drawn first on a card or a row whatever the columns say. */
+    titleProperty$: import("@preact/signals-core").ReadonlySignal<FlatProperty | undefined>;
+    /** The visible properties drawn after the title. */
+    bodyProperties$: import("@preact/signals-core").ReadonlySignal<FlatProperty[]>;
+    mainProperties$: import("@preact/signals-core").ReadonlySignal<{
+        titleColumn: string | undefined;
+        iconColumn: string;
+    }>;
+    readonly$: import("@preact/signals-core").ReadonlySignal<boolean>;
+    private readonly filter$;
+    private readonly sortList$;
+    filterTrait: FilterTrait;
+    private readonly sortManager;
+    private readonly groupBy$;
+    groupTrait: GroupTrait;
+    /** Every property's column entry, so a first hide stores the full order. */
+    readonly columnsData$: import("@preact/signals-core").ReadonlySignal<FlatViewColumn[]>;
+    isShow(rowId: string): boolean;
+    propertyGetOrCreate(propertyId: string): FlatProperty;
+    /** A row added from a group's "New page" takes that group's value. */
+    rowAdd(insertPosition: InsertToPosition | number, groupKey?: string): string;
+    protected rowsMapping(rows: Row[]): Row[];
+}
+export declare class FlatProperty extends PropertyBase {
+    private readonly flatView;
+    hide$: import("@preact/signals-core").ReadonlySignal<boolean>;
+    viewData$: import("@preact/signals-core").ReadonlySignal<FlatViewColumn | undefined>;
+    constructor(flatView: FlatSingleView, propertyId: string);
+    hideSet(hide: boolean): void;
+    move(position: InsertToPosition): void;
+}

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

@@ -0,0 +1,194 @@
+import { insertPositionToIndex, } from '../../../affine-shared/utils/index.js';
+import { computed } from '@preact/signals-core';
+import { evalFilter } from '../../core/filter/eval.js';
+import { generateDefaultValues } from '../../core/filter/generate-default-values.js';
+import { FilterTrait, filterTraitKey } from '../../core/filter/trait.js';
+import { emptyFilterGroup } from '../../core/filter/utils.js';
+import { groupPropertiesOps } from '../../core/group-by/group-properties.js';
+import { GroupTrait, groupTraitKey } from '../../core/group-by/trait.js';
+import { fromJson } from '../../core/property/utils.js';
+import { SortManager, sortTraitKey } from '../../core/sort/manager.js';
+import { PropertyBase } from '../../core/view-manager/property.js';
+import { SingleViewBase } from '../../core/view-manager/single-view.js';
+/**
+ * What a new gallery or list view stores: its title shown, every other
+ * property hidden until the user shows it, as Notion does for these two
+ * layouts. Written once, by the gesture that creates the view; a stored view
+ * is never rewritten on load.
+ */
+export const flatViewDefaultData = (viewManager) => {
+    const dataSource = viewManager.dataSource;
+    return {
+        columns: dataSource.properties$.value.map(id => ({
+            id,
+            hide: dataSource.propertyTypeGet(id) !== 'title',
+        })),
+        filter: { type: 'group', op: 'and', conditions: [] },
+    };
+};
+/**
+ * The manager both ungrouped presets share, gallery and list (ADR 0035 §1,
+ * B6 and B7): the table's per-view property order and visibility, filter and
+ * sort, and its row creation from the filter's default values, without the
+ * table's widths and statistics. Grouping (B8) is the table's too: the same
+ * stored `groupBy` and `groupProperties`, the same trait and ops.
+ */
+export class FlatSingleView extends SingleViewBase {
+    constructor() {
+        super(...arguments);
+        this.propertiesRaw$ = computed(() => {
+            const needShow = new Set(this.dataSource.properties$.value);
+            const result = [];
+            this.data$.value?.columns.forEach(v => {
+                if (needShow.has(v.id)) {
+                    result.push(v.id);
+                    needShow.delete(v.id);
+                }
+            });
+            result.push(...needShow);
+            return result.map(id => this.propertyGetOrCreate(id));
+        });
+        this.properties$ = computed(() => {
+            return this.propertiesRaw$.value.filter(property => !property.hide$.value);
+        });
+        this.detailProperties$ = computed(() => {
+            return this.propertiesRaw$.value.filter(property => property.type$.value !== 'title');
+        });
+        /** The title, drawn first on a card or a row whatever the columns say. */
+        this.titleProperty$ = computed(() => {
+            return this.properties$.value.find(property => property.type$.value === 'title');
+        });
+        /** The visible properties drawn after the title. */
+        this.bodyProperties$ = computed(() => {
+            return this.properties$.value.filter(property => property.type$.value !== 'title');
+        });
+        this.mainProperties$ = computed(() => ({
+            titleColumn: this.propertiesRaw$.value.find(property => property.type$.value === 'title')?.id,
+            iconColumn: 'type',
+        }));
+        this.readonly$ = computed(() => {
+            return this.manager.readonly$.value;
+        });
+        this.filter$ = computed(() => {
+            return this.data$.value?.filter ?? emptyFilterGroup;
+        });
+        this.sortList$ = computed(() => {
+            return this.data$.value?.sort;
+        });
+        this.filterTrait = this.traitSet(filterTraitKey, new FilterTrait(this.filter$, this, {
+            filterSet: (filter) => {
+                this.dataUpdate(() => ({ filter }));
+            },
+        }));
+        this.sortManager = this.traitSet(sortTraitKey, new SortManager(this.sortList$, this, {
+            setSortList: sortList => {
+                this.dataUpdate(data => ({
+                    sort: {
+                        ...data.sort,
+                        ...sortList,
+                    },
+                }));
+            },
+        }));
+        this.groupBy$ = computed(() => {
+            return this.data$.value?.groupBy;
+        });
+        this.groupTrait = this.traitSet(groupTraitKey, new GroupTrait(this.groupBy$, this, {
+            groupBySet: groupBy => {
+                this.dataUpdate(() => ({ groupBy }));
+            },
+            ...groupPropertiesOps(() => this.data$.value?.groupProperties ?? [], groupProperties => {
+                this.dataUpdate(() => ({ groupProperties }));
+            }),
+        }));
+        /** Every property's column entry, so a first hide stores the full order. */
+        this.columnsData$ = computed(() => {
+            return this.propertiesRaw$.value.map(property => ({
+                id: property.id,
+                hide: property.hide$.value,
+            }));
+        });
+    }
+    isShow(rowId) {
+        const filter = this.filter$.value;
+        if (!filter.conditions.length)
+            return true;
+        // Hidden properties included, as in the table: hiding a property must not
+        // silently drop the condition on it.
+        const rowMap = Object.fromEntries(this.propertiesRaw$.value.map(property => [
+            property.id,
+            property.cellGetOrCreate(rowId).jsonValue$.value,
+        ]));
+        return evalFilter(filter, rowMap);
+    }
+    propertyGetOrCreate(propertyId) {
+        return new FlatProperty(this, propertyId);
+    }
+    /** A row added from a group's "New page" takes that group's value. */
+    rowAdd(insertPosition, groupKey) {
+        const id = super.rowAdd(insertPosition);
+        if (!id)
+            return id;
+        const filter = this.filter$.value;
+        const defaultValues = filter.conditions.length
+            ? generateDefaultValues(filter, this.vars$.value)
+            : {};
+        Object.entries(defaultValues).forEach(([propertyId, jsonValue]) => {
+            const property = this.propertyGetOrCreate(propertyId);
+            const propertyMeta = property.meta$.value;
+            if (!propertyMeta)
+                return;
+            const value = fromJson(propertyMeta.config, {
+                value: jsonValue,
+                data: property.data$.value,
+                dataSource: this.dataSource,
+            });
+            this.cellGetOrCreate(id, propertyId).valueSet(value);
+        });
+        // After the filter's defaults, as in the table: the group clicked wins.
+        if (groupKey != null)
+            this.groupTrait.addToGroup(id, groupKey);
+        return id;
+    }
+    rowsMapping(rows) {
+        return this.sortManager.sort(super.rowsMapping(rows));
+    }
+}
+export class FlatProperty extends PropertyBase {
+    constructor(flatView, propertyId) {
+        super(flatView, propertyId);
+        this.flatView = flatView;
+        this.hide$ = computed(() => {
+            const hideFromViewData = this.viewData$.value?.hide;
+            if (hideFromViewData != null) {
+                return hideFromViewData;
+            }
+            const defaultShow = this.meta$.value?.config.fixed?.defaultShow;
+            if (defaultShow != null) {
+                return !defaultShow;
+            }
+            return false;
+        });
+        this.viewData$ = computed(() => {
+            return this.flatView.data$.value?.columns.find(v => v.id === this.id);
+        });
+    }
+    hideSet(hide) {
+        this.flatView.dataUpdate(() => ({
+            columns: this.flatView.columnsData$.value.map(v => v.id === this.id ? { ...v, hide } : v),
+        }));
+    }
+    move(position) {
+        this.flatView.dataUpdate(() => {
+            const columns = [...this.flatView.columnsData$.value];
+            const index = columns.findIndex(v => v.id === this.id);
+            if (index < 0)
+                return {};
+            const [column] = columns.splice(index, 1);
+            if (!column)
+                return {};
+            columns.splice(insertPositionToIndex(position, columns), 0, column);
+            return { columns };
+        });
+    }
+}

package/dist/_pkgs/data-view/view-presets/flat/flat-view-ui.d.ts

@@ -0,0 +1,56 @@
+import type { ChromeWording } from '../../../affine-shared/services/index.js';
+import type { UniComponent } from '../../../affine-shared/types/index.js';
+import type { InsertToPosition } from '../../../affine-shared/utils/index.js';
+import type { BlockStdScope } from '../../../std/index.js';
+import { nothing } from 'lit';
+import type { Group } from '../../core/group-by/trait.js';
+import { DataViewUIBase, DataViewUILogicBase } from '../../core/view/data-view-base.js';
+import type { Property } from '../../core/view-manager/property.js';
+import type { Row } from '../../core/view-manager/row.js';
+import type { FlatSingleView } from './flat-view-manager.js';
+/**
+ * The UI logic both ungrouped presets share. Neither has a selection model of
+ * its own: a cell edits through the cell host (`dv-standalone-cell`), with the
+ * very renderer and popups a table cell mounts, and a click anywhere else on
+ * a card or a row opens the row through the root's detail panel, the path
+ * the table's and the kanban's open buttons take. Grouped (B8), each group
+ * draws under the table's group header; drag and drop of rows between groups
+ * is not offered: a row changes group by editing its value.
+ */
+export declare abstract class FlatViewUILogic<View extends FlatSingleView = FlatSingleView> extends DataViewUILogicBase<View> {
+    clearSelection: () => void;
+    focusFirstCell: () => void;
+    showIndicator: (_evt: MouseEvent) => boolean;
+    hideIndicator: () => void;
+    moveTo: (_id: string, _evt: MouseEvent) => void;
+    addRow: (position: InsertToPosition, groupKey?: string) => string | undefined;
+    abstract renderer: UniComponent<unknown>;
+    /** A Ctrl/Cmd click asks the host for a new tab (ADR 0035 §9a). */
+    openRow: (rowId: string, newTab?: boolean) => void;
+}
+export declare abstract class FlatViewUI<Logic extends FlatViewUILogic = FlatViewUILogic> extends DataViewUIBase<Logic> {
+    /** Absent outside an editor (a unit test): the wordings read English. */
+    accessor std: BlockStdScope;
+    protected wording([key, fallback]: ChromeWording): string;
+    protected get view(): FlatSingleView<import("./flat-view-manager.js").FlatViewDataType<string>>;
+    /**
+     * One property's value, drawn and edited by the cell renderer a table cell
+     * mounts. `readonly` draws the value only and lets a click through to the
+     * card or row, which is how the title opens its row.
+     */
+    protected renderCell(property: Property, rowId: string, readonly?: boolean): import("lit-html").TemplateResult<1>;
+    protected renderOpenButton(rowId: string): import("lit-html").TemplateResult<1>;
+    protected renderHeaderWidget(): import("lit-html").TemplateResult | typeof nothing;
+    /**
+     * The view's rows through `renderBody`: once, or once per visible group
+     * under its header, then the hidden groups (B8, PRD REQ-DB-13 and 16). A
+     * folded group keeps its header only.
+     */
+    protected renderGrouped(renderBody: (rows: Row[], group?: Group) => unknown): unknown;
+    private renderGroup;
+    protected readonly onRowClick: (event: MouseEvent) => void;
+}
+/** The group header both presets draw, the table's title and count. */
+export declare const flatGroupStyles: import("lit").CSSResult;
+/** The open button both presets draw, shown on hover or keyboard focus. */
+export declare const flatOpenButtonStyles: import("lit").CSSResult;

package/dist/_pkgs/data-view/view-presets/flat/flat-view-ui.js

@@ -0,0 +1,266 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { popFilterableSimpleMenu, popupTargetFromElement, } from '../../../affine-components/context-menu/index.js';
+import { translateKey } from '../../../affine-shared/services/index.js';
+import { OPEN_LABEL } from '../../../affine-components/translations.js';
+import { CenterPeekIcon } from '@blocksuite/icons/lit';
+import { stdContext } from '../../../std/index.js';
+import { consume } from '@lit/context';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, nothing, unsafeCSS } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { renderCellStatus } from '../../core/component/cell-status/cell-status.js';
+import { GroupTitle } from '../../core/group-by/group-title.js';
+import { hideGroupAction, renderGroupToggle, } from '../../core/group-by/group-visibility.js';
+import { isNewTabClick } from '../../core/utils/new-tab-click.js';
+import { renderUniLit } from '../../core/utils/uni-component/uni-component.js';
+import { DataViewUIBase, DataViewUILogicBase, } from '../../core/view/data-view-base.js';
+/**
+ * The UI logic both ungrouped presets share. Neither has a selection model of
+ * its own: a cell edits through the cell host (`dv-standalone-cell`), with the
+ * very renderer and popups a table cell mounts, and a click anywhere else on
+ * a card or a row opens the row through the root's detail panel, the path
+ * the table's and the kanban's open buttons take. Grouped (B8), each group
+ * draws under the table's group header; drag and drop of rows between groups
+ * is not offered: a row changes group by editing its value.
+ */
+export class FlatViewUILogic extends DataViewUILogicBase {
+    constructor() {
+        super(...arguments);
+        this.clearSelection = () => { };
+        this.focusFirstCell = () => { };
+        this.showIndicator = (_evt) => false;
+        this.hideIndicator = () => { };
+        this.moveTo = (_id, _evt) => { };
+        this.addRow = (position, groupKey) => {
+            if (this.view.readonly$.value)
+                return;
+            const rowId = this.view.rowAdd(position, groupKey);
+            if (rowId)
+                this.openRow(rowId);
+            return rowId;
+        };
+        /** A Ctrl/Cmd click asks the host for a new tab (ADR 0035 §9a). */
+        this.openRow = (rowId, newTab = false) => {
+            this.root.openDetailPanel({ view: this.view, rowId, newTab });
+        };
+    }
+}
+let FlatViewUI = (() => {
+    let _classSuper = DataViewUIBase;
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
+    return class FlatViewUI extends _classSuper {
+        constructor() {
+            super(...arguments);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.onRowClick = (__runInitializers(this, _std_extraInitializers), (event) => {
+                const rowId = event.currentTarget.dataset.rowId;
+                if (rowId)
+                    this.logic.openRow(rowId, isNewTabClick(event));
+            });
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
+            __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 });
+        }
+        #std_accessor_storage;
+        /** Absent outside an editor (a unit test): the wordings read English. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
+        wording([key, fallback]) {
+            return this.std ? translateKey(this.std, key, fallback) : fallback;
+        }
+        get view() {
+            return this.logic.view;
+        }
+        /**
+         * One property's value, drawn and edited by the cell renderer a table cell
+         * mounts. `readonly` draws the value only and lets a click through to the
+         * card or row, which is how the title opens its row.
+         */
+        renderCell(property, rowId, readonly = false) {
+            const view = this.view;
+            const cell = property.cellGetOrCreate(rowId);
+            // As a table cell: a value not yet hydrated mounts no renderer, so nothing
+            // can be edited over it (ADR 0035 §9e).
+            const status = renderCellStatus(cell);
+            if (status) {
+                return html `<span data-property-id="${property.id}">${status}</span>`;
+            }
+            return html `<dv-standalone-cell
+      data-property-id="${property.id}"
+      .cell="${cell}"
+      .readonly="${readonly ||
+                view.readonly$.value ||
+                property.readonly$.value}"
+      .onEditingChange="${(editing) => view.lockRows(editing)}"
+    ></dv-standalone-cell>`;
+        }
+        renderOpenButton(rowId) {
+            const label = this.wording(OPEN_LABEL);
+            return html `<button
+      class="dv-flat-open"
+      data-testid="dv-flat-open"
+      aria-label="${label}"
+      title="${label}"
+      @click="${(event) => {
+                event.stopPropagation();
+                this.logic.openRow(rowId, isNewTabClick(event));
+            }}"
+    >
+      ${CenterPeekIcon()}
+    </button>`;
+        }
+        renderHeaderWidget() {
+            const headerWidget = this.logic.headerWidget;
+            if (!headerWidget)
+                return nothing;
+            return renderUniLit(headerWidget, { dataViewLogic: this.logic });
+        }
+        /**
+         * The view's rows through `renderBody`: once, or once per visible group
+         * under its header, then the hidden groups (B8, PRD REQ-DB-13 and 16). A
+         * folded group keeps its header only.
+         */
+        renderGrouped(renderBody) {
+            const trait = this.view.groupTrait;
+            const groups = trait.visibleGroups$.value;
+            if (!groups)
+                return renderBody(this.view.rows$.value);
+            return html `${repeat(groups, group => group.key, group => this.renderGroup(group, renderBody))} <dv-hidden-groups .groupTrait="${trait}"></dv-hidden-groups>`;
+        }
+        renderGroup(group, renderBody) {
+            const collapsed = group.manager.collapsed$(group.key).value;
+            const wording = (pair) => this.wording(pair);
+            return html `<section
+      class="dv-flat-group"
+      data-testid="dv-flat-group"
+      data-group-key="${group.key}"
+    >
+      <div class="dv-flat-group-header">
+        ${renderGroupToggle(group, wording)}
+        <div class="dv-flat-group-title">
+          ${GroupTitle(group, {
+                readonly: this.view.readonly$.value,
+                clickAdd: () => this.logic.addRow('start', group.key),
+                clickOps: (event) => {
+                    popFilterableSimpleMenu(popupTargetFromElement(event.currentTarget), [hideGroupAction(group, wording)]);
+                },
+            })}
+        </div>
+      </div>
+      ${collapsed ? nothing : renderBody(group.rows, group)}
+    </section>`;
+        }
+    };
+})();
+export { FlatViewUI };
+/** The group header both presets draw, the table's title and count. */
+export const flatGroupStyles = css `
+  .dv-flat-group {
+    display: flex;
+    flex-direction: column;
+    padding-top: 8px;
+  }
+
+  .dv-flat-group-header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-height: 32px;
+  }
+
+  .dv-flat-group-title {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .dv-flat-group-header:hover .group-header-op,
+  .dv-flat-group-header:focus-within .group-header-op {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  @media (pointer: coarse) {
+    .dv-flat-group-header {
+      min-height: 44px;
+    }
+  }
+`;
+/** The open button both presets draw, shown on hover or keyboard focus. */
+export const flatOpenButtonStyles = css `
+  .dv-flat-open {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
+    border-radius: 4px;
+    background-color: var(--affine-background-primary-color);
+    color: var(--affine-icon-color);
+    cursor: pointer;
+    visibility: hidden;
+  }
+
+  .dv-flat-open svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .dv-flat-open:focus-visible {
+    visibility: visible;
+    outline: 2px solid var(--affine-primary-color);
+    outline-offset: 1px;
+  }
+
+  @media (hover: hover) {
+    .dv-flat-open:hover {
+      background-color: var(--affine-hover-color);
+    }
+  }
+`;

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

@@ -0,0 +1,14 @@
+import { FlatSingleView, type FlatViewDataType } from '../flat/flat-view-manager.js';
+export declare const galleryViewType: {
+    type: "gallery";
+    createModel: <Data extends import("../../index.js").DataViewDataType>(model: import("../../index.js").DataViewModelConfig<Data>) => import("../../index.js").DataViewModel<"gallery", Data> & {
+        createMeta: (renderer: import("../../index.js").DataViewRendererConfig) => import("../../index.js").ViewMeta<"gallery", Data>;
+    };
+};
+export type GalleryViewData = FlatViewDataType<typeof galleryViewType.type>;
+export declare class GallerySingleView extends FlatSingleView<GalleryViewData> {
+    get type(): string;
+}
+export declare const galleryViewModel: import("../../index.js").DataViewModel<"gallery", GalleryViewData> & {
+    createMeta: (renderer: import("../../index.js").DataViewRendererConfig) => import("../../index.js").ViewMeta<"gallery", GalleryViewData>;
+};