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

package/README.md

@@ -101,8 +101,8 @@ Studio provides full localization for 36 languages including English, Spanish, F
 Requires the following packages:
 
 - `@hai3/uicore` - Core framework for state management and events
-- `react` ^18.0.0 - React library
-- `react-dom` ^18.0.0 - React DOM renderer
+- `react` ^19.2.4 - React library
+- `react-dom` ^19.2.4 - React DOM renderer
 
 ## Browser Compatibility
 

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;
@@ -38,7 +38,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 // src/i18n/en.json
 var require_en = __commonJS({
-  "src/i18n/en.json"(exports, module) {
+  "src/i18n/en.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 Studio",
       aria: {
@@ -59,7 +59,7 @@ var require_en = __commonJS({
 
 // src/i18n/ar.json
 var require_ar = __commonJS({
-  "src/i18n/ar.json"(exports, module) {
+  "src/i18n/ar.json"(exports$1, module) {
     module.exports = {
       title: "\u0623\u062F\u0648\u0627\u062A \u062A\u0637\u0648\u064A\u0631 HAI3",
       aria: {
@@ -80,7 +80,7 @@ var require_ar = __commonJS({
 
 // src/i18n/bn.json
 var require_bn = __commonJS({
-  "src/i18n/bn.json"(exports, module) {
+  "src/i18n/bn.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 \u09A1\u09C7\u09AD\u09C7\u09B2\u09AA\u09AE\u09C7\u09A8\u09CD\u099F \u099F\u09C1\u09B2\u09B8",
       aria: {
@@ -101,7 +101,7 @@ var require_bn = __commonJS({
 
 // src/i18n/cs.json
 var require_cs = __commonJS({
-  "src/i18n/cs.json"(exports, module) {
+  "src/i18n/cs.json"(exports$1, module) {
     module.exports = {
       title: "V\xFDvoj\xE1\u0159sk\xE9 n\xE1stroje HAI3",
       aria: {
@@ -122,7 +122,7 @@ var require_cs = __commonJS({
 
 // src/i18n/da.json
 var require_da = __commonJS({
-  "src/i18n/da.json"(exports, module) {
+  "src/i18n/da.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 Udviklingsv\xE6rkt\xF8jer",
       aria: {
@@ -143,7 +143,7 @@ var require_da = __commonJS({
 
 // src/i18n/de.json
 var require_de = __commonJS({
-  "src/i18n/de.json"(exports, module) {
+  "src/i18n/de.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 Entwicklerwerkzeuge",
       aria: {
@@ -164,7 +164,7 @@ var require_de = __commonJS({
 
 // src/i18n/el.json
 var require_el = __commonJS({
-  "src/i18n/el.json"(exports, module) {
+  "src/i18n/el.json"(exports$1, module) {
     module.exports = {
       title: "\u0395\u03C1\u03B3\u03B1\u03BB\u03B5\u03AF\u03B1 \u0391\u03BD\u03AC\u03C0\u03C4\u03C5\u03BE\u03B7\u03C2 HAI3",
       aria: {
@@ -185,7 +185,7 @@ var require_el = __commonJS({
 
 // src/i18n/es.json
 var require_es = __commonJS({
-  "src/i18n/es.json"(exports, module) {
+  "src/i18n/es.json"(exports$1, module) {
     module.exports = {
       title: "Herramientas de Desarrollo HAI3",
       aria: {
@@ -206,7 +206,7 @@ var require_es = __commonJS({
 
 // src/i18n/fa.json
 var require_fa = __commonJS({
-  "src/i18n/fa.json"(exports, module) {
+  "src/i18n/fa.json"(exports$1, module) {
     module.exports = {
       title: "\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06CC \u062A\u0648\u0633\u0639\u0647 HAI3",
       aria: {
@@ -227,7 +227,7 @@ var require_fa = __commonJS({
 
 // src/i18n/fi.json
 var require_fi = __commonJS({
-  "src/i18n/fi.json"(exports, module) {
+  "src/i18n/fi.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 Kehitysty\xF6kalut",
       aria: {
@@ -248,7 +248,7 @@ var require_fi = __commonJS({
 
 // src/i18n/fr.json
 var require_fr = __commonJS({
-  "src/i18n/fr.json"(exports, module) {
+  "src/i18n/fr.json"(exports$1, module) {
     module.exports = {
       title: "Outils de D\xE9veloppement HAI3",
       aria: {
@@ -269,7 +269,7 @@ var require_fr = __commonJS({
 
 // src/i18n/he.json
 var require_he = __commonJS({
-  "src/i18n/he.json"(exports, module) {
+  "src/i18n/he.json"(exports$1, module) {
     module.exports = {
       title: "\u05DB\u05DC\u05D9 \u05E4\u05D9\u05EA\u05D5\u05D7 HAI3",
       aria: {
@@ -290,7 +290,7 @@ var require_he = __commonJS({
 
 // src/i18n/hi.json
 var require_hi = __commonJS({
-  "src/i18n/hi.json"(exports, module) {
+  "src/i18n/hi.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 \u0921\u0947\u0935\u0932\u092A\u092E\u0947\u0902\u091F \u091F\u0942\u0932\u094D\u0938",
       aria: {
@@ -311,7 +311,7 @@ var require_hi = __commonJS({
 
 // src/i18n/hu.json
 var require_hu = __commonJS({
-  "src/i18n/hu.json"(exports, module) {
+  "src/i18n/hu.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 Fejleszt\u0151i Eszk\xF6z\xF6k",
       aria: {
@@ -332,7 +332,7 @@ var require_hu = __commonJS({
 
 // src/i18n/id.json
 var require_id = __commonJS({
-  "src/i18n/id.json"(exports, module) {
+  "src/i18n/id.json"(exports$1, module) {
     module.exports = {
       title: "Alat Pengembangan HAI3",
       aria: {
@@ -353,7 +353,7 @@ var require_id = __commonJS({
 
 // src/i18n/it.json
 var require_it = __commonJS({
-  "src/i18n/it.json"(exports, module) {
+  "src/i18n/it.json"(exports$1, module) {
     module.exports = {
       title: "Strumenti di Sviluppo HAI3",
       aria: {
@@ -374,7 +374,7 @@ var require_it = __commonJS({
 
 // src/i18n/ja.json
 var require_ja = __commonJS({
-  "src/i18n/ja.json"(exports, module) {
+  "src/i18n/ja.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 \u958B\u767A\u30C4\u30FC\u30EB",
       aria: {
@@ -395,7 +395,7 @@ var require_ja = __commonJS({
 
 // src/i18n/ko.json
 var require_ko = __commonJS({
-  "src/i18n/ko.json"(exports, module) {
+  "src/i18n/ko.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 \uAC1C\uBC1C \uB3C4\uAD6C",
       aria: {
@@ -416,7 +416,7 @@ var require_ko = __commonJS({
 
 // src/i18n/ms.json
 var require_ms = __commonJS({
-  "src/i18n/ms.json"(exports, module) {
+  "src/i18n/ms.json"(exports$1, module) {
     module.exports = {
       title: "Alat Pembangun HAI3",
       aria: {
@@ -437,7 +437,7 @@ var require_ms = __commonJS({
 
 // src/i18n/nl.json
 var require_nl = __commonJS({
-  "src/i18n/nl.json"(exports, module) {
+  "src/i18n/nl.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 Ontwikkeltools",
       aria: {
@@ -458,7 +458,7 @@ var require_nl = __commonJS({
 
 // src/i18n/no.json
 var require_no = __commonJS({
-  "src/i18n/no.json"(exports, module) {
+  "src/i18n/no.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 Utviklingsverkt\xF8y",
       aria: {
@@ -479,7 +479,7 @@ var require_no = __commonJS({
 
 // src/i18n/pl.json
 var require_pl = __commonJS({
-  "src/i18n/pl.json"(exports, module) {
+  "src/i18n/pl.json"(exports$1, module) {
     module.exports = {
       title: "Narz\u0119dzia programistyczne HAI3",
       aria: {
@@ -500,7 +500,7 @@ var require_pl = __commonJS({
 
 // src/i18n/pt.json
 var require_pt = __commonJS({
-  "src/i18n/pt.json"(exports, module) {
+  "src/i18n/pt.json"(exports$1, module) {
     module.exports = {
       title: "Ferramentas de Desenvolvimento HAI3",
       aria: {
@@ -521,7 +521,7 @@ var require_pt = __commonJS({
 
 // src/i18n/ro.json
 var require_ro = __commonJS({
-  "src/i18n/ro.json"(exports, module) {
+  "src/i18n/ro.json"(exports$1, module) {
     module.exports = {
       title: "Instrumente de Dezvoltare HAI3",
       aria: {
@@ -542,7 +542,7 @@ var require_ro = __commonJS({
 
 // src/i18n/ru.json
 var require_ru = __commonJS({
-  "src/i18n/ru.json"(exports, module) {
+  "src/i18n/ru.json"(exports$1, module) {
     module.exports = {
       title: "\u0418\u043D\u0441\u0442\u0440\u0443\u043C\u0435\u043D\u0442\u044B \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u043A\u0438 HAI3",
       aria: {
@@ -563,7 +563,7 @@ var require_ru = __commonJS({
 
 // src/i18n/sv.json
 var require_sv = __commonJS({
-  "src/i18n/sv.json"(exports, module) {
+  "src/i18n/sv.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 Utvecklingsverktyg",
       aria: {
@@ -584,7 +584,7 @@ var require_sv = __commonJS({
 
 // src/i18n/sw.json
 var require_sw = __commonJS({
-  "src/i18n/sw.json"(exports, module) {
+  "src/i18n/sw.json"(exports$1, module) {
     module.exports = {
       title: "Zana za Utengenezaji wa HAI3",
       aria: {
@@ -605,7 +605,7 @@ var require_sw = __commonJS({
 
 // src/i18n/ta.json
 var require_ta = __commonJS({
-  "src/i18n/ta.json"(exports, module) {
+  "src/i18n/ta.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 \u0BAE\u0BC7\u0BAE\u0BCD\u0BAA\u0BBE\u0B9F\u0BCD\u0B9F\u0BC1 \u0B95\u0BB0\u0BC1\u0BB5\u0BBF\u0B95\u0BB3\u0BCD",
       aria: {
@@ -626,7 +626,7 @@ var require_ta = __commonJS({
 
 // src/i18n/th.json
 var require_th = __commonJS({
-  "src/i18n/th.json"(exports, module) {
+  "src/i18n/th.json"(exports$1, module) {
     module.exports = {
       title: "\u0E40\u0E04\u0E23\u0E37\u0E48\u0E2D\u0E07\u0E21\u0E37\u0E2D\u0E1E\u0E31\u0E12\u0E19\u0E32 HAI3",
       aria: {
@@ -647,7 +647,7 @@ var require_th = __commonJS({
 
 // src/i18n/tl.json
 var require_tl = __commonJS({
-  "src/i18n/tl.json"(exports, module) {
+  "src/i18n/tl.json"(exports$1, module) {
     module.exports = {
       title: "Mga Kasangkapan sa Pag-develop ng HAI3",
       aria: {
@@ -668,7 +668,7 @@ var require_tl = __commonJS({
 
 // src/i18n/tr.json
 var require_tr = __commonJS({
-  "src/i18n/tr.json"(exports, module) {
+  "src/i18n/tr.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 Geli\u015Ftirici Ara\xE7lar\u0131",
       aria: {
@@ -689,7 +689,7 @@ var require_tr = __commonJS({
 
 // src/i18n/uk.json
 var require_uk = __commonJS({
-  "src/i18n/uk.json"(exports, module) {
+  "src/i18n/uk.json"(exports$1, module) {
     module.exports = {
       title: "\u0406\u043D\u0441\u0442\u0440\u0443\u043C\u0435\u043D\u0442\u0438 \u0440\u043E\u0437\u0440\u043E\u0431\u043A\u0438 HAI3",
       aria: {
@@ -710,7 +710,7 @@ var require_uk = __commonJS({
 
 // src/i18n/ur.json
 var require_ur = __commonJS({
-  "src/i18n/ur.json"(exports, module) {
+  "src/i18n/ur.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 \u0688\u0648\u06CC\u0644\u067E\u0645\u0646\u0679 \u0679\u0648\u0644\u0632",
       aria: {
@@ -731,7 +731,7 @@ var require_ur = __commonJS({
 
 // src/i18n/vi.json
 var require_vi = __commonJS({
-  "src/i18n/vi.json"(exports, module) {
+  "src/i18n/vi.json"(exports$1, module) {
     module.exports = {
       title: "C\xF4ng c\u1EE5 Ph\xE1t tri\u1EC3n HAI3",
       aria: {
@@ -752,7 +752,7 @@ var require_vi = __commonJS({
 
 // src/i18n/zh-TW.json
 var require_zh_TW = __commonJS({
-  "src/i18n/zh-TW.json"(exports, module) {
+  "src/i18n/zh-TW.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 \u958B\u767C\u5DE5\u5177",
       aria: {
@@ -773,7 +773,7 @@ var require_zh_TW = __commonJS({
 
 // src/i18n/zh.json
 var require_zh = __commonJS({
-  "src/i18n/zh.json"(exports, module) {
+  "src/i18n/zh.json"(exports$1, module) {
     module.exports = {
       title: "HAI3 \u5F00\u53D1\u5DE5\u5177",
       aria: {
@@ -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);