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

package/dist/{index.mjs → index.cjs}

@@ -1,9 +1,14 @@
-import React3, { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
-import { I18nRegistry, Language, i18nRegistry, ScreensetCategory, eventBus, useTranslation, useAppDispatch, useAppSelector, selectScreenset, screensetRegistry, setApiMode, themeRegistry, changeTheme, LanguageDisplayMode, TextDirection } from '@hai3/uicore';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Card, Button, ButtonSize, ButtonVariant, DropdownMenu, DropdownMenuTrigger, DropdownButton, DropdownMenuContent, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, Switch } from '@hai3/uikit';
-import { clamp, upperFirst } from 'lodash';
-import { ButtonVariant as ButtonVariant$1 } from '@hai3/uikit-contracts';
+'use strict';
+
+var React4 = require('react');
+var react = require('@hai3/react');
+var jsxRuntime = require('react/jsx-runtime');
+var uikit = require('@hai3/uikit');
+var lodash = require('lodash');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React4__default = /*#__PURE__*/_interopDefault(React4);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -27,7 +32,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   // file that has been converted to a CommonJS file using a Babel-
   // compatible transform (i.e. "__esModule" has not been set), then set
   // "default" to the CommonJS "module.exports" for node compatibility.
-  !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  __defProp(target, "default", { value: mod, enumerable: true }) ,
   mod
 ));
 
@@ -835,19 +840,19 @@ var StudioEvents = {
 
 // src/effects/persistenceEffects.ts
 var initPersistenceEffects = () => {
-  const positionSubscription = eventBus.on(
+  const positionSubscription = react.eventBus.on(
     StudioEvents.PositionChanged,
     ({ position }) => {
       saveStudioState(STORAGE_KEYS.POSITION, position);
     }
   );
-  const sizeSubscription = eventBus.on(
+  const sizeSubscription = react.eventBus.on(
     StudioEvents.SizeChanged,
     ({ size }) => {
       saveStudioState(STORAGE_KEYS.SIZE, size);
     }
   );
-  const buttonPositionSubscription = eventBus.on(
+  const buttonPositionSubscription = react.eventBus.on(
     StudioEvents.ButtonPositionChanged,
     ({ position }) => {
       saveStudioState(STORAGE_KEYS.BUTTON_POSITION, position);
@@ -859,70 +864,70 @@ var initPersistenceEffects = () => {
     buttonPositionSubscription.unsubscribe();
   };
 };
-var studioTranslations = I18nRegistry.createLoader({
-  [Language.English]: () => Promise.resolve().then(() => __toESM(require_en())),
-  [Language.Arabic]: () => Promise.resolve().then(() => __toESM(require_ar())),
-  [Language.Bengali]: () => Promise.resolve().then(() => __toESM(require_bn())),
-  [Language.Czech]: () => Promise.resolve().then(() => __toESM(require_cs())),
-  [Language.Danish]: () => Promise.resolve().then(() => __toESM(require_da())),
-  [Language.German]: () => Promise.resolve().then(() => __toESM(require_de())),
-  [Language.Greek]: () => Promise.resolve().then(() => __toESM(require_el())),
-  [Language.Spanish]: () => Promise.resolve().then(() => __toESM(require_es())),
-  [Language.Persian]: () => Promise.resolve().then(() => __toESM(require_fa())),
-  [Language.Finnish]: () => Promise.resolve().then(() => __toESM(require_fi())),
-  [Language.French]: () => Promise.resolve().then(() => __toESM(require_fr())),
-  [Language.Hebrew]: () => Promise.resolve().then(() => __toESM(require_he())),
-  [Language.Hindi]: () => Promise.resolve().then(() => __toESM(require_hi())),
-  [Language.Hungarian]: () => Promise.resolve().then(() => __toESM(require_hu())),
-  [Language.Indonesian]: () => Promise.resolve().then(() => __toESM(require_id())),
-  [Language.Italian]: () => Promise.resolve().then(() => __toESM(require_it())),
-  [Language.Japanese]: () => Promise.resolve().then(() => __toESM(require_ja())),
-  [Language.Korean]: () => Promise.resolve().then(() => __toESM(require_ko())),
-  [Language.Malay]: () => Promise.resolve().then(() => __toESM(require_ms())),
-  [Language.Dutch]: () => Promise.resolve().then(() => __toESM(require_nl())),
-  [Language.Norwegian]: () => Promise.resolve().then(() => __toESM(require_no())),
-  [Language.Polish]: () => Promise.resolve().then(() => __toESM(require_pl())),
-  [Language.Portuguese]: () => Promise.resolve().then(() => __toESM(require_pt())),
-  [Language.Romanian]: () => Promise.resolve().then(() => __toESM(require_ro())),
-  [Language.Russian]: () => Promise.resolve().then(() => __toESM(require_ru())),
-  [Language.Swedish]: () => Promise.resolve().then(() => __toESM(require_sv())),
-  [Language.Swahili]: () => Promise.resolve().then(() => __toESM(require_sw())),
-  [Language.Tamil]: () => Promise.resolve().then(() => __toESM(require_ta())),
-  [Language.Thai]: () => Promise.resolve().then(() => __toESM(require_th())),
-  [Language.Tagalog]: () => Promise.resolve().then(() => __toESM(require_tl())),
-  [Language.Turkish]: () => Promise.resolve().then(() => __toESM(require_tr())),
-  [Language.Ukrainian]: () => Promise.resolve().then(() => __toESM(require_uk())),
-  [Language.Urdu]: () => Promise.resolve().then(() => __toESM(require_ur())),
-  [Language.Vietnamese]: () => Promise.resolve().then(() => __toESM(require_vi())),
-  [Language.ChineseTraditional]: () => Promise.resolve().then(() => __toESM(require_zh_TW())),
-  [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()))
 });
-i18nRegistry.registerLoader("studio", studioTranslations);
-var StudioContext = createContext(void 0);
+react.i18nRegistry.registerLoader("studio", studioTranslations);
+var StudioContext = React4.createContext(void 0);
 var useStudioContext = () => {
-  const context = 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] = useState(
+  const [collapsed, setCollapsed] = React4.useState(
     () => loadStudioState(STORAGE_KEYS.COLLAPSED, false)
   );
-  const [portalContainer, setPortalContainer] = useState(null);
-  useEffect(() => {
+  const [portalContainer, setPortalContainer] = React4.useState(null);
+  React4.useEffect(() => {
     const cleanup = initPersistenceEffects();
     return cleanup;
   }, []);
-  const toggleCollapsed = useCallback(() => {
+  const toggleCollapsed = React4.useCallback(() => {
     setCollapsed((prev) => {
       const newValue = !prev;
       saveStudioState(STORAGE_KEYS.COLLAPSED, newValue);
       return newValue;
     });
   }, []);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     StudioContext.Provider,
     {
       value: {
@@ -941,27 +946,27 @@ var useDraggable = ({ panelSize, storageKey = STORAGE_KEYS.POSITION }) => {
     x: window.innerWidth - panelSize.width - 20,
     y: window.innerHeight - panelSize.height - 20
   });
-  const [position, setPosition] = useState(
+  const [position, setPosition] = React4.useState(
     () => loadStudioState(storageKey, getDefaultPosition())
   );
-  const [isDragging, setIsDragging] = useState(false);
-  const dragStartPos = useRef({ x: 0, y: 0 });
-  const handleMouseDown = 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]);
-  useEffect(() => {
+  React4.useEffect(() => {
     if (!isDragging) return;
     const handleMouseMove = (e) => {
-      const newX = clamp(
+      const newX = lodash.clamp(
         e.clientX - dragStartPos.current.x,
         0,
         window.innerWidth - panelSize.width
       );
-      const newY = clamp(
+      const newY = lodash.clamp(
         e.clientY - dragStartPos.current.y,
         0,
         window.innerHeight - panelSize.height
@@ -969,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;
-      eventBus.emit(eventName, { position: newPosition });
+      react.eventBus.emit(eventName, { position: newPosition });
     };
     const handleMouseUp = () => {
       setIsDragging(false);
@@ -988,15 +993,15 @@ var useDraggable = ({ panelSize, storageKey = STORAGE_KEYS.POSITION }) => {
   };
 };
 var useResizable = () => {
-  const [size, setSize] = useState(
+  const [size, setSize] = React4.useState(
     () => loadStudioState(STORAGE_KEYS.SIZE, {
       width: PANEL_CONSTRAINTS.DEFAULT_WIDTH,
       height: PANEL_CONSTRAINTS.DEFAULT_HEIGHT
     })
   );
-  const [isResizing, setIsResizing] = useState(false);
-  const resizeStartRef = useRef(null);
-  const handleMouseDown = 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,
@@ -1006,7 +1011,7 @@ var useResizable = () => {
     };
     setIsResizing(true);
   }, [size.width, size.height]);
-  useEffect(() => {
+  React4.useEffect(() => {
     if (!isResizing || !resizeStartRef.current) return;
     const startState = resizeStartRef.current;
     document.body.style.userSelect = "none";
@@ -1014,19 +1019,19 @@ var useResizable = () => {
     const handleMouseMove = (e) => {
       const deltaX = e.clientX - startState.mouseX;
       const deltaY = e.clientY - startState.mouseY;
-      const newWidth = clamp(
+      const newWidth = lodash.clamp(
         startState.width + deltaX,
         PANEL_CONSTRAINTS.MIN_WIDTH,
         PANEL_CONSTRAINTS.MAX_WIDTH
       );
-      const newHeight = clamp(
+      const newHeight = lodash.clamp(
         startState.height + deltaY,
         PANEL_CONSTRAINTS.MIN_HEIGHT,
         PANEL_CONSTRAINTS.MAX_HEIGHT
       );
       const newSize = { width: newWidth, height: newHeight };
       setSize(newSize);
-      eventBus.emit(StudioEvents.SizeChanged, { size: newSize });
+      react.eventBus.emit(StudioEvents.SizeChanged, { size: newSize });
     };
     const handleMouseUp = () => {
       setIsResizing(false);
@@ -1052,25 +1057,23 @@ var useResizable = () => {
 var ThemeSelector = ({
   className = ""
 }) => {
-  const dispatch = useAppDispatch();
-  const currentTheme = useAppSelector((state) => state.uicore.layout.theme);
+  const { currentTheme, themes, setTheme } = react.useTheme();
   const { portalContainer } = useStudioContext();
-  const { t } = useTranslation();
+  const { t } = react.useTranslation();
   const formatThemeName = (themeName) => {
-    return themeName.split("-").map((word) => upperFirst(word)).join(" ");
+    return themeName.split("-").map((word) => lodash.upperFirst(word)).join(" ");
   };
-  const availableThemes = themeRegistry.getThemeNames();
-  return /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between ${className}`, children: [
-    /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap", children: t("studio:controls.theme") }),
-    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownButton, { variant: ButtonVariant$1.Outline, children: formatThemeName(currentTheme) }) }),
-      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: availableThemes.map((themeName) => /* @__PURE__ */ jsx(
-        DropdownMenuItem,
+  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,
         {
-          onClick: () => dispatch(changeTheme(themeName)),
-          children: formatThemeName(themeName)
+          onClick: () => setTheme(theme.id),
+          children: formatThemeName(theme.name || theme.id)
         },
-        themeName
+        theme.id
       )) })
     ] })
   ] });
@@ -1083,9 +1086,9 @@ var ScreensetSelector = ({
   className = ""
 }) => {
   const { portalContainer } = useStudioContext();
-  const { t, direction } = useTranslation();
+  const { t, isRTL } = react.useTranslation();
   const formatName = (name) => {
-    return name.split(/[-_]/).map((word) => upperFirst(word)).join(" ");
+    return name.split(/[-_]/).map((word) => lodash.upperFirst(word)).join(" ");
   };
   const getCurrentDisplay = () => {
     const [category, itemId] = currentValue.split(":");
@@ -1097,14 +1100,14 @@ var ScreensetSelector = ({
   const handleItemClick = (category, itemId) => {
     onChange(`${category}:${itemId}`);
   };
-  return /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between ${className}`, children: [
-    /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap", children: t("studio:controls.screenset") }),
-    /* @__PURE__ */ jsxs(DropdownMenu, { dir: direction, children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownButton, { variant: ButtonVariant$1.Outline, children: formatName(getCurrentDisplay()) }) }),
-      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: options.map((categoryGroup) => /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
-        /* @__PURE__ */ jsx(DropdownMenuSubTrigger, { disabled: categoryGroup.screensets.length === 0, children: formatName(categoryGroup.category) }),
-        /* @__PURE__ */ jsx(DropdownMenuSubContent, { container: portalContainer, className: "z-[99999] pointer-events-auto", children: categoryGroup.screensets.map((item) => /* @__PURE__ */ jsx(
-          DropdownMenuItem,
+  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)
@@ -1119,23 +1122,22 @@ ScreensetSelector.displayName = "ScreensetSelector";
 var FALLBACK_SELECT_LANGUAGE_TEXT = "Select language";
 var RTL_INDICATOR_SUFFIX = " (RTL)";
 function LanguageSelector({
-  displayMode = LanguageDisplayMode.Native
+  displayMode = react.LanguageDisplayMode.Native
 } = {}) {
-  const { t, language, changeLanguage, getSupportedLanguages } = useTranslation();
+  const { t, language, setLanguage } = react.useTranslation();
   const { portalContainer } = useStudioContext();
-  const languages = getSupportedLanguages();
-  const currentLanguage = languages.find((lang) => lang.code === language);
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap", children: t("studio:controls.language") }),
-    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: ButtonVariant$1.Outline, children: currentLanguage ? displayMode === LanguageDisplayMode.Native ? currentLanguage.name : currentLanguage.englishName : FALLBACK_SELECT_LANGUAGE_TEXT }) }),
-      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: languages.map((lang) => /* @__PURE__ */ jsxs(
-        DropdownMenuItem,
+  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,
         {
-          onClick: () => changeLanguage(lang.code),
+          onClick: () => setLanguage(lang.code),
           children: [
-            displayMode === LanguageDisplayMode.Native ? lang.name : lang.englishName,
-            lang.direction === TextDirection.RightToLeft && RTL_INDICATOR_SUFFIX
+            displayMode === react.LanguageDisplayMode.Native ? lang.name : lang.englishName,
+            lang.direction === react.TextDirection.RightToLeft && RTL_INDICATOR_SUFFIX
           ]
         },
         lang.code
@@ -1144,10 +1146,14 @@ function LanguageSelector({
   ] });
 }
 var ApiModeToggle = ({ className }) => {
-  const useMockApi = useAppSelector((state) => state.uicore.app.useMockApi);
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between h-9 ${className}`, children: [
-    /* @__PURE__ */ jsx(
+  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",
       {
         htmlFor: "api-mode-toggle",
@@ -1155,73 +1161,88 @@ var ApiModeToggle = ({ className }) => {
         children: t("studio:controls.mockApi")
       }
     ),
-    /* @__PURE__ */ jsx(
-      Switch,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      uikit.Switch,
       {
         id: "api-mode-toggle",
         checked: useMockApi,
-        onCheckedChange: (checked) => setApiMode(checked)
+        onCheckedChange: handleToggle
       }
     )
   ] });
 };
 ApiModeToggle.displayName = "ApiModeToggle";
-var ALL_CATEGORIES = [ScreensetCategory.Drafts, ScreensetCategory.Mockups, 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: screensetRegistry.getMetadataByCategory(category)
+    screensets: allScreensets.filter((s) => s.category === category).map((s) => ({
+      id: s.id,
+      name: s.name
+    }))
   }));
 };
 var ControlPanel = () => {
-  const dispatch = useAppDispatch();
-  const currentScreenset = useAppSelector((state) => state.uicore.layout.currentScreenset);
-  const [screensetOptions, setScreensetOptions] = useState([]);
-  const { t } = useTranslation();
-  useEffect(() => {
+  const { currentScreenset, navigateToScreenset } = react.useNavigation();
+  const [screensetOptions, setScreensetOptions] = React4.useState([]);
+  const { t } = react.useTranslation();
+  React4.useEffect(() => {
     const options = buildScreensetOptions();
     setScreensetOptions(options);
   }, []);
-  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("studio:controls.heading") }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-      screensetOptions.length > 0 && /* @__PURE__ */ jsx(
+  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: currentScreenset,
-          onChange: (value) => dispatch(selectScreenset(value))
+          currentValue: getCurrentValue(),
+          onChange: handleScreensetChange
         }
       ),
-      /* @__PURE__ */ jsx(ApiModeToggle, {}),
-      /* @__PURE__ */ jsx(ThemeSelector, {}),
-      /* @__PURE__ */ jsx(LanguageSelector, {})
+      /* @__PURE__ */ jsxRuntime.jsx(ApiModeToggle, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ThemeSelector, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(LanguageSelector, {})
     ] })
   ] }) });
 };
 ControlPanel.displayName = "ControlPanel";
 var StudioPanel = () => {
   const { toggleCollapsed, setPortalContainer } = useStudioContext();
-  const { t } = useTranslation();
-  const portalRef = React3.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.useEffect(() => {
+  React4__default.default.useEffect(() => {
     setPortalContainer(portalRef.current);
     return () => setPortalContainer(null);
   }, [setPortalContainer]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref: portalRef,
         className: "studio-portal-container fixed z-[99999] pointer-events-none"
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: "studio-panel fixed z-[10000]",
@@ -1231,32 +1252,32 @@ var StudioPanel = () => {
           width: `${size.width}px`,
           height: `${size.height}px`
         },
-        children: /* @__PURE__ */ 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__ */ jsxs(
+        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: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               className: "studio-header px-4 py-3 border-b border-border/50 select-none flex items-center justify-between",
               onMouseDown: handleDragMouseDown,
               style: { cursor: isDragging ? "grabbing" : "grab" },
               children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-foreground", children: t("studio:title") }),
-                /* @__PURE__ */ jsx(
-                  Button,
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold text-foreground", children: t("studio:title") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  uikit.Button,
                   {
-                    variant: ButtonVariant.Ghost,
-                    size: ButtonSize.Sm,
+                    variant: uikit.ButtonVariant.Ghost,
+                    size: uikit.ButtonSize.Sm,
                     onClick: toggleCollapsed,
                     className: "h-7 w-7 p-0",
                     "aria-label": t("studio:aria.collapseButton"),
                     title: t("studio:aria.collapseButton"),
-                    children: /* @__PURE__ */ jsx(
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
                       "svg",
                       {
                         className: "w-4 h-4",
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
-                        children: /* @__PURE__ */ jsx(
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
                           "path",
                           {
                             strokeLinecap: "round",
@@ -1272,8 +1293,8 @@ var StudioPanel = () => {
               ]
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(ControlPanel, {}) }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ControlPanel, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: "studio-resize-handle absolute bottom-1 right-1 w-5 h-5 cursor-nwse-resize",
@@ -1282,13 +1303,13 @@ var StudioPanel = () => {
               "aria-label": t("studio:aria.resizeHandle"),
               title: t("studio:aria.resizeHandle"),
               tabIndex: 0,
-              children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsxRuntime.jsx(
                 "svg",
                 {
                   className: "w-5 h-5 text-muted-foreground/70 hover:text-muted-foreground transition-colors",
                   fill: "currentColor",
                   viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx("path", { d: "M22 22H20V20H22V22ZM22 18H20V16H22V18ZM18 22H16V20H18V22ZM18 18H16V16H18V18ZM14 22H12V20H14V22Z" })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 22H20V20H22V22ZM22 18H20V16H22V18ZM18 22H16V20H18V22ZM18 18H16V16H18V18ZM14 22H12V20H14V22Z" })
                 }
               )
             }
@@ -1300,7 +1321,7 @@ var StudioPanel = () => {
 };
 StudioPanel.displayName = "StudioPanel";
 var useKeyboardShortcut = (handler) => {
-  useEffect(() => {
+  React4.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.shiftKey && e.code === "Backquote") {
         e.preventDefault();
@@ -1320,10 +1341,10 @@ var GlassmorphicButton = ({
   title,
   isDragging = false
 }) => {
-  return /* @__PURE__ */ jsx(
-    Button,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    uikit.Button,
     {
-      variant: ButtonVariant.Ghost,
+      variant: uikit.ButtonVariant.Ghost,
       onMouseDown,
       onClick,
       title,
@@ -1335,14 +1356,14 @@ var GlassmorphicButton = ({
 };
 GlassmorphicButton.displayName = "GlassmorphicButton";
 var StudioIcon = ({ className = "" }) => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
       className,
       fill: "none",
       stroke: "currentColor",
       viewBox: "0 0 24 24",
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
           strokeLinecap: "round",
@@ -1355,12 +1376,12 @@ var StudioIcon = ({ className = "" }) => {
   );
 };
 var CollapsedButton = ({ toggleCollapsed }) => {
-  const { t } = useTranslation();
+  const { t } = react.useTranslation();
   const { position, isDragging, handleMouseDown } = useDraggable({
     panelSize: BUTTON_SIZE,
     storageKey: STORAGE_KEYS.BUTTON_POSITION
   });
-  const dragStartPosition = useRef(null);
+  const dragStartPosition = React4.useRef(null);
   const handleButtonMouseDown = (e) => {
     dragStartPosition.current = { x: e.clientX, y: e.clientY };
     handleMouseDown(e);
@@ -1374,7 +1395,7 @@ var CollapsedButton = ({ toggleCollapsed }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: "fixed z-[10000]",
@@ -1382,10 +1403,10 @@ var CollapsedButton = ({ toggleCollapsed }) => {
         left: `${position.x}px`,
         top: `${position.y}px`
       },
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         GlassmorphicButton,
         {
-          icon: /* @__PURE__ */ jsx(StudioIcon, { className: "w-6 h-6 text-foreground" }),
+          icon: /* @__PURE__ */ jsxRuntime.jsx(StudioIcon, { className: "w-6 h-6 text-foreground" }),
           onMouseDown: handleButtonMouseDown,
           onClick: handleButtonClick,
           title: t("studio:aria.openButton"),
@@ -1400,15 +1421,17 @@ var StudioContent = () => {
   const { collapsed, toggleCollapsed } = useStudioContext();
   useKeyboardShortcut(toggleCollapsed);
   if (collapsed) {
-    return /* @__PURE__ */ jsx(CollapsedButton, { toggleCollapsed });
+    return /* @__PURE__ */ jsxRuntime.jsx(CollapsedButton, { toggleCollapsed });
   }
-  return /* @__PURE__ */ jsx(StudioPanel, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(StudioPanel, {});
 };
 var StudioOverlay = () => {
-  return /* @__PURE__ */ jsx(StudioProvider, { children: /* @__PURE__ */ jsx(StudioContent, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(StudioProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(StudioContent, {}) });
 };
 StudioOverlay.displayName = "StudioOverlay";
 
-export { StudioOverlay, StudioProvider, useStudioContext };
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map
+exports.StudioOverlay = StudioOverlay;
+exports.StudioProvider = StudioProvider;
+exports.useStudioContext = useStudioContext;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map