@einblick/sdk 0.3.4 → 0.3.6

package/dist/react/runtime.js

@@ -0,0 +1,985 @@
+import { EINBLICK_AUTH_SOURCE, EINBLICK_BRIDGE_SOURCE, EINBLICK_EDITOR_SOURCE, EINBLICK_PARENT_SOURCE, formatValueForText, getImageUrl, isEditSessionExpired, readBindingFromElement, resolveAppOrigin, serializeBindingValue, shouldUseInlineEditor, } from './shared.js';
+const RUNTIME_STYLE_ID = 'einblick-edit-runtime-styles';
+const RELATIVE_POSITION_SENTINEL = '__einblick_runtime_original_static__';
+function createRandomId() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID();
+    }
+    return Math.random().toString(36).slice(2);
+}
+function injectRuntimeStyles() {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    if (document.getElementById(RUNTIME_STYLE_ID)) {
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = RUNTIME_STYLE_ID;
+    style.textContent = `
+    [data-einblick-editable="true"] {
+      scroll-margin-top: 96px;
+    }
+
+    [data-einblick-editable-active="true"] {
+      outline: 2px solid rgba(15, 118, 110, 0.92);
+      outline-offset: 4px;
+    }
+
+    [data-einblick-edit-button] {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      z-index: 2147483644;
+      border: 1px solid rgba(15, 118, 110, 0.92);
+      background: rgba(255, 255, 255, 0.96);
+      color: rgb(17, 24, 39);
+      border-radius: 999px;
+      padding: 0.3rem 0.7rem;
+      font: 600 12px/1 system-ui, sans-serif;
+      letter-spacing: 0.01em;
+      cursor: pointer;
+      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
+    }
+
+    [data-einblick-edit-button]:hover {
+      background: rgb(15, 118, 110);
+      color: rgb(255, 255, 255);
+    }
+
+    [data-einblick-edit-backdrop] {
+      position: fixed;
+      inset: 0;
+      z-index: 2147483645;
+      background: rgba(15, 23, 42, 0.38);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1.5rem;
+    }
+
+    [data-einblick-edit-panel] {
+      width: min(560px, 100%);
+      max-height: min(88vh, 920px);
+      overflow: auto;
+      border-radius: 1.25rem;
+      background: rgb(255, 255, 255);
+      color: rgb(15, 23, 42);
+      box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3);
+      border: 1px solid rgba(148, 163, 184, 0.4);
+    }
+
+    [data-einblick-edit-header] {
+      padding: 1.1rem 1.2rem 0;
+    }
+
+    [data-einblick-edit-body] {
+      padding: 1rem 1.2rem 1.2rem;
+    }
+
+    [data-einblick-edit-label] {
+      display: block;
+      margin-bottom: 0.45rem;
+      font: 600 0.95rem/1.4 system-ui, sans-serif;
+    }
+
+    [data-einblick-edit-input],
+    [data-einblick-edit-textarea],
+    [data-einblick-edit-select] {
+      width: 100%;
+      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;
+    }
+
+    [data-einblick-edit-textarea] {
+      min-height: 10rem;
+      resize: vertical;
+    }
+
+    [data-einblick-edit-actions] {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: 0.75rem;
+      margin-top: 1rem;
+    }
+
+    [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: rgb(15, 118, 110);
+      background: rgb(15, 118, 110);
+      color: rgb(255, 255, 255);
+    }
+
+    [data-einblick-edit-hint],
+    [data-einblick-edit-error] {
+      margin-top: 0.75rem;
+      font: 400 0.85rem/1.5 system-ui, sans-serif;
+    }
+
+    [data-einblick-edit-hint] {
+      color: rgb(71, 85, 105);
+    }
+
+    [data-einblick-edit-error] {
+      color: rgb(185, 28, 28);
+    }
+
+    [data-einblick-editor-frame] {
+      width: min(1180px, 100%);
+      height: min(88vh, 940px);
+      border: 0;
+      border-radius: 1.25rem;
+      background: rgb(255, 255, 255);
+      box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32);
+    }
+  `;
+    document.head.append(style);
+}
+function normalizeDateValue(value) {
+    if (!value) {
+        return '';
+    }
+    if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+        return value;
+    }
+    return value.slice(0, 10);
+}
+class EinblickEditRuntime {
+    siteKey;
+    appOrigin;
+    callbacks;
+    bridgeNonce = createRandomId();
+    session;
+    state = {
+        enabled: true,
+        active: true,
+        isAuthenticated: false,
+        status: 'connecting',
+    };
+    bridgeFrame = null;
+    bridgePingInterval = null;
+    activeElement = null;
+    hoverButton = null;
+    mutationObserver = null;
+    destroyed = false;
+    started = false;
+    inlineEditorBackdrop = null;
+    currentInlineTarget = null;
+    currentInlineBinding = null;
+    editorPopup = null;
+    editorPopupPollId = null;
+    editorNonce = null;
+    editorTarget = null;
+    editorBinding = null;
+    pendingInlineSaves = new Map();
+    pendingLogin = null;
+    constructor(options) {
+        this.siteKey = options.siteKey;
+        this.appOrigin = resolveAppOrigin(options.appOrigin, options.appUrl);
+        this.session =
+            options.initialSession && !isEditSessionExpired(options.initialSession)
+                ? options.initialSession
+                : null;
+        this.callbacks = {
+            onStateChange: options.onStateChange,
+            onSessionChange: options.onSessionChange,
+            onSave: options.onSave,
+            onError: options.onError,
+        };
+    }
+    start() {
+        if (this.started || typeof window === 'undefined' || typeof document === 'undefined') {
+            return;
+        }
+        this.started = true;
+        injectRuntimeStyles();
+        this.ensureHoverButton();
+        window.addEventListener('message', this.handleMessage);
+        window.addEventListener('pointermove', this.handlePointerMove, true);
+        window.addEventListener('scroll', this.handleViewportChange, true);
+        window.addEventListener('resize', this.handleViewportChange);
+        window.addEventListener('blur', this.handleWindowBlur);
+        window.addEventListener('keydown', this.handleKeyDown, true);
+        this.mutationObserver = new MutationObserver(() => {
+            if (this.activeElement && !this.activeElement.isConnected) {
+                this.setActiveElement(null);
+            }
+            if (this.editorTarget && !this.editorTarget.isConnected) {
+                this.editorTarget = null;
+            }
+            if (this.currentInlineTarget && !this.currentInlineTarget.isConnected) {
+                this.closeInlineEditor();
+            }
+        });
+        this.mutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        this.reloadBridge();
+    }
+    destroy() {
+        if (this.destroyed) {
+            return;
+        }
+        this.destroyed = true;
+        this.started = false;
+        window.removeEventListener('message', this.handleMessage);
+        window.removeEventListener('pointermove', this.handlePointerMove, true);
+        window.removeEventListener('scroll', this.handleViewportChange, true);
+        window.removeEventListener('resize', this.handleViewportChange);
+        window.removeEventListener('blur', this.handleWindowBlur);
+        window.removeEventListener('keydown', this.handleKeyDown, true);
+        this.mutationObserver?.disconnect();
+        this.mutationObserver = null;
+        this.clearBridgePing();
+        this.bridgeFrame?.remove();
+        this.bridgeFrame = null;
+        this.setActiveElement(null);
+        this.hoverButton?.remove();
+        this.hoverButton = null;
+        this.closeInlineEditor();
+        this.closeDrawer();
+        if (this.pendingLogin) {
+            if (this.pendingLogin.closePollId !== null) {
+                window.clearInterval(this.pendingLogin.closePollId);
+            }
+            this.pendingLogin.resolve(false);
+            this.pendingLogin = null;
+        }
+        for (const pending of this.pendingInlineSaves.values()) {
+            window.clearTimeout(pending.timeoutId);
+            pending.reject(new Error('Einblick editing was interrupted'));
+        }
+        this.pendingInlineSaves.clear();
+        this.setState({
+            enabled: true,
+            active: false,
+            isAuthenticated: false,
+            status: 'idle',
+            siteName: undefined,
+            errorMessage: undefined,
+        });
+    }
+    async login(options) {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        const returnTo = options?.returnTo ?? window.location.href;
+        const loginNonce = createRandomId();
+        const loginUrl = this.buildBridgeUrl({
+            mode: 'login',
+            nonce: loginNonce,
+            returnTo,
+        });
+        if (this.pendingLogin) {
+            return false;
+        }
+        return await new Promise((resolve) => {
+            let popup = null;
+            try {
+                popup = window.open(loginUrl, 'einblick-edit-login', 'popup=yes,width=680,height=820,resizable=yes,scrollbars=yes');
+            }
+            catch {
+                popup = null;
+            }
+            if (!popup) {
+                window.location.assign(loginUrl);
+                resolve(false);
+                return;
+            }
+            popup.focus();
+            const closePollId = window.setInterval(() => {
+                if (!popup || popup.closed) {
+                    window.clearInterval(closePollId);
+                    if (this.pendingLogin?.nonce === loginNonce) {
+                        this.pendingLogin.resolve(false);
+                        this.pendingLogin = null;
+                    }
+                }
+            }, 400);
+            this.pendingLogin = {
+                nonce: loginNonce,
+                popup,
+                resolve,
+                closePollId,
+            };
+        });
+    }
+    openEditor(binding, element) {
+        const target = element ?? this.findElementForBinding(binding);
+        if (shouldUseInlineEditor(binding)) {
+            this.openInlineEditor(target, binding);
+            return;
+        }
+        this.openDrawer(target, binding);
+    }
+    handlePointerMove = (event) => {
+        if (!this.state.isAuthenticated || this.inlineEditorBackdrop || this.editorPopup) {
+            this.setActiveElement(null);
+            return;
+        }
+        const target = this.findEditableTarget(event.target);
+        this.setActiveElement(target);
+    };
+    handleViewportChange = () => {
+        if (this.activeElement && !this.activeElement.isConnected) {
+            this.setActiveElement(null);
+        }
+    };
+    handleWindowBlur = () => {
+        if (!this.inlineEditorBackdrop && !this.editorPopup) {
+            this.setActiveElement(null);
+        }
+    };
+    handleKeyDown = (event) => {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        if (this.inlineEditorBackdrop) {
+            event.preventDefault();
+            this.closeInlineEditor();
+            return;
+        }
+        if (this.editorPopup) {
+            event.preventDefault();
+            this.closeDrawer();
+            return;
+        }
+        this.setActiveElement(null);
+    };
+    handleHoverButtonClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.activeElement) {
+            return;
+        }
+        const binding = readBindingFromElement(this.activeElement);
+        if (!binding) {
+            return;
+        }
+        this.openEditor(binding, this.activeElement);
+    };
+    handleMessage = (event) => {
+        if (event.origin !== this.appOrigin) {
+            return;
+        }
+        const data = typeof event.data === 'object' && event.data !== null
+            ? event.data
+            : null;
+        if (!data || typeof data.source !== 'string' || typeof data.type !== 'string') {
+            return;
+        }
+        if (data.source === EINBLICK_BRIDGE_SOURCE) {
+            this.handleBridgeMessage(data);
+            return;
+        }
+        if (data.source === EINBLICK_AUTH_SOURCE) {
+            this.handleAuthMessage(data);
+            return;
+        }
+        if (data.source === EINBLICK_EDITOR_SOURCE) {
+            this.handleEditorMessage(data);
+        }
+    };
+    handleBridgeMessage(message) {
+        if (message.nonce !== this.bridgeNonce) {
+            return;
+        }
+        if (message.type === 'bridge-ready') {
+            this.clearBridgePing();
+            if (message.authenticated) {
+                this.setState({
+                    enabled: true,
+                    active: true,
+                    isAuthenticated: true,
+                    status: 'ready',
+                    siteName: message.siteName,
+                    errorMessage: undefined,
+                });
+                return;
+            }
+            if (this.session) {
+                this.setSession(null);
+            }
+            const nextStatus = message.errorCode === 'unauthenticated' ? 'unauthenticated' : 'error';
+            this.setState({
+                enabled: true,
+                active: true,
+                isAuthenticated: false,
+                status: nextStatus,
+                siteName: message.siteName,
+                errorMessage: message.message,
+            });
+            if (message.message) {
+                this.callbacks.onError?.(message.message);
+            }
+            return;
+        }
+        const pending = this.pendingInlineSaves.get(message.requestId);
+        if (!pending) {
+            return;
+        }
+        this.pendingInlineSaves.delete(message.requestId);
+        window.clearTimeout(pending.timeoutId);
+        if (message.ok) {
+            pending.resolve(message.value);
+            return;
+        }
+        const error = new Error(message.error || 'Failed to save field');
+        pending.reject(error);
+        this.callbacks.onError?.(error.message);
+    }
+    handleAuthMessage(message) {
+        if (!this.pendingLogin || message.nonce !== this.pendingLogin.nonce) {
+            return;
+        }
+        if (this.pendingLogin.closePollId !== null) {
+            window.clearInterval(this.pendingLogin.closePollId);
+        }
+        const pending = this.pendingLogin;
+        this.pendingLogin = null;
+        if (message.ok) {
+            if (!message.sessionToken) {
+                const errorMessage = 'Einblick sign-in did not return an edit session';
+                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();
+            pending.resolve(true);
+            return;
+        }
+        const errorMessage = message.message || 'Einblick sign-in failed';
+        this.setState({
+            ...this.state,
+            errorMessage,
+            status: 'error',
+        });
+        this.callbacks.onError?.(errorMessage);
+        pending.resolve(false);
+    }
+    handleEditorMessage(message) {
+        if (!this.editorNonce || message.nonce !== this.editorNonce) {
+            return;
+        }
+        if (message.type === 'editor-closed') {
+            this.closeDrawer(false);
+            return;
+        }
+        if (message.type === 'editor-saved') {
+            if (this.editorBinding?.fieldKey) {
+                const nextValue = message.fields[this.editorBinding.fieldKey];
+                if (this.editorTarget && nextValue !== undefined) {
+                    this.applyValueToElement(this.editorTarget, this.editorBinding, nextValue);
+                }
+                void this.callbacks.onSave?.({
+                    binding: this.editorBinding,
+                    value: nextValue,
+                    source: 'drawer',
+                });
+            }
+            this.closeDrawer(false);
+        }
+    }
+    setSession(session) {
+        this.session = session && !isEditSessionExpired(session) ? session : null;
+        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);
+        if (!nextState.isAuthenticated) {
+            this.setActiveElement(null);
+        }
+    }
+    ensureHoverButton() {
+        if (this.hoverButton || typeof document === 'undefined') {
+            return;
+        }
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.textContent = 'Edit';
+        button.setAttribute('data-einblick-edit-button', 'true');
+        button.hidden = true;
+        button.addEventListener('click', this.handleHoverButtonClick);
+        this.hoverButton = button;
+    }
+    setActiveElement(element) {
+        if (this.activeElement === element) {
+            if (this.hoverButton && element && !element.contains(this.hoverButton)) {
+                element.append(this.hoverButton);
+            }
+            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.activeElement = element;
+        if (!element || !this.hoverButton || !this.state.isAuthenticated) {
+            if (this.hoverButton) {
+                this.hoverButton.hidden = true;
+                this.hoverButton.remove();
+            }
+            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.hoverButton.hidden = false;
+        element.append(this.hoverButton);
+    }
+    reloadBridge() {
+        this.clearBridgePing();
+        this.bridgeFrame?.remove();
+        this.bridgeFrame = null;
+        this.setState({
+            enabled: true,
+            active: true,
+            isAuthenticated: false,
+            status: 'connecting',
+            siteName: this.state.siteName,
+            errorMessage: undefined,
+        });
+        const frame = document.createElement('iframe');
+        frame.hidden = true;
+        frame.tabIndex = -1;
+        frame.setAttribute('aria-hidden', 'true');
+        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.bridgePingInterval = window.setInterval(sendPing, 1500);
+    }
+    clearBridgePing() {
+        if (this.bridgePingInterval !== null) {
+            window.clearInterval(this.bridgePingInterval);
+            this.bridgePingInterval = null;
+        }
+    }
+    buildBridgeUrl(args) {
+        const url = new URL('/sdk/bridge', this.appOrigin);
+        url.searchParams.set('siteKey', this.siteKey);
+        url.searchParams.set('origin', window.location.origin);
+        url.searchParams.set('nonce', args.nonce);
+        if (args.mode !== 'bridge') {
+            url.searchParams.set('mode', args.mode);
+        }
+        const sessionToken = args.mode === 'bridge' ? this.getActiveSessionToken() : null;
+        if (sessionToken) {
+            url.searchParams.set('sessionToken', sessionToken);
+        }
+        if (args.returnTo) {
+            url.searchParams.set('returnTo', args.returnTo);
+        }
+        return url.toString();
+    }
+    buildEditorUrl(binding, nonce) {
+        const sessionToken = this.getActiveSessionToken();
+        if (!sessionToken) {
+            throw new Error('Your edit session expired. Sign in again to continue.');
+        }
+        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('returnTo', window.location.href);
+        url.searchParams.set('resourceSlug', binding.resourceSlug);
+        url.searchParams.set('recordId', binding.recordId);
+        if (binding.fieldKey) {
+            url.searchParams.set('fieldKey', binding.fieldKey);
+        }
+        return url.toString();
+    }
+    findEditableTarget(target) {
+        if (!(target instanceof Element)) {
+            return null;
+        }
+        const editableTarget = target.closest('[data-einblick-editable="true"]');
+        return editableTarget ?? null;
+    }
+    findElementForBinding(binding) {
+        const selector = [
+            '[data-einblick-editable="true"]',
+            `[data-einblick-resource="${CSS.escape(binding.resourceSlug)}"]`,
+            `[data-einblick-record-id="${CSS.escape(binding.recordId)}"]`,
+            binding.fieldKey
+                ? `[data-einblick-field-key="${CSS.escape(binding.fieldKey)}"]`
+                : '',
+        ].join('');
+        return document.querySelector(selector);
+    }
+    openInlineEditor(target, binding) {
+        if (!this.state.isAuthenticated) {
+            this.callbacks.onError?.('Sign in with Einblick to edit this field');
+            return;
+        }
+        this.closeDrawer();
+        this.closeInlineEditor();
+        this.setActiveElement(null);
+        const backdrop = document.createElement('div');
+        backdrop.setAttribute('data-einblick-edit-backdrop', 'true');
+        const panel = document.createElement('div');
+        panel.setAttribute('data-einblick-edit-panel', 'true');
+        const header = document.createElement('div');
+        header.setAttribute('data-einblick-edit-header', 'true');
+        const title = document.createElement('h2');
+        title.textContent = binding.label || binding.fieldKey || 'Edit content';
+        title.style.font = '600 1.1rem/1.3 system-ui, sans-serif';
+        const subTitle = document.createElement('p');
+        subTitle.textContent =
+            binding.fieldKey ? `${binding.resourceSlug} / ${binding.fieldKey}` : binding.resourceSlug;
+        subTitle.style.marginTop = '0.35rem';
+        subTitle.style.color = 'rgb(71, 85, 105)';
+        subTitle.style.font = '400 0.85rem/1.4 system-ui, sans-serif';
+        header.append(title, subTitle);
+        const body = document.createElement('div');
+        body.setAttribute('data-einblick-edit-body', 'true');
+        const label = document.createElement('label');
+        label.setAttribute('data-einblick-edit-label', 'true');
+        label.textContent = 'Value';
+        const control = this.createInlineControl(binding);
+        this.setControlValue(control, binding, binding.value);
+        const errorMessage = document.createElement('div');
+        errorMessage.setAttribute('data-einblick-edit-error', 'true');
+        errorMessage.hidden = true;
+        const hint = document.createElement('div');
+        hint.setAttribute('data-einblick-edit-hint', 'true');
+        hint.textContent =
+            shouldUseInlineEditor(binding)
+                ? 'Changes are saved directly and the page refreshes afterward.'
+                : 'Use the drawer for this field.';
+        const actions = document.createElement('div');
+        actions.setAttribute('data-einblick-edit-actions', 'true');
+        const cancelButton = document.createElement('button');
+        cancelButton.type = 'button';
+        cancelButton.textContent = 'Cancel';
+        cancelButton.setAttribute('data-einblick-edit-action', 'secondary');
+        cancelButton.addEventListener('click', () => this.closeInlineEditor());
+        const drawerButton = document.createElement('button');
+        drawerButton.type = 'button';
+        drawerButton.textContent = 'Open drawer';
+        drawerButton.setAttribute('data-einblick-edit-action', 'secondary');
+        drawerButton.addEventListener('click', () => {
+            this.closeInlineEditor();
+            this.openDrawer(target, binding);
+        });
+        const saveButton = document.createElement('button');
+        saveButton.type = 'button';
+        saveButton.textContent = 'Save';
+        saveButton.setAttribute('data-einblick-edit-action', 'primary');
+        saveButton.addEventListener('click', async () => {
+            errorMessage.hidden = true;
+            errorMessage.textContent = '';
+            saveButton.disabled = true;
+            saveButton.textContent = 'Saving...';
+            try {
+                const nextValue = this.getControlValue(control, binding);
+                const savedValue = await this.saveInlineField(binding, nextValue);
+                if (target) {
+                    this.applyValueToElement(target, binding, savedValue);
+                }
+                this.closeInlineEditor();
+                await this.callbacks.onSave?.({
+                    binding,
+                    value: savedValue,
+                    source: 'inline',
+                });
+            }
+            catch (error) {
+                errorMessage.hidden = false;
+                errorMessage.textContent =
+                    error instanceof Error ? error.message : 'Failed to save field';
+                saveButton.disabled = false;
+                saveButton.textContent = 'Save';
+            }
+        });
+        actions.append(cancelButton, drawerButton, saveButton);
+        body.append(label, control, errorMessage, hint, actions);
+        panel.append(header, body);
+        backdrop.append(panel);
+        backdrop.addEventListener('click', (event) => {
+            if (event.target === backdrop) {
+                this.closeInlineEditor();
+            }
+        });
+        document.body.append(backdrop);
+        this.inlineEditorBackdrop = backdrop;
+        this.currentInlineTarget = target;
+        this.currentInlineBinding = binding;
+        window.setTimeout(() => {
+            if ('focus' in control && typeof control.focus === 'function') {
+                control.focus();
+            }
+        }, 0);
+    }
+    closeInlineEditor() {
+        this.inlineEditorBackdrop?.remove();
+        this.inlineEditorBackdrop = null;
+        this.currentInlineTarget = null;
+        this.currentInlineBinding = null;
+    }
+    createInlineControl(binding) {
+        switch (binding.fieldType) {
+            case 'text':
+            case 'markdown': {
+                const textarea = document.createElement('textarea');
+                textarea.setAttribute('data-einblick-edit-textarea', 'true');
+                return textarea;
+            }
+            case 'boolean': {
+                const select = document.createElement('select');
+                select.setAttribute('data-einblick-edit-select', 'true');
+                const trueOption = document.createElement('option');
+                trueOption.value = 'true';
+                trueOption.textContent = 'True';
+                const falseOption = document.createElement('option');
+                falseOption.value = 'false';
+                falseOption.textContent = 'False';
+                select.append(trueOption, falseOption);
+                return select;
+            }
+            default: {
+                const input = document.createElement('input');
+                input.setAttribute('data-einblick-edit-input', 'true');
+                if (binding.fieldType === 'number') {
+                    input.type = 'number';
+                }
+                else if (binding.fieldType === 'date') {
+                    input.type = 'date';
+                }
+                else {
+                    input.type = 'text';
+                }
+                return input;
+            }
+        }
+    }
+    setControlValue(control, binding, value) {
+        const currentValue = value ?? binding.value;
+        if (control instanceof HTMLSelectElement) {
+            control.value = currentValue === true ? 'true' : 'false';
+            return;
+        }
+        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;
+        }
+        if (binding.fieldType === 'date') {
+            control.value =
+                typeof currentValue === 'string' ? normalizeDateValue(currentValue) : '';
+            return;
+        }
+        control.value =
+            currentValue === undefined || currentValue === null
+                ? ''
+                : typeof currentValue === 'string'
+                    ? currentValue
+                    : String(currentValue);
+    }
+    getControlValue(control, binding) {
+        const rawValue = control.value;
+        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);
+            default:
+                return rawValue;
+        }
+    }
+    async saveInlineField(binding, value) {
+        if (!this.bridgeFrame?.contentWindow) {
+            throw new Error('Einblick bridge is not connected yet');
+        }
+        if (!this.state.isAuthenticated) {
+            throw new Error('Sign in with Einblick to edit this field');
+        }
+        if (!binding.fieldKey) {
+            throw new Error('Inline editing requires a field binding');
+        }
+        const requestId = createRandomId();
+        const promise = new Promise((resolve, reject) => {
+            const timeoutId = window.setTimeout(() => {
+                this.pendingInlineSaves.delete(requestId);
+                reject(new Error('Saving took too long. Please try again.'));
+            }, 15000);
+            this.pendingInlineSaves.set(requestId, {
+                resolve,
+                reject,
+                timeoutId,
+            });
+        });
+        this.bridgeFrame.contentWindow.postMessage({
+            source: EINBLICK_PARENT_SOURCE,
+            type: 'save-inline-field',
+            nonce: this.bridgeNonce,
+            requestId,
+            payload: {
+                resourceSlug: binding.resourceSlug,
+                recordId: binding.recordId,
+                fieldKey: binding.fieldKey,
+                value,
+            },
+        }, this.appOrigin);
+        return await promise;
+    }
+    openDrawer(target, binding) {
+        if (!this.state.isAuthenticated) {
+            this.callbacks.onError?.('Sign in with Einblick to edit this content');
+            return;
+        }
+        this.closeInlineEditor();
+        this.closeDrawer();
+        this.setActiveElement(null);
+        const nonce = createRandomId();
+        let editorUrl;
+        try {
+            editorUrl = this.buildEditorUrl(binding, nonce);
+        }
+        catch (error) {
+            this.callbacks.onError?.(error instanceof Error ? error.message : 'Failed to open the editor');
+            return;
+        }
+        let popup = null;
+        try {
+            popup = window.open(editorUrl, 'einblick-edit-editor', 'popup=yes,width=1320,height=900,resizable=yes,scrollbars=yes');
+        }
+        catch {
+            popup = null;
+        }
+        this.editorNonce = nonce;
+        this.editorTarget = target;
+        this.editorBinding = binding;
+        if (!popup) {
+            window.location.assign(editorUrl);
+            return;
+        }
+        popup.focus();
+        this.editorPopup = popup;
+        this.editorPopupPollId = window.setInterval(() => {
+            if (!this.editorPopup || this.editorPopup.closed) {
+                this.closeDrawer(false);
+            }
+        }, 400);
+    }
+    closeDrawer(closeWindow = true) {
+        if (this.editorPopupPollId !== null) {
+            window.clearInterval(this.editorPopupPollId);
+            this.editorPopupPollId = null;
+        }
+        if (closeWindow) {
+            try {
+                this.editorPopup?.close();
+            }
+            catch { }
+        }
+        this.editorPopup = null;
+        this.editorNonce = null;
+        this.editorTarget = null;
+        this.editorBinding = null;
+    }
+    applyValueToElement(element, binding, value) {
+        element.dataset.einblickValue = serializeBindingValue(value) ?? '';
+        const kind = element.dataset.einblickKind;
+        if (kind === 'image' || binding.fieldType === 'image' || binding.fieldType === 'file' || binding.fieldType === 'files') {
+            const imageUrl = getImageUrl(value);
+            if (!imageUrl) {
+                return;
+            }
+            const img = element.querySelector('img');
+            if (!img) {
+                return;
+            }
+            img.setAttribute('src', imageUrl);
+            if (img.hasAttribute('srcset')) {
+                img.setAttribute('srcset', imageUrl);
+            }
+            return;
+        }
+        if (kind !== 'text') {
+            return;
+        }
+        element.textContent = formatValueForText(value);
+    }
+}
+export function createEinblickEditRuntime(options) {
+    const runtime = new EinblickEditRuntime(options);
+    return {
+        start: () => runtime.start(),
+        destroy: () => runtime.destroy(),
+        login: (loginOptions) => runtime.login(loginOptions),
+        openEditor: (binding, element) => runtime.openEditor(binding, element),
+    };
+}
+//# sourceMappingURL=runtime.js.map