@formicoidea/labre-core 0.56.0 → 0.58.0

package/dist/_pkgs/affine-fragment-frame-panel/card/frame-preview.js

@@ -45,9 +45,15 @@ import { property, query, state } from 'lit/decorators.js';
 import { guard } from 'lit/directives/guard.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import debounce from 'lodash-es/debounce.js';
+import { fluidPreviewSize } from './preview-size.js';
 const DEFAULT_PREVIEW_CONTAINER_WIDTH = 280;
 const DEFAULT_PREVIEW_CONTAINER_HEIGHT = 166;
 const styles = css `
+  frame-preview[data-fluid] {
+    display: block;
+    width: 100%;
+  }
+
   .frame-preview-container {
     display: block;
     width: 100%;
@@ -89,9 +95,15 @@ let FramePreview = (() => {
     let _std_decorators;
     let _std_initializers = [];
     let _std_extraInitializers = [];
+    let __containerWidth_decorators;
+    let __containerWidth_initializers = [];
+    let __containerWidth_extraInitializers = [];
     let _fillScreen_decorators;
     let _fillScreen_initializers = [];
     let _fillScreen_extraInitializers = [];
+    let _fluid_decorators;
+    let _fluid_initializers = [];
+    let _fluid_extraInitializers = [];
     let _frame_decorators;
     let _frame_initializers = [];
     let _frame_extraInitializers = [];
@@ -111,14 +123,18 @@ let FramePreview = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _std_decorators = [property({ attribute: false })];
+            __containerWidth_decorators = [state()];
             _fillScreen_decorators = [state()];
+            _fluid_decorators = [property({ attribute: false })];
             _frame_decorators = [property({ attribute: false })];
             _frameViewportWH_decorators = [state()];
             _previewEditor_decorators = [query('editor-host')];
             _surfaceHeight_decorators = [property({ attribute: false })];
             _surfaceWidth_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, __containerWidth_decorators, { kind: "accessor", name: "_containerWidth", static: false, private: false, access: { has: obj => "_containerWidth" in obj, get: obj => obj._containerWidth, set: (obj, value) => { obj._containerWidth = value; } }, metadata: _metadata }, __containerWidth_initializers, __containerWidth_extraInitializers);
             __esDecorate(this, null, _fillScreen_decorators, { kind: "accessor", name: "fillScreen", static: false, private: false, access: { has: obj => "fillScreen" in obj, get: obj => obj.fillScreen, set: (obj, value) => { obj.fillScreen = value; } }, metadata: _metadata }, _fillScreen_initializers, _fillScreen_extraInitializers);
+            __esDecorate(this, null, _fluid_decorators, { kind: "accessor", name: "fluid", static: false, private: false, access: { has: obj => "fluid" in obj, get: obj => obj.fluid, set: (obj, value) => { obj.fluid = value; } }, metadata: _metadata }, _fluid_initializers, _fluid_extraInitializers);
             __esDecorate(this, null, _frame_decorators, { kind: "accessor", name: "frame", static: false, private: false, access: { has: obj => "frame" in obj, get: obj => obj.frame, set: (obj, value) => { obj.frame = value; } }, metadata: _metadata }, _frame_initializers, _frame_extraInitializers);
             __esDecorate(this, null, _frameViewportWH_decorators, { kind: "accessor", name: "frameViewportWH", static: false, private: false, access: { has: obj => "frameViewportWH" in obj, get: obj => obj.frameViewportWH, set: (obj, value) => { obj.frameViewportWH = value; } }, metadata: _metadata }, _frameViewportWH_initializers, _frameViewportWH_extraInitializers);
             __esDecorate(this, null, _previewEditor_decorators, { kind: "accessor", name: "previewEditor", static: false, private: false, access: { has: obj => "previewEditor" in obj, get: obj => obj.previewEditor, set: (obj, value) => { obj.previewEditor = value; } }, metadata: _metadata }, _previewEditor_initializers, _previewEditor_extraInitializers);
@@ -157,9 +173,13 @@ let FramePreview = (() => {
                             payload.view.model.flavour !== 'affine:page') {
                             return;
                         }
+                        // Every size, not only the first: a fluid preview follows its
+                        // panel's width, and the mini editor's viewport settles on the new
+                        // size (debounced) after the box has changed — fitting then is what
+                        // keeps the frame filling it. The subject completes with the
+                        // viewport, which ends the subscription.
                         const viewport = std.get(GfxControllerIdentifier).viewport;
-                        const subscription = viewport.sizeUpdated.subscribe(() => {
-                            subscription.unsubscribe();
+                        viewport.sizeUpdated.subscribe(() => {
                             refreshViewport();
                         });
                     });
@@ -219,14 +239,50 @@ let FramePreview = (() => {
             this._initPreviewDoc();
             this._updateFrameViewportWH();
             this._setFrameDisposables(this.frame);
+            this._observeWidth();
         }
         disconnectedCallback() {
             super.disconnectedCallback();
             this._clearFrameDisposables();
+            this._resizeObserver?.disconnect();
+            this._resizeObserver = null;
+        }
+        /** A fluid preview follows its own width: the panel's, as it is resized. */
+        _observeWidth() {
+            this._resizeObserver?.disconnect();
+            this._resizeObserver = null;
+            if (!this.fluid || typeof ResizeObserver === 'undefined')
+                return;
+            this._resizeObserver = new ResizeObserver(([entry]) => {
+                if (!entry)
+                    return;
+                const width = Math.floor(entry.contentRect.width);
+                if (width !== this._containerWidth)
+                    this._containerWidth = width;
+            });
+            this._resizeObserver.observe(this);
+        }
+        willUpdate(changed) {
+            if (changed.has('fluid')) {
+                this.toggleAttribute('data-fluid', this.fluid);
+                if (this.isConnected)
+                    this._observeWidth();
+            }
+            // The box was only read at connect and on a frame's own update, so a host
+            // that resized it after mounting kept the old scale.
+            if (changed.has('fluid') ||
+                changed.has('_containerWidth') ||
+                changed.has('surfaceWidth') ||
+                changed.has('surfaceHeight') ||
+                changed.has('fillScreen')) {
+                this._updateFrameViewportWH();
+            }
         }
         render() {
             const { frame } = this;
-            const noContent = !frame || !frame.xywh;
+            // A fluid preview builds its mini editor once it knows its width, never
+            // at the default box first.
+            const noContent = !frame || !frame.xywh || (this.fluid && this._containerWidth === 0);
             return html `<div class="frame-preview-container">
       ${noContent ? nothing : this._renderSurfaceContent()}
     </div>`;
@@ -242,9 +298,21 @@ let FramePreview = (() => {
         #std_accessor_storage;
         get std() { return this.#std_accessor_storage; }
         set std(value) { this.#std_accessor_storage = value; }
+        #_containerWidth_accessor_storage;
+        /** The width a fluid preview measured on itself; `0` until laid out. */
+        get _containerWidth() { return this.#_containerWidth_accessor_storage; }
+        set _containerWidth(value) { this.#_containerWidth_accessor_storage = value; }
         #fillScreen_accessor_storage;
         get fillScreen() { return this.#fillScreen_accessor_storage; }
         set fillScreen(value) { this.#fillScreen_accessor_storage = value; }
+        #fluid_accessor_storage;
+        /**
+         * Take the container's width and the frame's proportions (recette 1,
+         * P0-1.2): the box grows and shrinks with the panel, never taller than
+         * wide, and `surfaceWidth` / `surfaceHeight` are computed, not read.
+         */
+        get fluid() { return this.#fluid_accessor_storage; }
+        set fluid(value) { this.#fluid_accessor_storage = value; }
         #frame_accessor_storage;
         get frame() { return this.#frame_accessor_storage; }
         set frame(value) { this.#frame_accessor_storage = value; }
@@ -278,8 +346,14 @@ let FramePreview = (() => {
             this._frameDisposables = null;
             this._previewDoc = null;
             this._runtimePreviewExt = [];
+            this._resizeObserver = null;
             this._updateFrameViewportWH = () => {
                 const [, , w, h] = deserializeXYWH(this.frame.xywh);
+                if (this.fluid) {
+                    const box = fluidPreviewSize(this._containerWidth, w, h);
+                    this.surfaceWidth = box.width;
+                    this.surfaceHeight = box.height;
+                }
                 let scale = 1;
                 if (this.fillScreen) {
                     scale = Math.max(this.surfaceWidth / w, this.surfaceHeight / h);
@@ -293,8 +367,10 @@ let FramePreview = (() => {
                 };
             };
             this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
-            this.#fillScreen_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _fillScreen_initializers, false));
-            this.#frame_accessor_storage = (__runInitializers(this, _fillScreen_extraInitializers), __runInitializers(this, _frame_initializers, void 0));
+            this.#_containerWidth_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, __containerWidth_initializers, 0));
+            this.#fillScreen_accessor_storage = (__runInitializers(this, __containerWidth_extraInitializers), __runInitializers(this, _fillScreen_initializers, false));
+            this.#fluid_accessor_storage = (__runInitializers(this, _fillScreen_extraInitializers), __runInitializers(this, _fluid_initializers, false));
+            this.#frame_accessor_storage = (__runInitializers(this, _fluid_extraInitializers), __runInitializers(this, _frame_initializers, void 0));
             this.#frameViewportWH_accessor_storage = (__runInitializers(this, _frame_extraInitializers), __runInitializers(this, _frameViewportWH_initializers, {
                 width: 0,
                 height: 0,

package/dist/_pkgs/affine-fragment-frame-panel/card/preview-size.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The box of a fluid frame preview (recette 1, P0-1.2): the container's width,
+ * the frame's proportions, never taller than it is wide. A frame without an
+ * area gets a square box; a container not laid out yet gets no box at all.
+ */
+export declare function fluidPreviewSize(containerWidth: number, frameWidth: number, frameHeight: number): {
+    width: number;
+    height: number;
+};

package/dist/_pkgs/affine-fragment-frame-panel/card/preview-size.js

@@ -0,0 +1,20 @@
+/**
+ * A portrait frame previewed at the panel's full width would be taller than
+ * the sidebar is wide many times over and push every other card off screen:
+ * past a square, the box stops growing and the frame is contained in it.
+ */
+const MAX_HEIGHT_PER_WIDTH = 1;
+/**
+ * The box of a fluid frame preview (recette 1, P0-1.2): the container's width,
+ * the frame's proportions, never taller than it is wide. A frame without an
+ * area gets a square box; a container not laid out yet gets no box at all.
+ */
+export function fluidPreviewSize(containerWidth, frameWidth, frameHeight) {
+    const width = Math.max(0, Math.floor(containerWidth));
+    if (width === 0)
+        return { width: 0, height: 0 };
+    const ratio = frameWidth > 0 && frameHeight > 0
+        ? Math.min(frameHeight / frameWidth, MAX_HEIGHT_PER_WIDTH)
+        : MAX_HEIGHT_PER_WIDTH;
+    return { width, height: Math.round(width * ratio) };
+}

package/dist/_pkgs/affine-fragment-frame-panel/effects.js

@@ -1,14 +1,12 @@
 import { AFFINE_FRAME_PANEL_BODY, FramePanelBody, } from './body/frame-panel-body.js';
 import { AFFINE_FRAME_CARD, FrameCard } from './card/frame-card.js';
 import { AFFINE_FRAME_CARD_TITLE, FrameCardTitle, } from './card/frame-card-title.js';
-import { AFFINE_FRAME_TITLE_EDITOR, FrameCardTitleEditor, } from './card/frame-card-title-editor.js';
 import { AFFINE_FRAME_PREVIEW, FramePreview } from './card/frame-preview.js';
 import { AFFINE_FRAME_PANEL, FramePanel } from './frame-panel.js';
 import { AFFINE_FRAME_PANEL_HEADER, FramePanelHeader, } from './header/frame-panel-header.js';
 import { AFFINE_FRAMES_SETTING_MENU, FramesSettingMenu, } from './header/frames-setting-menu.js';
 export function effects() {
     customElements.define(AFFINE_FRAME_PANEL, FramePanel);
-    customElements.define(AFFINE_FRAME_TITLE_EDITOR, FrameCardTitleEditor);
     customElements.define(AFFINE_FRAME_CARD, FrameCard);
     customElements.define(AFFINE_FRAME_CARD_TITLE, FrameCardTitle);
     customElements.define(AFFINE_FRAME_PANEL_BODY, FramePanelBody);

package/dist/_pkgs/affine-fragment-frame-panel/frame-panel.js

@@ -68,6 +68,8 @@ const styles = css `
 
     overflow: auto;
     overflow-x: hidden;
+    /* A scrollbar appearing must not narrow the fluid cards it scrolls. */
+    scrollbar-gutter: stable;
     scrollbar-width: thin; /* For Firefox */
     scrollbar-color: transparent transparent; /* For Firefox */
   }

package/dist/_pkgs/affine-widget-edgeless-zoom-toolbar/index.js

@@ -52,29 +52,29 @@ let AffineEdgelessZoomToolbarWidget = (() => {
             __esDecorate(this, null, __hide_decorators, { kind: "accessor", name: "_hide", static: false, private: false, access: { has: obj => "_hide" in obj, get: obj => obj._hide, set: (obj, value) => { obj._hide = value; } }, metadata: _metadata }, __hide_initializers, __hide_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static { this.styles = css `
-    :host {
-      position: absolute;
-      bottom: 20px;
-      left: 12px;
-      z-index: var(--affine-z-index-popover);
-      display: flex;
-      justify-content: center;
-      -webkit-user-select: none;
-      user-select: none;
-    }
-
-    @container viewport (width <= 1200px) {
-      edgeless-zoom-toolbar {
-        display: none;
-      }
-    }
-
-    @container viewport (width > 1200px) {
-      zoom-bar-toggle-button {
-        display: none;
-      }
-    }
+        static { this.styles = css `
+    :host {
+      position: absolute;
+      bottom: 20px;
+      left: 12px;
+      z-index: var(--affine-z-index-popover);
+      display: flex;
+      justify-content: center;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    @container viewport (width <= 1200px) {
+      edgeless-zoom-toolbar {
+        display: none;
+      }
+    }
+
+    @container viewport (width > 1200px) {
+      zoom-bar-toggle-button {
+        display: none;
+      }
+    }
   `; }
         get edgeless() {
             return this.block;
@@ -105,9 +105,9 @@ let AffineEdgelessZoomToolbarWidget = (() => {
             if (this._hide || !this.edgeless) {
                 return nothing;
             }
-            return html `
-      <edgeless-zoom-toolbar .std=${this.std}></edgeless-zoom-toolbar>
-      <zoom-bar-toggle-button .std=${this.std}></zoom-bar-toggle-button>
+            return html `
+      <edgeless-zoom-toolbar .std=${this.std}></edgeless-zoom-toolbar>
+      <zoom-bar-toggle-button .std=${this.std}></zoom-bar-toggle-button>
     `;
         }
         #_hide_accessor_storage = __runInitializers(this, __hide_initializers, false);

package/dist/_pkgs/affine-widget-keyboard-toolbar/icons.js

@@ -19,105 +19,105 @@ export function HeadingIcon(i) {
             return Heading1Icon();
     }
 }
-export const HighLightDuotoneIcon = (color) => html `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-  >
-    <path
-      d="M5.8291 16.441L7.91757 18.5295L6.57811 19.8689C6.53119 19.9158 6.46406 19.9364 6.3989 19.9239L3.37036 19.3412C3.21285 19.3109 3.15331 19.1168 3.26673 19.0034L5.8291 16.441Z"
-      fill="${color}"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M19.0095 3.63759C17.9526 2.58067 16.26 2.516 15.1255 3.48919L7.32135 10.1837C6.35438 11.0132 6.05275 12.3823 6.58163 13.5414L6.73501 13.8775L5.67697 14.9356C5.30169 15.3108 5.30169 15.9193 5.67697 16.2946L8.06379 18.6814C8.43907 19.0567 9.04752 19.0567 9.4228 18.6814L10.4808 17.6234L10.8171 17.7768C11.9761 18.3057 13.3452 18.0041 14.1747 17.0371L20.8692 9.23294C21.8424 8.09846 21.7778 6.40588 20.7208 5.34896L19.0095 3.63759ZM16.1021 4.62769C16.6415 4.16498 17.4463 4.19572 17.9488 4.69825L19.6602 6.40962C20.1627 6.91215 20.1935 7.7169 19.7307 8.25631L14.6424 14.188L10.1704 9.71604L16.1021 4.62769ZM9.02857 10.6955L8.29798 11.3222C7.83822 11.7166 7.6948 12.3676 7.94627 12.9187L8.29785 13.6892C8.4348 13.9893 8.37947 14.3544 8.13372 14.6001L7.11878 15.6151L8.74329 17.2396L9.75812 16.2247C10.004 15.9789 10.3691 15.9236 10.6693 16.0606L11.4398 16.4122C11.9908 16.6636 12.6418 16.5202 13.0362 16.0605L13.6629 15.3299L9.02857 10.6955Z"
-      fill="${cssVarV2('icon/primary')}"
-    />
+export const HighLightDuotoneIcon = (color) => html `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path
+      d="M5.8291 16.441L7.91757 18.5295L6.57811 19.8689C6.53119 19.9158 6.46406 19.9364 6.3989 19.9239L3.37036 19.3412C3.21285 19.3109 3.15331 19.1168 3.26673 19.0034L5.8291 16.441Z"
+      fill="${color}"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M19.0095 3.63759C17.9526 2.58067 16.26 2.516 15.1255 3.48919L7.32135 10.1837C6.35438 11.0132 6.05275 12.3823 6.58163 13.5414L6.73501 13.8775L5.67697 14.9356C5.30169 15.3108 5.30169 15.9193 5.67697 16.2946L8.06379 18.6814C8.43907 19.0567 9.04752 19.0567 9.4228 18.6814L10.4808 17.6234L10.8171 17.7768C11.9761 18.3057 13.3452 18.0041 14.1747 17.0371L20.8692 9.23294C21.8424 8.09846 21.7778 6.40588 20.7208 5.34896L19.0095 3.63759ZM16.1021 4.62769C16.6415 4.16498 17.4463 4.19572 17.9488 4.69825L19.6602 6.40962C20.1627 6.91215 20.1935 7.7169 19.7307 8.25631L14.6424 14.188L10.1704 9.71604L16.1021 4.62769ZM9.02857 10.6955L8.29798 11.3222C7.83822 11.7166 7.6948 12.3676 7.94627 12.9187L8.29785 13.6892C8.4348 13.9893 8.37947 14.3544 8.13372 14.6001L7.11878 15.6151L8.74329 17.2396L9.75812 16.2247C10.004 15.9789 10.3691 15.9236 10.6693 16.0606L11.4398 16.4122C11.9908 16.6636 12.6418 16.5202 13.0362 16.0605L13.6629 15.3299L9.02857 10.6955Z"
+      fill="${cssVarV2('icon/primary')}"
+    />
   </svg>`;
-export const TextColorIcon = (color) => html `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.0627 6.16255C14.385 5.30291 15.2068 4.7334 16.1249 4.7334C17.043 4.7334 17.8648 5.30291 18.1872 6.16255L23.7279 20.9378C23.9219 21.455 23.6599 22.0314 23.1427 22.2253C22.6256 22.4192 22.0492 22.1572 21.8553 21.6401L20.2289 17.3031H12.021L10.3946 21.6401C10.2007 22.1572 9.62428 22.4192 9.10716 22.2253C8.59004 22.0314 8.32803 21.455 8.52195 20.9378L14.0627 6.16255ZM12.771 15.3031H19.4789L16.3146 6.8648C16.2849 6.78576 16.2094 6.7334 16.1249 6.7334C16.0405 6.7334 15.965 6.78576 15.9353 6.8648L12.771 15.3031Z"
-      fill="${cssVarV2('icon/primary')}"
-    />
-    <rect
-      x="5.45837"
-      y="24"
-      width="21.3333"
-      height="3.33333"
-      rx="1"
-      fill=${color}
-    />
+export const TextColorIcon = (color) => html `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.0627 6.16255C14.385 5.30291 15.2068 4.7334 16.1249 4.7334C17.043 4.7334 17.8648 5.30291 18.1872 6.16255L23.7279 20.9378C23.9219 21.455 23.6599 22.0314 23.1427 22.2253C22.6256 22.4192 22.0492 22.1572 21.8553 21.6401L20.2289 17.3031H12.021L10.3946 21.6401C10.2007 22.1572 9.62428 22.4192 9.10716 22.2253C8.59004 22.0314 8.32803 21.455 8.52195 20.9378L14.0627 6.16255ZM12.771 15.3031H19.4789L16.3146 6.8648C16.2849 6.78576 16.2094 6.7334 16.1249 6.7334C16.0405 6.7334 15.965 6.78576 15.9353 6.8648L12.771 15.3031Z"
+      fill="${cssVarV2('icon/primary')}"
+    />
+    <rect
+      x="5.45837"
+      y="24"
+      width="21.3333"
+      height="3.33333"
+      rx="1"
+      fill=${color}
+    />
   </svg>`;
-export const TextBackgroundDuotoneIcon = (color) => html `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M4.57507 7.33336C4.57507 5.60287 5.97791 4.20003 7.70841 4.20003H25.0417C26.7722 4.20003 28.1751 5.60287 28.1751 7.33336V24.6667C28.1751 26.3972 26.7722 27.8 25.0417 27.8H7.70841C5.97791 27.8 4.57507 26.3972 4.57507 24.6667V7.33336Z"
-      fill="${color}"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M4.57495 7.33333C4.57495 5.60284 5.97779 4.2 7.70828 4.2H25.0416C26.7721 4.2 28.175 5.60284 28.175 7.33333V24.6667C28.175 26.3972 26.7721 27.8 25.0416 27.8H7.70828C5.97779 27.8 4.57495 26.3972 4.57495 24.6667V7.33333ZM7.70828 5.13333C6.49326 5.13333 5.50828 6.1183 5.50828 7.33333V24.6667C5.50828 25.8817 6.49326 26.8667 7.70828 26.8667H25.0416C26.2566 26.8667 27.2416 25.8817 27.2416 24.6667V7.33333C27.2416 6.1183 26.2566 5.13333 25.0416 5.13333H7.70828Z"
-      fill="black"
-      fill-opacity="0.22"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.5379 10.0064C14.8251 9.24064 15.5571 8.73332 16.375 8.73332C17.1928 8.73332 17.9249 9.24064 18.2121 10.0064L22.6446 21.8266C22.8386 22.3438 22.5766 22.9202 22.0594 23.1141C21.5423 23.308 20.9659 23.046 20.772 22.5289L19.5196 19.1891H13.2304L11.978 22.5289C11.7841 23.046 11.2076 23.308 10.6905 23.1141C10.1734 22.9202 9.9114 22.3438 10.1053 21.8266L14.5379 10.0064ZM13.9804 17.1891H18.7696L16.375 10.8035L13.9804 17.1891Z"
-      fill="${cssVarV2('text/primary')}"
-    />
+export const TextBackgroundDuotoneIcon = (color) => html `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.57507 7.33336C4.57507 5.60287 5.97791 4.20003 7.70841 4.20003H25.0417C26.7722 4.20003 28.1751 5.60287 28.1751 7.33336V24.6667C28.1751 26.3972 26.7722 27.8 25.0417 27.8H7.70841C5.97791 27.8 4.57507 26.3972 4.57507 24.6667V7.33336Z"
+      fill="${color}"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.57495 7.33333C4.57495 5.60284 5.97779 4.2 7.70828 4.2H25.0416C26.7721 4.2 28.175 5.60284 28.175 7.33333V24.6667C28.175 26.3972 26.7721 27.8 25.0416 27.8H7.70828C5.97779 27.8 4.57495 26.3972 4.57495 24.6667V7.33333ZM7.70828 5.13333C6.49326 5.13333 5.50828 6.1183 5.50828 7.33333V24.6667C5.50828 25.8817 6.49326 26.8667 7.70828 26.8667H25.0416C26.2566 26.8667 27.2416 25.8817 27.2416 24.6667V7.33333C27.2416 6.1183 26.2566 5.13333 25.0416 5.13333H7.70828Z"
+      fill="black"
+      fill-opacity="0.22"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.5379 10.0064C14.8251 9.24064 15.5571 8.73332 16.375 8.73332C17.1928 8.73332 17.9249 9.24064 18.2121 10.0064L22.6446 21.8266C22.8386 22.3438 22.5766 22.9202 22.0594 23.1141C21.5423 23.308 20.9659 23.046 20.772 22.5289L19.5196 19.1891H13.2304L11.978 22.5289C11.7841 23.046 11.2076 23.308 10.6905 23.1141C10.1734 22.9202 9.9114 22.3438 10.1053 21.8266L14.5379 10.0064ZM13.9804 17.1891H18.7696L16.375 10.8035L13.9804 17.1891Z"
+      fill="${cssVarV2('text/primary')}"
+    />
   </svg>`;
-export const FigmaDuotoneIcon = html `<svg
-  width="32"
-  height="32"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g id="Figma_Duotone">
-    <path
-      id="Vector"
-      d="M8.41842 22.5027C10.3047 22.5027 11.8356 20.9719 11.8356 19.0856V15.6685H8.41842C6.53216 15.6685 5.00128 17.1993 5.00128 19.0856C5.00128 20.9719 6.53216 22.5027 8.41842 22.5027Z"
-      fill="#0ACF83"
-    />
-    <path
-      id="Vector_2"
-      d="M5.00128 12.2514C5.00128 10.3651 6.53216 8.83423 8.41842 8.83423H11.8356V15.6685H8.41842C6.53216 15.6685 5.00128 14.1376 5.00128 12.2514Z"
-      fill="#A259FF"
-    />
-    <path
-      id="Vector_3"
-      d="M5.00146 5.41714C5.00146 3.53088 6.53234 2 8.4186 2H11.8357V8.83428H8.4186C6.53234 8.83428 5.00146 7.3034 5.00146 5.41714Z"
-      fill="#F24E1E"
-    />
-    <path
-      id="Vector_4"
-      d="M11.8356 2H15.2527C17.139 2 18.6699 3.53088 18.6699 5.41714C18.6699 7.3034 17.139 8.83428 15.2527 8.83428H11.8356V2Z"
-      fill="#FF7262"
-    />
-    <path
-      id="Vector_5"
-      d="M18.6699 12.2514C18.6699 14.1376 17.139 15.6685 15.2527 15.6685C13.3665 15.6685 11.8356 14.1376 11.8356 12.2514C11.8356 10.3651 13.3665 8.83423 15.2527 8.83423C17.139 8.83423 18.6699 10.3651 18.6699 12.2514Z"
-      fill="#1ABCFE"
-    />
-  </g>
+export const FigmaDuotoneIcon = html `<svg
+  width="32"
+  height="32"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g id="Figma_Duotone">
+    <path
+      id="Vector"
+      d="M8.41842 22.5027C10.3047 22.5027 11.8356 20.9719 11.8356 19.0856V15.6685H8.41842C6.53216 15.6685 5.00128 17.1993 5.00128 19.0856C5.00128 20.9719 6.53216 22.5027 8.41842 22.5027Z"
+      fill="#0ACF83"
+    />
+    <path
+      id="Vector_2"
+      d="M5.00128 12.2514C5.00128 10.3651 6.53216 8.83423 8.41842 8.83423H11.8356V15.6685H8.41842C6.53216 15.6685 5.00128 14.1376 5.00128 12.2514Z"
+      fill="#A259FF"
+    />
+    <path
+      id="Vector_3"
+      d="M5.00146 5.41714C5.00146 3.53088 6.53234 2 8.4186 2H11.8357V8.83428H8.4186C6.53234 8.83428 5.00146 7.3034 5.00146 5.41714Z"
+      fill="#F24E1E"
+    />
+    <path
+      id="Vector_4"
+      d="M11.8356 2H15.2527C17.139 2 18.6699 3.53088 18.6699 5.41714C18.6699 7.3034 17.139 8.83428 15.2527 8.83428H11.8356V2Z"
+      fill="#FF7262"
+    />
+    <path
+      id="Vector_5"
+      d="M18.6699 12.2514C18.6699 14.1376 17.139 15.6685 15.2527 15.6685C13.3665 15.6685 11.8356 14.1376 11.8356 12.2514C11.8356 10.3651 13.3665 8.83423 15.2527 8.83423C17.139 8.83423 18.6699 10.3651 18.6699 12.2514Z"
+      fill="#1ABCFE"
+    />
+  </g>
 </svg> `;

package/dist/_pkgs/affine-widget-page-dragging-area/index.js

@@ -199,16 +199,16 @@ let AffinePageDraggingAreaWidget = (() => {
                 width: rect.width + 'px',
                 height: rect.height + 'px',
             };
-            return html `
-      <style>
-        .affine-page-dragging-area {
-          position: absolute;
-          background: var(--affine-hover-color);
-          z-index: 1;
-          pointer-events: none;
-        }
-      </style>
-      <div class="affine-page-dragging-area" style=${styleMap(style)}></div>
+            return html `
+      <style>
+        .affine-page-dragging-area {
+          position: absolute;
+          background: var(--affine-hover-color);
+          z-index: 1;
+          pointer-events: none;
+        }
+      </style>
+      <div class="affine-page-dragging-area" style=${styleMap(style)}></div>
     `;
         }
         #rect_accessor_storage;

package/dist/_pkgs/affine-widget-viewport-overlay/index.js

@@ -51,19 +51,19 @@ let AffineViewportOverlayWidget = (() => {
             __esDecorate(this, null, __lockViewport_decorators, { kind: "accessor", name: "_lockViewport", static: false, private: false, access: { has: obj => "_lockViewport" in obj, get: obj => obj._lockViewport, set: (obj, value) => { obj._lockViewport = value; } }, metadata: _metadata }, __lockViewport_initializers, __lockViewport_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static { this.styles = css `
-    .affine-viewport-overlay-widget {
-      position: absolute;
-      top: 0;
-      left: 0;
-      background: transparent;
-      pointer-events: none;
-      z-index: calc(var(--affine-z-index-popover) - 1);
-    }
-
-    .affine-viewport-overlay-widget.lock {
-      pointer-events: auto;
-    }
+        static { this.styles = css `
+    .affine-viewport-overlay-widget {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: transparent;
+      pointer-events: none;
+      z-index: calc(var(--affine-z-index-popover) - 1);
+    }
+
+    .affine-viewport-overlay-widget.lock {
+      pointer-events: auto;
+    }
   `; }
         connectedCallback() {
             super.connectedCallback();

package/dist/_pkgs/data-view/core/utils/menu-title.js

@@ -1,22 +1,22 @@
 import { ArrowLeftBigIcon } from '@blocksuite/icons/lit';
 import { html } from 'lit';
 export const menuTitle = (name, onBack) => {
-    return html `
-    <div
-      style="display:flex;align-items:center;gap: 4px;padding: 3px 3px 3px 2px"
-    >
-      <div
-        @click=${onBack}
-        class="dv-icon-20 dv-hover dv-pd-2 dv-round-4"
-        style="display:flex;"
-      >
-        ${ArrowLeftBigIcon()}
-      </div>
-      <div
-        style="font-weight:500;font-size: 14px;line-height: 22px;color: var(--affine-text-primary-color)"
-      >
-        ${name}
-      </div>
-    </div>
+    return html `
+    <div
+      style="display:flex;align-items:center;gap: 4px;padding: 3px 3px 3px 2px"
+    >
+      <div
+        @click=${onBack}
+        class="dv-icon-20 dv-hover dv-pd-2 dv-round-4"
+        style="display:flex;"
+      >
+        ${ArrowLeftBigIcon()}
+      </div>
+      <div
+        style="font-weight:500;font-size: 14px;line-height: 22px;color: var(--affine-text-primary-color)"
+      >
+        ${name}
+      </div>
+    </div>
   `;
 };

package/dist/host-panels.d.ts

@@ -54,8 +54,9 @@ import { type BlockStdScope, type CommandFile } from './_pkgs/std/index.js';
  */
 export { type AnyCommandDescriptor, type CommandFile, type CommandInvocation, type CommandOwner, type CommandSurface, getCommandIcon, getCommandsForSurface, getRegisteredCommands, runCommand, runCommandAsync, } from './_pkgs/std/index.js';
 export { armArtefact } from './_pkgs/affine-widget-edgeless-toolbar/index.js';
-export { type SelectionPaneNode, selectionPaneTree, } from './_pkgs/affine-block-surface/index.js';
+export { type SelectionPaneNode, selectionPaneCommands, selectionPaneTree, } from './_pkgs/affine-block-surface/index.js';
 export { frameCommands, type ReorderFramesParams, reorderFramesParams, } from './_pkgs/affine-block-frame/index.js';
+export { createPanelReorderDrag, type PanelDragPoint, type PanelReorderDrag, type PanelReorderDragOptions, panelReorderGap, } from './_pkgs/affine-shared/utils/index.js';
 export { formatPropertyValue, isPropertyValueEmpty, } from './_pkgs/affine-fragment-doc-title/index.js';
 export type { PropertiesPanelRequest, PropertiesPanelService, TitleBandNotShownPage, TitleBandProperty, TitleBandService, TitleBandSheetState, } from './_pkgs/affine-shared/services/index.js';
 export { ThreadMarksExtension } from './_pkgs/affine-shared/services/index.js';
@@ -89,9 +90,12 @@ export declare function fitToModel(std: BlockStdScope, id: string, padding?: [nu
  * thumbnail renders one through `ExportManager` instead.
  *
  * Returns the element ready to be appended; `width` and `height` are the
- * preview box in CSS pixels (the panel's card is 280 × 166), `fillScreen`
- * covers the box instead of containing the frame. One mini editor per
- * preview: mount only the cards on screen. The element is defined by the
+ * preview box in CSS pixels, `fillScreen` covers the box instead of
+ * containing the frame. `fluid` (0.57) replaces the fixed box: the preview
+ * takes its container's width and the frame's proportions, never taller than
+ * wide, and follows the container as it is resized — the library's own panel
+ * cards draw it that way (recette 1, P0-1.2); `width` and `height` are then
+ * ignored. One mini editor per preview: mount only the cards on screen. The element is defined by the
  * frame panel's view extension, so it renders nothing in an assembly where the
  * `frame` flag is off (ADR 0009) — the same assembly where there is no frame
  * to preview.
@@ -100,6 +104,7 @@ export declare function createFramePreview(std: BlockStdScope, frame: FrameBlock
     width?: number;
     height?: number;
     fillScreen?: boolean;
+    fluid?: boolean;
 }): FramePreview;
 /**
  * One entry of the current view's own actions — what a host draws in the