architwin 1.13.11 → 1.14.1

package/lib/atwinui/components/toolbar/i18n.js

@@ -195,7 +195,28 @@ i18n
                 "PipeCategoryName": "Enter pipe type name",
                 "HideShowAllPipes": "Hide/Show All Pipes",
                 "Pipe": "Pipe",
-                "Vertex": "Vertex"
+                "Vertex": "Vertex",
+                "ScreenShare": "Screen Share",
+                "Users": "Users",
+                "EndSession": "End Session",
+                "SharingSpace": "Sharing Space",
+                "On": "On",
+                "Off": "Off",
+                "BackToUserList": "Back to user list",
+                "ScreenShareRequestModalMessage": "Waiting for remote screen share confirmation",
+                "ScreenShareRequestModalSubMessage": "You are requesting to remotely share your space to",
+                "CancelRequest": "Cancel Request",
+                "ViewingRemoteSpace": "Viewing Remote Space",
+                "LeaveSession": "Leave Session",
+                "IsSharingTheirSpace": "Is sharing their space",
+                "ToYou": "to you",
+                "ViewingInstructions": "During a remote space sharing session, you cannot navigate around the space, only your host has control during the session",
+                "Pending": "Pending",
+                "NowSharing": "Now Sharing",
+                "ConfirmLeaveSession": "画面共有を終了しますか？",
+                "ConfirmLeaveSessionReminder": "",
+                "InSession": "In Session",
+                "Leave": "Leave",
             }
         },
         ja: {
@@ -391,6 +412,27 @@ i18n
                 "HideShowAllPipes": "全ての矢印マーカーを表示/非表示",
                 "Pipe": "矢印マーカー",
                 "Vertex": "頂点",
+                "Screen Share": "画面共有",
+                "Users": "ユーザー",
+                "EndSession": "画面共有を終了",
+                "SharingSpace": "画面共有",
+                "On": "オン",
+                "Off": "オフ",
+                "BackToUserList": "ユーザリストに戻る",
+                "ScreenShareRequestModalMessage": "先方の画面共有参加を待っています",
+                "ScreenShareRequestModalSubMessage": "画面共有のリクエストを受信しています",
+                "CancelRequest": "リクエストを拒否",
+                "ViewingRemoteSpace": "先方のスペースを表示",
+                "LeaveSession": "画面共有を終了",
+                "IsSharingTheirSpace": "上記のユーザが画面共有をしています",
+                "ToYou": "",
+                "ViewingInstructions": "画面共有中は供している人しかスペース内を動かすことができません",
+                "Pending": "承認待ち",
+                "NowSharing": "画面共有開始",
+                "ConfirmLeaveSession": "画面共有を終了しますか？",
+                "ConfirmLeaveSessionReminder": "",
+                "InSession": "共有中",
+                "Leave": "終了",
             }
         }
     },

package/lib/atwinui/components/toolbar/index.js

@@ -2,6 +2,8 @@ import { _mpConfig, themeManager } from "../../../architwin";
 import { renderSidebarContainer } from "./sidebarContainer";
 import { renderMenuBar, setActiveMenu, clearActiveMenu, getObjectListStatus } from "./menuBar";
 import { renderObjectListPane, renderObjectCards, removeObjectCard } from "./objectListPane";
+import { renderSpaceUserListPane } from "./spaceUserListPane";
+import { renderViewingRemoteSpace } from "./viewingRemoteSpace";
 import { renderAddObjectPane } from "./addObjectPane";
 import { renderTagFormPane, getTagFormData, setTagCategoriesOption, tagFormMode, selectedTag, renderCategoryDropdownOptions, toggleDropdown } from "./tagFormPane";
 import { renderTagListPane, renderTags, renderTagRow, addClickEventToTagRow, setTagLink, getTagLink, selectedCategoryFilterId, selectedSubCategoryFilterId, filterTagList } from "./tagListPane";
@@ -23,12 +25,13 @@ import { renderRoomTreePane } from "./spacePartition/roomTreePane";
 import { renderRoomFormPane } from "./spacePartition/roomFormPane";
 import { renderBasepointCalibratePane } from "./basepointCalibratePane";
 import { renderGeneralSettingsMenu } from "./generalSettingsMenuPane";
+import { renderScreenSharePane } from "./screenSharePane";
 import { PipeList } from "./pipeListPane";
 import { PipeForm } from "./pipeFormPane";
 const pipeList = new PipeList();
 const pipeForm = new PipeForm();
 let iFrame, sidebarContainer;
-let menuBar, actionBar, objectListPane, addObjectPane, tagListPane, tagFormPane, addMediaScreenForm, libraryPane, tagMessagingPane, themePane, modelControlPane, actionSettingsPane, roomTreePane, roomFormPane, basepointCalibratePane, generalSettingsPane, pipeListPane, pipeFormPane;
+let menuBar, actionBar, objectListPane, addObjectPane, tagListPane, tagFormPane, addMediaScreenForm, libraryPane, tagMessagingPane, themePane, modelControlPane, actionSettingsPane, roomTreePane, roomFormPane, basepointCalibratePane, generalSettingsPane, spaceUserListPane, viewingRemoteSpace, usersPane, pipeListPane, pipeFormPane;
 function getIframeElement(iframeId) {
     if (!iframeId || iframeId === '') {
         console.error("IframeId is empty or undefined");
@@ -83,6 +86,8 @@ function renderToolbarUI(payload) {
     iFrame.appendChild(sidebarContainer);
     menuBar = renderMenuBar(iFrame);
     objectListPane = renderObjectListPane(payload.objects);
+    spaceUserListPane = renderSpaceUserListPane();
+    viewingRemoteSpace = renderViewingRemoteSpace();
     addObjectPane = renderAddObjectPane();
     tagFormPane = renderTagFormPane();
     tagListPane = renderTagListPane();
@@ -97,6 +102,7 @@ function renderToolbarUI(payload) {
     actionSettingsPane = renderActionSettingsPane();
     basepointCalibratePane = renderBasepointCalibratePane();
     generalSettingsPane = renderGeneralSettingsMenu();
+    usersPane = renderScreenSharePane();
     pipeListPane = pipeList.renderPane();
     pipeFormPane = pipeForm.renderPane();
     renderModal();
@@ -110,11 +116,14 @@ function renderToolbarUI(payload) {
     sidebarContainer.appendChild(tagMessagingPane);
     sidebarContainer.appendChild(libraryPane);
     sidebarContainer.appendChild(objectListPane);
+    sidebarContainer.appendChild(spaceUserListPane);
+    sidebarContainer.appendChild(viewingRemoteSpace);
     sidebarContainer.appendChild(addObjectPane);
     sidebarContainer.appendChild(tagFormPane);
     sidebarContainer.appendChild(tagListPane);
     sidebarContainer.appendChild(addMediaScreenForm);
     sidebarContainer.appendChild(generalSettingsPane);
+    sidebarContainer.appendChild(usersPane);
     sidebarContainer.appendChild(pipeListPane);
     sidebarContainer.appendChild(pipeFormPane);
     // Place your new pane
@@ -137,6 +146,9 @@ function renderToolbarUI(payload) {
     roomFormPane.style.display = 'none';
     actionSettingsPane.style.display = 'none';
     generalSettingsPane.style.display = 'none';
+    spaceUserListPane.style.display = 'none';
+    viewingRemoteSpace.style.display = 'none';
+    usersPane.style.display = 'none';
     pipeListPane.style.display = 'none';
     pipeFormPane.style.display = 'none';
     const customTheme = window.localStorage.getItem('customizedTheme');

package/lib/atwinui/components/toolbar/menuBar.d.ts

@@ -5,6 +5,7 @@ export declare let isThemeEnabled: boolean;
 export declare let isRoomCreationEnabled: boolean;
 export declare let isBIMEnabled: boolean;
 export declare let isGeneralSettingsEnabled: boolean;
+export declare let isSpaceScreenSharingEnabled: boolean;
 export declare let isPipeEnabled: boolean;
 export declare function renderMenuBar(iFrame: HTMLIFrameElement): HTMLDivElement;
 export declare function isAdminUser(): void;

package/lib/atwinui/components/toolbar/menuBar.js

@@ -12,6 +12,7 @@ export let isThemeEnabled = true;
 export let isRoomCreationEnabled = true;
 export let isBIMEnabled = true;
 export let isGeneralSettingsEnabled = true;
+export let isSpaceScreenSharingEnabled = true;
 export let isPipeEnabled = true;
 export function renderMenuBar(iFrame) {
     const bimImageIcon = getAssetUrl('bim.png');
@@ -66,6 +67,10 @@ export function renderMenuBar(iFrame) {
         <span class="mdi mdi-cog-outline" id="at-general-setting-btn" data-cy="at-general-setting-btn" target-pane="at-general-setting-pane"></span>
         <div class="at_icon_tooltip" data-cy="at-tooltip-general-setting">${i18n.t('General Settings')}</div>
     </div>
+    <div class="at_sidebar_button_icon" style="display:${isSpaceScreenSharingEnabled ? 'block' : 'none'}">
+        <span class="mdi mdi-monitor-multiple" id="at-screen-share-btn" data-cy="at-screen-share-pane" target-pane="at-screen-share-pane"></span>
+        <div class="at_icon_tooltip" data-cy="at-tooltip-screen-share">${i18n.t('Screen Share')}</div>
+    </div>
     `;
     return menuBarElement;
 }
@@ -108,6 +113,11 @@ function setMenuItemsStatus() {
             isGeneralSettingsEnabled = _mpConfig.toolbarConfig.menuItems.generalSetting;
             log.info("__@ isGeneralSettingsEnabled: ", isGeneralSettingsEnabled);
         }
+        // SCREEN SHARING
+        if (menuItems.spaceScreenSharing !== undefined) {
+            isSpaceScreenSharingEnabled = _mpConfig.toolbarConfig.menuItems.spaceScreenSharing;
+            log.info("__@ isSpaceScreenSharingEnabled: ", isSpaceScreenSharingEnabled);
+        }
         // PIPE CONFIG
         if (menuItems.pipe !== undefined) {
             isPipeEnabled = _mpConfig.toolbarConfig.menuItems.pipe;
@@ -136,6 +146,7 @@ export function setActiveMenu(id) {
         case 'at-settings-btn':
         case 'at-general-setting-btn':
         case 'at-pipe-btn':
+        case 'at-screen-share-btn':
             if (parent.classList.contains('at_sidebar_button_icon_active')) {
                 // remove
                 log.info("removing active...");

package/lib/atwinui/components/toolbar/screenSharePane.d.ts

@@ -7,7 +7,9 @@ export declare function renderOfflineUserRow(user: ScreenShareUser): HTMLTableRo
 export declare function handleClickEventUserRow(): void;
 export declare function renderSharingSpaceDetail(user: ScreenShareSessionUser): void;
 export declare function handleClickEventBackToUserListLink(): void;
-export declare function renderScreenShareRequestModal(request: ScreenShareRequest): void;
+export declare function renderScreenShareLeaveConfirmationModal(isUserHost: boolean): void;
+export declare function handleModalCancelButton(): void;
+export declare function handleModalLeaveButton(isHost: boolean): void;
 export declare function handleInputEventSelectPointerSettings(): void;
 export declare function handleClickEventEndSessionBtn(): void;
 export declare function handleScreenShareUsersUpdated(payload: {

package/lib/atwinui/components/toolbar/screenSharePane.js

@@ -1,4 +1,4 @@
-import { _currentSpace, dispatchSpaceEvent } from '../../../architwin';
+import { _currentSpace, _screenSharingHostUser, dispatchSpaceEvent } from '../../../architwin';
 import { SPACE_EVENTS } from '../../../types';
 import i18n from './i18n';
 let _spaceData = null;
@@ -25,7 +25,7 @@ export function renderScreenSharePane() {
                     <table id="at-user-list-table">
                     </table>
                 </div>
-                <button type="button" id="at-screen-share-end-session-btn" class="at_screen_share_end_session_btn"
+                <button type="button" id="at-screen-share-end-session-btn" class="at_SCREEN_SHARE_HOST_END_SESSION_btn"
                 style="display:none;">
                     ${i18n.t('EndSession')}
                 </button>
@@ -36,19 +36,22 @@ export function renderScreenSharePane() {
 }
 export function renderUsersList(users) {
     _onDisplayComponent = 'USER_LIST';
-    _screenShareUsers = sortUsersByStatus(users);
+    _screenShareUsers = [];
+    const _offlineUsers = users.filter(u => u.onlineStatus === 'offline');
+    const _notOfflineUsers = users.filter(u => u.onlineStatus !== 'offline');
+    _screenShareUsers = [..._notOfflineUsers, ..._offlineUsers];
     const usersListContainer = document.getElementById("at-user-list-table");
     if (!usersListContainer) {
         console.error("usersListContainer does not exist in DOM");
         return;
     }
     if (users.length <= 0) {
-        console.log("No tags to load");
+        console.log("No users to load");
         usersListContainer.innerHTML = ``;
         return;
     }
     usersListContainer.innerHTML = '';
-    users.forEach(user => {
+    _screenShareUsers.forEach(user => {
         const row = user.onlineStatus !== 'offline' ? renderOnlineUserRow(user) : renderOfflineUserRow(user);
         usersListContainer.appendChild(row);
     });
@@ -63,19 +66,19 @@ export function renderOnlineUserRow(user) {
     const iconOrSharingText = user.onlineStatus === 'in_session'
         ? `
         <div class="at_flex at_items_center at_justify_center">
-            <p>In Session</p>
+            <p>${i18n.t('InSession')}</p>
         </div>    
     `
         : user.onlineStatus === 'pending'
             ? `
             <div class="at_flex at_items_center at_justify_center">
-                <p>Pending</p>
+                <p>${i18n.t('Pending')}</p>
             </div>
         `
             : user.onlineStatus === 'sharing'
                 ? `
             <div class="at_flex at_items_center at_justify_center">
-                <p>Now Sharing</p>
+                <p>${i18n.t('NowSharing')}</p>
             </div>
         `
                 : `
@@ -191,7 +194,7 @@ export function renderSharingSpaceDetail(user) {
                     <span class="mdi mdi-arrow-left"></span>
                     <p> ${i18n.t('BackToUserList')}</p>
                 </div>
-                <button type="button" id="at-screen-share-end-session-btn" class="at_screen_share_end_session_btn">
+                <button type="button" id="at-screen-share-end-session-btn" class="at_SCREEN_SHARE_HOST_END_SESSION_btn">
                     ${i18n.t('EndSession')}
                 </button>
             </div>
@@ -225,23 +228,31 @@ function recreateUserListContainer() {
             <table id="at-user-list-table">
             </table>
         </div>
-        <button type="button" id="at-screen-share-end-session-btn" class="at_screen_share_end_session_btn"
+        <button type="button" id="at-screen-share-end-session-btn" class="at_button at_ghost at_w-full" 
         style="display:${endSessionBtnVisibility};">
-            ${i18n.t('End Session')}
+            ${i18n.t('EndSession')}
         </button>
     `;
 }
-export function renderScreenShareRequestModal(request) {
+export function renderScreenShareLeaveConfirmationModal(isUserHost) {
     _onDisplayComponent = 'SCREEN_SHARE_REQUEST_MODAL';
+    // remove any existing modal first
+    const existingModal = document.getElementById('at-screen-share-request-modal');
+    if (existingModal) {
+        existingModal.remove();
+    }
     const element = document.createElement('dialog');
     element.setAttribute('id', 'at-screen-share-request-modal');
     element.classList.add('at_screen_share_request_modal');
     element.innerHTML = `
         <div class="at_screen_share_request_modal_content at_flex at_flex_column at_justify_center at_items_center">
-            <div class="at_screen_share_icon mdi mdi-monitor-multiple"></div>
-            <h1 class="at_screen_share_request_message">${i18n.t('ScreenShareRequestModalMessage')}</h1>
-            <p class="at_screen_share_request_sub_message"> ${i18n.t('ScreenShareRequestModalSubMessage')} <strong>${request.user.name}</strong></p>
-            <button type="button" id="at-screen-share-request-btn"  class="at_screen_share_cancel_request_btn">${i18n.t('CancelRequest')}</button>
+            <div class="at_screen_share_icon mdi mdi-logout-variant"></div>
+            <h1 class="at_screen_share_request_message">${i18n.t('ConfirmLeaveSession')}</h1>
+            <p class="at_screen_share_request_sub_message"> ${i18n.t('ConfirmLeaveSessionReminder')}</p>
+            <div class="at_flex at_flex_row at_gap_2rem">
+                <button type="button" id="at-screen-share-leave-confirmation-cancel-btn" class="at_screen_share_leave_confirmation_cancel_btn">${i18n.t('Cancel')}</button>
+                <button type="button" id="at-screen-share-leave-confirmation-leave-btn" class="at_screen_share_leave_confirmation_leave_btn">${i18n.t('Leave')}</button>
+            </div>
         </div>
     `;
     // disabled modal dismiss via Esc key
@@ -255,21 +266,61 @@ export function renderScreenShareRequestModal(request) {
     element.addEventListener('cancel', (event) => {
         event.preventDefault();
     });
-    handleScreenShareCancelRequest(element, request);
     document.body.appendChild(element);
     element.showModal();
+    // attach button event handlers after modal is created
+    handleModalCancelButton();
+    handleModalLeaveButton(isUserHost);
 }
-function handleScreenShareCancelRequest(dialogElement, request) {
-    var _a;
-    if (dialogElement) {
-        (_a = dialogElement.querySelector('#at-screen-share-request-btn')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
-            const cancelRequest = Object.assign(Object.assign({}, request), { status: 'canceled' });
-            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_CANCEL_REQUEST, cancelRequest);
-            dialogElement.close();
-            dialogElement.remove();
-            _onDisplayComponent = 'USER_LIST';
-        });
-    }
+export function handleModalCancelButton() {
+    const cancelBtn = document.getElementById('at-screen-share-leave-confirmation-cancel-btn');
+    if (!cancelBtn)
+        return;
+    // Check if listener already exists
+    if (cancelBtn.dataset.listenerAttached === 'true')
+        return;
+    cancelBtn.addEventListener('click', () => {
+        console.log('Cancel button clicked');
+        // Close the modal
+        const modal = document.getElementById('at-screen-share-request-modal');
+        if (modal) {
+            modal.close();
+            modal.remove();
+        }
+        // Reset display component state if needed
+        _onDisplayComponent = null;
+    });
+    cancelBtn.dataset.listenerAttached = 'true';
+}
+export function handleModalLeaveButton(isHost) {
+    const leaveBtn = document.getElementById('at-screen-share-leave-confirmation-leave-btn');
+    if (!leaveBtn)
+        return;
+    // Check if listener already exists
+    if (leaveBtn.dataset.listenerAttached === 'true')
+        return;
+    leaveBtn.addEventListener('click', () => {
+        console.log('Leave button clicked');
+        // Close the modal first
+        const modal = document.getElementById('at-screen-share-request-modal');
+        if (modal) {
+            modal.close();
+            modal.remove();
+        }
+        if (isHost) {
+            // execute leave session logic
+            removeScreenShareSessionData();
+            recreateUserListContainer();
+            renderUsersList(_screenShareUsers);
+            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_HOST_END_SESSION, handleScreenShareEndSessionEvent);
+        }
+        else {
+            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_GUEST_LEAVE_SESSION, _screenSharingHostUser);
+        }
+        // Reset display component state
+        _onDisplayComponent = null;
+    });
+    leaveBtn.dataset.listenerAttached = 'true';
 }
 export function handleInputEventSelectPointerSettings() {
     const select = document.getElementById('at_select_screen_share_pointer');
@@ -284,15 +335,16 @@ export function handleInputEventSelectPointerSettings() {
 }
 export function handleClickEventEndSessionBtn() {
     const button = document.getElementById('at-screen-share-end-session-btn');
-    if (button) {
-        button.addEventListener('click', () => {
-            // internal logic end session
-            removeScreenShareSessionData();
-            recreateUserListContainer();
-            renderUsersList(_screenShareUsers);
-            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_END_SESSION, handleScreenShareEndSessionEvent);
-        });
-    }
+    if (!button)
+        return;
+    // check if listener already exists by looking for our marker
+    if (button.dataset.listenerAttached === 'true')
+        return;
+    button.addEventListener('click', () => {
+        renderScreenShareLeaveConfirmationModal(true);
+    });
+    // mark that listener is attached
+    button.dataset.listenerAttached = 'true';
 }
 export function handleScreenShareUsersUpdated(payload) {
     _spaceData = payload.space_data;

package/lib/atwinui/components/toolbar/spaceUserListPane.js

@@ -25,7 +25,7 @@ export function renderSpaceUserListPane() {
                 id="at-user-pane-end-session-btn" 
                 data-cy="at-user-pane-end-session-btn" 
                 target-pane="at-add-object-pane">
-                ${i18n.t('End Session')}
+                ${i18n.t('EndSession')}
             </div>
         </div>
 

package/lib/atwinui/components/toolbar/viewingRemoteSpace.js

@@ -7,7 +7,7 @@ export function renderViewingRemoteSpace() {
     element.setAttribute('data-cy', 'at-viewing-remote-space-pane');
     element.innerHTML = `
         <div class="at_panel_header">
-            <span>${i18n.t('Viewing Remote Space')}</span>
+            <span>${i18n.t('ViewingRemoteSpace')}</span>
         </div>
 
         <div id="at-sharing-user-container" >
@@ -15,10 +15,10 @@ export function renderViewingRemoteSpace() {
 
         <div class="at_button_row at_justify_center">
             <div 
-                class="at_button at_ghost at_bg_red_600 at_w-full" 
+                class="at_button at_ghost at_w-full" 
                 id="at-user-leave-session-btn" 
                 data-cy="at-user-leave-session-btn">
-                ${i18n.t('Leave Session')}
+                ${i18n.t('LeaveSession')}
             </div>
         </div>
     `;
@@ -55,7 +55,7 @@ export function renderRemoteSpaceViewing(user) {
     const statusText = document.createElement('div');
     statusText.className = 'at_text_sm at_text_white';
     statusText.innerHTML = `
-        ${i18n.t('Is sharing their space')} ${(_currentSpace === null || _currentSpace === void 0 ? void 0 : _currentSpace.name) || i18n.t('SPACE_NAME')} ${i18n.t('to you')}
+        ${i18n.t('IsSharingTheirSpace')} ${(_currentSpace === null || _currentSpace === void 0 ? void 0 : _currentSpace.name) || i18n.t('SPACE_NAME')} ${i18n.t('ToYou')}
     `;
     infoWrapper.appendChild(userNameEl);
     infoWrapper.appendChild(statusText);
@@ -77,6 +77,6 @@ export function renderRemoteSpaceViewing(user) {
     // === Instructional Text ===
     const instruction = document.createElement('div');
     instruction.className = 'at_text_xs at_text_center at_text_white at_opacity_80 at_mb_6';
-    instruction.textContent = i18n.t('During a remote space sharing session, you cannot navigate around the space, only your host has control during the session');
+    instruction.textContent = i18n.t('ViewingInstructions');
     container.appendChild(instruction);
 }

package/lib/atwinui/events.d.ts

@@ -20,6 +20,7 @@ declare function batchAddEventListenerById(ids: Array<string>, callback: EventLi
 declare function setActiveToolbarItem(itemId: string): void;
 declare function toggleDisplayPane(targetId: string): Promise<void>;
 declare function toggleActionBar(state: string): void;
+export declare function handleUserLeaveSessionClick(): void;
 declare function setupIndividualEventListeners(): void;
 declare function handleModelVisibility(objId: string): Promise<void>;
 declare function handleDeleteModel(objId: string): Promise<void>;

package/lib/atwinui/events.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { actionBar, renderObjectCards, renderLibraryCards, renderTags, renderTagRow, getTagFormData, addClickEventToTagRow, setActiveCard, setActiveMenu, removeObjectCard, clearActiveMenu, setTagCategoriesOption, toggleDropdown, tagFormMode, selectedTag, renderRecepientOptions, renderTagMessages, createTagMessage, setTagLink, setTagMessagingDetails, renderCategoryDropdownOptions, clearTagFormDropdown, clearActiveActionBtn, clearActiveCard, toggleActionBarButtons, selectedCategoryFilterId, selectedSubCategoryFilterId, filterTagList, toggleModal, setModalAction, } from "./components/toolbar";
-import { getTargetPosition, addMediaScreen, _3DXObjects, selectedObject, setTransformControls, copyObject, revertTransform, clearSelectedObject, removeTransformControls, getLibrary, getMpTags, renderTag, captureSpaceScreenshot, moveTag, subscribeSpaceEvent, setModelVisibility, disposeModel, disposeTag, _tags, _tagCategories, dispatchSpaceEvent, editTagLabel, editTagDescription, setTagMessageRecepients, setTagMessages, setSelectedTagUuid, renderMeetingSidebar, setTagIcon, setObjectTransformation, getSelectedObject, _atwin, isCdnMapDataAvailable, captureScreenshotAndCameraDetails, _mpConfig, cancelModelPlacement, _modelDetails, actionHistory, get3DXObjects, transformHistory, goToModel, themeManager, _partitionNodes, setSpacePartitionNodes, getSpaceId, setFloorBaseHeight, toggleWallVisibility, getChildrenOfModel, toggleFloorVisibility, renderPolygon, getCurrentPolygon, getFloorBaseHeight, setSelectedObject, redoDrawAction, undoDrawAction, setWallBaseHeight, clearWallBaseHeight, clearFloorBaseHeight, isToolbarFeatureEnabled, captureCurrentView, getCurrentFloor, setPipeCategories, setPipes, detachTagMedia, getTagDataCollection, setVertexPath } from "../architwin";
+import { getTargetPosition, addMediaScreen, _3DXObjects, selectedObject, setTransformControls, copyObject, revertTransform, clearSelectedObject, removeTransformControls, getLibrary, getMpTags, renderTag, captureSpaceScreenshot, moveTag, subscribeSpaceEvent, setModelVisibility, disposeModel, disposeTag, _tags, _tagCategories, dispatchSpaceEvent, editTagLabel, editTagDescription, setTagMessageRecepients, setTagMessages, setSelectedTagUuid, renderMeetingSidebar, setTagIcon, setObjectTransformation, getSelectedObject, _atwin, isCdnMapDataAvailable, captureScreenshotAndCameraDetails, _mpConfig, cancelModelPlacement, _modelDetails, actionHistory, get3DXObjects, transformHistory, goToModel, themeManager, _partitionNodes, setSpacePartitionNodes, getSpaceId, setFloorBaseHeight, toggleWallVisibility, getChildrenOfModel, toggleFloorVisibility, renderPolygon, getCurrentPolygon, getFloorBaseHeight, setSelectedObject, redoDrawAction, undoDrawAction, setWallBaseHeight, clearWallBaseHeight, clearFloorBaseHeight, isToolbarFeatureEnabled, captureCurrentView, getCurrentFloor, _spaceUsers, setPipeCategories, setPipes, detachTagMedia, getTagDataCollection, setVertexPath, _screenSharingHostUser } from "../architwin";
 import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
 import { SPACE_EVENTS, COORDINATE_SYSTEM, UNITS, DEGREE, MAP_OPTIONS, sortTagOptions, sortObjectOptions, CUSTOM_MAP_MODE } from "../types";
@@ -29,11 +29,12 @@ import { actionSettingsSelectOption, getTempCoordinateSystem, getTempMeasurement
 import { getBasepointCalibrateBpCoordinateValues, getBasepointCalibrateMpCoordinateValues, initBsepointCalibratePane, toggleBasepointCalibratePane } from "./components/toolbar/basepointCalibratePane";
 import { toggleGeneralMapOptions, initGeneralSelectedMap, getSelectedMapOption } from './components/toolbar/generalSettingsMenuPane';
 import { searchTagList, setSearchTagTerm, searchClearfield, getSearchTagTerm, sortTags, updateSelectedTagSortOption, resetSelectedTagSortOption } from './components/toolbar/tagListPane';
+import { renderUserRows } from "./components/toolbar/spaceUserListPane";
+import { renderRemoteSpaceViewing } from "./components/toolbar/viewingRemoteSpace";
 import { PipeList } from "./components/toolbar/pipeListPane";
 import { PipeForm } from "./components/toolbar/pipeFormPane";
-// import { EditPipeForm, initPipeFormPane, pipeFormData, setPipeFormMode } from "./components/toolbar/pipeFormPane";
-// import { initPipeData } from "./components/toolbar/addPipePane";
 import { unsendComment, timedoutComment, getTheseTagMessages } from './components/toolbar/tagMessagingPane';
+import { handleScreenShareAcceptRequest, handleScreenShareBackUserListPane, handleScreenShareEndSessionEvent, handleScreenShareUsersUpdated, renderScreenShareLeaveConfirmationModal } from "./components/toolbar/screenSharePane";
 const pipeList = new PipeList();
 const pipeForm = new PipeForm();
 let activeToolbarItem, activeActionItem, activePane, activeActionPane, cancelTagPlacementPrompt, cancelModelPlacementPrompt;
@@ -227,6 +228,12 @@ function toggleDisplayPane(targetId) {
                 else {
                     resetSelectedTagSortOption();
                 }
+                if (paneId === 'at-space-user-list-pane') {
+                    renderUserRows(_spaceUsers);
+                }
+                if (paneId === 'at-viewing-remote-space-pane') {
+                    renderRemoteSpaceViewing(_screenSharingHostUser);
+                }
                 if (paneId === 'at-tag-form-pane') {
                     log.info("Tag Form Pane");
                     setTagFormMode("ADD" /* FORM_MODE.ADD */);
@@ -276,6 +283,10 @@ function toggleDisplayPane(targetId) {
                     //setup pipe list pane initialization
                     pipeList.init();
                 }
+                if (paneId === 'at-screen-share-pane') {
+                    log.info('at-screen-share-pane');
+                    dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_PANE_OPEN);
+                }
                 if (paneId === 'at-pipe-form-pane') {
                     log.info("Pipe Pane");
                 }
@@ -310,6 +321,75 @@ function toggleActionBar(state) {
         return;
     }
 }
+function handleEndUserSession() {
+    const endSessionBtn = document.getElementById('at-user-pane-end-session-btn');
+    if (!endSessionBtn)
+        return;
+    endSessionBtn.addEventListener('click', () => {
+        dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_HOST_END_SESSION);
+        // re-render users 
+        renderUserRows(_spaceUsers);
+    });
+}
+function handleUserScreenShareClick() {
+    const shareButtons = document.querySelectorAll('[id^="at-user-screen-share-btn-"]');
+    shareButtons.forEach((btn) => {
+        const id = btn.id;
+        const indexMatch = id.match(/at-user-screen-share-btn-(\d+)/);
+        const userUuid = id.split('btn-')[1];
+        if (!userUuid)
+            return;
+        btn.addEventListener('click', (e) => {
+            // dispatch user uuid
+            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_REQUEST, userUuid);
+        });
+    });
+}
+export function handleUserLeaveSessionClick() {
+    const leaveSessionBtn = document.getElementById('at-user-leave-session-btn');
+    if (!leaveSessionBtn)
+        return;
+    // Check if listener already exists by looking for our marker
+    if (leaveSessionBtn.dataset.listenerAttached === 'true')
+        return;
+    leaveSessionBtn.addEventListener('click', () => {
+        // TODO: add actual end session logic here
+        console.log('@___MARK Leave Session button clicked');
+        renderScreenShareLeaveConfirmationModal(false);
+    });
+    // Mark that listener is attached
+    leaveSessionBtn.dataset.listenerAttached = 'true';
+}
+function handleUserCardContainer() {
+    const container = document.getElementById('at-space-user-card');
+    if (!container)
+        return;
+    const observer = new MutationObserver((mutations) => {
+        const hasChildren = container.children.length > 0;
+        if (hasChildren) {
+            handleUserScreenShareClick();
+        }
+    });
+    observer.observe(container, {
+        childList: true,
+        subtree: false // Only direct children
+    });
+}
+function handleLeaveSessionClick() {
+    const container = document.getElementById('at-sharing-user-container');
+    if (!container)
+        return;
+    const observer = new MutationObserver((mutations) => {
+        const hasChildren = container.children.length > 0;
+        if (hasChildren) {
+            handleUserLeaveSessionClick();
+        }
+    });
+    observer.observe(container, {
+        childList: true,
+        subtree: false // Only direct children
+    });
+}
 function setupIndividualEventListeners() {
     //handleAddModel()
     handleAddMediaScreen();
@@ -365,6 +445,9 @@ function setupIndividualEventListeners() {
     handleCloseCustomMinimap();
     handleCustomMapControls();
     handleCloseActiveMinimap();
+    handleEndUserSession();
+    handleUserCardContainer();
+    handleLeaveSessionClick();
     handleClickEventInTagSortOption();
     handleClickEventInObjectSortOption();
     handlePipeForm();
@@ -1335,6 +1418,10 @@ function setupSpaceEventSubscriptions() {
     subscribeSpaceEvent(SPACE_EVENTS.FLOOR_IMAGE_UPLOADED, handleCustomMapFloorImageUploaded);
     subscribeSpaceEvent(SPACE_EVENTS.FLOOR_IMAGE_UPLOAD_FAILED, handleCustomMapFloorUploadFailed);
     subscribeSpaceEvent(SPACE_EVENTS.PATH_UPDATED, handlePathUpdated);
+    subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_USERS_UPDATE, handleScreenShareUsersUpdated);
+    subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_HOST_END_SESSION, handleScreenShareEndSessionEvent);
+    subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_ACCEPT_REQUEST, handleScreenShareAcceptRequest);
+    subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_BACK_USER_LIST_PANE, handleScreenShareBackUserListPane);
 }
 function handleDragEnd(payload) {
     console.log("handleDragEnd payload", payload);

package/lib/tag.d.ts

@@ -82,4 +82,17 @@ declare function handleTagPlacerCreated(payload: {
     tagPointer: MpSdk.ISubscription;
     inputNode: MpSdk.Scene.INode;
 }): void;
-export { renderTag, disposeTag, moveTag, attachTagMedia, detachTagMedia, setTagIcon, editBillboard, editStem, editColor, saveTagDb, deleteTag, getTagColorCodeID, getEmbedlyData, cancelMoveTag, handleTagPlacerCreated };
+declare function registerSandbox(payload: {
+    sdk: MpSdk;
+    content: string;
+    options?: Partial<MpSdk.Tag.SandboxOptions>;
+}): Promise<[sandboxId: string, messenger: MpSdk.Tag.IMessenger]>;
+declare function attachSandbox(payload: {
+    sdk: MpSdk;
+    sandboxId: string;
+    tagIds: string[];
+}): Promise<{
+    sandboxId: string;
+    messenger: MpSdk.Tag.IMessenger;
+}>;
+export { renderTag, disposeTag, moveTag, attachTagMedia, detachTagMedia, setTagIcon, editBillboard, editStem, editColor, saveTagDb, deleteTag, getTagColorCodeID, getEmbedlyData, cancelMoveTag, handleTagPlacerCreated, attachSandbox, registerSandbox };