@einblick/sdk 0.5.5 → 0.6.0

package/dist/react/runtime.js

@@ -1,5 +1,28 @@
 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';
+function normalizeResourceHints(hints) {
+    const normalized = [];
+    const seen = new Set();
+    for (const hint of hints ?? []) {
+        const resourceSlug = hint.resourceSlug?.trim();
+        if (!resourceSlug)
+            continue;
+        const sourceType = hint.sourceType ?? 'cms';
+        const key = `${sourceType}:${resourceSlug}`;
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        normalized.push({
+            sourceType,
+            resourceSlug,
+            label: hint.label?.trim() || undefined,
+            mode: hint.mode,
+            recordIds: hint.recordIds?.filter((id) => id.trim().length > 0),
+            showInBottomBar: hint.showInBottomBar,
+        });
+    }
+    return normalized;
+}
 const RUNTIME_STYLE_ID = 'einblick-edit-runtime-styles';
 const EINBLICK_ACCENT_RGB = '250, 105, 62';
 const EINBLICK_ACCENT_COLOR = `rgb(${EINBLICK_ACCENT_RGB})`;
@@ -394,6 +417,7 @@ class EinblickEditRuntime {
     callbacks;
     chrome;
     reserveBottomSpace;
+    resourceHints;
     locale;
     messages;
     bridgeNonce = createRandomId();
@@ -422,7 +446,7 @@ class EinblickEditRuntime {
     brandPopoverLogoutButton = null;
     bottomBarHost = null;
     bottomBarSiteName = null;
-    bottomBarCmsButton = null;
+    bottomBarResourceList = null;
     bottomBarMoreButton = null;
     bottomBarMoreMenu = null;
     bottomBarOpenAppButton = null;
@@ -444,6 +468,7 @@ class EinblickEditRuntime {
     navigatorFrame = null;
     navigatorNonce = null;
     navigatorOpen = false;
+    navigatorFilter = null;
     pendingInlineSaves = new Map();
     pendingInlineMediaSaves = new Map();
     pendingLogin = null;
@@ -454,6 +479,7 @@ class EinblickEditRuntime {
         this.chrome = options.chrome ?? 'bar';
         this.reserveBottomSpace =
             options.reserveBottomSpace ?? this.chrome === 'bar';
+        this.resourceHints = normalizeResourceHints(options.resourceHints);
         this.locale = resolveEinblickSdkLocale(options.locale);
         this.messages = getEinblickSdkMessages(this.locale);
         this.session =
@@ -476,6 +502,10 @@ class EinblickEditRuntime {
         this.messages = getEinblickSdkMessages(nextLocale);
         this.refreshLocalizedUi();
     }
+    setResourceHints(hints) {
+        this.resourceHints = normalizeResourceHints(hints);
+        this.updateBottomBarResources();
+    }
     start() {
         if (this.started ||
             typeof window === 'undefined' ||
@@ -508,6 +538,7 @@ class EinblickEditRuntime {
             if (this.currentInlineTarget && !this.currentInlineTarget.isConnected) {
                 this.closeInlineEditor();
             }
+            this.updateBottomBarResources();
         });
         this.mutationObserver.observe(document.body, {
             childList: true,
@@ -560,7 +591,7 @@ class EinblickEditRuntime {
         this.bottomBarHost?.remove();
         this.bottomBarHost = null;
         this.bottomBarSiteName = null;
-        this.bottomBarCmsButton = null;
+        this.bottomBarResourceList = null;
         this.bottomBarMoreButton = null;
         this.bottomBarMoreMenu = null;
         this.bottomBarOpenAppButton = null;
@@ -942,6 +973,7 @@ class EinblickEditRuntime {
                     collectionId: message.collectionId,
                     intent: message.intent,
                     recordId: message.recordId,
+                    sourceType: message.sourceType,
                     resourceSlug: message.resourceSlug,
                 });
                 return;
@@ -950,6 +982,7 @@ class EinblickEditRuntime {
                 if (message.resourceSlug) {
                     void this.callbacks.onSave?.({
                         binding: {
+                            sourceType: message.sourceType ?? 'cms',
                             resourceSlug: message.resourceSlug,
                             recordId: message.recordId ?? '',
                             resourceMode: 'collection',
@@ -957,6 +990,7 @@ class EinblickEditRuntime {
                         },
                         value: {
                             action: message.action,
+                            sourceType: message.sourceType ?? 'cms',
                             recordId: message.recordId,
                             collectionId: message.collectionId,
                         },
@@ -988,6 +1022,7 @@ class EinblickEditRuntime {
             else if (this.editorBinding) {
                 const nextBinding = {
                     ...this.editorBinding,
+                    sourceType: message.sourceType ?? this.editorBinding.sourceType ?? 'cms',
                     recordId: message.recordId ?? this.editorBinding.recordId,
                 };
                 void this.callbacks.onSave?.({
@@ -1003,6 +1038,7 @@ class EinblickEditRuntime {
             if (this.editorBinding) {
                 const nextBinding = {
                     ...this.editorBinding,
+                    sourceType: message.sourceType ?? this.editorBinding.sourceType ?? 'cms',
                     resourceSlug: message.resourceSlug ?? this.editorBinding.resourceSlug,
                     recordId: message.recordId,
                 };
@@ -1190,8 +1226,6 @@ class EinblickEditRuntime {
         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,
@@ -1221,6 +1255,25 @@ class EinblickEditRuntime {
         font: 700 0.84rem/1.1 system-ui, sans-serif;
       }
 
+      .resources {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+        min-width: 0;
+        max-width: min(48rem, 54vw);
+        overflow-x: auto;
+        scrollbar-width: none;
+      }
+
+      .resources::-webkit-scrollbar {
+        display: none;
+      }
+
+      .resource-button {
+        flex: 0 0 auto;
+        max-width: 12rem;
+      }
+
       button {
         appearance: none;
         display: inline-flex;
@@ -1230,10 +1283,9 @@ class EinblickEditRuntime {
         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);
+        background: #ffffff;
+        color: #fa693e;
         padding: 0 0.7rem;
         font: 700 0.78rem/1 system-ui, sans-serif;
         letter-spacing: 0;
@@ -1252,11 +1304,11 @@ class EinblickEditRuntime {
 
       button:hover,
       button[aria-expanded="true"] {
-        background: rgba(255, 255, 255, 0.23);
+        opacity: 0.8;
       }
 
       button:focus-visible {
-        outline: 2px solid rgba(255, 255, 255, 0.72);
+        outline: 2px solid #ffffff;
         outline-offset: 2px;
       }
 
@@ -1342,14 +1394,8 @@ class EinblickEditRuntime {
         brand.append(mark, siteName);
         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.setBottomBarMenuOpen(false);
-            this.setNavigatorOpen(!this.isNavigatorOpen());
-        });
+        const resourceList = document.createElement('div');
+        resourceList.className = 'resources';
         const moreButton = document.createElement('button');
         moreButton.type = 'button';
         moreButton.className = 'secondary icon-button';
@@ -1387,13 +1433,13 @@ class EinblickEditRuntime {
             void this.logoutFromEinblick();
         });
         moreMenu.append(openAppButton, logoutButton);
-        actions.append(cmsButton, moreButton);
+        actions.append(resourceList, moreButton);
         bar.append(brand, actions, moreMenu);
         shadowRoot.append(style, bar);
         document.body.append(host);
         this.bottomBarHost = host;
         this.bottomBarSiteName = siteName;
-        this.bottomBarCmsButton = cmsButton;
+        this.bottomBarResourceList = resourceList;
         this.bottomBarMoreButton = moreButton;
         this.bottomBarMoreMenu = moreMenu;
         this.bottomBarOpenAppButton = openAppButton;
@@ -1430,6 +1476,79 @@ class EinblickEditRuntime {
             ? this.messages.brand.authenticatedHint
             : this.messages.brand.unauthenticatedHint;
     }
+    collectBottomBarResources() {
+        const resources = new Map();
+        for (const hint of this.resourceHints) {
+            const key = `${hint.sourceType}:${hint.resourceSlug}`;
+            if (hint.showInBottomBar === false) {
+                resources.delete(key);
+                continue;
+            }
+            resources.set(key, hint);
+        }
+        if (typeof document !== 'undefined') {
+            const elements = document.querySelectorAll('[data-einblick-editable="true"][data-einblick-resource]');
+            elements.forEach((element) => {
+                const binding = readBindingFromElement(element);
+                if (!binding?.resourceSlug)
+                    return;
+                const sourceType = binding.sourceType ?? 'cms';
+                const key = `${sourceType}:${binding.resourceSlug}`;
+                if (resources.has(key)) {
+                    const current = resources.get(key);
+                    if (binding.recordId &&
+                        !current.recordIds?.includes(binding.recordId)) {
+                        current.recordIds = [...(current.recordIds ?? []), binding.recordId];
+                    }
+                    return;
+                }
+                resources.set(key, {
+                    sourceType,
+                    resourceSlug: binding.resourceSlug,
+                    label: binding.label,
+                    mode: binding.resourceMode,
+                    recordIds: binding.recordId ? [binding.recordId] : undefined,
+                });
+            });
+        }
+        return [...resources.values()];
+    }
+    updateBottomBarResources() {
+        if (!this.bottomBarResourceList) {
+            return;
+        }
+        this.bottomBarResourceList.replaceChildren();
+        const resources = this.collectBottomBarResources();
+        if (resources.length === 0) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'resource-button';
+            button.textContent = this.messages.actions.cmsCollections;
+            button.setAttribute('aria-expanded', this.isNavigatorOpen() ? 'true' : 'false');
+            button.addEventListener('click', (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                this.setBottomBarMenuOpen(false);
+                this.setNavigatorOpen(!this.isNavigatorOpen());
+            });
+            this.bottomBarResourceList.append(button);
+            return;
+        }
+        for (const resource of resources) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'resource-button';
+            button.textContent = resource.label ?? resource.resourceSlug;
+            button.title = button.textContent;
+            button.addEventListener('click', (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                this.setBottomBarMenuOpen(false);
+                this.openNavigator(resource);
+            });
+            this.bottomBarResourceList.append(button);
+        }
+    }
     updateBottomBar() {
         if (!this.bottomBarHost) {
             this.applyBottomLayout(false);
@@ -1449,10 +1568,7 @@ class EinblickEditRuntime {
                 this.state.siteName?.trim() || this.messages.brand.connectedSite;
             this.bottomBarSiteName.title = this.bottomBarSiteName.textContent;
         }
-        if (this.bottomBarCmsButton) {
-            this.bottomBarCmsButton.textContent = this.messages.actions.cmsCollections;
-            this.bottomBarCmsButton.setAttribute('aria-expanded', this.isNavigatorOpen() ? 'true' : 'false');
-        }
+        this.updateBottomBarResources();
         if (this.bottomBarMoreButton) {
             this.bottomBarMoreButton.setAttribute('aria-label', this.messages.actions.moreActions);
             this.bottomBarMoreButton.setAttribute('aria-expanded', this.isBottomBarMenuOpen() ? 'true' : 'false');
@@ -1464,7 +1580,7 @@ class EinblickEditRuntime {
         if (this.bottomBarLogoutButton) {
             this.bottomBarLogoutButton.textContent = this.messages.actions.logout;
         }
-        this.ensureNavigatorPanel();
+        this.ensureNavigatorPanel(false, this.navigatorFilter);
         if (this.navigatorFrame) {
             this.navigatorFrame.title = this.messages.actions.cmsCollections;
         }
@@ -1528,7 +1644,7 @@ class EinblickEditRuntime {
     isNavigatorOpen() {
         return this.navigatorOpen && !!this.navigatorPanel;
     }
-    ensureNavigatorPanel(reportErrors = false) {
+    ensureNavigatorPanel(reportErrors = false, filter) {
         if (this.navigatorPanel) {
             return true;
         }
@@ -1538,7 +1654,7 @@ class EinblickEditRuntime {
         let navigatorUrl;
         const nonce = createRandomId();
         try {
-            navigatorUrl = this.buildNavigatorUrl(nonce);
+            navigatorUrl = this.buildNavigatorUrl(nonce, filter);
         }
         catch (error) {
             if (reportErrors) {
@@ -1565,18 +1681,22 @@ class EinblickEditRuntime {
         this.navigatorPanel = panel;
         this.navigatorFrame = iframe;
         this.navigatorNonce = nonce;
+        this.navigatorFilter = filter ?? null;
         return true;
     }
-    openNavigator() {
+    openNavigator(filter) {
         if (!this.state.isAuthenticated) {
             this.callbacks.onError?.(this.messages.errors.signInToEditContent);
             return;
         }
-        if (this.isNavigatorOpen()) {
+        if (this.isNavigatorOpen() && !filter) {
             return;
         }
+        if (this.isNavigatorOpen() && filter) {
+            this.removeNavigatorPanel(false);
+        }
         this.setBottomBarMenuOpen(false);
-        if (!this.ensureNavigatorPanel(true) || !this.navigatorPanel) {
+        if (!this.ensureNavigatorPanel(true, filter) || !this.navigatorPanel) {
             return;
         }
         this.navigatorOpen = true;
@@ -1603,6 +1723,7 @@ class EinblickEditRuntime {
         this.navigatorPanel = null;
         this.navigatorFrame = null;
         this.navigatorNonce = null;
+        this.navigatorFilter = null;
         this.navigatorOpen = false;
         if (hadNavigator && updateBottomBar) {
             this.updateBottomBar();
@@ -1945,6 +2066,7 @@ class EinblickEditRuntime {
         url.searchParams.set('nonce', nonce);
         url.searchParams.set('sessionToken', sessionToken);
         url.searchParams.set('returnTo', window.location.href);
+        url.searchParams.set('sourceType', binding.sourceType ?? 'cms');
         url.searchParams.set('resourceSlug', binding.resourceSlug);
         url.searchParams.set('recordId', binding.recordId);
         if (intent === 'create') {
@@ -1955,7 +2077,7 @@ class EinblickEditRuntime {
         }
         return url.toString();
     }
-    buildNavigatorUrl(nonce) {
+    buildNavigatorUrl(nonce, filter) {
         const sessionToken = this.getActiveSessionToken();
         if (!sessionToken) {
             throw new Error(this.messages.errors.editSessionExpired);
@@ -1964,6 +2086,15 @@ class EinblickEditRuntime {
         url.searchParams.set('origin', window.location.origin);
         url.searchParams.set('nonce', nonce);
         url.searchParams.set('sessionToken', sessionToken);
+        if (filter?.sourceType) {
+            url.searchParams.set('sourceType', filter.sourceType);
+        }
+        if (filter?.resourceSlug) {
+            url.searchParams.set('resourceSlug', filter.resourceSlug);
+        }
+        if (filter?.recordIds && filter.recordIds.length > 0) {
+            url.searchParams.set('recordIds', filter.recordIds.join(','));
+        }
         return url.toString();
     }
     buildCollectionEditorUrl(args) {
@@ -1976,7 +2107,11 @@ class EinblickEditRuntime {
         url.searchParams.set('nonce', args.nonce);
         url.searchParams.set('sessionToken', sessionToken);
         url.searchParams.set('returnTo', window.location.href);
+        url.searchParams.set('sourceType', args.sourceType ?? 'cms');
         url.searchParams.set('collectionId', args.collectionId);
+        if (args.resourceSlug) {
+            url.searchParams.set('resourceSlug', args.resourceSlug);
+        }
         url.searchParams.set('intent', args.intent);
         if (args.recordId) {
             url.searchParams.set('recordId', args.recordId);
@@ -2008,6 +2143,7 @@ class EinblickEditRuntime {
         }
         const selector = [
             '[data-einblick-editable="true"]',
+            `[data-einblick-source-type="${CSS.escape(binding.sourceType ?? 'cms')}"]`,
             `[data-einblick-resource="${CSS.escape(binding.resourceSlug)}"]`,
         ].join('');
         const elements = document.querySelectorAll(selector);
@@ -2041,6 +2177,7 @@ class EinblickEditRuntime {
             const parentBinding = readBindingFromElement(parent);
             if (parentBinding &&
                 !parentBinding.fieldKey &&
+                (parentBinding.sourceType ?? 'cms') === (binding.sourceType ?? 'cms') &&
                 parentBinding.resourceSlug === binding.resourceSlug &&
                 parentBinding.recordId === binding.recordId) {
                 return parent;
@@ -2061,6 +2198,7 @@ class EinblickEditRuntime {
         }
         const selector = [
             '[data-einblick-editable="true"]',
+            `[data-einblick-source-type="${CSS.escape(binding.sourceType ?? 'cms')}"]`,
             `[data-einblick-resource="${CSS.escape(binding.resourceSlug)}"]`,
             `[data-einblick-record-id="${CSS.escape(binding.recordId)}"]`,
             '[data-einblick-field-key]',
@@ -2090,6 +2228,7 @@ class EinblickEditRuntime {
     findElementForBinding(binding) {
         const selector = [
             '[data-einblick-editable="true"]',
+            `[data-einblick-source-type="${CSS.escape(binding.sourceType ?? 'cms')}"]`,
             `[data-einblick-resource="${CSS.escape(binding.resourceSlug)}"]`,
             `[data-einblick-record-id="${CSS.escape(binding.recordId)}"]`,
             binding.fieldKey
@@ -2421,6 +2560,7 @@ class EinblickEditRuntime {
             nonce: this.bridgeNonce,
             requestId,
             payload: {
+                sourceType: binding.sourceType ?? 'cms',
                 resourceSlug: binding.resourceSlug,
                 recordId: binding.recordId,
                 fieldKey: binding.fieldKey,
@@ -2474,6 +2614,7 @@ class EinblickEditRuntime {
             nonce: this.bridgeNonce,
             requestId,
             payload: {
+                sourceType: binding.sourceType ?? 'cms',
                 resourceSlug: binding.resourceSlug,
                 recordId: binding.recordId,
                 fieldKey: binding.fieldKey,
@@ -2542,6 +2683,8 @@ class EinblickEditRuntime {
                 nonce,
                 intent: args.intent,
                 recordId: args.recordId,
+                sourceType: args.sourceType,
+                resourceSlug: args.resourceSlug,
             });
         }
         catch (error) {
@@ -2554,6 +2697,7 @@ class EinblickEditRuntime {
         this.editorTarget = null;
         this.editorBinding = args.resourceSlug
             ? {
+                sourceType: args.sourceType ?? 'cms',
                 resourceSlug: args.resourceSlug,
                 recordId: args.recordId ?? '',
                 resourceMode: 'collection',
@@ -2625,6 +2769,7 @@ export function createEinblickEditRuntime(options) {
         login: (loginOptions) => runtime.login(loginOptions),
         openEditor: (binding, element) => runtime.openEditor(binding, element),
         setLocale: (locale) => runtime.setLocale(locale),
+        setResourceHints: (hints) => runtime.setResourceHints(hints),
     };
 }
 //# sourceMappingURL=runtime.js.map