@formicoidea/labre-core 0.31.0 → 0.33.0

package/dist/_pkgs/affine-block-code/code-toolbar/components/code-toolbar.js

@@ -39,9 +39,9 @@ import { WithDisposable } from '../../../global/lit/index.js';
 import { noop } from '../../../global/utils/index.js';
 import { MoreVerticalIcon } from '@blocksuite/icons/lit';
 import { flip, offset } from '@floating-ui/dom';
+import { effect } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
 let AffineCodeToolbar = (() => {
     let _classSuper = WithDisposable(LitElement);
     let __moreButton_decorators;
@@ -50,6 +50,9 @@ let AffineCodeToolbar = (() => {
     let __moreMenuOpen_decorators;
     let __moreMenuOpen_initializers = [];
     let __moreMenuOpen_extraInitializers = [];
+    let __collapsed_decorators;
+    let __collapsed_initializers = [];
+    let __collapsed_extraInitializers = [];
     let _context_decorators;
     let _context_initializers = [];
     let _context_extraInitializers = [];
@@ -67,12 +70,14 @@ let AffineCodeToolbar = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             __moreButton_decorators = [query('.code-toolbar-button.more')];
             __moreMenuOpen_decorators = [state()];
+            __collapsed_decorators = [state()];
             _context_decorators = [property({ attribute: false })];
             _moreGroups_decorators = [property({ attribute: false })];
             _onActiveStatusChange_decorators = [property({ attribute: false })];
             _primaryGroups_decorators = [property({ attribute: false })];
             __esDecorate(this, null, __moreButton_decorators, { kind: "accessor", name: "_moreButton", static: false, private: false, access: { has: obj => "_moreButton" in obj, get: obj => obj._moreButton, set: (obj, value) => { obj._moreButton = value; } }, metadata: _metadata }, __moreButton_initializers, __moreButton_extraInitializers);
             __esDecorate(this, null, __moreMenuOpen_decorators, { kind: "accessor", name: "_moreMenuOpen", static: false, private: false, access: { has: obj => "_moreMenuOpen" in obj, get: obj => obj._moreMenuOpen, set: (obj, value) => { obj._moreMenuOpen = value; } }, metadata: _metadata }, __moreMenuOpen_initializers, __moreMenuOpen_extraInitializers);
+            __esDecorate(this, null, __collapsed_decorators, { kind: "accessor", name: "_collapsed", static: false, private: false, access: { has: obj => "_collapsed" in obj, get: obj => obj._collapsed, set: (obj, value) => { obj._collapsed = value; } }, metadata: _metadata }, __collapsed_initializers, __collapsed_extraInitializers);
             __esDecorate(this, null, _context_decorators, { kind: "accessor", name: "context", static: false, private: false, access: { has: obj => "context" in obj, get: obj => obj.context, set: (obj, value) => { obj.context = value; } }, metadata: _metadata }, _context_initializers, _context_extraInitializers);
             __esDecorate(this, null, _moreGroups_decorators, { kind: "accessor", name: "moreGroups", static: false, private: false, access: { has: obj => "moreGroups" in obj, get: obj => obj.moreGroups, set: (obj, value) => { obj.moreGroups = value; } }, metadata: _metadata }, _moreGroups_initializers, _moreGroups_extraInitializers);
             __esDecorate(this, null, _onActiveStatusChange_decorators, { kind: "accessor", name: "onActiveStatusChange", static: false, private: false, access: { has: obj => "onActiveStatusChange" in obj, get: obj => obj.onActiveStatusChange, set: (obj, value) => { obj.onActiveStatusChange = value; } }, metadata: _metadata }, _onActiveStatusChange_initializers, _onActiveStatusChange_extraInitializers);
@@ -125,18 +130,10 @@ let AffineCodeToolbar = (() => {
             }
             createLitPortal({
                 template: html `
-        <editor-menu-content
-          data-show
-          class="more-popup-menu"
-          style=${styleMap({
-                    '--content-padding': '8px',
-                    '--packed-height': '4px',
-                })}
-        >
-          <div data-size="large" data-orientation="vertical">
-            ${renderGroups(this.moreGroups, this.context)}
-          </div>
-        </editor-menu-content>
+        <affine-code-more-menu
+          .context=${this.context}
+          .moreGroups=${this.moreGroups}
+        ></affine-code-more-menu>
       `,
                 // should be greater than block-selection z-index as selection and popover wil share the same stacking context(editor-host)
                 portalStyles: {
@@ -158,6 +155,14 @@ let AffineCodeToolbar = (() => {
             super.disconnectedCallback();
             this.closeCurrentMenu();
         }
+        connectedCallback() {
+            super.connectedCallback();
+            // Mirror the collapsed$ signal from the block component into local @state
+            // so this LitElement re-renders when it changes.
+            this.disposables.add(effect(() => {
+                this._collapsed = this.context.blockComponent.collapsed$.value;
+            }));
+        }
         render() {
             return html `
       <editor-toolbar class="code-toolbar-container" data-without-bg>
@@ -185,6 +190,9 @@ let AffineCodeToolbar = (() => {
         #_moreMenuOpen_accessor_storage;
         get _moreMenuOpen() { return this.#_moreMenuOpen_accessor_storage; }
         set _moreMenuOpen(value) { this.#_moreMenuOpen_accessor_storage = value; }
+        #_collapsed_accessor_storage;
+        get _collapsed() { return this.#_collapsed_accessor_storage; }
+        set _collapsed(value) { this.#_collapsed_accessor_storage = value; }
         #context_accessor_storage;
         get context() { return this.#context_accessor_storage; }
         set context(value) { this.#context_accessor_storage = value; }
@@ -209,7 +217,8 @@ let AffineCodeToolbar = (() => {
             };
             this.#_moreButton_accessor_storage = __runInitializers(this, __moreButton_initializers, void 0);
             this.#_moreMenuOpen_accessor_storage = (__runInitializers(this, __moreButton_extraInitializers), __runInitializers(this, __moreMenuOpen_initializers, false));
-            this.#context_accessor_storage = (__runInitializers(this, __moreMenuOpen_extraInitializers), __runInitializers(this, _context_initializers, void 0));
+            this.#_collapsed_accessor_storage = (__runInitializers(this, __moreMenuOpen_extraInitializers), __runInitializers(this, __collapsed_initializers, false));
+            this.#context_accessor_storage = (__runInitializers(this, __collapsed_extraInitializers), __runInitializers(this, _context_initializers, void 0));
             this.#moreGroups_accessor_storage = (__runInitializers(this, _context_extraInitializers), __runInitializers(this, _moreGroups_initializers, void 0));
             this.#onActiveStatusChange_accessor_storage = (__runInitializers(this, _moreGroups_extraInitializers), __runInitializers(this, _onActiveStatusChange_initializers, noop));
             this.#primaryGroups_accessor_storage = (__runInitializers(this, _onActiveStatusChange_extraInitializers), __runInitializers(this, _primaryGroups_initializers, void 0));

package/dist/_pkgs/affine-block-code/code-toolbar/components/more-menu.d.ts

@@ -0,0 +1,16 @@
+import type { MenuItemGroup } from '../../../affine-components/toolbar/index.js';
+import { ShadowlessElement } from '../../../std/index.js';
+import type { CodeBlockToolbarContext } from '../context.js';
+declare const AffineCodeMoreMenu_base: typeof ShadowlessElement & import("../../../global/utils/types.js").Constructor<import("../../../global/lit/with-disposable.js").DisposableClass>;
+export declare class AffineCodeMoreMenu extends AffineCodeMoreMenu_base {
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    accessor context: CodeBlockToolbarContext;
+    accessor moreGroups: MenuItemGroup<CodeBlockToolbarContext>[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'affine-code-more-menu': AffineCodeMoreMenu;
+    }
+}
+export {};

package/dist/_pkgs/affine-block-code/code-toolbar/components/more-menu.js

@@ -0,0 +1,93 @@
+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 { renderGroups } from '../../../affine-components/toolbar/index.js';
+import { SignalWatcher, WithDisposable } from '../../../global/lit/index.js';
+import { ShadowlessElement } from '../../../std/index.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+let AffineCodeMoreMenu = (() => {
+    let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _context_decorators;
+    let _context_initializers = [];
+    let _context_extraInitializers = [];
+    let _moreGroups_decorators;
+    let _moreGroups_initializers = [];
+    let _moreGroups_extraInitializers = [];
+    return class AffineCodeMoreMenu extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _context_decorators = [property({ attribute: false })];
+            _moreGroups_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _context_decorators, { kind: "accessor", name: "context", static: false, private: false, access: { has: obj => "context" in obj, get: obj => obj.context, set: (obj, value) => { obj.context = value; } }, metadata: _metadata }, _context_initializers, _context_extraInitializers);
+            __esDecorate(this, null, _moreGroups_decorators, { kind: "accessor", name: "moreGroups", static: false, private: false, access: { has: obj => "moreGroups" in obj, get: obj => obj.moreGroups, set: (obj, value) => { obj.moreGroups = value; } }, metadata: _metadata }, _moreGroups_initializers, _moreGroups_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        firstUpdated() {
+            this.disposables.add(this.context.blockComponent.model.propsUpdated.subscribe(({ key }) => {
+                if (key === 'wrap' || key === 'lineNumber') {
+                    this.requestUpdate();
+                }
+            }));
+        }
+        render() {
+            return html `
+      <editor-menu-content
+        data-show
+        class="more-popup-menu"
+        style=${styleMap({
+                '--content-padding': '8px',
+                '--packed-height': '4px',
+            })}
+      >
+        <div data-size="large" data-orientation="vertical">
+          ${renderGroups(this.moreGroups, this.context)}
+        </div>
+      </editor-menu-content>
+    `;
+        }
+        #context_accessor_storage = __runInitializers(this, _context_initializers, void 0);
+        get context() { return this.#context_accessor_storage; }
+        set context(value) { this.#context_accessor_storage = value; }
+        #moreGroups_accessor_storage = (__runInitializers(this, _context_extraInitializers), __runInitializers(this, _moreGroups_initializers, void 0));
+        get moreGroups() { return this.#moreGroups_accessor_storage; }
+        set moreGroups(value) { this.#moreGroups_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _moreGroups_extraInitializers);
+        }
+    };
+})();
+export { AffineCodeMoreMenu };

package/dist/_pkgs/affine-block-code/code-toolbar/config.js

@@ -1,13 +1,17 @@
 import { CancelWrapIcon, CaptionIcon, CopyIcon, DeleteIcon, DuplicateIcon, WrapIcon, } from '../../affine-components/icons/index.js';
-import { CommentProviderIdentifier } from '../../affine-shared/services/index.js';
+import { CommentProviderIdentifier, DocModeProvider, TelemetryProvider, } from '../../affine-shared/services/index.js';
 import { isInsidePageEditor } from '../../affine-shared/utils/index.js';
 import { noop, sleep } from '../../global/utils/index.js';
-import { CommentIcon, NumberedListIcon } from '@blocksuite/icons/lit';
+import { CollapseIcon, CommentIcon, NumberedListIcon, ToggleRightIcon, } from '@blocksuite/icons/lit';
 import { BlockSelection } from '../../std/index.js';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { CodeBlockConfigExtension } from '../code-block-config.js';
 import { duplicateCodeBlock } from './utils.js';
+// Upstream keeps these two in `@blocksuite/affine-components/icons`; we build
+// them here so the code block owns its own toolbar glyphs.
+const CollapseCodeIcon = CollapseIcon({ width: '20', height: '20' });
+const ExpandCodeIcon = ToggleRightIcon({ width: '20', height: '20' });
 export const PRIMARY_GROUPS = [
     {
         type: 'primary',
@@ -74,6 +78,50 @@ export const PRIMARY_GROUPS = [
                     };
                 },
             },
+            {
+                type: 'collapse',
+                when: ({ doc }) => !doc.readonly,
+                generate: ({ blockComponent }) => {
+                    return {
+                        action: () => {
+                            const collapsed = !blockComponent.collapsed$.value;
+                            blockComponent.setCollapsed(collapsed);
+                            const std = blockComponent.std;
+                            const mode = std.getOptional(DocModeProvider)?.getEditorMode() ?? 'page';
+                            std
+                                .getOptional(TelemetryProvider)
+                                ?.track('codeBlockToggleCollapse', {
+                                page: mode,
+                                segment: 'code block',
+                                module: 'code toolbar container',
+                                control: 'collapse button',
+                                type: collapsed ? 'collapse' : 'expand',
+                            });
+                        },
+                        render: item => {
+                            const collapsed = blockComponent.collapsed$.value;
+                            const icon = collapsed ? ExpandCodeIcon : CollapseCodeIcon;
+                            const label = collapsed ? 'Expand code' : 'Collapse code';
+                            return html `
+                <editor-icon-button
+                  class="code-toolbar-button collapse"
+                  aria-label=${label}
+                  .tooltip=${label}
+                  .tooltipOffset=${4}
+                  .iconSize=${'16px'}
+                  .iconContainerPadding=${4}
+                  @click=${(e) => {
+                                e.stopPropagation();
+                                item.action();
+                            }}
+                >
+                  ${icon}
+                </editor-icon-button>
+              `;
+                        },
+                    };
+                },
+            },
             {
                 type: 'caption',
                 label: 'Caption',
@@ -159,7 +207,8 @@ export const toggleGroup = {
                         return html `
               <editor-menu-action
                 @click=${() => {
-                            blockComponent.setWrap(!wrapped);
+                            const currentWrap = blockComponent.model.props.wrap;
+                            blockComponent.setWrap(!currentWrap);
                         }}
                 aria-label=${label}
               >
@@ -183,13 +232,13 @@ export const toggleGroup = {
                 return {
                     action: () => { },
                     render: () => {
-                        const lineNumber = blockComponent.model.props.lineNumber ?? true;
+                        const lineNumber = blockComponent.showLineNumbers;
                         const label = lineNumber ? 'Cancel line number' : 'Line number';
                         return html `
               <editor-menu-action
                 @click=${() => {
                             blockComponent.store.updateBlock(blockComponent.model, {
-                                lineNumber: !lineNumber,
+                                lineNumber: !blockComponent.showLineNumbers,
                             });
                         }}
                 aria-label=${label}

package/dist/_pkgs/affine-block-code/code-toolbar/index.js

@@ -1,6 +1,6 @@
 import { HoverController } from '../../affine-components/hover/index.js';
 import { cloneGroups, getMoreMenuConfig, } from '../../affine-components/toolbar/index.js';
-import { BlockSelection, TextSelection, WidgetComponent, } from '../../std/index.js';
+import { BlockSelection, TextSelection, WidgetComponent } from '../../std/index.js';
 import { limitShift, shift, size } from '@floating-ui/dom';
 import { html } from 'lit';
 import { MORE_GROUPS, PRIMARY_GROUPS } from './config.js';

package/dist/_pkgs/affine-block-code/effects.d.ts

@@ -1,12 +1,14 @@
 import { AFFINE_CODE_TOOLBAR_WIDGET, AffineCodeToolbarWidget } from './code-toolbar/index.js';
 import { AffineCodeToolbar } from './code-toolbar/components/code-toolbar.js';
 import { LanguageListButton } from './code-toolbar/components/lang-button.js';
+import { AffineCodeMoreMenu } from './code-toolbar/components/more-menu.js';
 import { PreviewButton } from './code-toolbar/components/preview-button.js';
 export declare function effects(): void;
 declare global {
     interface HTMLElementTagNameMap {
         'language-list-button': LanguageListButton;
         'affine-code-toolbar': AffineCodeToolbar;
+        'affine-code-more-menu': AffineCodeMoreMenu;
         'preview-button': PreviewButton;
         [AFFINE_CODE_TOOLBAR_WIDGET]: AffineCodeToolbarWidget;
     }

package/dist/_pkgs/affine-block-code/effects.js

@@ -2,11 +2,13 @@ import { CodeBlockComponent } from './code-block.js';
 import { AFFINE_CODE_TOOLBAR_WIDGET, AffineCodeToolbarWidget, } from './code-toolbar/index.js';
 import { AffineCodeToolbar } from './code-toolbar/components/code-toolbar.js';
 import { LanguageListButton } from './code-toolbar/components/lang-button.js';
+import { AffineCodeMoreMenu } from './code-toolbar/components/more-menu.js';
 import { PreviewButton } from './code-toolbar/components/preview-button.js';
 import { AffineCodeUnit } from './highlight/affine-code-unit.js';
 export function effects() {
     customElements.define('language-list-button', LanguageListButton);
     customElements.define('affine-code-toolbar', AffineCodeToolbar);
+    customElements.define('affine-code-more-menu', AffineCodeMoreMenu);
     customElements.define(AFFINE_CODE_TOOLBAR_WIDGET, AffineCodeToolbarWidget);
     customElements.define('affine-code-unit', AffineCodeUnit);
     customElements.define('affine-code', CodeBlockComponent);

package/dist/_pkgs/affine-block-code/highlight/affine-code-unit.js

@@ -83,8 +83,13 @@ let AffineCodeUnit = (() => {
             const tokens = codeBlock.highlightTokens$.value;
             if (tokens.length === 0)
                 return plainContent;
+            // The highlighter runs asynchronously, so the token table can lag behind
+            // the lines being rendered: an out-of-range line has no tokens at all.
+            const line = tokens[vElement.lineIndex];
+            if (!line)
+                return plainContent;
             // copy the tokens to avoid modifying the original tokens
-            const lineTokens = structuredClone(tokens[vElement.lineIndex]);
+            const lineTokens = structuredClone(line);
             if (lineTokens.length === 0)
                 return plainContent;
             const startOffset = vElement.startOffset;

package/dist/_pkgs/affine-block-code/index.d.ts

@@ -6,5 +6,6 @@ export * from './code-block-service.js';
 export * from './code-preview-extension.js';
 export * from './code-toolbar/index.js';
 export * from './highlight/const.js';
+export * from './line-numbers.js';
 export * from './turbo/code-layout-handler.js';
 export * from './turbo/code-painter.worker.js';

package/dist/_pkgs/affine-block-code/index.js

@@ -6,5 +6,6 @@ export * from './code-block-service.js';
 export * from './code-preview-extension.js';
 export * from './code-toolbar/index.js';
 export * from './highlight/const.js';
+export * from './line-numbers.js';
 export * from './turbo/code-layout-handler.js';
 export * from './turbo/code-painter.worker.js';

package/dist/_pkgs/affine-block-code/line-numbers.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Where the "show line numbers" answer comes from — upstream #15381.
+ *
+ * Three voices can speak: the embedder's feature flag (mobile switches line
+ * numbers off outright), the host's global preference, and the block's own
+ * override set from the code toolbar. The library owns none of the storage:
+ * the global preference is read from whatever `EditorSettingProvider` the host
+ * injects, the same seam as the telemetry adapter.
+ */
+/** Key the host uses in its editor-setting payload for this preference. */
+export declare const CODE_BLOCK_LINE_NUMBERS_SETTING_KEY = "codeBlockLineNumbers";
+/**
+ * The host's global preference, defaulting to "shown" when the host injects no
+ * setting service, or injects one that says nothing about code blocks.
+ */
+export declare function readGlobalLineNumbers(setting: unknown): boolean;
+/**
+ * The feature flag has the last word; otherwise the block's own override wins
+ * over the global default, and an untouched block follows the global default.
+ */
+export declare function resolveShowLineNumbers(options: {
+    featureEnabled: boolean;
+    blockOverride: boolean | undefined;
+    globalDefault: boolean;
+}): boolean;

package/dist/_pkgs/affine-block-code/line-numbers.js

@@ -0,0 +1,27 @@
+/**
+ * Where the "show line numbers" answer comes from — upstream #15381.
+ *
+ * Three voices can speak: the embedder's feature flag (mobile switches line
+ * numbers off outright), the host's global preference, and the block's own
+ * override set from the code toolbar. The library owns none of the storage:
+ * the global preference is read from whatever `EditorSettingProvider` the host
+ * injects, the same seam as the telemetry adapter.
+ */
+/** Key the host uses in its editor-setting payload for this preference. */
+export const CODE_BLOCK_LINE_NUMBERS_SETTING_KEY = 'codeBlockLineNumbers';
+/**
+ * The host's global preference, defaulting to "shown" when the host injects no
+ * setting service, or injects one that says nothing about code blocks.
+ */
+export function readGlobalLineNumbers(setting) {
+    return (setting?.[CODE_BLOCK_LINE_NUMBERS_SETTING_KEY] !== false);
+}
+/**
+ * The feature flag has the last word; otherwise the block's own override wins
+ * over the global default, and an untouched block follows the global default.
+ */
+export function resolveShowLineNumbers(options) {
+    if (!options.featureEnabled)
+        return false;
+    return options.blockOverride ?? options.globalDefault;
+}

package/dist/_pkgs/affine-block-code/styles.js

@@ -69,4 +69,35 @@ export const codeBlockStyles = css `
   affine-code .affine-code-block-preview {
     padding: 12px;
   }
+
+  /* ── Collapsed state ──────────────────────────────────────────────── */
+
+  /* Clamp the rich-text to the first 8 lines */
+  .affine-code-block-container.collapsed rich-text {
+    display: block;
+    max-height: calc(8 * var(--affine-line-height));
+    overflow: hidden;
+  }
+
+  /* Reduce bottom padding so the fade sits flush with the border */
+  .affine-code-block-container.collapsed {
+    padding-bottom: 0;
+  }
+
+  /* Gradient overlay that fades to the block background */
+  .affine-code-block-container .code-collapsed-fade {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 80px;
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      var(--affine-background-code-block)
+    );
+    border-radius: 0 0 10px 10px;
+    pointer-events: none;
+    z-index: 1;
+  }
 `;

package/dist/_pkgs/affine-block-data-view/data-view-block.js

@@ -135,6 +135,7 @@ export class DataViewBlockComponent extends CaptionedBlockComponent {
             dataSource: this.dataSource,
             headerWidget: this.headerWidget,
             clipboard: this.std.clipboard,
+            dnd: this.std.dnd,
             notification: {
                 toast: message => {
                     const notification = this.std.getOptional(NotificationProvider);

package/dist/_pkgs/affine-block-database/components/title/index.js

@@ -177,7 +177,10 @@ let DatabaseTitle = (() => {
         get input() { return this.#input_accessor_storage; }
         set input(value) { this.#input_accessor_storage = value; }
         onPressEnterKey() {
-            this.dataViewLogic.addRow?.('start');
+            // Enter commits the title and leaves the field. It used to prepend a row,
+            // which silently created an empty record every time the user validated a
+            // title they had just typed.
+            this.input.blur();
         }
         get readonly$() {
             return this.dataViewLogic.view.readonly$;

package/dist/_pkgs/affine-block-database/configs/slash-menu.js

@@ -3,7 +3,7 @@ import { TelemetryProvider } from '../../affine-shared/services/index.js';
 import { isInsideBlockByFlavour } from '../../affine-shared/utils/index.js';
 import {} from '../../affine-widget-slash-menu/index.js';
 import { viewPresets } from '../../data-view/view-presets/index.js';
-import { DatabaseKanbanViewIcon, DatabaseTableViewIcon, } from '@blocksuite/icons/lit';
+import { DatabaseKanbanViewIcon, DatabaseTableViewIcon, TodayIcon, } from '@blocksuite/icons/lit';
 import { insertDatabaseBlockCommand } from '../commands.js';
 import { KanbanViewTooltip, TableViewTooltip } from './tooltips.js';
 export const databaseSlashMenuConfig = {
@@ -40,6 +40,33 @@ export const databaseSlashMenuConfig = {
                     .run();
             },
         },
+        {
+            name: 'Calendar View',
+            description: 'Display items by date in a calendar.',
+            searchAlias: ['database', 'calendar'],
+            icon: TodayIcon(),
+            group: '7_Database@1',
+            when: ({ model }) => !isInsideBlockByFlavour(model.store, model, 'affine:edgeless-text'),
+            action: ({ std }) => {
+                std.command
+                    .chain()
+                    .pipe(getSelectedModelsCommand)
+                    .pipe(insertDatabaseBlockCommand, {
+                    viewType: viewPresets.calendarViewMeta.type,
+                    place: 'after',
+                    removeEmptyLine: true,
+                })
+                    .pipe(({ insertedDatabaseBlockId }) => {
+                    if (insertedDatabaseBlockId) {
+                        const telemetry = std.getOptional(TelemetryProvider);
+                        telemetry?.track('BlockCreated', {
+                            blockType: 'affine:database',
+                        });
+                    }
+                })
+                    .run();
+            },
+        },
         {
             name: 'Kanban View',
             description: 'Visualize data in a dashboard.',

package/dist/_pkgs/affine-block-database/data-source.js

@@ -116,8 +116,7 @@ export class DatabaseBlockDataSource extends ExternalDataSourceBase {
         return [...fixedPropertiesSet, ...properties];
     }
     getPropertyMetas() {
-        return DatabaseBlockDataSource.propertiesList
-            .value;
+        return DatabaseBlockDataSource.propertiesList.value;
     }
     getCellValue(rowId, propertyId) {
         if (this.isSpacialProperty(propertyId)) {

package/dist/_pkgs/affine-block-database/database-block.js

@@ -7,6 +7,7 @@ import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '../affine-shared/consts/i
 import { BlockCommentManager, CommentProviderIdentifier, DocModeProvider, NotificationProvider, TelemetryProvider, } from '../affine-shared/services/index.js';
 import { getDropResult } from '../affine-widget-drag-handle/index.js';
 import { createRecordDetail, createUniComponentFromWebComponent, DataViewRootUILogic, defineUniComponent, ExternalGroupByConfigProvider, renderUniLit, uniMap, } from '../data-view/index.js';
+import { CalendarExternalSourceProvider } from '../data-view/view-presets/index.js';
 import { widgetPresets } from '../data-view/widget-presets/index.js';
 import { Rect } from '../global/gfx/index.js';
 import { CommentIcon, CopyIcon, DeleteIcon, MoreHorizontalIcon, } from '@blocksuite/icons/lit';
@@ -194,6 +195,12 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent {
                 widgetPresets.tools.viewOptions,
                 widgetPresets.tools.tableAddRow,
             ],
+            calendar: [
+                widgetPresets.tools.filter,
+                widgetPresets.tools.search,
+                widgetPresets.tools.viewOptions,
+                widgetPresets.tools.tableAddRow,
+            ],
         });
         this.viewSelection$ = computed(() => {
             const databaseSelection = this.selection.value.find((selection) => {
@@ -215,6 +222,11 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent {
                 .forEach(config => {
                 dataSource.serviceSet(ExternalGroupByConfigProvider(config.name), config);
             });
+            this.std.provider
+                .getAll(CalendarExternalSourceProvider)
+                .forEach(source => {
+                dataSource.serviceSet(CalendarExternalSourceProvider(source.id), source);
+            });
         };
         const provider = this.std.getOptional(DatabaseDataSourceProvider);
         const dataSource = provider && this.model.props.externalSourceId
@@ -327,6 +339,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent {
             headerWidget: this.headerWidget,
             onDrag: this.onDrag,
             clipboard: this.std.clipboard,
+            dnd: this.std.dnd,
             notification: {
                 toast: message => {
                     const notification = this.std.getOptional(NotificationProvider);

package/dist/_pkgs/affine-block-database/external-data-source.js

@@ -3,7 +3,7 @@ import { DataSourceBase, ViewManagerBase, } from '../data-view/index.js';
 import { DisposableGroup } from '../global/disposable/index.js';
 import { IS_MOBILE } from '../global/env/index.js';
 import { BlockSuiteError, ErrorCode } from '../global/exceptions/index.js';
-import { computed, signal, } from '@preact/signals-core';
+import { computed, signal } from '@preact/signals-core';
 import { deleteView, duplicateView, moveViewTo, updateView, } from './utils/block-utils.js';
 import { databaseBlockViewConverts, databaseBlockViewMap, databaseBlockViews, } from './views/index.js';
 /**

package/dist/_pkgs/affine-block-database/properties/paste-url.d.ts

@@ -0,0 +1,24 @@
+import type { AffineInlineEditor } from '../../affine-shared/types/index.js';
+import type { InlineRange } from '../../std/inline/index.js';
+type UrlPasteInlineEditor = Pick<AffineInlineEditor, 'insertText' | 'setInlineRange'>;
+export type UrlTextSegment = {
+    text: string;
+    link?: string;
+};
+/**
+ * Split pasted plain text into mixed segments, where only the URL segments
+ * carry link metadata. Text like `see https://example.com, then stop` keeps its
+ * prose as prose and linkifies only the address, punctuation excluded.
+ */
+export declare function splitTextByUrl(text: string, baseUrl?: string): UrlTextSegment[];
+/**
+ * Describe a paste for the database cells: the segments to insert, plus the
+ * single URL the whole paste amounts to (if any), which is the only case where
+ * a doc link may be resolved instead.
+ */
+export declare function analyzeTextForUrlPaste(text: string): {
+    segments: UrlTextSegment[];
+    singleUrl: string | undefined;
+};
+export declare function insertUrlTextSegments(inlineEditor: UrlPasteInlineEditor, inlineRange: InlineRange, segments: UrlTextSegment[]): void;
+export {};