@xframes/node 0.0.10 → 0.0.12

package/dist/index.js

@@ -1,172 +1,1543 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var __getOwnPropNames = Object.getOwnPropertyNames;
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
-var __commonJS = (cb, mod) => function __require2() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-
-// xframes.node
-var xframes_default;
-var init_xframes = __esm({
-  "xframes.node"() {
-    xframes_default = "./xframes-NFJ2BR4O.node";
-  }
-});
-
-// node-file:C:\dev\react-imgui\packages\dear-imgui\npm\node\xframes.node
-var require_xframes = __commonJS({
-  "node-file:C:\\dev\\react-imgui\\packages\\dear-imgui\\npm\\node\\xframes.node"(exports, module) {
-    "use strict";
-    init_xframes();
-    try {
-      module.exports = __require(xframes_default);
-    } catch (e) {
-    }
-  }
-});
-
-// xframes.js
-var require_xframes2 = __commonJS({
-  "xframes.js"(exports, module) {
-    "use strict";
-    module.exports = require_xframes();
-  }
-});
-
-// src/lib/render.tsx
-
-
-
-
-
-var _common = require('@xframes/common');
-var _jsxruntime = require('react/jsx-runtime');
-var xframes = require_xframes2();
-var ReactFabricProd = _common.ReactFabricProdInitialiser.call(void 0, 
-  _common.ReactNativePrivateInterface
-);
-var render = (EntryPointComponent, assetsBasePath, fontDefs, theme) => {
-  const onInit = () => {
-    ReactFabricProd.render(
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _common.WidgetRegistrationServiceContext.Provider,
-        {
-          value: widgetRegistrationService,
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EntryPointComponent, {})
-        }
-      ),
-      0,
-      // containerTag,
-      () => {
-      },
-      1
-    );
-  };
-  const onTextChange = (id, value) => {
-    const rootNodeID = id;
-    const topLevelType = "onChange";
-    const nativeEventParam = { value };
-    _common.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(
-      rootNodeID,
-      topLevelType,
-      nativeEventParam
-    );
-  };
-  const onComboChange = (id, value) => {
-    const rootNodeID = id;
-    const topLevelType = "onChange";
-    const nativeEventParam = { value };
-    _common.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(
-      rootNodeID,
-      topLevelType,
-      nativeEventParam
-    );
-  };
-  const onNumericValueChange = (id, value) => {
-    const rootNodeID = id;
-    const topLevelType = "onChange";
-    const nativeEventParam = { value };
-    _common.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(
-      rootNodeID,
-      topLevelType,
-      nativeEventParam
-    );
-  };
-  const onMultiValueChange = (id, values) => {
-    const rootNodeID = id;
-    const topLevelType = "onChange";
-    const nativeEventParam = { values };
-    _common.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(
-      rootNodeID,
-      topLevelType,
-      nativeEventParam
-    );
-  };
-  const onBooleanValueChange = (id, value) => {
-    const rootNodeID = id;
-    const topLevelType = "onChange";
-    const nativeEventParam = { value };
-    _common.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(
-      rootNodeID,
-      topLevelType,
-      nativeEventParam
-    );
-  };
-  const onClick = (id) => {
-    const rootNodeID = id;
-    const topLevelType = "onClick";
-    _common.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(
-      rootNodeID,
-      topLevelType,
-      {
-        value: "clicked"
-      }
-    );
-  };
-  xframes.init(
-    assetsBasePath,
-    JSON.stringify(fontDefs),
-    JSON.stringify(theme),
-    onInit,
-    onTextChange,
-    onComboChange,
-    onNumericValueChange,
-    onBooleanValueChange,
-    onMultiValueChange,
-    onClick
-  );
-  const widgetRegistrationService = new (0, _common.WidgetRegistrationService)(xframes);
-  _common.ReactNativePrivateInterface.nativeFabricUIManager.init(
-    xframes,
-    widgetRegistrationService
-  );
-  let flag = true;
-  (function keepProcessRunning() {
-    setTimeout(() => flag && keepProcessRunning(), 1e3);
-  })();
-};
-
-// src/lib/XFrames.tsx
-
-var MainComponent = ({
-  children
-}) => {
-  return null;
-};
-var XFrames = _common.attachSubComponents.call(void 0, 
-  "XFrames",
-  MainComponent,
-  _common.components
-);
-
-
-
-exports.XFrames = XFrames; exports.render = render;
-//# sourceMappingURL=index.js.map
+System.register("lib/XFrames", ["@xframes/common"], function (exports_1, context_1) {
+    "use strict";
+    var common_1, MainComponent, XFrames;
+    var __moduleName = context_1 && context_1.id;
+    return {
+        setters: [
+            function (common_1_1) {
+                common_1 = common_1_1;
+            }
+        ],
+        execute: function () {
+            exports_1("MainComponent", MainComponent = ({ children, }) => {
+                return null;
+            });
+            exports_1("XFrames", XFrames = common_1.attachSubComponents("XFrames", MainComponent, common_1.components));
+        }
+    };
+});
+System.register("components/TradingGuiDemo/cryptoSymbols", [], function (exports_2, context_2) {
+    "use strict";
+    var cryptoSymbols;
+    var __moduleName = context_2 && context_2.id;
+    return {
+        setters: [],
+        execute: function () {
+            exports_2("cryptoSymbols", cryptoSymbols = [
+                "SUSHI/USD",
+                "YFI/USD",
+                "LTC/USD",
+                "DOGE/USD",
+                "BCH/USDT",
+                "BAT/USDC",
+                "BAT/USD",
+                "CRV/USDC",
+                "SHIB/USDT",
+                "BCH/USDC",
+                "LINK/USDT",
+                "LINK/USDC",
+                "BCH/USD",
+                "CRV/USD",
+                "AVAX/USDT",
+                "LTC/USDT",
+                "XTZ/USDC",
+                "BTC/USDT",
+                "AVAX/USDC",
+                "XTZ/USD",
+                // "AVAX/USD",
+                // "LTC/USDC",
+                // "LINK/USD",
+                // "LINK/BTC",
+                // "SHIB/USDC",
+                // "SOL/USDC",
+                // "GRT/USDC",
+                // "USDT/USDC",
+                // "SOL/USD",
+                // "SOL/USDT",
+                // "SHIB/USD",
+                // "DOGE/USDC",
+                // "GRT/USD",
+                // "ETH/USDT",
+                // "USDT/USD",
+                // "ETH/USDC",
+                // "LTC/BTC",
+                // "AAVE/USDT",
+                // "ETH/USD",
+                // "UNI/USDT",
+                // "ETH/BTC",
+                // "BCH/BTC",
+                // "USDC/USD",
+                // "YFI/USDT",
+                // "UNI/USDC",
+                // "DOT/USDC",
+                // "DOT/USD",
+                // "AAVE/USD",
+                // "MKR/USDC",
+                // "UNI/USD",
+                // "AAVE/USDC",
+                // "UNI/BTC",
+                // "SUSHI/USDT",
+                // "BTC/USDC",
+                // "BTC/USD",
+                // "SUSHI/USDC",
+                // "YFI/USDC",
+                // "MKR/USD",
+                // "DOGE/USDT",
+            ]);
+        }
+    };
+});
+System.register("components/TradingGuiDemo/store", ["zustand", "rxjs", "components/TradingGuiDemo/cryptoSymbols"], function (exports_3, context_3) {
+    "use strict";
+    var zustand_1, rxjs_1, cryptoSymbols_1, cryptoQuoteSubjectMap$, onLoadCryptoQuote, emptyCryptoQuote, useStore;
+    var __moduleName = context_3 && context_3.id;
+    return {
+        setters: [
+            function (zustand_1_1) {
+                zustand_1 = zustand_1_1;
+            },
+            function (rxjs_1_1) {
+                rxjs_1 = rxjs_1_1;
+            },
+            function (cryptoSymbols_1_1) {
+                cryptoSymbols_1 = cryptoSymbols_1_1;
+            }
+        ],
+        execute: function () {
+            cryptoQuoteSubjectMap$ = new rxjs_1.BehaviorSubject(new Map());
+            exports_3("onLoadCryptoQuote", onLoadCryptoQuote = (symbol, cryptoQuote) => {
+                console.log(symbol, cryptoQuote);
+                const map = cryptoQuoteSubjectMap$.getValue();
+                if (!map.has(symbol)) {
+                    map.set(symbol, new rxjs_1.BehaviorSubject(cryptoQuote));
+                }
+                else {
+                    const subject$ = map.get(symbol);
+                    subject$?.next(cryptoQuote);
+                    // map.set(symbol, subject$ as CryptoQuoteSubject);
+                }
+                cryptoQuoteSubjectMap$.next(map);
+            });
+            exports_3("emptyCryptoQuote", emptyCryptoQuote = Object.freeze({
+                Timestamp: "",
+                BidPrice: 0,
+                BidSize: 0,
+                AskPrice: 0,
+                AskSize: 0,
+            }));
+            exports_3("useStore", useStore = zustand_1.create((set) => ({
+                cryptoAssets: [],
+                symbols: cryptoSymbols_1.cryptoSymbols,
+                selectedTabIndex: 0,
+                setCryptoAssets: (cryptoAssets) => set(() => ({ cryptoAssets })),
+                setSelectedTabIndex: (index) => set(() => ({ selectedTabIndex: index })),
+            })));
+        }
+    };
+});
+System.register("components/TradingGuiDemo/dataService", ["rxjs"], function (exports_4, context_4) {
+    "use strict";
+    var rxjs_2, DataService;
+    var __moduleName = context_4 && context_4.id;
+    return {
+        setters: [
+            function (rxjs_2_1) {
+                rxjs_2 = rxjs_2_1;
+            }
+        ],
+        execute: function () {
+            DataService = class DataService {
+                cryptoQuotes;
+                cryptoSnapshots;
+                cryptoBarDatasets;
+                constructor() {
+                    this.cryptoQuotes = new rxjs_2.ReplaySubject(100000);
+                    this.cryptoSnapshots = new rxjs_2.ReplaySubject(100000);
+                    this.cryptoBarDatasets = new rxjs_2.ReplaySubject(100000);
+                }
+                addCryptoQuote(cryptoQuote) {
+                    this.cryptoQuotes.next(cryptoQuote);
+                }
+                addCryptoSnapshots(cryptoSnapshots) {
+                    this.cryptoSnapshots.next(cryptoSnapshots);
+                }
+                addCryptoBars(cryptoBarDataset) {
+                    this.cryptoBarDatasets.next(cryptoBarDataset);
+                }
+                getCryptoQuotes() {
+                    return this.cryptoQuotes.asObservable();
+                }
+                getCryptoSnapshots() {
+                    return this.cryptoSnapshots.asObservable();
+                }
+                getCryptoBarDatasets() {
+                    return this.cryptoBarDatasets.asObservable();
+                }
+            };
+            exports_4("DataService", DataService);
+        }
+    };
+});
+System.register("components/TradingGuiDemo/dataServiceContext", ["react"], function (exports_5, context_5) {
+    "use strict";
+    var react_1, DataServiceContext, useDataService;
+    var __moduleName = context_5 && context_5.id;
+    return {
+        setters: [
+            function (react_1_1) {
+                react_1 = react_1_1;
+            }
+        ],
+        execute: function () {
+            exports_5("DataServiceContext", DataServiceContext = react_1.createContext(null));
+            exports_5("useDataService", useDataService = () => {
+                const context = react_1.useContext(DataServiceContext);
+                if (context) {
+                    return context;
+                }
+                throw new Error("DataServiceContext initialisation failed");
+            });
+        }
+    };
+});
+System.register("components/TradingGuiDemo/CryptoPlots/CryptoLinePlot", ["react/jsx-runtime", "react", "components/TradingGuiDemo/dataServiceContext", "@xframes/common", "rxjs", "lib/XFrames"], function (exports_6, context_6) {
+    "use strict";
+    var jsx_runtime_1, react_2, dataServiceContext_1, common_2, rxjs_3, XFrames_1, CryptoLinePlot;
+    var __moduleName = context_6 && context_6.id;
+    return {
+        setters: [
+            function (jsx_runtime_1_1) {
+                jsx_runtime_1 = jsx_runtime_1_1;
+            },
+            function (react_2_1) {
+                react_2 = react_2_1;
+            },
+            function (dataServiceContext_1_1) {
+                dataServiceContext_1 = dataServiceContext_1_1;
+            },
+            function (common_2_1) {
+                common_2 = common_2_1;
+            },
+            function (rxjs_3_1) {
+                rxjs_3 = rxjs_3_1;
+            },
+            function (XFrames_1_1) {
+                XFrames_1 = XFrames_1_1;
+            }
+        ],
+        execute: function () {
+            exports_6("CryptoLinePlot", CryptoLinePlot = ({ symbol }) => {
+                const dataService = dataServiceContext_1.useDataService();
+                const plotRef = react_2.useRef(null);
+                // const [axisAutoFit, setAxisAutoFit] = useState(true);
+                react_2.useEffect(() => {
+                    const subscription = dataService
+                        .getCryptoQuotes()
+                        .pipe(rxjs_3.filter((cryptoQuote) => cryptoQuote.S === symbol))
+                        .subscribe((quote) => {
+                        if (plotRef.current) {
+                            const date = new Date(quote.Timestamp);
+                            plotRef.current.appendData(Number(date) / 1000, quote.BidPrice);
+                        }
+                    });
+                    return () => {
+                        subscription.unsubscribe();
+                    };
+                }, [dataService]);
+                // const toggleAxisAutoFit = useCallback(() => {
+                //     setAxisAutoFit((val) => !val);
+                // }, []);
+                return (_jsx(XFrames_1.XFrames.PlotLine, { xAxisScale: common_2.ImPlotScale.Time, ref: plotRef, style: { width: "100%", height: 400 } }));
+            });
+        }
+    };
+});
+System.register("components/TradingGuiDemo/CryptoPlots/CryptoLinePlots", ["react/jsx-runtime", "components/TradingGuiDemo/store", "components/TradingGuiDemo/CryptoPlots/CryptoLinePlot", "lib/XFrames"], function (exports_7, context_7) {
+    "use strict";
+    var jsx_runtime_2, store_1, CryptoLinePlot_1, XFrames_2, CryptoLinePlots;
+    var __moduleName = context_7 && context_7.id;
+    return {
+        setters: [
+            function (jsx_runtime_2_1) {
+                jsx_runtime_2 = jsx_runtime_2_1;
+            },
+            function (store_1_1) {
+                store_1 = store_1_1;
+            },
+            function (CryptoLinePlot_1_1) {
+                CryptoLinePlot_1 = CryptoLinePlot_1_1;
+            },
+            function (XFrames_2_1) {
+                XFrames_2 = XFrames_2_1;
+            }
+        ],
+        execute: function () {
+            exports_7("CryptoLinePlots", CryptoLinePlots = ({}) => {
+                const symbols = store_1.useStore((state) => state.symbols);
+                return (_jsx(XFrames_2.XFrames.Node, { style: {
+                        width: "100%",
+                        height: "100%",
+                        flexDirection: "column",
+                        gap: { row: 5 },
+                    }, children: symbols.map((sym) => (_jsx(CryptoLinePlot_1.CryptoLinePlot, { symbol: sym }, sym))) }));
+            });
+        }
+    };
+});
+System.register("components/TradingGuiDemo/CryptoAssetsList/CryptoAssetsList", ["react/jsx-runtime", "react", "components/TradingGuiDemo/dataServiceContext", "lib/XFrames"], function (exports_8, context_8) {
+    "use strict";
+    var jsx_runtime_3, react_3, dataServiceContext_2, XFrames_3, CryptoAssetsList;
+    var __moduleName = context_8 && context_8.id;
+    return {
+        setters: [
+            function (jsx_runtime_3_1) {
+                jsx_runtime_3 = jsx_runtime_3_1;
+            },
+            function (react_3_1) {
+                react_3 = react_3_1;
+            },
+            function (dataServiceContext_2_1) {
+                dataServiceContext_2 = dataServiceContext_2_1;
+            },
+            function (XFrames_3_1) {
+                XFrames_3 = XFrames_3_1;
+            }
+        ],
+        execute: function () {
+            exports_8("CryptoAssetsList", CryptoAssetsList = ({}) => {
+                const dataService = dataServiceContext_2.useDataService();
+                const tableRef = react_3.useRef(null);
+                const tableColumns = react_3.useMemo(() => [
+                    {
+                        heading: "Symbol",
+                        fieldId: "symbol",
+                    },
+                    {
+                        heading: "ASK",
+                        fieldId: "askPrice",
+                    },
+                    {
+                        heading: "Change",
+                        fieldId: "askChange",
+                    },
+                    {
+                        heading: "BID",
+                        fieldId: "bidPrice",
+                    },
+                    {
+                        heading: "Change",
+                        fieldId: "bidChange",
+                    },
+                ], []);
+                react_3.useEffect(() => {
+                    const subscription = dataService
+                        .getCryptoSnapshots()
+                        .subscribe((snapshots) => {
+                        const data = Object.entries(snapshots).map(([symbol, snapshot]) => ({
+                            symbol,
+                            askPrice: snapshot.LatestQuote.AskPrice.toFixed(6),
+                            bidPrice: snapshot.LatestQuote.BidPrice.toFixed(6),
+                            // todo: totally unsure here
+                            askChange: (snapshot.LatestQuote.AskPrice - snapshot.DailyBar.Open).toFixed(6),
+                            bidChange: (snapshot.LatestQuote.BidPrice - snapshot.DailyBar.Open).toFixed(6),
+                        }));
+                        data.sort((a, b) => {
+                            if (a.symbol < b.symbol) {
+                                return -1;
+                            }
+                            else if (a.symbol > b.symbol) {
+                                return 1;
+                            }
+                            return 0;
+                        });
+                        tableRef.current?.setTableData(data);
+                    });
+                    return () => {
+                        subscription.unsubscribe();
+                    };
+                }, [dataService]);
+                return _jsx(XFrames_3.XFrames.Table, { ref: tableRef, columns: tableColumns });
+            });
+        }
+    };
+});
+System.register("themes", ["@xframes/common"], function (exports_9, context_9) {
+    "use strict";
+    var common_3, theme1Colors, theme1, theme2Colors, theme2;
+    var __moduleName = context_9 && context_9.id;
+    return {
+        setters: [
+            function (common_3_1) {
+                common_3 = common_3_1;
+            }
+        ],
+        execute: function () {
+            exports_9("theme1Colors", theme1Colors = {
+                black: "#1a1a1a",
+                darkGrey: "#5a5a5a",
+                grey: "#9a9a9a",
+                lightGrey: "#bebebe",
+                veryLightGrey: "#e5e5e5",
+                superLightGrey: "#f7f7f7",
+                white: "#fff",
+                hero: "#ff6e59",
+                hoverHero: "#ff4a30",
+            });
+            exports_9("theme1", theme1 = {
+                // frameBorderSize: 1,
+                // framePadding: [0, 0],
+                colors: {
+                    [common_3.ImGuiCol.Text]: [theme1Colors.black, 1],
+                    [common_3.ImGuiCol.TextDisabled]: [theme1Colors.darkGrey, 1],
+                    [common_3.ImGuiCol.WindowBg]: [theme1Colors.white, 1],
+                    [common_3.ImGuiCol.ChildBg]: [theme1Colors.white, 1],
+                    [common_3.ImGuiCol.PopupBg]: [theme1Colors.white, 1],
+                    [common_3.ImGuiCol.Border]: [theme1Colors.darkGrey, 1],
+                    [common_3.ImGuiCol.BorderShadow]: [theme1Colors.black, 1],
+                    [common_3.ImGuiCol.FrameBg]: [theme1Colors.veryLightGrey, 1],
+                    [common_3.ImGuiCol.FrameBgHovered]: [theme1Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.FrameBgActive]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.TitleBg]: [theme1Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.TitleBgActive]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.TitleBgCollapsed]: [theme1Colors.veryLightGrey, 1],
+                    [common_3.ImGuiCol.MenuBarBg]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.ScrollbarBg]: [theme1Colors.veryLightGrey, 1],
+                    [common_3.ImGuiCol.ScrollbarGrab]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.ScrollbarGrabHovered]: [theme1Colors.darkGrey, 1],
+                    [common_3.ImGuiCol.ScrollbarGrabActive]: [theme1Colors.black, 1],
+                    [common_3.ImGuiCol.CheckMark]: [theme1Colors.black, 1],
+                    [common_3.ImGuiCol.SliderGrab]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.SliderGrabActive]: [theme1Colors.darkGrey, 1],
+                    [common_3.ImGuiCol.Button]: [theme1Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.ButtonHovered]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.ButtonActive]: [theme1Colors.darkGrey, 1],
+                    [common_3.ImGuiCol.Header]: [theme1Colors.veryLightGrey, 1],
+                    [common_3.ImGuiCol.HeaderHovered]: [theme1Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.HeaderActive]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.Separator]: [theme1Colors.black, 1],
+                    [common_3.ImGuiCol.SeparatorHovered]: [theme1Colors.veryLightGrey, 1],
+                    [common_3.ImGuiCol.SeparatorActive]: [theme1Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.ResizeGrip]: [theme1Colors.veryLightGrey, 1],
+                    [common_3.ImGuiCol.ResizeGripHovered]: [theme1Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.ResizeGripActive]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.Tab]: [theme1Colors.veryLightGrey, 1],
+                    [common_3.ImGuiCol.TabHovered]: [theme1Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.TabActive]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.TabUnfocused]: [theme1Colors.veryLightGrey, 1],
+                    [common_3.ImGuiCol.TabUnfocusedActive]: [theme1Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.PlotLines]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.PlotLinesHovered]: [theme1Colors.darkGrey, 1],
+                    [common_3.ImGuiCol.PlotHistogram]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.PlotHistogramHovered]: [theme1Colors.darkGrey, 1],
+                    [common_3.ImGuiCol.TableHeaderBg]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.TableBorderStrong]: [theme1Colors.darkGrey, 1],
+                    [common_3.ImGuiCol.TableBorderLight]: [theme1Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.TableRowBg]: [theme1Colors.veryLightGrey, 1],
+                    [common_3.ImGuiCol.TableRowBgAlt]: [theme1Colors.white, 1],
+                    [common_3.ImGuiCol.TextSelectedBg]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.DragDropTarget]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.NavHighlight]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.NavWindowingHighlight]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.NavWindowingDimBg]: [theme1Colors.grey, 1],
+                    [common_3.ImGuiCol.ModalWindowDimBg]: [theme1Colors.grey, 1],
+                },
+            });
+            exports_9("theme2Colors", theme2Colors = {
+                darkestGrey: "#141f2c",
+                darkerGrey: "#2a2e39",
+                darkGrey: "#363b4a",
+                lightGrey: "#5a5a5a",
+                lighterGrey: "#7A818C",
+                evenLighterGrey: "#8491a3",
+                black: "#0A0B0D",
+                green: "#75f986",
+                red: "#ff0062",
+                white: "#fff",
+            });
+            exports_9("theme2", theme2 = {
+                // frameBorderSize: 1,
+                // framePadding: [0, 0],
+                colors: {
+                    [common_3.ImGuiCol.Text]: [theme2Colors.white, 1],
+                    [common_3.ImGuiCol.TextDisabled]: [theme2Colors.lighterGrey, 1],
+                    [common_3.ImGuiCol.WindowBg]: [theme2Colors.black, 1],
+                    [common_3.ImGuiCol.ChildBg]: [theme2Colors.black, 1],
+                    [common_3.ImGuiCol.PopupBg]: [theme2Colors.white, 1],
+                    [common_3.ImGuiCol.Border]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.BorderShadow]: [theme2Colors.darkestGrey, 1],
+                    [common_3.ImGuiCol.FrameBg]: [theme2Colors.black, 1],
+                    [common_3.ImGuiCol.FrameBgHovered]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.FrameBgActive]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.TitleBg]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.TitleBgActive]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.TitleBgCollapsed]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.MenuBarBg]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.ScrollbarBg]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.ScrollbarGrab]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.ScrollbarGrabHovered]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.ScrollbarGrabActive]: [theme2Colors.darkestGrey, 1],
+                    [common_3.ImGuiCol.CheckMark]: [theme2Colors.darkestGrey, 1],
+                    [common_3.ImGuiCol.SliderGrab]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.SliderGrabActive]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.Button]: [theme2Colors.black, 1],
+                    [common_3.ImGuiCol.ButtonHovered]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.ButtonActive]: [theme2Colors.black, 1],
+                    [common_3.ImGuiCol.Header]: [theme2Colors.black, 1],
+                    [common_3.ImGuiCol.HeaderHovered]: [theme2Colors.black, 1],
+                    [common_3.ImGuiCol.HeaderActive]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.Separator]: [theme2Colors.darkestGrey, 1],
+                    [common_3.ImGuiCol.SeparatorHovered]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.SeparatorActive]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.ResizeGrip]: [theme2Colors.black, 1],
+                    [common_3.ImGuiCol.ResizeGripHovered]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.ResizeGripActive]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.Tab]: [theme2Colors.black, 1],
+                    [common_3.ImGuiCol.TabHovered]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.TabActive]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.TabUnfocused]: [theme2Colors.black, 1],
+                    [common_3.ImGuiCol.TabUnfocusedActive]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.PlotLines]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.PlotLinesHovered]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.PlotHistogram]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.PlotHistogramHovered]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.TableHeaderBg]: [theme2Colors.black, 1],
+                    [common_3.ImGuiCol.TableBorderStrong]: [theme2Colors.lightGrey, 1],
+                    [common_3.ImGuiCol.TableBorderLight]: [theme2Colors.darkerGrey, 1],
+                    [common_3.ImGuiCol.TableRowBg]: [theme2Colors.darkGrey, 1],
+                    [common_3.ImGuiCol.TableRowBgAlt]: [theme2Colors.darkerGrey, 1],
+                    [common_3.ImGuiCol.TextSelectedBg]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.DragDropTarget]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.NavHighlight]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.NavWindowingHighlight]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.NavWindowingDimBg]: [theme2Colors.darkerGrey, 1], //
+                    [common_3.ImGuiCol.ModalWindowDimBg]: [theme2Colors.darkerGrey, 1], //
+                },
+            });
+        }
+    };
+});
+System.register("components/TradingGuiDemo/CryptoQuotePrice/CryptoQuotePrice", ["react/jsx-runtime", "react", "rxjs", "@xframes/common", "components/TradingGuiDemo/dataServiceContext", "lib/XFrames", "themes"], function (exports_10, context_10) {
+    "use strict";
+    var jsx_runtime_4, react_4, rxjs_4, common_4, dataServiceContext_3, XFrames_4, themes_1, CryptoQuotePrice;
+    var __moduleName = context_10 && context_10.id;
+    return {
+        setters: [
+            function (jsx_runtime_4_1) {
+                jsx_runtime_4 = jsx_runtime_4_1;
+            },
+            function (react_4_1) {
+                react_4 = react_4_1;
+            },
+            function (rxjs_4_1) {
+                rxjs_4 = rxjs_4_1;
+            },
+            function (common_4_1) {
+                common_4 = common_4_1;
+            },
+            function (dataServiceContext_3_1) {
+                dataServiceContext_3 = dataServiceContext_3_1;
+            },
+            function (XFrames_4_1) {
+                XFrames_4 = XFrames_4_1;
+            },
+            function (themes_1_1) {
+                themes_1 = themes_1_1;
+            }
+        ],
+        execute: function () {
+            exports_10("CryptoQuotePrice", CryptoQuotePrice = ({ symbol }) => {
+                const [data, setData] = react_4.useState({
+                    lastUpdated: "n/a",
+                });
+                // const [lastUpdated, setLastUpdated] = useState<string>("n/a");
+                const dataService = dataServiceContext_3.useDataService();
+                react_4.useEffect(() => {
+                    const subscription = dataService
+                        .getCryptoQuotes()
+                        .pipe(rxjs_4.filter((cryptoQuote) => cryptoQuote.S === symbol))
+                        .subscribe((quote) => {
+                        const newData = {
+                            quote,
+                            lastUpdated: "n/a",
+                        };
+                        setData((oldData) => {
+                            // if (oldData.quote) {
+                            //     const quoteDate = new Date(quote.Timestamp);
+                            //     const previousDate = new Date(oldData.quote.Timestamp);
+                            //     const msDiff = differenceInMilliseconds(quoteDate, previousDate);
+                            //     if (msDiff >= 1000) {
+                            //         newData.lastUpdated = formatDuration(
+                            //             intervalToDuration(interval(quoteDate, previousDate)),
+                            //         );
+                            //     } else {
+                            //         newData.lastUpdated = `${msDiff}ms ago`;
+                            //     }
+                            // }
+                            return newData;
+                        });
+                    });
+                    return () => {
+                        subscription.unsubscribe();
+                    };
+                }, [dataService]);
+                const styleSheet = react_4.useMemo(() => common_4.RWStyleSheet.create({
+                    pricesWrapper: {
+                        alignSelf: "center",
+                        flexDirection: "row",
+                        gap: { column: 5 },
+                    },
+                    price: {
+                        width: 100,
+                        height: "auto",
+                        // borderColor: "#000",
+                        // borderThickness: 1,
+                        alignItems: "center",
+                    },
+                    ask: {
+                        colors: {
+                            [common_4.ImGuiCol.Text]: themes_1.theme2Colors.red,
+                        },
+                    },
+                    bid: {
+                        colors: {
+                            [common_4.ImGuiCol.Text]: themes_1.theme2Colors.green,
+                        },
+                    },
+                }), []);
+                return (_jsx(_Fragment, { children: _jsxs(XFrames_4.XFrames.Node, { style: styleSheet.pricesWrapper, children: [_jsxs(XFrames_4.XFrames.Node, { style: styleSheet.price, children: [_jsx(XFrames_4.XFrames.UnformattedText, { text: "ASK", style: styleSheet.ask }), _jsx(XFrames_4.XFrames.UnformattedText, { text: typeof data?.quote?.AskPrice === "number"
+                                            ? data?.quote?.AskPrice.toFixed(6)
+                                            : "n/a", style: styleSheet.ask })] }), _jsxs(XFrames_4.XFrames.Node, { style: styleSheet.price, children: [_jsx(XFrames_4.XFrames.UnformattedText, { text: "BID", style: styleSheet.bid }), _jsx(XFrames_4.XFrames.UnformattedText, { text: typeof data?.quote?.BidPrice === "number"
+                                            ? data?.quote?.BidPrice.toFixed(6)
+                                            : "n/a", style: styleSheet.bid })] })] }) }));
+            });
+        }
+    };
+});
+System.register("components/TradingGuiDemo/CryptoAssetPanels/CryptoAssetPanels", ["react/jsx-runtime", "react", "components/TradingGuiDemo/store", "components/TradingGuiDemo/CryptoQuotePrice/CryptoQuotePrice", "@xframes/common", "lib/XFrames"], function (exports_11, context_11) {
+    "use strict";
+    var jsx_runtime_5, react_5, store_2, CryptoQuotePrice_1, common_5, XFrames_5, CryptoAssetPanels;
+    var __moduleName = context_11 && context_11.id;
+    return {
+        setters: [
+            function (jsx_runtime_5_1) {
+                jsx_runtime_5 = jsx_runtime_5_1;
+            },
+            function (react_5_1) {
+                react_5 = react_5_1;
+            },
+            function (store_2_1) {
+                store_2 = store_2_1;
+            },
+            function (CryptoQuotePrice_1_1) {
+                CryptoQuotePrice_1 = CryptoQuotePrice_1_1;
+            },
+            function (common_5_1) {
+                common_5 = common_5_1;
+            },
+            function (XFrames_5_1) {
+                XFrames_5 = XFrames_5_1;
+            }
+        ],
+        execute: function () {
+            exports_11("CryptoAssetPanels", CryptoAssetPanels = ({}) => {
+                const cryptoAssets = store_2.useStore((state) => state.cryptoAssets.sort((a, b) => {
+                    if (a.symbol < b.symbol) {
+                        return -1;
+                    }
+                    else if (a.symbol > b.symbol) {
+                        return 1;
+                    }
+                    return 0;
+                }));
+                const styleSheet = react_5.useMemo(() => common_5.RWStyleSheet.create({
+                    mainWrapperNode: {
+                        width: "100%",
+                        height: "auto",
+                        flexDirection: "row",
+                        flexWrap: "wrap",
+                        gap: { row: 5, column: 5 },
+                    },
+                    asset: {
+                        minWidth: 200,
+                        maxWidth: 240,
+                        flex: 1,
+                        height: "auto",
+                        border: {
+                            color: "#000",
+                            thickness: 1,
+                        },
+                        alignItems: "center",
+                        padding: { vertical: 5 },
+                        gap: { row: 5 },
+                    },
+                    symbol: {
+                        font: { name: "roboto-regular", size: 24 },
+                    },
+                }), []);
+                return (_jsx(XFrames_5.XFrames.Node, { style: styleSheet.mainWrapperNode, children: cryptoAssets.map((asset) => {
+                        return (_jsxs(XFrames_5.XFrames.Node, { style: styleSheet.asset, children: [_jsx(XFrames_5.XFrames.UnformattedText, { style: styleSheet.symbol, text: asset.symbol }), _jsx(CryptoQuotePrice_1.CryptoQuotePrice, { symbol: asset.symbol })] }, asset.id));
+                    }) }));
+            });
+        }
+    };
+});
+System.register("components/TradingGuiDemo/CryptoPlots/CryptoCandlestickPlot", ["react/jsx-runtime", "react", "rxjs", "components/TradingGuiDemo/dataServiceContext", "lib/XFrames"], function (exports_12, context_12) {
+    "use strict";
+    var jsx_runtime_6, react_6, rxjs_5, dataServiceContext_4, XFrames_6, CryptoCandlestickPlot;
+    var __moduleName = context_12 && context_12.id;
+    return {
+        setters: [
+            function (jsx_runtime_6_1) {
+                jsx_runtime_6 = jsx_runtime_6_1;
+            },
+            function (react_6_1) {
+                react_6 = react_6_1;
+            },
+            function (rxjs_5_1) {
+                rxjs_5 = rxjs_5_1;
+            },
+            function (dataServiceContext_4_1) {
+                dataServiceContext_4 = dataServiceContext_4_1;
+            },
+            function (XFrames_6_1) {
+                XFrames_6 = XFrames_6_1;
+            }
+        ],
+        execute: function () {
+            exports_12("CryptoCandlestickPlot", CryptoCandlestickPlot = ({ symbol }) => {
+                const dataService = dataServiceContext_4.useDataService();
+                const plotRef = react_6.useRef(null);
+                // const [axisAutoFit, setAxisAutoFit] = useState(true);
+                react_6.useEffect(() => {
+                    const subscription = dataService
+                        .getCryptoBarDatasets()
+                        .pipe(rxjs_5.map((cryptoBars) => cryptoBars[symbol]))
+                        .subscribe((cryptoBarsForSymbol) => {
+                        if (plotRef.current) {
+                            const data = cryptoBarsForSymbol.map((cryptoBar) => ({
+                                date: Number(new Date(cryptoBar.Timestamp)) / 1000,
+                                open: cryptoBar.Open,
+                                close: cryptoBar.Close,
+                                high: cryptoBar.High,
+                                low: cryptoBar.Low,
+                            }));
+                            // console.log(data);
+                            plotRef.current.setData(data);
+                        }
+                    });
+                    return () => {
+                        subscription.unsubscribe();
+                    };
+                }, [dataService]);
+                // const toggleAxisAutoFit = useCallback(() => {
+                //     setAxisAutoFit((val) => !val);
+                // }, []);
+                return (_jsx(XFrames_6.XFrames.PlotCandlestick, { ref: plotRef, style: { width: "100%", height: 400 } }));
+            });
+        }
+    };
+});
+System.register("components/TradingGuiDemo/CryptoPlots/CryptoCandlestickPlots", ["react/jsx-runtime", "components/TradingGuiDemo/store", "components/TradingGuiDemo/CryptoPlots/CryptoCandlestickPlot", "lib/XFrames"], function (exports_13, context_13) {
+    "use strict";
+    var jsx_runtime_7, store_3, CryptoCandlestickPlot_1, XFrames_7, CryptoCandlestickPlots;
+    var __moduleName = context_13 && context_13.id;
+    return {
+        setters: [
+            function (jsx_runtime_7_1) {
+                jsx_runtime_7 = jsx_runtime_7_1;
+            },
+            function (store_3_1) {
+                store_3 = store_3_1;
+            },
+            function (CryptoCandlestickPlot_1_1) {
+                CryptoCandlestickPlot_1 = CryptoCandlestickPlot_1_1;
+            },
+            function (XFrames_7_1) {
+                XFrames_7 = XFrames_7_1;
+            }
+        ],
+        execute: function () {
+            exports_13("CryptoCandlestickPlots", CryptoCandlestickPlots = ({}) => {
+                const symbols = store_3.useStore((state) => state.symbols);
+                return (_jsx(XFrames_7.XFrames.Node, { style: {
+                        width: "100%",
+                        height: "100%",
+                        flexDirection: "column",
+                        gap: { row: 5 },
+                    }, children: symbols.map((sym) => (_jsx(CryptoCandlestickPlot_1.CryptoCandlestickPlot, { symbol: sym }, sym))) }));
+            });
+        }
+    };
+});
+System.register("components/TradingGuiDemo/Sidebar/Sidebar", ["react/jsx-runtime", "react", "@xframes/common", "lib/XFrames"], function (exports_14, context_14) {
+    "use strict";
+    var jsx_runtime_8, react_7, common_6, XFrames_8, Sidebar;
+    var __moduleName = context_14 && context_14.id;
+    return {
+        setters: [
+            function (jsx_runtime_8_1) {
+                jsx_runtime_8 = jsx_runtime_8_1;
+            },
+            function (react_7_1) {
+                react_7 = react_7_1;
+            },
+            function (common_6_1) {
+                common_6 = common_6_1;
+            },
+            function (XFrames_8_1) {
+                XFrames_8 = XFrames_8_1;
+            }
+        ],
+        execute: function () {
+            exports_14("Sidebar", Sidebar = () => {
+                const styleSheet = react_7.useMemo(() => common_6.RWStyleSheet.create({
+                    sidebarNode: {
+                        flexBasis: 60,
+                        height: "100%",
+                        border: {
+                            color: "#1B1D20",
+                            thickness: 1,
+                        },
+                    },
+                    sideBarItem: {
+                        width: 58,
+                        height: 58,
+                        justifyContent: "center",
+                        alignItems: "center",
+                    },
+                    logo: {
+                        font: { name: "roboto-regular", size: 36 },
+                    },
+                    icon: {
+                        width: 48,
+                        height: 48,
+                        font: { name: "roboto-regular", size: 36 },
+                        colors: {
+                            [common_6.ImGuiCol.ButtonHovered]: "#001033",
+                            [common_6.ImGuiCol.ButtonActive]: "#001033",
+                        },
+                        vars: { [common_6.ImGuiStyleVar.FrameRounding]: 24 },
+                    },
+                    iconActive: {
+                        width: 48,
+                        height: 48,
+                        font: { name: "roboto-regular", size: 36 },
+                        vars: { [common_6.ImGuiStyleVar.FrameRounding]: 24 },
+                        colors: {
+                            [common_6.ImGuiCol.Text]: "#588AF5",
+                            [common_6.ImGuiCol.Button]: "#001033",
+                            [common_6.ImGuiCol.ButtonHovered]: "#001033",
+                            [common_6.ImGuiCol.ButtonActive]: "#001033",
+                        },
+                    },
+                }), []);
+                return (_jsxs(XFrames_8.XFrames.Node, { style: styleSheet.sidebarNode, children: [_jsx(XFrames_8.XFrames.Node, { style: styleSheet.sideBarItem, children: _jsx(XFrames_8.XFrames.UnformattedText, { text: common_6.faIconMap.otter, style: styleSheet.logo }) }), _jsx(XFrames_8.XFrames.Node, { style: styleSheet.sideBarItem, children: _jsx(XFrames_8.XFrames.Button, { label: common_6.faIconMap["arrow-trend-up"], style: styleSheet.iconActive, hoverStyle: styleSheet.iconActive }) }), _jsx(XFrames_8.XFrames.Node, { style: styleSheet.sideBarItem, children: _jsx(XFrames_8.XFrames.Button, { label: common_6.faIconMap["wallet"], style: styleSheet.icon, hoverStyle: styleSheet.iconActive }) }), _jsx(XFrames_8.XFrames.Node, { style: styleSheet.sideBarItem, children: _jsx(XFrames_8.XFrames.Button, { label: common_6.faIconMap["chart-pie"], style: styleSheet.icon, hoverStyle: styleSheet.iconActive }) })] }));
+            });
+        }
+    };
+});
+System.register("components/TradingGuiDemo/CryptoSymbolPairs/CryptoSymbolPair", ["react/jsx-runtime", "react", "@xframes/common", "lib/XFrames"], function (exports_15, context_15) {
+    "use strict";
+    var jsx_runtime_9, react_8, common_7, XFrames_9, CryptoSymbolPair;
+    var __moduleName = context_15 && context_15.id;
+    return {
+        setters: [
+            function (jsx_runtime_9_1) {
+                jsx_runtime_9 = jsx_runtime_9_1;
+            },
+            function (react_8_1) {
+                react_8 = react_8_1;
+            },
+            function (common_7_1) {
+                common_7 = common_7_1;
+            },
+            function (XFrames_9_1) {
+                XFrames_9 = XFrames_9_1;
+            }
+        ],
+        execute: function () {
+            exports_15("CryptoSymbolPair", CryptoSymbolPair = ({ symbol }) => {
+                const styleSheet = react_8.useMemo(() => common_7.RWStyleSheet.create({
+                    symbolLogoPair: {
+                        flexDirection: "row",
+                    },
+                    symbolLogoLeft: {
+                        width: 24,
+                        height: 24,
+                    },
+                    symbolLogoRight: {
+                        width: 24,
+                        height: 24,
+                        position: { left: -5 }, // todo: doesn't this need absolute positioning?
+                    },
+                }), []);
+                return (_jsxs(XFrames_9.XFrames.Node, { style: styleSheet.symbolLogoPair, children: [_jsx(XFrames_9.XFrames.Image, { url: "bitcoin-btc-logo_gqud0f.png", style: styleSheet.symbolLogoLeft }), _jsx(XFrames_9.XFrames.Image, { url: "77-771550_dollar-currency-money-finance-usd-us-dollar-dollar_apzzg2.png", style: styleSheet.symbolLogoRight })] }));
+            });
+        }
+    };
+});
+System.register("components/TradingGuiDemo/CryptoSymbolBlock/CryptoSymbolBlock", ["react/jsx-runtime", "react", "@xframes/common", "components/TradingGuiDemo/CryptoSymbolPairs/CryptoSymbolPair", "lib/XFrames"], function (exports_16, context_16) {
+    "use strict";
+    var jsx_runtime_10, react_9, common_8, CryptoSymbolPair_1, XFrames_10, CryptoSymbolBlock;
+    var __moduleName = context_16 && context_16.id;
+    return {
+        setters: [
+            function (jsx_runtime_10_1) {
+                jsx_runtime_10 = jsx_runtime_10_1;
+            },
+            function (react_9_1) {
+                react_9 = react_9_1;
+            },
+            function (common_8_1) {
+                common_8 = common_8_1;
+            },
+            function (CryptoSymbolPair_1_1) {
+                CryptoSymbolPair_1 = CryptoSymbolPair_1_1;
+            },
+            function (XFrames_10_1) {
+                XFrames_10 = XFrames_10_1;
+            }
+        ],
+        execute: function () {
+            exports_16("CryptoSymbolBlock", CryptoSymbolBlock = ({ symbol }) => {
+                const price = "40,730.00";
+                const currency = "USD";
+                const trend = "(+2.50%)";
+                const styleSheet = react_9.useMemo(() => common_8.RWStyleSheet.create({
+                    block: {
+                        flexDirection: "row",
+                        padding: {
+                            // horizontal: 2,
+                            vertical: 8,
+                        },
+                        gap: { column: 5 },
+                        // borderColor: "#fff",
+                        // borderThickness: 1,
+                    },
+                    symbolLogos: {
+                        width: 60,
+                        height: 40,
+                        alignItems: "center",
+                        justifyContent: "center",
+                    },
+                    info: {
+                        gap: { row: 5 },
+                    },
+                    priceRow: {
+                        flexDirection: "row",
+                        gap: { column: 2 },
+                    },
+                    symbol: {
+                        font: { name: "roboto-bold", size: 16 },
+                        colors: { [common_8.ImGuiCol.Text]: "#A9B5C0" },
+                    },
+                    price: {
+                        font: { name: "roboto-bold", size: 20 },
+                        colors: { [common_8.ImGuiCol.Text]: "#D9D9D9" },
+                    },
+                    currency: {
+                        font: { name: "roboto-bold", size: 20 },
+                        colors: { [common_8.ImGuiCol.Text]: "#A9B5C0" },
+                    },
+                    trend: {
+                        font: { name: "roboto-bold", size: 20 },
+                        colors: { [common_8.ImGuiCol.Text]: "#239465" },
+                    },
+                }), []);
+                return (_jsxs(XFrames_10.XFrames.Node, { style: styleSheet.block, children: [_jsx(XFrames_10.XFrames.Node, { style: styleSheet.symbolLogos, children: _jsx(CryptoSymbolPair_1.CryptoSymbolPair, { symbol: symbol }) }), _jsxs(XFrames_10.XFrames.Node, { style: styleSheet.info, children: [_jsx(XFrames_10.XFrames.UnformattedText, { style: styleSheet.symbol, text: symbol }), _jsxs(XFrames_10.XFrames.Node, { style: styleSheet.priceRow, children: [_jsx(XFrames_10.XFrames.UnformattedText, { style: styleSheet.price, text: price }), _jsx(XFrames_10.XFrames.UnformattedText, { style: styleSheet.currency, text: currency }), _jsx(XFrames_10.XFrames.UnformattedText, { style: styleSheet.trend, text: trend })] })] })] }));
+            });
+        }
+    };
+});
+System.register("components/TradingGuiDemo/Tabs/Tabs", ["react/jsx-runtime", "react", "@xframes/common", "lib/XFrames", "themes"], function (exports_17, context_17) {
+    "use strict";
+    var jsx_runtime_11, react_10, common_9, XFrames_11, themes_2, Tabs;
+    var __moduleName = context_17 && context_17.id;
+    return {
+        setters: [
+            function (jsx_runtime_11_1) {
+                jsx_runtime_11 = jsx_runtime_11_1;
+            },
+            function (react_10_1) {
+                react_10 = react_10_1;
+            },
+            function (common_9_1) {
+                common_9 = common_9_1;
+            },
+            function (XFrames_11_1) {
+                XFrames_11 = XFrames_11_1;
+            },
+            function (themes_2_1) {
+                themes_2 = themes_2_1;
+            }
+        ],
+        execute: function () {
+            // todo: fix 1px vertical shift on hover
+            exports_17("Tabs", Tabs = ({ tabs, selectedTabIndex, onSelectedTabChange, }) => {
+                // const [selectedItemIds, setSelectedItemIds] = useState("cryptoAssetPanels");
+                const styleSheet = react_10.useMemo(() => common_9.RWStyleSheet.create({
+                    tabs: {
+                        flexDirection: "row",
+                        borderLeft: {
+                            color: "#1C1E22",
+                            thickness: 1,
+                        },
+                        borderBottom: {
+                            color: "#1C1E22",
+                            thickness: 1,
+                        },
+                    },
+                    tab: {
+                        padding: { vertical: 10, horizontal: 20 },
+                        borderTop: {
+                            color: "#1C1E22",
+                            thickness: 1,
+                        },
+                        borderRight: {
+                            color: "#1C1E22",
+                            thickness: 1,
+                        },
+                    },
+                    hoveredTab: {
+                        padding: { vertical: 10, horizontal: 20 },
+                        borderTop: {
+                            // todo: not currently working for hover/active/disabled states
+                            color: "#fff",
+                            thickness: 1,
+                        },
+                        borderRight: {
+                            color: "#1C1E22",
+                            thickness: 1,
+                        },
+                        position: {
+                            top: 1, // todo: hack
+                        },
+                    },
+                    activeTab: {
+                        padding: { vertical: 10, horizontal: 20 },
+                        borderTop: {
+                            // todo: not currently working for hover/active/disabled states
+                            color: "#fff",
+                            thickness: 1,
+                        },
+                        borderRight: {
+                            color: "#1C1E22",
+                            thickness: 1,
+                        },
+                        position: {
+                            top: 1, // todo: hack
+                        },
+                    },
+                    selectedTab: {
+                        padding: { vertical: 10, horizontal: 20 },
+                        borderTop: {
+                            color: "#fff",
+                            thickness: 1,
+                        },
+                        borderBottom: {
+                            color: themes_2.theme2Colors.black,
+                            thickness: 1,
+                        },
+                        borderRight: {
+                            color: "#1C1E22",
+                            thickness: 1,
+                        },
+                        position: {
+                            top: 1, // todo: hack
+                        },
+                    },
+                    tabText: {
+                        font: { name: "roboto-bold", size: 18 },
+                    },
+                }), []);
+                return (_jsx(XFrames_11.XFrames.Node, { style: styleSheet.tabs, children: tabs.map((tab, index) => {
+                        const isSelected = selectedTabIndex === index;
+                        return (_jsx(XFrames_11.XFrames.Node, { style: isSelected ? styleSheet.selectedTab : styleSheet.tab, hoverStyle: isSelected ? styleSheet.selectedTab : styleSheet.hoveredTab, activeStyle: isSelected ? styleSheet.selectedTab : styleSheet.activeTab, onClick: () => {
+                                // console.log("clicked");
+                                onSelectedTabChange(index);
+                            }, trackMouseClickEvents: true, children: _jsx(XFrames_11.XFrames.UnformattedText, { text: tab, style: styleSheet.tabText }) }, tab));
+                    }) }));
+            });
+        }
+    };
+});
+System.register("components/TradingGuiDemo/TradingGuiDemo", ["react/jsx-runtime", "react", "@xframes/common", "components/TradingGuiDemo/CryptoPlots/CryptoLinePlots", "components/TradingGuiDemo/store", "components/TradingGuiDemo/CryptoAssetsList/CryptoAssetsList", "components/TradingGuiDemo/dataService", "components/TradingGuiDemo/CryptoAssetPanels/CryptoAssetPanels", "components/TradingGuiDemo/CryptoPlots/CryptoCandlestickPlots", "components/TradingGuiDemo/Sidebar/Sidebar", "components/TradingGuiDemo/CryptoSymbolBlock/CryptoSymbolBlock", "components/TradingGuiDemo/Tabs/Tabs", "lib/XFrames", "themes"], function (exports_18, context_18) {
+    "use strict";
+    var jsx_runtime_12, react_11, common_10, CryptoLinePlots_1, store_4, CryptoAssetsList_1, dataService_1, CryptoAssetPanels_1, CryptoCandlestickPlots_1, Sidebar_1, CryptoSymbolBlock_1, Tabs_1, XFrames_12, themes_3, componentMap, dataService, TradingGuiDemo;
+    var __moduleName = context_18 && context_18.id;
+    return {
+        setters: [
+            function (jsx_runtime_12_1) {
+                jsx_runtime_12 = jsx_runtime_12_1;
+            },
+            function (react_11_1) {
+                react_11 = react_11_1;
+            },
+            function (common_10_1) {
+                common_10 = common_10_1;
+            },
+            function (CryptoLinePlots_1_1) {
+                CryptoLinePlots_1 = CryptoLinePlots_1_1;
+            },
+            function (store_4_1) {
+                store_4 = store_4_1;
+            },
+            function (CryptoAssetsList_1_1) {
+                CryptoAssetsList_1 = CryptoAssetsList_1_1;
+            },
+            function (dataService_1_1) {
+                dataService_1 = dataService_1_1;
+            },
+            function (CryptoAssetPanels_1_1) {
+                CryptoAssetPanels_1 = CryptoAssetPanels_1_1;
+            },
+            function (CryptoCandlestickPlots_1_1) {
+                CryptoCandlestickPlots_1 = CryptoCandlestickPlots_1_1;
+            },
+            function (Sidebar_1_1) {
+                Sidebar_1 = Sidebar_1_1;
+            },
+            function (CryptoSymbolBlock_1_1) {
+                CryptoSymbolBlock_1 = CryptoSymbolBlock_1_1;
+            },
+            function (Tabs_1_1) {
+                Tabs_1 = Tabs_1_1;
+            },
+            function (XFrames_12_1) {
+                XFrames_12 = XFrames_12_1;
+            },
+            function (themes_3_1) {
+                themes_3 = themes_3_1;
+            }
+        ],
+        execute: function () {
+            componentMap = {
+                cryptoAssetPanels: CryptoAssetPanels_1.CryptoAssetPanels,
+                cryptoAssetList: CryptoAssetsList_1.CryptoAssetsList,
+                cryptoLinePlots: CryptoLinePlots_1.CryptoLinePlots,
+                cryptoCandlestickPlots: CryptoCandlestickPlots_1.CryptoCandlestickPlots,
+            };
+            dataService = new dataService_1.DataService();
+            exports_18("TradingGuiDemo", TradingGuiDemo = () => {
+                const symbols = store_4.useStore((state) => state.symbols);
+                const selectedTabIndex = store_4.useStore((state) => state.selectedTabIndex);
+                const setSelectedTabIndex = store_4.useStore((state) => state.setSelectedTabIndex);
+                const setCryptoAssets = store_4.useStore((state) => state.setCryptoAssets);
+                // const socketRef = useRef<WebSocket>();
+                const widgetRegistratonService = common_10.useWidgetRegistrationService();
+                const [selectedItemIds, setSelectedItemIds] = react_11.useState([
+                    "cryptoAssetPanels",
+                ]);
+                const styleSheet = react_11.useMemo(() => common_10.RWStyleSheet.create({
+                    rootNode: {
+                        height: "100%",
+                    },
+                    mainLayoutNode: {
+                        flex: 1,
+                        flexDirection: "row",
+                    },
+                    title: {
+                        colors: { [common_10.ImGuiCol.Text]: themes_3.theme2Colors.green },
+                        font: { name: "roboto-regular", size: 24 },
+                    },
+                    debugButton: {
+                        positionType: "absolute",
+                        position: { right: 15, bottom: 15 },
+                        flexDirection: "row",
+                        gap: { column: 10 },
+                    },
+                    button: {
+                        colors: {
+                            [common_10.ImGuiCol.Text]: themes_3.theme2Colors.green,
+                            [common_10.ImGuiCol.Border]: themes_3.theme2Colors.green,
+                        },
+                        padding: { all: 8 },
+                        vars: {
+                            [common_10.ImGuiStyleVar.FrameBorderSize]: 1,
+                            [common_10.ImGuiStyleVar.FrameRounding]: 5,
+                        },
+                    },
+                    mainNode: {
+                        flex: 1,
+                    },
+                    mainTitleNode: {
+                        flexDirection: "row",
+                        borderBottom: {
+                            color: "#1B1D20", // todo: remove double border
+                            thickness: 1,
+                        },
+                        borderRight: {
+                            color: "#1B1D20", // todo: remove double border
+                            thickness: 1,
+                        },
+                        padding: { all: 20 },
+                    },
+                    mainTitle: {
+                        font: { name: "roboto-bold", size: 32 },
+                    },
+                    contentNode: {
+                        padding: {
+                            left: 8,
+                        },
+                    },
+                    tabContent: {
+                        height: "100%",
+                        width: 350,
+                        gap: { row: 10 },
+                        padding: {
+                            horizontal: 8,
+                            vertical: 16,
+                        },
+                        borderLeft: {
+                            color: "#1C1E22",
+                            thickness: 1,
+                        },
+                    },
+                    marketSearchInput: {
+                        vars: {
+                            [common_10.ImGuiStyleVar.FrameBorderSize]: 1,
+                            [common_10.ImGuiStyleVar.FramePadding]: [10, 10],
+                        },
+                        colors: {
+                            [common_10.ImGuiCol.Border]: "#1C1E22",
+                        },
+                    },
+                    marketSearchInputHover: {
+                        vars: {
+                            [common_10.ImGuiStyleVar.FrameBorderSize]: 1,
+                            [common_10.ImGuiStyleVar.FramePadding]: [10, 10],
+                        },
+                        colors: {
+                            [common_10.ImGuiCol.Border]: "#fff",
+                            [common_10.ImGuiCol.TextDisabled]: "#fff",
+                        },
+                    },
+                    marketSearchFilterWrapper: {
+                        flexDirection: "row",
+                        gap: { all: 8 },
+                        flexWrap: "wrap",
+                    },
+                    marketSearchFilter: {
+                        width: 60,
+                        colors: {
+                            [common_10.ImGuiCol.Button]: "#1E2025",
+                            [common_10.ImGuiCol.ButtonHovered]: "#1E2025",
+                            [common_10.ImGuiCol.ButtonActive]: "#1E2025",
+                            [common_10.ImGuiCol.Text]: "#777B84",
+                        },
+                        vars: {
+                            [common_10.ImGuiStyleVar.FrameRounding]: 5,
+                        },
+                    },
+                    marketSearchFilterActive: {
+                        width: 60,
+                        colors: {
+                            [common_10.ImGuiCol.Button]: "#fff",
+                            [common_10.ImGuiCol.ButtonHovered]: "#fff",
+                            [common_10.ImGuiCol.ButtonActive]: "#fff",
+                            [common_10.ImGuiCol.Text]: "#292A2C",
+                        },
+                        vars: {
+                            [common_10.ImGuiStyleVar.FrameRounding]: 5,
+                        },
+                    },
+                }), []);
+                // todo: move to dataService.ts ?
+                // const connect = useCallback(() => {
+                //     socketRef.current = new WebSocket("ws://localhost:4000");
+                //     socketRef.current.addEventListener("error", () => {
+                //         console.log("Connected to server");
+                //     });
+                //     socketRef.current.addEventListener("open", () => {
+                //         console.log("Connected to server");
+                //     });
+                //     socketRef.current.addEventListener("close", (ev) => {
+                //         try {
+                //             const reason = JSON.parse(ev.reason);
+                //             console.log(`Disconnected from server: ${reason.message}`);
+                //         } catch (error) {
+                //             console.log("Disconnected from server");
+                //         }
+                //     });
+                //     socketRef.current.addEventListener("message", (event) => {
+                //         const data = JSON.parse(event.data);
+                //         if (data.cryptoAssets) {
+                //             // todo: remove filtering
+                //             setCryptoAssets(
+                //                 data.cryptoAssets.filter((asset: any) => cryptoSymbols.includes(asset.symbol)),
+                //             );
+                //         } else if (data.cryptoQuote) {
+                //             dataService.addCryptoQuote(data.cryptoQuote);
+                //         } else if (data.latestCryptoQuotes) {
+                //             // console.log(data.latestCryptoQuotes);
+                //             Object.entries(data.latestCryptoQuotes).forEach(([symbol, cryptoQuote]) =>
+                //                 dataService.addCryptoQuote({ ...(cryptoQuote as any), S: symbol }),
+                //             );
+                //         } else if (data.cryptoSnapshots) {
+                //             dataService.addCryptoSnapshots(data.cryptoSnapshots);
+                //             // console.log(data.cryptoSnapshots);
+                //         } else if (data.latestCryptoBars) {
+                //             console.log(data.latestCryptoBars);
+                //         } else if (data.cryptoBars) {
+                //             dataService.addCryptoBars(data.cryptoBars);
+                //             // console.log(data.cryptoBars);
+                //         }
+                //     });
+                // }, [setCryptoAssets]);
+                // const sendMessage = useCallback((message: any) => {
+                //     if (socketRef.current) {
+                //         socketRef.current.send(JSON.stringify(message));
+                //     }
+                // }, []);
+                // const subscribeToLiveData = useCallback(
+                //     () =>
+                //         sendMessage({
+                //             passkey: "",
+                //             action: "subscribeForCryptoQuotes",
+                //             symbols,
+                //         }),
+                //     [sendMessage, symbols],
+                // );
+                // const getLatestQuotes = useCallback(() => {
+                //     const currentDate = new Date();
+                //     const end = currentDate.toISOString();
+                //     const start = subMinutes(currentDate, 1);
+                //     sendMessage({
+                //         action: "getQuotes",
+                //         symbols,
+                //         options: { start, end },
+                //     });
+                // }, [symbols]);
+                // const getCryptoQuotes = useCallback(() => {
+                //     const currentDate = new Date();
+                //     const end = currentDate.toISOString();
+                //     const start = subMinutes(currentDate, 1).toISOString();
+                //     const options: GetQuotesParams = {
+                //         start,
+                //         end,
+                //     };
+                //     sendMessage({
+                //         action: "getCryptoQuotes",
+                //         symbols,
+                //         options,
+                //     });
+                // }, [symbols]);
+                // const getCryptoBars = useCallback(() => {
+                //     const currentDate = new Date();
+                //     const end = currentDate.toISOString();
+                //     const start = subDays(currentDate, 30).toISOString();
+                //     const options: GetCryptoBarsParams = { start, end, timeframe: "1D" };
+                //     sendMessage({
+                //         action: "getCryptoBars",
+                //         symbols,
+                //         options,
+                //     });
+                // }, [symbols]);
+                // const getCryptoSnapshots = useCallback(
+                //     () =>
+                //         sendMessage({
+                //             action: "getCryptoSnapshots",
+                //             symbols,
+                //         }),
+                //     [symbols],
+                // );
+                // const getLatestCryptoQuotes = useCallback(
+                //     () =>
+                //         sendMessage({
+                //             action: "getLatestCryptoQuotes",
+                //             symbols,
+                //         }),
+                //     [symbols],
+                // );
+                // const getLatestCryptoBars = useCallback(
+                //     () =>
+                //         sendMessage({
+                //             action: "getLatestCryptoBars",
+                //             symbols,
+                //         }),
+                //     [symbols],
+                // );
+                // const getCryptoAssets = useCallback(
+                //     () =>
+                //         sendMessage({
+                //             action: "getCryptoAssets",
+                //             symbols,
+                //         }),
+                //     [symbols],
+                // );
+                const debugModeBtnClicked = react_11.useCallback(() => {
+                    widgetRegistratonService.setDebug(true);
+                }, []);
+                const onToggleItemSelection = react_11.useCallback((itemId, selected) => {
+                    setSelectedItemIds((selection) => {
+                        if (selected) {
+                            return [itemId];
+                        }
+                        else {
+                            return selection.filter((item) => item !== itemId);
+                        }
+                    });
+                }, []);
+                const onMarketSearchTextChange = react_11.useCallback((evt) => {
+                    console.log(evt.nativeEvent.value);
+                }, []);
+                // useEffect(() => {
+                // connect();
+                // setTimeout(() => {
+                //     getCryptoAssets();
+                // }, 1000);
+                // }, [connect, getCryptoAssets]);
+                const tabs = react_11.useMemo(() => ["Markets", "History"], []);
+                const Component = componentMap[selectedItemIds[0]];
+                return (_jsxs(XFrames_12.XFrames.Node, { root: true, style: styleSheet.rootNode, children: [_jsxs(XFrames_12.XFrames.Node, { style: styleSheet.mainLayoutNode, children: [_jsx(Sidebar_1.Sidebar, {}), _jsxs(XFrames_12.XFrames.Node, { style: styleSheet.mainNode, children: [_jsx(XFrames_12.XFrames.Node, { style: styleSheet.mainTitleNode, children: _jsx(XFrames_12.XFrames.UnformattedText, { text: "Trade", style: styleSheet.mainTitle }) }), _jsxs(XFrames_12.XFrames.Node, { style: styleSheet.contentNode, children: [_jsx(CryptoSymbolBlock_1.CryptoSymbolBlock, { symbol: "BTC/USD" }), _jsx(Tabs_1.Tabs, { tabs: tabs, selectedTabIndex: selectedTabIndex, onSelectedTabChange: setSelectedTabIndex }), _jsxs(XFrames_12.XFrames.Node, { style: styleSheet.tabContent, children: [_jsx(XFrames_12.XFrames.InputText, { onChange: onMarketSearchTextChange, hint: `${common_10.faIconMap["magnifying-glass"]} SEARCH MARKETS`, style: styleSheet.marketSearchInput, hoverStyle: styleSheet.marketSearchInputHover }), _jsxs(XFrames_12.XFrames.Node, { style: styleSheet.marketSearchFilterWrapper, children: [_jsx(XFrames_12.XFrames.Button, { label: common_10.faIconMap["star"], style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), _jsx(XFrames_12.XFrames.Button, { label: "ALL", style: styleSheet.marketSearchFilterActive, hoverStyle: styleSheet.marketSearchFilterActive }), _jsx(XFrames_12.XFrames.Button, { label: "TOP", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), _jsx(XFrames_12.XFrames.Button, { label: "BTC", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), _jsx(XFrames_12.XFrames.Button, { label: "ETH", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), _jsx(XFrames_12.XFrames.Button, { label: "USD", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), _jsx(XFrames_12.XFrames.Button, { label: "USDC", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), _jsx(XFrames_12.XFrames.Button, { label: "DAI", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), _jsx(XFrames_12.XFrames.Button, { label: "MKR", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive })] })] })] })] })] }), _jsx(XFrames_12.XFrames.Node, { style: styleSheet.sidebarNode }), _jsx(XFrames_12.XFrames.Node, { style: styleSheet.debugButton, children: _jsx(XFrames_12.XFrames.Button, { label: common_10.faIconMap.bug, onClick: debugModeBtnClicked }) })] }));
+            });
+        }
+    };
+});
+System.register("App", ["react/jsx-runtime", "lib/XFrames", "components/TradingGuiDemo/TradingGuiDemo"], function (exports_19, context_19) {
+    "use strict";
+    var jsx_runtime_13, XFrames_13, TradingGuiDemo_1, App;
+    var __moduleName = context_19 && context_19.id;
+    return {
+        setters: [
+            function (jsx_runtime_13_1) {
+                jsx_runtime_13 = jsx_runtime_13_1;
+            },
+            function (XFrames_13_1) {
+                XFrames_13 = XFrames_13_1;
+            },
+            function (TradingGuiDemo_1_1) {
+                TradingGuiDemo_1 = TradingGuiDemo_1_1;
+            }
+        ],
+        execute: function () {
+            exports_19("App", App = () => {
+                return (_jsx(XFrames_13.XFrames.Node, { root: true, style: { width: "100%", height: "100%" }, children: _jsx(TradingGuiDemo_1.TradingGuiDemo, {}) }));
+            });
+        }
+    };
+});
+System.register("lib/render", ["react/jsx-runtime", "@xframes/common", "./xframes.node"], function (exports_20, context_20) {
+    "use strict";
+    var jsx_runtime_14, common_11, xframes, ReactFabricProd, render;
+    var __moduleName = context_20 && context_20.id;
+    return {
+        setters: [
+            function (jsx_runtime_14_1) {
+                jsx_runtime_14 = jsx_runtime_14_1;
+            },
+            function (common_11_1) {
+                common_11 = common_11_1;
+            },
+            function (xframes_1) {
+                xframes = xframes_1;
+            }
+        ],
+        execute: function () {
+            exports_20("ReactFabricProd", ReactFabricProd = common_11.ReactFabricProdInitialiser(common_11.ReactNativePrivateInterface));
+            exports_20("render", render = (EntryPointComponent, assetsBasePath, fontDefs, theme) => {
+                const onInit = () => {
+                    ReactFabricProd.render(_jsx(common_11.WidgetRegistrationServiceContext.Provider, { value: widgetRegistrationService, children: _jsx(EntryPointComponent, {}) }), 0, // containerTag,
+                    () => {
+                        // console.log("initialised");
+                    }, 1);
+                };
+                const onTextChange = (id, value) => {
+                    const rootNodeID = id;
+                    const topLevelType = "onChange";
+                    const nativeEventParam = { value };
+                    common_11.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(rootNodeID, topLevelType, nativeEventParam);
+                };
+                const onComboChange = (id, value) => {
+                    const rootNodeID = id;
+                    const topLevelType = "onChange";
+                    const nativeEventParam = { value };
+                    common_11.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(rootNodeID, topLevelType, nativeEventParam);
+                };
+                const onNumericValueChange = (id, value) => {
+                    const rootNodeID = id;
+                    const topLevelType = "onChange";
+                    const nativeEventParam = { value };
+                    common_11.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(rootNodeID, topLevelType, nativeEventParam);
+                };
+                const onMultiValueChange = (id, values) => {
+                    const rootNodeID = id;
+                    const topLevelType = "onChange";
+                    const nativeEventParam = { values };
+                    common_11.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(rootNodeID, topLevelType, nativeEventParam);
+                };
+                const onBooleanValueChange = (id, value) => {
+                    const rootNodeID = id;
+                    const topLevelType = "onChange";
+                    const nativeEventParam = { value };
+                    common_11.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(rootNodeID, topLevelType, nativeEventParam);
+                };
+                const onClick = (id) => {
+                    const rootNodeID = id;
+                    const topLevelType = "onClick";
+                    common_11.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(rootNodeID, topLevelType, {
+                        value: "clicked",
+                    });
+                };
+                xframes.init(assetsBasePath, JSON.stringify(fontDefs), JSON.stringify(theme), onInit, onTextChange, onComboChange, onNumericValueChange, onBooleanValueChange, onMultiValueChange, onClick);
+                const widgetRegistrationService = new common_11.WidgetRegistrationService(xframes);
+                common_11.ReactNativePrivateInterface.nativeFabricUIManager.init(xframes, widgetRegistrationService);
+                let flag = true;
+                (function keepProcessRunning() {
+                    setTimeout(() => flag && keepProcessRunning(), 1000);
+                })();
+            });
+        }
+    };
+});
+System.register("index", ["App", "themes", "lib/render"], function (exports_21, context_21) {
+    "use strict";
+    var App_1, themes_4, render_1, fontDefs, assetsBasePath;
+    var __moduleName = context_21 && context_21.id;
+    return {
+        setters: [
+            function (App_1_1) {
+                App_1 = App_1_1;
+            },
+            function (themes_4_1) {
+                themes_4 = themes_4_1;
+            },
+            function (render_1_1) {
+                render_1 = render_1_1;
+            }
+        ],
+        execute: function () {
+            fontDefs = {
+                defs: [
+                    { name: "roboto-regular", sizes: [16, 18, 20, 24, 28, 32, 36, 48] },
+                    { name: "roboto-bold", sizes: [16, 18, 20, 24, 28, 32, 36, 48] },
+                    // { name: "roboto-light", sizes: [12, 14, 16, 18, 20, 24, 28, 32, 36, 48] },
+                    { name: "roboto-mono-regular", sizes: [14, 16] },
+                ]
+                    .map(({ name, sizes }) => sizes.map((size) => ({ name, size })))
+                    .flat(),
+            };
+            assetsBasePath = "../../assets";
+            render_1.render(App_1.App, assetsBasePath, fontDefs, themes_4.theme2);
+        }
+    };
+});
+System.register("lib/index", ["lib/render", "lib/XFrames"], function (exports_22, context_22) {
+    "use strict";
+    var render_2, XFrames_14;
+    var __moduleName = context_22 && context_22.id;
+    return {
+        setters: [
+            function (render_2_1) {
+                render_2 = render_2_1;
+            },
+            function (XFrames_14_1) {
+                XFrames_14 = XFrames_14_1;
+            }
+        ],
+        execute: function () {
+            exports_22("render", render_2.render);
+            exports_22("XFrames", XFrames_14.XFrames);
+        }
+    };
+});