@cloudinary/asset-management-mcp 0.9.2 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudinary/asset-management-mcp",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "mcpName": "io.github.cloudinary/asset-management-mcp",
   "author": "Cloudinary",
   "type": "module",

package/src/landing-page.ts

@@ -939,7 +939,7 @@ http_headers = { "api-key" = "YOUR_API_KEY", "api-secret" = "YOUR_API_SECRET", "
         <h1>Instructions</h1>
         <p>One-click installation for Claude Desktop users</p>
         <div class="instruction-item">
-          <a href="https://github.com/cloudinary/asset-management-mcp/releases/download/v0.9.2/mcp-server.mcpb" download="mcp-server.mcpb" class="action-button header-action" style="display: inline-flex; margin-bottom: 16px;">
+          <a href="https://github.com/cloudinary/asset-management-mcp/releases/download/v0.9.3/mcp-server.mcpb" download="mcp-server.mcpb" class="action-button header-action" style="display: inline-flex; margin-bottom: 16px;">
             📥 Download MCP Bundle
           </a>
         </div>

package/src/lib/config.ts

@@ -113,8 +113,8 @@ export function serverURLFromOptions(options: SDKOptions): URL | null {
 export const SDK_METADATA = {
   language: "typescript",
   openapiDocVersion: "0.5.1",
-  sdkVersion: "0.9.2",
+  sdkVersion: "0.9.3",
   genVersion: "2.885.1",
   userAgent:
-    "speakeasy-sdk/mcp-typescript 0.9.2 2.885.1 0.5.1 @cloudinary/asset-management-mcp",
+    "speakeasy-sdk/mcp-typescript 0.9.3 2.885.1 0.5.1 @cloudinary/asset-management-mcp",
 } as const;

package/src/mcp-server/apps/app-shared.ts

@@ -116,7 +116,7 @@ export const SHARED_CSS_TOKENS = /* css */ `
 [data-theme="dark"] .status-warn, .dark .status-warn { background: #854d0e; color: #fef08a; }
 [data-theme="dark"] .status-err,  .dark .status-err  { background: #991b1b; color: #fecaca; }
 
-html { overflow: hidden; }
+html { scrollbar-gutter: auto; }
 body {
   font-family: var(--cld-font);
   background: var(--cld-bg);
@@ -125,6 +125,7 @@ body {
   line-height: 1.5;
   font-size: var(--cld-font-xs);
   position: relative;
+  overflow-x: hidden;
 }
 .theme-btn {
   width: 22px; height: 22px; border-radius: 50%;
@@ -163,9 +164,11 @@ export const SHARED_CSS_COMPONENTS = /* css */ `
 .link { cursor: pointer; }
 .link:hover { color: var(--cld-accent); text-decoration: underline; }
 
-/* Modal */
+/* Modal — positioned absolutely so it can be placed in the part of the
+ * iframe that is currently visible in the host's viewport (since position:fixed
+ * inside a tall iframe anchors to iframe-center, not the user's visible area). */
 .modal-overlay {
-  position: fixed; inset: 0;
+  position: absolute; left: 0; right: 0;
   background: rgba(0,0,0,0.45);
   display: flex; align-items: center; justify-content: center;
   z-index: 1000; backdrop-filter: blur(3px); padding: 24px;
@@ -1013,6 +1016,55 @@ function closeModal() {
   if (ov) ov.remove();
 }
 
+/* Position the modal overlay so it's centered on the part of the iframe
+ * the user is currently looking at. Inside an iframe that the host has
+ * sized to scrollHeight, position: fixed anchors to iframe-center, not
+ * the user's visible band — so we compute the visible band ourselves
+ * via IntersectionObserver and place the overlay absolutely there. */
+function positionModalInVisibleArea(overlay) {
+  if (!overlay) return;
+  var docH = Math.max(document.documentElement.scrollHeight, window.innerHeight);
+
+  // Try IntersectionObserver first (works cross-origin too)
+  if (typeof IntersectionObserver !== "undefined") {
+    var probe = document.createElement("div");
+    probe.style.cssText = "position:absolute;left:0;top:0;width:1px;height:" + docH + "px;pointer-events:none;visibility:hidden;";
+    document.body.appendChild(probe);
+    var io = new IntersectionObserver(function(entries) {
+      try {
+        var entry = entries[0];
+        var rect = entry.intersectionRect;
+        var rootRect = entry.rootBounds || entry.boundingClientRect;
+        // intersectionRect.top is in viewport coords; visible band of the
+        // document is from (probe.top + rect.top) to (probe.top + rect.bottom).
+        var probeTop = entry.boundingClientRect.top; // viewport-relative
+        var visibleTop = rect.top - probeTop;        // document-relative
+        var visibleHeight = rect.height;
+        if (visibleHeight > 0) {
+          overlay.style.top = visibleTop + "px";
+          overlay.style.height = visibleHeight + "px";
+        } else {
+          // Fallback: probe not intersecting (shouldn't happen with full-height probe)
+          overlay.style.top = (window.scrollY || 0) + "px";
+          overlay.style.height = window.innerHeight + "px";
+        }
+      } finally {
+        io.disconnect();
+        if (probe.parentNode) probe.parentNode.removeChild(probe);
+      }
+    });
+    io.observe(probe);
+    return;
+  }
+
+  // Fallback: same-origin only — read iframe's bounding rect
+  var rect = document.documentElement.getBoundingClientRect();
+  var visibleTop = rect.top < 0 ? -rect.top : 0;
+  var visibleHeight = Math.min(window.innerHeight, rect.bottom) - Math.max(0, rect.top);
+  overlay.style.top = visibleTop + "px";
+  overlay.style.height = Math.max(visibleHeight, 200) + "px";
+}
+
 function openModal(headerHtml, bodyHtml) {
   closeModal();
   var h = '<div class="modal-overlay"><div class="modal">';
@@ -1022,6 +1074,7 @@ function openModal(headerHtml, bodyHtml) {
   document.body.insertAdjacentHTML("beforeend", h);
 
   var overlay = document.querySelector(".modal-overlay");
+  positionModalInVisibleArea(overlay);
   overlay.addEventListener("click", function(e) {
     if (e.target === overlay || e.target.classList.contains("modal-close")) {
       closeModal();

package/src/mcp-server/apps/asset-gallery-app.ts

@@ -168,17 +168,27 @@ const GALLERY_CSS = /* css */ `
 }
 
 /* ── Multi-select bar ── */
+/* Wrapper takes layout space ONLY when a selection is active. When idle
+ * it's display:none so it contributes 0 to scrollHeight (no phantom
+ * scrollbar gutter / no extra iframe height). */
+.select-bar-wrap {
+  display: none;
+  position: sticky; bottom: 0; left: 0; right: 0;
+  justify-content: center; pointer-events: none;
+  z-index: 100; height: 64px;
+}
+.select-bar-wrap.visible { display: flex; }
 .select-bar {
-  position: fixed; bottom: 16px; left: 50%;
-  transform: translateX(-50%) translateY(80px);
+  position: absolute; bottom: 8px;
+  transform: translateY(80px);
   background: #1a1d24; color: white; border-radius: 40px;
   padding: 0 6px 0 16px; height: 48px;
   display: flex; align-items: center; gap: 4px;
   box-shadow: 0 8px 32px rgba(0,0,0,0.4);
   transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
-  opacity: 0; pointer-events: none; z-index: 100; white-space: nowrap;
+  opacity: 0; pointer-events: none; white-space: nowrap;
 }
-.select-bar.visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: all; }
+.select-bar-wrap.visible .select-bar { transform: translateY(0); opacity: 1; pointer-events: all; }
 .select-count { font-size: 13px; font-weight: 600; margin-right: 8px; }
 .bar-btn {
   height: 36px; padding: 0 14px; border: none; border-radius: 30px;
@@ -243,12 +253,12 @@ function showToast(msg) {
 }
 
 function updateSelectBar() {
-  var bar = document.getElementById("select-bar");
+  var wrap = document.getElementById("select-bar-wrap");
   var countEl = document.getElementById("select-count");
-  if (!bar || !countEl) return;
+  if (!wrap || !countEl) return;
   var n = selected.size;
   countEl.textContent = n + " selected";
-  bar.classList.toggle("visible", n > 0);
+  wrap.classList.toggle("visible", n > 0);
   var btn = document.getElementById("select-all-btn");
   if (btn) {
     var visible = getVisibleIndices();
@@ -528,7 +538,8 @@ function render() {
     h += "</div>";
   }
 
-  // Multi-select bar
+  // Multi-select bar (sticky, in-flow wrapper so iframe sizing stays truthful)
+  h += '<div class="select-bar-wrap" id="select-bar-wrap">';
   h += '<div class="select-bar" id="select-bar">';
   h += '<span class="select-count" id="select-count">0 selected</span>';
   h += '<div class="bar-divider"></div>';
@@ -538,6 +549,7 @@ function render() {
   h += '<div class="bar-divider"></div>';
   h += '<button class="bar-btn bar-ghost" id="bar-clear">' + IC.x + '</button>';
   h += '</div>';
+  h += '</div>';
 
   // Toast
   h += '<div class="gallery-toast" id="gallery-toast"></div>';
@@ -767,6 +779,9 @@ async function fetchDirect() {
   console.log(LOG_PREFIX, "fetchDirect ->", name);
 
   document.getElementById("app").innerHTML = '<div class="status">Fetching assets\\u2026</div>';
+  requestAnimationFrame(function() {
+    app.reportSize(Math.max(document.documentElement.scrollHeight, MIN_HEIGHT));
+  });
   try {
     var res = await app.callServerTool({ name: name, arguments: args });
     var data = ingestResult(res);
@@ -818,6 +833,7 @@ async function loadMore() {
 function refreshGallery() {
   allResources = [];
   lastCursor = null;
+  selected.clear();
   fetchDirect();
 }
 

package/src/mcp-server/mcp-server.ts

@@ -22,7 +22,7 @@ const routes = buildRouteMap({
 export const app = buildApplication(routes, {
   name: "mcp",
   versionInfo: {
-    currentVersion: "0.9.2",
+    currentVersion: "0.9.3",
   },
 });
 

package/src/mcp-server/server.ts

@@ -60,7 +60,7 @@ export function createMCPServer(deps: {
 }) {
   const server = new McpServer({
     name: "CloudinaryAssetMgmt",
-    version: "0.9.2",
+    version: "0.9.3",
   });
 
   const getClient = deps.getSDK || (() =>