@einblick/sdk 0.4.0 → 0.4.5

package/dist/react/runtime.js

@@ -5,6 +5,7 @@ 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;
@@ -105,6 +106,16 @@ function getBrandBadgeSvg(size) {
     </svg>
   `;
 }
+function getBrandMarkSvg(size) {
+    return `
+    <svg viewBox="0 0 22.11 22.11" width="${size}" height="${size}" aria-hidden="true" focusable="false">
+      <path
+        d="M22.11 9.96h-8.35l5.84-5.84.07-.07-1.49-1.48-.07-.07-5.97 5.97V0h-2.2v8.4L4.11 2.56l-.07-.07-1.48 1.49-.07.07 5.92 5.92H0v2.2h8.45l-5.9 5.9-.07.07 1.49 1.48.07.07 5.92-5.92v8.35h2.2v-8.79c0-.65.53-1.17 1.17-1.17h8.79v-2.2Z"
+        fill="currentColor"
+      />
+    </svg>
+  `;
+}
 function createRandomId() {
     if (typeof crypto !== 'undefined' &&
         typeof crypto.randomUUID === 'function') {
@@ -419,6 +430,8 @@ class EinblickEditRuntime {
     siteKey;
     appOrigin;
     callbacks;
+    chrome;
+    reserveBottomSpace;
     locale;
     messages;
     bridgeNonce = createRandomId();
@@ -442,6 +455,14 @@ class EinblickEditRuntime {
     brandPopoverHint = null;
     brandPopoverOpenAppButton = null;
     brandPopoverLogoutButton = null;
+    bottomBarHost = null;
+    bottomBarSiteName = null;
+    bottomBarStatus = null;
+    bottomBarCmsButton = null;
+    bottomBarOpenAppButton = null;
+    bottomBarLogoutButton = null;
+    originalBodyPaddingBottom = null;
+    hasReservedBodyPadding = false;
     mutationObserver = null;
     destroyed = false;
     started = false;
@@ -452,11 +473,16 @@ class EinblickEditRuntime {
     editorNonce = null;
     editorTarget = null;
     editorBinding = null;
+    navigatorPanel = null;
+    navigatorNonce = null;
     pendingInlineSaves = new Map();
     pendingLogin = null;
     constructor(options) {
         this.siteKey = options.siteKey;
         this.appOrigin = resolveAppOrigin(options.appOrigin, options.appUrl);
+        this.chrome = options.chrome ?? 'bar';
+        this.reserveBottomSpace =
+            options.reserveBottomSpace ?? this.chrome === 'bar';
         this.locale = resolveEinblickSdkLocale(options.locale);
         this.messages = getEinblickSdkMessages(this.locale);
         this.session =
@@ -488,7 +514,12 @@ class EinblickEditRuntime {
         this.started = true;
         injectRuntimeStyles();
         this.ensureHoverButton();
-        this.ensureBrandBadge();
+        if (this.chrome === 'badge') {
+            this.ensureBrandBadge();
+        }
+        else if (this.chrome === 'bar') {
+            this.ensureBottomBar();
+        }
         window.addEventListener('message', this.handleMessage);
         window.addEventListener('pointerdown', this.handleGlobalPointerDown, true);
         window.addEventListener('pointermove', this.handlePointerMove, true);
@@ -547,7 +578,16 @@ class EinblickEditRuntime {
         this.brandPopoverHint = null;
         this.brandPopoverOpenAppButton = null;
         this.brandPopoverLogoutButton = null;
+        this.bottomBarHost?.remove();
+        this.bottomBarHost = null;
+        this.bottomBarSiteName = null;
+        this.bottomBarStatus = null;
+        this.bottomBarCmsButton = null;
+        this.bottomBarOpenAppButton = null;
+        this.bottomBarLogoutButton = null;
+        this.applyBottomLayout(false);
         this.closeInlineEditor();
+        this.closeNavigator();
         this.closeDrawer();
         if (this.pendingLogin) {
             if (this.pendingLogin.closePollId !== null) {
@@ -593,6 +633,7 @@ class EinblickEditRuntime {
                 this.messages.actions.logout;
         }
         this.updateBrandPopover();
+        this.updateBottomBar();
     }
     async login(options) {
         if (typeof window === 'undefined') {
@@ -641,6 +682,7 @@ class EinblickEditRuntime {
     }
     openEditor(binding, element) {
         this.setBrandPopoverOpen(false);
+        this.closeNavigator();
         const target = element ?? this.findElementForBinding(binding);
         if (shouldUseInlineEditor(binding)) {
             this.openInlineEditor(target, binding);
@@ -651,7 +693,8 @@ class EinblickEditRuntime {
     handlePointerMove = (event) => {
         if (!this.state.isAuthenticated ||
             this.currentInlineTarget ||
-            this.editorBackdrop) {
+            this.editorBackdrop ||
+            this.navigatorPanel) {
             this.setActiveElement(null);
             return;
         }
@@ -678,6 +721,11 @@ class EinblickEditRuntime {
             this.setBrandPopoverOpen(false);
             return;
         }
+        if (this.navigatorPanel) {
+            event.preventDefault();
+            this.closeNavigator();
+            return;
+        }
         if (this.currentInlineTarget) {
             event.preventDefault();
             this.closeInlineEditor();
@@ -845,6 +893,21 @@ class EinblickEditRuntime {
         pending.resolve(false);
     }
     handleEditorMessage(message) {
+        if (this.navigatorNonce && message.nonce === this.navigatorNonce) {
+            if (message.type === 'navigator-closed') {
+                this.closeNavigator();
+                return;
+            }
+            if (message.type === 'navigator-open-editor') {
+                this.openCollectionDrawer({
+                    collectionId: message.collectionId,
+                    intent: message.intent,
+                    recordId: message.recordId,
+                    resourceSlug: message.resourceSlug,
+                });
+                return;
+            }
+        }
         if (!this.editorNonce || message.nonce !== this.editorNonce) {
             return;
         }
@@ -864,6 +927,17 @@ class EinblickEditRuntime {
                     source: 'drawer',
                 });
             }
+            else if (this.editorBinding) {
+                const nextBinding = {
+                    ...this.editorBinding,
+                    recordId: message.recordId ?? this.editorBinding.recordId,
+                };
+                void this.callbacks.onSave?.({
+                    binding: nextBinding,
+                    value: message.fields,
+                    source: 'drawer',
+                });
+            }
             this.closeDrawer();
         }
     }
@@ -886,8 +960,10 @@ class EinblickEditRuntime {
         this.callbacks.onStateChange(nextState);
         this.updateBrandBadge();
         this.updateBrandPopover();
+        this.updateBottomBar();
         if (!nextState.isAuthenticated) {
             this.setActiveElement(null);
+            this.closeNavigator();
         }
     }
     ensureHoverButton() {
@@ -990,6 +1066,186 @@ class EinblickEditRuntime {
         this.updateBrandBadge();
         this.updateBrandPopover();
     }
+    ensureBottomBar() {
+        if (this.bottomBarHost || typeof document === 'undefined') {
+            return;
+        }
+        const host = document.createElement('div');
+        host.setAttribute('data-einblick-control-bar-host', 'true');
+        host.hidden = true;
+        host.style.position = 'fixed';
+        host.style.left = '0';
+        host.style.right = '0';
+        host.style.bottom = '0';
+        host.style.zIndex = '2147483644';
+        host.style.height = `${CONTROL_BAR_HEIGHT}px`;
+        const shadowRoot = host.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        all: initial;
+        display: block;
+        height: ${CONTROL_BAR_HEIGHT}px;
+        color: rgb(255, 255, 255);
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      }
+
+      *, *::before, *::after {
+        box-sizing: border-box;
+      }
+
+      .bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        width: 100%;
+        height: ${CONTROL_BAR_HEIGHT}px;
+        padding: 0 0.75rem;
+        background: ${EINBLICK_ACCENT_COLOR};
+        border-top: 1px solid rgba(255, 255, 255, 0.24);
+        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.18);
+      }
+
+      .brand,
+      .actions {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.6rem;
+        min-width: 0;
+      }
+
+      .mark {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+        width: 1.35rem;
+        height: 1.35rem;
+        color: rgb(255, 255, 255);
+      }
+
+      .site {
+        min-width: 0;
+        max-width: min(26rem, 40vw);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font: 700 0.84rem/1.1 system-ui, sans-serif;
+      }
+
+      .status {
+        flex: none;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.18);
+        padding: 0.25rem 0.5rem;
+        font: 650 0.72rem/1 system-ui, sans-serif;
+      }
+
+      button {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.35rem;
+        min-width: 0;
+        height: 2rem;
+        margin: 0;
+        border: 1px solid rgba(255, 255, 255, 0.36);
+        border-radius: 0.35rem;
+        background: rgba(255, 255, 255, 0.13);
+        color: rgb(255, 255, 255);
+        padding: 0 0.7rem;
+        font: 700 0.78rem/1 system-ui, sans-serif;
+        letter-spacing: 0;
+        cursor: pointer;
+      }
+
+      button:hover,
+      button[aria-expanded="true"] {
+        background: rgba(255, 255, 255, 0.23);
+      }
+
+      button:focus-visible {
+        outline: 2px solid rgba(255, 255, 255, 0.72);
+        outline-offset: 2px;
+      }
+
+      .secondary {
+        border-color: transparent;
+        background: transparent;
+      }
+
+      @media (max-width: 640px) {
+        .bar {
+          gap: 0.4rem;
+          padding: 0 0.5rem;
+        }
+
+        .site {
+          max-width: 34vw;
+        }
+
+        .status {
+          display: none;
+        }
+
+        button {
+          padding: 0 0.55rem;
+        }
+      }
+    `;
+        const bar = document.createElement('div');
+        bar.className = 'bar';
+        bar.setAttribute('role', 'toolbar');
+        bar.setAttribute('aria-label', this.messages.brand.controlBarLabel);
+        const brand = document.createElement('div');
+        brand.className = 'brand';
+        const mark = document.createElement('span');
+        mark.className = 'mark';
+        mark.innerHTML = getBrandMarkSvg(22);
+        const siteName = document.createElement('span');
+        siteName.className = 'site';
+        const status = document.createElement('span');
+        status.className = 'status';
+        brand.append(mark, siteName, status);
+        const actions = document.createElement('div');
+        actions.className = 'actions';
+        const cmsButton = document.createElement('button');
+        cmsButton.type = 'button';
+        cmsButton.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.setNavigatorOpen(!this.navigatorPanel);
+        });
+        const openAppButton = document.createElement('button');
+        openAppButton.type = 'button';
+        openAppButton.className = 'secondary';
+        openAppButton.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.openEinblickApp();
+        });
+        const logoutButton = document.createElement('button');
+        logoutButton.type = 'button';
+        logoutButton.className = 'secondary';
+        logoutButton.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void this.logoutFromEinblick();
+        });
+        actions.append(cmsButton, openAppButton, logoutButton);
+        bar.append(brand, actions);
+        shadowRoot.append(style, bar);
+        document.body.append(host);
+        this.bottomBarHost = host;
+        this.bottomBarSiteName = siteName;
+        this.bottomBarStatus = status;
+        this.bottomBarCmsButton = cmsButton;
+        this.bottomBarOpenAppButton = openAppButton;
+        this.bottomBarLogoutButton = logoutButton;
+        this.updateBottomBar();
+    }
     updateBrandBadge() {
         if (!this.brandBadge) {
             return;
@@ -1020,6 +1276,69 @@ class EinblickEditRuntime {
             ? this.messages.brand.authenticatedHint
             : this.messages.brand.unauthenticatedHint;
     }
+    updateBottomBar() {
+        if (!this.bottomBarHost) {
+            this.applyBottomLayout(false);
+            return;
+        }
+        const isVisible = this.chrome === 'bar' && this.state.isAuthenticated;
+        this.bottomBarHost.hidden = !isVisible;
+        this.bottomBarHost.style.display = isVisible ? 'block' : 'none';
+        this.applyBottomLayout(isVisible);
+        if (!isVisible) {
+            this.closeNavigator();
+            return;
+        }
+        if (this.bottomBarSiteName) {
+            this.bottomBarSiteName.textContent =
+                this.state.siteName?.trim() || this.messages.brand.connectedSite;
+            this.bottomBarSiteName.title = this.bottomBarSiteName.textContent;
+        }
+        if (this.bottomBarStatus) {
+            this.bottomBarStatus.textContent = this.messages.brand.editModeActive;
+        }
+        if (this.bottomBarCmsButton) {
+            this.bottomBarCmsButton.textContent = this.messages.actions.cmsCollections;
+            this.bottomBarCmsButton.setAttribute('aria-expanded', this.navigatorPanel ? 'true' : 'false');
+        }
+        if (this.bottomBarOpenAppButton) {
+            this.bottomBarOpenAppButton.textContent =
+                this.messages.actions.goToEinblick;
+        }
+        if (this.bottomBarLogoutButton) {
+            this.bottomBarLogoutButton.textContent = this.messages.actions.logout;
+        }
+    }
+    applyBottomLayout(active) {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        const root = document.documentElement;
+        if (!active) {
+            root.style.removeProperty('--einblick-editor-bottom-offset');
+            root.removeAttribute('data-einblick-editor-bar-active');
+            if (this.hasReservedBodyPadding) {
+                if (this.originalBodyPaddingBottom) {
+                    document.body.style.paddingBottom = this.originalBodyPaddingBottom;
+                }
+                else {
+                    document.body.style.removeProperty('padding-bottom');
+                }
+            }
+            this.hasReservedBodyPadding = false;
+            this.originalBodyPaddingBottom = null;
+            return;
+        }
+        root.style.setProperty('--einblick-editor-bottom-offset', `${CONTROL_BAR_HEIGHT}px`);
+        root.setAttribute('data-einblick-editor-bar-active', 'true');
+        if (!this.reserveBottomSpace || this.hasReservedBodyPadding) {
+            return;
+        }
+        this.originalBodyPaddingBottom = document.body.style.paddingBottom || null;
+        const currentPadding = window.getComputedStyle(document.body).paddingBottom;
+        document.body.style.paddingBottom = `calc(${currentPadding} + ${CONTROL_BAR_HEIGHT}px)`;
+        this.hasReservedBodyPadding = true;
+    }
     isBrandPopoverOpen() {
         return !!this.brandPopover && !this.brandPopover.hidden;
     }
@@ -1039,6 +1358,68 @@ class EinblickEditRuntime {
         const url = new URL('/cms', this.appOrigin).toString();
         window.open(url, '_blank', 'noopener,noreferrer');
     }
+    setNavigatorOpen(open) {
+        if (open) {
+            this.openNavigator();
+            return;
+        }
+        this.closeNavigator();
+    }
+    openNavigator() {
+        if (!this.state.isAuthenticated) {
+            this.callbacks.onError?.(this.messages.errors.signInToEditContent);
+            return;
+        }
+        if (this.navigatorPanel) {
+            return;
+        }
+        let navigatorUrl;
+        const nonce = createRandomId();
+        try {
+            navigatorUrl = this.buildNavigatorUrl(nonce);
+        }
+        catch (error) {
+            this.callbacks.onError?.(error instanceof Error
+                ? error.message
+                : this.messages.errors.openEditorFailed);
+            return;
+        }
+        const panel = document.createElement('div');
+        panel.setAttribute('data-einblick-navigator-panel', 'true');
+        panel.style.position = 'fixed';
+        panel.style.right = '0.75rem';
+        panel.style.bottom = `${CONTROL_BAR_HEIGHT + 12}px`;
+        panel.style.width = 'min(58rem, calc(100vw - 1.5rem))';
+        panel.style.height = `min(40rem, calc(100vh - ${CONTROL_BAR_HEIGHT + 24}px))`;
+        panel.style.zIndex = '2147483645';
+        panel.style.border = '1px solid rgba(148, 163, 184, 0.36)';
+        panel.style.borderRadius = '0.65rem';
+        panel.style.overflow = 'hidden';
+        panel.style.background = 'rgb(255, 255, 255)';
+        panel.style.boxShadow = '0 24px 64px rgba(15, 23, 42, 0.26)';
+        const iframe = document.createElement('iframe');
+        iframe.src = navigatorUrl;
+        iframe.title = this.messages.actions.cmsCollections;
+        iframe.style.display = 'block';
+        iframe.style.width = '100%';
+        iframe.style.height = '100%';
+        iframe.style.border = '0';
+        iframe.style.background = 'rgb(255, 255, 255)';
+        panel.append(iframe);
+        document.body.append(panel);
+        this.navigatorPanel = panel;
+        this.navigatorNonce = nonce;
+        this.updateBottomBar();
+    }
+    closeNavigator() {
+        const hadNavigator = !!this.navigatorPanel || !!this.navigatorNonce;
+        this.navigatorPanel?.remove();
+        this.navigatorPanel = null;
+        this.navigatorNonce = null;
+        if (hadNavigator) {
+            this.updateBottomBar();
+        }
+    }
     async logoutFromEinblick() {
         if (typeof window === 'undefined') {
             return;
@@ -1207,6 +1588,34 @@ class EinblickEditRuntime {
         }
         return url.toString();
     }
+    buildNavigatorUrl(nonce) {
+        const sessionToken = this.getActiveSessionToken();
+        if (!sessionToken) {
+            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);
+        return url.toString();
+    }
+    buildCollectionEditorUrl(args) {
+        const sessionToken = this.getActiveSessionToken();
+        if (!sessionToken) {
+            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('returnTo', window.location.href);
+        url.searchParams.set('collectionId', args.collectionId);
+        url.searchParams.set('intent', args.intent);
+        if (args.recordId) {
+            url.searchParams.set('recordId', args.recordId);
+        }
+        return url.toString();
+    }
     updateHoverButtonVisibility(element) {
         if (!this.hoverCreateButton) {
             return;
@@ -1530,6 +1939,7 @@ class EinblickEditRuntime {
             return;
         }
         this.closeInlineEditor();
+        this.closeNavigator();
         this.closeDrawer();
         this.setActiveElement(null);
         const nonce = createRandomId();
@@ -1564,6 +1974,59 @@ class EinblickEditRuntime {
         document.body.append(backdrop);
         this.editorBackdrop = backdrop;
     }
+    openCollectionDrawer(args) {
+        if (!this.state.isAuthenticated) {
+            this.callbacks.onError?.(this.messages.errors.signInToEditContent);
+            return;
+        }
+        this.closeInlineEditor();
+        this.closeNavigator();
+        this.closeDrawer();
+        this.setActiveElement(null);
+        const nonce = createRandomId();
+        let editorUrl;
+        try {
+            editorUrl = this.buildCollectionEditorUrl({
+                collectionId: args.collectionId,
+                nonce,
+                intent: args.intent,
+                recordId: args.recordId,
+            });
+        }
+        catch (error) {
+            this.callbacks.onError?.(error instanceof Error
+                ? error.message
+                : this.messages.errors.openEditorFailed);
+            return;
+        }
+        this.editorNonce = nonce;
+        this.editorTarget = null;
+        this.editorBinding = args.resourceSlug
+            ? {
+                resourceSlug: args.resourceSlug,
+                recordId: args.recordId ?? '',
+                resourceMode: 'collection',
+                displayMode: 'drawer',
+            }
+            : null;
+        const backdrop = document.createElement('div');
+        backdrop.setAttribute('data-einblick-editor-backdrop', 'true');
+        const shell = document.createElement('div');
+        shell.setAttribute('data-einblick-editor-shell', 'true');
+        const iframe = document.createElement('iframe');
+        iframe.setAttribute('data-einblick-editor-frame', 'true');
+        iframe.src = editorUrl;
+        iframe.title = this.messages.editor.frameTitle;
+        shell.append(iframe);
+        backdrop.append(shell);
+        backdrop.addEventListener('click', (event) => {
+            if (event.target === backdrop) {
+                this.closeDrawer();
+            }
+        });
+        document.body.append(backdrop);
+        this.editorBackdrop = backdrop;
+    }
     closeDrawer() {
         this.editorBackdrop?.remove();
         this.editorBackdrop = null;