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

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React3 = require('react');
+var React2 = require('react');
 var react = require('@hai3/react');
 var jsxRuntime = require('react/jsx-runtime');
 var uikit = require('@hai3/uikit');
@@ -8,7 +8,7 @@ var lodash = require('lodash');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -51,7 +51,8 @@ var require_en = __commonJS({
         screenset: "Screenset:",
         theme: "Theme:",
         language: "Language:",
-        mockApi: "Mock API"
+        mockApi: "Mock API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -72,7 +73,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"
       }
     };
   }
@@ -93,7 +95,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"
       }
     };
   }
@@ -114,7 +117,8 @@ var require_cs = __commonJS({
         screenset: "Sada obrazovek:",
         theme: "Motiv:",
         language: "Jazyk:",
-        mockApi: "Simulovan\xE9 API"
+        mockApi: "Simulovan\xE9 API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -135,7 +139,8 @@ var require_da = __commonJS({
         screenset: "Sk\xE6rms\xE6t:",
         theme: "Tema:",
         language: "Sprog:",
-        mockApi: "Mock-API"
+        mockApi: "Mock-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -156,7 +161,8 @@ var require_de = __commonJS({
         screenset: "Bildschirmset:",
         theme: "Design:",
         language: "Sprache:",
-        mockApi: "Mock-API"
+        mockApi: "Mock-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -177,7 +183,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"
       }
     };
   }
@@ -198,7 +205,8 @@ var require_es = __commonJS({
         screenset: "Conjunto de Pantallas:",
         theme: "Tema:",
         language: "Idioma:",
-        mockApi: "API Simulada"
+        mockApi: "API Simulada",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -219,7 +227,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"
       }
     };
   }
@@ -240,7 +249,8 @@ var require_fi = __commonJS({
         screenset: "N\xE4ytt\xF6sarja:",
         theme: "Teema:",
         language: "Kieli:",
-        mockApi: "Mock-API"
+        mockApi: "Mock-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -261,7 +271,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"
       }
     };
   }
@@ -282,7 +293,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"
       }
     };
   }
@@ -303,7 +315,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"
       }
     };
   }
@@ -324,7 +337,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"
       }
     };
   }
@@ -345,7 +359,8 @@ var require_id = __commonJS({
         screenset: "Set Layar:",
         theme: "Tema:",
         language: "Bahasa:",
-        mockApi: "API Tiruan"
+        mockApi: "API Tiruan",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -366,7 +381,8 @@ var require_it = __commonJS({
         screenset: "Set di Schermate:",
         theme: "Tema:",
         language: "Lingua:",
-        mockApi: "API Simulata"
+        mockApi: "API Simulata",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -387,7 +403,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"
       }
     };
   }
@@ -408,7 +425,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"
       }
     };
   }
@@ -429,7 +447,8 @@ var require_ms = __commonJS({
         screenset: "Set Skrin:",
         theme: "Tema:",
         language: "Bahasa:",
-        mockApi: "API Palsu"
+        mockApi: "API Palsu",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -450,7 +469,8 @@ var require_nl = __commonJS({
         screenset: "Schermset:",
         theme: "Thema:",
         language: "Taal:",
-        mockApi: "Nep-API"
+        mockApi: "Nep-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -471,7 +491,8 @@ var require_no = __commonJS({
         screenset: "Skjermsett:",
         theme: "Tema:",
         language: "Spr\xE5k:",
-        mockApi: "Mock-API"
+        mockApi: "Mock-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -492,7 +513,8 @@ var require_pl = __commonJS({
         screenset: "Zestaw ekran\xF3w:",
         theme: "Motyw:",
         language: "J\u0119zyk:",
-        mockApi: "Fikcyjne API"
+        mockApi: "Fikcyjne API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -513,7 +535,8 @@ var require_pt = __commonJS({
         screenset: "Conjunto de Telas:",
         theme: "Tema:",
         language: "Idioma:",
-        mockApi: "API Simulada"
+        mockApi: "API Simulada",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -534,7 +557,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"
       }
     };
   }
@@ -555,7 +579,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"
       }
     };
   }
@@ -576,7 +601,8 @@ var require_sv = __commonJS({
         screenset: "Sk\xE4rmupps\xE4ttning:",
         theme: "Tema:",
         language: "Spr\xE5k:",
-        mockApi: "Mock-API"
+        mockApi: "Mock-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -597,7 +623,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"
       }
     };
   }
@@ -618,7 +645,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"
       }
     };
   }
@@ -639,7 +667,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"
       }
     };
   }
@@ -660,7 +689,8 @@ var require_tl = __commonJS({
         screenset: "Hanay ng Screen:",
         theme: "Tema:",
         language: "Wika:",
-        mockApi: "Mock API"
+        mockApi: "Mock API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -681,7 +711,8 @@ var require_tr = __commonJS({
         screenset: "Ekran Seti:",
         theme: "Tema:",
         language: "Dil:",
-        mockApi: "Sahte API"
+        mockApi: "Sahte API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -702,7 +733,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"
       }
     };
   }
@@ -723,7 +755,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"
       }
     };
   }
@@ -744,7 +777,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"
       }
     };
   }
@@ -765,7 +799,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"
       }
     };
   }
@@ -786,7 +821,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"
       }
     };
   }
@@ -828,14 +864,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
@@ -858,12 +899,82 @@ var initPersistenceEffects = () => {
       saveStudioState(STORAGE_KEYS.BUTTON_POSITION, position);
     }
   );
+  const themeSubscription = react.eventBus.on("theme/changed", (payload) => {
+    saveStudioState(STORAGE_KEYS.THEME, payload.themeId);
+  });
+  const languageSubscription = react.eventBus.on("i18n/language/changed", (payload) => {
+    saveStudioState(STORAGE_KEYS.LANGUAGE, payload.language);
+  });
+  const mockSubscription = react.eventBus.on("mock/toggle", (payload) => {
+    saveStudioState(STORAGE_KEYS.MOCK_ENABLED, payload.enabled);
+  });
+  const activePackageSubscription = react.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 = React2.useRef(false);
+  React2.useEffect(() => {
+    if (restoredRef.current) return;
+    restoredRef.current = true;
+    const themeId = loadStudioState(STORAGE_KEYS.THEME, null);
+    if (themeId != null && typeof themeId === "string" && themeId.length > 0) {
+      react.eventBus.emit("theme/changed", { themeId });
+    }
+    const language = loadStudioState(STORAGE_KEYS.LANGUAGE, null);
+    if (language != null && typeof language === "string" && language.length > 0) {
+      react.eventBus.emit("i18n/language/changed", { language });
+    }
+    const mockEnabled = loadStudioState(STORAGE_KEYS.MOCK_ENABLED, null);
+    if (typeof mockEnabled === "boolean") {
+      react.eventBus.emit("mock/toggle", { enabled: mockEnabled });
+    }
+  }, []);
+};
+var useRestoreGtsPackage = (registry) => {
+  const restoredRef = React2.useRef(false);
+  React2.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 === react.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: react.HAI3_ACTION_MOUNT_EXT,
+            target: react.HAI3_SCREEN_DOMAIN,
+            payload: { extensionId: firstExtension.id }
+          }
+        });
+      } catch {
+      }
+    };
+    void restore();
+  }, [registry]);
+};
 var studioTranslations = react.I18nRegistry.createLoader({
   [react.Language.English]: () => Promise.resolve().then(() => __toESM(require_en())),
   [react.Language.Arabic]: () => Promise.resolve().then(() => __toESM(require_ar())),
@@ -903,31 +1014,37 @@ var studioTranslations = react.I18nRegistry.createLoader({
   [react.Language.ChineseSimplified]: () => Promise.resolve().then(() => __toESM(require_zh()))
 });
 react.i18nRegistry.registerLoader("studio", studioTranslations);
-var StudioContext = React3.createContext(void 0);
+var StudioContext = React2.createContext(void 0);
+var RestoreGtsPackageOnMount = () => {
+  const app = react.useHAI3();
+  useRestoreGtsPackage(app.screensetsRegistry);
+  return null;
+};
 var useStudioContext = () => {
-  const context = React3.useContext(StudioContext);
+  const context = React2.useContext(StudioContext);
   if (!context) {
     throw new Error("useStudioContext must be used within StudioProvider");
   }
   return context;
 };
 var StudioProvider = ({ children }) => {
-  const [collapsed, setCollapsed] = React3.useState(
+  const [collapsed, setCollapsed] = React2.useState(
     () => loadStudioState(STORAGE_KEYS.COLLAPSED, false)
   );
-  const [portalContainer, setPortalContainer] = React3.useState(null);
-  React3.useEffect(() => {
+  const [portalContainer, setPortalContainer] = React2.useState(null);
+  React2.useEffect(() => {
     const cleanup = initPersistenceEffects();
     return cleanup;
   }, []);
-  const toggleCollapsed = React3.useCallback(() => {
+  useRestoreStudioSettings();
+  const toggleCollapsed = React2.useCallback(() => {
     setCollapsed((prev) => {
       const newValue = !prev;
       saveStudioState(STORAGE_KEYS.COLLAPSED, newValue);
       return newValue;
     });
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     StudioContext.Provider,
     {
       value: {
@@ -936,41 +1053,47 @@ var StudioProvider = ({ children }) => {
         portalContainer,
         setPortalContainer
       },
-      children
+      children: [
+        /* @__PURE__ */ jsxRuntime.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: lodash.clamp(pos.x, VIEWPORT_MARGIN, maxX),
+    y: lodash.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] = React3.useState(
-    () => loadStudioState(storageKey, getDefaultPosition())
+  const [position, setPosition] = React2.useState(
+    () => clampToViewport(loadStudioState(storageKey, getDefaultPosition()), panelSize)
   );
-  const [isDragging, setIsDragging] = React3.useState(false);
-  const dragStartPos = React3.useRef({ x: 0, y: 0 });
-  const handleMouseDown = React3.useCallback((e) => {
+  const [isDragging, setIsDragging] = React2.useState(false);
+  const dragStartPos = React2.useRef({ x: 0, y: 0 });
+  const handleMouseDown = React2.useCallback((e) => {
     setIsDragging(true);
     dragStartPos.current = {
       x: e.clientX - position.x,
       y: e.clientY - position.y
     };
   }, [position]);
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     if (!isDragging) return;
     const handleMouseMove = (e) => {
-      const newX = lodash.clamp(
-        e.clientX - dragStartPos.current.x,
-        0,
-        window.innerWidth - panelSize.width
-      );
-      const newY = lodash.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 = lodash.clamp(e.clientX - dragStartPos.current.x, VIEWPORT_MARGIN, maxX);
+      const newY = lodash.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;
@@ -986,6 +1109,19 @@ var useDraggable = ({ panelSize, storageKey = STORAGE_KEYS.POSITION }) => {
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging, panelSize.width, panelSize.height, storageKey]);
+  React2.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;
+        react.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,
@@ -993,15 +1129,15 @@ var useDraggable = ({ panelSize, storageKey = STORAGE_KEYS.POSITION }) => {
   };
 };
 var useResizable = () => {
-  const [size, setSize] = React3.useState(
+  const [size, setSize] = React2.useState(
     () => loadStudioState(STORAGE_KEYS.SIZE, {
       width: PANEL_CONSTRAINTS.DEFAULT_WIDTH,
       height: PANEL_CONSTRAINTS.DEFAULT_HEIGHT
     })
   );
-  const [isResizing, setIsResizing] = React3.useState(false);
-  const resizeStartRef = React3.useRef(null);
-  const handleMouseDown = React3.useCallback((e) => {
+  const [isResizing, setIsResizing] = React2.useState(false);
+  const resizeStartRef = React2.useRef(null);
+  const handleMouseDown = React2.useCallback((e) => {
     e.stopPropagation();
     resizeStartRef.current = {
       mouseX: e.clientX,
@@ -1011,7 +1147,7 @@ var useResizable = () => {
     };
     setIsResizing(true);
   }, [size.width, size.height]);
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     if (!isResizing || !resizeStartRef.current) return;
     const startState = resizeStartRef.current;
     document.body.style.userSelect = "none";
@@ -1054,6 +1190,64 @@ var useResizable = () => {
     handleMouseDown
   };
 };
+function isScreenExtension2(ext) {
+  return "presentation" in ext && typeof ext.presentation === "object";
+}
+var MfePackageSelector = ({
+  className = ""
+}) => {
+  const app = react.useHAI3();
+  const registry = app.screensetsRegistry;
+  const { portalContainer } = useStudioContext();
+  const { t } = react.useTranslation();
+  const packages = react.useRegisteredPackages();
+  const activePackage = react.useActivePackage();
+  if (!registry) {
+    return null;
+  }
+  const handlePackageChange = async (selectedPackageId) => {
+    const extensions = registry.getExtensionsForPackage(selectedPackageId);
+    const screenExtensions = extensions.filter(
+      (ext) => ext.domain === react.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: react.HAI3_ACTION_MOUNT_EXT,
+        target: react.HAI3_SCREEN_DOMAIN,
+        payload: { extensionId: firstExtension.id }
+      }
+    });
+    react.eventBus.emit(StudioEvents.ActivePackageChanged, { activePackageId: selectedPackageId });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap", children: t("studio:controls.gts_package") }),
+    /* @__PURE__ */ jsxRuntime.jsxs(uikit.DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        uikit.DropdownButton,
+        {
+          variant: uikit.ButtonVariant.Outline,
+          disabled: packages.length <= 1,
+          children: activePackage || "No package"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: packages.map((pkg) => /* @__PURE__ */ jsxRuntime.jsx(
+        uikit.DropdownMenuItem,
+        {
+          onClick: () => handlePackageChange(pkg),
+          children: pkg
+        },
+        pkg
+      )) })
+    ] })
+  ] });
+};
+MfePackageSelector.displayName = "MfePackageSelector";
 var ThemeSelector = ({
   className = ""
 }) => {
@@ -1079,46 +1273,6 @@ var ThemeSelector = ({
   ] });
 };
 ThemeSelector.displayName = "ThemeSelector";
-var ScreensetSelector = ({
-  options,
-  currentValue,
-  onChange,
-  className = ""
-}) => {
-  const { portalContainer } = useStudioContext();
-  const { t, isRTL } = react.useTranslation();
-  const formatName = (name) => {
-    return name.split(/[-_]/).map((word) => lodash.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__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap", children: t("studio:controls.screenset") }),
-    /* @__PURE__ */ jsxRuntime.jsxs(uikit.DropdownMenu, { dir: isRTL ? "rtl" : "ltr", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownButton, { variant: uikit.ButtonVariant.Outline, children: formatName(getCurrentDisplay()) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: options.map((categoryGroup) => /* @__PURE__ */ jsxRuntime.jsxs(uikit.DropdownMenuSub, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuSubTrigger, { disabled: categoryGroup.screensets.length === 0, children: formatName(categoryGroup.category) }),
-        /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuSubContent, { container: portalContainer, className: "z-[99999] pointer-events-auto", children: categoryGroup.screensets.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-          uikit.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({
@@ -1176,48 +1330,12 @@ var ApiModeToggle = ({
   ] });
 };
 ApiModeToggle.displayName = "ApiModeToggle";
-var ALL_CATEGORIES = [react.ScreensetCategory.Drafts, react.ScreensetCategory.Mockups, react.ScreensetCategory.Production];
-var buildScreensetOptions = () => {
-  const allScreensets = react.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 } = react.useNavigation();
-  const [screensetOptions, setScreensetOptions] = React3.useState([]);
   const { t } = react.useTranslation();
-  React3.useEffect(() => {
-    const options = buildScreensetOptions();
-    setScreensetOptions(options);
-  }, []);
-  const getCurrentValue = () => {
-    if (!currentScreenset) return "";
-    const screenset = react.screensetRegistry.get(currentScreenset);
-    if (!screenset) return "";
-    return `${screenset.category}:${screenset.id}`;
-  };
-  const handleScreensetChange = (value) => {
-    const [, screensetId] = value.split(":");
-    if (screensetId) {
-      navigateToScreenset(screensetId);
-    }
-  };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("studio:controls.heading") }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-      screensetOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        ScreensetSelector,
-        {
-          options: screensetOptions,
-          currentValue: getCurrentValue(),
-          onChange: handleScreensetChange
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx(MfePackageSelector, {}),
       /* @__PURE__ */ jsxRuntime.jsx(ApiModeToggle, {}),
       /* @__PURE__ */ jsxRuntime.jsx(ThemeSelector, {}),
       /* @__PURE__ */ jsxRuntime.jsx(LanguageSelector, {})
@@ -1228,13 +1346,13 @@ ControlPanel.displayName = "ControlPanel";
 var StudioPanel = () => {
   const { toggleCollapsed, setPortalContainer } = useStudioContext();
   const { t } = react.useTranslation();
-  const portalRef = React3__default.default.useRef(null);
+  const portalRef = React2__default.default.useRef(null);
   const { size, handleMouseDown: handleResizeMouseDown } = useResizable();
   const { position, isDragging, handleMouseDown: handleDragMouseDown } = useDraggable({
     panelSize: size,
     storageKey: STORAGE_KEYS.POSITION
   });
-  React3__default.default.useEffect(() => {
+  React2__default.default.useEffect(() => {
     setPortalContainer(portalRef.current);
     return () => setPortalContainer(null);
   }, [setPortalContainer]);
@@ -1325,7 +1443,7 @@ var StudioPanel = () => {
 };
 StudioPanel.displayName = "StudioPanel";
 var useKeyboardShortcut = (handler) => {
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.shiftKey && e.code === "Backquote") {
         e.preventDefault();
@@ -1385,7 +1503,7 @@ var CollapsedButton = ({ toggleCollapsed }) => {
     panelSize: BUTTON_SIZE,
     storageKey: STORAGE_KEYS.BUTTON_POSITION
   });
-  const dragStartPosition = React3.useRef(null);
+  const dragStartPosition = React2.useRef(null);
   const handleButtonMouseDown = (e) => {
     dragStartPosition.current = { x: e.clientX, y: e.clientY };
     handleMouseDown(e);