@hai3/studio 0.1.0-alpha.1 → 0.2.0-alpha.0

package/dist/index.cjs

@@ -1,15 +1,14 @@
 'use strict';
 
-var React3 = require('react');
-var uicore = require('@hai3/uicore');
+var React4 = require('react');
+var react = require('@hai3/react');
 var jsxRuntime = require('react/jsx-runtime');
 var uikit = require('@hai3/uikit');
 var lodash = require('lodash');
-var uikitContracts = require('@hai3/uikit-contracts');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React4__default = /*#__PURE__*/_interopDefault(React4);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -841,19 +840,19 @@ var StudioEvents = {
 
 // src/effects/persistenceEffects.ts
 var initPersistenceEffects = () => {
-  const positionSubscription = uicore.eventBus.on(
+  const positionSubscription = react.eventBus.on(
     StudioEvents.PositionChanged,
     ({ position }) => {
       saveStudioState(STORAGE_KEYS.POSITION, position);
     }
   );
-  const sizeSubscription = uicore.eventBus.on(
+  const sizeSubscription = react.eventBus.on(
     StudioEvents.SizeChanged,
     ({ size }) => {
       saveStudioState(STORAGE_KEYS.SIZE, size);
     }
   );
-  const buttonPositionSubscription = uicore.eventBus.on(
+  const buttonPositionSubscription = react.eventBus.on(
     StudioEvents.ButtonPositionChanged,
     ({ position }) => {
       saveStudioState(STORAGE_KEYS.BUTTON_POSITION, position);
@@ -865,63 +864,63 @@ var initPersistenceEffects = () => {
     buttonPositionSubscription.unsubscribe();
   };
 };
-var studioTranslations = uicore.I18nRegistry.createLoader({
-  [uicore.Language.English]: () => Promise.resolve().then(() => __toESM(require_en())),
-  [uicore.Language.Arabic]: () => Promise.resolve().then(() => __toESM(require_ar())),
-  [uicore.Language.Bengali]: () => Promise.resolve().then(() => __toESM(require_bn())),
-  [uicore.Language.Czech]: () => Promise.resolve().then(() => __toESM(require_cs())),
-  [uicore.Language.Danish]: () => Promise.resolve().then(() => __toESM(require_da())),
-  [uicore.Language.German]: () => Promise.resolve().then(() => __toESM(require_de())),
-  [uicore.Language.Greek]: () => Promise.resolve().then(() => __toESM(require_el())),
-  [uicore.Language.Spanish]: () => Promise.resolve().then(() => __toESM(require_es())),
-  [uicore.Language.Persian]: () => Promise.resolve().then(() => __toESM(require_fa())),
-  [uicore.Language.Finnish]: () => Promise.resolve().then(() => __toESM(require_fi())),
-  [uicore.Language.French]: () => Promise.resolve().then(() => __toESM(require_fr())),
-  [uicore.Language.Hebrew]: () => Promise.resolve().then(() => __toESM(require_he())),
-  [uicore.Language.Hindi]: () => Promise.resolve().then(() => __toESM(require_hi())),
-  [uicore.Language.Hungarian]: () => Promise.resolve().then(() => __toESM(require_hu())),
-  [uicore.Language.Indonesian]: () => Promise.resolve().then(() => __toESM(require_id())),
-  [uicore.Language.Italian]: () => Promise.resolve().then(() => __toESM(require_it())),
-  [uicore.Language.Japanese]: () => Promise.resolve().then(() => __toESM(require_ja())),
-  [uicore.Language.Korean]: () => Promise.resolve().then(() => __toESM(require_ko())),
-  [uicore.Language.Malay]: () => Promise.resolve().then(() => __toESM(require_ms())),
-  [uicore.Language.Dutch]: () => Promise.resolve().then(() => __toESM(require_nl())),
-  [uicore.Language.Norwegian]: () => Promise.resolve().then(() => __toESM(require_no())),
-  [uicore.Language.Polish]: () => Promise.resolve().then(() => __toESM(require_pl())),
-  [uicore.Language.Portuguese]: () => Promise.resolve().then(() => __toESM(require_pt())),
-  [uicore.Language.Romanian]: () => Promise.resolve().then(() => __toESM(require_ro())),
-  [uicore.Language.Russian]: () => Promise.resolve().then(() => __toESM(require_ru())),
-  [uicore.Language.Swedish]: () => Promise.resolve().then(() => __toESM(require_sv())),
-  [uicore.Language.Swahili]: () => Promise.resolve().then(() => __toESM(require_sw())),
-  [uicore.Language.Tamil]: () => Promise.resolve().then(() => __toESM(require_ta())),
-  [uicore.Language.Thai]: () => Promise.resolve().then(() => __toESM(require_th())),
-  [uicore.Language.Tagalog]: () => Promise.resolve().then(() => __toESM(require_tl())),
-  [uicore.Language.Turkish]: () => Promise.resolve().then(() => __toESM(require_tr())),
-  [uicore.Language.Ukrainian]: () => Promise.resolve().then(() => __toESM(require_uk())),
-  [uicore.Language.Urdu]: () => Promise.resolve().then(() => __toESM(require_ur())),
-  [uicore.Language.Vietnamese]: () => Promise.resolve().then(() => __toESM(require_vi())),
-  [uicore.Language.ChineseTraditional]: () => Promise.resolve().then(() => __toESM(require_zh_TW())),
-  [uicore.Language.ChineseSimplified]: () => Promise.resolve().then(() => __toESM(require_zh()))
+var studioTranslations = react.I18nRegistry.createLoader({
+  [react.Language.English]: () => Promise.resolve().then(() => __toESM(require_en())),
+  [react.Language.Arabic]: () => Promise.resolve().then(() => __toESM(require_ar())),
+  [react.Language.Bengali]: () => Promise.resolve().then(() => __toESM(require_bn())),
+  [react.Language.Czech]: () => Promise.resolve().then(() => __toESM(require_cs())),
+  [react.Language.Danish]: () => Promise.resolve().then(() => __toESM(require_da())),
+  [react.Language.German]: () => Promise.resolve().then(() => __toESM(require_de())),
+  [react.Language.Greek]: () => Promise.resolve().then(() => __toESM(require_el())),
+  [react.Language.Spanish]: () => Promise.resolve().then(() => __toESM(require_es())),
+  [react.Language.Persian]: () => Promise.resolve().then(() => __toESM(require_fa())),
+  [react.Language.Finnish]: () => Promise.resolve().then(() => __toESM(require_fi())),
+  [react.Language.French]: () => Promise.resolve().then(() => __toESM(require_fr())),
+  [react.Language.Hebrew]: () => Promise.resolve().then(() => __toESM(require_he())),
+  [react.Language.Hindi]: () => Promise.resolve().then(() => __toESM(require_hi())),
+  [react.Language.Hungarian]: () => Promise.resolve().then(() => __toESM(require_hu())),
+  [react.Language.Indonesian]: () => Promise.resolve().then(() => __toESM(require_id())),
+  [react.Language.Italian]: () => Promise.resolve().then(() => __toESM(require_it())),
+  [react.Language.Japanese]: () => Promise.resolve().then(() => __toESM(require_ja())),
+  [react.Language.Korean]: () => Promise.resolve().then(() => __toESM(require_ko())),
+  [react.Language.Malay]: () => Promise.resolve().then(() => __toESM(require_ms())),
+  [react.Language.Dutch]: () => Promise.resolve().then(() => __toESM(require_nl())),
+  [react.Language.Norwegian]: () => Promise.resolve().then(() => __toESM(require_no())),
+  [react.Language.Polish]: () => Promise.resolve().then(() => __toESM(require_pl())),
+  [react.Language.Portuguese]: () => Promise.resolve().then(() => __toESM(require_pt())),
+  [react.Language.Romanian]: () => Promise.resolve().then(() => __toESM(require_ro())),
+  [react.Language.Russian]: () => Promise.resolve().then(() => __toESM(require_ru())),
+  [react.Language.Swedish]: () => Promise.resolve().then(() => __toESM(require_sv())),
+  [react.Language.Swahili]: () => Promise.resolve().then(() => __toESM(require_sw())),
+  [react.Language.Tamil]: () => Promise.resolve().then(() => __toESM(require_ta())),
+  [react.Language.Thai]: () => Promise.resolve().then(() => __toESM(require_th())),
+  [react.Language.Tagalog]: () => Promise.resolve().then(() => __toESM(require_tl())),
+  [react.Language.Turkish]: () => Promise.resolve().then(() => __toESM(require_tr())),
+  [react.Language.Ukrainian]: () => Promise.resolve().then(() => __toESM(require_uk())),
+  [react.Language.Urdu]: () => Promise.resolve().then(() => __toESM(require_ur())),
+  [react.Language.Vietnamese]: () => Promise.resolve().then(() => __toESM(require_vi())),
+  [react.Language.ChineseTraditional]: () => Promise.resolve().then(() => __toESM(require_zh_TW())),
+  [react.Language.ChineseSimplified]: () => Promise.resolve().then(() => __toESM(require_zh()))
 });
-uicore.i18nRegistry.registerLoader("studio", studioTranslations);
-var StudioContext = React3.createContext(void 0);
+react.i18nRegistry.registerLoader("studio", studioTranslations);
+var StudioContext = React4.createContext(void 0);
 var useStudioContext = () => {
-  const context = React3.useContext(StudioContext);
+  const context = React4.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] = React4.useState(
     () => loadStudioState(STORAGE_KEYS.COLLAPSED, false)
   );
-  const [portalContainer, setPortalContainer] = React3.useState(null);
-  React3.useEffect(() => {
+  const [portalContainer, setPortalContainer] = React4.useState(null);
+  React4.useEffect(() => {
     const cleanup = initPersistenceEffects();
     return cleanup;
   }, []);
-  const toggleCollapsed = React3.useCallback(() => {
+  const toggleCollapsed = React4.useCallback(() => {
     setCollapsed((prev) => {
       const newValue = !prev;
       saveStudioState(STORAGE_KEYS.COLLAPSED, newValue);
@@ -947,19 +946,19 @@ var useDraggable = ({ panelSize, storageKey = STORAGE_KEYS.POSITION }) => {
     x: window.innerWidth - panelSize.width - 20,
     y: window.innerHeight - panelSize.height - 20
   });
-  const [position, setPosition] = React3.useState(
+  const [position, setPosition] = React4.useState(
     () => loadStudioState(storageKey, getDefaultPosition())
   );
-  const [isDragging, setIsDragging] = React3.useState(false);
-  const dragStartPos = React3.useRef({ x: 0, y: 0 });
-  const handleMouseDown = React3.useCallback((e) => {
+  const [isDragging, setIsDragging] = React4.useState(false);
+  const dragStartPos = React4.useRef({ x: 0, y: 0 });
+  const handleMouseDown = React4.useCallback((e) => {
     setIsDragging(true);
     dragStartPos.current = {
       x: e.clientX - position.x,
       y: e.clientY - position.y
     };
   }, [position]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!isDragging) return;
     const handleMouseMove = (e) => {
       const newX = lodash.clamp(
@@ -975,7 +974,7 @@ var useDraggable = ({ panelSize, storageKey = STORAGE_KEYS.POSITION }) => {
       const newPosition = { x: newX, y: newY };
       setPosition(newPosition);
       const eventName = storageKey === STORAGE_KEYS.BUTTON_POSITION ? StudioEvents.ButtonPositionChanged : StudioEvents.PositionChanged;
-      uicore.eventBus.emit(eventName, { position: newPosition });
+      react.eventBus.emit(eventName, { position: newPosition });
     };
     const handleMouseUp = () => {
       setIsDragging(false);
@@ -994,15 +993,15 @@ var useDraggable = ({ panelSize, storageKey = STORAGE_KEYS.POSITION }) => {
   };
 };
 var useResizable = () => {
-  const [size, setSize] = React3.useState(
+  const [size, setSize] = React4.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] = React4.useState(false);
+  const resizeStartRef = React4.useRef(null);
+  const handleMouseDown = React4.useCallback((e) => {
     e.stopPropagation();
     resizeStartRef.current = {
       mouseX: e.clientX,
@@ -1012,7 +1011,7 @@ var useResizable = () => {
     };
     setIsResizing(true);
   }, [size.width, size.height]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!isResizing || !resizeStartRef.current) return;
     const startState = resizeStartRef.current;
     document.body.style.userSelect = "none";
@@ -1032,7 +1031,7 @@ var useResizable = () => {
       );
       const newSize = { width: newWidth, height: newHeight };
       setSize(newSize);
-      uicore.eventBus.emit(StudioEvents.SizeChanged, { size: newSize });
+      react.eventBus.emit(StudioEvents.SizeChanged, { size: newSize });
     };
     const handleMouseUp = () => {
       setIsResizing(false);
@@ -1058,25 +1057,23 @@ var useResizable = () => {
 var ThemeSelector = ({
   className = ""
 }) => {
-  const dispatch = uicore.useAppDispatch();
-  const currentTheme = uicore.useAppSelector((state) => state.uicore.layout.theme);
+  const { currentTheme, themes, setTheme } = react.useTheme();
   const { portalContainer } = useStudioContext();
-  const { t } = uicore.useTranslation();
+  const { t } = react.useTranslation();
   const formatThemeName = (themeName) => {
     return themeName.split("-").map((word) => lodash.upperFirst(word)).join(" ");
   };
-  const availableThemes = uicore.themeRegistry.getThemeNames();
   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: uikitContracts.ButtonVariant.Outline, children: formatThemeName(currentTheme) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: availableThemes.map((themeName) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__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,
         {
-          onClick: () => dispatch(uicore.changeTheme(themeName)),
-          children: formatThemeName(themeName)
+          onClick: () => setTheme(theme.id),
+          children: formatThemeName(theme.name || theme.id)
         },
-        themeName
+        theme.id
       )) })
     ] })
   ] });
@@ -1089,7 +1086,7 @@ var ScreensetSelector = ({
   className = ""
 }) => {
   const { portalContainer } = useStudioContext();
-  const { t, direction } = uicore.useTranslation();
+  const { t, isRTL } = react.useTranslation();
   const formatName = (name) => {
     return name.split(/[-_]/).map((word) => lodash.upperFirst(word)).join(" ");
   };
@@ -1105,8 +1102,8 @@ var ScreensetSelector = ({
   };
   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: direction, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(uikit.DropdownButton, { variant: uikitContracts.ButtonVariant.Outline, children: formatName(getCurrentDisplay()) }) }),
+    /* @__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(
@@ -1125,23 +1122,22 @@ ScreensetSelector.displayName = "ScreensetSelector";
 var FALLBACK_SELECT_LANGUAGE_TEXT = "Select language";
 var RTL_INDICATOR_SUFFIX = " (RTL)";
 function LanguageSelector({
-  displayMode = uicore.LanguageDisplayMode.Native
+  displayMode = react.LanguageDisplayMode.Native
 } = {}) {
-  const { t, language, changeLanguage, getSupportedLanguages } = uicore.useTranslation();
+  const { t, language, setLanguage } = react.useTranslation();
   const { portalContainer } = useStudioContext();
-  const languages = getSupportedLanguages();
-  const currentLanguage = languages.find((lang) => lang.code === language);
+  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: uikitContracts.ButtonVariant.Outline, children: currentLanguage ? displayMode === uicore.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: languages.map((lang) => /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__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,
         {
-          onClick: () => changeLanguage(lang.code),
+          onClick: () => setLanguage(lang.code),
           children: [
-            displayMode === uicore.LanguageDisplayMode.Native ? lang.name : lang.englishName,
-            lang.direction === uicore.TextDirection.RightToLeft && RTL_INDICATOR_SUFFIX
+            displayMode === react.LanguageDisplayMode.Native ? lang.name : lang.englishName,
+            lang.direction === react.TextDirection.RightToLeft && RTL_INDICATOR_SUFFIX
           ]
         },
         lang.code
@@ -1150,8 +1146,12 @@ function LanguageSelector({
   ] });
 }
 var ApiModeToggle = ({ className }) => {
-  const useMockApi = uicore.useAppSelector((state) => state.uicore.app.useMockApi);
-  const { t } = uicore.useTranslation();
+  const [useMockApi, setUseMockApi] = React4.useState(true);
+  const { t } = react.useTranslation();
+  const handleToggle = (checked) => {
+    setUseMockApi(checked);
+    react.apiRegistry.setMockMode(checked);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between h-9 ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "label",
@@ -1166,28 +1166,43 @@ var ApiModeToggle = ({ className }) => {
       {
         id: "api-mode-toggle",
         checked: useMockApi,
-        onCheckedChange: (checked) => uicore.setApiMode(checked)
+        onCheckedChange: handleToggle
       }
     )
   ] });
 };
 ApiModeToggle.displayName = "ApiModeToggle";
-var ALL_CATEGORIES = [uicore.ScreensetCategory.Drafts, uicore.ScreensetCategory.Mockups, uicore.ScreensetCategory.Production];
+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: uicore.screensetRegistry.getMetadataByCategory(category)
+    screensets: allScreensets.filter((s) => s.category === category).map((s) => ({
+      id: s.id,
+      name: s.name
+    }))
   }));
 };
 var ControlPanel = () => {
-  const dispatch = uicore.useAppDispatch();
-  const currentScreenset = uicore.useAppSelector((state) => state.uicore.layout.currentScreenset);
-  const [screensetOptions, setScreensetOptions] = React3.useState([]);
-  const { t } = uicore.useTranslation();
-  React3.useEffect(() => {
+  const { currentScreenset, navigateToScreenset } = react.useNavigation();
+  const [screensetOptions, setScreensetOptions] = React4.useState([]);
+  const { t } = react.useTranslation();
+  React4.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: [
@@ -1195,8 +1210,8 @@ var ControlPanel = () => {
         ScreensetSelector,
         {
           options: screensetOptions,
-          currentValue: currentScreenset,
-          onChange: (value) => dispatch(uicore.selectScreenset(value))
+          currentValue: getCurrentValue(),
+          onChange: handleScreensetChange
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(ApiModeToggle, {}),
@@ -1208,14 +1223,14 @@ var ControlPanel = () => {
 ControlPanel.displayName = "ControlPanel";
 var StudioPanel = () => {
   const { toggleCollapsed, setPortalContainer } = useStudioContext();
-  const { t } = uicore.useTranslation();
-  const portalRef = React3__default.default.useRef(null);
+  const { t } = react.useTranslation();
+  const portalRef = React4__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(() => {
+  React4__default.default.useEffect(() => {
     setPortalContainer(portalRef.current);
     return () => setPortalContainer(null);
   }, [setPortalContainer]);
@@ -1306,7 +1321,7 @@ var StudioPanel = () => {
 };
 StudioPanel.displayName = "StudioPanel";
 var useKeyboardShortcut = (handler) => {
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.shiftKey && e.code === "Backquote") {
         e.preventDefault();
@@ -1361,12 +1376,12 @@ var StudioIcon = ({ className = "" }) => {
   );
 };
 var CollapsedButton = ({ toggleCollapsed }) => {
-  const { t } = uicore.useTranslation();
+  const { t } = react.useTranslation();
   const { position, isDragging, handleMouseDown } = useDraggable({
     panelSize: BUTTON_SIZE,
     storageKey: STORAGE_KEYS.BUTTON_POSITION
   });
-  const dragStartPosition = React3.useRef(null);
+  const dragStartPosition = React4.useRef(null);
   const handleButtonMouseDown = (e) => {
     dragStartPosition.current = { x: e.clientX, y: e.clientY };
     handleMouseDown(e);