@einblick/sdk 0.5.3 → 0.5.5

package/dist/react/runtime.js

@@ -1,98 +1,10 @@
-import { EINBLICK_AUTH_SOURCE, EINBLICK_BRIDGE_SOURCE, EINBLICK_EDITOR_SOURCE, EINBLICK_PARENT_SOURCE, formatValueForText, isEditSessionExpired, readBindingFromElement, resolveAppOrigin, serializeBindingValue, shouldUseInlineEditor, } from './shared.js';
+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 RELATIVE_POSITION_SENTINEL = '__einblick_runtime_original_static__';
 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 CONTROL_BAR_HEIGHT = 44;
-const INLINE_EDITOR_SHADOW_STYLES = `
-  :host {
-    display: block;
-    width: 100%;
-    color: rgb(15, 23, 42);
-    font-family: system-ui, sans-serif;
-  }
-
-  *, *::before, *::after {
-    box-sizing: border-box;
-  }
-
-  [data-einblick-inline-shell] {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    width: 100%;
-    color: rgb(15, 23, 42);
-    font-family: system-ui, sans-serif;
-  }
-
-  [data-einblick-inline-control],
-  [data-einblick-inline-textarea],
-  [data-einblick-inline-select] {
-    appearance: none;
-    width: 100%;
-    min-width: 0;
-    margin: 0;
-    border-radius: 0.9rem;
-    border: 1px solid rgba(148, 163, 184, 0.6);
-    background: rgb(255, 255, 255);
-    padding: 0.75rem 0.9rem;
-    font: 400 0.95rem/1.5 system-ui, sans-serif;
-    color: rgb(15, 23, 42);
-    box-shadow: none;
-    letter-spacing: normal;
-    text-transform: none;
-    text-indent: 0;
-  }
-
-  [data-einblick-inline-control]:focus,
-  [data-einblick-inline-textarea]:focus,
-  [data-einblick-inline-select]:focus {
-    outline: 2px solid rgba(${EINBLICK_ACCENT_RGB}, 0.3);
-    outline-offset: 2px;
-    border-color: ${EINBLICK_ACCENT_COLOR};
-  }
-
-  [data-einblick-inline-textarea] {
-    min-height: 8rem;
-    resize: vertical;
-  }
-
-  [data-einblick-inline-actions] {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: 0.5rem;
-  }
-
-  [data-einblick-edit-action] {
-    appearance: none;
-    border: 1px solid rgba(148, 163, 184, 0.6);
-    background: rgb(255, 255, 255);
-    color: rgb(15, 23, 42);
-    border-radius: 999px;
-    padding: 0.65rem 1rem;
-    font: 600 0.9rem/1 system-ui, sans-serif;
-    cursor: pointer;
-  }
-
-  [data-einblick-edit-action]:disabled {
-    cursor: wait;
-    opacity: 0.72;
-  }
-
-  [data-einblick-edit-action="primary"] {
-    border-color: ${EINBLICK_ACCENT_COLOR};
-    background: ${EINBLICK_ACCENT_COLOR};
-    color: rgb(255, 255, 255);
-  }
-
-  [data-einblick-inline-error] {
-    font: 400 0.85rem/1.5 system-ui, sans-serif;
-    color: rgb(185, 28, 28);
-  }
-`;
 function getBrandBadgeSvg(size) {
     return `
     <svg viewBox="0 0 40 40" width="${size}" height="${size}" aria-hidden="true" focusable="false">
@@ -135,6 +47,32 @@ function createRandomId() {
     }
     return Math.random().toString(36).slice(2);
 }
+function stopEvent(event) {
+    event.preventDefault();
+    event.stopPropagation();
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function isTextInputEvent(event) {
+    return (event.key.length === 1 ||
+        event.key === 'Enter' ||
+        event.key === 'Backspace' ||
+        event.key === 'Delete');
+}
+function fieldTypeAllowsMultiline(binding) {
+    return binding.fieldType === 'text' || binding.fieldType === 'markdown';
+}
+function getMediaAcceptValue(binding) {
+    return binding.fieldType === 'image' || binding.fieldType === 'images'
+        ? 'image/*'
+        : '';
+}
+function getMediaActionLabel(binding, messages) {
+    return binding.fieldType === 'image' || binding.fieldType === 'images'
+        ? messages.actions.replaceImage
+        : messages.actions.replaceFile;
+}
 function injectRuntimeStyles() {
     if (typeof document === 'undefined') {
         return;
@@ -149,15 +87,27 @@ function injectRuntimeStyles() {
       scroll-margin-top: 96px;
     }
 
-    [data-einblick-editable-active="true"] {
-      outline: 2px solid ${EINBLICK_ACCENT_BORDER};
-      outline-offset: 4px;
+    [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-edit-outline] {
+      border: 1px solid ${EINBLICK_ACCENT_BORDER};
+      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
+    }
+
+    [data-einblick-edit-field-outline] {
+      border: 1px dashed rgba(${EINBLICK_ACCENT_RGB}, 0.78);
+      background: rgba(${EINBLICK_ACCENT_RGB}, 0.04);
     }
 
     [data-einblick-edit-controls] {
-      position: absolute;
-      top: 0.5rem;
-      right: 0.5rem;
+      position: fixed;
       z-index: 2147483644;
       display: inline-flex;
       align-items: center;
@@ -165,7 +115,8 @@ function injectRuntimeStyles() {
     }
 
     [data-einblick-edit-button],
-    [data-einblick-create-button] {
+    [data-einblick-create-button],
+    [data-einblick-field-button] {
       border: 1px solid ${EINBLICK_ACCENT_COLOR};
       border-radius: 999px;
       padding: 0.3rem 0.7rem;
@@ -175,22 +126,46 @@ function injectRuntimeStyles() {
       box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
     }
 
-    [data-einblick-edit-button] {
+    [data-einblick-edit-button],
+    [data-einblick-field-button="media"] {
       background: ${EINBLICK_ACCENT_COLOR};
       color: rgb(255, 255, 255);
     }
 
-    [data-einblick-create-button] {
+    [data-einblick-edit-button] {
+      padding: 0.42rem 0.85rem;
+      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]:hover,
-    [data-einblick-create-button]:hover {
+    [data-einblick-create-button]:hover,
+    [data-einblick-field-button]:hover {
       background: rgb(255, 255, 255);
       color: ${EINBLICK_ACCENT_COLOR};
     }
 
+    [data-einblick-field-overlays] {
+      position: fixed;
+      inset: 0;
+      z-index: 2147483644;
+      pointer-events: none;
+    }
+
+    [data-einblick-field-button] {
+      position: fixed;
+      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);
+    }
+
     [data-einblick-brand-badge] {
       position: fixed;
       right: 1rem;
@@ -340,64 +315,11 @@ function injectRuntimeStyles() {
     }
 
     [data-einblick-inline-editing="true"] {
-      outline: 2px solid ${EINBLICK_ACCENT_BORDER};
-      outline-offset: 4px;
-      border-radius: 1rem;
-      background: rgba(${EINBLICK_ACCENT_RGB}, 0.08);
-      padding: 0.8rem;
-    }
-
-    [data-einblick-inline-shell] {
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-      width: 100%;
-    }
-
-    [data-einblick-inline-control],
-    [data-einblick-inline-textarea],
-    [data-einblick-inline-select] {
-      width: 100%;
-      min-width: 0;
-      border-radius: 0.9rem;
-      border: 1px solid rgba(148, 163, 184, 0.6);
-      background: rgb(255, 255, 255);
-      padding: 0.75rem 0.9rem;
-      font: 400 0.95rem/1.5 system-ui, sans-serif;
-      color: inherit;
-      box-sizing: border-box;
-    }
-
-    [data-einblick-inline-textarea] {
-      min-height: 8rem;
-      resize: vertical;
-    }
-
-    [data-einblick-inline-actions] {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      gap: 0.5rem;
-    }
-
-    [data-einblick-edit-action] {
-      border-radius: 999px;
-      border: 1px solid rgba(148, 163, 184, 0.6);
-      background: rgb(255, 255, 255);
-      padding: 0.65rem 1rem;
-      font: 600 0.9rem/1 system-ui, sans-serif;
-      cursor: pointer;
-    }
-
-    [data-einblick-edit-action="primary"] {
-      border-color: ${EINBLICK_ACCENT_COLOR};
-      background: ${EINBLICK_ACCENT_COLOR};
-      color: rgb(255, 255, 255);
+      cursor: text;
     }
 
-    [data-einblick-inline-error] {
-      font: 400 0.85rem/1.5 system-ui, sans-serif;
-      color: rgb(185, 28, 28);
+    [data-einblick-inline-editing="true"]:focus {
+      outline: none;
     }
 
     [data-einblick-editor-backdrop] {
@@ -485,9 +407,12 @@ class EinblickEditRuntime {
     bridgeFrame = null;
     bridgePingInterval = null;
     activeElement = null;
+    activeOutline = null;
     hoverButtonContainer = null;
     hoverButton = null;
     hoverCreateButton = null;
+    quickFieldOverlayContainer = null;
+    quickFieldOverlays = [];
     brandBadge = null;
     brandPopover = null;
     brandPopoverSiteName = null;
@@ -510,6 +435,7 @@ class EinblickEditRuntime {
     currentInlineTarget = null;
     currentInlineBinding = null;
     currentInlineRestoreState = null;
+    inlineSaveInFlight = null;
     editorBackdrop = null;
     editorNonce = null;
     editorTarget = null;
@@ -519,7 +445,9 @@ class EinblickEditRuntime {
     navigatorNonce = null;
     navigatorOpen = false;
     pendingInlineSaves = new Map();
+    pendingInlineMediaSaves = new Map();
     pendingLogin = null;
+    pendingLogout = null;
     constructor(options) {
         this.siteKey = options.siteKey;
         this.appOrigin = resolveAppOrigin(options.appOrigin, options.appUrl);
@@ -603,15 +531,23 @@ class EinblickEditRuntime {
         this.mutationObserver?.disconnect();
         this.mutationObserver = null;
         this.clearBridgePing();
+        if (this.pendingLogout) {
+            window.clearTimeout(this.pendingLogout.timeoutId);
+            this.pendingLogout.resolve(false);
+            this.pendingLogout = null;
+        }
         this.bridgeFrame?.remove();
         this.bridgeFrame = null;
         this.setActiveElement(null);
+        this.activeOutline?.remove();
+        this.activeOutline = null;
         this.hoverButtonContainer?.remove();
         this.hoverButtonContainer = null;
         this.hoverButton?.remove();
         this.hoverButton = null;
         this.hoverCreateButton?.remove();
         this.hoverCreateButton = null;
+        this.clearQuickFieldOverlays();
         this.brandBadge?.remove();
         this.brandBadge = null;
         this.brandPopover?.remove();
@@ -645,6 +581,11 @@ class EinblickEditRuntime {
             pending.reject(new Error(this.messages.errors.editingInterrupted));
         }
         this.pendingInlineSaves.clear();
+        for (const pending of this.pendingInlineMediaSaves.values()) {
+            window.clearTimeout(pending.timeoutId);
+            pending.reject(new Error(this.messages.errors.editingInterrupted));
+        }
+        this.pendingInlineMediaSaves.clear();
         this.setState({
             enabled: true,
             active: false,
@@ -656,7 +597,7 @@ class EinblickEditRuntime {
     }
     refreshLocalizedUi() {
         if (this.hoverButton) {
-            this.hoverButton.textContent = this.messages.actions.edit;
+            this.updateHoverButtonLabel();
         }
         if (this.hoverCreateButton) {
             this.hoverCreateButton.textContent = this.messages.actions.addRecord;
@@ -677,6 +618,7 @@ class EinblickEditRuntime {
         }
         this.updateBrandPopover();
         this.updateBottomBar();
+        this.updateHoverChrome();
     }
     async login(options) {
         if (typeof window === 'undefined') {
@@ -738,13 +680,24 @@ class EinblickEditRuntime {
             this.setActiveElement(null);
             return;
         }
+        if (this.isSdkChromeTarget(event.target)) {
+            this.updateHoverChrome();
+            return;
+        }
         const target = this.findEditableTarget(event.target);
         this.setActiveElement(target);
     };
     handleViewportChange = () => {
+        if (this.currentInlineTarget?.isConnected) {
+            this.ensureActiveOutline();
+            this.positionOutline(this.activeOutline, this.currentInlineTarget);
+            return;
+        }
         if (this.activeElement && !this.activeElement.isConnected) {
             this.setActiveElement(null);
+            return;
         }
+        this.updateHoverChrome();
     };
     handleWindowBlur = () => {
         this.setBrandPopoverOpen(false);
@@ -785,8 +738,7 @@ class EinblickEditRuntime {
         this.setActiveElement(null);
     };
     handleHoverButtonClick = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
+        stopEvent(event);
         if (!this.activeElement) {
             return;
         }
@@ -794,11 +746,14 @@ class EinblickEditRuntime {
         if (!binding) {
             return;
         }
+        if (binding.fieldKey && isMediaEditableBinding(binding)) {
+            this.openMediaPicker(this.activeElement, binding, this.hoverButton);
+            return;
+        }
         this.openEditor(binding, this.activeElement);
     };
     handleCreateButtonClick = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
+        stopEvent(event);
         if (!this.activeElement) {
             return;
         }
@@ -815,6 +770,16 @@ class EinblickEditRuntime {
             this.setBottomBarMenuOpen(false);
             return;
         }
+        if (this.currentInlineTarget) {
+            if (this.currentInlineTarget.contains(target) ||
+                this.isSdkChromeTarget(target)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            void this.commitInlineEditor();
+            return;
+        }
         if (this.isBrandPopoverOpen() &&
             !this.brandBadge?.contains(target) &&
             !this.brandPopover?.contains(target)) {
@@ -889,6 +854,35 @@ class EinblickEditRuntime {
             }
             return;
         }
+        if (message.type === 'logout-result') {
+            const pending = this.pendingLogout;
+            if (!pending || pending.requestId !== message.requestId) {
+                return;
+            }
+            window.clearTimeout(pending.timeoutId);
+            this.pendingLogout = null;
+            if (!message.ok && message.message) {
+                this.callbacks.onError?.(message.message);
+            }
+            pending.resolve(message.ok);
+            return;
+        }
+        if (message.type === 'inline-media-result') {
+            const pending = this.pendingInlineMediaSaves.get(message.requestId);
+            if (!pending) {
+                return;
+            }
+            this.pendingInlineMediaSaves.delete(message.requestId);
+            window.clearTimeout(pending.timeoutId);
+            if (message.ok) {
+                pending.resolve({ fileId: message.fileId, value: message.value });
+                return;
+            }
+            const error = new Error(message.error || this.messages.errors.saveFieldFailed);
+            pending.reject(error);
+            this.callbacks.onError?.(error.message);
+            return;
+        }
         const pending = this.pendingInlineSaves.get(message.requestId);
         if (!pending) {
             return;
@@ -1060,16 +1054,23 @@ class EinblickEditRuntime {
         container.hidden = true;
         const editButton = document.createElement('button');
         editButton.type = 'button';
-        editButton.textContent = this.messages.actions.edit;
+        editButton.textContent = this.messages.actions.editElement;
         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);
+        document.body.append(container);
         this.hoverButtonContainer = container;
         this.hoverButton = editButton;
         this.hoverCreateButton = createButton;
@@ -1621,6 +1622,48 @@ class EinblickEditRuntime {
             siteName: this.state.siteName,
             errorMessage: undefined,
         });
+        const loggedOutViaBridge = await this.requestBridgeLogout();
+        if (!loggedOutViaBridge) {
+            await this.logoutViaPopup(sessionToken);
+        }
+        this.reloadBridge();
+    }
+    requestBridgeLogout() {
+        if (typeof window === 'undefined' || this.pendingLogout) {
+            return Promise.resolve(false);
+        }
+        const target = this.bridgeFrame?.contentWindow;
+        if (!target) {
+            return Promise.resolve(false);
+        }
+        const requestId = createRandomId();
+        return new Promise((resolve) => {
+            const timeoutId = window.setTimeout(() => {
+                if (this.pendingLogout?.requestId !== requestId) {
+                    return;
+                }
+                this.pendingLogout = null;
+                resolve(false);
+            }, 2500);
+            this.pendingLogout = { requestId, resolve, timeoutId };
+            try {
+                target.postMessage({
+                    source: EINBLICK_PARENT_SOURCE,
+                    type: 'logout',
+                    nonce: this.bridgeNonce,
+                    requestId,
+                }, this.appOrigin);
+            }
+            catch {
+                window.clearTimeout(timeoutId);
+                if (this.pendingLogout?.requestId === requestId) {
+                    this.pendingLogout = null;
+                }
+                resolve(false);
+            }
+        });
+    }
+    async logoutViaPopup(sessionToken) {
         const logoutUrl = this.buildBridgeUrl({
             mode: 'logout',
             nonce: createRandomId(),
@@ -1647,28 +1690,11 @@ class EinblickEditRuntime {
                 }
             }, 400);
         });
-        this.reloadBridge();
     }
     setActiveElement(element) {
         if (this.activeElement === element) {
-            if (this.hoverButtonContainer &&
-                element &&
-                !element.contains(this.hoverButtonContainer)) {
-                element.append(this.hoverButtonContainer);
-            }
-            this.updateHoverButtonVisibility(element);
-            return;
-        }
-        if (this.activeElement) {
-            this.activeElement.removeAttribute('data-einblick-editable-active');
-            const originalPosition = this.activeElement.dataset.einblickRuntimeOriginalPosition;
-            if (originalPosition !== undefined) {
-                this.activeElement.style.position =
-                    originalPosition === RELATIVE_POSITION_SENTINEL
-                        ? ''
-                        : originalPosition;
-                delete this.activeElement.dataset.einblickRuntimeOriginalPosition;
-            }
+            this.updateHoverChrome();
+            return;
         }
         this.activeElement = element;
         if (!element ||
@@ -1677,22 +1703,176 @@ class EinblickEditRuntime {
             !this.state.isAuthenticated) {
             if (this.hoverButtonContainer) {
                 this.hoverButtonContainer.hidden = true;
-                this.hoverButtonContainer.remove();
             }
+            this.activeOutline?.remove();
+            this.activeOutline = null;
+            this.clearQuickFieldOverlays();
             if (this.hoverCreateButton) {
                 this.hoverCreateButton.hidden = true;
             }
             return;
         }
-        element.setAttribute('data-einblick-editable-active', 'true');
-        if (window.getComputedStyle(element).position === 'static') {
-            element.dataset.einblickRuntimeOriginalPosition =
-                element.style.position || RELATIVE_POSITION_SENTINEL;
-            element.style.position = 'relative';
-        }
+        this.ensureActiveOutline();
+        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.hoverButtonContainer) {
+                this.hoverButtonContainer.hidden = true;
+            }
+            this.clearQuickFieldOverlays();
+            return;
+        }
+        if (!this.activeElement.isConnected) {
+            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) {
+            if (this.hoverButtonContainer) {
+                this.hoverButtonContainer.hidden = true;
+            }
+            this.clearQuickFieldOverlays();
+            return;
+        }
+        this.updateHoverButtonLabel();
+        this.updateHoverButtonVisibility(this.activeElement);
+        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;
+    }
+    positionHoverControls(rect) {
+        if (!this.hoverButtonContainer) {
+            return;
+        }
         this.hoverButtonContainer.hidden = false;
-        element.append(this.hoverButtonContainer);
+        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));
+        this.hoverButtonContainer.style.left = `${Math.round(left)}px`;
+        this.hoverButtonContainer.style.top = `${Math.round(top)}px`;
+    }
+    clearQuickFieldOverlays() {
+        this.quickFieldOverlayContainer?.remove();
+        this.quickFieldOverlayContainer = null;
+        this.quickFieldOverlays = [];
+    }
+    renderQuickFieldOverlays(element) {
+        this.clearQuickFieldOverlays();
+        const targets = this.getQuickEditableTargets(element);
+        if (targets.length === 0 || typeof document === 'undefined') {
+            return;
+        }
+        const container = document.createElement('div');
+        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 button = document.createElement('button');
+            button.type = 'button';
+            button.setAttribute('data-einblick-field-button', binding && isMediaEditableBinding(binding) ? 'media' : 'text');
+            button.textContent =
+                binding && isMediaEditableBinding(binding)
+                    ? getMediaActionLabel(binding, this.messages)
+                    : this.messages.actions.editText;
+            button.addEventListener('pointerdown', (event) => {
+                event.stopPropagation();
+            });
+            button.addEventListener('click', (event) => {
+                stopEvent(event);
+                const nextBinding = readBindingFromElement(target);
+                if (!nextBinding) {
+                    return;
+                }
+                if (isMediaEditableBinding(nextBinding)) {
+                    this.openMediaPicker(target, nextBinding, button);
+                    return;
+                }
+                this.openInlineEditor(target, nextBinding);
+            });
+            container.append(outline, button);
+            return { target, outline, button };
+        });
+        document.body.append(container);
+        this.quickFieldOverlayContainer = container;
+        this.updateQuickFieldOverlayPositions();
+    }
+    updateQuickFieldOverlayPositions() {
+        if (!this.quickFieldOverlayContainer) {
+            return;
+        }
+        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);
+            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));
+            overlay.button.style.left = `${Math.round(left)}px`;
+            overlay.button.style.top = `${Math.round(top)}px`;
+        }
+    }
+    updateHoverButtonLabel() {
+        if (!this.hoverButton || !this.activeElement) {
+            return;
+        }
+        const binding = readBindingFromElement(this.activeElement);
+        if (!binding?.fieldKey) {
+            this.hoverButton.textContent = this.messages.actions.editElement;
+            return;
+        }
+        this.hoverButton.textContent = isMediaEditableBinding(binding)
+            ? getMediaActionLabel(binding, this.messages)
+            : shouldUseInlineEditor(binding)
+                ? this.messages.actions.editText
+                : this.messages.actions.edit;
     }
     reloadBridge() {
         this.clearBridgePing();
@@ -1845,7 +2025,67 @@ class EinblickEditRuntime {
             return null;
         }
         const editableTarget = target.closest('[data-einblick-editable="true"]');
-        return editableTarget ?? null;
+        if (!editableTarget) {
+            return null;
+        }
+        const binding = readBindingFromElement(editableTarget);
+        if (!binding?.fieldKey) {
+            return editableTarget;
+        }
+        const entryTarget = this.findEntryTargetForField(editableTarget, binding);
+        return entryTarget ?? editableTarget;
+    }
+    findEntryTargetForField(fieldElement, binding) {
+        let parent = fieldElement.parentElement;
+        while (parent) {
+            const parentBinding = readBindingFromElement(parent);
+            if (parentBinding &&
+                !parentBinding.fieldKey &&
+                parentBinding.resourceSlug === binding.resourceSlug &&
+                parentBinding.recordId === binding.recordId) {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return null;
+    }
+    getQuickEditableTargets(element) {
+        const binding = readBindingFromElement(element);
+        if (!binding) {
+            return [];
+        }
+        if (binding.fieldKey) {
+            return shouldUseInlineEditor(binding) || isMediaEditableBinding(binding)
+                ? [element]
+                : [];
+        }
+        const selector = [
+            '[data-einblick-editable="true"]',
+            `[data-einblick-resource="${CSS.escape(binding.resourceSlug)}"]`,
+            `[data-einblick-record-id="${CSS.escape(binding.recordId)}"]`,
+            '[data-einblick-field-key]',
+        ].join('');
+        const fields = Array.from(element.querySelectorAll(selector));
+        return fields
+            .filter((candidate) => {
+            const candidateBinding = readBindingFromElement(candidate);
+            return (!!candidateBinding &&
+                (shouldUseInlineEditor(candidateBinding) ||
+                    isMediaEditableBinding(candidateBinding)));
+        })
+            .slice(0, 24);
+    }
+    isSdkChromeTarget(target) {
+        if (!(target instanceof Node)) {
+            return false;
+        }
+        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) ||
+            !!this.bottomBarMoreMenu?.contains(target));
     }
     findElementForBinding(binding) {
         const selector = [
@@ -1874,216 +2114,342 @@ class EinblickEditRuntime {
         this.closeDrawer();
         this.closeInlineEditor();
         this.setActiveElement(null);
-        const computedDisplay = window.getComputedStyle(target).display;
-        const isInlineLayout = computedDisplay === 'inline' ||
-            computedDisplay === 'inline-block' ||
-            computedDisplay === 'inline-flex' ||
-            computedDisplay === 'contents';
-        const targetRect = target.getBoundingClientRect();
-        this.currentInlineRestoreState = {
-            childNodes: Array.from(target.childNodes),
-            display: target.style.display,
-            flexDirection: target.style.flexDirection,
-            alignItems: target.style.alignItems,
-            gap: target.style.gap,
-            minWidth: target.style.minWidth,
+        const restoreState = {
+            childNodes: Array.from(target.childNodes).map((node) => node.cloneNode(true)),
+            contentEditable: target.getAttribute('contenteditable'),
+            spellcheck: target.getAttribute('spellcheck'),
+            tabIndex: target.tabIndex,
+            hadTabIndex: target.hasAttribute('tabindex'),
+            role: target.getAttribute('role'),
+            ariaMultiline: target.getAttribute('aria-multiline'),
+            title: target.getAttribute('title'),
+            value: binding.value,
+            cleanup: [],
         };
+        this.currentInlineRestoreState = restoreState;
         target.dataset.einblickInlineEditing = 'true';
-        target.style.display = isInlineLayout ? 'inline-flex' : 'flex';
-        target.style.flexDirection = 'column';
-        target.style.alignItems = 'stretch';
-        target.style.gap = '0.75rem';
-        target.style.minWidth = isInlineLayout
-            ? `${Math.min(Math.max(Math.round(targetRect.width), 220), Math.max(window.innerWidth - 32, 220))}px`
-            : target.style.minWidth;
-        const shellHost = document.createElement('div');
-        const shadowRoot = shellHost.attachShadow({ mode: 'open' });
-        const shadowStyle = document.createElement('style');
-        shadowStyle.textContent = INLINE_EDITOR_SHADOW_STYLES;
-        const shell = document.createElement('div');
-        shell.setAttribute('data-einblick-inline-shell', 'true');
-        const control = this.createInlineControl(binding, target);
-        this.setControlValue(control, binding, binding.value);
-        const errorMessage = document.createElement('div');
-        errorMessage.setAttribute('data-einblick-inline-error', 'true');
-        errorMessage.hidden = true;
-        const actions = document.createElement('div');
-        actions.setAttribute('data-einblick-inline-actions', 'true');
-        const cancelButton = document.createElement('button');
-        cancelButton.type = 'button';
-        cancelButton.textContent = this.messages.actions.cancel;
-        cancelButton.setAttribute('data-einblick-edit-action', 'secondary');
-        cancelButton.addEventListener('click', () => this.closeInlineEditor());
-        const saveButton = document.createElement('button');
-        saveButton.type = 'button';
-        saveButton.textContent = this.messages.actions.save;
-        saveButton.setAttribute('data-einblick-edit-action', 'primary');
-        const runSave = async () => {
-            errorMessage.hidden = true;
-            errorMessage.textContent = '';
-            saveButton.disabled = true;
-            saveButton.textContent = this.messages.actions.saving;
-            cancelButton.disabled = true;
-            try {
-                const nextValue = this.getControlValue(control, binding);
-                const savedValue = await this.saveInlineField(binding, nextValue);
-                this.closeInlineEditor();
-                this.applyValueToElement(target, binding, savedValue);
-                await this.callbacks.onSave?.({
-                    binding,
-                    value: savedValue,
-                    source: 'inline',
-                });
-            }
-            catch (error) {
-                errorMessage.hidden = false;
-                errorMessage.textContent =
-                    error instanceof Error
-                        ? error.message
-                        : this.messages.errors.saveFieldFailed;
-                saveButton.disabled = false;
-                saveButton.textContent = this.messages.actions.save;
-                cancelButton.disabled = false;
-            }
+        target.setAttribute('contenteditable', 'plaintext-only');
+        target.setAttribute('spellcheck', 'true');
+        target.setAttribute('role', 'textbox');
+        target.setAttribute('aria-multiline', fieldTypeAllowsMultiline(binding) ? 'true' : 'false');
+        if (!target.hasAttribute('tabindex')) {
+            target.tabIndex = 0;
+        }
+        if ((target.textContent ?? '').trim().length === 0 &&
+            binding.value !== undefined &&
+            binding.value !== null) {
+            target.textContent = formatValueForText(binding.value);
+        }
+        const handleClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
         };
-        saveButton.addEventListener('click', () => {
-            void runSave();
-        });
-        control.addEventListener('keydown', (event) => {
-            const keyboardEvent = event;
+        const handleKeyDown = (keyboardEvent) => {
             if (keyboardEvent.key === 'Escape') {
                 keyboardEvent.preventDefault();
+                keyboardEvent.stopPropagation();
                 this.closeInlineEditor();
                 return;
             }
             if (keyboardEvent.key === 'Enter' &&
-                (!(control instanceof HTMLTextAreaElement) ||
+                (!fieldTypeAllowsMultiline(binding) ||
                     keyboardEvent.metaKey ||
                     keyboardEvent.ctrlKey)) {
                 keyboardEvent.preventDefault();
-                void runSave();
+                keyboardEvent.stopPropagation();
+                void this.commitInlineEditor();
+                return;
             }
-        });
-        actions.append(cancelButton, saveButton);
-        shell.append(control, errorMessage, actions);
-        shadowRoot.append(shadowStyle, shell);
-        target.replaceChildren(shellHost);
+            if (isTextInputEvent(keyboardEvent)) {
+                keyboardEvent.stopPropagation();
+            }
+        };
+        const handlePaste = (event) => {
+            const text = event.clipboardData?.getData('text/plain');
+            if (text === undefined) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this.insertPlainTextAtSelection(text);
+        };
+        const handleBlur = () => {
+            window.setTimeout(() => {
+                if (this.currentInlineTarget === target) {
+                    void this.commitInlineEditor();
+                }
+            }, 0);
+        };
+        target.addEventListener('click', handleClick, true);
+        target.addEventListener('keydown', handleKeyDown, true);
+        target.addEventListener('paste', handlePaste, true);
+        target.addEventListener('blur', handleBlur, true);
+        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(() => {
-            if ('focus' in control && typeof control.focus === 'function') {
-                control.focus();
-            }
+            target.focus({ preventScroll: true });
+            this.placeCaretAtEnd(target);
         }, 0);
     }
-    closeInlineEditor() {
+    closeInlineEditor(options = {}) {
+        const restore = options.restore ?? true;
         if (this.currentInlineTarget && this.currentInlineRestoreState) {
-            this.currentInlineTarget.replaceChildren(...this.currentInlineRestoreState.childNodes);
-            this.currentInlineTarget.style.display =
-                this.currentInlineRestoreState.display;
-            this.currentInlineTarget.style.flexDirection =
-                this.currentInlineRestoreState.flexDirection;
-            this.currentInlineTarget.style.alignItems =
-                this.currentInlineRestoreState.alignItems;
-            this.currentInlineTarget.style.gap = this.currentInlineRestoreState.gap;
-            this.currentInlineTarget.style.minWidth =
-                this.currentInlineRestoreState.minWidth;
+            for (const cleanup of this.currentInlineRestoreState.cleanup) {
+                cleanup();
+            }
+            if (restore) {
+                this.currentInlineTarget.replaceChildren(...this.currentInlineRestoreState.childNodes.map((node) => node.cloneNode(true)));
+                this.currentInlineTarget.dataset.einblickValue =
+                    serializeBindingValue(this.currentInlineRestoreState.value) ?? '';
+            }
+            this.restoreInlineTargetAttributes(this.currentInlineTarget, this.currentInlineRestoreState);
             delete this.currentInlineTarget.dataset.einblickInlineEditing;
+            delete this.currentInlineTarget.dataset.einblickInlineState;
+            this.currentInlineTarget.removeAttribute('aria-busy');
         }
         this.currentInlineRestoreState = null;
         this.currentInlineTarget = null;
         this.currentInlineBinding = null;
-    }
-    createInlineControl(binding, target) {
-        switch (binding.fieldType) {
-            case 'text':
-            case 'markdown': {
-                const textarea = document.createElement('textarea');
-                textarea.setAttribute('data-einblick-inline-textarea', 'true');
-                return textarea;
-            }
-            case 'boolean': {
-                const select = document.createElement('select');
-                select.setAttribute('data-einblick-inline-select', 'true');
-                const trueOption = document.createElement('option');
-                trueOption.value = 'true';
-                trueOption.textContent = this.messages.values.true;
-                const falseOption = document.createElement('option');
-                falseOption.value = 'false';
-                falseOption.textContent = this.messages.values.false;
-                select.append(trueOption, falseOption);
-                return select;
-            }
-            default: {
-                const textValue = typeof binding.value === 'string'
-                    ? binding.value
-                    : (target?.textContent ?? '');
-                if (binding.fieldType === 'string' &&
-                    typeof textValue === 'string' &&
-                    textValue.includes('\n')) {
-                    const textarea = document.createElement('textarea');
-                    textarea.setAttribute('data-einblick-inline-textarea', 'true');
-                    return textarea;
-                }
-                const input = document.createElement('input');
-                input.setAttribute('data-einblick-inline-control', 'true');
-                if (binding.fieldType === 'number') {
-                    input.type = 'number';
-                }
-                else if (binding.fieldType === 'date') {
-                    input.type = 'date';
-                }
-                else {
-                    input.type = 'text';
-                }
-                return input;
-            }
+        this.inlineSaveInFlight = null;
+        this.activeOutline?.removeAttribute('data-einblick-inline-active');
+        if (!this.activeElement) {
+            this.activeOutline?.remove();
+            this.activeOutline = null;
         }
     }
-    setControlValue(control, binding, value) {
-        const currentValue = value ?? binding.value;
-        if (control instanceof HTMLSelectElement) {
-            control.value = currentValue === true ? 'true' : 'false';
-            return;
+    restoreInlineTargetAttributes(target, restoreState) {
+        if (restoreState.contentEditable === null) {
+            target.removeAttribute('contenteditable');
         }
-        if (binding.fieldType === 'tags') {
-            control.value = Array.isArray(currentValue)
-                ? currentValue
-                    .map((entry) => (typeof entry === 'string' ? entry : String(entry)))
-                    .join(', ')
-                : currentValue === undefined || currentValue === null
-                    ? ''
-                    : String(currentValue);
-            return;
+        else {
+            target.setAttribute('contenteditable', restoreState.contentEditable);
         }
-        if (binding.fieldType === 'date') {
-            control.value =
-                typeof currentValue === 'string' ? normalizeDateValue(currentValue) : '';
-            return;
+        if (restoreState.spellcheck === null) {
+            target.removeAttribute('spellcheck');
+        }
+        else {
+            target.setAttribute('spellcheck', restoreState.spellcheck);
+        }
+        if (restoreState.role === null) {
+            target.removeAttribute('role');
+        }
+        else {
+            target.setAttribute('role', restoreState.role);
+        }
+        if (restoreState.ariaMultiline === null) {
+            target.removeAttribute('aria-multiline');
+        }
+        else {
+            target.setAttribute('aria-multiline', restoreState.ariaMultiline);
+        }
+        if (restoreState.title === null) {
+            target.removeAttribute('title');
+        }
+        else {
+            target.setAttribute('title', restoreState.title);
+        }
+        if (restoreState.hadTabIndex) {
+            target.tabIndex = restoreState.tabIndex;
+        }
+        else {
+            target.removeAttribute('tabindex');
         }
-        control.value =
-            currentValue === undefined || currentValue === null
-                ? ''
-                : typeof currentValue === 'string'
-                    ? currentValue
-                    : String(currentValue);
     }
-    getControlValue(control, binding) {
-        const rawValue = control.value;
+    getInlineEditableValue(target, binding) {
+        const rawValue = fieldTypeAllowsMultiline(binding)
+            ? target.innerText.replace(/\n$/, '')
+            : (target.textContent ?? '').replace(/\s+/g, ' ').trim();
         switch (binding.fieldType) {
             case 'number':
                 return rawValue.trim().length === 0 ? null : Number(rawValue);
-            case 'boolean':
-                return rawValue === 'true';
             case 'tags':
                 return rawValue
                     .split(',')
                     .map((entry) => entry.trim())
                     .filter(Boolean);
+            case 'date':
+                return normalizeDateValue(rawValue.trim());
             default:
                 return rawValue;
         }
     }
+    async commitInlineEditor() {
+        if (this.inlineSaveInFlight) {
+            return await this.inlineSaveInFlight;
+        }
+        const target = this.currentInlineTarget;
+        const binding = this.currentInlineBinding;
+        if (!target || !binding) {
+            return;
+        }
+        this.inlineSaveInFlight = (async () => {
+            target.setAttribute('aria-busy', 'true');
+            target.dataset.einblickInlineState = 'saving';
+            try {
+                const nextValue = this.getInlineEditableValue(target, binding);
+                const savedValue = await this.saveInlineField(binding, nextValue);
+                this.closeInlineEditor({ restore: false });
+                this.applyValueToElement(target, binding, savedValue);
+                await this.callbacks.onSave?.({
+                    binding,
+                    value: savedValue,
+                    source: 'inline',
+                });
+            }
+            catch (error) {
+                target.dataset.einblickInlineState = 'error';
+                target.removeAttribute('aria-busy');
+                this.inlineSaveInFlight = null;
+                const message = error instanceof Error
+                    ? error.message
+                    : this.messages.errors.saveFieldFailed;
+                target.title = message;
+                this.callbacks.onError?.(message);
+            }
+        })();
+        await this.inlineSaveInFlight;
+    }
+    insertPlainTextAtSelection(text) {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            return;
+        }
+        selection.deleteFromDocument();
+        selection.getRangeAt(0).insertNode(document.createTextNode(text));
+        selection.collapseToEnd();
+    }
+    placeCaretAtEnd(target) {
+        const selection = window.getSelection();
+        if (!selection) {
+            return;
+        }
+        const range = document.createRange();
+        range.selectNodeContents(target);
+        range.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+    openMediaPicker(target, binding, button) {
+        if (!this.state.isAuthenticated) {
+            this.callbacks.onError?.(this.messages.errors.signInToEditField);
+            return;
+        }
+        if (!binding.fieldKey) {
+            this.callbacks.onError?.(this.messages.errors.fieldBindingRequired);
+            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 resetButton = () => {
+            if (button) {
+                button.disabled = false;
+                button.textContent =
+                    previousText || getMediaActionLabel(binding, this.messages);
+            }
+        };
+        input.addEventListener('change', () => {
+            const file = input.files?.[0];
+            input.remove();
+            if (!file) {
+                return;
+            }
+            if (button) {
+                button.disabled = true;
+                button.textContent = this.messages.actions.uploading;
+            }
+            void (async () => {
+                try {
+                    const result = await this.saveInlineMediaField(binding, file);
+                    this.applyMediaPreviewToElement(target, file);
+                    await this.callbacks.onSave?.({
+                        binding,
+                        value: result.value,
+                        source: 'inline',
+                    });
+                }
+                catch (error) {
+                    const message = error instanceof Error
+                        ? error.message
+                        : this.messages.errors.saveFieldFailed;
+                    this.callbacks.onError?.(message);
+                }
+                finally {
+                    resetButton();
+                }
+            })();
+        });
+        input.addEventListener('cancel', () => {
+            input.remove();
+        });
+        document.body.append(input);
+        input.click();
+    }
+    async saveInlineMediaField(binding, file) {
+        if (!this.bridgeFrame?.contentWindow) {
+            throw new Error(this.messages.errors.bridgeNotConnected);
+        }
+        if (!this.state.isAuthenticated) {
+            throw new Error(this.messages.errors.signInToEditField);
+        }
+        if (!binding.fieldKey) {
+            throw new Error(this.messages.errors.fieldBindingRequired);
+        }
+        const requestId = createRandomId();
+        const promise = new Promise((resolve, reject) => {
+            const timeoutId = window.setTimeout(() => {
+                this.pendingInlineMediaSaves.delete(requestId);
+                reject(new Error(this.messages.errors.savingTimedOut));
+            }, 60000);
+            this.pendingInlineMediaSaves.set(requestId, {
+                resolve,
+                reject,
+                timeoutId,
+            });
+        });
+        this.bridgeFrame.contentWindow.postMessage({
+            source: EINBLICK_PARENT_SOURCE,
+            type: 'replace-inline-media',
+            nonce: this.bridgeNonce,
+            requestId,
+            payload: {
+                resourceSlug: binding.resourceSlug,
+                recordId: binding.recordId,
+                fieldKey: binding.fieldKey,
+                file,
+            },
+        }, this.appOrigin);
+        return await promise;
+    }
+    applyMediaPreviewToElement(element, file) {
+        if (!file.type.startsWith('image/')) {
+            return;
+        }
+        const image = element instanceof HTMLImageElement
+            ? element
+            : element.querySelector('img');
+        if (!image) {
+            return;
+        }
+        const objectUrl = URL.createObjectURL(file);
+        const previousUrl = image.src;
+        image.addEventListener('load', () => {
+            URL.revokeObjectURL(objectUrl);
+        }, { once: true });
+        image.addEventListener('error', () => {
+            image.src = previousUrl;
+            URL.revokeObjectURL(objectUrl);
+        }, { once: true });
+        image.src = objectUrl;
+    }
     async saveInlineField(binding, value) {
         if (!this.bridgeFrame?.contentWindow) {
             throw new Error(this.messages.errors.bridgeNotConnected);