@signals-protocol/v1-sdk 1.4.1 → 1.5.0

package/dist/index.d.ts

@@ -10,4 +10,4 @@ export * as MathUtils from "./utils/math";
 export { toWAD, toMicroUSDC } from "./clmsr-sdk";
 export { createCLMSRSDK, createSignalsSDK } from "./clmsr-sdk";
 export * from "./share";
-export declare const VERSION = "1.4.1";
+export declare const VERSION = "1.5.0";

package/dist/index.js

@@ -67,4 +67,4 @@ Object.defineProperty(exports, "createSignalsSDK", { enumerable: true, get: func
 // Share image VNode templates
 __exportStar(require("./share"), exports);
 // Version (keep in sync with package.json)
-exports.VERSION = "1.4.1";
+exports.VERSION = "1.5.0";

package/dist/share/avatar.d.ts

@@ -0,0 +1,9 @@
+export type AvatarTheme = "light" | "dark";
+export interface AvatarData {
+    pattern: boolean[][];
+    primary: string;
+    secondary: string;
+    background: string;
+}
+export declare const AVATAR_COLOR_PALETTE: readonly ["#1444c2", "#2d88ff", "#fdd979", "#8bcaff", "#00BF40", "#F7931A", "#FF4343", "#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#fb7185", "#fc97f3", "#5eead4", "#c4b5fd"];
+export declare function getAvatarData(address: string, theme: AvatarTheme): AvatarData;

package/dist/share/avatar.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AVATAR_COLOR_PALETTE = void 0;
+exports.getAvatarData = getAvatarData;
+exports.AVATAR_COLOR_PALETTE = [
+    "#1444c2",
+    "#2d88ff",
+    "#fdd979",
+    "#8bcaff",
+    "#00BF40",
+    "#F7931A",
+    "#FF4343",
+    "#6366f1",
+    "#8b5cf6",
+    "#ec4899",
+    "#f59e0b",
+    "#10b981",
+    "#fb7185",
+    "#fc97f3",
+    "#5eead4",
+    "#c4b5fd",
+];
+const AVATAR_BACKGROUNDS = {
+    light: "#f8fafc",
+    dark: "#1e1e22",
+};
+function simpleHash(str) {
+    let hash = 5381;
+    for (let i = 0; i < str.length; i += 1) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) + hash + char;
+    }
+    return Math.abs(hash);
+}
+function getSecondaryHash(address) {
+    let hash = 0;
+    const suffix = address.slice(-8);
+    for (let i = 0; i < suffix.length; i += 1) {
+        hash = ((hash << 3) + hash + suffix.charCodeAt(i)) & 0xffffffff;
+    }
+    return Math.abs(hash);
+}
+function generateSeedValues(address) {
+    const hash1 = simpleHash(address);
+    const hash2 = getSecondaryHash(address);
+    const values = [];
+    let seed = hash1;
+    for (let i = 0; i < 10; i += 1) {
+        seed = (seed * 1103015245 + 12345 + hash2) & 0x7fffffff;
+        values.push(seed);
+    }
+    return values;
+}
+function generatePixelPattern(address) {
+    const seeds = generateSeedValues(address);
+    const pattern = Array(5)
+        .fill(null)
+        .map(() => Array(5).fill(false));
+    for (let y = 0; y < 5; y += 1) {
+        for (let x = 0; x < 2; x += 1) {
+            const index = y * 2 + x;
+            const seedIndex = index % seeds.length;
+            const shouldFill = seeds[seedIndex] % 100 > 40;
+            pattern[y][x] = shouldFill;
+            pattern[y][4 - x] = shouldFill;
+        }
+        const centerIndex = y + 10;
+        const centerSeedIndex = centerIndex % seeds.length;
+        pattern[y][2] = seeds[centerSeedIndex] % 100 > 40;
+    }
+    const countFilled = () => pattern.flat().filter(Boolean).length;
+    const ensureMinPixels = (minPixels) => {
+        let filledCount = countFilled();
+        if (filledCount >= minPixels)
+            return;
+        const candidates = [];
+        for (let y = 0; y < 5; y += 1) {
+            for (let x = 0; x < 3; x += 1) {
+                if (!pattern[y][x]) {
+                    candidates.push([y, x]);
+                }
+            }
+        }
+        let i = 0;
+        while (filledCount < minPixels && candidates.length > 0) {
+            const idx = (seeds[i % seeds.length] + i) % candidates.length;
+            const [y, x] = candidates.splice(idx, 1)[0];
+            if (!pattern[y][x]) {
+                pattern[y][x] = true;
+                if (x !== 2) {
+                    if (!pattern[y][4 - x]) {
+                        pattern[y][4 - x] = true;
+                        filledCount += 2;
+                    }
+                    else {
+                        filledCount += 1;
+                    }
+                }
+                else {
+                    filledCount += 1;
+                }
+            }
+            i += 1;
+        }
+    };
+    ensureMinPixels(12);
+    const parityCounts = { even: 0, odd: 0 };
+    for (let y = 0; y < 5; y += 1) {
+        for (let x = 0; x < 5; x += 1) {
+            if (pattern[y][x]) {
+                if ((y + x) % 2 === 0) {
+                    parityCounts.even += 1;
+                }
+                else {
+                    parityCounts.odd += 1;
+                }
+            }
+        }
+    }
+    if (parityCounts.even === 0 || parityCounts.odd === 0) {
+        const missingParity = parityCounts.even === 0 ? 0 : 1;
+        const candidates = [];
+        for (let y = 0; y < 5; y += 1) {
+            for (let x = 0; x < 3; x += 1) {
+                if (!pattern[y][x] && (y + x) % 2 === missingParity) {
+                    candidates.push([y, x]);
+                }
+            }
+        }
+        if (candidates.length > 0) {
+            const idx = (seeds[(seeds.length - 1 + missingParity) % seeds.length] +
+                parityCounts.even +
+                parityCounts.odd) %
+                candidates.length;
+            const [y, x] = candidates[idx];
+            pattern[y][x] = true;
+            if (x !== 2) {
+                pattern[y][4 - x] = true;
+            }
+        }
+    }
+    return pattern;
+}
+function generateColors(address) {
+    const seeds = generateSeedValues(address);
+    const hash1 = simpleHash(address);
+    const hash2 = getSecondaryHash(address);
+    const primaryColorIndex = Math.abs(hash1 ^ seeds[3]) % exports.AVATAR_COLOR_PALETTE.length;
+    let secondaryColorIndex = Math.abs(hash2 ^ seeds[7]) % exports.AVATAR_COLOR_PALETTE.length;
+    if (secondaryColorIndex === primaryColorIndex) {
+        secondaryColorIndex =
+            (secondaryColorIndex + 1) % exports.AVATAR_COLOR_PALETTE.length;
+    }
+    return {
+        primary: exports.AVATAR_COLOR_PALETTE[primaryColorIndex],
+        secondary: exports.AVATAR_COLOR_PALETTE[secondaryColorIndex],
+    };
+}
+function getAvatarData(address, theme) {
+    const colors = generateColors(address);
+    return {
+        pattern: generatePixelPattern(address),
+        primary: colors.primary,
+        secondary: colors.secondary,
+        background: AVATAR_BACKGROUNDS[theme],
+    };
+}

package/dist/share/index.d.ts

@@ -3,6 +3,8 @@ export { buildPositionVNode } from "./position-image";
 export { buildProfileVNode } from "./profile-image";
 export { buildDistributionVNode } from "./distribution-image";
 export { buildBrandVNode } from "./brand-image";
+export { AVATAR_COLOR_PALETTE, getAvatarData } from "./avatar";
+export type { AvatarData, AvatarTheme } from "./avatar";
 export { h } from "./h";
 export { SIGNALS_LOGO_URI, buildLogoStrokeSVG } from "./assets";
 export { formatUSDC, formatPrice, formatPriceRange, percForm, formatUsdPnl, getPnlColor, } from "./format";

package/dist/share/index.js

@@ -1,6 +1,6 @@
 "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.buildProfileVNode = exports.buildPositionVNode = void 0;
+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.getAvatarData = exports.AVATAR_COLOR_PALETTE = exports.buildBrandVNode = exports.buildDistributionVNode = exports.buildProfileVNode = 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; } });
@@ -10,6 +10,9 @@ 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; } });
+var avatar_1 = require("./avatar");
+Object.defineProperty(exports, "AVATAR_COLOR_PALETTE", { enumerable: true, get: function () { return avatar_1.AVATAR_COLOR_PALETTE; } });
+Object.defineProperty(exports, "getAvatarData", { enumerable: true, get: function () { return avatar_1.getAvatarData; } });
 // 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; } });

package/dist/share/profile-image.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildProfileVNode = buildProfileVNode;
 const h_1 = require("./h");
 const assets_1 = require("./assets");
+const avatar_1 = require("./avatar");
 const CARD_WIDTH = 1200;
 const CARD_HEIGHT = 630;
 const OUTER_PADDING = 24;
@@ -15,6 +16,9 @@ const PLOT_RIGHT = 18;
 const PLOT_TOP = 14;
 const PLOT_BOTTOM = 24;
 const BAND_WIDTH = 18;
+const DAY_MS = 86400000;
+const AVATAR_SIZE = 96;
+const MAX_RENDERED_POSITIONS = 1000;
 const OG_THEMES = {
     light: {
         pageBg: "#eef7ff", // bg-surface-soft
@@ -41,13 +45,83 @@ const OG_THEMES = {
         neutralBg: "#27272A", // surface-muted
     },
 };
-const TIER_ACCENT_COLORS = {
-    BRONZE: "#C7742A",
-    SILVER: "#BFC6CE",
-    GOLD: "#F3BC3C",
-    PLATINUM: "#63CBB2",
-    DIAMOND: "#5EC0F2",
+const TIER_CHIP_THEMES = {
+    BRONZE: {
+        light: {
+            from: "#FFE6CC",
+            to: "#FFC999",
+            border: "#C97E3D",
+            icon: "#8B4513",
+        },
+        dark: {
+            from: "#3D2B1A",
+            to: "#5C3A1E",
+            border: "#8B5E2B",
+            icon: "#F5E5D4",
+        },
+    },
+    SILVER: {
+        light: {
+            from: "#F2F5F8",
+            to: "#E2E7EE",
+            border: "#BFC6CE",
+            icon: "#6B7280",
+        },
+        dark: {
+            from: "#2A2D31",
+            to: "#363A40",
+            border: "#6B7280",
+            icon: "#F3F4F6",
+        },
+    },
+    GOLD: {
+        light: {
+            from: "#FFF0B8",
+            to: "#FFD875",
+            border: "#D9A441",
+            icon: "#DA9100",
+        },
+        dark: {
+            from: "#3D3520",
+            to: "#4A3D1A",
+            border: "#B8892E",
+            icon: "#FFE9B3",
+        },
+    },
+    PLATINUM: {
+        light: {
+            from: "#E4FFF7",
+            to: "#CDEFE5",
+            border: "#8FD7C6",
+            icon: "#059669",
+        },
+        dark: {
+            from: "#1A3D33",
+            to: "#1F3B31",
+            border: "#4DAE96",
+            icon: "#BAEBD9",
+        },
+    },
+    DIAMOND: {
+        light: {
+            from: "#E2F4FF",
+            to: "#C9E9FF",
+            border: "#89D0FF",
+            icon: "#0284C7",
+        },
+        dark: {
+            from: "#1A2F3D",
+            to: "#1E3545",
+            border: "#5AAFE0",
+            icon: "#5EC0F2",
+        },
+    },
 };
+const PRICE_TICK_STEPS = [
+    10, 25, 50, 100, 250, 500, 1000, 2500, 5000, 10000, 25000, 50000, 100000,
+    250000, 500000, 1000000,
+];
+const MAX_MATERIALIZED_PRICE_TICKS = 20;
 function shortenAddress(address) {
     return `${address.slice(0, 6)}…${address.slice(-4)}`;
 }
@@ -99,6 +173,17 @@ function normalizePositions(positions) {
     });
     return normalized;
 }
+function capRenderablePositions(positions) {
+    if (positions.length <= MAX_RENDERED_POSITIONS) {
+        return positions;
+    }
+    return positions
+        .map((position, index) => ({ position, index }))
+        .sort((a, b) => b.position.marketEndTimestampMs - a.position.marketEndTimestampMs ||
+        a.index - b.index)
+        .slice(0, MAX_RENDERED_POSITIONS)
+        .map(({ position }) => position);
+}
 function buildMainText(input) {
     const handle = resolveDisplayName(input.realHandle ?? null);
     if (handle)
@@ -107,60 +192,111 @@ function buildMainText(input) {
         return "A Signals trader";
     return resolveDisplayName(input.displayName) ?? shortenAddress(input.address);
 }
+function formatCallCopy(totalCalls) {
+    return `${totalCalls} BTC range ${totalCalls === 1 ? "call" : "calls"}`;
+}
 function buildSubline(input) {
-    const callCopy = `${input.totalCalls} BTC range calls`;
+    const callCopy = formatCallCopy(input.totalCalls);
     if (input.hideWallet)
-        return callCopy;
-    const parts = [];
+        return `${callCopy} on Signals`;
     if (resolveDisplayName(input.realHandle ?? null) !== null) {
-        parts.push(shortenAddress(input.address));
+        return `${shortenAddress(input.address)} with ${callCopy}`;
     }
     if (input.twitter) {
-        parts.push(`@${input.twitter}`);
+        return `@${input.twitter} with ${callCopy}`;
+    }
+    return `${callCopy} on Signals`;
+}
+function buildPriceTickCandidate(min, max, step) {
+    const alignedMin = Math.floor(min / step) * step;
+    const alignedMax = Math.ceil(max / step) * step;
+    const count = Math.floor((alignedMax - alignedMin) / step) + 1;
+    const ticks = [];
+    if (count > MAX_MATERIALIZED_PRICE_TICKS) {
+        return {
+            min: alignedMin,
+            max: alignedMax,
+            step,
+            count,
+            ticks,
+        };
     }
-    parts.push(callCopy);
-    return parts.join(" · ");
+    for (let tick = alignedMin; tick <= alignedMax + step / 2; tick += step) {
+        ticks.push(tick);
+    }
+    return {
+        min: alignedMin,
+        max: alignedMax,
+        step,
+        count,
+        ticks,
+    };
 }
 function getPriceTickStep(span) {
     const target = span / 4;
-    const candidates = [
-        500,
-        1000,
-        2500,
-        5000,
-        10000,
-        25000,
-        50000,
-        100000,
-        250000,
-        500000,
-        1000000,
-    ];
-    return candidates.find((step) => step >= target) ?? 1000000;
+    return (PRICE_TICK_STEPS.find((step) => step >= target) ??
+        PRICE_TICK_STEPS[PRICE_TICK_STEPS.length - 1]);
 }
 function getExpandedPriceBounds(min, max) {
     const span = max - min;
-    const step = getPriceTickStep(span);
+    const desiredStep = getPriceTickStep(span);
+    const candidates = PRICE_TICK_STEPS.map((step) => buildPriceTickCandidate(min, max, step));
+    const validCandidates = candidates.filter((candidate) => candidate.ticks.length > 0 &&
+        candidate.count >= 4 &&
+        candidate.count <= 5);
+    const fallbackCandidates = candidates.filter((candidate) => candidate.ticks.length > 0);
+    const [selected] = (validCandidates.length > 0
+        ? validCandidates
+        : fallbackCandidates.length > 0
+            ? fallbackCandidates
+            : candidates)
+        .slice()
+        .sort((a, b) => {
+        const aCountPenalty = a.count >= 4 && a.count <= 5
+            ? 0
+            : Math.abs(a.count - 5) * 1000000;
+        const bCountPenalty = b.count >= 4 && b.count <= 5
+            ? 0
+            : Math.abs(b.count - 5) * 1000000;
+        return (aCountPenalty +
+            Math.abs(a.step - desiredStep) -
+            (bCountPenalty + Math.abs(b.step - desiredStep)));
+    });
     return {
-        min: Math.floor(min / step) * step,
-        max: Math.ceil(max / step) * step,
-        step,
+        min: selected.min,
+        max: selected.max,
+        step: selected.step,
     };
 }
 function getPriceTicks(min, max, step) {
+    const count = Math.floor((max - min) / step) + 1;
     const ticks = [];
-    for (let tick = min; tick <= max + step / 2; tick += step) {
-        ticks.push(tick);
-        if (ticks.length >= 6)
-            break;
+    if (count <= MAX_MATERIALIZED_PRICE_TICKS) {
+        for (let tick = min; tick <= max + step / 2; tick += step) {
+            ticks.push(tick);
+        }
+    }
+    if (count >= 4 && count <= 5 && ticks.length > 0) {
+        return { ticks, step };
     }
-    return ticks.length > 0 ? ticks : [min, max];
+    const fallbackCount = count < 4 ? 4 : 5;
+    const fallbackStep = (max - min) / (fallbackCount - 1);
+    return {
+        ticks: Array.from({ length: fallbackCount }, (_, index) => Math.round(min + fallbackStep * index)),
+        step: fallbackStep,
+    };
 }
-function formatAxisLabel(value) {
+function formatAxisLabel(value, step) {
+    if (step < 100) {
+        return `$${Math.round(value).toLocaleString("en-US")}`;
+    }
     if (Math.abs(value) >= 1000) {
+        if (step >= 100 && step < 1000) {
+            return `$${(value / 1000).toFixed(1)}k`;
+        }
         return `$${Math.round(value / 1000)}k`;
     }
-    return `$${Math.round(value)}`;
+    return `$${Math.round(value).toLocaleString("en-US")}`;
 }
 function computePriceBounds(btcHistory, positions) {
     let rawMin = Infinity;
@@ -232,9 +368,239 @@ function buildHistoryPath(btcHistory, scaleX, scaleY) {
     })
         .join(" ");
 }
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function formatTierName(tier) {
+    return `${tier[0]}${tier.slice(1).toLowerCase()}`;
+}
+function buildTierChip(tier, themeName, theme) {
+    const tierTheme = TIER_CHIP_THEMES[tier][themeName];
+    return (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            padding: "8px 14px",
+            borderRadius: 999,
+            border: `1px solid ${tierTheme.border}`,
+            background: `linear-gradient(135deg, ${tierTheme.from}, ${tierTheme.to})`,
+            color: theme.ink,
+            fontSize: 18,
+            fontWeight: 700,
+            lineHeight: 1,
+            flexShrink: 0,
+        },
+    }, (0, h_1.h)("svg", {
+        width: 18,
+        height: 18,
+        viewBox: "0 0 16 16",
+        style: { display: "flex", flexShrink: 0 },
+    }, (0, h_1.h)("polygon", {
+        points: "8 1 15 8 8 15 1 8",
+        fill: tierTheme.icon,
+    })), (0, h_1.h)("div", { style: { display: "flex" } }, formatTierName(tier)));
+}
+function buildAddressAvatar(address, themeName, theme) {
+    const avatar = (0, avatar_1.getAvatarData)(address, themeName);
+    return (0, h_1.h)("div", {
+        style: {
+            width: AVATAR_SIZE,
+            height: AVATAR_SIZE,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            borderRadius: 22,
+            border: `1px solid ${theme.border}`,
+            background: avatar.background,
+            flexShrink: 0,
+        },
+    }, ...avatar.pattern.map((row, y) => (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            width: "100%",
+            height: "20%",
+        },
+    }, ...row.map((isFilled, x) => (0, h_1.h)("div", {
+        style: {
+            width: "20%",
+            height: "100%",
+            backgroundColor: isFilled
+                ? (y + x) % 2 === 0
+                    ? avatar.primary
+                    : avatar.secondary
+                : "transparent",
+        },
+    })))));
+}
+function buildGenericAvatar(theme) {
+    return (0, h_1.h)("div", {
+        style: {
+            width: AVATAR_SIZE,
+            height: AVATAR_SIZE,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            overflow: "hidden",
+            borderRadius: 22,
+            border: `1px solid ${theme.border}`,
+            background: theme.primary,
+            flexShrink: 0,
+        },
+    }, (0, h_1.h)("div", {
+        style: {
+            width: 58,
+            height: 58,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: 999,
+            background: theme.card,
+        },
+    }, (0, h_1.h)("img", {
+        src: assets_1.SIGNALS_LOGO_URI,
+        width: 34,
+        height: 32,
+        style: { display: "flex" },
+    })));
+}
+function buildAvatar(input, theme) {
+    if (input.hideWallet) {
+        return buildGenericAvatar(theme);
+    }
+    return buildAddressAvatar(input.address, input.theme, theme);
+}
+function buildBrandWordmark(theme) {
+    return (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            flexShrink: 0,
+        },
+    }, (0, h_1.h)("img", {
+        src: assets_1.SIGNALS_LOGO_URI,
+        width: 34,
+        height: 32,
+        style: { display: "flex" },
+    }), (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            fontSize: 28,
+            fontWeight: 700,
+            color: theme.primary,
+        },
+    }, "Signals"));
+}
+function buildHeader(input, theme, mainText, subline) {
+    return (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 24,
+            minHeight: AVATAR_SIZE,
+        },
+    }, (0, h_1.h)("div", {
+        style: {
+            flex: 1,
+            minWidth: 0,
+            display: "flex",
+            alignItems: "center",
+            gap: 18,
+        },
+    }, buildAvatar(input, theme), (0, h_1.h)("div", {
+        style: {
+            flex: 1,
+            minWidth: 0,
+            display: "flex",
+            flexDirection: "column",
+        },
+    }, (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            minWidth: 0,
+        },
+    }, (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            fontSize: 52,
+            lineHeight: 1.05,
+            fontWeight: 700,
+            color: theme.ink,
+            maxWidth: 620,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+        },
+    }, mainText), buildTierChip(input.tier, input.theme, theme)), (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            fontSize: 20,
+            fontWeight: 500,
+            color: theme.inkMuted,
+            marginTop: 8,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+        },
+    }, subline))), buildBrandWordmark(theme));
+}
+function buildStatItem(label, value, valueColor, theme) {
+    return (0, h_1.h)("div", {
+        style: {
+            flex: 1,
+            minWidth: 0,
+            display: "flex",
+            flexDirection: "column",
+        },
+    }, (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            fontSize: 14,
+            fontWeight: 500,
+            color: theme.inkMuted,
+            marginBottom: 8,
+        },
+    }, label), (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            fontSize: 30,
+            lineHeight: 1.1,
+            fontWeight: 700,
+            color: valueColor,
+        },
+    }, value));
+}
+function buildStatSeparator(theme) {
+    return (0, h_1.h)("div", {
+        style: {
+            width: 1,
+            height: 28,
+            display: "flex",
+            background: theme.border,
+            margin: "0 18px",
+            flexShrink: 0,
+        },
+    });
+}
+function buildStatRow(input, theme, pnlValue, roiValue, bestMultValue) {
+    return (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            marginTop: 20,
+            padding: "0 4px",
+        },
+    }, buildStatItem("P&L", pnlValue, input.hideAmounts
+        ? theme.inkMuted
+        : getSignedValueColor(input.totalPnl, theme), theme), buildStatSeparator(theme), buildStatItem("ROI", roiValue, getSignedValueColor(input.roi, theme), theme), buildStatSeparator(theme), buildStatItem("Best call", bestMultValue, theme.primary, theme));
+}
 function buildChartArea(theme, btcHistory, positions) {
     const normalizedPositions = normalizePositions(positions);
-    const renderablePositions = normalizedPositions.filter((position) => position.status !== "CLOSED");
+    const renderablePositions = capRenderablePositions(normalizedPositions);
     const sortedHistory = [...btcHistory].sort((a, b) => a.t - b.t);
     if (btcHistory.length === 0 && renderablePositions.length === 0) {
         return (0, h_1.h)("div", {
@@ -284,12 +650,40 @@ function buildChartArea(theme, btcHistory, positions) {
             return PLOT_TOP + plotHeight / 2;
         }
         return (PLOT_TOP +
-            (1 -
-                (value - priceBounds.min) / (priceBounds.max - priceBounds.min)) *
+            (1 - (value - priceBounds.min) / (priceBounds.max - priceBounds.min)) *
                 plotHeight);
     };
     const priceTicks = getPriceTicks(priceBounds.min, priceBounds.max, priceBounds.step);
     const hasOpenPositions = renderablePositions.some((position) => position.status === "OPEN");
+    const latestSettlement = renderablePositions
+        .filter((position) => (position.status === "WIN" || position.status === "LOSS") &&
+        position.settlementPrice != null)
+        .sort((a, b) => b.marketEndTimestampMs - a.marketEndTimestampMs)[0];
+    const groupSizes = new Map();
+    const groupOrdinals = new Map();
+    renderablePositions.forEach((position) => {
+        const timestamp = position.marketEndTimestampMs;
+        const ordinal = groupSizes.get(timestamp) ?? 0;
+        groupOrdinals.set(position, ordinal);
+        groupSizes.set(timestamp, ordinal + 1);
+    });
+    const dayWidth = timeMin === timeMax ? 0 : (DAY_MS / (timeMax - timeMin)) * plotWidth;
+    const getBandX = (position) => {
+        const groupSize = groupSizes.get(position.marketEndTimestampMs) ?? 1;
+        const ordinal = groupOrdinals.get(position) ?? 0;
+        const center = scaleX(position.marketEndTimestampMs);
+        const spreadWidth = groupSize <= 1
+            ? 0
+            : timeMin === timeMax
+                ? plotWidth / 4
+                : Math.max(dayWidth, BAND_WIDTH * (groupSize + 1));
+        const offset = groupSize <= 1
+            ? 0
+            : (ordinal - (groupSize - 1) / 2) * (spreadWidth / groupSize);
+        const rawX = center + offset - BAND_WIDTH / 2;
+        return clamp(rawX, PLOT_LEFT, PLOT_LEFT + plotWidth - BAND_WIDTH);
+    };
+    const getBandCenterX = (position) => getBandX(position) + BAND_WIDTH / 2;
     const svgChildren = [];
     if (hasOpenPositions) {
         svgChildren.push((0, h_1.h)("defs", null, (0, h_1.h)("pattern", {
@@ -303,7 +697,7 @@ function buildChartArea(theme, btcHistory, positions) {
             strokeWidth: 2,
         }))));
     }
-    priceTicks.forEach((tick) => {
+    priceTicks.ticks.forEach((tick) => {
         const y = scaleY(tick);
         svgChildren.push((0, h_1.h)("line", {
             x1: PLOT_LEFT,
@@ -315,10 +709,23 @@ function buildChartArea(theme, btcHistory, positions) {
             strokeWidth: 1,
         }));
     });
+    if (latestSettlement) {
+        const y = scaleY(latestSettlement.settlementPrice);
+        svgChildren.push((0, h_1.h)("line", {
+            x1: PLOT_LEFT,
+            x2: PLOT_LEFT + plotWidth,
+            y1: y,
+            y2: y,
+            stroke: theme.bitcoin,
+            strokeDasharray: "4 5",
+            strokeWidth: 1.5,
+            strokeOpacity: 0.75,
+        }));
+    }
     renderablePositions.forEach((position) => {
         const topPrice = Math.max(position.lowerPrice, position.upperPrice);
         const bottomPrice = Math.min(position.lowerPrice, position.upperPrice);
-        const x = scaleX(position.marketEndTimestampMs) - BAND_WIDTH / 2;
+        const x = getBandX(position);
         const top = scaleY(topPrice);
         const bottom = scaleY(bottomPrice);
         const height = Math.max(bottom - top, 6);
@@ -330,13 +737,22 @@ function buildChartArea(theme, btcHistory, positions) {
                 height,
                 rx: 6,
                 fill: "url(#profile-open-band)",
+                opacity: 0.4,
                 stroke: theme.bitcoin,
                 strokeWidth: 2,
             }));
             return;
         }
-        const fill = position.status === "WIN" ? theme.primary : theme.negative;
-        const fillOpacity = position.status === "WIN" ? 0.55 : 0.28;
+        const fill = position.status === "WIN"
+            ? theme.primary
+            : position.status === "LOSS"
+                ? theme.negative
+                : theme.inkMuted;
+        const fillOpacity = position.status === "WIN"
+            ? 0.45
+            : position.status === "LOSS"
+                ? 0.28
+                : 0.3;
         svgChildren.push((0, h_1.h)("rect", {
             x,
             y: top,
@@ -346,7 +762,7 @@ function buildChartArea(theme, btcHistory, positions) {
             fill,
             fillOpacity,
             stroke: fill,
-            strokeOpacity: 0.9,
+            strokeOpacity: position.status === "CLOSED" ? 0.55 : 0.9,
         }));
     });
     if (sortedHistory.length === 1) {
@@ -371,14 +787,14 @@ function buildChartArea(theme, btcHistory, positions) {
         if ((position.status === "WIN" || position.status === "LOSS") &&
             position.settlementPrice != null) {
             svgChildren.push((0, h_1.h)("circle", {
-                cx: scaleX(position.marketEndTimestampMs),
+                cx: getBandCenterX(position),
                 cy: scaleY(position.settlementPrice),
                 r: 4.5,
                 fill: position.status === "WIN" ? theme.primary : theme.negative,
             }));
         }
     });
-    const labelNodes = priceTicks.map((tick) => (0, h_1.h)("div", {
+    const labelNodes = priceTicks.ticks.map((tick) => (0, h_1.h)("div", {
         style: {
             position: "absolute",
             left: 12,
@@ -390,7 +806,26 @@ function buildChartArea(theme, btcHistory, positions) {
             background: theme.card,
             padding: "0 4px",
         },
-    }, formatAxisLabel(tick)));
+    }, formatAxisLabel(tick, priceTicks.step)));
+    const settlementLabel = latestSettlement == null
+        ? []
+        : [
+            (0, h_1.h)("div", {
+                style: {
+                    position: "absolute",
+                    left: PLOT_LEFT + plotWidth - 64,
+                    top: scaleY(latestSettlement.settlementPrice) - 14,
+                    display: "flex",
+                    fontSize: 14,
+                    fontWeight: 700,
+                    color: theme.bitcoin,
+                    background: theme.card,
+                    border: `1px solid ${theme.bitcoin}`,
+                    borderRadius: 999,
+                    padding: "4px 10px",
+                },
+            }, formatAxisLabel(latestSettlement.settlementPrice, priceTicks.step)),
+        ];
     return (0, h_1.h)("div", {
         style: {
             width: CHART_WIDTH,
@@ -398,9 +833,6 @@ function buildChartArea(theme, btcHistory, positions) {
             display: "flex",
             position: "relative",
             overflow: "hidden",
-            background: theme.neutralBg,
-            border: `1px solid ${theme.border}`,
-            borderRadius: 20,
         },
     }, (0, h_1.h)("svg", {
         width: CHART_WIDTH,
@@ -412,43 +844,15 @@ function buildChartArea(theme, btcHistory, positions) {
             display: "flex",
             pointerEvents: "none",
         },
-    }, ...svgChildren), ...labelNodes);
-}
-function buildStatCard(label, value, valueColor, theme) {
-    return (0, h_1.h)("div", {
-        style: {
-            flex: 1,
-            display: "flex",
-            flexDirection: "column",
-            padding: "16px 18px",
-            borderRadius: 18,
-            border: `1px solid ${theme.border}`,
-            background: theme.neutralBg,
-        },
-    }, (0, h_1.h)("div", {
-        style: {
-            display: "flex",
-            fontSize: 14,
-            fontWeight: 500,
-            color: theme.inkMuted,
-            marginBottom: 10,
-        },
-    }, label), (0, h_1.h)("div", {
-        style: {
-            display: "flex",
-            fontSize: 28,
-            lineHeight: 1.1,
-            fontWeight: 700,
-            color: valueColor,
-        },
-    }, value));
+    }, ...svgChildren), ...labelNodes, ...settlementLabel);
 }
 function buildProfileVNode(input) {
     const theme = OG_THEMES[input.theme];
-    const accent = TIER_ACCENT_COLORS[input.tier];
     const mainText = buildMainText(input);
     const subline = buildSubline(input);
-    const pnlValue = input.hideAmounts ? "••••" : formatProfilePnl(input.totalPnl);
+    const pnlValue = input.hideAmounts
+        ? "••••"
+        : formatProfilePnl(input.totalPnl);
     const roiValue = formatProfileRoi(input.roi);
     const bestMultValue = formatBestMult(input.bestMult);
     return (0, h_1.h)("div", {
@@ -470,79 +874,18 @@ function buildProfileVNode(input) {
             border: `1px solid ${theme.border}`,
             borderRadius: 24,
         },
-    }, (0, h_1.h)("div", {
-        style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-        },
-    }, (0, h_1.h)("div", {
-        style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 10,
-        },
-    }, (0, h_1.h)("img", {
-        src: assets_1.SIGNALS_LOGO_URI,
-        width: 34,
-        height: 32,
-        style: { display: "flex" },
-    }), (0, h_1.h)("div", {
-        style: {
-            display: "flex",
-            fontSize: 28,
-            fontWeight: 700,
-            color: theme.primary,
-        },
-    }, "Signals")), (0, h_1.h)("div", {
-        style: {
-            display: "flex",
-            fontSize: 18,
-            fontWeight: 700,
-            letterSpacing: "0.04em",
-            textTransform: "uppercase",
-            color: accent,
-        },
-    }, input.tier)), (0, h_1.h)("div", {
+    }, buildHeader(input, theme, mainText, subline), (0, h_1.h)("div", {
         style: {
             flex: 1,
             display: "flex",
             flexDirection: "column",
-            marginTop: 20,
-        },
-    }, (0, h_1.h)("div", {
-        style: {
-            display: "flex",
-            flexDirection: "column",
+            marginTop: 22,
         },
     }, (0, h_1.h)("div", {
         style: {
             display: "flex",
-            fontSize: 52,
-            lineHeight: 1.05,
-            fontWeight: 700,
-            color: theme.ink,
-            marginBottom: 10,
-        },
-    }, mainText), (0, h_1.h)("div", {
-        style: {
-            display: "flex",
-            fontSize: 20,
-            fontWeight: 500,
-            color: theme.inkMuted,
-        },
-    }, subline)), (0, h_1.h)("div", {
-        style: {
-            display: "flex",
-            marginTop: 24,
-        },
-    }, buildChartArea(theme, input.btcHistory, input.positions)), (0, h_1.h)("div", {
-        style: {
-            display: "flex",
-            gap: 16,
-            marginTop: 20,
         },
-    }, buildStatCard("P&L", pnlValue, getSignedValueColor(input.totalPnl, theme), theme), buildStatCard("ROI", roiValue, getSignedValueColor(input.roi, theme), theme), buildStatCard("Best call", bestMultValue, theme.primary, theme)), (0, h_1.h)("div", {
+    }, buildChartArea(theme, input.btcHistory, input.positions)), buildStatRow(input, theme, pnlValue, roiValue, bestMultValue), (0, h_1.h)("div", {
         style: {
             display: "flex",
             justifyContent: "flex-end",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signals-protocol/v1-sdk",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Signals v1 SDK for CLMSR market calculations and utilities",
   "main": "dist/index.js",
   "module": "dist/index.js",