@signals-protocol/v1-sdk 1.0.0 → 1.2.0

package/dist/share/distribution-image.js

@@ -0,0 +1,294 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildDistributionVNode = buildDistributionVNode;
+const h_1 = require("./h");
+const assets_1 = require("./assets");
+const distribution_share_utils_1 = require("./distribution-share-utils");
+const BAR_COLORS = {
+    peak: { bg: "#F7931A", opacity: 0.9 },
+    high: { bg: "#2d88ff", opacity: 0.5 },
+    mid: { bg: "#5a6a7a", opacity: 0.3 },
+    low: { bg: "#3a4555", opacity: 0.15 },
+};
+function formatPrice(price) {
+    return "$" + Math.round(price).toLocaleString("en-US");
+}
+function buildDistributionVNode(input) {
+    const { distribution, minTick, maxTick, tickSpacing, closingPriceDate, currentPrice, } = input;
+    const maxProb = Math.max(...distribution.map((d) => d.probability));
+    const [peakLo, peakHi] = (0, distribution_share_utils_1.getPeakRange)(distribution, tickSpacing);
+    const xTicks = (0, distribution_share_utils_1.generateXAxisTicks)(minTick, maxTick);
+    const range = maxTick - minTick;
+    // Build histogram bars
+    const bars = distribution.map((tick) => {
+        const category = (0, distribution_share_utils_1.getBarCategory)(tick.probability, maxProb);
+        const height = (0, distribution_share_utils_1.getSqrtHeight)(tick.probability, maxProb);
+        const { bg, opacity } = BAR_COLORS[category];
+        const isPeak = category === "peak";
+        if (isPeak) {
+            return (0, h_1.h)("div", {
+                style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    flex: 1,
+                    minWidth: 0,
+                    height: `${height}%`,
+                    alignItems: "center",
+                    justifyContent: "flex-end",
+                },
+            }, (0, h_1.h)("span", {
+                style: {
+                    fontSize: 14,
+                    fontWeight: 700,
+                    color: "#F7931A",
+                    marginBottom: 4,
+                },
+            }, `${(tick.probability * 100).toFixed(1)}%`), (0, h_1.h)("div", {
+                style: {
+                    width: "100%",
+                    flex: 1,
+                    background: bg,
+                    opacity,
+                    borderRadius: "3px 3px 0 0",
+                },
+            }));
+        }
+        return (0, h_1.h)("div", {
+            style: {
+                flex: 1,
+                minWidth: 0,
+                height: `${height}%`,
+                display: "flex",
+            },
+        }, (0, h_1.h)("div", {
+            style: {
+                width: "100%",
+                height: "100%",
+                background: bg,
+                opacity,
+                borderRadius: "3px 3px 0 0",
+            },
+        }));
+    });
+    // X-axis labels
+    const xLabels = xTicks.map((price) => {
+        const pos = ((price - minTick) / range) * 100;
+        return (0, h_1.h)("div", {
+            style: {
+                position: "absolute",
+                left: `${pos}%`,
+                fontSize: 15,
+                fontWeight: 500,
+                color: "rgba(255,255,255,0.5)",
+                display: "flex",
+            },
+        }, (0, distribution_share_utils_1.formatXTick)(price));
+    });
+    return (0, h_1.h)("div", {
+        style: {
+            width: 1200,
+            height: 630,
+            display: "flex",
+            flexDirection: "column",
+            fontFamily: "Inter",
+            background: "linear-gradient(140deg, #0a1120, #0d1730)",
+            padding: "40px 48px 28px",
+        },
+    }, 
+    // Main row
+    (0, h_1.h)("div", {
+        style: { display: "flex", flex: 1, gap: 40, minHeight: 0 },
+    }, 
+    // Left panel
+    (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            width: 340,
+            flexShrink: 0,
+        },
+    }, 
+    // Logo
+    (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            marginBottom: 28,
+        },
+    }, (0, h_1.h)("img", {
+        src: assets_1.SIGNALS_LOGO_URI,
+        width: 34,
+        height: 32,
+        style: { display: "flex" },
+    }), (0, h_1.h)("span", {
+        style: { fontSize: 30, fontWeight: 700, color: "#1444c2" },
+    }, "Signals")), 
+    // Market question
+    (0, h_1.h)("div", {
+        style: {
+            fontSize: 28,
+            color: "#fff",
+            lineHeight: 1.3,
+            marginBottom: 16,
+            fontWeight: 700,
+            display: "flex",
+        },
+    }, `BTC Price on ${closingPriceDate}?`), 
+    // Stats
+    (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 20,
+            marginTop: 20,
+        },
+    }, 
+    // Most Likely Price
+    (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+        },
+    }, (0, h_1.h)("div", {
+        style: {
+            fontSize: 14,
+            letterSpacing: "0.05em",
+            textTransform: "uppercase",
+            color: "rgba(255,255,255,0.5)",
+            marginBottom: 4,
+            display: "flex",
+        },
+    }, "Most Likely Price"), (0, h_1.h)("div", {
+        style: {
+            fontSize: 40,
+            lineHeight: 1.1,
+            color: "#F7931A",
+            fontWeight: 700,
+            display: "flex",
+        },
+    }, (0, distribution_share_utils_1.formatDistributionPriceRange)(peakLo, peakHi))), 
+    // Current Price
+    ...(currentPrice != null
+        ? [
+            (0, h_1.h)("div", {
+                style: {
+                    display: "flex",
+                    flexDirection: "column",
+                },
+            }, (0, h_1.h)("div", {
+                style: {
+                    fontSize: 14,
+                    letterSpacing: "0.05em",
+                    textTransform: "uppercase",
+                    color: "rgba(255,255,255,0.5)",
+                    marginBottom: 4,
+                    display: "flex",
+                },
+            }, "Current Price"), (0, h_1.h)("div", {
+                style: {
+                    fontSize: 28,
+                    lineHeight: 1.1,
+                    color: "#fff",
+                    fontWeight: 700,
+                    display: "flex",
+                },
+            }, formatPrice(currentPrice))),
+        ]
+        : [])), 
+    // Spacer
+    (0, h_1.h)("div", { style: { flex: 1, display: "flex" } })), 
+    // Right panel — histogram
+    (0, h_1.h)("div", {
+        style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+        },
+    }, 
+    // Chart subtitle
+    (0, h_1.h)("div", {
+        style: {
+            textAlign: "right",
+            fontSize: 14,
+            color: "rgba(255,255,255,0.5)",
+            marginBottom: 6,
+            flexShrink: 0,
+            display: "flex",
+            justifyContent: "flex-end",
+        },
+    }, `$${tickSpacing} ranges`), 
+    // Histogram area
+    (0, h_1.h)("div", {
+        style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            position: "relative",
+        },
+    }, 
+    // Bars
+    (0, h_1.h)("div", {
+        style: {
+            flex: 1,
+            display: "flex",
+            alignItems: "flex-end",
+            gap: 1,
+            paddingTop: 22,
+        },
+    }, ...bars), 
+    // Current price vertical marker
+    ...(currentPrice != null &&
+        currentPrice >= minTick &&
+        currentPrice <= maxTick
+        ? [
+            (0, h_1.h)("div", {
+                style: {
+                    position: "absolute",
+                    left: `${((currentPrice - minTick) / range) * 100}%`,
+                    top: 0,
+                    bottom: 28,
+                    width: 2,
+                    background: "rgba(255,255,255,0.6)",
+                    display: "flex",
+                },
+            }),
+            (0, h_1.h)("div", {
+                style: {
+                    position: "absolute",
+                    left: `${((currentPrice - minTick) / range) * 100}%`,
+                    top: 2,
+                    fontSize: 11,
+                    fontWeight: 700,
+                    color: "rgba(255,255,255,0.7)",
+                    display: "flex",
+                    marginLeft: 6,
+                },
+            }, "Current"),
+        ]
+        : []), 
+    // X-axis
+    (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            position: "relative",
+            borderTop: "1px solid rgba(255,255,255,0.1)",
+            height: 28,
+            paddingTop: 8,
+        },
+    }, ...xLabels)))), 
+    // Footer
+    (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingTop: 10,
+            flexShrink: 0,
+        },
+    }, (0, h_1.h)("span", {
+        style: { fontSize: 14, color: "rgba(255,255,255,0.5)" },
+    }, "@signalswtf"), (0, h_1.h)("span", {
+        style: { fontSize: 14, color: "rgba(255,255,255,0.5)" },
+    }, "signals.wtf")));
+}

package/dist/share/distribution-share-utils.d.ts

@@ -0,0 +1,8 @@
+import type { BarCategory, PriceTick } from "./types";
+export declare function getBarCategory(prob: number, maxProb: number): BarCategory;
+export declare function getSqrtHeight(prob: number, maxProb: number): number;
+export declare function generateXAxisTicks(minTick: number, maxTick: number, targetCount?: number): number[];
+export declare function formatXTick(price: number): string;
+export declare function getPeakRange(distribution: PriceTick[], tickSpacing: number): [number, number];
+/** Distribution-specific price range format (em-dash, no decimals) */
+export declare function formatDistributionPriceRange(lo: number, hi: number): string;

package/dist/share/distribution-share-utils.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBarCategory = getBarCategory;
+exports.getSqrtHeight = getSqrtHeight;
+exports.generateXAxisTicks = generateXAxisTicks;
+exports.formatXTick = formatXTick;
+exports.getPeakRange = getPeakRange;
+exports.formatDistributionPriceRange = formatDistributionPriceRange;
+function getBarCategory(prob, maxProb) {
+    if (prob === maxProb)
+        return "peak";
+    if (prob > maxProb * 0.4)
+        return "high";
+    if (prob > 0.001)
+        return "mid";
+    return "low";
+}
+function getSqrtHeight(prob, maxProb) {
+    if (prob <= 0.001)
+        return 0.8;
+    return Math.max(Math.sqrt(prob / maxProb) * 100, 1.5);
+}
+const TICK_STEPS = [500, 1000, 2000, 5000, 10000, 20000];
+function generateXAxisTicks(minTick, maxTick, targetCount = 6) {
+    const range = maxTick - minTick;
+    let bestStep = 2000;
+    let bestDiff = Infinity;
+    for (const step of TICK_STEPS) {
+        const count = Math.floor(range / step);
+        const diff = Math.abs(count - targetCount);
+        if (diff < bestDiff) {
+            bestDiff = diff;
+            bestStep = step;
+        }
+    }
+    const ticks = [];
+    const firstTick = Math.ceil(minTick / bestStep) * bestStep;
+    for (let t = firstTick; t <= maxTick; t += bestStep) {
+        ticks.push(t);
+    }
+    return ticks;
+}
+function formatXTick(price) {
+    return `$${Math.round(price / 1000)}K`;
+}
+function getPeakRange(distribution, tickSpacing) {
+    let peakIdx = 0;
+    let maxProb = -1;
+    for (let i = 0; i < distribution.length; i++) {
+        if (distribution[i].probability > maxProb) {
+            maxProb = distribution[i].probability;
+            peakIdx = i;
+        }
+    }
+    const halfSpacing = tickSpacing / 2;
+    const peakPrice = distribution[peakIdx].price;
+    return [peakPrice - halfSpacing, peakPrice + halfSpacing];
+}
+/** Distribution-specific price range format (em-dash, no decimals) */
+function formatDistributionPriceRange(lo, hi) {
+    const fmt = (v) => "$" + v.toLocaleString("en-US");
+    return `${fmt(lo)}\u2013${fmt(hi)}`;
+}

package/dist/share/format.d.ts

@@ -0,0 +1,6 @@
+export declare function formatUSDC(raw: string): string;
+export declare function formatPrice(tick: number): string;
+export declare function formatPriceRange(lower: number, upper: number): string;
+export declare function percForm(value: number): string;
+export declare function formatUsdPnl(value: number): string;
+export declare function getPnlColor(pnl: number, neutral: string): string;

package/dist/share/format.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatUSDC = formatUSDC;
+exports.formatPrice = formatPrice;
+exports.formatPriceRange = formatPriceRange;
+exports.percForm = percForm;
+exports.formatUsdPnl = formatUsdPnl;
+exports.getPnlColor = getPnlColor;
+const USDC_DECIMALS = 6;
+function formatUSDC(raw) {
+    const num = Number(raw) / 10 ** USDC_DECIMALS;
+    if (num >= 1000)
+        return ("$" +
+            num.toLocaleString("en-US", {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 0,
+            }));
+    return ("$" +
+        num.toLocaleString("en-US", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }));
+}
+function formatPrice(tick) {
+    return "$" + tick.toLocaleString("en-US");
+}
+function formatPriceRange(lower, upper) {
+    const formatToK = (value) => {
+        if (value >= 1000)
+            return `$${(value / 1000).toFixed(1)}K`;
+        return `$${value}`;
+    };
+    return `${formatToK(lower)} - ${formatToK(upper)}`;
+}
+function percForm(value) {
+    const perc = Math.round(value * 10000) / 100;
+    return (perc.toLocaleString(undefined, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+    }) + "%");
+}
+function formatUsdPnl(value) {
+    const abs = Math.abs(value);
+    const formatted = abs.toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+    if (value === 0)
+        return `$${formatted}`;
+    return value > 0 ? `+$${formatted}` : `-$${formatted}`;
+}
+function getPnlColor(pnl, neutral) {
+    if (pnl === 0)
+        return neutral;
+    return pnl > 0 ? "#22c55e" : "#ef4444";
+}

package/dist/share/h.d.ts

@@ -0,0 +1,2 @@
+import type { SatoriNode } from "./types";
+export declare function h(type: string, props: Record<string, unknown> | null, ...children: (SatoriNode | string)[]): SatoriNode;

package/dist/share/h.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.h = h;
+function h(type, props, ...children) {
+    if (children.length === 0)
+        return { type, props: { ...props } };
+    if (children.length === 1)
+        return { type, props: { ...props, children: children[0] } };
+    return { type, props: { ...props, children } };
+}

package/dist/share/index.d.ts

@@ -0,0 +1,8 @@
+export type { SatoriNode, PositionImageInput, DistributionImageInput, PriceTick, BarCategory, } from "./types";
+export { buildPositionVNode } from "./position-image";
+export { buildDistributionVNode } from "./distribution-image";
+export { buildBrandVNode } from "./brand-image";
+export { h } from "./h";
+export { SIGNALS_LOGO_URI, buildLogoStrokeSVG } from "./assets";
+export { formatUSDC, formatPrice, formatPriceRange, percForm, formatUsdPnl, getPnlColor, } from "./format";
+export { getBarCategory, getSqrtHeight, generateXAxisTicks, formatXTick, getPeakRange, formatDistributionPriceRange, } from "./distribution-share-utils";

package/dist/share/index.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDistributionPriceRange = exports.getPeakRange = exports.formatXTick = exports.generateXAxisTicks = exports.getSqrtHeight = exports.getBarCategory = exports.getPnlColor = exports.formatUsdPnl = exports.percForm = exports.formatPriceRange = exports.formatPrice = exports.formatUSDC = exports.buildLogoStrokeSVG = exports.SIGNALS_LOGO_URI = exports.h = exports.buildBrandVNode = exports.buildDistributionVNode = exports.buildPositionVNode = void 0;
+// VNode builders
+var position_image_1 = require("./position-image");
+Object.defineProperty(exports, "buildPositionVNode", { enumerable: true, get: function () { return position_image_1.buildPositionVNode; } });
+var distribution_image_1 = require("./distribution-image");
+Object.defineProperty(exports, "buildDistributionVNode", { enumerable: true, get: function () { return distribution_image_1.buildDistributionVNode; } });
+var brand_image_1 = require("./brand-image");
+Object.defineProperty(exports, "buildBrandVNode", { enumerable: true, get: function () { return brand_image_1.buildBrandVNode; } });
+// Helpers (used by v1-server for its own distribution rendering)
+var h_1 = require("./h");
+Object.defineProperty(exports, "h", { enumerable: true, get: function () { return h_1.h; } });
+var assets_1 = require("./assets");
+Object.defineProperty(exports, "SIGNALS_LOGO_URI", { enumerable: true, get: function () { return assets_1.SIGNALS_LOGO_URI; } });
+Object.defineProperty(exports, "buildLogoStrokeSVG", { enumerable: true, get: function () { return assets_1.buildLogoStrokeSVG; } });
+var format_1 = require("./format");
+Object.defineProperty(exports, "formatUSDC", { enumerable: true, get: function () { return format_1.formatUSDC; } });
+Object.defineProperty(exports, "formatPrice", { enumerable: true, get: function () { return format_1.formatPrice; } });
+Object.defineProperty(exports, "formatPriceRange", { enumerable: true, get: function () { return format_1.formatPriceRange; } });
+Object.defineProperty(exports, "percForm", { enumerable: true, get: function () { return format_1.percForm; } });
+Object.defineProperty(exports, "formatUsdPnl", { enumerable: true, get: function () { return format_1.formatUsdPnl; } });
+Object.defineProperty(exports, "getPnlColor", { enumerable: true, get: function () { return format_1.getPnlColor; } });
+var distribution_share_utils_1 = require("./distribution-share-utils");
+Object.defineProperty(exports, "getBarCategory", { enumerable: true, get: function () { return distribution_share_utils_1.getBarCategory; } });
+Object.defineProperty(exports, "getSqrtHeight", { enumerable: true, get: function () { return distribution_share_utils_1.getSqrtHeight; } });
+Object.defineProperty(exports, "generateXAxisTicks", { enumerable: true, get: function () { return distribution_share_utils_1.generateXAxisTicks; } });
+Object.defineProperty(exports, "formatXTick", { enumerable: true, get: function () { return distribution_share_utils_1.formatXTick; } });
+Object.defineProperty(exports, "getPeakRange", { enumerable: true, get: function () { return distribution_share_utils_1.getPeakRange; } });
+Object.defineProperty(exports, "formatDistributionPriceRange", { enumerable: true, get: function () { return distribution_share_utils_1.formatDistributionPriceRange; } });

package/dist/share/position-image.d.ts

@@ -0,0 +1,2 @@
+import type { SatoriNode, PositionImageInput } from "./types";
+export declare function buildPositionVNode(input: PositionImageInput): SatoriNode;