@einblick/sdk 0.6.4 → 0.7.2

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,12 +42,40 @@ 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') {
+    if (typeof crypto === 'undefined') {
+        throw new Error('Secure browser randomness is unavailable');
+    }
+    if (typeof crypto.randomUUID === 'function') {
         return crypto.randomUUID();
     }
-    return Math.random().toString(36).slice(2);
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    return Array.from(bytes, (byte) => byte.toString(16).padStart(2, '0')).join('');
 }
 function stopEvent(event) {
     event.preventDefault();
@@ -54,6 +84,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 +115,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 +161,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 +180,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 +234,6 @@ function injectRuntimeStyles() {
       position: absolute;
       z-index: 2147483644;
       pointer-events: auto;
-      font-size: 11px;
-      min-height: 1.65rem;
     }
 
     [data-einblick-brand-badge] {
@@ -182,17 +252,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 +280,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 +329,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 +379,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 +406,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 +427,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);
@@ -394,10 +461,14 @@ class EinblickEditRuntime {
     callbacks;
     chrome;
     reserveBottomSpace;
+    persist;
     locale;
     messages;
+    accentColor;
+    originalRootAccentColor;
     bridgeNonce = createRandomId();
     session;
+    brokerId = null;
     state = {
         enabled: true,
         active: true,
@@ -409,7 +480,6 @@ class EinblickEditRuntime {
     activeElement = null;
     hoverButtonContainer = null;
     hoverButton = null;
-    hoverCreateButton = null;
     quickFieldOverlayContainer = null;
     quickFieldOverlays = [];
     brandBadge = null;
@@ -436,6 +506,7 @@ class EinblickEditRuntime {
     currentInlineRestoreState = null;
     inlineSaveInFlight = null;
     editorBackdrop = null;
+    editorFrame = null;
     editorNonce = null;
     editorTarget = null;
     editorBinding = null;
@@ -453,8 +524,10 @@ class EinblickEditRuntime {
         this.chrome = options.chrome ?? 'bar';
         this.reserveBottomSpace =
             options.reserveBottomSpace ?? this.chrome === 'bar';
+        this.persist = options.persist ?? true;
         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 +548,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 +592,7 @@ class EinblickEditRuntime {
             return;
         }
         this.started = true;
+        this.applyAccentColor();
         injectRuntimeStyles();
         this.ensureHoverButton();
         if (this.chrome === 'badge') {
@@ -493,6 +604,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 +620,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 +638,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 +658,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 +680,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 +711,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,12 +727,19 @@ class EinblickEditRuntime {
         }
         this.updateBrandPopover();
         this.updateBottomBar();
+        this.updateCollectionCreateButtons();
         this.updateHoverChrome();
     }
     async login(options) {
         if (typeof window === 'undefined') {
             return false;
         }
+        if (!this.brokerId) {
+            const message = this.messages.errors.bridgeNotConnected;
+            this.callbacks.onError?.(message);
+            this.pingBridge();
+            return false;
+        }
         const returnTo = options?.returnTo ?? window.location.href;
         const loginNonce = createRandomId();
         const loginUrl = this.buildBridgeUrl({
@@ -743,22 +861,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;
@@ -806,14 +933,24 @@ class EinblickEditRuntime {
             return;
         }
         if (data.source === EINBLICK_BRIDGE_SOURCE) {
+            if (event.source !== this.bridgeFrame?.contentWindow) {
+                return;
+            }
             this.handleBridgeMessage(data);
             return;
         }
         if (data.source === EINBLICK_AUTH_SOURCE) {
+            if (event.source !== this.pendingLogin?.popup) {
+                return;
+            }
             this.handleAuthMessage(data);
             return;
         }
         if (data.source === EINBLICK_EDITOR_SOURCE) {
+            if (event.source !== this.editorFrame?.contentWindow &&
+                event.source !== this.navigatorFrame?.contentWindow) {
+                return;
+            }
             this.handleEditorMessage(data);
         }
     };
@@ -823,7 +960,9 @@ class EinblickEditRuntime {
         }
         if (message.type === 'bridge-ready') {
             this.clearBridgePing();
+            this.brokerId = message.brokerId ?? this.brokerId;
             if (message.authenticated) {
+                this.setSession({ active: true, expiresAt: message.expiresAt });
                 this.setState({
                     enabled: true,
                     active: true,
@@ -851,6 +990,26 @@ class EinblickEditRuntime {
             }
             return;
         }
+        if (message.type === 'broker-proof-result') {
+            const pending = this.pendingLogin;
+            if (!pending ||
+                message.requestId !== pending.nonce ||
+                message.brokerId !== this.brokerId) {
+                return;
+            }
+            try {
+                pending.popup?.postMessage({
+                    source: EINBLICK_AUTH_SOURCE,
+                    type: 'broker-proof-result',
+                    nonce: pending.nonce,
+                    requestId: message.requestId,
+                    brokerId: message.brokerId,
+                    ciphertext: message.ciphertext,
+                }, this.appOrigin);
+            }
+            catch { }
+            return;
+        }
         if (message.type === 'logout-result') {
             const pending = this.pendingLogout;
             if (!pending || pending.requestId !== message.requestId) {
@@ -898,28 +1057,43 @@ class EinblickEditRuntime {
         if (!this.pendingLogin || message.nonce !== this.pendingLogin.nonce) {
             return;
         }
+        if (message.type === 'broker-proof-request') {
+            if (message.requestId !== this.pendingLogin.nonce ||
+                message.brokerId !== this.brokerId ||
+                !this.bridgeFrame?.contentWindow) {
+                return;
+            }
+            try {
+                this.bridgeFrame.contentWindow.postMessage({
+                    source: EINBLICK_PARENT_SOURCE,
+                    type: 'broker-proof-request',
+                    nonce: this.bridgeNonce,
+                    requestId: message.requestId,
+                    brokerId: message.brokerId,
+                    publicKey: message.publicKey,
+                }, this.appOrigin);
+            }
+            catch { }
+            return;
+        }
         if (this.pendingLogin.closePollId !== null) {
             window.clearInterval(this.pendingLogin.closePollId);
         }
         const pending = this.pendingLogin;
         this.pendingLogin = null;
         if (message.ok) {
-            if (!message.sessionToken) {
+            if (!message.brokerId || message.brokerId !== this.brokerId) {
                 const errorMessage = this.messages.errors.signInDidNotReturnSession;
                 this.setState({ ...this.state, errorMessage, status: 'error' });
                 this.callbacks.onError?.(errorMessage);
                 pending.resolve(false);
                 return;
             }
-            this.setSession({
-                sessionToken: message.sessionToken,
-                expiresAt: message.expiresAt,
-            });
             try {
                 pending.popup?.close();
             }
             catch { }
-            this.reloadBridge();
+            this.pingBridge();
             pending.resolve(true);
             return;
         }
@@ -1020,30 +1194,20 @@ class EinblickEditRuntime {
         }
     }
     setSession(session) {
-        const previousSessionToken = this.session?.sessionToken ?? null;
+        const wasActive = this.session !== null;
         this.session = session && !isEditSessionExpired(session) ? session : null;
-        const nextSessionToken = this.session?.sessionToken ?? null;
-        if (previousSessionToken !== nextSessionToken) {
+        if (wasActive !== (this.session !== null)) {
             this.removeNavigatorPanel(false);
         }
         this.callbacks.onSessionChange(this.session);
     }
-    getActiveSessionToken() {
-        if (!this.session) {
-            return null;
-        }
-        if (isEditSessionExpired(this.session)) {
-            this.setSession(null);
-            return null;
-        }
-        return this.session.sessionToken;
-    }
     setState(nextState) {
         this.state = nextState;
         this.callbacks.onStateChange(nextState);
         this.updateBrandBadge();
         this.updateBrandPopover();
         this.updateBottomBar();
+        this.updateCollectionCreateButtons();
         if (!nextState.isAuthenticated) {
             this.setActiveElement(null);
             this.removeNavigatorPanel();
@@ -1058,26 +1222,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 +1410,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;
@@ -1294,7 +1450,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;
       }
 
@@ -1634,10 +1789,15 @@ class EinblickEditRuntime {
         }
     }
     async logoutFromEinblick() {
+        await this.endEditSession(true);
+    }
+    async deactivateEditSession() {
+        await this.endEditSession(false);
+    }
+    async endEditSession(signOut) {
         if (typeof window === 'undefined') {
             return;
         }
-        const sessionToken = this.getActiveSessionToken();
         this.setSession(null);
         this.setState({
             enabled: true,
@@ -1647,13 +1807,13 @@ class EinblickEditRuntime {
             siteName: this.state.siteName,
             errorMessage: undefined,
         });
-        const loggedOutViaBridge = await this.requestBridgeLogout();
+        const loggedOutViaBridge = await this.requestBridgeLogout(signOut);
         if (!loggedOutViaBridge) {
-            await this.logoutViaPopup(sessionToken);
+            await this.logoutViaPopup(signOut);
         }
         this.reloadBridge();
     }
-    requestBridgeLogout() {
+    requestBridgeLogout(signOut) {
         if (typeof window === 'undefined' || this.pendingLogout) {
             return Promise.resolve(false);
         }
@@ -1677,6 +1837,7 @@ class EinblickEditRuntime {
                     type: 'logout',
                     nonce: this.bridgeNonce,
                     requestId,
+                    signOut,
                 }, this.appOrigin);
             }
             catch {
@@ -1688,12 +1849,12 @@ class EinblickEditRuntime {
             }
         });
     }
-    async logoutViaPopup(sessionToken) {
+    async logoutViaPopup(signOut) {
         const logoutUrl = this.buildBridgeUrl({
             mode: 'logout',
             nonce: createRandomId(),
             returnTo: window.location.href,
-            sessionToken,
+            signOut,
         });
         let popup = null;
         try {
@@ -1736,9 +1897,6 @@ class EinblickEditRuntime {
             if (this.hoverButton) {
                 this.hoverButton.hidden = true;
             }
-            if (this.hoverCreateButton) {
-                this.hoverCreateButton.hidden = true;
-            }
             return;
         }
         element.dataset.einblickHoverActive = 'true';
@@ -1774,6 +1932,10 @@ class EinblickEditRuntime {
         }
         this.updateHoverButtonLabel();
         this.updateHoverButtonVisibility(this.activeElement);
+        if (this.hoverButtonContainer?.hidden) {
+            this.updateQuickFieldOverlayPositions();
+            return;
+        }
         this.positionHoverControls(rect);
         this.updateQuickFieldOverlayPositions();
     }
@@ -1822,10 +1984,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();
             });
@@ -1867,8 +2028,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`;
         }
@@ -1879,14 +2069,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();
@@ -1907,23 +2102,22 @@ class EinblickEditRuntime {
         frame.src = this.buildBridgeUrl({ mode: 'bridge', nonce: this.bridgeNonce });
         this.bridgeFrame = frame;
         document.body.append(frame);
-        const sendPing = () => {
-            if (!this.bridgeFrame?.contentWindow) {
-                return;
-            }
-            try {
-                this.bridgeFrame.contentWindow.postMessage({
-                    source: EINBLICK_PARENT_SOURCE,
-                    type: 'bridge-ping',
-                    nonce: this.bridgeNonce,
-                }, this.appOrigin);
-            }
-            catch { }
-        };
         frame.addEventListener('load', () => {
-            sendPing();
+            this.pingBridge();
         });
-        this.bridgePingInterval = window.setInterval(sendPing, 1500);
+        this.bridgePingInterval = window.setInterval(() => this.pingBridge(), 1500);
+    }
+    pingBridge() {
+        if (!this.bridgeFrame?.contentWindow)
+            return;
+        try {
+            this.bridgeFrame.contentWindow.postMessage({
+                source: EINBLICK_PARENT_SOURCE,
+                type: 'bridge-ping',
+                nonce: this.bridgeNonce,
+            }, this.appOrigin);
+        }
+        catch { }
     }
     clearBridgePing() {
         if (this.bridgePingInterval !== null) {
@@ -1936,28 +2130,33 @@ class EinblickEditRuntime {
         url.searchParams.set('siteKey', this.siteKey);
         url.searchParams.set('origin', window.location.origin);
         url.searchParams.set('nonce', args.nonce);
+        url.searchParams.set('protocol', '2');
+        url.searchParams.set('persist', this.persist ? '1' : '0');
         if (args.mode !== 'bridge') {
             url.searchParams.set('mode', args.mode);
         }
-        const sessionToken = args.sessionToken ??
-            (args.mode === 'bridge' ? this.getActiveSessionToken() : null);
-        if (sessionToken) {
-            url.searchParams.set('sessionToken', sessionToken);
+        const brokerId = args.brokerId ?? (args.mode === 'login' ? this.brokerId : null);
+        if (brokerId) {
+            url.searchParams.set('brokerId', brokerId);
         }
         if (args.returnTo) {
             url.searchParams.set('returnTo', args.returnTo);
         }
+        if (args.signOut === false) {
+            url.searchParams.set('signOut', '0');
+        }
         return url.toString();
     }
     buildEditorUrl(binding, nonce, intent = 'edit') {
-        const sessionToken = this.getActiveSessionToken();
-        if (!sessionToken) {
+        if (!this.session || isEditSessionExpired(this.session)) {
             throw new Error(this.messages.errors.editSessionExpired);
         }
         const url = new URL('/sdk/editor', this.appOrigin);
         url.searchParams.set('origin', window.location.origin);
         url.searchParams.set('nonce', nonce);
-        url.searchParams.set('sessionToken', sessionToken);
+        url.searchParams.set('siteKey', this.siteKey);
+        url.searchParams.set('protocol', '2');
+        url.searchParams.set('persist', this.persist ? '1' : '0');
         url.searchParams.set('returnTo', window.location.href);
         url.searchParams.set('sourceType', binding.sourceType ?? 'cms');
         url.searchParams.set('resourceSlug', binding.resourceSlug);
@@ -1976,25 +2175,27 @@ class EinblickEditRuntime {
         return url.toString();
     }
     buildNavigatorUrl(nonce) {
-        const sessionToken = this.getActiveSessionToken();
-        if (!sessionToken) {
+        if (!this.session || isEditSessionExpired(this.session)) {
             throw new Error(this.messages.errors.editSessionExpired);
         }
         const url = new URL('/sdk/navigator', this.appOrigin);
         url.searchParams.set('origin', window.location.origin);
         url.searchParams.set('nonce', nonce);
-        url.searchParams.set('sessionToken', sessionToken);
+        url.searchParams.set('siteKey', this.siteKey);
+        url.searchParams.set('protocol', '2');
+        url.searchParams.set('persist', this.persist ? '1' : '0');
         return url.toString();
     }
     buildCollectionEditorUrl(args) {
-        const sessionToken = this.getActiveSessionToken();
-        if (!sessionToken) {
+        if (!this.session || isEditSessionExpired(this.session)) {
             throw new Error(this.messages.errors.editSessionExpired);
         }
         const url = new URL('/sdk/editor', this.appOrigin);
         url.searchParams.set('origin', window.location.origin);
         url.searchParams.set('nonce', args.nonce);
-        url.searchParams.set('sessionToken', sessionToken);
+        url.searchParams.set('siteKey', this.siteKey);
+        url.searchParams.set('protocol', '2');
+        url.searchParams.set('persist', this.persist ? '1' : '0');
         url.searchParams.set('returnTo', window.location.href);
         url.searchParams.set('sourceType', args.sourceType ?? 'cms');
         url.searchParams.set('collectionId', args.collectionId);
@@ -2008,16 +2209,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) {
@@ -2033,7 +2269,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)) {
@@ -2102,7 +2341,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 = [
@@ -2354,18 +2594,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', () => {
@@ -2376,7 +2619,7 @@ class EinblickEditRuntime {
             }
             if (button) {
                 button.disabled = true;
-                button.textContent = this.messages.actions.uploading;
+                setOverlayButtonContent(button, this.messages.actions.uploading);
             }
             void (async () => {
                 try {
@@ -2537,6 +2780,7 @@ class EinblickEditRuntime {
         });
         document.body.append(backdrop);
         this.editorBackdrop = backdrop;
+        this.editorFrame = iframe;
     }
     openCollectionDrawer(args) {
         if (!this.state.isAuthenticated) {
@@ -2593,6 +2837,7 @@ class EinblickEditRuntime {
         });
         document.body.append(backdrop);
         this.editorBackdrop = backdrop;
+        this.editorFrame = iframe;
     }
     isBottomBarMenuOpen() {
         return !!this.bottomBarMoreMenu && !this.bottomBarMoreMenu.hidden;
@@ -2608,6 +2853,7 @@ class EinblickEditRuntime {
     closeDrawer() {
         this.editorBackdrop?.remove();
         this.editorBackdrop = null;
+        this.editorFrame = null;
         this.editorNonce = null;
         this.editorTarget = null;
         this.editorBinding = null;
@@ -2639,8 +2885,11 @@ export function createEinblickEditRuntime(options) {
         start: () => runtime.start(),
         destroy: () => runtime.destroy(),
         login: (loginOptions) => runtime.login(loginOptions),
+        deactivate: () => runtime.deactivateEditSession(),
+        logout: () => runtime.logoutFromEinblick(),
         openEditor: (binding, element) => runtime.openEditor(binding, element),
         setLocale: (locale) => runtime.setLocale(locale),
+        setAccentColor: (accentColor) => runtime.setAccentColor(accentColor),
     };
 }
 //# sourceMappingURL=runtime.js.map