@formicoidea/labre-core-database 0.57.0 → 0.59.0

package/dist/database-page/database-page-root.js

@@ -81,6 +81,34 @@ export class DatabasePageRoot extends BlockComponent {
     affine-database-page-root div:has(> affine-database-title) {
       display: none !important;
     }
+    /* The view bar sits under the page heading: no top margin or padding
+       of the inline block. The attribute outweighs the block's emotion class
+       (one class); its sides and bottom stay the inline block's. */
+    affine-database-page-root affine-database[data-block-id] {
+      margin-top: 0;
+      padding-top: 0;
+    }
+    /* A table is as wide as its columns: the page scrolls sideways, so the
+       column header sticks natively to the page's top (data-view's column
+       header then leaves it alone). The table's own wrappers stop being
+       scrollers, the view bar stays in view, a viewport wide. */
+    affine-database-page-root:has(dv-table-view-ui) {
+      width: max-content;
+      min-width: 100%;
+    }
+    affine-database-page-root .dv-table-wrapper,
+    affine-database-page-root .dv-table-scroll-container {
+      overflow: visible;
+    }
+    affine-database-page-root affine-database-column-header {
+      position: sticky;
+      top: 0;
+    }
+    affine-database-page-root div:has(> div > affine-database-title) {
+      position: sticky;
+      left: var(--affine-editor-side-padding, 24px);
+      width: calc(100cqw - 2 * var(--affine-editor-side-padding, 24px));
+    }
     /* A phone keeps the page root's narrow padding (page-root-block.ts). */
     @container viewport (width <= 640px) {
       affine-database-page-root {

package/dist/database-page/database-page.d.ts

@@ -1,5 +1,5 @@
 import { type BlockStdOptions, BlockStdScope, ShadowlessElement } from '@formicoidea/labre-core/std';
-import { nothing, type PropertyValues } from 'lit';
+import { type PropertyValues } from 'lit';
 declare const DatabasePageHost_base: typeof ShadowlessElement & import("@formicoidea/labre-core/_pkgs/global/utils/types.js").Constructor<import("@formicoidea/labre-core/global/lit").DisposableClass>;
 /**
  * The full-page database host (ADR 0035 §1, B13; labre PRD REQ-DB-7).
@@ -36,10 +36,17 @@ export declare class DatabasePageHost extends DatabasePageHost_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues<this>): void;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): import("lit-html").TemplateResult<1>;
     accessor store: BlockStdOptions['store'];
     /** The page-scope view extensions the host mounts its page editor with. */
     accessor extensions: BlockStdOptions['extensions'];
+    /**
+     * The page title the host draws above the views, a `<doc-title>` with its
+     * `bodyBlockId` set to `hostBlockId`. The page renders it inside its own
+     * viewport, so the title and the views scroll as one page; it shows before
+     * the editor exists.
+     */
+    accessor heading: HTMLElement | null;
     /** The id of the `affine:database` block whose `props.views` the page shows. */
     accessor hostBlockId: string;
 }

package/dist/database-page/database-page.js

@@ -77,6 +77,9 @@ let DatabasePageHost = (() => {
     let _extensions_decorators;
     let _extensions_initializers = [];
     let _extensions_extraInitializers = [];
+    let _heading_decorators;
+    let _heading_initializers = [];
+    let _heading_extraInitializers = [];
     let _hostBlockId_decorators;
     let _hostBlockId_initializers = [];
     let _hostBlockId_extraInitializers = [];
@@ -85,22 +88,57 @@ let DatabasePageHost = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _store_decorators = [property({ attribute: false })];
             _extensions_decorators = [property({ attribute: false })];
+            _heading_decorators = [property({ attribute: false })];
             _hostBlockId_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _store_decorators, { kind: "accessor", name: "store", static: false, private: false, access: { has: obj => "store" in obj, get: obj => obj.store, set: (obj, value) => { obj.store = value; } }, metadata: _metadata }, _store_initializers, _store_extraInitializers);
             __esDecorate(this, null, _extensions_decorators, { kind: "accessor", name: "extensions", static: false, private: false, access: { has: obj => "extensions" in obj, get: obj => obj.extensions, set: (obj, value) => { obj.extensions = value; } }, metadata: _metadata }, _extensions_initializers, _extensions_extraInitializers);
+            __esDecorate(this, null, _heading_decorators, { kind: "accessor", name: "heading", static: false, private: false, access: { has: obj => "heading" in obj, get: obj => obj.heading, set: (obj, value) => { obj.heading = value; } }, metadata: _metadata }, _heading_initializers, _heading_extraInitializers);
             __esDecorate(this, null, _hostBlockId_decorators, { kind: "accessor", name: "hostBlockId", static: false, private: false, access: { has: obj => "hostBlockId" in obj, get: obj => obj.hostBlockId, set: (obj, value) => { obj.hostBlockId = value; } }, metadata: _metadata }, _hostBlockId_initializers, _hostBlockId_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = css `
     affine-database-page {
       display: block;
+      height: 100%;
     }
+    /* The page's only scroller, in both directions: the heading and the
+       views scroll as one page, and a wide table widens the page instead of
+       scrolling inside it (labre recette of 2026-10-26: a host viewport
+       around this one showed two scrollbars, then the column header, put
+       back by script on each scroll of a table that scrolled sideways
+       itself, jumped). */
     affine-database-page > .affine-page-viewport {
+      display: flex;
+      flex-direction: column;
       height: 100%;
+      overflow: auto;
       /* The container the page root's narrow-screen query reads. */
       container-type: inline-size;
       container-name: viewport;
     }
+    /* The editor takes the height the heading leaves (std gives it 100%,
+       which overflowed by the heading's height: a scrollbar on a short
+       table). */
+    affine-database-page > .affine-page-viewport > editor-host {
+      flex: 1 0 auto;
+      height: auto;
+    }
+    /* The heading stays in view when the page scrolls sideways. */
+    affine-database-page > .affine-page-viewport > doc-title {
+      position: sticky;
+      left: 0;
+      width: 100cqw;
+    }
+    /* A database page is a table, not a text: the heading sits on the view
+       bar, without the page title's bottom padding, its band's, or the
+       block's top margin and padding (the root's rule). */
+    affine-database-page
+      > .affine-page-viewport
+      > doc-title
+      .doc-title-container,
+    affine-database-page > .affine-page-viewport > doc-title .doc-title-band {
+      padding-bottom: 0;
+    }
   `; }
         /** The editor of the page, once `store` and `hostBlockId` are set. */
         get std() {
@@ -154,10 +192,11 @@ let DatabasePageHost = (() => {
             this.editorHost = this._std?.render();
         }
         render() {
-            if (!this.editorHost)
-                return nothing;
-            // The page viewport the page extensions look for above their host.
-            return html `<div class="affine-page-viewport">${this.editorHost}</div>`;
+            // The page viewport the page extensions, and `<doc-title>`, look for
+            // above their host.
+            return html `<div class="affine-page-viewport">
+      ${this.heading ?? nothing}${this.editorHost ?? nothing}
+    </div>`;
         }
         #store_accessor_storage;
         get store() { return this.#store_accessor_storage; }
@@ -166,6 +205,15 @@ let DatabasePageHost = (() => {
         /** The page-scope view extensions the host mounts its page editor with. */
         get extensions() { return this.#extensions_accessor_storage; }
         set extensions(value) { this.#extensions_accessor_storage = value; }
+        #heading_accessor_storage;
+        /**
+         * The page title the host draws above the views, a `<doc-title>` with its
+         * `bodyBlockId` set to `hostBlockId`. The page renders it inside its own
+         * viewport, so the title and the views scroll as one page; it shows before
+         * the editor exists.
+         */
+        get heading() { return this.#heading_accessor_storage; }
+        set heading(value) { this.#heading_accessor_storage = value; }
         #hostBlockId_accessor_storage;
         /** The id of the `affine:database` block whose `props.views` the page shows. */
         get hostBlockId() { return this.#hostBlockId_accessor_storage; }
@@ -177,7 +225,8 @@ let DatabasePageHost = (() => {
             this.guard = undefined;
             this.#store_accessor_storage = __runInitializers(this, _store_initializers, void 0);
             this.#extensions_accessor_storage = (__runInitializers(this, _store_extraInitializers), __runInitializers(this, _extensions_initializers, []));
-            this.#hostBlockId_accessor_storage = (__runInitializers(this, _extensions_extraInitializers), __runInitializers(this, _hostBlockId_initializers, ''));
+            this.#heading_accessor_storage = (__runInitializers(this, _extensions_extraInitializers), __runInitializers(this, _heading_initializers, null));
+            this.#hostBlockId_accessor_storage = (__runInitializers(this, _heading_extraInitializers), __runInitializers(this, _hostBlockId_initializers, ''));
             __runInitializers(this, _hostBlockId_extraInitializers);
         }
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-core-database",
   "description": "Labre core-database editing chrome for @formicoidea/labre-core.",
-  "version": "0.57.0",
+  "version": "0.59.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -27,7 +27,7 @@
     "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.57.0",
+    "@formicoidea/labre-core": "0.59.0",
     "@blocksuite/icons": "^2.2.12",
     "@preact/signals-core": "^1.8.0",
     "lit": "^3.2.0"