apostrophe 4.27.1 → 4.28.1

package/.claude/settings.local.json

@@ -0,0 +1,15 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(timeout 180 npx mocha:*)",
+      "Bash(timeout 600 npx mocha:*)",
+      "Bash(npm ls:*)",
+      "Bash(timeout 540 npx mocha:*)",
+      "Bash(echo:*)",
+      "Bash(timeout 10 node:*)",
+      "Bash(timeout 300 npx mocha:*)",
+      "Bash(timeout 60 npx mocha:*)",
+      "Bash(timeout 120 npx mocha:*)"
+    ]
+  }
+}

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## 4.28.1
+
+### Patch Changes
+
+- f8d1952: Bug fix: the "pretty URLs" feature of @apostrophecms/file is now compatible with locale prefixes.
+
+## 4.28.0
+
+### Adds
+
+- Adds support for static URLs and static external frontend builds.
+- Adds widget graph store, accessible in Admin UI.
+- Support for the new `prettyUrls: true` option for @apostrophecms/file, which enables "pretty URLs" for PDFs and other items in the file library, in exchange for a small performance impact. Edit the slug field to adjust the pretty URL
+
+### Fixes
+
+- Fix a bug when rich text link open in new tab checkbox can't be cleared
+- Ensures the `getOne` API can correctly retrieve documents that are not localized. Thanks to [Eduardo Correal](https://github.com/ecb34).
+- Clicking a choice should dismiss the relationship suggestions dropdown. This regression was caused by part of the patch in release 4.27.1.
+- lint on main
+- Adds inner wrapper to area widget that creates a separate z-index context for the user, fixing widget/apostrophe UI conflicts
+- Fixes a bug where Layout's mode erroneously switches state
+- Fixes a bug where Layouts synthetic column styles were not reaching their children
+- Fixes styles being sanitized as html (breaks quotes) and resolves duplicate styles on the page.
+- Fix subtle bug in AposPermissionGrid that caused unrelated clicks to be "swallowed" due to a race condition at low network speeds
+- Fixes two conditions where slow internet speed could cause input to lose focus before a selection can be registered.
+
+### Changes
+
+- Improve re-rendering UX while keeping the performance optimization
+- raise the user's widget z-index context only when focused
+- Hide add content buttons on rich text editing, like widget controls
+- Refine in-context focus states for calmer UX
+- Simplifies some in-context UI rendering checks
+- Updated dependencies
+
+### Security
+
+- This previously undisclosed security vulnerability allowed users who had compromised a password to perform actions in the CMS without 2FA. For sites not using 2FA (e.g. our @apostrophecms/login-totp module), this changes nothing. But for those using our TOTP module or similar, upgrading to this release is urgent. Thanks to 0xkakashi for reporting the issue and recommending a fix.
+
 ## 4.27.1 (2026-03-03)
 
 ### Fixes

package/README.md

@@ -0,0 +1,142 @@
+<div align="center">
+  <a href="https://github.com/apostrophecms/apostrophe">
+    <img src="logo.svg" alt="ApostropheCMS logo" width="80" height="80">
+  </a>
+
+  <h1>ApostropheCMS</h1>
+
+  <p>
+    <a aria-label="Join the community on Discord" href="http://chat.apostrophecms.org">
+      <img alt="" src="https://img.shields.io/discord/517772094482677790?color=5865f2&label=Join%20the%20Discord&logo=discord&logoColor=fff&labelColor=000&style=for-the-badge&logoWidth=20" />
+    </a>
+    <a aria-label="License" href="https://github.com/apostrophecms/apostrophe/blob/main/LICENSE.md">
+      <img alt="" src="https://img.shields.io/static/v1?style=for-the-badge&labelColor=000000&label=License&message=MIT&color=3DA639" />
+    </a>
+  </p>
+
+  <p>
+    <strong>Full-stack CMS for developers and content teams</strong><br />
+    Build websites with in-context editing and headless flexibility using Node.js and MongoDB.
+    <br />
+    <a href="https://docs.apostrophecms.org/"><strong>Documentation »</strong></a>
+    <br />
+    <br />
+    <a href="http://demo.apostrophecms.com">Demo</a>
+    ·
+    <a href="https://roadmap.apostrophecms.com/roadmap">Roadmap</a>
+    ·
+    <a href="https://github.com/apostrophecms/apostrophe/issues/new?assignees=&labels=bug,3.0&template=bug_report.md&title=">Report Bug</a>
+  </p>
+</div>
+
+## About
+
+ApostropheCMS is a full-stack content management system built with Node.js and MongoDB. Content creators can edit directly on live pages without switching between admin interfaces, while developers can build with modern JavaScript or use it headlessly with any frontend framework.
+
+### Key Features
+
+- **🎯 In-Context Editing** - Content creators edit directly on the live page, seeing changes instantly
+- **⚡ Headless-Ready** - Use any frontend framework while keeping the powerful admin experience
+- **🛠️ Developer-First** - Built with Node.js and MongoDB for full-stack JavaScript development
+- **📈 Scales Beautifully** - From small sites to enterprise applications handling millions of pages
+- **🔐 Enterprise Features** - Advanced permissions, workflow management, automated translations, and more
+
+## System Requirements
+
+| Requirement | Version | Installation Notes |
+|-------------|---------|-------------------|
+| **Node.js** | 20.x+ | Use [NVM](https://github.com/nvm-sh/nvm) for version management |
+| **MongoDB** | 6.0+ | [MongoDB Atlas](https://www.mongodb.com/atlas) (cloud) or local install |
+| **npm** | 10.x+ | Included with Node.js |
+
+See our [setup guides](https://docs.apostrophecms.org/guide/development-setup.html) for installation instructions.
+
+## Quick Start
+
+Get ApostropheCMS running locally in minutes:
+
+```bash
+# Option 1: Install CLI globally (recommended for multiple projects)
+npm install -g @apostrophecms/cli
+apos create my-website
+cd my-website
+npm run dev
+
+# Option 2: Use npx for one-time project creation
+npx @apostrophecms/cli create my-website
+cd my-website
+npm run dev
+```
+
+Your new ApostropheCMS site will be available at `http://localhost:3000` with a powerful admin interface at `/login`.
+
+### Prefer to Go Headless?
+
+**Get started with Astro integration** - the easiest way to build headless sites while keeping visual editing:
+
+- **[Apollo Starter Kit (Astro)](https://apostrophecms.com/starter-kits/apollo-starter-kit-for-astro-cms)** - Production-ready foundation with beautiful design system and rich content features
+- **[Essentials Starter Kit (Astro)](git clone https://github.com/apostrophecms/starter-kit-astro-essentials)** - Minimal, clean foundation for building custom designs from scratch
+
+Both starter kits provide headless CMS power with in-context editing, letting content creators edit directly on the live site while you build with modern frontend tools. Our Astro integration handles all the content fetching automatically—no REST API calls to write.
+
+**Desire a different frontend framework?** Use our REST APIs with React, Vue, Svelte, or any other framework:
+
+- **[REST API Documentation](https://docs.apostrophecms.org/reference/api/pieces.html)** - Complete API reference
+- **[Headless CMS Guide](https://docs.apostrophecms.org/guide/headless-cms.html)** - Integration walkthrough for any framework
+
+### Hosting & Deployment
+
+Choose [ApostropheCMS hosting](https://apostrophecms.com/hosting) for turnkey solutions with optimized performance and dedicated support, or deploy to [any platform where Node.js runs](https://docs.apostrophecms.org/guide/hosting.html).
+
+## Built With Modern Tech
+
+- **[Node.js](https://nodejs.org/)** - JavaScript runtime for server-side development
+- **[MongoDB](https://www.mongodb.com/)** - Flexible document database for content storage
+- **ESM Modules** - Native ES6 module support for modern JavaScript
+- **Vite** - Lightning-fast build tool and development server
+- **Modern JavaScript** - ES6+, async/await, and contemporary development patterns
+
+## Community & Support
+
+**Join other developers and content creators using ApostropheCMS:**
+
+- **[Discord](https://discord.com/invite/XkbRNq7)** - Get help, share projects, and connect with other users
+- **[GitHub Discussions](https://github.com/apostrophecms/apostrophe/discussions)** - Feature requests, technical discussions, and community support
+- **[Documentation](https://docs.apostrophecms.org/)** - Comprehensive guides, tutorials, and API references
+
+## Contributing
+
+We welcome contributions from the community! Whether you're fixing bugs, adding features, or improving documentation, your help makes ApostropheCMS better for everyone.
+
+- **[Contribution Guide](https://github.com/apostrophecms/apostrophe/blob/main/CONTRIBUTING.md)** - How to contribute code, documentation, and feedback
+- **[Good First Issues](https://github.com/apostrophecms/apostrophe/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)** - Perfect starting points for new contributors
+
+
+## Pro Features
+
+**For teams and organizations requiring additional features:**
+
+- **🔐 Advanced User Management** - Granular permissions, user groups, and access controls
+- **🌍 Automated Translation** - AI-powered translation with DeepL, Google Translate, and Azure
+- **📊 Analytics & SEO** - Built-in SEO optimization and content analytics
+- **⚡ Performance Optimization** - Advanced caching, CDN integration, and performance monitoring
+- **🏢 Multisite Management** - Manage multiple sites from a single dashboard with shared resources
+- **💼 Professional Support** - Dedicated support, training, and consultation services
+
+[Explore all the pro extensions](https://apostrophecms.com/extensions?autocomplete=&license=assembly&license=pro) and [sign up](https://app.apostrophecms.com/login) for a Pro license in our self-service Apostrophe Workspaces, or [contact us](https://apostrophecms.com/contact-us) to learn about licensing and support options.
+
+## License
+
+ApostropheCMS is open source software licensed under the [MIT License](https://github.com/apostrophecms/apostrophe/blob/main/LICENSE.md). This means you're free to use, modify, and distribute it for both personal and commercial projects.
+
+---
+
+<div align="center">
+  <p>
+    <strong>Ready to build something amazing?</strong><br>
+    <a href="https://docs.apostrophecms.org/">Get started with our documentation</a> or <a href="https://apostrophecms.com/contact-us">talk to our team</a>
+  </p>
+  <p>
+    <em>Built with ❤️ by the <a href="https://apostrophecms.com">ApostropheCMS team</a></em>
+  </p>
+</div>

package/index.js

@@ -479,6 +479,9 @@ async function apostrophe(options, telemetry, rootSpan) {
     // Environment variable override
     self.options.baseUrl = process.env.APOS_BASE_URL || self.options.baseUrl;
     self.baseUrl = self.options.baseUrl;
+    self.options.staticBaseUrl = process.env.APOS_STATIC_BASE_URL ||
+      self.options.staticBaseUrl;
+    self.staticBaseUrl = self.options.staticBaseUrl;
     self.prefix = self.options.prefix || '';
   }
 

package/lib/stream-proxy.js

@@ -0,0 +1,49 @@
+// Make a request for url and stream it to req.res,
+// passing through relevant headers, without downloading
+// the whole thing to disk. Site-relative URLs are
+// resolved via req.baseUrl. Server-side errors are logged to
+// error() which should accept multiple arguments
+
+module.exports = async function(req, url, { error }) {
+  const res = req.res;
+  if (url.startsWith('/')) {
+    // Can't make a self-request without an absolute URL
+    url = `${req.baseUrl}${url}`;
+  }
+  let response;
+  try {
+    response = await fetch(url);
+  } catch (e) {
+    return send502(e);
+  }
+  for (const header of [ 'content-type', 'etag', 'last-modified', 'content-disposition', 'cache-control' ]) {
+    const result = response.headers.get(header);
+    if (result != null) {
+      res.header(header, result);
+    }
+  }
+  res.status(response.status);
+  if (response.body == null) {
+    return res.end();
+  }
+  response.body.pipeTo(new WritableStream({
+    write(chunk) {
+      res.write(chunk);
+    },
+    close() {
+      res.end();
+    },
+    abort(reason) {
+      if (!res.headersSent) {
+        return send502(reason);
+      } else {
+        // Only way to signal failure after headers are sent
+        res.destroy();
+      }
+    }
+  }));
+  function send502(e) {
+    error(`Error fetching "ugly URL" ${url} to resolve pretty URL ${req.url}:`, e);
+    return res.status(502).send('upstream media error fetching data for pretty URL');
+  }
+};

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextTitle.vue

@@ -166,22 +166,13 @@ export default {
     color: var(--a-text-primary);
   }
 
-  &__document-title {
-    margin-top: 1px;
-  }
-
   &__separator {
     align-items: center;
-    margin-top: 1px;
     padding: 0 7px;
   }
 
-  &__document {
-    margin-top: 3.5px;
-
-    :deep(.apos-context-menu__items) {
-      min-width: 150px;
-    }
+  &__document :deep(.apos-context-menu__items) {
+    min-width: 150px;
   }
 }
 

package/modules/@apostrophecms/area/ui/apos/apps/AposAreas.js

@@ -1,5 +1,6 @@
 
-import createApp from 'Modules/@apostrophecms/ui/lib/vue';
+import createApp, { pinia } from 'Modules/@apostrophecms/ui/lib/vue';
+import { useWidgetGraphStore } from 'Modules/@apostrophecms/ui/stores/widgetGraph.js';
 import { nextTick } from 'vue';
 
 export default function() {
@@ -24,6 +25,12 @@ export default function() {
   });
 
   apos.bus.$on('refreshed', function() {
+    // Re-instantiate the on-page widget graph before remounting areas.
+    // The normal mounted hooks will rebuild it from fresh data.
+    const graphStore = useWidgetGraphStore(pinia);
+    if (apos.adminBar?.contextId) {
+      graphStore.resetGraph(apos.adminBar.contextId);
+    }
     createAreaAppsAndRunPlayersIfDone();
   });
 
@@ -117,10 +124,18 @@ export default function() {
 
       el.parentNode.replaceChild(apos.area.activeEditor.$el, el);
     } else {
-      observer = new IntersectionObserver(observed, {
-        rootMargin: '600px'
-      });
-      observer.observe(el);
+      const rect = el.getBoundingClientRect();
+      const isInViewport = rect.bottom >= 0 &&
+        rect.top <= window.innerHeight;
+
+      if (isInViewport) {
+        mountApp();
+      } else {
+        observer = new IntersectionObserver(observed, {
+          rootMargin: '600px'
+        });
+        observer.observe(el);
+      }
     }
 
     function observed(entries) {
@@ -129,8 +144,14 @@ export default function() {
         return;
       }
       if (created) {
+        observer.disconnect();
         return;
       }
+      mountApp();
+      observer.disconnect();
+    }
+
+    function mountApp() {
       const app = createApp(component, {
         options,
         id: data._id,
@@ -142,10 +163,21 @@ export default function() {
         parentOptions,
         renderings
       });
+
+      // Resolve graphKey: if this area is inside a modal that owns a
+      // graph (data-apos-graph-key), use that key.  Otherwise fall back
+      // to the on-page contextId.  This single DOM lookup bridges the
+      // provide/inject gap created by createApp.
+      const graphKey = el.closest('[data-apos-graph-key]')
+        ?.getAttribute('data-apos-graph-key') || apos.adminBar?.contextId || null;
+      // Provide the resolved graphKey so every descendant component
+      // can simply inject('aposGraphKey') and get the correct value.
+      if (graphKey) {
+        app.provide('aposGraphKey', graphKey);
+      }
       app.mount(el);
       mountedApps.set(el, app);
       created = true;
-      observer.disconnect();
     }
   }
 

package/modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue

@@ -3,7 +3,12 @@
     v-click-outside-element="resetFocusedArea"
     :data-apos-area="areaId"
     class="apos-area"
-    :class="themeClass"
+    :class="[
+      themeClass,
+      {
+        'apos-area--empty': next.length === 0
+      }
+    ]"
     @click="setFocusedArea(areaId, $event)"
   >
     <div
@@ -61,6 +66,12 @@
         :disabled="field && field.readOnly"
         :max-reached="maxReached"
         :rendering="rendering(widget)"
+        :raised="raisedWidgets.has(widget._id)"
+        :style="{
+          'z-index': raisedWidgets.has(widget._id)
+            ? next.length + 1
+            : null
+        }"
         @up="up"
         @down="down"
         @remove="remove"

package/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue

@@ -23,14 +23,13 @@
       @keyup.enter="onKeyup"
     >
       <div
-        v-if="!breadcrumbDisabled"
         ref="label"
         class="apos-area-widget-controls apos-area-widget__label"
         :class="labelsClasses"
       >
         <ol
           class="apos-area-widget__breadcrumbs"
-          @click="isSuppressingWidgetControls = false"
+          @click="clearSuppressionFlags"
         >
           <li
             class="
@@ -92,7 +91,7 @@
         />
       </div>
       <div
-        v-if="!controlsDisabled"
+        v-if="!controlsDisabled && !maxReached && !isSuppressingAddContentButtons"
         class="
           apos-area-widget-controls
           apos-area-widget-controls--add--top
@@ -143,43 +142,52 @@
           @operation="onOperation"
         />
       </div>
-
-      <!-- Still used for contextual editing components -->
-      <component
-        :is="widgetEditorComponent(widget.type)"
-        v-if="isContextual && !foreign"
-        :key="generation"
-        :class="adminContentDirectionClass"
-        :options="widgetOptions"
-        :type="widget.type"
-        :model-value="widget"
-        :meta="meta"
-        :doc-id="docId"
-        :focused="isFocused"
-        @update="$emit('update', $event)"
-        @suppress-widget-controls="isSuppressingWidgetControls = true"
-      />
-      <component
-        :is="widgetComponent(widget.type)"
-        v-else
-        :id="widget._id"
-        :key="`${generation}-preview`"
-        :class="adminContentDirectionClass"
-        :options="widgetOptions"
-        :type="widget.type"
-        :area-field-id="fieldId"
-        :following-values="followingValuesWithParent"
-        :model-value="widget"
-        :value="widget"
-        :meta="meta"
-        :foreign="foreign"
-        :doc-id="docId"
-        :rendering="rendering"
-        @edit="$emit('edit', i);"
-        @update="$emit('update', $event);"
-      />
       <div
-        v-if="!controlsDisabled"
+        class="apos-area-widget-rendered-widget"
+        :style="{
+          'z-index': raised
+            ? 0
+            : null
+        }"
+      >
+        <!-- Still used for contextual editing components -->
+        <component
+          :is="widgetEditorComponent(widget.type)"
+          v-if="isContextual && !foreign"
+          :key="generation"
+          :class="adminContentDirectionClass"
+          :options="widgetOptions"
+          :type="widget.type"
+          :model-value="widget"
+          :meta="meta"
+          :doc-id="docId"
+          :focused="isFocused"
+          @update="$emit('update', $event)"
+          @suppress-widget-controls="doSuppressWidgetControls"
+          @suppress-add-content-buttons="doSuppressAddContentButtons"
+        />
+        <component
+          :is="widgetComponent(widget.type)"
+          v-else
+          :id="widget._id"
+          :key="`${generation}-preview`"
+          :class="adminContentDirectionClass"
+          :options="widgetOptions"
+          :type="widget.type"
+          :area-field-id="fieldId"
+          :following-values="followingValuesWithParent"
+          :model-value="widget"
+          :value="widget"
+          :meta="meta"
+          :foreign="foreign"
+          :doc-id="docId"
+          :rendering="rendering"
+          @edit="$emit('edit', i);"
+          @update="$emit('update', $event);"
+        />
+      </div>
+      <div
+        v-if="!controlsDisabled && !maxReached && !isSuppressingAddContentButtons"
         class="
           apos-area-widget-controls
           apos-area-widget-controls--add
@@ -209,13 +217,25 @@
 
 <script>
 import { mapState, mapActions } from 'pinia';
+import { unref } from 'vue';
 import { useWidgetStore } from 'Modules/@apostrophecms/ui/stores/widget';
 import { useBreakpointPreviewStore } from 'Modules/@apostrophecms/ui/stores/breakpointPreview.js';
 import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal.js';
+import { useWidgetGraphStore } from 'Modules/@apostrophecms/ui/stores/widgetGraph.js';
 
 export default {
   name: 'AposAreaWidget',
+  inject: {
+    aposGraphKey: {
+      from: 'aposGraphKey',
+      default: null
+    }
+  },
   props: {
+    raised: {
+      type: Boolean,
+      default: false
+    },
     docId: {
       type: String,
       required: false,
@@ -316,6 +336,7 @@ export default {
       mounted: false, // hack around needing DOM to be rendered for computed classes
       menuOpen: null,
       isSuppressingWidgetControls: false,
+      isSuppressingAddContentButtons: false,
       hasClickOutsideListener: false,
       classes: {
         show: 'apos-is-visible',
@@ -447,7 +468,7 @@ export default {
     },
     labelsClasses() {
       return {
-        [this.classes.show]: this.isHovered || this.isFocused || this.isEmphasized,
+        [this.classes.show]: (this.isHovered && !this.focusedWidget) || this.isFocused,
         // Force LTR for breadcrumbs for now so that nested AreaWidgets
         // behave properly.
         'apos-ltr': true
@@ -455,7 +476,7 @@ export default {
     },
     addClasses() {
       return {
-        [this.classes.show]: this.isHovered || this.isFocused,
+        [this.classes.show]: (this.isHovered && !this.focusedWidget) || this.isFocused,
         [`${this.classes.open}--menu-${this.menuOpen}`]: !!this.menuOpen
       };
     },
@@ -493,6 +514,7 @@ export default {
       } else {
         this.menuOpen = null;
         this.isSuppressingWidgetControls = false;
+        this.isSuppressingAddContentButtons = false;
         this.removeClickOutsideListener();
       }
       // Helps get scroll tracking unstuck on new/modified widgets
@@ -515,11 +537,14 @@ export default {
     // a 'focus my parent' plea
     apos.bus.$on('widget-focus-parent', this.focusParent);
     apos.bus.$on('context-menu-toggled', this.getFocusForMenu);
+    apos.bus.$on('suppress-focused-widget-controls', this.doSuppressWidgetControls);
 
     this.breadcrumbs.$lastEl = this.$el;
 
     this.getBreadcrumbs();
 
+    this.registerInGraph();
+
     if (this.focusedWidget) {
       // If another widget was in focus (because the user clicked the "add"
       // menu, for example), and this widget was created, give the new widget
@@ -549,12 +574,50 @@ export default {
   unmounted() {
     // Remove the focus parent listener when unmounted
     apos.bus.$off('widget-focus-parent', this.focusParent);
+    apos.bus.$off('suppress-focused-widget-controls', this.doSuppressWidgetControls);
     window.removeEventListener('scroll', this.stickyControlsScroll);
     window.removeEventListener('resize', this.stickyControlsResize);
+    this.unregisterFromGraph();
   },
   methods: {
+    clearSuppressionFlags() {
+      this.isSuppressingWidgetControls = false;
+      this.isSuppressingAddContentButtons = false;
+    },
     ...mapActions(useWidgetStore, [ 'setFocusedWidget', 'setHoveredWidget' ]),
     ...mapActions(useModalStore, [ 'getAdminContentDirectionClass' ]),
+    ...mapActions(useWidgetGraphStore, {
+      storeRegisterWidget: 'registerWidget',
+      storeUnregisterWidget: 'unregisterWidget'
+    }),
+    registerInGraph() {
+      if (this.foreign) {
+        return;
+      }
+      const graphKey = unref(this.aposGraphKey);
+      if (!graphKey) {
+        return;
+      }
+      this.storeRegisterWidget(graphKey, this.widget, {
+        areaId: this.areaId
+      });
+    },
+    unregisterFromGraph() {
+      if (this.foreign) {
+        return;
+      }
+      const graphKey = unref(this.aposGraphKey);
+      if (!graphKey) {
+        return;
+      }
+      this.storeUnregisterWidget(graphKey, this.widget._id);
+    },
+    doSuppressWidgetControls() {
+      this.isSuppressingWidgetControls = true;
+    },
+    doSuppressAddContentButtons() {
+      this.isSuppressingAddContentButtons = true;
+    },
     // Emits same actions as the native operations,
     // e.g ('edit', { index }), ('remove', { index }), etc.
     onOperation({ name, payload }) {
@@ -716,6 +779,9 @@ export default {
       }
     },
     unfocus(event) {
+      if (event.target.closest('[data-apos-ignore-unfocus="true"]')) {
+        return;
+      }
       if (!this.$el.contains(event.target)) {
         this.removeClickOutsideListener();
 
@@ -925,6 +991,10 @@ export default {
   }
 }
 
+.apos-area-widget-rendered-widget {
+  position: relative;
+}
+
 .apos-area-widget-controls {
   z-index: $z-index-widget-controls;
   position: absolute;

package/modules/@apostrophecms/area/ui/apos/components/AposBreadcrumbOperations.vue

@@ -209,6 +209,7 @@ export default {
             ...this.operationButtonDefault,
             icon: operation.icon
           },
+          ignoreUnfocus: true,
           teleportContent: this.teleportModals,
           disabled,
           tooltip