@signals-protocol/v1-sdk 1.1.0 → 1.2.0

package/dist/index.d.ts

@@ -9,4 +9,5 @@ export { WADAmount, USDCAmount, Quantity, Tick, MarketDistributionRaw, MarketRaw
 export * as MathUtils from "./utils/math";
 export { toWAD, toMicroUSDC } from "./clmsr-sdk";
 export { createCLMSRSDK, createSignalsSDK } from "./clmsr-sdk";
-export declare const VERSION = "1.1.0";
+export * from "./share";
+export declare const VERSION = "1.2.0";

package/dist/index.js

@@ -37,6 +37,9 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = exports.createSignalsSDK = exports.createCLMSRSDK = exports.toMicroUSDC = exports.toWAD = exports.MathUtils = exports.CalculationError = exports.ValidationError = exports.mapDistribution = exports.mapMarket = exports.SignalsSDK = exports.CLMSRSDK = void 0;
 // Export main SDK class
@@ -61,5 +64,7 @@ Object.defineProperty(exports, "toMicroUSDC", { enumerable: true, get: function
 var clmsr_sdk_4 = require("./clmsr-sdk");
 Object.defineProperty(exports, "createCLMSRSDK", { enumerable: true, get: function () { return clmsr_sdk_4.createCLMSRSDK; } });
 Object.defineProperty(exports, "createSignalsSDK", { enumerable: true, get: function () { return clmsr_sdk_4.createSignalsSDK; } });
+// Share image VNode templates
+__exportStar(require("./share"), exports);
 // Version (keep in sync with package.json)
-exports.VERSION = "1.1.0";
+exports.VERSION = "1.2.0";

package/dist/share/assets.d.ts

@@ -0,0 +1,3 @@
+import type { SatoriNode } from "./types";
+export declare const SIGNALS_LOGO_URI = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI4LjUwMDI0IiB5PSIwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjMTQ0NGMyIi8+PHJlY3QgeD0iOC41MDAyNCIgeT0iNC4wMDAwNiIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iIzE0NDRjMiIvPjxyZWN0IHg9IjAuNSIgeT0iMTIiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDQ0YzIiLz48cmVjdCB4PSIxMi41IiB5PSI4LjAwMDA2IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjMTQ0NGMyIi8+PHJlY3QgeD0iMTIuNSIgeT0iMCIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iIzE0NDRjMiIvPjxyZWN0IHg9IjQuNTAwMjQiIHk9IjAiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDQ0YzIiLz48cmVjdCB4PSIxMi41IiB5PSI0LjAwMDA2IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjMTQ0NGMyIi8+PHJlY3QgeD0iNC41MDAyNCIgeT0iOC4wMDAwNiIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iIzE0NDRjMiIvPjwvc3ZnPg==";
+export declare function buildLogoStrokeSVG(size: number, theme: "light" | "dark"): SatoriNode;

package/dist/share/assets.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIGNALS_LOGO_URI = void 0;
+exports.buildLogoStrokeSVG = buildLogoStrokeSVG;
+const h_1 = require("./h");
+// Signals logo SVG (pixel block pattern) as base64 data URI
+exports.SIGNALS_LOGO_URI = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI4LjUwMDI0IiB5PSIwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjMTQ0NGMyIi8+PHJlY3QgeD0iOC41MDAyNCIgeT0iNC4wMDAwNiIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iIzE0NDRjMiIvPjxyZWN0IHg9IjAuNSIgeT0iMTIiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDQ0YzIiLz48cmVjdCB4PSIxMi41IiB5PSI4LjAwMDA2IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjMTQ0NGMyIi8+PHJlY3QgeD0iMTIuNSIgeT0iMCIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iIzE0NDRjMiIvPjxyZWN0IHg9IjQuNTAwMjQiIHk9IjAiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDQ0YzIiLz48cmVjdCB4PSIxMi41IiB5PSI0LjAwMDA2IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjMTQ0NGMyIi8+PHJlY3QgeD0iNC41MDAyNCIgeT0iOC4wMDAwNiIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iIzE0NDRjMiIvPjwvc3ZnPg==";
+function buildLogoStrokeSVG(size, theme) {
+    const stroke = theme === "dark" ? "white" : "#1444c2";
+    return (0, h_1.h)("svg", {
+        width: size,
+        height: size,
+        viewBox: "0 0 1362 1362",
+        style: { display: "flex" },
+    }, (0, h_1.h)("path", {
+        d: "M341 1021H1V1361H341V1021ZM341 1021H681V681.006M341 1021V681.006H681M681 681.006L1021 680.994V1021H1361V1H341V340.997H681V681.006Z",
+        stroke,
+        strokeOpacity: "0.4",
+        strokeWidth: "2",
+        fill: "none",
+    }));
+}

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

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

package/dist/share/brand-image.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildBrandVNode = buildBrandVNode;
+const h_1 = require("./h");
+const assets_1 = require("./assets");
+function buildLogoStrokeSVG(size) {
+    return (0, h_1.h)("svg", {
+        width: size,
+        height: size,
+        viewBox: "0 0 1362 1362",
+        style: { display: "flex" },
+    }, (0, h_1.h)("path", {
+        d: "M341 1021H1V1361H341V1021ZM341 1021H681V681.006M341 1021V681.006H681M681 681.006L1021 680.994V1021H1361V1H341V340.997H681V681.006Z",
+        stroke: "white",
+        strokeOpacity: "0.4",
+        strokeWidth: "2",
+        fill: "none",
+    }));
+}
+function buildBrandVNode() {
+    return (0, h_1.h)("div", {
+        style: {
+            width: 1200,
+            height: 630,
+            display: "flex",
+            fontFamily: "Inter",
+            position: "relative",
+            overflow: "hidden",
+            background: "linear-gradient(135deg, #0d1528, #0e1633)",
+        },
+    }, 
+    // Blue radial glow
+    (0, h_1.h)("div", {
+        style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: "radial-gradient(circle at 30% 30%, rgba(20,68,194,0.25), transparent 60%)",
+            display: "flex",
+        },
+    }), 
+    // LogoStrokeSVG watermark
+    (0, h_1.h)("div", {
+        style: {
+            position: "absolute",
+            right: 8,
+            top: 8,
+            bottom: 8,
+            display: "flex",
+        },
+    }, buildLogoStrokeSVG(614)), 
+    // Content
+    (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            padding: "60px 64px",
+        },
+    }, 
+    // Logo + "Signals"
+    (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 16,
+            marginBottom: 32,
+        },
+    }, (0, h_1.h)("img", {
+        src: assets_1.SIGNALS_LOGO_URI,
+        width: 68,
+        height: 64,
+        style: { display: "flex" },
+    }), (0, h_1.h)("span", {
+        style: {
+            fontSize: 56,
+            fontWeight: 700,
+            color: "#1444c2",
+            display: "flex",
+        },
+    }, "Signals")), 
+    // Subtitle
+    (0, h_1.h)("div", {
+        style: {
+            fontSize: 28,
+            fontWeight: 500,
+            color: "rgba(255,255,255,0.70)",
+            lineHeight: 1.4,
+            display: "flex",
+        },
+    }, "Range-Based Bitcoin Price Prediction Market"), 
+    // Spacer
+    (0, h_1.h)("div", { style: { flex: 1, display: "flex" } }), 
+    // Footer handle
+    (0, h_1.h)("div", { style: { display: "flex" } }, (0, h_1.h)("span", {
+        style: {
+            fontSize: 20,
+            color: "rgba(255,255,255,0.50)",
+            display: "flex",
+        },
+    }, "@signalswtf"))));
+}

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

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

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;

package/dist/share/position-image.js

@@ -0,0 +1,337 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildPositionVNode = buildPositionVNode;
+const h_1 = require("./h");
+const assets_1 = require("./assets");
+const format_1 = require("./format");
+function buildPositionVNode(input) {
+    const { positionId, lowerTick, upperTick, currentQuantity, currentCost, totalQuantityBought, totalCosts, totalProceeds, outcome, closingPriceDate, isSettled, settlementTick, owner, theme, hideWallet, hideAmounts, currentValue, } = input;
+    const isDark = theme === "dark";
+    const isOpen = outcome === "OPEN";
+    // Entry: OPEN uses currentCost, settled uses totalCosts (currentCost is zeroed after claim)
+    const entry = isOpen ? Number(currentCost) / 1e6 : Number(totalCosts) / 1e6;
+    // PnL calculation:
+    // - LOSS: payout = 0
+    // - OPEN with currentValue: use SDK close proceeds
+    // - OPEN without currentValue: max payout fallback (currentQuantity)
+    // - WIN (settled): totalQuantityBought (full range payout)
+    // - CLOSED (early exit settled): totalProceeds
+    let value;
+    if (outcome === "LOSS") {
+        value = 0;
+    }
+    else if (isOpen && currentValue != null) {
+        value = currentValue;
+    }
+    else if (isOpen) {
+        value = Number(currentQuantity) / 1e6;
+    }
+    else if (outcome === "WIN") {
+        value = Number(totalQuantityBought) / 1e6;
+    }
+    else if (outcome === "CLOSED") {
+        value = Number(totalProceeds) / 1e6;
+    }
+    else {
+        value = 0;
+    }
+    // Snap sub-cent PnL to zero (floating-point noise from SDK calculations)
+    const rawPnl = value - entry;
+    const pnl = Math.abs(rawPnl) < 0.005 ? 0 : rawPnl;
+    const pnlPercent = entry > 0 ? pnl / entry : 0;
+    const payoutLabel = isOpen ? "Current Value" : "Payout";
+    const textPrimary = isDark ? "#ffffff" : "#000000";
+    const textSecondary = isDark
+        ? "rgba(255,255,255,0.70)"
+        : "rgba(0,0,0,0.60)";
+    const textMuted = isDark ? "rgba(255,255,255,0.65)" : "rgba(0,0,0,0.55)";
+    const pnlColor = (0, format_1.getPnlColor)(pnl, textMuted);
+    const payoutDisplayValue = outcome === "LOSS"
+        ? "$0.00"
+        : isOpen && currentValue != null
+            ? "$" +
+                currentValue.toLocaleString("en-US", {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
+                })
+            : isOpen
+                ? (0, format_1.formatUSDC)(currentQuantity)
+                : outcome === "WIN"
+                    ? (0, format_1.formatUSDC)(totalQuantityBought)
+                    : (0, format_1.formatUSDC)(totalProceeds);
+    const children = [];
+    // Background gradient
+    children.push((0, h_1.h)("div", {
+        style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: isDark
+                ? "linear-gradient(135deg, #0d1528, #0e1633)"
+                : "linear-gradient(135deg, #fbfdff, #f0f6ff)",
+            display: "flex",
+        },
+    }));
+    // Blue radial glow
+    children.push((0, h_1.h)("div", {
+        style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: isDark
+                ? "radial-gradient(circle at 25% 20%, rgba(45,136,255,0.15), transparent 65%)"
+                : "radial-gradient(circle at 22% 18%, rgba(185,221,255,0.30), transparent 40%)",
+            display: "flex",
+        },
+    }));
+    // PnL glow
+    children.push((0, h_1.h)("div", {
+        style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: pnl >= 0
+                ? isDark
+                    ? "radial-gradient(circle at 85% 75%, rgba(0,191,64,0.25), transparent 45%)"
+                    : "radial-gradient(circle at 85% 75%, rgba(88,230,131,0.30), transparent 45%)"
+                : isDark
+                    ? "radial-gradient(circle at 85% 75%, rgba(239,68,68,0.25), transparent 45%)"
+                    : "radial-gradient(circle at 85% 75%, rgba(252,165,165,0.30), transparent 45%)",
+            display: "flex",
+        },
+    }));
+    // LogoStrokeSVG watermark
+    children.push((0, h_1.h)("div", {
+        style: {
+            position: "absolute",
+            right: 8,
+            top: 8,
+            bottom: 8,
+            display: "flex",
+        },
+    }, (0, assets_1.buildLogoStrokeSVG)(614, theme)));
+    // Content
+    const contentChildren = [];
+    // Logo + "Signals"
+    contentChildren.push((0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            marginBottom: 24,
+        },
+    }, (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: 28,
+            fontWeight: 700,
+            color: "#1444c2",
+            display: "flex",
+        },
+    }, "Signals")));
+    // Range section
+    const rangeItems = [
+        (0, h_1.h)("div", { style: { display: "flex", flexDirection: "column" } }, (0, h_1.h)("div", {
+            style: {
+                fontSize: 17,
+                color: textSecondary,
+                marginBottom: 4,
+                display: "flex",
+            },
+        }, "Range"), (0, h_1.h)("div", {
+            style: {
+                fontSize: 34,
+                fontWeight: 700,
+                color: textPrimary,
+                display: "flex",
+            },
+        }, (0, format_1.formatPriceRange)(lowerTick, upperTick))),
+    ];
+    if (isSettled && settlementTick != null) {
+        rangeItems.push((0, h_1.h)("div", { style: { display: "flex", flexDirection: "column" } }, (0, h_1.h)("div", {
+            style: {
+                fontSize: 17,
+                color: textSecondary,
+                marginBottom: 4,
+                display: "flex",
+            },
+        }, "Actual Price"), (0, h_1.h)("div", {
+            style: {
+                fontSize: 34,
+                fontWeight: 700,
+                color: textPrimary,
+                display: "flex",
+            },
+        }, (0, format_1.formatPrice)(settlementTick))));
+    }
+    contentChildren.push((0, h_1.h)("div", { style: { display: "flex", gap: 48, marginBottom: 20 } }, ...rangeItems));
+    // PnL (dominant)
+    const pnlChildren = [
+        (0, h_1.h)("div", {
+            style: {
+                fontSize: 17,
+                color: textSecondary,
+                marginBottom: 2,
+                display: "flex",
+            },
+        }, "PnL"),
+    ];
+    if (hideAmounts) {
+        pnlChildren.push((0, h_1.h)("div", {
+            style: {
+                fontSize: 90,
+                fontWeight: 700,
+                color: pnlColor,
+                lineHeight: 1,
+                display: "flex",
+            },
+        }, `${pnl > 0 ? "+" : pnl < 0 ? "-" : ""}${(0, format_1.percForm)(Math.abs(pnlPercent))}`));
+    }
+    else {
+        pnlChildren.push((0, h_1.h)("div", { style: { display: "flex", alignItems: "flex-end", gap: 8 } }, (0, h_1.h)("div", {
+            style: {
+                fontSize: 90,
+                fontWeight: 700,
+                color: pnlColor,
+                lineHeight: 1,
+                display: "flex",
+            },
+        }, (0, format_1.formatUsdPnl)(pnl)), (0, h_1.h)("div", {
+            style: {
+                fontSize: 34,
+                fontWeight: 700,
+                color: pnlColor,
+                marginBottom: 8,
+                display: "flex",
+            },
+        }, `(${(0, format_1.percForm)(pnlPercent)})`)));
+    }
+    contentChildren.push((0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            marginBottom: 16,
+        },
+    }, ...pnlChildren));
+    // Date / Entry / Payout row
+    const infoItems = [
+        (0, h_1.h)("div", { style: { display: "flex", flexDirection: "column" } }, (0, h_1.h)("div", {
+            style: {
+                fontSize: 17,
+                color: textSecondary,
+                marginBottom: 4,
+                display: "flex",
+            },
+        }, "Date"), (0, h_1.h)("div", {
+            style: {
+                fontSize: 28,
+                fontWeight: 700,
+                color: textPrimary,
+                display: "flex",
+            },
+        }, closingPriceDate)),
+    ];
+    if (!hideAmounts) {
+        infoItems.push((0, h_1.h)("div", { style: { display: "flex", flexDirection: "column" } }, (0, h_1.h)("div", {
+            style: {
+                fontSize: 17,
+                color: textSecondary,
+                marginBottom: 4,
+                display: "flex",
+            },
+        }, "Entry"), (0, h_1.h)("div", {
+            style: {
+                fontSize: 28,
+                fontWeight: 700,
+                color: textPrimary,
+                display: "flex",
+            },
+        }, isOpen ? (0, format_1.formatUSDC)(currentCost) : (0, format_1.formatUSDC)(totalCosts))));
+        infoItems.push((0, h_1.h)("div", { style: { display: "flex", flexDirection: "column" } }, (0, h_1.h)("div", {
+            style: {
+                fontSize: 17,
+                color: textSecondary,
+                marginBottom: 4,
+                display: "flex",
+            },
+        }, payoutLabel), (0, h_1.h)("div", {
+            style: {
+                fontSize: 28,
+                fontWeight: 700,
+                color: textPrimary,
+                display: "flex",
+            },
+        }, payoutDisplayValue)));
+    }
+    contentChildren.push((0, h_1.h)("div", { style: { display: "flex", gap: 48, marginBottom: 12 } }, ...infoItems));
+    // Owner
+    if (!hideWallet && owner) {
+        contentChildren.push((0, h_1.h)("div", {
+            style: {
+                display: "flex",
+                flexDirection: "column",
+                marginBottom: 8,
+            },
+        }, (0, h_1.h)("div", {
+            style: {
+                fontSize: 17,
+                color: textSecondary,
+                marginBottom: 4,
+                display: "flex",
+            },
+        }, "Owner"), (0, h_1.h)("div", {
+            style: {
+                fontSize: 22,
+                fontWeight: 700,
+                color: textPrimary,
+                display: "flex",
+            },
+        }, owner.slice(0, 7))));
+    }
+    // Spacer
+    contentChildren.push((0, h_1.h)("div", { style: { flex: 1, display: "flex" } }));
+    // Footer
+    contentChildren.push((0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-end",
+        },
+    }, (0, h_1.h)("div", { style: { display: "flex", flexDirection: "column" } }, (0, h_1.h)("span", {
+        style: { fontSize: 17, color: textMuted, display: "flex" },
+    }, "@signalswtf"), (0, h_1.h)("span", {
+        style: { fontSize: 17, color: textMuted, display: "flex" },
+    }, "Range-Based Bitcoin Price Prediction Market")), (0, h_1.h)("span", {
+        style: { fontSize: 17, color: textMuted, display: "flex" },
+    }, `#${positionId}`)));
+    children.push((0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            padding: "32px 40px 28px",
+        },
+    }, ...contentChildren));
+    return (0, h_1.h)("div", {
+        style: {
+            width: 1200,
+            height: 630,
+            display: "flex",
+            fontFamily: "Inter",
+            position: "relative",
+            overflow: "hidden",
+        },
+    }, ...children);
+}

package/dist/share/types.d.ts

@@ -0,0 +1,39 @@
+export interface SatoriNode {
+    type: string;
+    props: Record<string, unknown>;
+}
+export interface PositionImageInput {
+    positionId: number;
+    lowerTick: number;
+    upperTick: number;
+    currentQuantity: string;
+    currentCost: string;
+    totalQuantityBought: string;
+    totalCosts: string;
+    totalProceeds: string;
+    outcome: string;
+    closingPriceDate: string;
+    isSettled: boolean;
+    settlementTick: number | null;
+    owner: string;
+    theme: "light" | "dark";
+    hideWallet: boolean;
+    hideAmounts: boolean;
+    /** Current position value in USDC (NOT raw). null = use max payout fallback. */
+    currentValue: number | null;
+}
+export type BarCategory = "peak" | "high" | "mid" | "low";
+export interface PriceTick {
+    tick: number;
+    factor: bigint;
+    price: number;
+    probability: number;
+}
+export interface DistributionImageInput {
+    distribution: PriceTick[];
+    minTick: number;
+    maxTick: number;
+    tickSpacing: number;
+    closingPriceDate: string;
+    currentPrice?: number;
+}

package/dist/share/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signals-protocol/v1-sdk",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Signals v1 SDK for CLMSR market calculations and utilities",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -9,7 +9,10 @@
     "build": "tsc",
     "dev": "tsc --watch",
     "test": "jest",
+    "test:cov": "jest --coverage",
     "test:watch": "jest --watch",
+    "npm:auth": "node scripts/write-npmrc.js",
+    "publish:package": "NPM_CONFIG_USERCONFIG=.npmrc.auth npm publish",
     "lint": "eslint src/**/*.ts",
     "format": "prettier --write src/**/*.ts",
     "clean": "rm -rf dist",