@einblick/sdk 0.5.5 → 0.6.2

package/dist/react/runtime.js

@@ -1,5 +1,28 @@
 import { EINBLICK_AUTH_SOURCE, EINBLICK_BRIDGE_SOURCE, EINBLICK_EDITOR_SOURCE, EINBLICK_PARENT_SOURCE, formatValueForText, isMediaEditableBinding, isEditSessionExpired, readBindingFromElement, resolveAppOrigin, serializeBindingValue, shouldUseInlineEditor, } from './shared.js';
 import { getEinblickSdkMessages, resolveEinblickSdkLocale, } from './i18n.js';
+function normalizeResourceHints(hints) {
+    const normalized = [];
+    const seen = new Set();
+    for (const hint of hints ?? []) {
+        const resourceSlug = hint.resourceSlug?.trim();
+        if (!resourceSlug)
+            continue;
+        const sourceType = hint.sourceType ?? 'cms';
+        const key = `${sourceType}:${resourceSlug}`;
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        normalized.push({
+            sourceType,
+            resourceSlug,
+            label: hint.label?.trim() || undefined,
+            mode: hint.mode,
+            recordIds: hint.recordIds?.filter((id) => id.trim().length > 0),
+            showInBottomBar: hint.showInBottomBar,
+        });
+    }
+    return normalized;
+}
 const RUNTIME_STYLE_ID = 'einblick-edit-runtime-styles';
 const EINBLICK_ACCENT_RGB = '250, 105, 62';
 const EINBLICK_ACCENT_COLOR = `rgb(${EINBLICK_ACCENT_RGB})`;
@@ -60,6 +83,9 @@ function isTextInputEvent(event) {
         event.key === 'Backspace' ||
         event.key === 'Delete');
 }
+function isRecordEditableBinding(binding) {
+    return Boolean(binding?.recordId);
+}
 function fieldTypeAllowsMultiline(binding) {
     return binding.fieldType === 'text' || binding.fieldType === 'markdown';
 }
@@ -87,43 +113,41 @@ function injectRuntimeStyles() {
       scroll-margin-top: 96px;
     }
 
-    [data-einblick-edit-outline],
-    [data-einblick-edit-field-outline] {
-      position: fixed;
-      z-index: 2147483643;
-      box-sizing: border-box;
-      pointer-events: none;
-      border-radius: var(--einblick-overlay-radius, 0.35rem);
+    [data-einblick-editable="true"][data-einblick-hover-active="true"] {
+      outline: 1px solid ${EINBLICK_ACCENT_BORDER};
+      outline-offset: -1px;
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
     }
 
-    [data-einblick-edit-outline] {
-      border: 1px solid ${EINBLICK_ACCENT_BORDER};
-      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
+    [data-einblick-editable="true"][data-einblick-field-hover-active="true"] {
+      outline: 1px dashed rgba(${EINBLICK_ACCENT_RGB}, 0.78);
+      outline-offset: -1px;
     }
 
-    [data-einblick-edit-field-outline] {
-      border: 1px dashed rgba(${EINBLICK_ACCENT_RGB}, 0.78);
-      background: rgba(${EINBLICK_ACCENT_RGB}, 0.04);
+    [data-einblick-editable="true"][data-einblick-inline-editing="true"] {
+      outline: 2px solid ${EINBLICK_ACCENT_COLOR};
+      outline-offset: -2px;
     }
 
     [data-einblick-edit-controls] {
-      position: fixed;
+      position: absolute;
       z-index: 2147483644;
       display: inline-flex;
       align-items: center;
-      gap: 0.45rem;
+      gap: 0;
     }
 
     [data-einblick-edit-button],
     [data-einblick-create-button],
     [data-einblick-field-button] {
       border: 1px solid ${EINBLICK_ACCENT_COLOR};
-      border-radius: 999px;
-      padding: 0.3rem 0.7rem;
+      border-radius: 0;
+      min-height: 2rem;
+      padding: 0 0.72rem;
       font: 600 12px/1 system-ui, sans-serif;
-      letter-spacing: 0.01em;
+      letter-spacing: 0;
       cursor: pointer;
-      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
+      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
     }
 
     [data-einblick-edit-button],
@@ -133,7 +157,6 @@ function injectRuntimeStyles() {
     }
 
     [data-einblick-edit-button] {
-      padding: 0.42rem 0.85rem;
       font-size: 13px;
     }
 
@@ -151,19 +174,19 @@ function injectRuntimeStyles() {
     }
 
     [data-einblick-field-overlays] {
-      position: fixed;
-      inset: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
       z-index: 2147483644;
       pointer-events: none;
     }
 
     [data-einblick-field-button] {
-      position: fixed;
+      position: absolute;
       z-index: 2147483644;
       pointer-events: auto;
-      padding: 0.24rem 0.58rem;
       font-size: 11px;
-      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
+      min-height: 1.65rem;
     }
 
     [data-einblick-brand-badge] {
@@ -394,6 +417,7 @@ class EinblickEditRuntime {
     callbacks;
     chrome;
     reserveBottomSpace;
+    resourceHints;
     locale;
     messages;
     bridgeNonce = createRandomId();
@@ -407,7 +431,6 @@ class EinblickEditRuntime {
     bridgeFrame = null;
     bridgePingInterval = null;
     activeElement = null;
-    activeOutline = null;
     hoverButtonContainer = null;
     hoverButton = null;
     hoverCreateButton = null;
@@ -422,7 +445,7 @@ class EinblickEditRuntime {
     brandPopoverLogoutButton = null;
     bottomBarHost = null;
     bottomBarSiteName = null;
-    bottomBarCmsButton = null;
+    bottomBarResourceList = null;
     bottomBarMoreButton = null;
     bottomBarMoreMenu = null;
     bottomBarOpenAppButton = null;
@@ -444,6 +467,7 @@ class EinblickEditRuntime {
     navigatorFrame = null;
     navigatorNonce = null;
     navigatorOpen = false;
+    navigatorFilter = null;
     pendingInlineSaves = new Map();
     pendingInlineMediaSaves = new Map();
     pendingLogin = null;
@@ -454,6 +478,7 @@ class EinblickEditRuntime {
         this.chrome = options.chrome ?? 'bar';
         this.reserveBottomSpace =
             options.reserveBottomSpace ?? this.chrome === 'bar';
+        this.resourceHints = normalizeResourceHints(options.resourceHints);
         this.locale = resolveEinblickSdkLocale(options.locale);
         this.messages = getEinblickSdkMessages(this.locale);
         this.session =
@@ -476,6 +501,10 @@ class EinblickEditRuntime {
         this.messages = getEinblickSdkMessages(nextLocale);
         this.refreshLocalizedUi();
     }
+    setResourceHints(hints) {
+        this.resourceHints = normalizeResourceHints(hints);
+        this.updateBottomBarResources();
+    }
     start() {
         if (this.started ||
             typeof window === 'undefined' ||
@@ -508,6 +537,7 @@ class EinblickEditRuntime {
             if (this.currentInlineTarget && !this.currentInlineTarget.isConnected) {
                 this.closeInlineEditor();
             }
+            this.updateBottomBarResources();
         });
         this.mutationObserver.observe(document.body, {
             childList: true,
@@ -539,8 +569,6 @@ class EinblickEditRuntime {
         this.bridgeFrame?.remove();
         this.bridgeFrame = null;
         this.setActiveElement(null);
-        this.activeOutline?.remove();
-        this.activeOutline = null;
         this.hoverButtonContainer?.remove();
         this.hoverButtonContainer = null;
         this.hoverButton?.remove();
@@ -560,7 +588,7 @@ class EinblickEditRuntime {
         this.bottomBarHost?.remove();
         this.bottomBarHost = null;
         this.bottomBarSiteName = null;
-        this.bottomBarCmsButton = null;
+        this.bottomBarResourceList = null;
         this.bottomBarMoreButton = null;
         this.bottomBarMoreMenu = null;
         this.bottomBarOpenAppButton = null;
@@ -689,8 +717,6 @@ class EinblickEditRuntime {
     };
     handleViewportChange = () => {
         if (this.currentInlineTarget?.isConnected) {
-            this.ensureActiveOutline();
-            this.positionOutline(this.activeOutline, this.currentInlineTarget);
             return;
         }
         if (this.activeElement && !this.activeElement.isConnected) {
@@ -743,7 +769,8 @@ class EinblickEditRuntime {
             return;
         }
         const binding = readBindingFromElement(this.activeElement);
-        if (!binding) {
+        if (!isRecordEditableBinding(binding) ||
+            !this.shouldShowEditButton(this.activeElement, binding)) {
             return;
         }
         if (binding.fieldKey && isMediaEditableBinding(binding)) {
@@ -942,6 +969,7 @@ class EinblickEditRuntime {
                     collectionId: message.collectionId,
                     intent: message.intent,
                     recordId: message.recordId,
+                    sourceType: message.sourceType,
                     resourceSlug: message.resourceSlug,
                 });
                 return;
@@ -950,6 +978,7 @@ class EinblickEditRuntime {
                 if (message.resourceSlug) {
                     void this.callbacks.onSave?.({
                         binding: {
+                            sourceType: message.sourceType ?? 'cms',
                             resourceSlug: message.resourceSlug,
                             recordId: message.recordId ?? '',
                             resourceMode: 'collection',
@@ -957,6 +986,7 @@ class EinblickEditRuntime {
                         },
                         value: {
                             action: message.action,
+                            sourceType: message.sourceType ?? 'cms',
                             recordId: message.recordId,
                             collectionId: message.collectionId,
                         },
@@ -986,15 +1016,19 @@ class EinblickEditRuntime {
                 });
             }
             else if (this.editorBinding) {
-                const nextBinding = {
-                    ...this.editorBinding,
-                    recordId: message.recordId ?? this.editorBinding.recordId,
-                };
-                void this.callbacks.onSave?.({
-                    binding: nextBinding,
-                    value: message.fields,
-                    source: 'drawer',
-                });
+                const nextRecordId = message.recordId ?? this.editorBinding.recordId;
+                if (nextRecordId) {
+                    const nextBinding = {
+                        ...this.editorBinding,
+                        sourceType: message.sourceType ?? this.editorBinding.sourceType ?? 'cms',
+                        recordId: nextRecordId,
+                    };
+                    void this.callbacks.onSave?.({
+                        binding: nextBinding,
+                        value: message.fields,
+                        source: 'drawer',
+                    });
+                }
             }
             this.closeDrawer();
             return;
@@ -1003,6 +1037,7 @@ class EinblickEditRuntime {
             if (this.editorBinding) {
                 const nextBinding = {
                     ...this.editorBinding,
+                    sourceType: message.sourceType ?? this.editorBinding.sourceType ?? 'cms',
                     resourceSlug: message.resourceSlug ?? this.editorBinding.resourceSlug,
                     recordId: message.recordId,
                 };
@@ -1190,8 +1225,6 @@ class EinblickEditRuntime {
         height: ${CONTROL_BAR_HEIGHT}px;
         padding: 0 0.75rem;
         background: ${EINBLICK_ACCENT_COLOR};
-        border-top: 1px solid rgba(255, 255, 255, 0.24);
-        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.18);
       }
 
       .brand,
@@ -1221,6 +1254,25 @@ class EinblickEditRuntime {
         font: 700 0.84rem/1.1 system-ui, sans-serif;
       }
 
+      .resources {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+        min-width: 0;
+        max-width: min(48rem, 54vw);
+        overflow-x: auto;
+        scrollbar-width: none;
+      }
+
+      .resources::-webkit-scrollbar {
+        display: none;
+      }
+
+      .resource-button {
+        flex: 0 0 auto;
+        max-width: 12rem;
+      }
+
       button {
         appearance: none;
         display: inline-flex;
@@ -1230,10 +1282,10 @@ class EinblickEditRuntime {
         min-width: 0;
         height: 2rem;
         margin: 0;
-        border: 1px solid rgba(255, 255, 255, 0.36);
+        border: 0;
         border-radius: 0.35rem;
-        background: rgba(255, 255, 255, 0.13);
-        color: rgb(255, 255, 255);
+        background: #ffffff;
+        color: #fa693e;
         padding: 0 0.7rem;
         font: 700 0.78rem/1 system-ui, sans-serif;
         letter-spacing: 0;
@@ -1252,11 +1304,11 @@ class EinblickEditRuntime {
 
       button:hover,
       button[aria-expanded="true"] {
-        background: rgba(255, 255, 255, 0.23);
+        opacity: 0.8;
       }
 
       button:focus-visible {
-        outline: 2px solid rgba(255, 255, 255, 0.72);
+        outline: 2px solid #ffffff;
         outline-offset: 2px;
       }
 
@@ -1342,14 +1394,8 @@ class EinblickEditRuntime {
         brand.append(mark, siteName);
         const actions = document.createElement('div');
         actions.className = 'actions';
-        const cmsButton = document.createElement('button');
-        cmsButton.type = 'button';
-        cmsButton.addEventListener('click', (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.setBottomBarMenuOpen(false);
-            this.setNavigatorOpen(!this.isNavigatorOpen());
-        });
+        const resourceList = document.createElement('div');
+        resourceList.className = 'resources';
         const moreButton = document.createElement('button');
         moreButton.type = 'button';
         moreButton.className = 'secondary icon-button';
@@ -1387,13 +1433,13 @@ class EinblickEditRuntime {
             void this.logoutFromEinblick();
         });
         moreMenu.append(openAppButton, logoutButton);
-        actions.append(cmsButton, moreButton);
+        actions.append(resourceList, moreButton);
         bar.append(brand, actions, moreMenu);
         shadowRoot.append(style, bar);
         document.body.append(host);
         this.bottomBarHost = host;
         this.bottomBarSiteName = siteName;
-        this.bottomBarCmsButton = cmsButton;
+        this.bottomBarResourceList = resourceList;
         this.bottomBarMoreButton = moreButton;
         this.bottomBarMoreMenu = moreMenu;
         this.bottomBarOpenAppButton = openAppButton;
@@ -1430,6 +1476,24 @@ class EinblickEditRuntime {
             ? this.messages.brand.authenticatedHint
             : this.messages.brand.unauthenticatedHint;
     }
+    updateBottomBarResources() {
+        if (!this.bottomBarResourceList) {
+            return;
+        }
+        this.bottomBarResourceList.replaceChildren();
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'resource-button';
+        button.textContent = this.messages.actions.cmsCollections;
+        button.setAttribute('aria-expanded', this.isNavigatorOpen() ? 'true' : 'false');
+        button.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.setBottomBarMenuOpen(false);
+            this.setNavigatorOpen(!this.isNavigatorOpen());
+        });
+        this.bottomBarResourceList.append(button);
+    }
     updateBottomBar() {
         if (!this.bottomBarHost) {
             this.applyBottomLayout(false);
@@ -1449,10 +1513,7 @@ class EinblickEditRuntime {
                 this.state.siteName?.trim() || this.messages.brand.connectedSite;
             this.bottomBarSiteName.title = this.bottomBarSiteName.textContent;
         }
-        if (this.bottomBarCmsButton) {
-            this.bottomBarCmsButton.textContent = this.messages.actions.cmsCollections;
-            this.bottomBarCmsButton.setAttribute('aria-expanded', this.isNavigatorOpen() ? 'true' : 'false');
-        }
+        this.updateBottomBarResources();
         if (this.bottomBarMoreButton) {
             this.bottomBarMoreButton.setAttribute('aria-label', this.messages.actions.moreActions);
             this.bottomBarMoreButton.setAttribute('aria-expanded', this.isBottomBarMenuOpen() ? 'true' : 'false');
@@ -1464,7 +1525,7 @@ class EinblickEditRuntime {
         if (this.bottomBarLogoutButton) {
             this.bottomBarLogoutButton.textContent = this.messages.actions.logout;
         }
-        this.ensureNavigatorPanel();
+        this.ensureNavigatorPanel(false, this.navigatorFilter);
         if (this.navigatorFrame) {
             this.navigatorFrame.title = this.messages.actions.cmsCollections;
         }
@@ -1528,7 +1589,7 @@ class EinblickEditRuntime {
     isNavigatorOpen() {
         return this.navigatorOpen && !!this.navigatorPanel;
     }
-    ensureNavigatorPanel(reportErrors = false) {
+    ensureNavigatorPanel(reportErrors = false, filter) {
         if (this.navigatorPanel) {
             return true;
         }
@@ -1538,7 +1599,7 @@ class EinblickEditRuntime {
         let navigatorUrl;
         const nonce = createRandomId();
         try {
-            navigatorUrl = this.buildNavigatorUrl(nonce);
+            navigatorUrl = this.buildNavigatorUrl(nonce, filter);
         }
         catch (error) {
             if (reportErrors) {
@@ -1565,18 +1626,22 @@ class EinblickEditRuntime {
         this.navigatorPanel = panel;
         this.navigatorFrame = iframe;
         this.navigatorNonce = nonce;
+        this.navigatorFilter = filter ?? null;
         return true;
     }
-    openNavigator() {
+    openNavigator(filter) {
         if (!this.state.isAuthenticated) {
             this.callbacks.onError?.(this.messages.errors.signInToEditContent);
             return;
         }
-        if (this.isNavigatorOpen()) {
+        if (this.isNavigatorOpen() && !filter) {
             return;
         }
+        if (this.isNavigatorOpen() && filter) {
+            this.removeNavigatorPanel(false);
+        }
         this.setBottomBarMenuOpen(false);
-        if (!this.ensureNavigatorPanel(true) || !this.navigatorPanel) {
+        if (!this.ensureNavigatorPanel(true, filter) || !this.navigatorPanel) {
             return;
         }
         this.navigatorOpen = true;
@@ -1603,6 +1668,7 @@ class EinblickEditRuntime {
         this.navigatorPanel = null;
         this.navigatorFrame = null;
         this.navigatorNonce = null;
+        this.navigatorFilter = null;
         this.navigatorOpen = false;
         if (hadNavigator && updateBottomBar) {
             this.updateBottomBar();
@@ -1696,6 +1762,9 @@ class EinblickEditRuntime {
             this.updateHoverChrome();
             return;
         }
+        if (this.activeElement) {
+            delete this.activeElement.dataset.einblickHoverActive;
+        }
         this.activeElement = element;
         if (!element ||
             !this.hoverButton ||
@@ -1704,34 +1773,27 @@ class EinblickEditRuntime {
             if (this.hoverButtonContainer) {
                 this.hoverButtonContainer.hidden = true;
             }
-            this.activeOutline?.remove();
-            this.activeOutline = null;
             this.clearQuickFieldOverlays();
+            if (this.hoverButton) {
+                this.hoverButton.hidden = true;
+            }
             if (this.hoverCreateButton) {
                 this.hoverCreateButton.hidden = true;
             }
             return;
         }
-        this.ensureActiveOutline();
+        element.dataset.einblickHoverActive = 'true';
         this.hoverButtonContainer.hidden = false;
         this.updateHoverButtonLabel();
         this.updateHoverButtonVisibility(element);
         this.renderQuickFieldOverlays(element);
         this.updateHoverChrome();
     }
-    ensureActiveOutline() {
-        if (this.activeOutline || typeof document === 'undefined') {
-            return;
-        }
-        const outline = document.createElement('div');
-        outline.setAttribute('data-einblick-edit-outline', 'true');
-        document.body.append(outline);
-        this.activeOutline = outline;
-    }
     updateHoverChrome() {
         if (!this.activeElement || !this.state.isAuthenticated) {
-            this.activeOutline?.remove();
-            this.activeOutline = null;
+            if (this.activeElement) {
+                delete this.activeElement.dataset.einblickHoverActive;
+            }
             if (this.hoverButtonContainer) {
                 this.hoverButtonContainer.hidden = true;
             }
@@ -1742,10 +1804,9 @@ class EinblickEditRuntime {
             this.setActiveElement(null);
             return;
         }
-        this.ensureActiveOutline();
         const rect = this.activeElement.getBoundingClientRect();
-        const isVisible = this.positionOutline(this.activeOutline, this.activeElement);
-        if (!isVisible || rect.width <= 0 || rect.height <= 0) {
+        const isVisible = this.isElementRectVisible(rect);
+        if (!isVisible) {
             if (this.hoverButtonContainer) {
                 this.hoverButtonContainer.hidden = true;
             }
@@ -1757,38 +1818,32 @@ class EinblickEditRuntime {
         this.positionHoverControls(rect);
         this.updateQuickFieldOverlayPositions();
     }
-    positionOutline(outline, target) {
-        if (!outline) {
-            return false;
-        }
-        const rect = target.getBoundingClientRect();
-        if (rect.width <= 0 || rect.height <= 0) {
-            outline.hidden = true;
-            return false;
-        }
-        const style = window.getComputedStyle(target);
-        outline.hidden = false;
-        outline.style.setProperty('--einblick-overlay-radius', style.borderRadius || '0.35rem');
-        outline.style.left = `${Math.round(rect.left)}px`;
-        outline.style.top = `${Math.round(rect.top)}px`;
-        outline.style.width = `${Math.round(rect.width)}px`;
-        outline.style.height = `${Math.round(rect.height)}px`;
-        return true;
+    isElementRectVisible(rect) {
+        return (rect.width > 0 &&
+            rect.height > 0 &&
+            rect.bottom >= 0 &&
+            rect.right >= 0 &&
+            rect.top <= window.innerHeight &&
+            rect.left <= window.innerWidth);
     }
     positionHoverControls(rect) {
         if (!this.hoverButtonContainer) {
             return;
         }
         this.hoverButtonContainer.hidden = false;
-        const margin = 8;
         const width = this.hoverButtonContainer.offsetWidth || 180;
         const height = this.hoverButtonContainer.offsetHeight || 32;
-        const left = clamp(rect.right - width - margin, margin, Math.max(margin, window.innerWidth - width - margin));
-        const top = clamp(rect.top + margin, margin, Math.max(margin, window.innerHeight - height - margin));
+        const scrollX = window.scrollX || document.documentElement.scrollLeft;
+        const scrollY = window.scrollY || document.documentElement.scrollTop;
+        const left = clamp(rect.right + scrollX - width, scrollX, Math.max(scrollX, scrollX + window.innerWidth - width));
+        const top = clamp(rect.top + scrollY, scrollY, Math.max(scrollY, scrollY + window.innerHeight - height));
         this.hoverButtonContainer.style.left = `${Math.round(left)}px`;
         this.hoverButtonContainer.style.top = `${Math.round(top)}px`;
     }
     clearQuickFieldOverlays() {
+        for (const overlay of this.quickFieldOverlays) {
+            delete overlay.target.dataset.einblickFieldHoverActive;
+        }
         this.quickFieldOverlayContainer?.remove();
         this.quickFieldOverlayContainer = null;
         this.quickFieldOverlays = [];
@@ -1803,13 +1858,13 @@ class EinblickEditRuntime {
         container.setAttribute('data-einblick-field-overlays', 'true');
         this.quickFieldOverlays = targets.map((target) => {
             const binding = readBindingFromElement(target);
-            const outline = document.createElement('div');
-            outline.setAttribute('data-einblick-edit-field-outline', 'true');
+            const isMediaBinding = isRecordEditableBinding(binding) && isMediaEditableBinding(binding);
+            target.dataset.einblickFieldHoverActive = 'true';
             const button = document.createElement('button');
             button.type = 'button';
-            button.setAttribute('data-einblick-field-button', binding && isMediaEditableBinding(binding) ? 'media' : 'text');
+            button.setAttribute('data-einblick-field-button', isMediaBinding ? 'media' : 'text');
             button.textContent =
-                binding && isMediaEditableBinding(binding)
+                isMediaBinding
                     ? getMediaActionLabel(binding, this.messages)
                     : this.messages.actions.editText;
             button.addEventListener('pointerdown', (event) => {
@@ -1818,7 +1873,7 @@ class EinblickEditRuntime {
             button.addEventListener('click', (event) => {
                 stopEvent(event);
                 const nextBinding = readBindingFromElement(target);
-                if (!nextBinding) {
+                if (!isRecordEditableBinding(nextBinding)) {
                     return;
                 }
                 if (isMediaEditableBinding(nextBinding)) {
@@ -1827,8 +1882,8 @@ class EinblickEditRuntime {
                 }
                 this.openInlineEditor(target, nextBinding);
             });
-            container.append(outline, button);
-            return { target, outline, button };
+            container.append(button);
+            return { target, button };
         });
         document.body.append(container);
         this.quickFieldOverlayContainer = container;
@@ -1840,21 +1895,21 @@ class EinblickEditRuntime {
         }
         for (const overlay of this.quickFieldOverlays) {
             if (!overlay.target.isConnected) {
-                overlay.outline.hidden = true;
                 overlay.button.hidden = true;
                 continue;
             }
             const rect = overlay.target.getBoundingClientRect();
-            const isVisible = this.positionOutline(overlay.outline, overlay.target);
+            const isVisible = this.isElementRectVisible(rect);
             overlay.button.hidden = !isVisible;
             if (!isVisible) {
                 continue;
             }
-            const margin = 4;
             const width = overlay.button.offsetWidth || 96;
             const height = overlay.button.offsetHeight || 26;
-            const left = clamp(rect.left + margin, margin, Math.max(margin, window.innerWidth - width - margin));
-            const top = clamp(rect.top + margin, margin, Math.max(margin, window.innerHeight - height - margin));
+            const scrollX = window.scrollX || document.documentElement.scrollLeft;
+            const scrollY = window.scrollY || document.documentElement.scrollTop;
+            const left = clamp(rect.right + scrollX - width, scrollX, Math.max(scrollX, scrollX + window.innerWidth - width));
+            const top = clamp(rect.top + scrollY, scrollY, Math.max(scrollY, scrollY + window.innerHeight - height));
             overlay.button.style.left = `${Math.round(left)}px`;
             overlay.button.style.top = `${Math.round(top)}px`;
         }
@@ -1945,8 +2000,14 @@ class EinblickEditRuntime {
         url.searchParams.set('nonce', nonce);
         url.searchParams.set('sessionToken', sessionToken);
         url.searchParams.set('returnTo', window.location.href);
+        url.searchParams.set('sourceType', binding.sourceType ?? 'cms');
         url.searchParams.set('resourceSlug', binding.resourceSlug);
-        url.searchParams.set('recordId', binding.recordId);
+        if (binding.recordId) {
+            url.searchParams.set('recordId', binding.recordId);
+        }
+        else if (intent !== 'create') {
+            throw new Error(this.messages.errors.openEditorFailed);
+        }
         if (intent === 'create') {
             url.searchParams.set('intent', intent);
         }
@@ -1955,7 +2016,7 @@ class EinblickEditRuntime {
         }
         return url.toString();
     }
-    buildNavigatorUrl(nonce) {
+    buildNavigatorUrl(nonce, filter) {
         const sessionToken = this.getActiveSessionToken();
         if (!sessionToken) {
             throw new Error(this.messages.errors.editSessionExpired);
@@ -1964,6 +2025,15 @@ class EinblickEditRuntime {
         url.searchParams.set('origin', window.location.origin);
         url.searchParams.set('nonce', nonce);
         url.searchParams.set('sessionToken', sessionToken);
+        if (filter?.sourceType) {
+            url.searchParams.set('sourceType', filter.sourceType);
+        }
+        if (filter?.resourceSlug) {
+            url.searchParams.set('resourceSlug', filter.resourceSlug);
+        }
+        if (filter?.recordIds && filter.recordIds.length > 0) {
+            url.searchParams.set('recordIds', filter.recordIds.join(','));
+        }
         return url.toString();
     }
     buildCollectionEditorUrl(args) {
@@ -1976,7 +2046,11 @@ class EinblickEditRuntime {
         url.searchParams.set('nonce', args.nonce);
         url.searchParams.set('sessionToken', sessionToken);
         url.searchParams.set('returnTo', window.location.href);
+        url.searchParams.set('sourceType', args.sourceType ?? 'cms');
         url.searchParams.set('collectionId', args.collectionId);
+        if (args.resourceSlug) {
+            url.searchParams.set('resourceSlug', args.resourceSlug);
+        }
         url.searchParams.set('intent', args.intent);
         if (args.recordId) {
             url.searchParams.set('recordId', args.recordId);
@@ -1984,11 +2058,23 @@ class EinblickEditRuntime {
         return url.toString();
     }
     updateHoverButtonVisibility(element) {
-        if (!this.hoverCreateButton) {
+        if (!this.hoverButton || !this.hoverCreateButton) {
             return;
         }
         const binding = element ? readBindingFromElement(element) : null;
-        this.hoverCreateButton.hidden = !this.shouldShowCreateButton(element, binding);
+        const canCreate = this.shouldShowCreateButton(element, binding);
+        const canEdit = this.shouldShowEditButton(element, binding);
+        this.hoverButton.hidden = !canEdit;
+        this.hoverCreateButton.hidden = !canCreate;
+        if (this.hoverButtonContainer) {
+            this.hoverButtonContainer.hidden = !canEdit && !canCreate;
+        }
+    }
+    shouldShowEditButton(element, binding) {
+        if (element?.dataset.einblickKind === 'collection') {
+            return false;
+        }
+        return isRecordEditableBinding(binding);
     }
     shouldShowCreateButton(element, binding) {
         if (!element || !binding || !this.state.isAuthenticated) {
@@ -1997,28 +2083,8 @@ class EinblickEditRuntime {
         if (binding.fieldKey) {
             return false;
         }
-        if (binding.resourceMode === 'singleton') {
-            return false;
-        }
-        if (binding.resourceMode === 'collection') {
-            return true;
-        }
-        if (element.dataset.einblickKind === 'text') {
-            return false;
-        }
-        const selector = [
-            '[data-einblick-editable="true"]',
-            `[data-einblick-resource="${CSS.escape(binding.resourceSlug)}"]`,
-        ].join('');
-        const elements = document.querySelectorAll(selector);
-        const recordIds = new Set();
-        elements.forEach((candidate) => {
-            const recordId = candidate.dataset.einblickRecordId?.trim();
-            if (recordId) {
-                recordIds.add(recordId);
-            }
-        });
-        return recordIds.size > 1;
+        return (element.dataset.einblickKind === 'collection' &&
+            binding.resourceMode === 'collection');
     }
     findEditableTarget(target) {
         if (!(target instanceof Element)) {
@@ -2041,6 +2107,7 @@ class EinblickEditRuntime {
             const parentBinding = readBindingFromElement(parent);
             if (parentBinding &&
                 !parentBinding.fieldKey &&
+                (parentBinding.sourceType ?? 'cms') === (binding.sourceType ?? 'cms') &&
                 parentBinding.resourceSlug === binding.resourceSlug &&
                 parentBinding.recordId === binding.recordId) {
                 return parent;
@@ -2059,8 +2126,12 @@ class EinblickEditRuntime {
                 ? [element]
                 : [];
         }
+        if (!binding.recordId) {
+            return [];
+        }
         const selector = [
             '[data-einblick-editable="true"]',
+            `[data-einblick-source-type="${CSS.escape(binding.sourceType ?? 'cms')}"]`,
             `[data-einblick-resource="${CSS.escape(binding.resourceSlug)}"]`,
             `[data-einblick-record-id="${CSS.escape(binding.recordId)}"]`,
             '[data-einblick-field-key]',
@@ -2081,7 +2152,6 @@ class EinblickEditRuntime {
         }
         return (!!this.hoverButtonContainer?.contains(target) ||
             !!this.quickFieldOverlayContainer?.contains(target) ||
-            !!this.activeOutline?.contains(target) ||
             !!this.brandBadge?.contains(target) ||
             !!this.brandPopover?.contains(target) ||
             !!this.bottomBarHost?.contains(target) ||
@@ -2090,8 +2160,11 @@ class EinblickEditRuntime {
     findElementForBinding(binding) {
         const selector = [
             '[data-einblick-editable="true"]',
+            `[data-einblick-source-type="${CSS.escape(binding.sourceType ?? 'cms')}"]`,
             `[data-einblick-resource="${CSS.escape(binding.resourceSlug)}"]`,
-            `[data-einblick-record-id="${CSS.escape(binding.recordId)}"]`,
+            binding.recordId
+                ? `[data-einblick-record-id="${CSS.escape(binding.recordId)}"]`
+                : '',
             binding.fieldKey
                 ? `[data-einblick-field-key="${CSS.escape(binding.fieldKey)}"]`
                 : '',
@@ -2187,9 +2260,6 @@ class EinblickEditRuntime {
         restoreState.cleanup.push(() => target.removeEventListener('click', handleClick, true), () => target.removeEventListener('keydown', handleKeyDown, true), () => target.removeEventListener('paste', handlePaste, true), () => target.removeEventListener('blur', handleBlur, true));
         this.currentInlineTarget = target;
         this.currentInlineBinding = binding;
-        this.ensureActiveOutline();
-        this.activeOutline?.setAttribute('data-einblick-inline-active', 'true');
-        this.positionOutline(this.activeOutline, target);
         window.setTimeout(() => {
             target.focus({ preventScroll: true });
             this.placeCaretAtEnd(target);
@@ -2215,11 +2285,6 @@ class EinblickEditRuntime {
         this.currentInlineTarget = null;
         this.currentInlineBinding = null;
         this.inlineSaveInFlight = null;
-        this.activeOutline?.removeAttribute('data-einblick-inline-active');
-        if (!this.activeElement) {
-            this.activeOutline?.remove();
-            this.activeOutline = null;
-        }
     }
     restoreInlineTargetAttributes(target, restoreState) {
         if (restoreState.contentEditable === null) {
@@ -2421,6 +2486,7 @@ class EinblickEditRuntime {
             nonce: this.bridgeNonce,
             requestId,
             payload: {
+                sourceType: binding.sourceType ?? 'cms',
                 resourceSlug: binding.resourceSlug,
                 recordId: binding.recordId,
                 fieldKey: binding.fieldKey,
@@ -2474,6 +2540,7 @@ class EinblickEditRuntime {
             nonce: this.bridgeNonce,
             requestId,
             payload: {
+                sourceType: binding.sourceType ?? 'cms',
                 resourceSlug: binding.resourceSlug,
                 recordId: binding.recordId,
                 fieldKey: binding.fieldKey,
@@ -2542,6 +2609,8 @@ class EinblickEditRuntime {
                 nonce,
                 intent: args.intent,
                 recordId: args.recordId,
+                sourceType: args.sourceType,
+                resourceSlug: args.resourceSlug,
             });
         }
         catch (error) {
@@ -2554,6 +2623,7 @@ class EinblickEditRuntime {
         this.editorTarget = null;
         this.editorBinding = args.resourceSlug
             ? {
+                sourceType: args.sourceType ?? 'cms',
                 resourceSlug: args.resourceSlug,
                 recordId: args.recordId ?? '',
                 resourceMode: 'collection',
@@ -2625,6 +2695,7 @@ export function createEinblickEditRuntime(options) {
         login: (loginOptions) => runtime.login(loginOptions),
         openEditor: (binding, element) => runtime.openEditor(binding, element),
         setLocale: (locale) => runtime.setLocale(locale),
+        setResourceHints: (hints) => runtime.setResourceHints(hints),
     };
 }
 //# sourceMappingURL=runtime.js.map