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

package/dist/index.js

@@ -1,9 +1,8 @@
-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 React4, { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
+import { I18nRegistry, Language, i18nRegistry, ScreensetCategory, eventBus, useTranslation, useNavigation, screensetRegistry, useTheme, getLanguageMetadata, LanguageDisplayMode, SUPPORTED_LANGUAGES, TextDirection, apiRegistry } from '@hai3/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Card, Button, ButtonSize, ButtonVariant, DropdownMenu, DropdownMenuTrigger, DropdownButton, DropdownMenuContent, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, Switch } from '@hai3/uikit';
 import { clamp, upperFirst } from 'lodash';
-import { ButtonVariant as ButtonVariant$1 } from '@hai3/uikit-contracts';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -1052,25 +1051,23 @@ var useResizable = () => {
 var ThemeSelector = ({
   className = ""
 }) => {
-  const dispatch = useAppDispatch();
-  const currentTheme = useAppSelector((state) => state.uicore.layout.theme);
+  const { currentTheme, themes, setTheme } = useTheme();
   const { portalContainer } = useStudioContext();
   const { t } = useTranslation();
   const formatThemeName = (themeName) => {
     return themeName.split("-").map((word) => 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(
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownButton, { variant: ButtonVariant.Outline, children: formatThemeName(currentTheme || "") }) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: themes.map((theme) => /* @__PURE__ */ jsx(
         DropdownMenuItem,
         {
-          onClick: () => dispatch(changeTheme(themeName)),
-          children: formatThemeName(themeName)
+          onClick: () => setTheme(theme.id),
+          children: formatThemeName(theme.name || theme.id)
         },
-        themeName
+        theme.id
       )) })
     ] })
   ] });
@@ -1083,7 +1080,7 @@ var ScreensetSelector = ({
   className = ""
 }) => {
   const { portalContainer } = useStudioContext();
-  const { t, direction } = useTranslation();
+  const { t, isRTL } = useTranslation();
   const formatName = (name) => {
     return name.split(/[-_]/).map((word) => upperFirst(word)).join(" ");
   };
@@ -1099,8 +1096,8 @@ var ScreensetSelector = ({
   };
   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__ */ jsxs(DropdownMenu, { dir: isRTL ? "rtl" : "ltr", children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownButton, { variant: ButtonVariant.Outline, children: formatName(getCurrentDisplay()) }) }),
       /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", container: portalContainer, className: "z-[99999] pointer-events-auto", children: options.map((categoryGroup) => /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
         /* @__PURE__ */ jsx(DropdownMenuSubTrigger, { disabled: categoryGroup.screensets.length === 0, children: formatName(categoryGroup.category) }),
         /* @__PURE__ */ jsx(DropdownMenuSubContent, { container: portalContainer, className: "z-[99999] pointer-events-auto", children: categoryGroup.screensets.map((item) => /* @__PURE__ */ jsx(
@@ -1121,18 +1118,17 @@ var RTL_INDICATOR_SUFFIX = " (RTL)";
 function LanguageSelector({
   displayMode = LanguageDisplayMode.Native
 } = {}) {
-  const { t, language, changeLanguage, getSupportedLanguages } = useTranslation();
+  const { t, language, setLanguage } = useTranslation();
   const { portalContainer } = useStudioContext();
-  const languages = getSupportedLanguages();
-  const currentLanguage = languages.find((lang) => lang.code === language);
+  const currentLanguage = language ? getLanguageMetadata(language) : null;
   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(
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: ButtonVariant.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: SUPPORTED_LANGUAGES.map((lang) => /* @__PURE__ */ jsxs(
         DropdownMenuItem,
         {
-          onClick: () => changeLanguage(lang.code),
+          onClick: () => setLanguage(lang.code),
           children: [
             displayMode === LanguageDisplayMode.Native ? lang.name : lang.englishName,
             lang.direction === TextDirection.RightToLeft && RTL_INDICATOR_SUFFIX
@@ -1144,8 +1140,12 @@ function LanguageSelector({
   ] });
 }
 var ApiModeToggle = ({ className }) => {
-  const useMockApi = useAppSelector((state) => state.uicore.app.useMockApi);
+  const [useMockApi, setUseMockApi] = useState(true);
   const { t } = useTranslation();
+  const handleToggle = (checked) => {
+    setUseMockApi(checked);
+    apiRegistry.setMockMode(checked);
+  };
   return /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between h-9 ${className}`, children: [
     /* @__PURE__ */ jsx(
       "label",
@@ -1160,7 +1160,7 @@ var ApiModeToggle = ({ className }) => {
       {
         id: "api-mode-toggle",
         checked: useMockApi,
-        onCheckedChange: (checked) => setApiMode(checked)
+        onCheckedChange: handleToggle
       }
     )
   ] });
@@ -1168,20 +1168,35 @@ var ApiModeToggle = ({ className }) => {
 ApiModeToggle.displayName = "ApiModeToggle";
 var ALL_CATEGORIES = [ScreensetCategory.Drafts, ScreensetCategory.Mockups, ScreensetCategory.Production];
 var buildScreensetOptions = () => {
+  const allScreensets = screensetRegistry.getAll();
   return ALL_CATEGORIES.map((category) => ({
     category,
-    screensets: 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 { currentScreenset, navigateToScreenset } = useNavigation();
   const [screensetOptions, setScreensetOptions] = useState([]);
   const { t } = useTranslation();
   useEffect(() => {
     const options = buildScreensetOptions();
     setScreensetOptions(options);
   }, []);
+  const getCurrentValue = () => {
+    if (!currentScreenset) return "";
+    const screenset = screensetRegistry.get(currentScreenset);
+    if (!screenset) return "";
+    return `${screenset.category}:${screenset.id}`;
+  };
+  const handleScreensetChange = (value) => {
+    const [, screensetId] = value.split(":");
+    if (screensetId) {
+      navigateToScreenset(screensetId);
+    }
+  };
   return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("studio:controls.heading") }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -1189,8 +1204,8 @@ var ControlPanel = () => {
         ScreensetSelector,
         {
           options: screensetOptions,
-          currentValue: currentScreenset,
-          onChange: (value) => dispatch(selectScreenset(value))
+          currentValue: getCurrentValue(),
+          onChange: handleScreensetChange
         }
       ),
       /* @__PURE__ */ jsx(ApiModeToggle, {}),
@@ -1203,13 +1218,13 @@ ControlPanel.displayName = "ControlPanel";
 var StudioPanel = () => {
   const { toggleCollapsed, setPortalContainer } = useStudioContext();
   const { t } = useTranslation();
-  const portalRef = React3.useRef(null);
+  const portalRef = React4.useRef(null);
   const { size, handleMouseDown: handleResizeMouseDown } = useResizable();
   const { position, isDragging, handleMouseDown: handleDragMouseDown } = useDraggable({
     panelSize: size,
     storageKey: STORAGE_KEYS.POSITION
   });
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     setPortalContainer(portalRef.current);
     return () => setPortalContainer(null);
   }, [setPortalContainer]);