@formicoidea/labre-core 0.48.0 → 0.49.0

package/dist/_pkgs/data-view/core/data-source/hydration.d.ts

@@ -0,0 +1,44 @@
+import type { ReadonlySignal } from '@preact/signals-core';
+/**
+ * Cell hydration (ADR 0035 §9e, issue B2): a widening of the data-source
+ * contract, not a seam.
+ *
+ * A host source whose values arrive after its rows (Labre keeps them in SQL,
+ * labre ADR-0047) says, per cell, whether the value it answers is the real one
+ * yet, and, for the whole source, whether values are still loading or failed.
+ * Every member is optional: a source that says nothing is `ready` at once,
+ * which is the inline source and every 0.48 host source, unchanged.
+ *
+ * Nothing is written in any state. A cell that is not `ready` mounts no
+ * renderer and refuses `valueSet`, so neither the user nor a paste, a fill or
+ * a kanban drop can write over a value the source has not delivered.
+ */
+export type CellStatus = 'ready' | 'pending' | 'error';
+export type ValuesStatus = 'loading' | 'ready' | 'error';
+export interface ValuesState {
+    readonly status: ValuesStatus;
+    /** `Date.now()` when the source entered `status`. */
+    readonly since: number;
+}
+export interface DataSourceHydration {
+    cellStatus?(rowId: string, propertyId: string): CellStatus;
+    valuesState$?: ReadonlySignal<ValuesState>;
+    /** Present when the source can try again after an `error`. */
+    retryValues?(): void;
+}
+export declare const VALUES_READY: ValuesState;
+/** How long values may load before a banner says so (REQ-DB-12). */
+export declare const VALUES_SLOW_AFTER_MS = 3000;
+export declare function cellStatusOf(source: DataSourceHydration, rowId: string, propertyId: string): CellStatus;
+export declare function valuesStateOf(source: DataSourceHydration): ValuesState;
+/** What a count shows while values are not ready. */
+export declare const VALUES_PENDING_MARK = "\u2026";
+/** Counts (group headers, column statistics) show an ellipsis until `true`. */
+export declare function valuesReady(source: DataSourceHydration): boolean;
+export type ValuesBanner = 'none' | 'slow' | 'error';
+/**
+ * Which banner a view shows: none while values load for less than
+ * {@link VALUES_SLOW_AFTER_MS}, `slow` after, `error` as soon as loading
+ * failed. Pure, so the 3 s rule is tested without a timer.
+ */
+export declare function valuesBannerOf(state: ValuesState, now: number): ValuesBanner;

package/dist/_pkgs/data-view/core/data-source/hydration.js

@@ -0,0 +1,31 @@
+export const VALUES_READY = Object.freeze({
+    status: 'ready',
+    since: 0,
+});
+/** How long values may load before a banner says so (REQ-DB-12). */
+export const VALUES_SLOW_AFTER_MS = 3000;
+export function cellStatusOf(source, rowId, propertyId) {
+    return source.cellStatus?.(rowId, propertyId) ?? 'ready';
+}
+export function valuesStateOf(source) {
+    return source.valuesState$?.value ?? VALUES_READY;
+}
+/** What a count shows while values are not ready. */
+export const VALUES_PENDING_MARK = '…';
+/** Counts (group headers, column statistics) show an ellipsis until `true`. */
+export function valuesReady(source) {
+    return valuesStateOf(source).status === 'ready';
+}
+/**
+ * Which banner a view shows: none while values load for less than
+ * {@link VALUES_SLOW_AFTER_MS}, `slow` after, `error` as soon as loading
+ * failed. Pure, so the 3 s rule is tested without a timer.
+ */
+export function valuesBannerOf(state, now) {
+    if (state.status === 'error')
+        return 'error';
+    if (state.status === 'loading' && now - state.since >= VALUES_SLOW_AFTER_MS) {
+        return 'slow';
+    }
+    return 'none';
+}

package/dist/_pkgs/data-view/core/data-source/index.d.ts

@@ -1 +1,2 @@
 export * from './base.js';
+export * from './hydration.js';

package/dist/_pkgs/data-view/core/data-source/index.js

@@ -1 +1,2 @@
 export * from './base.js';
+export * from './hydration.js';

package/dist/_pkgs/data-view/core/data-view.d.ts

@@ -2,6 +2,7 @@ import type { DatabaseAllEvents, EventTraceFn } from '../../affine-shared/servic
 import type { DisposableMember } from '../../global/disposable/index.js';
 import { type Clipboard, type DndController, type EventName, ShadowlessElement, type UIEventHandler } from '../../std/index.js';
 import { type ReadonlySignal } from '@preact/signals-core';
+import { type TemplateResult } from 'lit';
 import type { DataSource } from './data-source/index.js';
 import type { DataViewSelection } from './types.js';
 import type { DataViewUILogicBase } from './view/data-view-base.js';
@@ -22,10 +23,22 @@ export type DataViewRendererConfig = {
     selection$: ReadonlySignal<DataViewSelection | undefined>;
     setSelection: (selection: DataViewSelection | undefined) => void;
     eventTrace: EventTraceFn<DatabaseAllEvents>;
+    /**
+     * Drawn instead of the current view, header widget included, when it
+     * returns something (a source the view names that the host cannot resolve,
+     * ADR 0035 §7): the caller draws what of its header still makes sense.
+     * Absent: every view draws as in 0.48.
+     */
+    viewPlaceholder?: (logic: DataViewUILogicBase) => TemplateResult | undefined;
     detailPanelConfig: {
         openDetailPanel: (target: HTMLElement, data: {
             view: SingleView;
             rowId: string;
+            /**
+             * A Ctrl/Cmd click: the host may open the row in a new tab (ADR 0035
+             * §9a). Absent for a gesture with no such modifier.
+             */
+            newTab?: boolean;
         }) => Promise<void>;
     };
 };
@@ -45,13 +58,19 @@ export declare class DataViewRootUILogic {
     readonly currentViewId$: ReadonlySignal<string | undefined>;
     readonly currentView$: ReadonlySignal<DataViewUILogicBase<SingleView, DataViewSelection> | undefined>;
     focusFirstCell: () => void;
+    /**
+     * The one way a view opens a row, whatever its preset (the database block
+     * routes it to the host's opener or to its own detail panel, ADR 0035 §9a).
+     * `newTab` says the gesture asked for a new tab (`isNewTabClick`).
+     */
     openDetailPanel: (ops: {
         view: SingleView;
         rowId: string;
+        newTab?: boolean;
         onClose?: () => void;
     }) => void;
     setupViewChangeListener(): () => void;
-    render(): import("lit-html").TemplateResult;
+    render(): TemplateResult;
 }
 declare const DataViewRootUI_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class DataViewRootUI extends DataViewRootUI_base {
@@ -62,10 +81,11 @@ export declare class DataViewRootUI extends DataViewRootUI_base {
     openDetailPanel: (ops: {
         view: SingleView;
         rowId: string;
+        newTab?: boolean;
         onClose?: () => void;
     }) => void;
     connectedCallback(): void;
-    render(): import("lit-html").TemplateResult | undefined;
+    render(): TemplateResult | undefined;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/_pkgs/data-view/core/data-view.js

@@ -110,6 +110,11 @@ export class DataViewRootUILogic {
         this.focusFirstCell = () => {
             this.currentView$.value?.focusFirstCell();
         };
+        /**
+         * The one way a view opens a row, whatever its preset (the database block
+         * routes it to the host's opener or to its own detail panel, ADR 0035 §9a).
+         * `newTab` says the gesture asked for a new tab (`isNewTabClick`).
+         */
         this.openDetailPanel = (ops) => {
             const openDetailPanel = this.config.detailPanelConfig.openDetailPanel;
             const target = this.dataViewRenderer;
@@ -117,6 +122,7 @@ export class DataViewRootUILogic {
                 openDetailPanel(target, {
                     view: ops.view,
                     rowId: ops.rowId,
+                    ...(ops.newTab ? { newTab: true } : {}),
                 })
                     .catch(console.error)
                     .finally(ops.onClose);
@@ -197,6 +203,14 @@ let DataViewRootUI = (() => {
             if (!currentView) {
                 return;
             }
+            const placeholder = this.logic.config.viewPlaceholder?.(currentView);
+            if (placeholder) {
+                return html `
+        <div style="display: contents" class="${containerClass}">
+          ${placeholder}
+        </div>
+      `;
+            }
             return html `
       <div style="display: contents" class="${containerClass}">
         ${renderUniLit(currentView.renderer, {

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

@@ -6,6 +6,7 @@ import { DataViewRootUI } from './data-view.js';
 import { RecordDetail } from './detail/detail.js';
 import { RecordField } from './detail/field.js';
 import { VariableRefView } from './expression/ref/ref-view.js';
+import { DataViewHiddenGroups } from './group-by/group-visibility.js';
 import { BooleanGroupView } from './group-by/renderer/boolean-group.js';
 import { DateGroupView } from './group-by/renderer/date-group.js';
 import { NumberGroupView } from './group-by/renderer/number-group.js';
@@ -27,6 +28,7 @@ export function coreEffects() {
     customElements.define('data-view-group-title-number-view', NumberGroupView);
     customElements.define('affine-lit-icon', AffineLitIcon);
     customElements.define('data-view-group-setting', GroupSetting);
+    customElements.define('dv-hidden-groups', DataViewHiddenGroups);
     customElements.define('affine-multi-tag-select', MultiTagSelect);
     customElements.define('data-view-group-title-boolean-view', BooleanGroupView);
     customElements.define('data-view-group-title-date-view', DateGroupView);

package/dist/_pkgs/data-view/core/group-by/collapsed-state.d.ts

@@ -0,0 +1,3 @@
+import { type ReadonlySignal } from '@preact/signals-core';
+export declare function groupCollapsed$(viewId: string, groupKey: string): ReadonlySignal<boolean>;
+export declare function groupCollapsedSet(viewId: string, groupKey: string, collapsed: boolean): void;

package/dist/_pkgs/data-view/core/group-by/collapsed-state.js

@@ -0,0 +1,59 @@
+import { signal } from '@preact/signals-core';
+/**
+ * Whether a group of a view is folded, for every preset (ADR 0035 §8, B8,
+ * PRD REQ-DB-16). Personal and per device: kept in `localStorage`, never in
+ * the document, like the local hide of ADR 0031. A host seam was not chosen:
+ * it would be a row in the seams table forever for a device ergonomic, and a
+ * fold that follows the user across devices is not asked for.
+ *
+ * Only a folded group has an entry (`'1'`); unfolding removes it. Any other
+ * value, a storage that throws (private mode, blocked site data) or no
+ * storage at all reads as unfolded. One signal per key, shared by every
+ * element drawing that group, so a fold is seen everywhere at once.
+ *
+ * Until 0.49 the table kept this in `sessionStorage` under
+ * `affine:table-group:*`; those entries were per tab and are not read back.
+ */
+const PREFIX = 'labre:data-view:group-collapsed:';
+const storageKey = (viewId, groupKey) => `${PREFIX}${viewId}:${groupKey}`;
+const states = new Map();
+function readStored(key) {
+    try {
+        return globalThis.localStorage?.getItem(key) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+function writeStored(key, collapsed) {
+    try {
+        if (collapsed) {
+            globalThis.localStorage?.setItem(key, '1');
+        }
+        else {
+            globalThis.localStorage?.removeItem(key);
+        }
+    }
+    catch {
+        // A storage that refuses keeps the fold for this session only.
+    }
+}
+function stateOf(viewId, groupKey) {
+    const key = storageKey(viewId, groupKey);
+    let state = states.get(key);
+    if (!state) {
+        state = signal(readStored(key));
+        states.set(key, state);
+    }
+    return state;
+}
+export function groupCollapsed$(viewId, groupKey) {
+    return stateOf(viewId, groupKey);
+}
+export function groupCollapsedSet(viewId, groupKey, collapsed) {
+    const state = stateOf(viewId, groupKey);
+    if (state.peek() === collapsed)
+        return;
+    state.value = collapsed;
+    writeStored(storageKey(viewId, groupKey), collapsed);
+}

package/dist/_pkgs/data-view/core/group-by/group-properties.d.ts

@@ -0,0 +1,21 @@
+import type { GroupProperty } from '../common/types.js';
+import type { Row } from '../view-manager/row.js';
+/**
+ * The group ops every grouped preset hands its `GroupTrait`, over the view's
+ * stored `groupProperties` (the shape table and kanban have always stored:
+ * `{ key, hide, manuallyCardSort }`). One copy for table, kanban, gallery and
+ * list (ADR 0035 §8, B8), so a hidden group and a manual order read and write
+ * the same way in every view.
+ *
+ * Every write lists the entry of every group key it is given, so a hidden
+ * group keeps its `hide` and its card order through a reorder; nothing is
+ * written when the value would not change.
+ */
+export declare const groupPropertiesOps: (read: () => GroupProperty[], write: (groupProperties: GroupProperty[]) => void) => {
+    sortGroup: (keys: string[]) => string[];
+    sortRow: (key: string, rows: Row[]) => Row[];
+    changeGroupSort: (keys: string[]) => void;
+    changeRowSort: (groupKeys: string[], groupKey: string, keys: string[]) => void;
+    groupHidden: (key: string) => boolean;
+    groupHideSet: (groupKeys: string[], groupKey: string, hide: boolean) => void;
+};

package/dist/_pkgs/data-view/core/group-by/group-properties.js

@@ -0,0 +1,38 @@
+import { sortByManually } from './trait.js';
+/**
+ * The group ops every grouped preset hands its `GroupTrait`, over the view's
+ * stored `groupProperties` (the shape table and kanban have always stored:
+ * `{ key, hide, manuallyCardSort }`). One copy for table, kanban, gallery and
+ * list (ADR 0035 §8, B8), so a hidden group and a manual order read and write
+ * the same way in every view.
+ *
+ * Every write lists the entry of every group key it is given, so a hidden
+ * group keeps its `hide` and its card order through a reorder; nothing is
+ * written when the value would not change.
+ */
+export const groupPropertiesOps = (read, write) => {
+    const entries = () => new Map(read().map(v => [v.key, v]));
+    const entry = (map, key) => map.get(key) ?? { key, hide: false, manuallyCardSort: [] };
+    const groupHidden = (key) => read().find(v => v.key === key)?.hide === true;
+    return {
+        sortGroup: (keys) => sortByManually(keys, v => v, read().map(v => v.key)),
+        sortRow: (key, rows) => sortByManually(rows, v => v.rowId, read().find(v => v.key === key)?.manuallyCardSort ?? []),
+        changeGroupSort: (keys) => {
+            const map = entries();
+            write(keys.map(key => entry(map, key)));
+        },
+        changeRowSort: (groupKeys, groupKey, keys) => {
+            const map = entries();
+            write(groupKeys.map(key => key === groupKey
+                ? { ...entry(map, key), manuallyCardSort: keys }
+                : entry(map, key)));
+        },
+        groupHidden,
+        groupHideSet: (groupKeys, groupKey, hide) => {
+            if (groupHidden(groupKey) === hide)
+                return;
+            const map = entries();
+            write(groupKeys.map(key => key === groupKey ? { ...entry(map, key), hide } : entry(map, key)));
+        },
+    };
+};

package/dist/_pkgs/data-view/core/group-by/group-title.js

@@ -3,8 +3,12 @@ import { IS_MOBILE } from '../../../global/env/index.js';
 import { MoreHorizontalIcon, PlusIcon } from '@blocksuite/icons/lit';
 import { nothing } from 'lit';
 import { html } from 'lit/static-html.js';
+import { VALUES_PENDING_MARK, valuesReady } from '../data-source/hydration.js';
 import { renderUniLit } from '../utils/uni-component/uni-component.js';
 function GroupHeaderCount(group) {
+    if (!valuesReady(group.property.view.manager.dataSource)) {
+        return html ` <div class="group-header-count">${VALUES_PENDING_MARK}</div>`;
+    }
     const cards = group.rows;
     if (!cards.length) {
         return;

package/dist/_pkgs/data-view/core/group-by/group-visibility.d.ts

@@ -0,0 +1,40 @@
+import { type MenuConfig } from '../../../affine-components/context-menu/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../std/index.js';
+import { nothing } from 'lit';
+import { type Wording } from '../utils/wording.js';
+import type { Group, GroupTrait } from './trait.js';
+/**
+ * The group chrome every grouped preset shares (ADR 0035 §8, B8, PRD
+ * REQ-DB-16): "Hide group" in a group's menu, the fold toggle of a group
+ * header, and the list of hidden groups drawn at the end of the view. Hiding
+ * is a view setting, shared by everyone; folding is personal
+ * (`collapsed-state.ts`).
+ */
+/** "Hide group", for a group's own menu. Absent where the view hides none. */
+export declare const hideGroupAction: (group: Group, wording: Wording) => MenuConfig;
+/**
+ * A group header's fold button. Folding is never a write, so a read-only
+ * view folds too.
+ */
+export declare const renderGroupToggle: (group: Group, wording: Wording) => import("lit-html").TemplateResult<1>;
+export declare const groupToggleStyles: import("lit").CSSResult;
+declare const DataViewHiddenGroups_base: typeof ShadowlessElement & import("../../../global/utils/types.js").Constructor<import("../../../global/lit/with-disposable.js").DisposableClass>;
+/**
+ * The hidden groups of a view, at its end, each with a button that shows it
+ * again (PRD REQ-DB-16). Nothing when the view hides no group. A read-only
+ * view lists them without the button.
+ */
+export declare class DataViewHiddenGroups extends DataViewHiddenGroups_base {
+    static styles: import("lit").CSSResult;
+    /** Absent outside an editor (a unit test): the wordings read English. */
+    accessor std: BlockStdScope;
+    accessor groupTrait: GroupTrait | undefined;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dv-hidden-groups': DataViewHiddenGroups;
+    }
+}
+export {};

package/dist/_pkgs/data-view/core/group-by/group-visibility.js

@@ -0,0 +1,291 @@
+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 { menu } from '../../../affine-components/context-menu/index.js';
+import { SignalWatcher, WithDisposable } from '../../../global/lit/index.js';
+import { InvisibleIcon, ToggleDownIcon, ToggleRightIcon, ViewIcon, } from '@blocksuite/icons/lit';
+import { ShadowlessElement, stdContext } from '../../../std/index.js';
+import { consume } from '@lit/context';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, nothing, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { DATA_VIEW_GROUP_COLLAPSE, DATA_VIEW_GROUP_EXPAND, DATA_VIEW_GROUP_HIDE, DATA_VIEW_GROUP_SHOW, DATA_VIEW_HIDDEN_GROUPS, } from '../../translations.js';
+import { VALUES_PENDING_MARK, valuesReady } from '../data-source/hydration.js';
+import { renderUniLit } from '../utils/uni-component/uni-component.js';
+import { wordingOf } from '../utils/wording.js';
+/**
+ * The group chrome every grouped preset shares (ADR 0035 §8, B8, PRD
+ * REQ-DB-16): "Hide group" in a group's menu, the fold toggle of a group
+ * header, and the list of hidden groups drawn at the end of the view. Hiding
+ * is a view setting, shared by everyone; folding is personal
+ * (`collapsed-state.ts`).
+ */
+/** "Hide group", for a group's own menu. Absent where the view hides none. */
+export const hideGroupAction = (group, wording) => menu.action({
+    name: wording(DATA_VIEW_GROUP_HIDE),
+    prefix: InvisibleIcon(),
+    hide: () => !group.manager.groupsCanHide,
+    select: () => {
+        group.manager.groupHideSet(group.key, true);
+    },
+});
+const groupCount = (group) => valuesReady(group.property.view.manager.dataSource)
+    ? group.rows.length
+    : VALUES_PENDING_MARK;
+/**
+ * A group header's fold button. Folding is never a write, so a read-only
+ * view folds too.
+ */
+export const renderGroupToggle = (group, wording) => {
+    const collapsed = group.manager.collapsed$(group.key).value;
+    const label = wording(collapsed ? DATA_VIEW_GROUP_EXPAND : DATA_VIEW_GROUP_COLLAPSE);
+    return html `<button
+    class="dv-group-toggle"
+    data-testid="dv-group-toggle"
+    aria-expanded="${collapsed ? 'false' : 'true'}"
+    aria-label="${label}"
+    title="${label}"
+    @click="${(event) => {
+        event.stopPropagation();
+        group.manager.collapsedSet(group.key, !collapsed);
+    }}"
+  >
+    ${collapsed ? ToggleRightIcon() : ToggleDownIcon()}
+  </button>`;
+};
+export const groupToggleStyles = css `
+  .dv-group-toggle {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--affine-icon-color);
+    cursor: pointer;
+  }
+
+  .dv-group-toggle svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .dv-group-toggle:focus-visible {
+    outline: 2px solid var(--affine-primary-color);
+    outline-offset: 1px;
+  }
+
+  @media (hover: hover) {
+    .dv-group-toggle:hover {
+      background-color: var(--affine-hover-color);
+    }
+  }
+
+  @media (pointer: coarse) {
+    .dv-group-toggle {
+      width: 44px;
+      height: 44px;
+    }
+  }
+`;
+/**
+ * The hidden groups of a view, at its end, each with a button that shows it
+ * again (PRD REQ-DB-16). Nothing when the view hides no group. A read-only
+ * view lists them without the button.
+ */
+let DataViewHiddenGroups = (() => {
+    let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
+    let _groupTrait_decorators;
+    let _groupTrait_initializers = [];
+    let _groupTrait_extraInitializers = [];
+    return class DataViewHiddenGroups extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
+            _groupTrait_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, _groupTrait_decorators, { kind: "accessor", name: "groupTrait", static: false, private: false, access: { has: obj => "groupTrait" in obj, get: obj => obj.groupTrait, set: (obj, value) => { obj.groupTrait = value; } }, metadata: _metadata }, _groupTrait_initializers, _groupTrait_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = css `
+    dv-hidden-groups {
+      display: block;
+    }
+
+    .dv-hidden-groups {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      padding: 8px 0;
+    }
+
+    .dv-hidden-groups-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 0 4px 4px;
+      font-size: 12px;
+      line-height: 20px;
+      color: var(--affine-text-secondary-color);
+    }
+
+    .dv-hidden-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-height: 32px;
+      padding: 0 4px;
+      border-radius: 4px;
+    }
+
+    .dv-hidden-group-title {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      opacity: 0.7;
+    }
+
+    .dv-hidden-group-count {
+      flex-shrink: 0;
+      font-size: 12px;
+      color: var(--affine-text-secondary-color);
+    }
+
+    .dv-hidden-group-show {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
+      border-radius: 4px;
+      background: transparent;
+      color: var(--affine-icon-color);
+      cursor: pointer;
+    }
+
+    .dv-hidden-group-show svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .dv-hidden-group-show:focus-visible {
+      outline: 2px solid var(--affine-primary-color);
+      outline-offset: 1px;
+    }
+
+    @media (hover: hover) {
+      .dv-hidden-group-show:hover {
+        background-color: var(--affine-hover-color);
+      }
+    }
+
+    @media (pointer: coarse) {
+      .dv-hidden-group {
+        min-height: 44px;
+      }
+
+      .dv-hidden-group-show {
+        width: 44px;
+        height: 44px;
+      }
+    }
+  `; }
+        #std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+        /** 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; }
+        #groupTrait_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _groupTrait_initializers, undefined));
+        get groupTrait() { return this.#groupTrait_accessor_storage; }
+        set groupTrait(value) { this.#groupTrait_accessor_storage = value; }
+        connectedCallback() {
+            super.connectedCallback();
+            this.dataset.testid = 'dv-hidden-groups';
+        }
+        render() {
+            const trait = this.groupTrait;
+            const groups = trait?.hiddenGroups$.value ?? [];
+            if (!trait || !groups.length)
+                return nothing;
+            const wording = wordingOf(this.std);
+            const readonly = trait.view.readonly$.value;
+            const show = wording(DATA_VIEW_GROUP_SHOW);
+            return html `<div class="dv-hidden-groups">
+      <div class="dv-hidden-groups-title">
+        <span>${wording(DATA_VIEW_HIDDEN_GROUPS)}</span>
+        <span>${groups.length}</span>
+      </div>
+      ${repeat(groups, group => group.key, group => {
+                const props = { group, readonly: true };
+                return html `<div
+            class="dv-hidden-group"
+            data-testid="dv-hidden-group"
+            data-group-key="${group.key}"
+          >
+            <div class="dv-hidden-group-title">
+              ${renderUniLit(group.view, props)}
+            </div>
+            <span class="dv-hidden-group-count">${groupCount(group)}</span>
+            ${readonly
+                    ? nothing
+                    : html `<button
+                  class="dv-hidden-group-show"
+                  data-testid="dv-group-show"
+                  aria-label="${show}"
+                  title="${show}"
+                  @click="${() => trait.groupHideSet(group.key, false)}"
+                >
+                  ${ViewIcon()}
+                </button>`}
+          </div>`;
+            })}
+    </div>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _groupTrait_extraInitializers);
+        }
+    };
+})();
+export { DataViewHiddenGroups };