@einblick/sdk 0.6.3 → 0.7.0

package/dist/react/runtime.js

@@ -1,9 +1,11 @@
 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';
 const RUNTIME_STYLE_ID = 'einblick-edit-runtime-styles';
-const EINBLICK_ACCENT_RGB = '250, 105, 62';
-const EINBLICK_ACCENT_COLOR = `rgb(${EINBLICK_ACCENT_RGB})`;
-const EINBLICK_ACCENT_BORDER = `rgba(${EINBLICK_ACCENT_RGB}, 0.92)`;
+const DEFAULT_EINBLICK_ACCENT_COLOR = 'rgb(250, 105, 62)';
+const EINBLICK_ACCENT_COLOR_VAR = '--einblick-editor-accent-color';
+const EINBLICK_ACCENT_COLOR = `var(${EINBLICK_ACCENT_COLOR_VAR}, ${DEFAULT_EINBLICK_ACCENT_COLOR})`;
+const EINBLICK_ACCENT_TINT = `color-mix(in srgb, ${EINBLICK_ACCENT_COLOR} 12%, transparent)`;
+const EINBLICK_ACCENT_HOVER_COLOR = `color-mix(in srgb, ${EINBLICK_ACCENT_COLOR} 92%, black)`;
 const CONTROL_BAR_HEIGHT = 44;
 function getBrandBadgeSvg(size) {
     return `
@@ -40,6 +42,30 @@ function getMoreActionsSvg(size) {
     </svg>
   `;
 }
+function createDatabaseIconElement(size) {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('width', String(size));
+    svg.setAttribute('height', String(size));
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.setAttribute('stroke-width', '2');
+    svg.setAttribute('stroke-linecap', 'round');
+    svg.setAttribute('stroke-linejoin', 'round');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    const ellipse = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
+    ellipse.setAttribute('cx', '12');
+    ellipse.setAttribute('cy', '5');
+    ellipse.setAttribute('rx', '9');
+    ellipse.setAttribute('ry', '3');
+    const sidePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    sidePath.setAttribute('d', 'M3 5V19A9 3 0 0 0 21 19V5');
+    const middlePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    middlePath.setAttribute('d', 'M3 12A9 3 0 0 0 21 12');
+    svg.append(ellipse, sidePath, middlePath);
+    return svg;
+}
 function createRandomId() {
     if (typeof crypto !== 'undefined' &&
         typeof crypto.randomUUID === 'function') {
@@ -54,6 +80,24 @@ function stopEvent(event) {
 function clamp(value, min, max) {
     return Math.min(Math.max(value, min), max);
 }
+function rectsOverlap(first, second, padding = 0) {
+    return (first.left < second.right + padding &&
+        first.right > second.left - padding &&
+        first.top < second.bottom + padding &&
+        first.bottom > second.top - padding);
+}
+function normalizeAccentColor(accentColor) {
+    const normalized = accentColor?.trim();
+    if (!normalized) {
+        return null;
+    }
+    if (typeof CSS !== 'undefined' &&
+        typeof CSS.supports === 'function' &&
+        !CSS.supports('color', normalized)) {
+        return null;
+    }
+    return normalized;
+}
 function isTextInputEvent(event) {
     return (event.key.length === 1 ||
         event.key === 'Enter' ||
@@ -67,15 +111,37 @@ function fieldTypeAllowsMultiline(binding) {
     return binding.fieldType === 'text' || binding.fieldType === 'markdown';
 }
 function getMediaAcceptValue(binding) {
-    return binding.fieldType === 'image' || binding.fieldType === 'images'
-        ? 'image/*'
-        : '';
+    return binding.fieldType === 'image' ? 'image/*' : '';
 }
 function getMediaActionLabel(binding, messages) {
-    return binding.fieldType === 'image' || binding.fieldType === 'images'
+    return binding.fieldType === 'image'
         ? messages.actions.replaceImage
         : messages.actions.replaceFile;
 }
+function isMultiMediaBinding(binding) {
+    return binding?.fieldType === 'images' || binding?.fieldType === 'files';
+}
+function setOverlayButtonContent(button, label, options) {
+    const hasDatabaseIcon = options?.databaseIcon === true;
+    if (button.dataset.einblickOverlayButtonLabel === label &&
+        button.dataset.einblickOverlayButtonDatabaseIcon ===
+            (hasDatabaseIcon ? 'true' : 'false')) {
+        return;
+    }
+    const text = document.createElement('span');
+    text.setAttribute('data-einblick-overlay-button-label', 'true');
+    text.textContent = label;
+    button.replaceChildren();
+    if (hasDatabaseIcon) {
+        button.append(createDatabaseIconElement(14));
+    }
+    button.append(text);
+    button.title = label;
+    button.dataset.einblickOverlayButtonLabel = label;
+    button.dataset.einblickOverlayButtonDatabaseIcon = hasDatabaseIcon
+        ? 'true'
+        : 'false';
+}
 function injectRuntimeStyles() {
     if (typeof document === 'undefined') {
         return;
@@ -91,13 +157,12 @@ function injectRuntimeStyles() {
     }
 
     [data-einblick-editable="true"][data-einblick-hover-active="true"] {
-      outline: 1px solid ${EINBLICK_ACCENT_BORDER};
+      outline: 1px solid ${EINBLICK_ACCENT_COLOR};
       outline-offset: -1px;
-      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
     }
 
     [data-einblick-editable="true"][data-einblick-field-hover-active="true"] {
-      outline: 1px dashed rgba(${EINBLICK_ACCENT_RGB}, 0.78);
+      outline: 1px dashed ${EINBLICK_ACCENT_COLOR};
       outline-offset: -1px;
     }
 
@@ -111,43 +176,46 @@ function injectRuntimeStyles() {
       z-index: 2147483644;
       display: inline-flex;
       align-items: center;
-      gap: 0;
+      gap: 0.25rem;
     }
 
     [data-einblick-edit-button],
-    [data-einblick-create-button],
+    [data-einblick-collection-create-button],
     [data-einblick-field-button] {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.35rem;
       border: 1px solid ${EINBLICK_ACCENT_COLOR};
       border-radius: 0;
-      min-height: 2rem;
-      padding: 0 0.72rem;
-      font: 600 12px/1 system-ui, sans-serif;
-      letter-spacing: 0;
-      cursor: pointer;
-      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
-    }
-
-    [data-einblick-edit-button],
-    [data-einblick-field-button="media"] {
+      min-width: max-content;
+      min-height: 2.05rem;
+      max-width: calc(100vw - 0.5rem);
+      padding: 0 0.74rem;
+      overflow: hidden;
       background: ${EINBLICK_ACCENT_COLOR};
       color: rgb(255, 255, 255);
+      font: 700 13px/1 system-ui, sans-serif;
+      letter-spacing: 0;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
     }
 
-    [data-einblick-edit-button] {
-      font-size: 13px;
-    }
-
-    [data-einblick-create-button],
-    [data-einblick-field-button="text"] {
-      background: rgb(255, 255, 255);
-      color: ${EINBLICK_ACCENT_COLOR};
+    [data-einblick-edit-button] svg,
+    [data-einblick-collection-create-button] svg,
+    [data-einblick-field-button] svg {
+      flex: none;
+      width: 0.95rem;
+      height: 0.95rem;
     }
 
     [data-einblick-edit-button]:hover,
-    [data-einblick-create-button]:hover,
+    [data-einblick-collection-create-button]:hover,
     [data-einblick-field-button]:hover {
-      background: rgb(255, 255, 255);
-      color: ${EINBLICK_ACCENT_COLOR};
+      background: ${EINBLICK_ACCENT_COLOR};
+      background: ${EINBLICK_ACCENT_HOVER_COLOR};
+      color: rgb(255, 255, 255);
     }
 
     [data-einblick-field-overlays] {
@@ -162,8 +230,6 @@ function injectRuntimeStyles() {
       position: absolute;
       z-index: 2147483644;
       pointer-events: auto;
-      font-size: 11px;
-      min-height: 1.65rem;
     }
 
     [data-einblick-brand-badge] {
@@ -182,17 +248,15 @@ function injectRuntimeStyles() {
       background: transparent;
       color: ${EINBLICK_ACCENT_COLOR};
       cursor: pointer;
-      filter: drop-shadow(0 10px 24px rgba(15, 23, 42, 0.22));
-      transition: transform 120ms ease, filter 120ms ease;
+      transition: transform 120ms ease;
     }
 
     [data-einblick-brand-badge]:hover {
       transform: translateY(-1px) scale(1.04);
-      filter: drop-shadow(0 12px 28px rgba(15, 23, 42, 0.28));
     }
 
     [data-einblick-brand-badge]:focus-visible {
-      outline: 2px solid ${EINBLICK_ACCENT_BORDER};
+      outline: 2px solid ${EINBLICK_ACCENT_COLOR};
       outline-offset: 4px;
       border-radius: 999px;
     }
@@ -212,7 +276,6 @@ function injectRuntimeStyles() {
       color: rgb(15, 23, 42);
       border-radius: 1.25rem;
       padding: 1rem;
-      box-shadow: 0 22px 56px rgba(15, 23, 42, 0.2);
       backdrop-filter: blur(18px);
       box-sizing: border-box;
     }
@@ -262,7 +325,8 @@ function injectRuntimeStyles() {
       display: inline-flex;
       align-items: center;
       border-radius: 999px;
-      background: rgba(${EINBLICK_ACCENT_RGB}, 0.12);
+      background: transparent;
+      background: ${EINBLICK_ACCENT_TINT};
       color: ${EINBLICK_ACCENT_COLOR};
       padding: 0.32rem 0.58rem;
       font: 600 0.74rem/1 system-ui, sans-serif;
@@ -311,7 +375,8 @@ function injectRuntimeStyles() {
 
     [data-einblick-brand-popover-action="primary"]:hover {
       border-color: ${EINBLICK_ACCENT_COLOR};
-      background: rgb(237, 92, 49);
+      background: ${EINBLICK_ACCENT_COLOR};
+      background: ${EINBLICK_ACCENT_HOVER_COLOR};
     }
 
     [data-einblick-inline-editing="true"] {
@@ -337,7 +402,6 @@ function injectRuntimeStyles() {
       width: min(46rem, 100vw);
       background: rgb(255, 255, 255);
       border-left: 1px solid rgba(148, 163, 184, 0.35);
-      box-shadow: 0 24px 64px rgba(15, 23, 42, 0.26);
       overflow: hidden;
     }
 
@@ -359,7 +423,6 @@ function injectRuntimeStyles() {
       border-top: 1px solid rgba(148, 163, 184, 0.36);
       overflow: hidden;
       background: rgb(255, 255, 255);
-      box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.12);
       pointer-events: none;
       transform: translateY(100%);
       transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
@@ -396,6 +459,8 @@ class EinblickEditRuntime {
     reserveBottomSpace;
     locale;
     messages;
+    accentColor;
+    originalRootAccentColor;
     bridgeNonce = createRandomId();
     session;
     state = {
@@ -409,7 +474,6 @@ class EinblickEditRuntime {
     activeElement = null;
     hoverButtonContainer = null;
     hoverButton = null;
-    hoverCreateButton = null;
     quickFieldOverlayContainer = null;
     quickFieldOverlays = [];
     brandBadge = null;
@@ -455,6 +519,7 @@ class EinblickEditRuntime {
             options.reserveBottomSpace ?? this.chrome === 'bar';
         this.locale = resolveEinblickSdkLocale(options.locale);
         this.messages = getEinblickSdkMessages(this.locale);
+        this.accentColor = normalizeAccentColor(options.accentColor);
         this.session =
             options.initialSession && !isEditSessionExpired(options.initialSession)
                 ? options.initialSession
@@ -475,6 +540,43 @@ class EinblickEditRuntime {
         this.messages = getEinblickSdkMessages(nextLocale);
         this.refreshLocalizedUi();
     }
+    setAccentColor(accentColor) {
+        const nextAccentColor = normalizeAccentColor(accentColor);
+        if (nextAccentColor === this.accentColor) {
+            return;
+        }
+        this.accentColor = nextAccentColor;
+        this.applyAccentColor();
+    }
+    applyAccentColor() {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        if (!this.accentColor) {
+            this.restoreAccentColor();
+            return;
+        }
+        const root = document.documentElement;
+        if (this.originalRootAccentColor === undefined) {
+            this.originalRootAccentColor =
+                root.style.getPropertyValue(EINBLICK_ACCENT_COLOR_VAR) || null;
+        }
+        root.style.setProperty(EINBLICK_ACCENT_COLOR_VAR, this.accentColor);
+    }
+    restoreAccentColor() {
+        if (typeof document === 'undefined' ||
+            this.originalRootAccentColor === undefined) {
+            return;
+        }
+        const root = document.documentElement;
+        if (this.originalRootAccentColor) {
+            root.style.setProperty(EINBLICK_ACCENT_COLOR_VAR, this.originalRootAccentColor);
+        }
+        else {
+            root.style.removeProperty(EINBLICK_ACCENT_COLOR_VAR);
+        }
+        this.originalRootAccentColor = undefined;
+    }
     start() {
         if (this.started ||
             typeof window === 'undefined' ||
@@ -482,6 +584,7 @@ class EinblickEditRuntime {
             return;
         }
         this.started = true;
+        this.applyAccentColor();
         injectRuntimeStyles();
         this.ensureHoverButton();
         if (this.chrome === 'badge') {
@@ -493,6 +596,7 @@ class EinblickEditRuntime {
         window.addEventListener('message', this.handleMessage);
         window.addEventListener('pointerdown', this.handleGlobalPointerDown, true);
         window.addEventListener('pointermove', this.handlePointerMove, true);
+        window.addEventListener('click', this.handleCollectionCreateButtonClick, true);
         window.addEventListener('scroll', this.handleViewportChange, true);
         window.addEventListener('resize', this.handleViewportChange);
         window.addEventListener('blur', this.handleWindowBlur);
@@ -508,12 +612,14 @@ class EinblickEditRuntime {
                 this.closeInlineEditor();
             }
             this.updateBottomBarResources();
+            this.updateCollectionCreateButtons();
         });
         this.mutationObserver.observe(document.body, {
             childList: true,
             subtree: true,
         });
         this.reloadBridge();
+        this.updateCollectionCreateButtons();
     }
     destroy() {
         if (this.destroyed) {
@@ -524,6 +630,7 @@ class EinblickEditRuntime {
         window.removeEventListener('message', this.handleMessage);
         window.removeEventListener('pointerdown', this.handleGlobalPointerDown, true);
         window.removeEventListener('pointermove', this.handlePointerMove, true);
+        window.removeEventListener('click', this.handleCollectionCreateButtonClick, true);
         window.removeEventListener('scroll', this.handleViewportChange, true);
         window.removeEventListener('resize', this.handleViewportChange);
         window.removeEventListener('blur', this.handleWindowBlur);
@@ -543,8 +650,6 @@ class EinblickEditRuntime {
         this.hoverButtonContainer = null;
         this.hoverButton?.remove();
         this.hoverButton = null;
-        this.hoverCreateButton?.remove();
-        this.hoverCreateButton = null;
         this.clearQuickFieldOverlays();
         this.brandBadge?.remove();
         this.brandBadge = null;
@@ -567,6 +672,7 @@ class EinblickEditRuntime {
         this.closeInlineEditor();
         this.removeNavigatorPanel(false);
         this.closeDrawer();
+        this.restoreAccentColor();
         if (this.pendingLogin) {
             if (this.pendingLogin.closePollId !== null) {
                 window.clearInterval(this.pendingLogin.closePollId);
@@ -597,9 +703,6 @@ class EinblickEditRuntime {
         if (this.hoverButton) {
             this.updateHoverButtonLabel();
         }
-        if (this.hoverCreateButton) {
-            this.hoverCreateButton.textContent = this.messages.actions.addRecord;
-        }
         if (this.brandBadge) {
             this.brandBadge.setAttribute('aria-label', this.messages.brand.quickActionsLabel);
             this.brandBadge.title = this.messages.brand.quickActionsLabel;
@@ -616,6 +719,7 @@ class EinblickEditRuntime {
         }
         this.updateBrandPopover();
         this.updateBottomBar();
+        this.updateCollectionCreateButtons();
         this.updateHoverChrome();
     }
     async login(options) {
@@ -743,22 +847,31 @@ class EinblickEditRuntime {
             !this.shouldShowEditButton(this.activeElement, binding)) {
             return;
         }
+        if (binding.fieldKey && isMultiMediaBinding(binding)) {
+            this.openDrawer(this.activeElement, binding);
+            return;
+        }
         if (binding.fieldKey && isMediaEditableBinding(binding)) {
             this.openMediaPicker(this.activeElement, binding, this.hoverButton);
             return;
         }
         this.openEditor(binding, this.activeElement);
     };
-    handleCreateButtonClick = (event) => {
+    handleCollectionCreateButtonClick = (event) => {
+        const button = this.findCollectionCreateButton(event.target);
+        if (!button) {
+            return;
+        }
         stopEvent(event);
-        if (!this.activeElement) {
+        const collection = this.findCollectionForCreateButton(button);
+        if (!collection) {
             return;
         }
-        const binding = readBindingFromElement(this.activeElement);
-        if (!binding || !this.shouldShowCreateButton(this.activeElement, binding)) {
+        const binding = readBindingFromElement(collection);
+        if (!binding || !this.shouldShowCreateButton(collection, binding)) {
             return;
         }
-        this.openDrawer(this.activeElement, binding, 'create');
+        this.openDrawer(collection, binding, 'create');
     };
     handleGlobalPointerDown = (event) => {
         const target = event.target;
@@ -1044,6 +1157,7 @@ class EinblickEditRuntime {
         this.updateBrandBadge();
         this.updateBrandPopover();
         this.updateBottomBar();
+        this.updateCollectionCreateButtons();
         if (!nextState.isAuthenticated) {
             this.setActiveElement(null);
             this.removeNavigatorPanel();
@@ -1058,26 +1172,18 @@ class EinblickEditRuntime {
         container.hidden = true;
         const editButton = document.createElement('button');
         editButton.type = 'button';
-        editButton.textContent = this.messages.actions.editElement;
+        setOverlayButtonContent(editButton, this.messages.actions.editElement, {
+            databaseIcon: true,
+        });
         editButton.setAttribute('data-einblick-edit-button', 'true');
         editButton.addEventListener('pointerdown', (event) => {
             event.stopPropagation();
         });
         editButton.addEventListener('click', this.handleHoverButtonClick);
-        const createButton = document.createElement('button');
-        createButton.type = 'button';
-        createButton.textContent = this.messages.actions.addRecord;
-        createButton.hidden = true;
-        createButton.setAttribute('data-einblick-create-button', 'true');
-        createButton.addEventListener('pointerdown', (event) => {
-            event.stopPropagation();
-        });
-        createButton.addEventListener('click', this.handleCreateButtonClick);
-        container.append(editButton, createButton);
+        container.append(editButton);
         document.body.append(container);
         this.hoverButtonContainer = container;
         this.hoverButton = editButton;
-        this.hoverCreateButton = createButton;
     }
     ensureBrandBadge() {
         if ((this.brandBadge && this.brandPopover) ||
@@ -1254,7 +1360,7 @@ class EinblickEditRuntime {
         border: 0;
         border-radius: 0.35rem;
         background: #ffffff;
-        color: #fa693e;
+        color: ${EINBLICK_ACCENT_COLOR};
         padding: 0 0.7rem;
         font: 700 0.78rem/1 system-ui, sans-serif;
         letter-spacing: 0;
@@ -1281,11 +1387,6 @@ class EinblickEditRuntime {
         outline-offset: 2px;
       }
 
-      .secondary {
-        border-color: transparent;
-        background: transparent;
-      }
-
       .menu {
         position: absolute;
         right: 0.5rem;
@@ -1299,7 +1400,6 @@ class EinblickEditRuntime {
         border-radius: 0.75rem;
         background: rgb(255, 255, 255);
         color: rgb(15, 23, 42);
-        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
         overflow: hidden;
       }
 
@@ -1367,7 +1467,7 @@ class EinblickEditRuntime {
         resourceList.className = 'resources';
         const moreButton = document.createElement('button');
         moreButton.type = 'button';
-        moreButton.className = 'secondary icon-button';
+        moreButton.className = 'icon-button';
         moreButton.setAttribute('aria-haspopup', 'menu');
         moreButton.title = this.messages.actions.moreActions;
         moreButton.innerHTML = getMoreActionsSvg(20);
@@ -1741,9 +1841,6 @@ class EinblickEditRuntime {
             if (this.hoverButton) {
                 this.hoverButton.hidden = true;
             }
-            if (this.hoverCreateButton) {
-                this.hoverCreateButton.hidden = true;
-            }
             return;
         }
         element.dataset.einblickHoverActive = 'true';
@@ -1779,6 +1876,10 @@ class EinblickEditRuntime {
         }
         this.updateHoverButtonLabel();
         this.updateHoverButtonVisibility(this.activeElement);
+        if (this.hoverButtonContainer?.hidden) {
+            this.updateQuickFieldOverlayPositions();
+            return;
+        }
         this.positionHoverControls(rect);
         this.updateQuickFieldOverlayPositions();
     }
@@ -1827,10 +1928,9 @@ class EinblickEditRuntime {
             const button = document.createElement('button');
             button.type = 'button';
             button.setAttribute('data-einblick-field-button', isMediaBinding ? 'media' : 'text');
-            button.textContent =
-                isMediaBinding
-                    ? getMediaActionLabel(binding, this.messages)
-                    : this.messages.actions.editText;
+            setOverlayButtonContent(button, isMediaBinding
+                ? getMediaActionLabel(binding, this.messages)
+                : this.messages.actions.editText);
             button.addEventListener('pointerdown', (event) => {
                 event.stopPropagation();
             });
@@ -1872,8 +1972,37 @@ class EinblickEditRuntime {
             const height = overlay.button.offsetHeight || 26;
             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));
+            let left = clamp(rect.right + scrollX - width, scrollX, Math.max(scrollX, scrollX + window.innerWidth - width));
+            let top = clamp(rect.top + scrollY, scrollY, Math.max(scrollY, scrollY + window.innerHeight - height));
+            const hoverControlsRect = this.hoverButtonContainer && !this.hoverButtonContainer.hidden
+                ? this.hoverButtonContainer.getBoundingClientRect()
+                : null;
+            if (hoverControlsRect) {
+                const candidateRect = {
+                    left: left - scrollX,
+                    top: top - scrollY,
+                    right: left - scrollX + width,
+                    bottom: top - scrollY + height,
+                };
+                if (rectsOverlap(candidateRect, hoverControlsRect, 6)) {
+                    const minTop = scrollY;
+                    const maxTop = Math.max(scrollY, scrollY + window.innerHeight - height);
+                    const belowTop = hoverControlsRect.bottom + scrollY + 6;
+                    const aboveTop = hoverControlsRect.top + scrollY - height - 6;
+                    if (belowTop <= maxTop) {
+                        top = clamp(belowTop, minTop, maxTop);
+                    }
+                    else if (aboveTop >= minTop) {
+                        top = clamp(aboveTop, minTop, maxTop);
+                    }
+                    else {
+                        const maxLeft = Math.max(scrollX, scrollX + window.innerWidth - width);
+                        const leftOfControls = hoverControlsRect.left + scrollX - width - 6;
+                        const rightOfControls = hoverControlsRect.right + scrollX + 6;
+                        left = clamp(leftOfControls >= scrollX ? leftOfControls : rightOfControls, scrollX, maxLeft);
+                    }
+                }
+            }
             overlay.button.style.left = `${Math.round(left)}px`;
             overlay.button.style.top = `${Math.round(top)}px`;
         }
@@ -1884,14 +2013,19 @@ class EinblickEditRuntime {
         }
         const binding = readBindingFromElement(this.activeElement);
         if (!binding?.fieldKey) {
-            this.hoverButton.textContent = this.messages.actions.editElement;
+            setOverlayButtonContent(this.hoverButton, this.messages.actions.editElement, { databaseIcon: true });
             return;
         }
-        this.hoverButton.textContent = isMediaEditableBinding(binding)
+        const opensDrawer = isMultiMediaBinding(binding) ||
+            (!isMediaEditableBinding(binding) && !shouldUseInlineEditor(binding));
+        const label = isMediaEditableBinding(binding)
             ? getMediaActionLabel(binding, this.messages)
             : shouldUseInlineEditor(binding)
                 ? this.messages.actions.editText
-                : this.messages.actions.edit;
+                : this.messages.actions.editElement;
+        setOverlayButtonContent(this.hoverButton, label, {
+            databaseIcon: opensDrawer,
+        });
     }
     reloadBridge() {
         this.clearBridgePing();
@@ -2013,16 +2147,51 @@ class EinblickEditRuntime {
         return url.toString();
     }
     updateHoverButtonVisibility(element) {
-        if (!this.hoverButton || !this.hoverCreateButton) {
+        if (!this.hoverButton) {
             return;
         }
         const binding = element ? readBindingFromElement(element) : null;
-        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;
+            this.hoverButtonContainer.hidden = !canEdit;
+        }
+    }
+    findCollectionCreateButton(target) {
+        const element = target instanceof Element
+            ? target
+            : target instanceof Node
+                ? target.parentElement
+                : null;
+        if (!element) {
+            return null;
+        }
+        return element.closest('[data-einblick-collection-create-button="true"]');
+    }
+    findCollectionForCreateButton(button) {
+        return button.closest('[data-einblick-editable="true"][data-einblick-kind="collection"]');
+    }
+    updateCollectionCreateButtons() {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        const buttons = Array.from(document.querySelectorAll('[data-einblick-collection-create-button="true"]'));
+        for (const button of buttons) {
+            const label = button.dataset.einblickCollectionCreateLabel?.trim() ||
+                this.messages.actions.addRecord;
+            setOverlayButtonContent(button, label, { databaseIcon: true });
+            button.type = 'button';
+            const collection = this.findCollectionForCreateButton(button);
+            const binding = collection ? readBindingFromElement(collection) : null;
+            const isVisible = !!collection &&
+                !!binding &&
+                this.shouldShowCreateButton(collection, binding);
+            button.hidden = !isVisible;
+            button.disabled = !isVisible;
+            const wrapper = button.closest('[data-einblick-collection-create-wrapper="true"]');
+            if (wrapper) {
+                wrapper.hidden = !isVisible;
+            }
         }
     }
     shouldShowEditButton(element, binding) {
@@ -2038,7 +2207,10 @@ class EinblickEditRuntime {
         if (binding.fieldKey) {
             return false;
         }
-        return element.dataset.einblickKind === 'collection';
+        if (element.dataset.einblickKind !== 'collection') {
+            return false;
+        }
+        return true;
     }
     findEditableTarget(target) {
         if (!(target instanceof Element)) {
@@ -2076,9 +2248,7 @@ class EinblickEditRuntime {
             return [];
         }
         if (binding.fieldKey) {
-            return shouldUseInlineEditor(binding) || isMediaEditableBinding(binding)
-                ? [element]
-                : [];
+            return [];
         }
         if (!binding.recordId) {
             return [];
@@ -2109,7 +2279,8 @@ class EinblickEditRuntime {
             !!this.brandBadge?.contains(target) ||
             !!this.brandPopover?.contains(target) ||
             !!this.bottomBarHost?.contains(target) ||
-            !!this.bottomBarMoreMenu?.contains(target));
+            !!this.bottomBarMoreMenu?.contains(target) ||
+            !!this.findCollectionCreateButton(target));
     }
     findElementForBinding(binding) {
         const selector = [
@@ -2361,18 +2532,21 @@ class EinblickEditRuntime {
             this.callbacks.onError?.(this.messages.errors.fieldBindingRequired);
             return;
         }
+        if (isMultiMediaBinding(binding)) {
+            this.openDrawer(target, binding);
+            return;
+        }
         const input = document.createElement('input');
         input.type = 'file';
         input.accept = getMediaAcceptValue(binding);
         input.style.position = 'fixed';
         input.style.left = '-9999px';
         input.style.top = '0';
-        const previousText = button?.textContent ?? '';
+        const buttonLabel = getMediaActionLabel(binding, this.messages);
         const resetButton = () => {
             if (button) {
                 button.disabled = false;
-                button.textContent =
-                    previousText || getMediaActionLabel(binding, this.messages);
+                setOverlayButtonContent(button, buttonLabel);
             }
         };
         input.addEventListener('change', () => {
@@ -2383,7 +2557,7 @@ class EinblickEditRuntime {
             }
             if (button) {
                 button.disabled = true;
-                button.textContent = this.messages.actions.uploading;
+                setOverlayButtonContent(button, this.messages.actions.uploading);
             }
             void (async () => {
                 try {
@@ -2648,6 +2822,7 @@ export function createEinblickEditRuntime(options) {
         login: (loginOptions) => runtime.login(loginOptions),
         openEditor: (binding, element) => runtime.openEditor(binding, element),
         setLocale: (locale) => runtime.setLocale(locale),
+        setAccentColor: (accentColor) => runtime.setAccentColor(accentColor),
     };
 }
 //# sourceMappingURL=runtime.js.map