@xframes/node 0.0.12 → 0.0.13

package/dist/index.js

@@ -1,1543 +1,17 @@
-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);
-        }
-    };
-});
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const App_1 = require("./App");
+const themes_1 = require("./themes");
+const render_1 = require("./lib/render");
+const 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(),
+};
+const assetsBasePath = "../../assets";
+(0, render_1.render)(App_1.App, assetsBasePath, fontDefs, themes_1.theme2);