@sketchlog/react 1.2.3

package/README.md

@@ -0,0 +1,24 @@
+# `@sketchlog/react`
+
+React components for a live SketchLog stream.
+
+```tsx
+import {
+  SketchLogProvider,
+  QuantileHeatmap,
+  CardinalitySparkline,
+} from "@sketchlog/react";
+
+export function Dashboard() {
+  return (
+    <SketchLogProvider url="wss://metrics.example/v1/streams/api/ws">
+      <QuantileHeatmap />
+      <CardinalitySparkline />
+    </SketchLogProvider>
+  );
+}
+```
+
+For authenticated browser connections, have a same-site gateway set the
+`sketchlog_auth` cookie with `HttpOnly`, `Secure`, and an appropriate
+`SameSite` policy before opening the WebSocket. Tokens are not placed in URLs.

package/dist/components/CDFCurve.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface CDFCurveProps {
+    width?: number;
+    height?: number;
+    color?: string;
+    className?: string;
+}
+export declare const CDFCurve: React.FC<CDFCurveProps>;

package/dist/components/CardinalitySparkline.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface CardinalitySparklineProps {
+    width?: number;
+    height?: number;
+    color?: string;
+    historySize?: number;
+    className?: string;
+}
+export declare const CardinalitySparkline: React.FC<CardinalitySparklineProps>;

package/dist/components/QuantileHeatmap.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface QuantileHeatmapProps {
+    width?: number;
+    height?: number;
+    colorScheme?: readonly string[] | string | ((value: number) => string);
+    historySize?: number;
+    className?: string;
+}
+export declare const QuantileHeatmap: React.FC<QuantileHeatmapProps>;

package/dist/components/SketchLogContext.d.ts

@@ -0,0 +1,3 @@
+import type { SketchLogContextType } from '../types';
+export declare const SketchLogContext: import("react").Context<SketchLogContextType>;
+export declare const useSketchLog: () => SketchLogContextType;

package/dist/components/SketchLogProvider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+export interface SketchLogProviderProps {
+    url: string;
+    children: ReactNode;
+}
+export declare const SketchLogProvider: React.FC<SketchLogProviderProps>;

package/dist/counter.d.ts

@@ -0,0 +1,2 @@
+import type { SketchLogCounter } from './types';
+export declare function counterToNumber(value: SketchLogCounter): number;

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react");c=s(c,1);let l=require("react-use-websocket");l=s(l,1);let u=require("react/jsx-runtime"),d=require("d3");d=s(d,1);var f=(0,c.createContext)({state:null,isConnected:!1,error:null}),p=()=>(0,c.useContext)(f),m=({url:e,children:t})=>{let[n,r]=(0,c.useState)(null),[i,a]=(0,c.useState)(null),{lastJsonMessage:o,readyState:s}=(0,l.default)(e,{shouldReconnect:()=>!0,reconnectAttempts:10,reconnectInterval:3e3,onError:()=>a(Error(`WebSocket connection error`))});(0,c.useEffect)(()=>{if(!o)return;let e=window.setTimeout(()=>{`error`in o?(a(Error(o.error)),r(null)):(r(o),a(null))},0);return()=>window.clearTimeout(e)},[o]);let d=s===1;return(0,u.jsx)(f.Provider,{value:{state:n,isConnected:d,error:i},children:t})};function h(e){let t=typeof e==`string`?Number(e):e;return Number.isFinite(t)&&t>=0?t:0}function g(e,t){let n=(1+e)/(1-e);return 2/(1+n)*n**+t}var _=({width:e=600,height:t=300,color:n=`#8b5cf6`,className:r=``})=>{let{state:i,isConnected:a}=p(),o=(0,c.useRef)(null),s=(0,c.useMemo)(()=>{if(!i||!i.latency)return[];let e=i.latency,t=0,n=[],r=h(e.count);if(r===0)return[];let a=Object.keys(e.negative).map(Number).sort((e,t)=>t-e);for(let i of a)t+=h(e.negative[i]),n.push({x:-g(e.alpha,i),y:t/r});h(e.zero_count)>0&&(t+=h(e.zero_count),n.push({x:0,y:t/r}));let o=Object.keys(e.positive).map(Number).sort((e,t)=>e-t);for(let i of o)t+=h(e.positive[i]),n.push({x:g(e.alpha,i),y:t/r});return n.length>0&&(n[n.length-1].y=1),n},[i]);return(0,c.useEffect)(()=>{if(!o.current||s.length===0)return;let r=d.select(o.current);r.selectAll(`*`).remove();let i={top:20,right:30,bottom:40,left:50},a=e-i.left-i.right,c=t-i.top-i.bottom,l=d.scaleLog().domain([Math.max(.1,s[0].x>0?s[0].x:.1),Math.max(.1,d.max(s,e=>e.x)||100)]).range([0,a]).clamp(!0),u=d.scaleLinear().domain([0,1]).range([c,0]),f=r.append(`g`).attr(`transform`,`translate(${i.left},${i.top})`);f.append(`g`).attr(`class`,`grid`).attr(`transform`,`translate(0,${c})`).call(d.axisBottom(l).ticks(5).tickSize(-c).tickFormat(()=>``)).attr(`stroke-opacity`,.1).attr(`stroke`,`currentColor`),f.append(`g`).attr(`class`,`grid`).call(d.axisLeft(u).ticks(5).tickSize(-a).tickFormat(()=>``)).attr(`stroke-opacity`,.1).attr(`stroke`,`currentColor`),f.append(`g`).attr(`transform`,`translate(0,${c})`).call(d.axisBottom(l).ticks(5,`~s`)).attr(`color`,`rgba(255, 255, 255, 0.5)`),f.append(`g`).call(d.axisLeft(u).tickFormat(d.format(`.0%`))).attr(`color`,`rgba(255, 255, 255, 0.5)`);let p=d.line().x(e=>l(Math.max(.1,e.x))).y(e=>u(e.y)).curve(d.curveStepAfter),m=d.area().x(e=>l(Math.max(.1,e.x))).y0(c).y1(e=>u(e.y)).curve(d.curveStepAfter),h=`cdf-gradient-${Math.random().toString(36).substring(2)}`,g=r.append(`defs`).append(`linearGradient`).attr(`id`,h).attr(`x1`,`0%`).attr(`y1`,`0%`).attr(`x2`,`0%`).attr(`y2`,`100%`);g.append(`stop`).attr(`offset`,`0%`).attr(`stop-color`,n).attr(`stop-opacity`,.4),g.append(`stop`).attr(`offset`,`100%`).attr(`stop-color`,n).attr(`stop-opacity`,0),f.append(`path`).datum(s).attr(`fill`,`url(#${h})`).attr(`d`,m).style(`transition`,`d 0.5s ease`),f.append(`path`).datum(s).attr(`fill`,`none`).attr(`stroke`,n).attr(`stroke-width`,2).attr(`stroke-linejoin`,`round`).attr(`stroke-linecap`,`round`).attr(`d`,p).style(`transition`,`d 0.5s ease`)},[s,e,t,n]),(0,u.jsxs)(`div`,{className:`relative rounded-xl overflow-hidden backdrop-blur-md bg-white/5 border border-white/10 p-4 shadow-2xl ${r}`,children:[(0,u.jsx)(`h3`,{className:`text-white/90 font-medium mb-2 text-sm`,children:`Latency CDF`}),(0,u.jsxs)(`div`,{className:`absolute top-4 right-4 flex items-center gap-2`,children:[(0,u.jsxs)(`span`,{className:`relative flex h-2 w-2`,children:[a&&(0,u.jsx)(`span`,{className:`animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75`}),(0,u.jsx)(`span`,{className:`relative inline-flex rounded-full h-2 w-2 ${a?`bg-green-500`:`bg-red-500`}`})]}),(0,u.jsx)(`span`,{className:`text-xs text-white/50`,children:a?`LIVE`:`OFFLINE`})]}),(0,u.jsx)(`svg`,{ref:o,width:e,height:t,className:`w-full h-full text-white/80`,style:{minHeight:t}})]})};function v(e,t){let n=(1+e)/(1-e);return 2/(1+n)*n**+t}var y=({width:e=600,height:t=300,colorScheme:n=d.interpolateInferno,historySize:r=30,className:i=``})=>{let{state:a,isConnected:o}=p(),s=(0,c.useRef)(null),[l,f]=(0,c.useState)([]);return(0,c.useEffect)(()=>{if(!a||!a.latency)return;let e=a.latency,t=Date.now(),n=new Map,i=Object.keys(e.positive).map(Number);for(let t of i)n.set(t,h(e.positive[t]));let o=Object.keys(e.negative).map(Number);for(let t of o)n.set(-t,(n.get(-t)||0)+h(e.negative[t]));h(e.zero_count)>0&&n.set(0,(n.get(0)||0)+h(e.zero_count));let s=window.setTimeout(()=>{f(i=>[...i,{time:t,total:h(e.count),bins:n}].slice(-r))},0);return()=>window.clearTimeout(s)},[a,r]),(0,c.useEffect)(()=>{if(!s.current||l.length===0)return;let i=d.select(s.current);i.selectAll(`*`).remove();let o={top:20,right:10,bottom:30,left:50},c=e-o.left-o.right,u=t-o.top-o.bottom,f=1/0,p=-1/0,m=0,h=[];for(let e=1;e<l.length;e++){let t=l[e-1],n=l[e],r=new Map;for(let[e,i]of n.bins.entries()){let n=t.bins.get(e)||0,a=Math.max(0,i-n);a>0&&(r.set(e,a),f=Math.min(f,e),p=Math.max(p,e),m=Math.max(m,a))}h.push({time:n.time,bins:r})}if(h.length===0||p===-1/0)return;let g=a?.latency?.alpha||.01,_=d.scaleTime().domain([l[0].time,l[l.length-1].time]).range([0,c]),y=d.scaleLinear().domain([f-1,p+1]).range([u,0]),b;b=typeof n==`function`?n:typeof n==`string`?d.interpolateRgb(`rgba(255,255,255,0)`,n):d.piecewise(d.interpolateRgb,[...n]);let x=d.scaleSequential(b).domain([0,m]),S=i.append(`g`).attr(`transform`,`translate(${o.left},${o.top})`),C=c/Math.max(1,r-1),w=Math.abs(y(f)-y(f+1));h.forEach(e=>{for(let[t,n]of e.bins.entries())S.append(`rect`).attr(`x`,_(e.time)-C).attr(`y`,y(t)-w/2).attr(`width`,C+1).attr(`height`,w+1).attr(`fill`,x(n)).attr(`rx`,2).attr(`ry`,2).attr(`opacity`,.9)}),S.append(`g`).attr(`transform`,`translate(0,${u})`).call(d.axisBottom(_).ticks(5)).attr(`color`,`rgba(255, 255, 255, 0.5)`);let T=d.axisLeft(y).tickValues(d.range(f,p+1,Math.max(1,Math.floor((p-f)/5)))).tickFormat(e=>d.format(`.1f`)(v(g,e)));S.append(`g`).call(T).attr(`color`,`rgba(255, 255, 255, 0.5)`)},[l,e,t,n,a,r]),(0,u.jsxs)(`div`,{className:`relative rounded-xl overflow-hidden backdrop-blur-md bg-white/5 border border-white/10 p-4 shadow-2xl ${i}`,children:[(0,u.jsx)(`h3`,{className:`text-white/90 font-medium mb-2 text-sm`,children:`Quantile Heatmap (Live)`}),(0,u.jsx)(`div`,{className:`absolute top-4 right-4 flex items-center gap-2`,children:(0,u.jsxs)(`span`,{className:`relative flex h-2 w-2`,children:[o&&(0,u.jsx)(`span`,{className:`animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75`}),(0,u.jsx)(`span`,{className:`relative inline-flex rounded-full h-2 w-2 ${o?`bg-blue-500`:`bg-red-500`}`})]})}),(0,u.jsx)(`svg`,{ref:s,width:e,height:t,className:`w-full h-full text-white/80`,style:{minHeight:t}})]})},b=({width:e=300,height:t=100,color:n=`#10b981`,historySize:r=60,className:i=``})=>{let{state:a}=p(),o=(0,c.useRef)(null),[s,l]=(0,c.useState)([]);return(0,c.useEffect)(()=>{if(!a)return;let e=h(a.metrics?.unique_count??0),t=Date.now(),n=window.setTimeout(()=>{l(n=>[...n,{time:t,value:e}].slice(-r))},0);return()=>window.clearTimeout(n)},[a,r]),(0,c.useEffect)(()=>{if(!o.current||s.length<2)return;let r=d.select(o.current);r.selectAll(`*`).remove();let i={top:5,right:5,bottom:5,left:5},a=e-i.left-i.right,c=t-i.top-i.bottom,l=d.scaleTime().domain(d.extent(s,e=>e.time)).range([0,a]),u=d.scaleLinear().domain([0,d.max(s,e=>e.value)||10]).range([c,0]),f=r.append(`g`).attr(`transform`,`translate(${i.left},${i.top})`),p=d.line().x(e=>l(e.time)).y(e=>u(e.value)).curve(d.curveMonotoneX),m=d.area().x(e=>l(e.time)).y0(c).y1(e=>u(e.value)).curve(d.curveMonotoneX),h=`spark-gradient-${Math.random().toString(36).substring(2)}`,g=r.append(`defs`).append(`linearGradient`).attr(`id`,h).attr(`x1`,`0%`).attr(`y1`,`0%`).attr(`x2`,`0%`).attr(`y2`,`100%`);g.append(`stop`).attr(`offset`,`0%`).attr(`stop-color`,n).attr(`stop-opacity`,.3),g.append(`stop`).attr(`offset`,`100%`).attr(`stop-color`,n).attr(`stop-opacity`,0),f.append(`path`).datum(s).attr(`fill`,`url(#${h})`).attr(`d`,m).style(`transition`,`d 0.3s linear`),f.append(`path`).datum(s).attr(`fill`,`none`).attr(`stroke`,n).attr(`stroke-width`,2).attr(`stroke-linecap`,`round`).attr(`d`,p).style(`transition`,`d 0.3s linear`);let _=s[s.length-1].value;r.append(`text`).attr(`x`,i.left).attr(`y`,i.top+15).text(d.format(`~s`)(_)).attr(`fill`,`white`).attr(`font-size`,`14px`).attr(`font-weight`,`600`)},[s,e,t,n]),(0,u.jsxs)(`div`,{className:`relative rounded-xl overflow-hidden backdrop-blur-md bg-white/5 border border-white/10 p-2 shadow-xl flex flex-col ${i}`,children:[(0,u.jsx)(`h3`,{className:`text-white/70 font-medium mb-1 text-xs px-2 pt-1`,children:`Estimated Cardinality`}),(0,u.jsx)(`svg`,{ref:o,width:e,height:t,className:`w-full text-white/80`,style:{minHeight:t}})]})};exports.CDFCurve=_,exports.CardinalitySparkline=b,exports.QuantileHeatmap=y,exports.SketchLogContext=f,exports.SketchLogProvider=m,exports.useSketchLog=p;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './types';
+export * from './components/SketchLogProvider';
+export * from './components/SketchLogContext';
+export * from './components/CDFCurve';
+export * from './components/QuantileHeatmap';
+export * from './components/CardinalitySparkline';

package/dist/index.js

@@ -0,0 +1,239 @@
+import { createContext as e, useContext as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import o from "react-use-websocket";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import * as l from "d3";
+//#region src/components/SketchLogContext.ts
+var u = e({
+	state: null,
+	isConnected: !1,
+	error: null
+}), d = () => t(u), f = ({ url: e, children: t }) => {
+	let [r, i] = a(null), [c, l] = a(null), { lastJsonMessage: d, readyState: f } = o(e, {
+		shouldReconnect: () => !0,
+		reconnectAttempts: 10,
+		reconnectInterval: 3e3,
+		onError: () => l(/* @__PURE__ */ Error("WebSocket connection error"))
+	});
+	n(() => {
+		if (!d) return;
+		let e = window.setTimeout(() => {
+			"error" in d ? (l(Error(d.error)), i(null)) : (i(d), l(null));
+		}, 0);
+		return () => window.clearTimeout(e);
+	}, [d]);
+	let p = f === 1;
+	return /* @__PURE__ */ s(u.Provider, {
+		value: {
+			state: r,
+			isConnected: p,
+			error: c
+		},
+		children: t
+	});
+};
+//#endregion
+//#region src/counter.ts
+function p(e) {
+	let t = typeof e == "string" ? Number(e) : e;
+	return Number.isFinite(t) && t >= 0 ? t : 0;
+}
+//#endregion
+//#region src/components/CDFCurve.tsx
+function m(e, t) {
+	let n = (1 + e) / (1 - e);
+	return 2 / (1 + n) * n ** +t;
+}
+var h = ({ width: e = 600, height: t = 300, color: a = "#8b5cf6", className: o = "" }) => {
+	let { state: u, isConnected: f } = d(), h = i(null), g = r(() => {
+		if (!u || !u.latency) return [];
+		let e = u.latency, t = 0, n = [], r = p(e.count);
+		if (r === 0) return [];
+		let i = Object.keys(e.negative).map(Number).sort((e, t) => t - e);
+		for (let a of i) t += p(e.negative[a]), n.push({
+			x: -m(e.alpha, a),
+			y: t / r
+		});
+		p(e.zero_count) > 0 && (t += p(e.zero_count), n.push({
+			x: 0,
+			y: t / r
+		}));
+		let a = Object.keys(e.positive).map(Number).sort((e, t) => e - t);
+		for (let i of a) t += p(e.positive[i]), n.push({
+			x: m(e.alpha, i),
+			y: t / r
+		});
+		return n.length > 0 && (n[n.length - 1].y = 1), n;
+	}, [u]);
+	return n(() => {
+		if (!h.current || g.length === 0) return;
+		let n = l.select(h.current);
+		n.selectAll("*").remove();
+		let r = {
+			top: 20,
+			right: 30,
+			bottom: 40,
+			left: 50
+		}, i = e - r.left - r.right, o = t - r.top - r.bottom, s = l.scaleLog().domain([Math.max(.1, g[0].x > 0 ? g[0].x : .1), Math.max(.1, l.max(g, (e) => e.x) || 100)]).range([0, i]).clamp(!0), c = l.scaleLinear().domain([0, 1]).range([o, 0]), u = n.append("g").attr("transform", `translate(${r.left},${r.top})`);
+		u.append("g").attr("class", "grid").attr("transform", `translate(0,${o})`).call(l.axisBottom(s).ticks(5).tickSize(-o).tickFormat(() => "")).attr("stroke-opacity", .1).attr("stroke", "currentColor"), u.append("g").attr("class", "grid").call(l.axisLeft(c).ticks(5).tickSize(-i).tickFormat(() => "")).attr("stroke-opacity", .1).attr("stroke", "currentColor"), u.append("g").attr("transform", `translate(0,${o})`).call(l.axisBottom(s).ticks(5, "~s")).attr("color", "rgba(255, 255, 255, 0.5)"), u.append("g").call(l.axisLeft(c).tickFormat(l.format(".0%"))).attr("color", "rgba(255, 255, 255, 0.5)");
+		let d = l.line().x((e) => s(Math.max(.1, e.x))).y((e) => c(e.y)).curve(l.curveStepAfter), f = l.area().x((e) => s(Math.max(.1, e.x))).y0(o).y1((e) => c(e.y)).curve(l.curveStepAfter), p = `cdf-gradient-${Math.random().toString(36).substring(2)}`, m = n.append("defs").append("linearGradient").attr("id", p).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
+		m.append("stop").attr("offset", "0%").attr("stop-color", a).attr("stop-opacity", .4), m.append("stop").attr("offset", "100%").attr("stop-color", a).attr("stop-opacity", 0), u.append("path").datum(g).attr("fill", `url(#${p})`).attr("d", f).style("transition", "d 0.5s ease"), u.append("path").datum(g).attr("fill", "none").attr("stroke", a).attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("d", d).style("transition", "d 0.5s ease");
+	}, [
+		g,
+		e,
+		t,
+		a
+	]), /* @__PURE__ */ c("div", {
+		className: `relative rounded-xl overflow-hidden backdrop-blur-md bg-white/5 border border-white/10 p-4 shadow-2xl ${o}`,
+		children: [
+			/* @__PURE__ */ s("h3", {
+				className: "text-white/90 font-medium mb-2 text-sm",
+				children: "Latency CDF"
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "absolute top-4 right-4 flex items-center gap-2",
+				children: [/* @__PURE__ */ c("span", {
+					className: "relative flex h-2 w-2",
+					children: [f && /* @__PURE__ */ s("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }), /* @__PURE__ */ s("span", { className: `relative inline-flex rounded-full h-2 w-2 ${f ? "bg-green-500" : "bg-red-500"}` })]
+				}), /* @__PURE__ */ s("span", {
+					className: "text-xs text-white/50",
+					children: f ? "LIVE" : "OFFLINE"
+				})]
+			}),
+			/* @__PURE__ */ s("svg", {
+				ref: h,
+				width: e,
+				height: t,
+				className: "w-full h-full text-white/80",
+				style: { minHeight: t }
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/QuantileHeatmap.tsx
+function g(e, t) {
+	let n = (1 + e) / (1 - e);
+	return 2 / (1 + n) * n ** +t;
+}
+var _ = ({ width: e = 600, height: t = 300, colorScheme: r = l.interpolateInferno, historySize: o = 30, className: u = "" }) => {
+	let { state: f, isConnected: m } = d(), h = i(null), [_, v] = a([]);
+	return n(() => {
+		if (!f || !f.latency) return;
+		let e = f.latency, t = Date.now(), n = /* @__PURE__ */ new Map(), r = Object.keys(e.positive).map(Number);
+		for (let t of r) n.set(t, p(e.positive[t]));
+		let i = Object.keys(e.negative).map(Number);
+		for (let t of i) n.set(-t, (n.get(-t) || 0) + p(e.negative[t]));
+		p(e.zero_count) > 0 && n.set(0, (n.get(0) || 0) + p(e.zero_count));
+		let a = window.setTimeout(() => {
+			v((r) => [...r, {
+				time: t,
+				total: p(e.count),
+				bins: n
+			}].slice(-o));
+		}, 0);
+		return () => window.clearTimeout(a);
+	}, [f, o]), n(() => {
+		if (!h.current || _.length === 0) return;
+		let n = l.select(h.current);
+		n.selectAll("*").remove();
+		let i = {
+			top: 20,
+			right: 10,
+			bottom: 30,
+			left: 50
+		}, a = e - i.left - i.right, s = t - i.top - i.bottom, c = Infinity, u = -Infinity, d = 0, p = [];
+		for (let e = 1; e < _.length; e++) {
+			let t = _[e - 1], n = _[e], r = /* @__PURE__ */ new Map();
+			for (let [e, i] of n.bins.entries()) {
+				let n = t.bins.get(e) || 0, a = Math.max(0, i - n);
+				a > 0 && (r.set(e, a), c = Math.min(c, e), u = Math.max(u, e), d = Math.max(d, a));
+			}
+			p.push({
+				time: n.time,
+				bins: r
+			});
+		}
+		if (p.length === 0 || u === -Infinity) return;
+		let m = f?.latency?.alpha || .01, v = l.scaleTime().domain([_[0].time, _[_.length - 1].time]).range([0, a]), y = l.scaleLinear().domain([c - 1, u + 1]).range([s, 0]), b;
+		b = typeof r == "function" ? r : typeof r == "string" ? l.interpolateRgb("rgba(255,255,255,0)", r) : l.piecewise(l.interpolateRgb, [...r]);
+		let x = l.scaleSequential(b).domain([0, d]), S = n.append("g").attr("transform", `translate(${i.left},${i.top})`), C = a / Math.max(1, o - 1), w = Math.abs(y(c) - y(c + 1));
+		p.forEach((e) => {
+			for (let [t, n] of e.bins.entries()) S.append("rect").attr("x", v(e.time) - C).attr("y", y(t) - w / 2).attr("width", C + 1).attr("height", w + 1).attr("fill", x(n)).attr("rx", 2).attr("ry", 2).attr("opacity", .9);
+		}), S.append("g").attr("transform", `translate(0,${s})`).call(l.axisBottom(v).ticks(5)).attr("color", "rgba(255, 255, 255, 0.5)");
+		let T = l.axisLeft(y).tickValues(l.range(c, u + 1, Math.max(1, Math.floor((u - c) / 5)))).tickFormat((e) => l.format(".1f")(g(m, e)));
+		S.append("g").call(T).attr("color", "rgba(255, 255, 255, 0.5)");
+	}, [
+		_,
+		e,
+		t,
+		r,
+		f,
+		o
+	]), /* @__PURE__ */ c("div", {
+		className: `relative rounded-xl overflow-hidden backdrop-blur-md bg-white/5 border border-white/10 p-4 shadow-2xl ${u}`,
+		children: [
+			/* @__PURE__ */ s("h3", {
+				className: "text-white/90 font-medium mb-2 text-sm",
+				children: "Quantile Heatmap (Live)"
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "absolute top-4 right-4 flex items-center gap-2",
+				children: /* @__PURE__ */ c("span", {
+					className: "relative flex h-2 w-2",
+					children: [m && /* @__PURE__ */ s("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" }), /* @__PURE__ */ s("span", { className: `relative inline-flex rounded-full h-2 w-2 ${m ? "bg-blue-500" : "bg-red-500"}` })]
+				})
+			}),
+			/* @__PURE__ */ s("svg", {
+				ref: h,
+				width: e,
+				height: t,
+				className: "w-full h-full text-white/80",
+				style: { minHeight: t }
+			})
+		]
+	});
+}, v = ({ width: e = 300, height: t = 100, color: r = "#10b981", historySize: o = 60, className: u = "" }) => {
+	let { state: f } = d(), m = i(null), [h, g] = a([]);
+	return n(() => {
+		if (!f) return;
+		let e = p(f.metrics?.unique_count ?? 0), t = Date.now(), n = window.setTimeout(() => {
+			g((n) => [...n, {
+				time: t,
+				value: e
+			}].slice(-o));
+		}, 0);
+		return () => window.clearTimeout(n);
+	}, [f, o]), n(() => {
+		if (!m.current || h.length < 2) return;
+		let n = l.select(m.current);
+		n.selectAll("*").remove();
+		let i = {
+			top: 5,
+			right: 5,
+			bottom: 5,
+			left: 5
+		}, a = e - i.left - i.right, o = t - i.top - i.bottom, s = l.scaleTime().domain(l.extent(h, (e) => e.time)).range([0, a]), c = l.scaleLinear().domain([0, l.max(h, (e) => e.value) || 10]).range([o, 0]), u = n.append("g").attr("transform", `translate(${i.left},${i.top})`), d = l.line().x((e) => s(e.time)).y((e) => c(e.value)).curve(l.curveMonotoneX), f = l.area().x((e) => s(e.time)).y0(o).y1((e) => c(e.value)).curve(l.curveMonotoneX), p = `spark-gradient-${Math.random().toString(36).substring(2)}`, g = n.append("defs").append("linearGradient").attr("id", p).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
+		g.append("stop").attr("offset", "0%").attr("stop-color", r).attr("stop-opacity", .3), g.append("stop").attr("offset", "100%").attr("stop-color", r).attr("stop-opacity", 0), u.append("path").datum(h).attr("fill", `url(#${p})`).attr("d", f).style("transition", "d 0.3s linear"), u.append("path").datum(h).attr("fill", "none").attr("stroke", r).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("d", d).style("transition", "d 0.3s linear");
+		let _ = h[h.length - 1].value;
+		n.append("text").attr("x", i.left).attr("y", i.top + 15).text(l.format("~s")(_)).attr("fill", "white").attr("font-size", "14px").attr("font-weight", "600");
+	}, [
+		h,
+		e,
+		t,
+		r
+	]), /* @__PURE__ */ c("div", {
+		className: `relative rounded-xl overflow-hidden backdrop-blur-md bg-white/5 border border-white/10 p-2 shadow-xl flex flex-col ${u}`,
+		children: [/* @__PURE__ */ s("h3", {
+			className: "text-white/70 font-medium mb-1 text-xs px-2 pt-1",
+			children: "Estimated Cardinality"
+		}), /* @__PURE__ */ s("svg", {
+			ref: m,
+			width: e,
+			height: t,
+			className: "w-full text-white/80",
+			style: { minHeight: t }
+		})]
+	});
+};
+//#endregion
+export { h as CDFCurve, v as CardinalitySparkline, _ as QuantileHeatmap, u as SketchLogContext, f as SketchLogProvider, d as useSketchLog };

package/dist/types.d.ts

@@ -0,0 +1,42 @@
+export type SketchLogCounter = number | string;
+export interface SketchLogLatencyState {
+    alpha: number;
+    zero_count: SketchLogCounter;
+    count: SketchLogCounter;
+    min: number | null;
+    max: number | null;
+    positive: Record<string, SketchLogCounter>;
+    negative: Record<string, SketchLogCounter>;
+}
+export interface SketchLogEventsState {
+    width: number;
+    depth: number;
+    table: SketchLogCounter[][];
+    total: SketchLogCounter;
+}
+export interface SketchLogUniquesState {
+    precision: number;
+    registers: number[];
+}
+export interface SketchLogState {
+    version: number;
+    total: SketchLogCounter;
+    deterministic: boolean;
+    latency: SketchLogLatencyState;
+    events: SketchLogEventsState;
+    uniques: SketchLogUniquesState;
+    metrics?: {
+        p50: number;
+        p95: number;
+        p99: number;
+        p99_9: number;
+        unique_count: SketchLogCounter;
+        total_events: SketchLogCounter;
+        memory_footprint_bytes: SketchLogCounter;
+    };
+}
+export interface SketchLogContextType {
+    state: SketchLogState | null;
+    isConnected: boolean;
+    error: Error | null;
+}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@sketchlog/react",
+  "private": false,
+  "version": "1.2.3",
+  "description": "React provider, hooks, and visualizations for SketchLog streams",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": ["dist", "README.md"],
+  "keywords": ["sketchlog", "react", "observability", "visualization"],
+  "author": "Bala Vignesh S",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SBALAVIGNESH123/sketchlog.git",
+    "directory": "frontend/react-sketchlog"
+  },
+  "bugs": {
+    "url": "https://github.com/SBALAVIGNESH123/sketchlog/issues"
+  },
+  "homepage": "https://github.com/SBALAVIGNESH123/sketchlog/tree/main/frontend/react-sketchlog",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build && tsc -p tsconfig.lib.json",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "d3": "^7.9.0",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-use-websocket": "^4.13.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/d3": "^7.4.3",
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@testing-library/react": "^16.3.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "eslint": "^10.5.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "globals": "^17.6.0",
+    "jsdom": "^26.1.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.61.0",
+    "vite": "^8.1.0",
+    "vitest": "^3.2.4"
+  }
+}