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

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React4 = require('react');
+var React3 = require('react');
 var react = require('@hai3/react');
 var jsxRuntime = require('react/jsx-runtime');
 var uikit = require('@hai3/uikit');
@@ -8,7 +8,7 @@ var lodash = require('lodash');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React4__default = /*#__PURE__*/_interopDefault(React4);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -903,24 +903,24 @@ var studioTranslations = react.I18nRegistry.createLoader({
   [react.Language.ChineseSimplified]: () => Promise.resolve().then(() => __toESM(require_zh()))
 });
 react.i18nRegistry.registerLoader("studio", studioTranslations);
-var StudioContext = React4.createContext(void 0);
+var StudioContext = React3.createContext(void 0);
 var useStudioContext = () => {
-  const context = React4.useContext(StudioContext);
+  const context = React3.useContext(StudioContext);
   if (!context) {
     throw new Error("useStudioContext must be used within StudioProvider");
   }
   return context;
 };
 var StudioProvider = ({ children }) => {
-  const [collapsed, setCollapsed] = React4.useState(
+  const [collapsed, setCollapsed] = React3.useState(
     () => loadStudioState(STORAGE_KEYS.COLLAPSED, false)
   );
-  const [portalContainer, setPortalContainer] = React4.useState(null);
-  React4.useEffect(() => {
+  const [portalContainer, setPortalContainer] = React3.useState(null);
+  React3.useEffect(() => {
     const cleanup = initPersistenceEffects();
     return cleanup;
   }, []);
-  const toggleCollapsed = React4.useCallback(() => {
+  const toggleCollapsed = React3.useCallback(() => {
     setCollapsed((prev) => {
       const newValue = !prev;
       saveStudioState(STORAGE_KEYS.COLLAPSED, newValue);
@@ -946,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] = React4.useState(
+  const [position, setPosition] = React3.useState(
     () => loadStudioState(storageKey, getDefaultPosition())
   );
-  const [isDragging, setIsDragging] = React4.useState(false);
-  const dragStartPos = React4.useRef({ x: 0, y: 0 });
-  const handleMouseDown = React4.useCallback((e) => {
+  const [isDragging, setIsDragging] = React3.useState(false);
+  const dragStartPos = React3.useRef({ x: 0, y: 0 });
+  const handleMouseDown = React3.useCallback((e) => {
     setIsDragging(true);
     dragStartPos.current = {
       x: e.clientX - position.x,
       y: e.clientY - position.y
     };
   }, [position]);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (!isDragging) return;
     const handleMouseMove = (e) => {
       const newX = lodash.clamp(
@@ -993,15 +993,15 @@ var useDraggable = ({ panelSize, storageKey = STORAGE_KEYS.POSITION }) => {
   };
 };
 var useResizable = () => {
-  const [size, setSize] = React4.useState(
+  const [size, setSize] = React3.useState(
     () => loadStudioState(STORAGE_KEYS.SIZE, {
       width: PANEL_CONSTRAINTS.DEFAULT_WIDTH,
       height: PANEL_CONSTRAINTS.DEFAULT_HEIGHT
     })
   );
-  const [isResizing, setIsResizing] = React4.useState(false);
-  const resizeStartRef = React4.useRef(null);
-  const handleMouseDown = React4.useCallback((e) => {
+  const [isResizing, setIsResizing] = React3.useState(false);
+  const resizeStartRef = React3.useRef(null);
+  const handleMouseDown = React3.useCallback((e) => {
     e.stopPropagation();
     resizeStartRef.current = {
       mouseX: e.clientX,
@@ -1011,7 +1011,7 @@ var useResizable = () => {
     };
     setIsResizing(true);
   }, [size.width, size.height]);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (!isResizing || !resizeStartRef.current) return;
     const startState = resizeStartRef.current;
     document.body.style.userSelect = "none";
@@ -1145,14 +1145,18 @@ function LanguageSelector({
     ] })
   ] });
 }
-var ApiModeToggle = ({ className }) => {
-  const [useMockApi, setUseMockApi] = React4.useState(true);
+var ApiModeToggle = ({
+  className
+}) => {
   const { t } = react.useTranslation();
+  const enabled = react.useAppSelector((state) => {
+    const mockState = state.mock;
+    return mockState?.enabled ?? false;
+  });
   const handleToggle = (checked) => {
-    setUseMockApi(checked);
-    react.apiRegistry.setMockMode(checked);
+    react.toggleMockMode(checked);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between h-9 ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between h-9 ${className ?? ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "label",
       {
@@ -1165,7 +1169,7 @@ var ApiModeToggle = ({ className }) => {
       uikit.Switch,
       {
         id: "api-mode-toggle",
-        checked: useMockApi,
+        checked: enabled,
         onCheckedChange: handleToggle
       }
     )
@@ -1185,9 +1189,9 @@ var buildScreensetOptions = () => {
 };
 var ControlPanel = () => {
   const { currentScreenset, navigateToScreenset } = react.useNavigation();
-  const [screensetOptions, setScreensetOptions] = React4.useState([]);
+  const [screensetOptions, setScreensetOptions] = React3.useState([]);
   const { t } = react.useTranslation();
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     const options = buildScreensetOptions();
     setScreensetOptions(options);
   }, []);
@@ -1224,13 +1228,13 @@ ControlPanel.displayName = "ControlPanel";
 var StudioPanel = () => {
   const { toggleCollapsed, setPortalContainer } = useStudioContext();
   const { t } = react.useTranslation();
-  const portalRef = React4__default.default.useRef(null);
+  const portalRef = React3__default.default.useRef(null);
   const { size, handleMouseDown: handleResizeMouseDown } = useResizable();
   const { position, isDragging, handleMouseDown: handleDragMouseDown } = useDraggable({
     panelSize: size,
     storageKey: STORAGE_KEYS.POSITION
   });
-  React4__default.default.useEffect(() => {
+  React3__default.default.useEffect(() => {
     setPortalContainer(portalRef.current);
     return () => setPortalContainer(null);
   }, [setPortalContainer]);
@@ -1321,7 +1325,7 @@ var StudioPanel = () => {
 };
 StudioPanel.displayName = "StudioPanel";
 var useKeyboardShortcut = (handler) => {
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.shiftKey && e.code === "Backquote") {
         e.preventDefault();
@@ -1381,7 +1385,7 @@ var CollapsedButton = ({ toggleCollapsed }) => {
     panelSize: BUTTON_SIZE,
     storageKey: STORAGE_KEYS.BUTTON_POSITION
   });
-  const dragStartPosition = React4.useRef(null);
+  const dragStartPosition = React3.useRef(null);
   const handleButtonMouseDown = (e) => {
     dragStartPosition.current = { x: e.clientX, y: e.clientY };
     handleMouseDown(e);