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

package/dist/index.cjs

@@ -1,14 +1,39 @@
 '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');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
 var lodash = require('lodash');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var SwitchPrimitives = require('@radix-ui/react-switch');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
+var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -51,7 +76,8 @@ var require_en = __commonJS({
         screenset: "Screenset:",
         theme: "Theme:",
         language: "Language:",
-        mockApi: "Mock API"
+        mockApi: "Mock API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -72,7 +98,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 +120,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 +142,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 +164,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 +186,8 @@ var require_de = __commonJS({
         screenset: "Bildschirmset:",
         theme: "Design:",
         language: "Sprache:",
-        mockApi: "Mock-API"
+        mockApi: "Mock-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -177,7 +208,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 +230,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 +252,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 +274,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 +296,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 +318,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 +340,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 +362,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 +384,8 @@ var require_id = __commonJS({
         screenset: "Set Layar:",
         theme: "Tema:",
         language: "Bahasa:",
-        mockApi: "API Tiruan"
+        mockApi: "API Tiruan",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -366,7 +406,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 +428,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 +450,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 +472,8 @@ var require_ms = __commonJS({
         screenset: "Set Skrin:",
         theme: "Tema:",
         language: "Bahasa:",
-        mockApi: "API Palsu"
+        mockApi: "API Palsu",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -450,7 +494,8 @@ var require_nl = __commonJS({
         screenset: "Schermset:",
         theme: "Thema:",
         language: "Taal:",
-        mockApi: "Nep-API"
+        mockApi: "Nep-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -471,7 +516,8 @@ var require_no = __commonJS({
         screenset: "Skjermsett:",
         theme: "Tema:",
         language: "Spr\xE5k:",
-        mockApi: "Mock-API"
+        mockApi: "Mock-API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -492,7 +538,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 +560,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 +582,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 +604,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 +626,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 +648,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 +670,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 +692,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 +714,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 +736,8 @@ var require_tr = __commonJS({
         screenset: "Ekran Seti:",
         theme: "Tema:",
         language: "Dil:",
-        mockApi: "Sahte API"
+        mockApi: "Sahte API",
+        gts_package: "GTS Package"
       }
     };
   }
@@ -702,7 +758,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 +780,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 +802,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 +824,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 +846,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 +889,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 +924,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 +1039,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,11 +1078,77 @@ var StudioProvider = ({ children }) => {
         portalContainer,
         setPortalContainer
       },
-      children
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RestoreGtsPackageOnMount, {}),
+        children
+      ]
     }
   );
 };
 StudioProvider.displayName = "StudioProvider";
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var Card = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    ),
+    ...props
+  }
+);
+Card.displayName = "Card";
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        ["default" /* Default */]: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        ["destructive" /* Destructive */]: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        ["outline" /* Outline */]: "border border-input bg-background text-foreground shadow-sm hover:bg-accent data-[state=open]:bg-accent",
+        ["secondary" /* Secondary */]: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ["ghost" /* Ghost */]: "hover:bg-accent data-[state=open]:bg-accent",
+        ["link" /* Link */]: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        ["default" /* Default */]: "h-9 px-4 py-2",
+        ["sm" /* Sm */]: "h-8 rounded-md px-3 text-xs",
+        ["lg" /* Lg */]: "h-10 rounded-md px-8",
+        ["icon" /* Icon */]: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default" /* Default */,
+      size: "default" /* Default */
+    }
+  }
+);
+var Button = ({
+  ref,
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) => {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      className: cn(buttonVariants({ variant, size, className })),
+      ref,
+      ...props
+    }
+  );
+};
+Button.displayName = "Button";
 var VIEWPORT_MARGIN = 20;
 function clampToViewport(pos, size) {
   const maxX = Math.max(VIEWPORT_MARGIN, window.innerWidth - size.width - VIEWPORT_MARGIN);
@@ -955,19 +1163,19 @@ var useDraggable = ({ panelSize, storageKey = STORAGE_KEYS.POSITION }) => {
     x: window.innerWidth - panelSize.width - VIEWPORT_MARGIN,
     y: window.innerHeight - panelSize.height - VIEWPORT_MARGIN
   });
-  const [position, setPosition] = React3.useState(
+  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 maxX = Math.max(VIEWPORT_MARGIN, window.innerWidth - panelSize.width - VIEWPORT_MARGIN);
@@ -989,7 +1197,7 @@ var useDraggable = ({ panelSize, storageKey = STORAGE_KEYS.POSITION }) => {
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging, panelSize.width, panelSize.height, storageKey]);
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     const handleResize = () => {
       setPosition((prev) => {
         const clamped = clampToViewport(prev, panelSize);
@@ -1009,15 +1217,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,
@@ -1027,7 +1235,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";
@@ -1070,6 +1278,148 @@ var useResizable = () => {
     handleMouseDown
   };
 };
+var DropdownMenu = ({
+  dir,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Root,
+  {
+    ...props,
+    dir
+  }
+);
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+var DropdownMenuContent = ({
+  ref,
+  className,
+  sideOffset = 4,
+  container,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Content,
+  {
+    ref,
+    sideOffset,
+    style: { backgroundColor: "hsl(var(--background, 0 0% 100%))" },
+    className: cn(
+      "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+) });
+DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
+var DropdownMenuItem = ({
+  ref,
+  className,
+  inset,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+);
+DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
+var ChevronDownIcon = ({ className = "" }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+  }
+);
+var DropdownButton = ({
+  ref,
+  children,
+  variant = "outline" /* Outline */,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Button,
+    {
+      ref,
+      variant,
+      className: cn("min-w-40 justify-between rtl:flex-row-reverse", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+        /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "h-4 w-4" })
+      ]
+    }
+  );
+};
+DropdownButton.displayName = "DropdownButton";
+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(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        DropdownButton,
+        {
+          variant: "outline" /* Outline */,
+          disabled: packages.length <= 1,
+          children: activePackage || "No package"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: packages.map((pkg) => /* @__PURE__ */ jsxRuntime.jsx(
+        DropdownMenuItem,
+        {
+          onClick: () => handlePackageChange(pkg),
+          children: pkg
+        },
+        pkg
+      )) })
+    ] })
+  ] });
+};
+MfePackageSelector.displayName = "MfePackageSelector";
 var ThemeSelector = ({
   className = ""
 }) => {
@@ -1081,10 +1431,10 @@ var ThemeSelector = ({
   };
   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.theme") }),
-    /* @__PURE__ */ jsxRuntime.jsxs(uikit.DropdownMenu, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownButton, { variant: uikit.ButtonVariant.Outline, children: formatThemeName(currentTheme || "") }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: themes.map((theme) => /* @__PURE__ */ jsxRuntime.jsx(
-        uikit.DropdownMenuItem,
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownButton, { variant: "outline" /* Outline */, children: formatThemeName(currentTheme || "") }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: themes.map((theme) => /* @__PURE__ */ jsxRuntime.jsx(
+        DropdownMenuItem,
         {
           onClick: () => setTheme(theme.id),
           children: formatThemeName(theme.name || theme.id)
@@ -1095,46 +1445,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({
@@ -1145,10 +1455,10 @@ function LanguageSelector({
   const currentLanguage = language ? react.getLanguageMetadata(language) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap", children: t("studio:controls.language") }),
-    /* @__PURE__ */ jsxRuntime.jsxs(uikit.DropdownMenu, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(uikit.Button, { variant: uikit.ButtonVariant.Outline, children: currentLanguage ? displayMode === react.LanguageDisplayMode.Native ? currentLanguage.name : currentLanguage.englishName : FALLBACK_SELECT_LANGUAGE_TEXT }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: react.SUPPORTED_LANGUAGES.map((lang) => /* @__PURE__ */ jsxRuntime.jsxs(
-        uikit.DropdownMenuItem,
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline" /* Outline */, children: currentLanguage ? displayMode === react.LanguageDisplayMode.Native ? currentLanguage.name : currentLanguage.englishName : FALLBACK_SELECT_LANGUAGE_TEXT }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: react.SUPPORTED_LANGUAGES.map((lang) => /* @__PURE__ */ jsxRuntime.jsxs(
+        DropdownMenuItem,
         {
           onClick: () => setLanguage(lang.code),
           children: [
@@ -1161,6 +1471,32 @@ function LanguageSelector({
     ] })
   ] });
 }
+var Switch = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  SwitchPrimitives__namespace.Root,
+  {
+    className: cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      SwitchPrimitives__namespace.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
+          "data-[state=checked]:ltr:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
+          "data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+);
+Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
 var ApiModeToggle = ({
   className
 }) => {
@@ -1182,7 +1518,7 @@ var ApiModeToggle = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      uikit.Switch,
+      Switch,
       {
         id: "api-mode-toggle",
         checked: enabled,
@@ -1192,48 +1528,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, {})
@@ -1244,13 +1544,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]);
@@ -1272,7 +1572,7 @@ var StudioPanel = () => {
           width: `${size.width}px`,
           height: `${size.height}px`
         },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(uikit.Card, { className: "h-full w-full flex flex-col overflow-hidden bg-white/20 dark:bg-black/50 backdrop-blur-md backdrop-saturate-[180%] border border-white/30 dark:border-white/20 shadow-[0_8px_32px_rgba(0,0,0,0.2)]", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "h-full w-full flex flex-col overflow-hidden bg-white/20 dark:bg-black/50 backdrop-blur-md backdrop-saturate-[180%] border border-white/30 dark:border-white/20 shadow-[0_8px_32px_rgba(0,0,0,0.2)]", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -1282,10 +1582,10 @@ var StudioPanel = () => {
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold text-foreground", children: t("studio:title") }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  uikit.Button,
+                  Button,
                   {
-                    variant: uikit.ButtonVariant.Ghost,
-                    size: uikit.ButtonSize.Sm,
+                    variant: "ghost" /* Ghost */,
+                    size: "sm" /* Sm */,
                     onClick: toggleCollapsed,
                     className: "h-7 w-7 p-0",
                     "aria-label": t("studio:aria.collapseButton"),
@@ -1341,7 +1641,7 @@ var StudioPanel = () => {
 };
 StudioPanel.displayName = "StudioPanel";
 var useKeyboardShortcut = (handler) => {
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.shiftKey && e.code === "Backquote") {
         e.preventDefault();
@@ -1362,9 +1662,9 @@ var GlassmorphicButton = ({
   isDragging = false
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    uikit.Button,
+    Button,
     {
-      variant: uikit.ButtonVariant.Ghost,
+      variant: "ghost" /* Ghost */,
       onMouseDown,
       onClick,
       title,
@@ -1401,7 +1701,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);
@@ -1437,6 +1737,278 @@ var CollapsedButton = ({ toggleCollapsed }) => {
   );
 };
 CollapsedButton.displayName = "CollapsedButton";
+
+// src/styles/studioStyles.ts
+var STUDIO_STYLE_ID = "hai3-studio-styles";
+var STUDIO_CSS = (
+  /* css */
+  `
+/* ============================================================
+   HAI3 Studio \u2014 Self-contained utility styles
+   ============================================================ */
+
+/* --- Base normalization (Preflight may be absent in no-uikit hosts) ---
+   :where() keeps specificity at 0-0-0 so utility classes always win. */
+.studio-panel,
+.studio-portal-container {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.5;
+}
+:where(.studio-panel *, .studio-portal-container *) { box-sizing: border-box; }
+:where(.studio-panel button, .studio-portal-container button) {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  border: 0 solid transparent;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+:where(.studio-panel h2, .studio-panel h3, .studio-portal-container h2, .studio-portal-container h3) {
+  font-size: inherit;
+  font-weight: inherit;
+  margin: 0;
+}
+
+/* --- Layout --- */
+.fixed { position: fixed; }
+.absolute { position: absolute; }
+.relative { position: relative; }
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+.block { display: block; }
+.peer { /* Radix peer marker \u2014 no CSS needed */ }
+.flex-col { flex-direction: column; }
+.flex-1 { flex: 1 1 0%; }
+.shrink-0 { flex-shrink: 0; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+.gap-2 { gap: 0.5rem; }
+.overflow-hidden { overflow: hidden; }
+.overflow-y-auto { overflow-y: auto; }
+.overflow-x-hidden { overflow-x: hidden; }
+
+/* --- Sizing --- */
+.h-full { height: 100%; }
+.w-full { width: 100%; }
+.h-4 { height: 1rem; }
+.w-4 { width: 1rem; }
+.h-5 { height: 1.25rem; }
+.w-5 { width: 1.25rem; }
+.w-9 { width: 2.25rem; }
+.h-6 { height: 1.5rem; }
+.w-6 { width: 1.5rem; }
+.h-7 { height: 1.75rem; }
+.w-7 { width: 1.75rem; }
+.h-8 { height: 2rem; }
+.h-9 { height: 2.25rem; }
+.h-10 { height: 2.5rem; }
+.h-12 { height: 3rem; }
+.w-12 { width: 3rem; }
+.min-w-\\[8rem\\] { min-width: 8rem; }
+.min-w-40 { min-width: 10rem; }
+
+/* --- Spacing --- */
+.p-0 { padding: 0; }
+.p-1 { padding: 0.25rem; }
+.p-4 { padding: 1rem; }
+.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.px-8 { padding-left: 2rem; padding-right: 2rem; }
+.py-1\\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.pl-8 { padding-left: 2rem; }
+.bottom-1 { bottom: 0.25rem; }
+.right-1 { right: 0.25rem; }
+.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
+.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
+
+/* --- Typography --- */
+.text-xs { font-size: 0.75rem; line-height: 1rem; }
+.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.uppercase { text-transform: uppercase; }
+.tracking-wider { letter-spacing: 0.05em; }
+.whitespace-nowrap { white-space: nowrap; }
+
+/* --- Colors (theme-aware via CSS variables) ---
+   Some theme variables (--popover-foreground, --card-foreground) may have
+   incorrect values in third-party themes. The Studio maps all component
+   colors to --foreground / --background which are always correct (body uses them).
+   :where() ensures host-app Tailwind utilities take precedence when available. */
+.text-foreground { color: hsl(var(--foreground)); }
+.text-muted-foreground { color: hsl(var(--muted-foreground)); }
+.text-muted-foreground\\/70 { color: hsl(var(--muted-foreground) / 0.7); }
+:where(.bg-popover) { background-color: hsl(var(--background)); }
+:where(.text-popover-foreground) { color: hsl(var(--foreground)); }
+:where(.bg-accent) { background-color: hsl(var(--foreground) / 0.1); }
+:where(.text-accent-foreground) { color: hsl(var(--foreground)); }
+:where(.bg-background) { background-color: hsl(var(--background)); }
+:where(.bg-card) { background-color: hsl(var(--background)); }
+:where(.text-card-foreground) { color: hsl(var(--foreground)); }
+:where(.bg-primary) { background-color: hsl(var(--foreground)); }
+:where(.text-primary-foreground) { color: hsl(var(--background)); }
+:where(.bg-input) { background-color: hsl(var(--foreground) / 0.15); }
+:where(.border-input) { border-color: hsl(var(--foreground) / 0.2); }
+:where(.ring-ring) { --tw-ring-color: hsl(var(--foreground) / 0.5); }
+.border-transparent { border-color: transparent; }
+
+/* --- Borders --- */
+.border { border-width: 1px; }
+.border-2 { border-width: 2px; }
+.border-b { border-bottom-width: 1px; }
+:where(.border-border\\/50) { border-color: hsl(var(--foreground) / 0.15); }
+.rounded-full { border-radius: 9999px; }
+.rounded-xl { border-radius: 0.75rem; }
+.rounded-md { border-radius: calc(var(--radius, 0.5rem) - 2px); }
+.rounded-sm { border-radius: calc(var(--radius, 0.5rem) - 4px); }
+
+/* --- Interaction --- */
+.select-none { -webkit-user-select: none; user-select: none; }
+.cursor-pointer { cursor: pointer; }
+.cursor-default { cursor: default; }
+.cursor-nwse-resize { cursor: nwse-resize; }
+.pointer-events-none { pointer-events: none; }
+.pointer-events-auto { pointer-events: auto; }
+.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* --- Z-index (arbitrary values) --- */
+.z-\\[10000\\] { z-index: 10000; }
+.z-\\[99999\\] { z-index: 99999; }
+
+/* --- Glassmorphic: background with opacity --- */
+.bg-white\\/20 { background-color: rgb(255 255 255 / 0.2); }
+.bg-white\\/30 { background-color: rgb(255 255 255 / 0.3); }
+.dark .dark\\:bg-black\\/50 { background-color: rgb(0 0 0 / 0.5); }
+.dark .dark\\:bg-black\\/60 { background-color: rgb(0 0 0 / 0.6); }
+
+/* --- Glassmorphic: border with opacity --- */
+.border-white\\/30 { border-color: rgb(255 255 255 / 0.3); }
+.dark .dark\\:border-white\\/20 { border-color: rgb(255 255 255 / 0.2); }
+
+/* --- Glassmorphic: backdrop filters --- */
+.backdrop-blur-md {
+  --tw-backdrop-blur: blur(12px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+}
+.backdrop-saturate-\\[180\\%\\] {
+  --tw-backdrop-saturate: saturate(1.8);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia, );
+  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia, );
+}
+
+/* --- Glassmorphic: box shadow (arbitrary) --- */
+.shadow-\\[0_8px_32px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\] {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+/* --- Shadows --- */
+.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
+.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
+.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
+.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
+.ring-0 { box-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, transparent); }
+
+/* --- Hover states --- */
+.hover\\:bg-white\\/30:hover { background-color: rgb(255 255 255 / 0.3); }
+.dark .dark\\:hover\\:bg-black\\/60:hover { background-color: rgb(0 0 0 / 0.6); }
+.hover\\:text-muted-foreground:hover { color: hsl(var(--muted-foreground)); }
+:where(.hover\\:bg-accent:hover) { background-color: hsl(var(--foreground) / 0.1); }
+:where(.hover\\:bg-primary\\/90:hover) { background-color: hsl(var(--foreground) / 0.85); }
+:where(.hover\\:bg-secondary\\/80:hover) { background-color: hsl(var(--foreground) / 0.08); }
+:where(.hover\\:bg-destructive\\/90:hover) { background-color: hsl(0 60% 50% / 0.9); }
+
+/* --- Focus states --- */
+:where(.focus\\:bg-accent:focus) { background-color: hsl(var(--foreground) / 0.1); }
+:where(.focus\\:text-foreground:focus) { color: hsl(var(--foreground)); }
+:where(.focus\\:text-accent-foreground:focus) { color: hsl(var(--foreground)); }
+.focus-visible\\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }
+:where(.focus-visible\\:ring-1:focus-visible) {
+  box-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, hsl(var(--foreground) / 0.5));
+}
+:where(.focus-visible\\:ring-2:focus-visible) {
+  box-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, hsl(var(--foreground) / 0.5));
+}
+:where(.focus-visible\\:ring-ring:focus-visible) { --tw-ring-color: hsl(var(--foreground) / 0.5); }
+:where(.focus-visible\\:ring-offset-2:focus-visible) { --tw-ring-offset-width: 2px; }
+:where(.focus-visible\\:ring-offset-background:focus-visible) { --tw-ring-offset-color: hsl(var(--background)); }
+
+/* --- Data-attribute & disabled states --- */
+:where(.data-\\[state\\=open\\]\\:bg-accent[data-state=open]) { background-color: hsl(var(--foreground) / 0.1); }
+:where(.data-\\[state\\=checked\\]\\:bg-primary[data-state=checked]) { background-color: hsl(var(--foreground)); }
+:where(.data-\\[state\\=unchecked\\]\\:bg-input[data-state=unchecked]) { background-color: hsl(var(--foreground) / 0.15); }
+.data-\\[disabled\\]\\:pointer-events-none[data-disabled] { pointer-events: none; }
+.data-\\[disabled\\]\\:opacity-50[data-disabled] { opacity: 0.5; }
+.disabled\\:pointer-events-none:disabled { pointer-events: none; }
+.disabled\\:opacity-50:disabled { opacity: 0.5; }
+.disabled\\:cursor-not-allowed:disabled { cursor: not-allowed; }
+
+/* --- SVG child selectors --- */
+[class*="[&>svg]:size-4"] > svg,
+[class*="[&_svg]:size-4"] svg { width: 1rem; height: 1rem; }
+[class*="[&>svg]:shrink-0"] > svg,
+[class*="[&_svg]:shrink-0"] svg { flex-shrink: 0; }
+[class*="[&_svg]:pointer-events-none"] svg { pointer-events: none; }
+
+/* --- RTL support --- */
+.rtl\\:flex-row-reverse:where([dir=rtl], [dir=rtl] *) { flex-direction: row-reverse; }
+.data-\\[state\\=checked\\]\\:ltr\\:translate-x-4[data-state=checked]:where([dir=ltr], [dir=ltr] *) { transform: translateX(1rem); }
+.data-\\[state\\=checked\\]\\:rtl\\:-translate-x-4[data-state=checked]:where([dir=rtl], [dir=rtl] *) { transform: translateX(-1rem); }
+.data-\\[state\\=unchecked\\]\\:translate-x-0[data-state=unchecked] { transform: translateX(0); }
+
+/* --- Radix animation (minimal enter/exit for dropdown) --- */
+@keyframes hai3-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes hai3-fade-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes hai3-zoom-in { from { transform: scale(0.95); } to { transform: scale(1); } }
+@keyframes hai3-zoom-out { from { transform: scale(1); } to { transform: scale(0.95); } }
+.data-\\[state\\=open\\]\\:animate-in[data-state=open] { animation: hai3-fade-in 150ms ease-out, hai3-zoom-in 150ms ease-out; }
+.data-\\[state\\=closed\\]\\:animate-out[data-state=closed] { animation: hai3-fade-out 100ms ease-in, hai3-zoom-out 100ms ease-in; animation-fill-mode: forwards; }
+
+/* --- Studio portal: scoped dropdown color overrides ---
+   Dropdown content portaled here inherits host-app Tailwind utilities that
+   may reference broken theme variables (e.g. --popover-foreground identical
+   to --popover in some third-party themes). Scoped rules (specificity 0-2-0)
+   beat host-app Tailwind (0-1-0) and map everything to --foreground / --background. */
+.studio-portal-container .bg-popover { background-color: hsl(var(--background, 0 0% 100%)); }
+.studio-portal-container .text-popover-foreground { color: hsl(var(--foreground, 0 0% 0%)); }
+.studio-portal-container .focus\\:bg-accent:focus { background-color: hsl(var(--foreground) / 0.1); }
+.studio-portal-container .focus\\:text-foreground:focus { color: hsl(var(--foreground)); }
+
+/* --- Z-index (dropdown content) --- */
+.z-50 { z-index: 50; }
+`
+);
+function injectStudioStyles() {
+  if (typeof document === "undefined") return () => {
+  };
+  let styleEl = document.getElementById(STUDIO_STYLE_ID);
+  if (styleEl) return () => {
+  };
+  styleEl = document.createElement("style");
+  styleEl.id = STUDIO_STYLE_ID;
+  styleEl.textContent = STUDIO_CSS;
+  document.head.appendChild(styleEl);
+  return () => {
+    styleEl?.remove();
+  };
+}
 var StudioContent = () => {
   const { collapsed, toggleCollapsed } = useStudioContext();
   useKeyboardShortcut(toggleCollapsed);
@@ -1446,6 +2018,9 @@ var StudioContent = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(StudioPanel, {});
 };
 var StudioOverlay = () => {
+  React2.useEffect(() => {
+    return injectStudioStyles();
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(StudioProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(StudioContent, {}) });
 };
 StudioOverlay.displayName = "StudioOverlay";