@formicoidea/labre-core 0.30.1 → 0.32.0

package/dist/_pkgs/affine-block-callout/emoji-margin.d.ts

@@ -0,0 +1,9 @@
+import { type CalloutBlockModel } from '../affine-model/index.js';
+/**
+ * The emoji's `margin-top` for a callout, read from its FIRST child — the only
+ * line the emoji is ever level with.
+ *
+ * Reading `type$` rather than `type` keeps the caller reactive: turning the
+ * first line into a heading re-renders the callout and moves the emoji with it.
+ */
+export declare function getCalloutEmojiMarginTop(model: CalloutBlockModel): string;

package/dist/_pkgs/affine-block-callout/emoji-margin.js

@@ -0,0 +1,36 @@
+import { ParagraphBlockModel, } from '../affine-model/index.js';
+import { matchModels } from '../affine-shared/utils/index.js';
+/**
+ * How far the emoji has to drop to sit on the first line's baseline.
+ *
+ * The emoji is a fixed 24px box next to a column whose first line can be
+ * anything from an H1 to an ordinary paragraph. A single margin therefore
+ * cannot be right twice: level with a paragraph it floats above an H1, level
+ * with an H1 it sinks below a paragraph. These are the drops measured per
+ * heading level.
+ */
+const EMOJI_MARGIN_TOP_BY_TYPE = {
+    h1: '23px',
+    h2: '20px',
+    h3: '16px',
+    h4: '15px',
+    h5: '14px',
+    h6: '13px',
+};
+/** What a paragraph, a list, or an empty callout gets. */
+const DEFAULT_EMOJI_MARGIN_TOP = '10px';
+/**
+ * The emoji's `margin-top` for a callout, read from its FIRST child — the only
+ * line the emoji is ever level with.
+ *
+ * Reading `type$` rather than `type` keeps the caller reactive: turning the
+ * first line into a heading re-renders the callout and moves the emoji with it.
+ */
+export function getCalloutEmojiMarginTop(model) {
+    const first = model.children[0];
+    if (!first || !matchModels(first, [ParagraphBlockModel])) {
+        return DEFAULT_EMOJI_MARGIN_TOP;
+    }
+    return (EMOJI_MARGIN_TOP_BY_TYPE[first.props.type$.value] ??
+        DEFAULT_EMOJI_MARGIN_TOP);
+}

package/dist/_pkgs/affine-block-callout/emoji-menu.d.ts

@@ -1,8 +1,12 @@
 import { LitElement, type PropertyValues } from 'lit';
+/** The part of emoji-mart's selection payload a callout reads. */
+export type EmojiSelection = {
+    native: string;
+};
 declare const EmojiMenu_base: typeof LitElement & import("../global/utils/types.js").Constructor<import("../global/lit/with-disposable.js").DisposableClass>;
 export declare class EmojiMenu extends EmojiMenu_base {
     firstUpdated(props: PropertyValues): void;
-    accessor onEmojiSelect: (data: any) => void;
+    accessor onEmojiSelect: (emoji: EmojiSelection) => void;
     accessor theme: 'light' | 'dark';
     accessor emojiMenu: HTMLElement;
     render(): import("lit-html").TemplateResult<1>;

package/dist/_pkgs/affine-block-callout/emoji-menu.js

@@ -68,6 +68,11 @@ let EmojiMenu = (() => {
                 theme: this.theme,
             });
             this.emojiMenu.append(picker);
+            // The picker is built imperatively, outside Lit's template, so nothing in
+            // this component takes it down when the menu goes away. It holds a
+            // document click listener and a `prefers-color-scheme` listener until it
+            // is unmounted, so unmount it with the menu.
+            this.disposables.add(() => picker.remove());
             return result;
         }
         #onEmojiSelect_accessor_storage = __runInitializers(this, _onEmojiSelect_initializers, () => { });

package/dist/_pkgs/affine-block-callout/store.js

@@ -1,6 +1,6 @@
 import { StoreExtensionProvider, } from '../affine-ext-loader/index.js';
 import { CalloutBlockSchemaExtension } from '../affine-model/index.js';
-import { CalloutBlockMarkdownAdapterExtension } from './adapters/markdown';
+import { CalloutBlockMarkdownAdapterExtension } from './adapters/markdown.js';
 export class CalloutStoreExtension extends StoreExtensionProvider {
     constructor() {
         super(...arguments);

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

@@ -2,9 +2,9 @@ import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
 import { SlashMenuConfigExtension } from '../affine-widget-slash-menu/index.js';
 import { BlockViewExtension, FlavourExtension } from '../std/index.js';
 import { literal } from 'lit/static-html.js';
-import { CalloutKeymapExtension } from './callout-keymap';
-import { calloutSlashMenuConfig } from './configs/slash-menu';
-import { effects } from './effects';
+import { CalloutKeymapExtension } from './callout-keymap.js';
+import { calloutSlashMenuConfig } from './configs/slash-menu.js';
+import { effects } from './effects.js';
 export class CalloutViewExtension extends ViewExtensionProvider {
     constructor() {
         super(...arguments);

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

@@ -10,6 +10,7 @@ export declare class CodeBlockComponent extends CaptionedBlockComponent<CodeBloc
     private _inlineRangeProvider;
     private readonly _localPreview$;
     preview$: Signal<boolean>;
+    collapsed$: Signal<boolean>;
     highlightTokens$: Signal<ThemedToken[][]>;
     languageName$: Signal<string>;
     get inlineEditor(): import("../std/inline/inline-editor.js").InlineEditor<{
@@ -25,14 +26,27 @@ export declare class CodeBlockComponent extends CaptionedBlockComponent<CodeBloc
     get readonly(): boolean;
     get langs(): import("shiki").BundledLanguageInfo[];
     get highlighter(): CodeBlockHighlighter;
+    /**
+     * Whether line numbers are currently shown for this block, accounting for the
+     * global setting and feature flags.
+     */
+    get showLineNumbers(): boolean;
     get topContenteditableElement(): BlockComponent<import("../store/index.js").BlockModel<object>, import("../std/index.js").BlockService, string> | null;
     private _updateHighlightTokens;
+    /**
+     * Stable signal: true when the global editor setting enables line numbers.
+     * Defaults to true. Updated reactively by an effect in connectedCallback.
+     * Using a writable signal (not reassigned to computed) keeps the reference
+     * stable so any downstream computed/effect that captures it stays correct.
+     */
+    private readonly _showLineNumbersGlobal$;
     connectedCallback(): void;
     copyCode(): void;
     get isCommentHighlighted(): boolean;
     getUpdateComplete(): Promise<boolean>;
     renderBlock(): TemplateResult<1>;
     setWrap(wrap: boolean): void;
+    setCollapsed(collapsed: boolean): void;
     private accessor _richTextElement;
     accessor blockContainerStyles: {
         margin: string;

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

@@ -35,7 +35,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { CaptionedBlockComponent } from '../affine-components/caption/index.js';
 import { focusTextModel } from '../affine-rich-text/index.js';
 import { BRACKET_PAIRS, EDGELESS_TOP_CONTENTEDITABLE_SELECTOR, } from '../affine-shared/consts/index.js';
-import { BlockCommentManager, DocModeProvider, NotificationProvider, } from '../affine-shared/services/index.js';
+import { BlockCommentManager, DocModeProvider, EditorSettingProvider, NotificationProvider, } from '../affine-shared/services/index.js';
 import { getViewportElement } from '../affine-shared/utils/index.js';
 import { IS_MAC, IS_MOBILE } from '../global/env/index.js';
 import { noop } from '../global/utils/index.js';
@@ -52,6 +52,7 @@ import { CodeBlockConfigExtension } from './code-block-config.js';
 import { CodeBlockInlineManagerExtension } from './code-block-inline.js';
 import { CodeBlockHighlighter } from './code-block-service.js';
 import { CodeBlockPreviewIdentifier } from './code-preview-extension.js';
+import { readGlobalLineNumbers, resolveShowLineNumbers, } from './line-numbers.js';
 import { codeBlockStyles } from './styles.js';
 let CodeBlockComponent = (() => {
     let _classSuper = CaptionedBlockComponent;
@@ -70,6 +71,7 @@ let CodeBlockComponent = (() => {
                 }
                 return modelPreview;
             });
+            this.collapsed$ = computed(() => !!this.model.props.collapsed$.value);
             this.highlightTokens$ = signal([]);
             this.languageName$ = computed(() => {
                 const lang = this.model.props.language$.value;
@@ -79,6 +81,13 @@ let CodeBlockComponent = (() => {
                 const matchedInfo = this.langs.find(info => info.id === lang);
                 return matchedInfo ? matchedInfo.name : 'Plain Text';
             });
+            /**
+             * Stable signal: true when the global editor setting enables line numbers.
+             * Defaults to true. Updated reactively by an effect in connectedCallback.
+             * Using a writable signal (not reassigned to computed) keeps the reference
+             * stable so any downstream computed/effect that captures it stays correct.
+             */
+            this._showLineNumbersGlobal$ = signal(true);
             this.#_richTextElement_accessor_storage = __runInitializers(this, __richTextElement_initializers, null);
             this.#blockContainerStyles_accessor_storage = (__runInitializers(this, __richTextElement_extraInitializers), {
                 margin: '18px 0',
@@ -113,6 +122,20 @@ let CodeBlockComponent = (() => {
         get highlighter() {
             return this.std.get(CodeBlockHighlighter);
         }
+        /**
+         * Whether line numbers are currently shown for this block, accounting for the
+         * global setting and feature flags.
+         */
+        get showLineNumbers() {
+            return resolveShowLineNumbers({
+                // Feature flag: mobile (or any other consumer) can hard-disable via
+                // CodeBlockConfigExtension.
+                featureEnabled: this.std.getOptional(CodeBlockConfigExtension.identifier)
+                    ?.showLineNumbers ?? true,
+                blockOverride: this.model.props.lineNumber,
+                globalDefault: this._showLineNumbersGlobal$.value,
+            });
+        }
         get topContenteditableElement() {
             if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
                 return this.closest(EDGELESS_TOP_CONTENTEDITABLE_SELECTOR);
@@ -167,6 +190,16 @@ let CodeBlockComponent = (() => {
         }
         connectedCallback() {
             super.connectedCallback();
+            // Reactively sync the global line-number preference from EditorSettingProvider
+            // into the stable _showLineNumbersGlobal$ signal. The host owns the storage:
+            // the library only reads whatever the injected setting service exposes, the
+            // same seam as the telemetry adapter.
+            const editorSetting = this.std.getOptional(EditorSettingProvider);
+            if (editorSetting) {
+                this.disposables.add(effect(() => {
+                    this._showLineNumbersGlobal$.value = readGlobalLineNumbers(editorSetting.setting$.value);
+                }));
+            }
             // set highlight options getter used by "exportToHtml"
             this.disposables.add(effect(() => {
                 this._updateHighlightTokens();
@@ -371,13 +404,11 @@ let CodeBlockComponent = (() => {
             return result;
         }
         renderBlock() {
-            const showLineNumbers = (this.std.getOptional(CodeBlockConfigExtension.identifier)
-                ?.showLineNumbers ??
-                true) &&
-                (this.model.props.lineNumber ?? true);
+            const showLineNumbers = this.showLineNumbers;
             const preview = this.preview$.value;
             const previewContext = this.std.getOptional(CodeBlockPreviewIdentifier(this.model.props.language ?? ''));
             const shouldRenderPreview = preview && previewContext;
+            const collapsed = this.collapsed$.value;
             return html `
       <div
         class=${classMap({
@@ -386,6 +417,7 @@ let CodeBlockComponent = (() => {
                 mobile: IS_MOBILE,
                 wrap: this.model.props.wrap,
                 'disable-line-numbers': !showLineNumbers,
+                collapsed,
             })}
       >
         <rich-text
@@ -413,9 +445,12 @@ let CodeBlockComponent = (() => {
             }}
         >
         </rich-text>
+        ${collapsed
+                ? html `<div class="code-collapsed-fade" aria-hidden="true"></div>`
+                : nothing}
         <div
           style=${styleMap({
-                display: shouldRenderPreview ? undefined : 'none',
+                display: shouldRenderPreview && !collapsed ? undefined : 'none',
             })}
           contenteditable="false"
           class="affine-code-block-preview"
@@ -429,6 +464,9 @@ let CodeBlockComponent = (() => {
         setWrap(wrap) {
             this.store.updateBlock(this.model, { wrap });
         }
+        setCollapsed(collapsed) {
+            this.store.updateBlock(this.model, { collapsed });
+        }
         #_richTextElement_accessor_storage;
         get _richTextElement() { return this.#_richTextElement_accessor_storage; }
         set _richTextElement(value) { this.#_richTextElement_accessor_storage = value; }

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

@@ -9,9 +9,11 @@ export declare class AffineCodeToolbar extends AffineCodeToolbar_base {
     closeCurrentMenu: () => void;
     private _toggleMoreMenu;
     disconnectedCallback(): void;
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     private accessor _moreButton;
     private accessor _moreMenuOpen;
+    private accessor _collapsed;
     accessor context: CodeBlockToolbarContext;
     accessor moreGroups: MenuItemGroup<CodeBlockToolbarContext>[];
     accessor onActiveStatusChange: (active: boolean) => void;

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/lang-button.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import type { CodeBlockComponent } from '../..';
+import type { CodeBlockComponent } from '../../index.js';
 declare const LanguageListButton_base: typeof LitElement & import("../../../global/utils/types.js").Constructor<import("../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class LanguageListButton extends LanguageListButton_base {
     static styles: import("lit").CSSResult;

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/components/preview-button.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, nothing } from 'lit';
-import type { CodeBlockComponent } from '../../code-block';
+import type { CodeBlockComponent } from '../../code-block.js';
 declare const PreviewButton_base: typeof LitElement & import("../../../global/utils/types.js").Constructor<import("../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class PreviewButton extends PreviewButton_base {
     static styles: import("lit").CSSResult;

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

@@ -38,7 +38,7 @@ import { SignalWatcher, WithDisposable } from '../../../global/lit/index.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { CodeBlockPreviewIdentifier } from '../../code-preview-extension';
+import { CodeBlockPreviewIdentifier } from '../../code-preview-extension.js';
 let PreviewButton = (() => {
     let _classSuper = WithDisposable(SignalWatcher(LitElement));
     let _blockComponent_decorators;

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,48 @@ 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 +205,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 +230,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/context.d.ts

@@ -1,5 +1,5 @@
 import { MenuContext } from '../../affine-components/toolbar/index.js';
-import type { CodeBlockComponent } from '../code-block';
+import type { CodeBlockComponent } from '../code-block.js';
 export declare class CodeBlockToolbarContext extends MenuContext {
     blockComponent: CodeBlockComponent;
     abortController: AbortController;

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

@@ -1,12 +1,14 @@
-import { AFFINE_CODE_TOOLBAR_WIDGET, AffineCodeToolbarWidget } from './code-toolbar';
-import { AffineCodeToolbar } from './code-toolbar/components/code-toolbar';
-import { LanguageListButton } from './code-toolbar/components/lang-button';
-import { PreviewButton } from './code-toolbar/components/preview-button';
+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;
     }