@xframes/node 0.0.13 → 0.0.15

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@xframes/node",
-    "version": "0.0.13",
+    "version": "0.0.15",
     "description": "DOM-less, GPU-accelerated GUI development for Node.js",
     "main": "dist/index.js",
     "files": [
-        "dist/*",
+        "dist/lib/*.*",
         "CMakeLists.txt",
         "vcpkg.json"
     ],
@@ -25,7 +25,7 @@
         "tsc": "rimraf ./dist && tsc --project ./tsconfig-build.json && yarn copy-artifacts-to-dist-folder",
         "tsup": "tsup --format cjs --external react",
         "copy-artifacts-to-lib-folder": "cpy --flat ./build/Release/*.* ./src/lib",
-        "copy-artifacts-to-dist-folder": "cpy --flat ./build/Release/*.* ./dist",
+        "copy-artifacts-to-dist-folder": "cpy --flat ./build/Release/*.* ./dist/lib",
         "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
         "cpp:compile": "cmake-js compile && yarn copy-artifacts-to-lib-folder",
         "cpp:generate-module": "prebuild --strip --backend cmake-js -t 9 -r napi --include-regex \"\\.(node|dll|o)$\" --tag-prefix xframes-node- --verbose",

package/dist/App.d.ts

@@ -1 +0,0 @@
-export declare const App: () => import("react/jsx-runtime").JSX.Element;

package/dist/App.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.App = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const XFrames_1 = require("./lib/XFrames");
-const TradingGuiDemo_1 = require("./components/TradingGuiDemo/TradingGuiDemo");
-const App = () => {
-    return ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { root: true, style: { width: "100%", height: "100%" }, children: (0, jsx_runtime_1.jsx)(TradingGuiDemo_1.TradingGuiDemo, {}) }));
-};
-exports.App = App;

package/dist/components/TradingGuiDemo/CryptoAssetPanels/CryptoAssetPanels.d.ts

@@ -1,3 +0,0 @@
-type Props = {};
-export declare const CryptoAssetPanels: ({}: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TradingGuiDemo/CryptoAssetPanels/CryptoAssetPanels.js

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CryptoAssetPanels = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const store_1 = require("../store");
-const CryptoQuotePrice_1 = require("../CryptoQuotePrice/CryptoQuotePrice");
-const common_1 = require("@xframes/common");
-const XFrames_1 = require("src/lib/XFrames");
-const CryptoAssetPanels = ({}) => {
-    const cryptoAssets = (0, store_1.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 = (0, react_1.useMemo)(() => common_1.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 ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.mainWrapperNode, children: cryptoAssets.map((asset) => {
-            return ((0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.asset, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { style: styleSheet.symbol, text: asset.symbol }), (0, jsx_runtime_1.jsx)(CryptoQuotePrice_1.CryptoQuotePrice, { symbol: asset.symbol })] }, asset.id));
-        }) }));
-};
-exports.CryptoAssetPanels = CryptoAssetPanels;

package/dist/components/TradingGuiDemo/CryptoAssetsList/CryptoAssetsList.d.ts

@@ -1,3 +0,0 @@
-type Props = {};
-export declare const CryptoAssetsList: ({}: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TradingGuiDemo/CryptoAssetsList/CryptoAssetsList.js

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CryptoAssetsList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const dataServiceContext_1 = require("../dataServiceContext");
-const XFrames_1 = require("src/lib/XFrames");
-const CryptoAssetsList = ({}) => {
-    const dataService = (0, dataServiceContext_1.useDataService)();
-    const tableRef = (0, react_1.useRef)(null);
-    const tableColumns = (0, react_1.useMemo)(() => [
-        {
-            heading: "Symbol",
-            fieldId: "symbol",
-        },
-        {
-            heading: "ASK",
-            fieldId: "askPrice",
-        },
-        {
-            heading: "Change",
-            fieldId: "askChange",
-        },
-        {
-            heading: "BID",
-            fieldId: "bidPrice",
-        },
-        {
-            heading: "Change",
-            fieldId: "bidChange",
-        },
-    ], []);
-    (0, react_1.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 (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Table, { ref: tableRef, columns: tableColumns });
-};
-exports.CryptoAssetsList = CryptoAssetsList;

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoCandlestickPlot.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    symbol: string;
-};
-export declare const CryptoCandlestickPlot: ({ symbol }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoCandlestickPlot.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CryptoCandlestickPlot = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const rxjs_1 = require("rxjs");
-const dataServiceContext_1 = require("../dataServiceContext");
-const XFrames_1 = require("src/lib/XFrames");
-const CryptoCandlestickPlot = ({ symbol }) => {
-    const dataService = (0, dataServiceContext_1.useDataService)();
-    const plotRef = (0, react_1.useRef)(null);
-    // const [axisAutoFit, setAxisAutoFit] = useState(true);
-    (0, react_1.useEffect)(() => {
-        const subscription = dataService
-            .getCryptoBarDatasets()
-            .pipe((0, rxjs_1.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 ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.PlotCandlestick, { ref: plotRef, style: { width: "100%", height: 400 } }));
-};
-exports.CryptoCandlestickPlot = CryptoCandlestickPlot;

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoCandlestickPlots.d.ts

@@ -1,3 +0,0 @@
-type Props = {};
-export declare const CryptoCandlestickPlots: ({}: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoCandlestickPlots.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CryptoCandlestickPlots = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const store_1 = require("../store");
-const CryptoCandlestickPlot_1 = require("./CryptoCandlestickPlot");
-const XFrames_1 = require("src/lib/XFrames");
-const CryptoCandlestickPlots = ({}) => {
-    const symbols = (0, store_1.useStore)((state) => state.symbols);
-    return ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: {
-            width: "100%",
-            height: "100%",
-            flexDirection: "column",
-            gap: { row: 5 },
-        }, children: symbols.map((sym) => ((0, jsx_runtime_1.jsx)(CryptoCandlestickPlot_1.CryptoCandlestickPlot, { symbol: sym }, sym))) }));
-};
-exports.CryptoCandlestickPlots = CryptoCandlestickPlots;

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoLinePlot.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    symbol: string;
-};
-export declare const CryptoLinePlot: ({ symbol }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoLinePlot.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CryptoLinePlot = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const dataServiceContext_1 = require("../dataServiceContext");
-const common_1 = require("@xframes/common");
-const rxjs_1 = require("rxjs");
-const XFrames_1 = require("src/lib/XFrames");
-const CryptoLinePlot = ({ symbol }) => {
-    const dataService = (0, dataServiceContext_1.useDataService)();
-    const plotRef = (0, react_1.useRef)(null);
-    // const [axisAutoFit, setAxisAutoFit] = useState(true);
-    (0, react_1.useEffect)(() => {
-        const subscription = dataService
-            .getCryptoQuotes()
-            .pipe((0, rxjs_1.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 ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.PlotLine, { xAxisScale: common_1.ImPlotScale.Time, ref: plotRef, style: { width: "100%", height: 400 } }));
-};
-exports.CryptoLinePlot = CryptoLinePlot;

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoLinePlots.d.ts

@@ -1,3 +0,0 @@
-type Props = {};
-export declare const CryptoLinePlots: ({}: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoLinePlots.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CryptoLinePlots = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const store_1 = require("../store");
-const CryptoLinePlot_1 = require("./CryptoLinePlot");
-const XFrames_1 = require("src/lib/XFrames");
-const CryptoLinePlots = ({}) => {
-    const symbols = (0, store_1.useStore)((state) => state.symbols);
-    return ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: {
-            width: "100%",
-            height: "100%",
-            flexDirection: "column",
-            gap: { row: 5 },
-        }, children: symbols.map((sym) => ((0, jsx_runtime_1.jsx)(CryptoLinePlot_1.CryptoLinePlot, { symbol: sym }, sym))) }));
-};
-exports.CryptoLinePlots = CryptoLinePlots;

package/dist/components/TradingGuiDemo/CryptoQuotePrice/CryptoQuotePrice.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    symbol: string;
-};
-export declare const CryptoQuotePrice: ({ symbol }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TradingGuiDemo/CryptoQuotePrice/CryptoQuotePrice.js

@@ -1,76 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CryptoQuotePrice = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const rxjs_1 = require("rxjs");
-const common_1 = require("@xframes/common");
-const dataServiceContext_1 = require("../dataServiceContext");
-const XFrames_1 = require("src/lib/XFrames");
-const themes_1 = require("src/themes");
-const CryptoQuotePrice = ({ symbol }) => {
-    const [data, setData] = (0, react_1.useState)({
-        lastUpdated: "n/a",
-    });
-    // const [lastUpdated, setLastUpdated] = useState<string>("n/a");
-    const dataService = (0, dataServiceContext_1.useDataService)();
-    (0, react_1.useEffect)(() => {
-        const subscription = dataService
-            .getCryptoQuotes()
-            .pipe((0, rxjs_1.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 = (0, react_1.useMemo)(() => common_1.RWStyleSheet.create({
-        pricesWrapper: {
-            alignSelf: "center",
-            flexDirection: "row",
-            gap: { column: 5 },
-        },
-        price: {
-            width: 100,
-            height: "auto",
-            // borderColor: "#000",
-            // borderThickness: 1,
-            alignItems: "center",
-        },
-        ask: {
-            colors: {
-                [common_1.ImGuiCol.Text]: themes_1.theme2Colors.red,
-            },
-        },
-        bid: {
-            colors: {
-                [common_1.ImGuiCol.Text]: themes_1.theme2Colors.green,
-            },
-        },
-    }), []);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.pricesWrapper, children: [(0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.price, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { text: "ASK", style: styleSheet.ask }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { text: typeof data?.quote?.AskPrice === "number"
-                                ? data?.quote?.AskPrice.toFixed(6)
-                                : "n/a", style: styleSheet.ask })] }), (0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.price, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { text: "BID", style: styleSheet.bid }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { text: typeof data?.quote?.BidPrice === "number"
-                                ? data?.quote?.BidPrice.toFixed(6)
-                                : "n/a", style: styleSheet.bid })] })] }) }));
-};
-exports.CryptoQuotePrice = CryptoQuotePrice;

package/dist/components/TradingGuiDemo/CryptoSymbolBlock/CryptoSymbolBlock.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    symbol: string;
-};
-export declare const CryptoSymbolBlock: ({ symbol }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TradingGuiDemo/CryptoSymbolBlock/CryptoSymbolBlock.js

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CryptoSymbolBlock = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const common_1 = require("@xframes/common");
-const CryptoSymbolPair_1 = require("../CryptoSymbolPairs/CryptoSymbolPair");
-const XFrames_1 = require("src/lib/XFrames");
-const CryptoSymbolBlock = ({ symbol }) => {
-    const price = "40,730.00";
-    const currency = "USD";
-    const trend = "(+2.50%)";
-    const styleSheet = (0, react_1.useMemo)(() => common_1.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_1.ImGuiCol.Text]: "#A9B5C0" },
-        },
-        price: {
-            font: { name: "roboto-bold", size: 20 },
-            colors: { [common_1.ImGuiCol.Text]: "#D9D9D9" },
-        },
-        currency: {
-            font: { name: "roboto-bold", size: 20 },
-            colors: { [common_1.ImGuiCol.Text]: "#A9B5C0" },
-        },
-        trend: {
-            font: { name: "roboto-bold", size: 20 },
-            colors: { [common_1.ImGuiCol.Text]: "#239465" },
-        },
-    }), []);
-    return ((0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.block, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.symbolLogos, children: (0, jsx_runtime_1.jsx)(CryptoSymbolPair_1.CryptoSymbolPair, { symbol: symbol }) }), (0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.info, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { style: styleSheet.symbol, text: symbol }), (0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.priceRow, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { style: styleSheet.price, text: price }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { style: styleSheet.currency, text: currency }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { style: styleSheet.trend, text: trend })] })] })] }));
-};
-exports.CryptoSymbolBlock = CryptoSymbolBlock;

package/dist/components/TradingGuiDemo/CryptoSymbolPairs/CryptoSymbolPair.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    symbol: string;
-};
-export declare const CryptoSymbolPair: ({ symbol }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TradingGuiDemo/CryptoSymbolPairs/CryptoSymbolPair.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CryptoSymbolPair = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const common_1 = require("@xframes/common");
-const XFrames_1 = require("src/lib/XFrames");
-const CryptoSymbolPair = ({ symbol }) => {
-    const styleSheet = (0, react_1.useMemo)(() => common_1.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 ((0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.symbolLogoPair, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Image, { url: "bitcoin-btc-logo_gqud0f.png", style: styleSheet.symbolLogoLeft }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Image, { url: "77-771550_dollar-currency-money-finance-usd-us-dollar-dollar_apzzg2.png", style: styleSheet.symbolLogoRight })] }));
-};
-exports.CryptoSymbolPair = CryptoSymbolPair;

package/dist/components/TradingGuiDemo/Sidebar/Sidebar.d.ts

@@ -1 +0,0 @@
-export declare const Sidebar: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/TradingGuiDemo/Sidebar/Sidebar.js

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sidebar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const common_1 = require("@xframes/common");
-const XFrames_1 = require("src/lib/XFrames");
-const Sidebar = () => {
-    const styleSheet = (0, react_1.useMemo)(() => common_1.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_1.ImGuiCol.ButtonHovered]: "#001033",
-                [common_1.ImGuiCol.ButtonActive]: "#001033",
-            },
-            vars: { [common_1.ImGuiStyleVar.FrameRounding]: 24 },
-        },
-        iconActive: {
-            width: 48,
-            height: 48,
-            font: { name: "roboto-regular", size: 36 },
-            vars: { [common_1.ImGuiStyleVar.FrameRounding]: 24 },
-            colors: {
-                [common_1.ImGuiCol.Text]: "#588AF5",
-                [common_1.ImGuiCol.Button]: "#001033",
-                [common_1.ImGuiCol.ButtonHovered]: "#001033",
-                [common_1.ImGuiCol.ButtonActive]: "#001033",
-            },
-        },
-    }), []);
-    return ((0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.sidebarNode, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.sideBarItem, children: (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { text: common_1.faIconMap.otter, style: styleSheet.logo }) }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.sideBarItem, children: (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: common_1.faIconMap["arrow-trend-up"], style: styleSheet.iconActive, hoverStyle: styleSheet.iconActive }) }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.sideBarItem, children: (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: common_1.faIconMap["wallet"], style: styleSheet.icon, hoverStyle: styleSheet.iconActive }) }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.sideBarItem, children: (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: common_1.faIconMap["chart-pie"], style: styleSheet.icon, hoverStyle: styleSheet.iconActive }) })] }));
-};
-exports.Sidebar = Sidebar;

package/dist/components/TradingGuiDemo/Tabs/Tabs.d.ts

@@ -1,7 +0,0 @@
-type Props = {
-    tabs: string[];
-    selectedTabIndex: number;
-    onSelectedTabChange: (index: number) => void;
-};
-export declare const Tabs: ({ tabs, selectedTabIndex, onSelectedTabChange, }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TradingGuiDemo/Tabs/Tabs.js

@@ -1,95 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tabs = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const common_1 = require("@xframes/common");
-const XFrames_1 = require("src/lib/XFrames");
-const themes_1 = require("src/themes");
-// todo: fix 1px vertical shift on hover
-const Tabs = ({ tabs, selectedTabIndex, onSelectedTabChange, }) => {
-    // const [selectedItemIds, setSelectedItemIds] = useState("cryptoAssetPanels");
-    const styleSheet = (0, react_1.useMemo)(() => common_1.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_1.theme2Colors.black,
-                thickness: 1,
-            },
-            borderRight: {
-                color: "#1C1E22",
-                thickness: 1,
-            },
-            position: {
-                top: 1, // todo: hack
-            },
-        },
-        tabText: {
-            font: { name: "roboto-bold", size: 18 },
-        },
-    }), []);
-    return ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.tabs, children: tabs.map((tab, index) => {
-            const isSelected = selectedTabIndex === index;
-            return ((0, jsx_runtime_1.jsx)(XFrames_1.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: (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { text: tab, style: styleSheet.tabText }) }, tab));
-        }) }));
-};
-exports.Tabs = Tabs;

package/dist/components/TradingGuiDemo/TradingGuiDemo.d.ts

@@ -1 +0,0 @@
-export declare const TradingGuiDemo: () => import("react/jsx-runtime").JSX.Element;