retold-remote 0.0.22 → 0.0.25

package/source/views/PictView-Remote-MediaViewer.js

@@ -2,6 +2,7 @@ const libPictView = require('pict-view');
 
 const _MediaViewerEbookViewer = require('./MediaViewer-EbookViewer');
 const _MediaViewerCodeViewer = require('./MediaViewer-CodeViewer');
+const _MediaViewerPdfViewer = require('./MediaViewer-PdfViewer');
 
 const _ViewConfiguration =
 {
@@ -59,6 +60,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 		tmpHTML += '<button class="retold-remote-viewer-nav-btn" onclick="pict.providers[\'RetoldRemote-GalleryNavigation\'].closeViewer()" title="Back (Esc)">&larr; Back</button>';
 		tmpHTML += '<button class="retold-remote-viewer-nav-btn" onclick="pict.providers[\'RetoldRemote-GalleryNavigation\'].prevFile()" title="Previous (k)">&lsaquo; Prev</button>';
 		tmpHTML += '<div class="retold-remote-viewer-title">' + this.pict.providers['RetoldRemote-FormattingUtilities'].escapeHTML(tmpFileName) + '</div>';
+		tmpHTML += '<button class="retold-remote-viewer-nav-btn" id="RetoldRemote-HeaderExploreBtn" onclick="pict.views[\'RetoldRemote-ImageExplorer\'].showExplorer(pict.AppData.RetoldRemote.CurrentViewerFile)" title="Explore image (e)" style="display:none;">&#128269; Explore</button>';
 		tmpHTML += '<button class="retold-remote-viewer-nav-btn" onclick="pict.providers[\'RetoldRemote-GalleryNavigation\'].nextFile()" title="Next (j)">Next &rsaquo;</button>';
 		tmpHTML += '<button class="retold-remote-viewer-nav-btn" onclick="pict.providers[\'RetoldRemote-GalleryNavigation\']._toggleFileInfo()" title="Info (i)">&#9432;</button>';
 		tmpHTML += '<button class="retold-remote-viewer-nav-btn" onclick="pict.views[\'RetoldRemote-MediaViewer\'].toggleDistractionFree()" title="Distraction-Free (d)">&#9634;</button>';
@@ -127,7 +129,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 			this._loadCodeViewer(tmpContentURL, pFilePath);
 		}
 
-		// Load ebook viewer for epub/mobi
+		// Load document viewers: ebook for epub/mobi, PDF for pdf, convert-then-PDF for others
 		if (pMediaType === 'document')
 		{
 			let tmpExt = pFilePath.replace(/^.*\./, '').toLowerCase();
@@ -135,7 +137,15 @@ class RetoldRemoteMediaViewerView extends libPictView
 			{
 				this._loadEbookViewer(tmpContentURL, pFilePath);
 			}
-
+			else if (tmpExt === 'pdf')
+			{
+				this._loadPdfViewer(tmpContentURL, pFilePath);
+			}
+			else
+			{
+				// Convertible document types — convert to PDF first, then load PDF viewer
+				this._loadConvertedDocumentViewer(pFilePath);
+			}
 		}
 
 		// Set up swipe navigation for touch devices
@@ -533,19 +543,12 @@ class RetoldRemoteMediaViewerView extends libPictView
 		tmpImg.onclick = function () { pict.views['RetoldRemote-ImageViewer'].toggleZoom(); };
 		tmpFragment.appendChild(tmpImg);
 
-		// Explore button (always present, initially hidden unless pShowExplore)
-		let tmpBtn = document.createElement('button');
-		tmpBtn.className = 'retold-remote-image-explore-btn';
-		tmpBtn.id = 'RetoldRemote-ImageExploreBtn';
-		tmpBtn.style.display = pShowExplore ? '' : 'none';
-		tmpBtn.title = 'Open in deep-zoom explorer (e)';
-		tmpBtn.innerHTML = '&#128269; Explore';
-		tmpBtn.onclick = function ()
-		{
-			pict.views['RetoldRemote-ImageExplorer'].showExplorer(
-				pict.AppData.RetoldRemote.CurrentViewerFile);
-		};
-		tmpFragment.appendChild(tmpBtn);
+		// Always show the Explore button in the header nav bar for images
+		let tmpHeaderExploreBtn = document.getElementById('RetoldRemote-HeaderExploreBtn');
+		if (tmpHeaderExploreBtn)
+		{
+			tmpHeaderExploreBtn.style.display = '';
+		}
 
 		// Dimension badge for large images
 		if (pShowExplore && pOrigWidth && pOrigHeight)
@@ -568,12 +571,6 @@ class RetoldRemoteMediaViewerView extends libPictView
 			+ 'id="RetoldRemote-ImageViewer-Img" '
 			+ 'onload="pict.views[\'RetoldRemote-ImageViewer\'].initImage()" '
 			+ 'onclick="pict.views[\'RetoldRemote-ImageViewer\'].toggleZoom()">';
-		// Explore button (hidden by default, shown by ImageViewer for large images)
-		tmpHTML += '<button class="retold-remote-image-explore-btn" id="RetoldRemote-ImageExploreBtn" '
-			+ 'style="display:none" '
-			+ 'onclick="pict.views[\'RetoldRemote-ImageExplorer\'].showExplorer(pict.AppData.RetoldRemote.CurrentViewerFile)" '
-			+ 'title="Open in deep-zoom explorer (e)">'
-			+ '&#128269; Explore</button>';
 		return tmpHTML;
 	}
 
@@ -786,9 +783,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 
 		if (tmpExtension === 'pdf')
 		{
-			return '<iframe src="' + pURL + '" '
-				+ 'style="width: 100%; height: 100%; border: none;">'
-				+ '</iframe>';
+			return this._buildPdfHTML(pURL, pFileName, pFilePath);
 		}
 
 		if (tmpExtension === 'epub' || tmpExtension === 'mobi')
@@ -796,7 +791,15 @@ class RetoldRemoteMediaViewerView extends libPictView
 			return this._buildEbookHTML(pURL, pFileName, pFilePath);
 		}
 
-		// For other document types, show a download link
+		// For convertible document types (doc, docx, rtf, odt, wpd, etc.),
+		// show the PDF viewer shell — conversion happens async in _loadDocumentViewer
+		let tmpConvertibleExts = { 'doc': true, 'docx': true, 'rtf': true, 'odt': true, 'wpd': true, 'wps': true, 'pages': true, 'odp': true, 'ppt': true, 'pptx': true, 'ods': true, 'xls': true, 'xlsx': true };
+		if (tmpConvertibleExts[tmpExtension])
+		{
+			return this._buildPdfHTML(pURL, pFileName, pFilePath);
+		}
+
+		// Unknown document types: show a download link
 		let tmpIconProvider = this.pict.providers['RetoldRemote-Icons'];
 		let tmpDocIconHTML = tmpIconProvider ? '<span class="retold-remote-icon retold-remote-icon-lg">' + tmpIconProvider.getIcon('document-large', 64) + '</span>' : '&#128196;';
 		return '<div style="text-align: center; padding: 40px;">'
@@ -813,6 +816,60 @@ class RetoldRemoteMediaViewerView extends libPictView
 	// ebookGoToChapter, ebookPrevPage, ebookNextPage, toggleEbookTOC
 	// are in MediaViewer-EbookViewer.js (mixed in below).
 
+	/**
+	 * Convert a document (doc, docx, rtf, odt, wpd, etc.) to PDF and load in the PDF viewer.
+	 * Shows a converting message in the PDF content area while waiting.
+	 *
+	 * @param {string} pFilePath - Relative file path
+	 */
+	_loadConvertedDocumentViewer(pFilePath)
+	{
+		let tmpSelf = this;
+		let tmpProvider = this.pict.providers['RetoldRemote-Provider'];
+		let tmpPathParam = tmpProvider ? tmpProvider._getPathParam(pFilePath) : encodeURIComponent(pFilePath);
+
+		// Show converting message in the PDF content area
+		let tmpContent = document.getElementById('RetoldRemote-PdfContent');
+		if (tmpContent)
+		{
+			tmpContent.innerHTML = '<div style="text-align:center;padding:40px;color:var(--retold-text-dim);">'
+				+ '<div style="font-size:1.5rem;margin-bottom:12px;">&#9881;</div>'
+				+ 'Converting document to PDF\u2026'
+				+ '</div>';
+		}
+
+		fetch('/api/media/doc-convert?path=' + tmpPathParam)
+			.then((pResponse) => pResponse.json())
+			.then((pData) =>
+			{
+				if (!pData || !pData.Success)
+				{
+					throw new Error(pData ? pData.Error : 'Conversion failed.');
+				}
+
+				// Build the PDF URL from the ebook cache (same serving endpoint)
+				let tmpPdfURL = '/api/media/ebook/' + pData.CacheKey + '/' + pData.OutputFilename;
+
+				// Load the PDF viewer with the converted file
+				tmpSelf._loadPdfViewer(tmpPdfURL, pFilePath);
+			})
+			.catch((pError) =>
+			{
+				if (tmpContent)
+				{
+					let tmpFmt = tmpSelf.pict.providers['RetoldRemote-FormattingUtilities'];
+					tmpContent.innerHTML = '<div style="text-align:center;padding:40px;color:var(--retold-text-dim);">'
+						+ '<div style="margin-bottom:12px;color:#e06c75;">Conversion failed</div>'
+						+ '<div style="font-size:0.85rem;">' + tmpFmt.escapeHTML(pError.message) + '</div>'
+						+ '<div style="margin-top:16px;">'
+						+ '<a href="' + (tmpProvider ? tmpProvider.getContentURL(pFilePath) : '/content/' + encodeURIComponent(pFilePath))
+						+ '" target="_blank" style="color:var(--retold-accent);font-size:0.85rem;">Download original file</a>'
+						+ '</div>'
+						+ '</div>';
+				}
+			});
+	}
+
 	_buildFallbackHTML(pURL, pFileName)
 	{
 		let tmpIconProvider = this.pict.providers['RetoldRemote-Icons'];
@@ -942,6 +999,7 @@ class RetoldRemoteMediaViewerView extends libPictView
 
 Object.assign(RetoldRemoteMediaViewerView.prototype, _MediaViewerEbookViewer);
 Object.assign(RetoldRemoteMediaViewerView.prototype, _MediaViewerCodeViewer);
+Object.assign(RetoldRemoteMediaViewerView.prototype, _MediaViewerPdfViewer);
 
 RetoldRemoteMediaViewerView.default_configuration = _ViewConfiguration;
 

package/source/views/PictView-Remote-SubimagesPanel.js

@@ -0,0 +1,353 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "RetoldRemote-SubimagesPanel",
+	DefaultRenderable: "RetoldRemote-SubimagesPanel",
+	DefaultDestinationAddress: "#RetoldRemote-Subimages-Container",
+	AutoRender: false,
+
+	CSS: ``
+};
+
+/**
+ * Subimages Panel — sidebar tab showing labeled subimage regions
+ * for the currently viewed image file.
+ *
+ * Regions are fetched from the SubimageService API and displayed
+ * as a list with label, dimensions, and action buttons.
+ */
+class RetoldRemoteSubimagesPanelView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+		this._regions = [];
+		this._currentPath = '';
+	}
+
+	/**
+	 * Render the subimages panel for the current file.
+	 */
+	render()
+	{
+		let tmpContainer = document.getElementById('RetoldRemote-Subimages-Container');
+		if (!tmpContainer)
+		{
+			return;
+		}
+
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		let tmpFilePath = tmpRemote.CurrentViewerFile;
+		let tmpMediaType = tmpRemote.CurrentViewerMediaType;
+
+		// Show for images and documents (EPUB, PDF, CBZ pages)
+		if (!tmpFilePath)
+		{
+			tmpContainer.innerHTML = '<div style="padding:12px;color:var(--retold-text-dim);font-size:0.82rem;">View a file to see its regions.</div>';
+			this._regions = [];
+			this._currentPath = '';
+			return;
+		}
+
+		// If the file changed, fetch regions
+		if (tmpFilePath !== this._currentPath)
+		{
+			this._currentPath = tmpFilePath;
+			this._fetchAndRender(tmpFilePath, tmpContainer);
+			return;
+		}
+
+		// Re-render with cached regions (e.g. after add/delete)
+		this._renderRegionList(tmpContainer);
+	}
+
+	/**
+	 * Force a refresh from the server for the current file.
+	 */
+	refresh()
+	{
+		this._currentPath = '';
+		this.render();
+	}
+
+	/**
+	 * Fetch regions from the server and render.
+	 *
+	 * @param {string} pFilePath - Relative file path
+	 * @param {HTMLElement} pContainer - The container to render into
+	 */
+	_fetchAndRender(pFilePath, pContainer)
+	{
+		let tmpSelf = this;
+		let tmpProvider = this.pict.providers['RetoldRemote-Provider'];
+		let tmpPathParam = tmpProvider ? tmpProvider._getPathParam(pFilePath) : encodeURIComponent(pFilePath);
+
+		pContainer.innerHTML = '<div style="padding:12px;color:var(--retold-text-dim);font-size:0.82rem;">Loading\u2026</div>';
+
+		fetch('/api/media/subimage-regions?path=' + tmpPathParam)
+			.then((pResponse) => pResponse.json())
+			.then((pResult) =>
+			{
+				if (pResult && pResult.Success)
+				{
+					tmpSelf._regions = pResult.Regions || [];
+				}
+				else
+				{
+					tmpSelf._regions = [];
+				}
+				tmpSelf._renderRegionList(pContainer);
+			})
+			.catch(() =>
+			{
+				tmpSelf._regions = [];
+				tmpSelf._renderRegionList(pContainer);
+			});
+	}
+
+	/**
+	 * Render the region list into the container.
+	 *
+	 * @param {HTMLElement} pContainer - The container element
+	 */
+	_renderRegionList(pContainer)
+	{
+		if (!pContainer)
+		{
+			pContainer = document.getElementById('RetoldRemote-Subimages-Container');
+		}
+		if (!pContainer)
+		{
+			return;
+		}
+
+		// Also sync the regions to the image explorer if it's open
+		let tmpIEX = this.pict.views['RetoldRemote-ImageExplorer'];
+		if (tmpIEX && tmpIEX._currentPath === this._currentPath)
+		{
+			tmpIEX._savedRegions = this._regions;
+		}
+
+		let tmpFmt = this.pict.providers['RetoldRemote-FormattingUtilities'];
+		let tmpFileName = (this._currentPath || '').replace(/^.*\//, '');
+
+		let tmpHTML = '<div class="retold-remote-subimages-panel">';
+
+		// Header
+		tmpHTML += '<div style="padding:8px 10px;font-size:0.78rem;color:var(--retold-text-dim);border-bottom:1px solid var(--retold-border);">';
+		tmpHTML += tmpFmt.escapeHTML(tmpFileName);
+		tmpHTML += ' &mdash; ' + this._regions.length + ' region' + (this._regions.length !== 1 ? 's' : '');
+		tmpHTML += '</div>';
+
+		if (this._regions.length === 0)
+		{
+			tmpHTML += '<div style="padding:16px 12px;color:var(--retold-text-dim);font-size:0.8rem;text-align:center;">';
+			tmpHTML += 'No regions yet.<br>Use selection tools in the viewer to create regions.';
+			tmpHTML += '</div>';
+		}
+		else
+		{
+			for (let i = 0; i < this._regions.length; i++)
+			{
+				let tmpRegion = this._regions[i];
+				let tmpLabel = tmpRegion.Label || '(unlabeled)';
+				let tmpIsText = (tmpRegion.Type === 'text-selection');
+
+				// Build description based on region type
+				let tmpDesc = '';
+				if (tmpIsText)
+				{
+					let tmpPreview = (tmpRegion.SelectedText || '').substring(0, 60);
+					if ((tmpRegion.SelectedText || '').length > 60) tmpPreview += '\u2026';
+					tmpDesc = tmpPreview || '(no text)';
+					if (tmpRegion.PageNumber)
+					{
+						tmpDesc = 'p.' + tmpRegion.PageNumber + ' \u2014 ' + tmpDesc;
+					}
+					else if (tmpRegion.ChapterTitle)
+					{
+						tmpDesc = tmpRegion.ChapterTitle;
+					}
+				}
+				else
+				{
+					tmpDesc = (tmpRegion.Width || 0) + ' \u00d7 ' + (tmpRegion.Height || 0) + ' px';
+					if (tmpRegion.PageNumber)
+					{
+						tmpDesc = 'p.' + tmpRegion.PageNumber + ' \u2014 ' + tmpDesc;
+					}
+					else if (tmpRegion.X !== null && tmpRegion.Y !== null)
+					{
+						tmpDesc += ' at ' + tmpRegion.X + ', ' + tmpRegion.Y;
+					}
+				}
+
+				// Type icon
+				let tmpTypeIcon = tmpIsText ? '\uD83D\uDCDD' : '\uD83D\uDD32';
+
+				tmpHTML += '<div class="retold-remote-subimages-item" data-region-id="' + tmpRegion.ID + '">';
+
+				// Region info
+				tmpHTML += '<div class="retold-remote-subimages-item-info">';
+				tmpHTML += '<div class="retold-remote-subimages-item-label">' + tmpTypeIcon + ' ' + tmpFmt.escapeHTML(tmpLabel) + '</div>';
+				tmpHTML += '<div class="retold-remote-subimages-item-dims">' + tmpFmt.escapeHTML(tmpDesc) + '</div>';
+				tmpHTML += '</div>';
+
+				// Actions
+				tmpHTML += '<div class="retold-remote-subimages-item-actions">';
+				tmpHTML += '<button onclick="pict.views[\'RetoldRemote-SubimagesPanel\'].navigateToRegion(\'' + tmpRegion.ID + '\')" title="Navigate to region" style="font-size:0.7rem;padding:2px 6px;">&#128270;</button>';
+				tmpHTML += '<button onclick="pict.views[\'RetoldRemote-SubimagesPanel\'].addRegionToCollection(\'' + tmpRegion.ID + '\')" title="Add to collection" style="font-size:0.7rem;padding:2px 6px;">&#10010;</button>';
+				tmpHTML += '<button onclick="pict.views[\'RetoldRemote-SubimagesPanel\'].deleteRegion(\'' + tmpRegion.ID + '\')" title="Delete region" style="font-size:0.7rem;padding:2px 6px;">&#128465;</button>';
+				tmpHTML += '</div>';
+
+				tmpHTML += '</div>';
+			}
+		}
+
+		tmpHTML += '</div>';
+		pContainer.innerHTML = tmpHTML;
+	}
+
+	/**
+	 * Navigate to a specific region — handles images, EPUB, and PDF.
+	 *
+	 * @param {string} pRegionID - The region ID
+	 */
+	navigateToRegion(pRegionID)
+	{
+		let tmpRegion = null;
+		for (let i = 0; i < this._regions.length; i++)
+		{
+			if (this._regions[i].ID === pRegionID)
+			{
+				tmpRegion = this._regions[i];
+				break;
+			}
+		}
+		if (!tmpRegion)
+		{
+			return;
+		}
+
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		let tmpMediaViewer = this.pict.views['RetoldRemote-MediaViewer'];
+
+		// EPUB: navigate to CFI location
+		if (tmpRegion.CFI && tmpMediaViewer && tmpMediaViewer._activeRendition)
+		{
+			tmpMediaViewer._activeRendition.display(tmpRegion.CFI);
+			return;
+		}
+
+		// PDF: navigate to page
+		if (tmpRegion.PageNumber && tmpMediaViewer && typeof tmpMediaViewer._renderPdfPage === 'function')
+		{
+			tmpMediaViewer._renderPdfPage(tmpRegion.PageNumber);
+			return;
+		}
+
+		// Image: use image explorer
+		let tmpIEX = this.pict.views['RetoldRemote-ImageExplorer'];
+		if (tmpRemote.ActiveMode === 'image-explorer' && tmpIEX)
+		{
+			tmpIEX.zoomToRegion(pRegionID);
+		}
+		else if (tmpIEX && this._currentPath)
+		{
+			tmpIEX.showExplorer(this._currentPath);
+			setTimeout(() =>
+			{
+				tmpIEX.zoomToRegion(pRegionID);
+			}, 800);
+		}
+	}
+
+	/**
+	 * Add a subimage region to the active collection.
+	 *
+	 * @param {string} pRegionID - The region ID to add
+	 */
+	addRegionToCollection(pRegionID)
+	{
+		let tmpRegion = null;
+		for (let i = 0; i < this._regions.length; i++)
+		{
+			if (this._regions[i].ID === pRegionID)
+			{
+				tmpRegion = this._regions[i];
+				break;
+			}
+		}
+
+		if (!tmpRegion)
+		{
+			return;
+		}
+
+		let tmpCollMgr = this.pict.providers['RetoldRemote-CollectionManager'];
+		if (tmpCollMgr)
+		{
+			let tmpGUID = tmpCollMgr.getQuickAddTargetGUID();
+			if (tmpGUID)
+			{
+				tmpCollMgr.addSubimageToCollection(tmpGUID, tmpRegion, this._currentPath);
+			}
+			else
+			{
+				let tmpTopBar = this.pict.views['ContentEditor-TopBar'];
+				if (tmpTopBar && typeof tmpTopBar.showAddToCollectionDropdown === 'function')
+				{
+					tmpTopBar.showAddToCollectionDropdown();
+				}
+			}
+		}
+	}
+
+	/**
+	 * Delete a subimage region.
+	 *
+	 * @param {string} pRegionID - The region ID to delete
+	 */
+	deleteRegion(pRegionID)
+	{
+		let tmpIEX = this.pict.views['RetoldRemote-ImageExplorer'];
+		if (tmpIEX && tmpIEX._currentPath === this._currentPath)
+		{
+			// Delegate to the explorer which handles the API call and overlay removal
+			tmpIEX.deleteRegion(pRegionID);
+		}
+		else
+		{
+			// Delete directly via API
+			let tmpSelf = this;
+			let tmpProvider = this.pict.providers['RetoldRemote-Provider'];
+			let tmpPathParam = tmpProvider ? tmpProvider._getPathParam(this._currentPath) : encodeURIComponent(this._currentPath);
+
+			fetch('/api/media/subimage-regions/' + encodeURIComponent(pRegionID) + '?path=' + tmpPathParam,
+			{
+				method: 'DELETE'
+			})
+				.then((pResponse) => pResponse.json())
+				.then((pResult) =>
+				{
+					if (pResult && pResult.Success)
+					{
+						tmpSelf._regions = pResult.Regions || [];
+						tmpSelf._renderRegionList();
+
+						let tmpToast = tmpSelf.pict.providers['RetoldRemote-ToastNotification'];
+						if (tmpToast)
+						{
+							tmpToast.showToast('Region deleted');
+						}
+					}
+				})
+				.catch(() => {});
+		}
+	}
+}
+
+RetoldRemoteSubimagesPanelView.default_configuration = _ViewConfiguration;
+
+module.exports = RetoldRemoteSubimagesPanelView;

package/web-application/css/retold-remote.css

@@ -2263,26 +2263,7 @@ html, body
 {
 	opacity: 1;
 }
-.retold-remote-image-explore-btn
-{
-	position: absolute;
-	bottom: 16px;
-	right: 16px;
-	background: rgba(40, 44, 52, 0.85);
-	color: #abb2bf;
-	border: 1px solid rgba(255, 255, 255, 0.15);
-	padding: 6px 14px;
-	border-radius: 6px;
-	font-size: 0.82rem;
-	cursor: pointer;
-	z-index: 20;
-	transition: background 0.2s, color 0.2s;
-}
-.retold-remote-image-explore-btn:hover
-{
-	background: rgba(97, 175, 239, 0.3);
-	color: #fff;
-}
+/* Explore button overlay styles removed — button moved to nav bar */
 .retold-remote-image-large-badge
 {
 	position: absolute;
@@ -2480,6 +2461,75 @@ html, body
 	text-align: center;
 	color: var(--retold-text-secondary);
 }
+/* Subimage region overlays */
+.retold-remote-iex-region-overlay
+{
+	border: 2px solid rgba(229, 192, 123, 0.85);
+	background: rgba(229, 192, 123, 0.08);
+	pointer-events: none;
+	position: relative;
+}
+/* Subimages sidebar panel */
+.retold-remote-subimages-panel
+{
+	overflow-y: auto;
+	height: 100%;
+}
+.retold-remote-subimages-item
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 6px 10px;
+	border-bottom: 1px solid var(--retold-border);
+	cursor: default;
+	transition: background 0.15s;
+}
+.retold-remote-subimages-item:hover
+{
+	background: rgba(255, 255, 255, 0.04);
+}
+.retold-remote-subimages-item-info
+{
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+}
+.retold-remote-subimages-item-label
+{
+	font-size: 0.82rem;
+	color: var(--retold-text);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.retold-remote-subimages-item-dims
+{
+	font-size: 0.7rem;
+	color: var(--retold-text-dim);
+	margin-top: 1px;
+}
+.retold-remote-subimages-item-actions
+{
+	display: flex;
+	gap: 2px;
+	margin-left: 6px;
+	flex-shrink: 0;
+}
+.retold-remote-subimages-item-actions button
+{
+	background: transparent;
+	border: 1px solid var(--retold-border);
+	border-radius: 3px;
+	color: var(--retold-text-dim);
+	cursor: pointer;
+	transition: color 0.15s, border-color 0.15s;
+}
+.retold-remote-subimages-item-actions button:hover
+{
+	color: var(--retold-text);
+	border-color: var(--retold-accent);
+}
 
 /* ============================================================
    AudioExplorer
@@ -3515,6 +3565,23 @@ html, body
 	border-color: var(--retold-accent);
 	color: var(--retold-text-primary);
 }
+.retold-remote-collections-export-btn
+{
+	padding: 3px 8px;
+	border: 1px solid var(--retold-border);
+	border-radius: 3px;
+	background: transparent;
+	color: var(--retold-text-muted);
+	font-size: 0.72rem;
+	cursor: pointer;
+	font-family: inherit;
+	margin-left: auto;
+}
+.retold-remote-collections-export-btn:hover
+{
+	border-color: var(--retold-accent);
+	color: var(--retold-text-primary);
+}
 /* ---- Item rows ---- */
 .retold-remote-collection-item
 {