@einblick/sdk 0.6.0 → 0.6.2

package/dist/react/runtime.js

@@ -83,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';
 }
@@ -110,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],
@@ -156,7 +157,6 @@ function injectRuntimeStyles() {
     }
 
     [data-einblick-edit-button] {
-      padding: 0.42rem 0.85rem;
       font-size: 13px;
     }
 
@@ -174,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] {
@@ -431,7 +431,6 @@ class EinblickEditRuntime {
     bridgeFrame = null;
     bridgePingInterval = null;
     activeElement = null;
-    activeOutline = null;
     hoverButtonContainer = null;
     hoverButton = null;
     hoverCreateButton = null;
@@ -570,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();
@@ -720,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) {
@@ -774,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)) {
@@ -1020,16 +1016,19 @@ class EinblickEditRuntime {
                 });
             }
             else if (this.editorBinding) {
-                const nextBinding = {
-                    ...this.editorBinding,
-                    sourceType: message.sourceType ?? this.editorBinding.sourceType ?? 'cms',
-                    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;
@@ -1283,6 +1282,7 @@ class EinblickEditRuntime {
         min-width: 0;
         height: 2rem;
         margin: 0;
+        border: 0;
         border-radius: 0.35rem;
         background: #ffffff;
         color: #fa693e;
@@ -1476,78 +1476,23 @@ class EinblickEditRuntime {
             ? this.messages.brand.authenticatedHint
             : this.messages.brand.unauthenticatedHint;
     }
-    collectBottomBarResources() {
-        const resources = new Map();
-        for (const hint of this.resourceHints) {
-            const key = `${hint.sourceType}:${hint.resourceSlug}`;
-            if (hint.showInBottomBar === false) {
-                resources.delete(key);
-                continue;
-            }
-            resources.set(key, hint);
-        }
-        if (typeof document !== 'undefined') {
-            const elements = document.querySelectorAll('[data-einblick-editable="true"][data-einblick-resource]');
-            elements.forEach((element) => {
-                const binding = readBindingFromElement(element);
-                if (!binding?.resourceSlug)
-                    return;
-                const sourceType = binding.sourceType ?? 'cms';
-                const key = `${sourceType}:${binding.resourceSlug}`;
-                if (resources.has(key)) {
-                    const current = resources.get(key);
-                    if (binding.recordId &&
-                        !current.recordIds?.includes(binding.recordId)) {
-                        current.recordIds = [...(current.recordIds ?? []), binding.recordId];
-                    }
-                    return;
-                }
-                resources.set(key, {
-                    sourceType,
-                    resourceSlug: binding.resourceSlug,
-                    label: binding.label,
-                    mode: binding.resourceMode,
-                    recordIds: binding.recordId ? [binding.recordId] : undefined,
-                });
-            });
-        }
-        return [...resources.values()];
-    }
     updateBottomBarResources() {
         if (!this.bottomBarResourceList) {
             return;
         }
         this.bottomBarResourceList.replaceChildren();
-        const resources = this.collectBottomBarResources();
-        if (resources.length === 0) {
-            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);
-            return;
-        }
-        for (const resource of resources) {
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = 'resource-button';
-            button.textContent = resource.label ?? resource.resourceSlug;
-            button.title = button.textContent;
-            button.addEventListener('click', (event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                this.setBottomBarMenuOpen(false);
-                this.openNavigator(resource);
-            });
-            this.bottomBarResourceList.append(button);
-        }
+        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) {
@@ -1817,6 +1762,9 @@ class EinblickEditRuntime {
             this.updateHoverChrome();
             return;
         }
+        if (this.activeElement) {
+            delete this.activeElement.dataset.einblickHoverActive;
+        }
         this.activeElement = element;
         if (!element ||
             !this.hoverButton ||
@@ -1825,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;
             }
@@ -1863,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;
             }
@@ -1878,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 = [];
@@ -1924,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) => {
@@ -1939,7 +1873,7 @@ class EinblickEditRuntime {
             button.addEventListener('click', (event) => {
                 stopEvent(event);
                 const nextBinding = readBindingFromElement(target);
-                if (!nextBinding) {
+                if (!isRecordEditableBinding(nextBinding)) {
                     return;
                 }
                 if (isMediaEditableBinding(nextBinding)) {
@@ -1948,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;
@@ -1961,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`;
         }
@@ -2068,7 +2002,12 @@ class EinblickEditRuntime {
         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);
         }
@@ -2119,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) {
@@ -2132,29 +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-source-type="${CSS.escape(binding.sourceType ?? 'cms')}"]`,
-            `[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)) {
@@ -2196,6 +2126,9 @@ class EinblickEditRuntime {
                 ? [element]
                 : [];
         }
+        if (!binding.recordId) {
+            return [];
+        }
         const selector = [
             '[data-einblick-editable="true"]',
             `[data-einblick-source-type="${CSS.escape(binding.sourceType ?? 'cms')}"]`,
@@ -2219,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) ||
@@ -2230,7 +2162,9 @@ class EinblickEditRuntime {
             '[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)}"]`
                 : '',
@@ -2326,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);
@@ -2354,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) {