@hai3/studio 0.3.0-alpha.1 → 0.4.0-alpha.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import React3, { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
-import { I18nRegistry, Language, i18nRegistry, ScreensetCategory, eventBus, useTranslation, useNavigation, screensetRegistry, useAppSelector, useTheme, getLanguageMetadata, LanguageDisplayMode, SUPPORTED_LANGUAGES, TextDirection, toggleMockMode } from '@hai3/react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Card, Button, ButtonSize, ButtonVariant, DropdownMenu, DropdownMenuTrigger, DropdownButton, DropdownMenuContent, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, Switch } from '@hai3/uikit';
+import React2, { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
+import { I18nRegistry, Language, i18nRegistry, eventBus, useHAI3, useTranslation, HAI3_SCREEN_DOMAIN, HAI3_ACTION_MOUNT_EXT, useRegisteredPackages, useActivePackage, useAppSelector, useTheme, getLanguageMetadata, LanguageDisplayMode, SUPPORTED_LANGUAGES, TextDirection, toggleMockMode } from '@hai3/react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Card, Button, ButtonSize, ButtonVariant, DropdownMenu, DropdownMenuTrigger, DropdownButton, DropdownMenuContent, DropdownMenuItem, Switch } from '@hai3/uikit';
 import { clamp, upperFirst } from 'lodash';
 
 var __create = Object.create;
@@ -45,7 +45,8 @@ var require_en = __commonJS({
         screenset: "Screenset:",
         theme: "Theme:",
         language: "Language:",
-        mockApi: "Mock API"
+        mockApi: "Mock API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -66,7 +67,8 @@ var require_ar = __commonJS({
         screenset: "\u0645\u062C\u0645\u0648\u0639\u0629 \u0627\u0644\u0634\u0627\u0634\u0627\u062A:",
         theme: "\u0627\u0644\u0633\u0645\u0629:",
         language: "\u0627\u0644\u0644\u063A\u0629:",
-        mockApi: "\u0648\u0627\u062C\u0647\u0629 \u0628\u0631\u0645\u062C\u064A\u0629 \u0648\u0647\u0645\u064A\u0629"
+        mockApi: "\u0648\u0627\u062C\u0647\u0629 \u0628\u0631\u0645\u062C\u064A\u0629 \u0648\u0647\u0645\u064A\u0629",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -87,7 +89,8 @@ var require_bn = __commonJS({
         screenset: "\u09B8\u09CD\u0995\u09CD\u09B0\u09BF\u09A8\u09B8\u09C7\u099F:",
         theme: "\u09A5\u09BF\u09AE:",
         language: "\u09AD\u09BE\u09B7\u09BE:",
-        mockApi: "\u09AE\u0995 API"
+        mockApi: "\u09AE\u0995 API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -108,7 +111,8 @@ var require_cs = __commonJS({
         screenset: "Sada obrazovek:",
         theme: "Motiv:",
         language: "Jazyk:",
-        mockApi: "Simulovan\xE9 API"
+        mockApi: "Simulovan\xE9 API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -129,7 +133,8 @@ var require_da = __commonJS({
         screenset: "Sk\xE6rms\xE6t:",
         theme: "Tema:",
         language: "Sprog:",
-        mockApi: "Mock-API"
+        mockApi: "Mock-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -150,7 +155,8 @@ var require_de = __commonJS({
         screenset: "Bildschirmset:",
         theme: "Design:",
         language: "Sprache:",
-        mockApi: "Mock-API"
+        mockApi: "Mock-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -171,7 +177,8 @@ var require_el = __commonJS({
         screenset: "\u03A3\u03CD\u03BD\u03BF\u03BB\u03BF \u039F\u03B8\u03BF\u03BD\u03CE\u03BD:",
         theme: "\u0398\u03AD\u03BC\u03B1:",
         language: "\u0393\u03BB\u03CE\u03C3\u03C3\u03B1:",
-        mockApi: "Mock API"
+        mockApi: "Mock API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -192,7 +199,8 @@ var require_es = __commonJS({
         screenset: "Conjunto de Pantallas:",
         theme: "Tema:",
         language: "Idioma:",
-        mockApi: "API Simulada"
+        mockApi: "API Simulada",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -213,7 +221,8 @@ var require_fa = __commonJS({
         screenset: "\u0645\u062C\u0645\u0648\u0639\u0647 \u0635\u0641\u062D\u0647\u200C\u0646\u0645\u0627\u06CC\u0634:",
         theme: "\u067E\u0648\u0633\u062A\u0647:",
         language: "\u0632\u0628\u0627\u0646:",
-        mockApi: "API \u0633\u0627\u062E\u062A\u06AF\u06CC"
+        mockApi: "API \u0633\u0627\u062E\u062A\u06AF\u06CC",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -234,7 +243,8 @@ var require_fi = __commonJS({
         screenset: "N\xE4ytt\xF6sarja:",
         theme: "Teema:",
         language: "Kieli:",
-        mockApi: "Mock-API"
+        mockApi: "Mock-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -255,7 +265,8 @@ var require_fr = __commonJS({
         screenset: "Ensemble d'\xC9crans:",
         theme: "Th\xE8me:",
         language: "Langue:",
-        mockApi: "API Simul\xE9e"
+        mockApi: "API Simul\xE9e",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -276,7 +287,8 @@ var require_he = __commonJS({
         screenset: "\u05E2\u05E8\u05DB\u05EA \u05DE\u05E1\u05DB\u05D9\u05DD:",
         theme: "\u05E2\u05E8\u05DB\u05EA \u05E0\u05D5\u05E9\u05D0:",
         language: "\u05E9\u05E4\u05D4:",
-        mockApi: "API \u05DE\u05D3\u05D5\u05DE\u05D4"
+        mockApi: "API \u05DE\u05D3\u05D5\u05DE\u05D4",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -297,7 +309,8 @@ var require_hi = __commonJS({
         screenset: "\u0938\u094D\u0915\u094D\u0930\u0940\u0928\u0938\u0947\u091F:",
         theme: "\u0925\u0940\u092E:",
         language: "\u092D\u093E\u0937\u093E:",
-        mockApi: "\u092E\u0949\u0915 API"
+        mockApi: "\u092E\u0949\u0915 API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -318,7 +331,8 @@ var require_hu = __commonJS({
         screenset: "K\xE9perny\u0151k\xE9szlet:",
         theme: "T\xE9ma:",
         language: "Nyelv:",
-        mockApi: "Mock API"
+        mockApi: "Mock API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -339,7 +353,8 @@ var require_id = __commonJS({
         screenset: "Set Layar:",
         theme: "Tema:",
         language: "Bahasa:",
-        mockApi: "API Tiruan"
+        mockApi: "API Tiruan",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -360,7 +375,8 @@ var require_it = __commonJS({
         screenset: "Set di Schermate:",
         theme: "Tema:",
         language: "Lingua:",
-        mockApi: "API Simulata"
+        mockApi: "API Simulata",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -381,7 +397,8 @@ var require_ja = __commonJS({
         screenset: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30BB\u30C3\u30C8:",
         theme: "\u30C6\u30FC\u30DE:",
         language: "\u8A00\u8A9E:",
-        mockApi: "\u30E2\u30C3\u30AF API"
+        mockApi: "\u30E2\u30C3\u30AF API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -402,7 +419,8 @@ var require_ko = __commonJS({
         screenset: "\uD654\uBA74 \uC138\uD2B8:",
         theme: "\uD14C\uB9C8:",
         language: "\uC5B8\uC5B4:",
-        mockApi: "\uBAA8\uC758 API"
+        mockApi: "\uBAA8\uC758 API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -423,7 +441,8 @@ var require_ms = __commonJS({
         screenset: "Set Skrin:",
         theme: "Tema:",
         language: "Bahasa:",
-        mockApi: "API Palsu"
+        mockApi: "API Palsu",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -444,7 +463,8 @@ var require_nl = __commonJS({
         screenset: "Schermset:",
         theme: "Thema:",
         language: "Taal:",
-        mockApi: "Nep-API"
+        mockApi: "Nep-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -465,7 +485,8 @@ var require_no = __commonJS({
         screenset: "Skjermsett:",
         theme: "Tema:",
         language: "Spr\xE5k:",
-        mockApi: "Mock-API"
+        mockApi: "Mock-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -486,7 +507,8 @@ var require_pl = __commonJS({
         screenset: "Zestaw ekran\xF3w:",
         theme: "Motyw:",
         language: "J\u0119zyk:",
-        mockApi: "Fikcyjne API"
+        mockApi: "Fikcyjne API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -507,7 +529,8 @@ var require_pt = __commonJS({
         screenset: "Conjunto de Telas:",
         theme: "Tema:",
         language: "Idioma:",
-        mockApi: "API Simulada"
+        mockApi: "API Simulada",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -528,7 +551,8 @@ var require_ro = __commonJS({
         screenset: "Set de Ecrane:",
         theme: "Tem\u0103:",
         language: "Limb\u0103:",
-        mockApi: "API Simulat"
+        mockApi: "API Simulat",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -549,7 +573,8 @@ var require_ru = __commonJS({
         screenset: "\u041D\u0430\u0431\u043E\u0440 \u044D\u043A\u0440\u0430\u043D\u043E\u0432:",
         theme: "\u0422\u0435\u043C\u0430:",
         language: "\u042F\u0437\u044B\u043A:",
-        mockApi: "\u0424\u0438\u043A\u0442\u0438\u0432\u043D\u044B\u0439 API"
+        mockApi: "\u0424\u0438\u043A\u0442\u0438\u0432\u043D\u044B\u0439 API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -570,7 +595,8 @@ var require_sv = __commonJS({
         screenset: "Sk\xE4rmupps\xE4ttning:",
         theme: "Tema:",
         language: "Spr\xE5k:",
-        mockApi: "Mock-API"
+        mockApi: "Mock-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -591,7 +617,8 @@ var require_sw = __commonJS({
         screenset: "Seti ya Skrini:",
         theme: "Mandhari:",
         language: "Lugha:",
-        mockApi: "API ya Majaribio"
+        mockApi: "API ya Majaribio",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -612,7 +639,8 @@ var require_ta = __commonJS({
         screenset: "\u0BA4\u0BBF\u0BB0\u0BC8\u0BA4\u0BCD \u0BA4\u0BCA\u0B95\u0BC1\u0BAA\u0BCD\u0BAA\u0BC1:",
         theme: "\u0BA4\u0BC0\u0BAE\u0BCD:",
         language: "\u0BAE\u0BCA\u0BB4\u0BBF:",
-        mockApi: "\u0BAA\u0BCB\u0BB2\u0BBF API"
+        mockApi: "\u0BAA\u0BCB\u0BB2\u0BBF API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -633,7 +661,8 @@ var require_th = __commonJS({
         screenset: "\u0E0A\u0E38\u0E14\u0E2B\u0E19\u0E49\u0E32\u0E08\u0E2D:",
         theme: "\u0E18\u0E35\u0E21:",
         language: "\u0E20\u0E32\u0E29\u0E32:",
-        mockApi: "API \u0E08\u0E33\u0E25\u0E2D\u0E07"
+        mockApi: "API \u0E08\u0E33\u0E25\u0E2D\u0E07",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -654,7 +683,8 @@ var require_tl = __commonJS({
         screenset: "Hanay ng Screen:",
         theme: "Tema:",
         language: "Wika:",
-        mockApi: "Mock API"
+        mockApi: "Mock API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -675,7 +705,8 @@ var require_tr = __commonJS({
         screenset: "Ekran Seti:",
         theme: "Tema:",
         language: "Dil:",
-        mockApi: "Sahte API"
+        mockApi: "Sahte API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -696,7 +727,8 @@ var require_uk = __commonJS({
         screenset: "\u041D\u0430\u0431\u0456\u0440 \u0435\u043A\u0440\u0430\u043D\u0456\u0432:",
         theme: "\u0422\u0435\u043C\u0430:",
         language: "\u041C\u043E\u0432\u0430:",
-        mockApi: "\u0424\u0456\u043A\u0442\u0438\u0432\u043D\u0438\u0439 API"
+        mockApi: "\u0424\u0456\u043A\u0442\u0438\u0432\u043D\u0438\u0439 API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -717,7 +749,8 @@ var require_ur = __commonJS({
         screenset: "\u0627\u0633\u06A9\u0631\u06CC\u0646 \u0633\u06CC\u0679:",
         theme: "\u062A\u06BE\u06CC\u0645:",
         language: "\u0632\u0628\u0627\u0646:",
-        mockApi: "\u0641\u0631\u0636\u06CC API"
+        mockApi: "\u0641\u0631\u0636\u06CC API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -738,7 +771,8 @@ var require_vi = __commonJS({
         screenset: "B\u1ED9 M\xE0n h\xECnh:",
         theme: "Ch\u1EE7 \u0111\u1EC1:",
         language: "Ng\xF4n ng\u1EEF:",
-        mockApi: "API Gi\u1EA3 l\u1EADp"
+        mockApi: "API Gi\u1EA3 l\u1EADp",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -759,7 +793,8 @@ var require_zh_TW = __commonJS({
         screenset: "\u87A2\u5E55\u96C6:",
         theme: "\u4E3B\u984C:",
         language: "\u8A9E\u8A00:",
-        mockApi: "\u6A21\u64EC API"
+        mockApi: "\u6A21\u64EC API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -780,7 +815,8 @@ var require_zh = __commonJS({
         screenset: "\u5C4F\u5E55\u96C6:",
         theme: "\u4E3B\u9898:",
         language: "\u8BED\u8A00:",
-        mockApi: "\u6A21\u62DF API"
+        mockApi: "\u6A21\u62DF API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -822,14 +858,19 @@ var STORAGE_KEYS = {
   POSITION: `${STORAGE_PREFIX}position`,
   SIZE: `${STORAGE_PREFIX}size`,
   COLLAPSED: `${STORAGE_PREFIX}collapsed`,
-  BUTTON_POSITION: `${STORAGE_PREFIX}buttonPosition`
+  BUTTON_POSITION: `${STORAGE_PREFIX}buttonPosition`,
+  THEME: `${STORAGE_PREFIX}theme`,
+  LANGUAGE: `${STORAGE_PREFIX}language`,
+  MOCK_ENABLED: `${STORAGE_PREFIX}mockEnabled`,
+  ACTIVE_PACKAGE_ID: `${STORAGE_PREFIX}activePackageId`
 };
 
 // src/events/studioEvents.ts
 var StudioEvents = {
   PositionChanged: "studio/positionChanged",
   SizeChanged: "studio/sizeChanged",
-  ButtonPositionChanged: "studio/buttonPositionChanged"
+  ButtonPositionChanged: "studio/buttonPositionChanged",
+  ActivePackageChanged: "studio/activePackageChanged"
 };
 
 // src/effects/persistenceEffects.ts
@@ -852,12 +893,82 @@ var initPersistenceEffects = () => {
       saveStudioState(STORAGE_KEYS.BUTTON_POSITION, position);
     }
   );
+  const themeSubscription = eventBus.on("theme/changed", (payload) => {
+    saveStudioState(STORAGE_KEYS.THEME, payload.themeId);
+  });
+  const languageSubscription = eventBus.on("i18n/language/changed", (payload) => {
+    saveStudioState(STORAGE_KEYS.LANGUAGE, payload.language);
+  });
+  const mockSubscription = eventBus.on("mock/toggle", (payload) => {
+    saveStudioState(STORAGE_KEYS.MOCK_ENABLED, payload.enabled);
+  });
+  const activePackageSubscription = eventBus.on(
+    StudioEvents.ActivePackageChanged,
+    ({ activePackageId }) => {
+      saveStudioState(STORAGE_KEYS.ACTIVE_PACKAGE_ID, activePackageId);
+    }
+  );
   return () => {
     positionSubscription.unsubscribe();
     sizeSubscription.unsubscribe();
     buttonPositionSubscription.unsubscribe();
+    themeSubscription.unsubscribe();
+    languageSubscription.unsubscribe();
+    mockSubscription.unsubscribe();
+    activePackageSubscription.unsubscribe();
   };
 };
+function isScreenExtension(ext) {
+  return "presentation" in ext && typeof ext.presentation === "object";
+}
+var useRestoreStudioSettings = () => {
+  const restoredRef = useRef(false);
+  useEffect(() => {
+    if (restoredRef.current) return;
+    restoredRef.current = true;
+    const themeId = loadStudioState(STORAGE_KEYS.THEME, null);
+    if (themeId != null && typeof themeId === "string" && themeId.length > 0) {
+      eventBus.emit("theme/changed", { themeId });
+    }
+    const language = loadStudioState(STORAGE_KEYS.LANGUAGE, null);
+    if (language != null && typeof language === "string" && language.length > 0) {
+      eventBus.emit("i18n/language/changed", { language });
+    }
+    const mockEnabled = loadStudioState(STORAGE_KEYS.MOCK_ENABLED, null);
+    if (typeof mockEnabled === "boolean") {
+      eventBus.emit("mock/toggle", { enabled: mockEnabled });
+    }
+  }, []);
+};
+var useRestoreGtsPackage = (registry) => {
+  const restoredRef = useRef(false);
+  useEffect(() => {
+    if (restoredRef.current || !registry) return;
+    const activePackageId = loadStudioState(STORAGE_KEYS.ACTIVE_PACKAGE_ID, null);
+    if (!activePackageId || typeof activePackageId !== "string") return;
+    restoredRef.current = true;
+    const restore = async () => {
+      try {
+        const extensions = registry.getExtensionsForPackage(activePackageId);
+        const screenExtensions = extensions.filter(
+          (ext) => ext.domain === HAI3_SCREEN_DOMAIN && isScreenExtension(ext)
+        );
+        if (screenExtensions.length === 0) return;
+        screenExtensions.sort((a, b) => (a.presentation.order ?? 0) - (b.presentation.order ?? 0));
+        const firstExtension = screenExtensions[0];
+        await registry.executeActionsChain({
+          action: {
+            type: HAI3_ACTION_MOUNT_EXT,
+            target: HAI3_SCREEN_DOMAIN,
+            payload: { extensionId: firstExtension.id }
+          }
+        });
+      } catch {
+      }
+    };
+    void restore();
+  }, [registry]);
+};
 var studioTranslations = I18nRegistry.createLoader({
   [Language.English]: () => Promise.resolve().then(() => __toESM(require_en())),
   [Language.Arabic]: () => Promise.resolve().then(() => __toESM(require_ar())),
@@ -898,6 +1009,11 @@ var studioTranslations = I18nRegistry.createLoader({
 });
 i18nRegistry.registerLoader("studio", studioTranslations);
 var StudioContext = createContext(void 0);
+var RestoreGtsPackageOnMount = () => {
+  const app = useHAI3();
+  useRestoreGtsPackage(app.screensetsRegistry);
+  return null;
+};
 var useStudioContext = () => {
   const context = useContext(StudioContext);
   if (!context) {
@@ -914,6 +1030,7 @@ var StudioProvider = ({ children }) => {
     const cleanup = initPersistenceEffects();
     return cleanup;
   }, []);
+  useRestoreStudioSettings();
   const toggleCollapsed = useCallback(() => {
     setCollapsed((prev) => {
       const newValue = !prev;
@@ -921,7 +1038,7 @@ var StudioProvider = ({ children }) => {
       return newValue;
     });
   }, []);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     StudioContext.Provider,
     {
       value: {
@@ -930,18 +1047,30 @@ var StudioProvider = ({ children }) => {
         portalContainer,
         setPortalContainer
       },
-      children
+      children: [
+        /* @__PURE__ */ jsx(RestoreGtsPackageOnMount, {}),
+        children
+      ]
     }
   );
 };
 StudioProvider.displayName = "StudioProvider";
+var VIEWPORT_MARGIN = 20;
+function clampToViewport(pos, size) {
+  const maxX = Math.max(VIEWPORT_MARGIN, window.innerWidth - size.width - VIEWPORT_MARGIN);
+  const maxY = Math.max(VIEWPORT_MARGIN, window.innerHeight - size.height - VIEWPORT_MARGIN);
+  return {
+    x: clamp(pos.x, VIEWPORT_MARGIN, maxX),
+    y: clamp(pos.y, VIEWPORT_MARGIN, maxY)
+  };
+}
 var useDraggable = ({ panelSize, storageKey = STORAGE_KEYS.POSITION }) => {
   const getDefaultPosition = () => ({
-    x: window.innerWidth - panelSize.width - 20,
-    y: window.innerHeight - panelSize.height - 20
+    x: window.innerWidth - panelSize.width - VIEWPORT_MARGIN,
+    y: window.innerHeight - panelSize.height - VIEWPORT_MARGIN
   });
   const [position, setPosition] = useState(
-    () => loadStudioState(storageKey, getDefaultPosition())
+    () => clampToViewport(loadStudioState(storageKey, getDefaultPosition()), panelSize)
   );
   const [isDragging, setIsDragging] = useState(false);
   const dragStartPos = useRef({ x: 0, y: 0 });
@@ -955,16 +1084,10 @@ var useDraggable = ({ panelSize, storageKey = STORAGE_KEYS.POSITION }) => {
   useEffect(() => {
     if (!isDragging) return;
     const handleMouseMove = (e) => {
-      const newX = clamp(
-        e.clientX - dragStartPos.current.x,
-        0,
-        window.innerWidth - panelSize.width
-      );
-      const newY = clamp(
-        e.clientY - dragStartPos.current.y,
-        0,
-        window.innerHeight - panelSize.height
-      );
+      const maxX = Math.max(VIEWPORT_MARGIN, window.innerWidth - panelSize.width - VIEWPORT_MARGIN);
+      const maxY = Math.max(VIEWPORT_MARGIN, window.innerHeight - panelSize.height - VIEWPORT_MARGIN);
+      const newX = clamp(e.clientX - dragStartPos.current.x, VIEWPORT_MARGIN, maxX);
+      const newY = clamp(e.clientY - dragStartPos.current.y, VIEWPORT_MARGIN, maxY);
       const newPosition = { x: newX, y: newY };
       setPosition(newPosition);
       const eventName = storageKey === STORAGE_KEYS.BUTTON_POSITION ? StudioEvents.ButtonPositionChanged : StudioEvents.PositionChanged;
@@ -980,6 +1103,19 @@ var useDraggable = ({ panelSize, storageKey = STORAGE_KEYS.POSITION }) => {
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging, panelSize.width, panelSize.height, storageKey]);
+  useEffect(() => {
+    const handleResize = () => {
+      setPosition((prev) => {
+        const clamped = clampToViewport(prev, panelSize);
+        if (clamped.x === prev.x && clamped.y === prev.y) return prev;
+        const eventName = storageKey === STORAGE_KEYS.BUTTON_POSITION ? StudioEvents.ButtonPositionChanged : StudioEvents.PositionChanged;
+        eventBus.emit(eventName, { position: clamped });
+        return clamped;
+      });
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [panelSize.width, panelSize.height, panelSize, storageKey]);
   return {
     position,
     isDragging,
@@ -1048,6 +1184,64 @@ var useResizable = () => {
     handleMouseDown
   };
 };
+function isScreenExtension2(ext) {
+  return "presentation" in ext && typeof ext.presentation === "object";
+}
+var MfePackageSelector = ({
+  className = ""
+}) => {
+  const app = useHAI3();
+  const registry = app.screensetsRegistry;
+  const { portalContainer } = useStudioContext();
+  const { t } = useTranslation();
+  const packages = useRegisteredPackages();
+  const activePackage = useActivePackage();
+  if (!registry) {
+    return null;
+  }
+  const handlePackageChange = async (selectedPackageId) => {
+    const extensions = registry.getExtensionsForPackage(selectedPackageId);
+    const screenExtensions = extensions.filter(
+      (ext) => ext.domain === HAI3_SCREEN_DOMAIN && isScreenExtension2(ext)
+    );
+    if (screenExtensions.length === 0) {
+      console.warn(`No screen extensions found for package: ${selectedPackageId}`);
+      return;
+    }
+    screenExtensions.sort((a, b) => (a.presentation.order ?? 0) - (b.presentation.order ?? 0));
+    const firstExtension = screenExtensions[0];
+    await registry.executeActionsChain({
+      action: {
+        type: HAI3_ACTION_MOUNT_EXT,
+        target: HAI3_SCREEN_DOMAIN,
+        payload: { extensionId: firstExtension.id }
+      }
+    });
+    eventBus.emit(StudioEvents.ActivePackageChanged, { activePackageId: selectedPackageId });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between ${className}`, children: [
+    /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap", children: t("studio:controls.gts_package") }),
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        DropdownButton,
+        {
+          variant: ButtonVariant.Outline,
+          disabled: packages.length <= 1,
+          children: activePackage || "No package"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: packages.map((pkg) => /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          onClick: () => handlePackageChange(pkg),
+          children: pkg
+        },
+        pkg
+      )) })
+    ] })
+  ] });
+};
+MfePackageSelector.displayName = "MfePackageSelector";
 var ThemeSelector = ({
   className = ""
 }) => {
@@ -1073,46 +1267,6 @@ var ThemeSelector = ({
   ] });
 };
 ThemeSelector.displayName = "ThemeSelector";
-var ScreensetSelector = ({
-  options,
-  currentValue,
-  onChange,
-  className = ""
-}) => {
-  const { portalContainer } = useStudioContext();
-  const { t, isRTL } = useTranslation();
-  const formatName = (name) => {
-    return name.split(/[-_]/).map((word) => upperFirst(word)).join(" ");
-  };
-  const getCurrentDisplay = () => {
-    const [category, itemId] = currentValue.split(":");
-    if (!category || !itemId) return "Select";
-    const categoryGroup = options.find((opt) => opt.category === category);
-    const item = categoryGroup?.screensets.find((i) => i.id === itemId);
-    return item ? item.name : "Select";
-  };
-  const handleItemClick = (category, itemId) => {
-    onChange(`${category}:${itemId}`);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between ${className}`, children: [
-    /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap", children: t("studio:controls.screenset") }),
-    /* @__PURE__ */ jsxs(DropdownMenu, { dir: isRTL ? "rtl" : "ltr", children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownButton, { variant: ButtonVariant.Outline, children: formatName(getCurrentDisplay()) }) }),
-      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: options.map((categoryGroup) => /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
-        /* @__PURE__ */ jsx(DropdownMenuSubTrigger, { disabled: categoryGroup.screensets.length === 0, children: formatName(categoryGroup.category) }),
-        /* @__PURE__ */ jsx(DropdownMenuSubContent, { container: portalContainer, className: "z-[99999] pointer-events-auto", children: categoryGroup.screensets.map((item) => /* @__PURE__ */ jsx(
-          DropdownMenuItem,
-          {
-            onClick: () => handleItemClick(categoryGroup.category, item.id),
-            children: formatName(item.name)
-          },
-          item.id
-        )) })
-      ] }, categoryGroup.category)) })
-    ] })
-  ] });
-};
-ScreensetSelector.displayName = "ScreensetSelector";
 var FALLBACK_SELECT_LANGUAGE_TEXT = "Select language";
 var RTL_INDICATOR_SUFFIX = " (RTL)";
 function LanguageSelector({
@@ -1170,48 +1324,12 @@ var ApiModeToggle = ({
   ] });
 };
 ApiModeToggle.displayName = "ApiModeToggle";
-var ALL_CATEGORIES = [ScreensetCategory.Drafts, ScreensetCategory.Mockups, ScreensetCategory.Production];
-var buildScreensetOptions = () => {
-  const allScreensets = screensetRegistry.getAll();
-  return ALL_CATEGORIES.map((category) => ({
-    category,
-    screensets: allScreensets.filter((s) => s.category === category).map((s) => ({
-      id: s.id,
-      name: s.name
-    }))
-  }));
-};
 var ControlPanel = () => {
-  const { currentScreenset, navigateToScreenset } = useNavigation();
-  const [screensetOptions, setScreensetOptions] = useState([]);
   const { t } = useTranslation();
-  useEffect(() => {
-    const options = buildScreensetOptions();
-    setScreensetOptions(options);
-  }, []);
-  const getCurrentValue = () => {
-    if (!currentScreenset) return "";
-    const screenset = screensetRegistry.get(currentScreenset);
-    if (!screenset) return "";
-    return `${screenset.category}:${screenset.id}`;
-  };
-  const handleScreensetChange = (value) => {
-    const [, screensetId] = value.split(":");
-    if (screensetId) {
-      navigateToScreenset(screensetId);
-    }
-  };
   return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("studio:controls.heading") }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-      screensetOptions.length > 0 && /* @__PURE__ */ jsx(
-        ScreensetSelector,
-        {
-          options: screensetOptions,
-          currentValue: getCurrentValue(),
-          onChange: handleScreensetChange
-        }
-      ),
+      /* @__PURE__ */ jsx(MfePackageSelector, {}),
       /* @__PURE__ */ jsx(ApiModeToggle, {}),
       /* @__PURE__ */ jsx(ThemeSelector, {}),
       /* @__PURE__ */ jsx(LanguageSelector, {})
@@ -1222,13 +1340,13 @@ ControlPanel.displayName = "ControlPanel";
 var StudioPanel = () => {
   const { toggleCollapsed, setPortalContainer } = useStudioContext();
   const { t } = useTranslation();
-  const portalRef = React3.useRef(null);
+  const portalRef = React2.useRef(null);
   const { size, handleMouseDown: handleResizeMouseDown } = useResizable();
   const { position, isDragging, handleMouseDown: handleDragMouseDown } = useDraggable({
     panelSize: size,
     storageKey: STORAGE_KEYS.POSITION
   });
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     setPortalContainer(portalRef.current);
     return () => setPortalContainer(null);
   }, [setPortalContainer]);