@graphysdk/react 0.0.1

package/dist/index.cjs

@@ -0,0 +1,2 @@
+require('./index.css');
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),v=require("motion/react"),h=require("react"),l=require("@graphysdk/viz-engine"),N=require("clsx"),A=require("d3-shape"),Z=require("d3-interpolate-path"),J=require("@vanilla-extract/dynamic");typeof window<"u"&&(window.__GRAPHY_SDK__??={},window.__GRAPHY_SDK__.reactRenderer="0.0.1");const Q=/\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu,G="😀";class C{constructor(){this.emojiCorrections=new Map,this.currentFont="";const r=new OffscreenCanvas(1,1).getContext("2d");if(!r)throw new Error("Failed to create OffscreenCanvas 2D context");this.ctx=r}static async create(){return typeof document<"u"&&document.fonts&&await document.fonts.ready,new C}measureText(t,r){const o=rt(r);this.setFont(o);const{width:n,fontBoundingBoxAscent:a,fontBoundingBoxDescent:s}=this.ctx.measureText(t);let c=n;const u=tt(t);if(u>0){const d=this.getEmojiCorrection(o);c-=d*u}return{width:c,height:a+s,ascent:a,descent:s}}setFont(t){this.currentFont!==t&&(this.ctx.font=t,this.currentFont=t)}getEmojiCorrection(t){const r=this.emojiCorrections.get(t);if(r!==void 0)return r;this.setFont(t);const o=this.ctx.measureText(G).width,n=et(t);let a=0;if(n!==null){const s=o-n;a=s>.5?s:0}return this.emojiCorrections.set(t,a),a}}const tt=e=>{const t=e.match(Q);return t?t.length:0},et=e=>{const t=nt();return t?(t.style.font=e,t.getBoundingClientRect().width):null};function rt(e){const t=e.style??l.DEFAULT_FONT_STYLE,r=e.weight??l.DEFAULT_FONT_WEIGHT;return`${t} ${r} ${e.size}px '${e.family}'`}let T=null;const nt=()=>typeof document>"u"?null:(T||(T=document.createElement("span"),T.style.position="absolute",T.style.visibility="hidden",T.style.whiteSpace="nowrap",T.style.left="-9999px",T.textContent=G,document.body.appendChild(T)),T),z=()=>{const[e,t]=h.useState(null);return h.useEffect(()=>{let r=!1;const o=()=>{r||t(ot())};return(async()=>{typeof document<"u"&&document.fonts&&await document.fonts.ready,o()})(),typeof document<"u"&&document.fonts&&document.fonts.addEventListener("loadingdone",o),()=>{r=!0,typeof document<"u"&&document.fonts&&document.fonts.removeEventListener("loadingdone",o)}},[]),e},ot=()=>{try{return new l.CachedTextMeasurer(new C)}catch{return new l.CachedTextMeasurer(new l.HeuristicTextMeasurer)}},at=12,it="sans-serif",st={family:it,size:at},lt=e=>t=>{if(!t.isVisible||t.ticks.length===0)return 0;const r=t.position==="top"||t.position==="bottom",o=t.ticks.map(n=>e.measureText(String(n.value),st));return Math.max(...r?o.map(n=>n.height):o.map(n=>n.width))},ct=20,ut=()=>()=>ct,dt=12,gt=8,ht=12,pt="Inter",ft={family:pt,size:ht},yt=gt+dt,mt=e=>t=>{if(t.items.length===0)return 0;const r=t.position==="top"||t.position==="bottom",o=t.items.map(n=>e.measureText(String(n.value),ft));return r?Math.max(...o.map(n=>n.height)):Math.max(...o.map(n=>n.width))+yt},vt=({spec:e,containerSize:t,externalMeasurements:r})=>{const o=z(),n=h.useMemo(()=>o?{measureAxis:lt(o),measureAxisLabel:ut(),measureLegend:mt(o)}:null,[o]);return h.useMemo(()=>n?new l.LayoutCompiler(n).compile({guides:e.guides,containerSize:t,externalMeasurements:r}):null,[e,t,r,n])},U=!1,w=e=>e.text!==void 0?e.text:e.content?e.content.map(w).join(""):"";var xt="_12eci1n0",R="_1mf2q6u0";const bt=({ref:e,compiled:t,captionRect:r})=>{const{caption:o}=t.config.content;return o===null?null:i.jsx("div",{ref:e,className:xt,style:{width:r.width},children:i.jsx("p",{className:R,children:typeof o=="string"?o:w(o)})})};var Tt="_1q25vjj0";const Et=({ref:e,compiled:t,titleRect:r})=>{const{title:o,subtitle:n}=t.config.content;if(o===null&&n===null)return null;const a=typeof o=="string"?o:o!==null?w(o):"",s=typeof n=="string"?n:n!==null?w(n):"";return i.jsxs("div",{ref:e,className:Tt,style:{width:r.width},children:[o!==null&&i.jsx("h1",{className:R,children:a}),n!==null&&i.jsx("p",{className:R,children:s})]})},y=e=>`${e*100}%`;function _(e){return 1-e}var Lt="pr8m7u0",At="pr8m7u1";const _t=8,kt=({legends:e})=>{const t=h.useMemo(()=>{const r=[];for(const o of e)for(const n of o.items){if(n.normalizedY===null)continue;const a=typeof n.visual.color=="string"?n.visual.color:void 0;r.push({key:`${String(n.value)}${a?`-${a}`:""}`,label:String(n.value),color:a,x:_t,y:y(_(n.normalizedY))})}return r},[e]);return t.length===0?null:i.jsx("div",{className:Lt,children:t.map(r=>i.jsx("span",{className:At,style:{left:r.x,top:r.y,color:r.color},children:r.label},r.key))})};var St="_2hq2f70",jt="x9xdzb0",wt="x9xdzb1",Ct="x9xdzb2",Mt="x9xdzb3",W="x9xdzb4",Rt="x9xdzb5",It="x9xdzb6";const Ft="#9ca3af",Pt=({legends:e})=>e.length===0?null:i.jsx("div",{className:jt,children:e.map((t,r)=>{const o=t.position==="left"||t.position==="right",n=t.aesthetics.includes("size");return i.jsx("div",{className:N.clsx(wt,{[Mt]:o,[Ct]:!o}),children:n?i.jsx(Ot,{legend:t}):i.jsx(Dt,{legend:t})},r)})}),Dt=({legend:e})=>e.items.map(t=>i.jsxs("div",{className:W,children:[i.jsx("span",{className:Rt,style:{backgroundColor:t.visual.color}}),i.jsx("span",{children:String(t.value)})]},`${String(t.value)}${t.visual.color?`-${t.visual.color}`:""}`)),Ot=({legend:e})=>{const t=e.items.map(r=>{const o=Number(r.visual.size);return{key:`${String(r.value)}-${o}`,label:String(r.value),color:typeof r.visual.color=="string"?r.visual.color:void 0,sizeValue:o}}).filter(r=>Number.isFinite(r.sizeValue)&&r.sizeValue>0);return t.length===0?null:t.map(r=>i.jsxs("div",{className:W,children:[i.jsx("span",{className:It,style:{width:r.sizeValue,height:r.sizeValue,backgroundColor:r.color??Ft}}),i.jsx("span",{children:r.label})]},r.key))},Bt=h.memo(function({legends:t,rects:r}){const o=h.useMemo(()=>{const n=new Map;for(const a of t){const s=n.get(a.position);s?s.push(a):n.set(a.position,[a])}return n},[t]);return i.jsx(i.Fragment,{children:Array.from(o,([n,a])=>{const s=r[n];if(s==null)return null;const c=a.filter(d=>d.display==="pill"),u=a.filter(d=>d.display==="direct");return i.jsxs("div",{className:St,style:{left:s.x,top:s.y,width:s.width,height:s.height},children:[i.jsx(Pt,{legends:c}),i.jsx(kt,{legends:u})]},n)})})});var H="wyi2w10";const Nt=({axisRects:e})=>i.jsxs(i.Fragment,{children:[S("top",e.top),S("right",e.right),S("bottom",e.bottom),S("left",e.left)]}),S=(e,t)=>t?i.jsxs("g",{transform:`translate(${t.x}, ${t.y})`,children:[U,i.jsxs("text",{className:H,x:t.width/2,y:t.height/2,textAnchor:"middle",dominantBaseline:"middle",children:[e," axis"]})]},`axis-${e}`):null,Gt=({axisLabelRects:e})=>i.jsxs(i.Fragment,{children:[j("top",e.top),j("right",e.right),j("bottom",e.bottom),j("left",e.left)]}),j=(e,t)=>{if(!t)return null;const r=zt(e,t);return i.jsxs("g",{transform:`translate(${t.x}, ${t.y})`,children:[U,i.jsxs("text",{className:H,...r,children:[e," axis label"]})]},`axis-label-${e}`)},zt=(e,t)=>{const r={x:t.width/2,y:t.height/2,textAnchor:"middle",dominantBaseline:"middle"};return e==="left"?(r.x=0,r.textAnchor="start"):e==="right"&&(r.x=t.width,r.textAnchor="end"),r},Ut=l.DEFAULT_COLOR_PALETTE[0],Wt=.3,Ht=1,E={type:"spring",stiffness:500,damping:60,mass:1},Yt=l.DEFAULT_COLOR_PALETTE[0],Vt=1,$t=2,Y=e=>e==="catmull-rom"?A.curveCatmullRom:A.curveLinear,V=e=>{switch(e){case"dashed":return"8 4";case"dotted":return"2 2";case"solid":return}},$=(e,t)=>t.lineWidth!=="auto"?t.lineWidth:l.getStrokeWidth(e)??$t,k=(e,t,r)=>{const o=l.createXValueReader(e,t);return n=>{const a=l.getGroup(n)??"default",s=o(n);return`${r}-${a}${s!==null&&s!==""?`-${s}`:""}`}},I=(e,t)=>{const r=v.useMotionValue(e);return h.useEffect(()=>{const o=Z.interpolatePath(r.get(),e);v.animate(0,1,{...t,onUpdate:n=>{const a=o(n);return r.set(a)}})},[t,e,r]),r};var M="_1wf5x370";const Xt=h.memo(function({layer:t,isAnimated:r}){const o=t.params,n=V(o.lineType),[a,s]=h.useMemo(()=>{const u=Y(o.interpolate),d=g=>_(l.getYMax(g)??l.getY(g)??0),p=A.area().x(g=>l.getX(g)??0).y0(g=>_(l.getYMin(g)??0)).y1(d).curve(u),f=A.line().x(g=>l.getX(g)??0).y(d).curve(u);if(o.missingValues==="gap"){const g=x=>l.getX(x)!==null&&l.getY(x)!==null;p.defined(g),f.defined(g)}return[f,p]},[o.interpolate,o.missingValues]),c=h.useMemo(()=>{const u=k(t.data,t.mapping,t.index),d=[];return t.data.groupBy(l.GROUP_VARIABLES.group).forEach(p=>{let f=[...p];o.missingValues==="connect"&&(f=f.filter(P=>l.getX(P)!==null&&l.getY(P)!==null));const g=s(f),x=a(f);if(!g||!x)return;const m=f[0];if(!m)return;const b=l.getColor(m)??Ut,L=l.getAlpha(m),q=$(m,o);d.push({key:u(m),areaPath:g,linePath:x,color:b,fillOpacity:L??Wt,strokeWidth:q,strokeOpacity:Ht,strokeDasharray:n})}),d},[s,a,t.data,t.index,t.mapping,o,n]);return i.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",width:"100%",height:"100%","data-geom":"area",className:M,children:c.map(u=>i.jsx(Kt,{areaPath:u.areaPath,linePath:u.linePath,color:u.color,fillOpacity:u.fillOpacity,strokeWidth:u.strokeWidth,strokeOpacity:u.strokeOpacity,strokeDasharray:u.strokeDasharray,isAnimated:r},u.key))})}),Kt=({areaPath:e,linePath:t,color:r,fillOpacity:o,strokeWidth:n,strokeOpacity:a,strokeDasharray:s,isAnimated:c})=>c?i.jsx(qt,{areaPath:e,linePath:t,color:r,fillOpacity:o,strokeWidth:n,strokeOpacity:a,strokeDasharray:s}):i.jsxs("g",{children:[i.jsx("path",{d:e,fill:r,fillOpacity:o,stroke:"none"}),i.jsx("path",{d:t,fill:"none",stroke:r,strokeWidth:n,strokeOpacity:a,strokeDasharray:s,vectorEffect:"non-scaling-stroke"})]}),qt=({areaPath:e,linePath:t,color:r,fillOpacity:o,strokeWidth:n,strokeOpacity:a,strokeDasharray:s})=>{const c=I(e,E),u=I(t,E);return i.jsxs("g",{children:[i.jsx(v.motion.path,{d:c,fill:r,fillOpacity:o,stroke:"none"}),i.jsx(v.motion.path,{d:u,fill:"none",stroke:r,strokeWidth:n,strokeOpacity:a,strokeDasharray:s,vectorEffect:"non-scaling-stroke"})]})},Zt=l.DEFAULT_COLOR_PALETTE[0],Jt=1,D=4,Qt=h.memo(function({layer:t,isAnimated:r}){const o=h.useMemo(()=>{const n=k(t.data,t.mapping,t.index),a=[];for(const s of t.data){const c=n(s),u=l.getXMin(s),d=l.getXMax(s),p=l.getYMin(s),f=l.getYMax(s)??l.getY(s);if(u===null||d===null||p===null||f===null)continue;const g=l.getColor(s),x=l.getAlpha(s);let m=1-f,b=f-p;b<0&&(m+=b,b=-b),a.push({key:c,x:u,y:m,width:d-u,height:b,fill:g??Zt,opacity:x??Jt})}return a},[t.data,t.index,t.mapping]);return i.jsx(i.Fragment,{children:o.map(n=>{const{key:a,...s}=n;return i.jsx(te,{...s,isAnimated:r},a)})})}),te=({isAnimated:e,...t})=>e?i.jsx(v.motion.rect,{initial:!1,style:{transformBox:"view-box"},transition:E,fill:t.fill,opacity:t.opacity,rx:D,animate:{x:y(t.x),y:y(t.y),width:y(t.width),height:y(t.height),opacity:t.opacity}}):i.jsx("rect",{style:{transformBox:"view-box"},x:y(t.x),y:y(t.y),width:y(t.width),height:y(t.height),fill:t.fill,opacity:t.opacity,rx:D}),ee=h.memo(function({layer:t,isAnimated:r}){const o=t.params,n=V(o.lineType),a=h.useMemo(()=>{const c=A.line().x(u=>l.getX(u)??0).y(u=>_(l.getY(u)??0)).curve(Y(o.interpolate));return o.missingValues==="gap"&&c.defined(u=>l.getX(u)!==null&&l.getY(u)!==null),c},[o.interpolate,o.missingValues]),s=h.useMemo(()=>{const c=k(t.data,t.mapping,t.index),u=[];return t.data.groupBy(l.GROUP_VARIABLES.group).forEach(d=>{let p=[...d];o.missingValues==="connect"&&(p=p.filter(L=>l.getX(L)!==null&&l.getY(L)!==null));const f=a(p);if(!f)return;const g=p[0];if(!g)return;const x=l.getColor(g)??Yt,m=l.getAlpha(g),b=$(g,o);u.push({key:c(g),pathData:f,color:x,opacity:m??Vt,strokeWidth:b,strokeDasharray:n})}),u},[a,t.data,t.index,t.mapping,o,n]);return i.jsx("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",width:"100%",height:"100%","data-geom":"line",className:M,children:s.map(c=>i.jsx(re,{pathData:c.pathData,color:c.color,strokeWidth:c.strokeWidth,opacity:c.opacity,strokeDasharray:c.strokeDasharray,isAnimated:r},c.key))})}),re=({pathData:e,color:t,strokeWidth:r,opacity:o,strokeDasharray:n,isAnimated:a})=>a?i.jsx(ne,{pathData:e,color:t,strokeWidth:r,opacity:o,strokeDasharray:n}):i.jsx("path",{d:e,fill:"none",stroke:t,strokeWidth:r,opacity:o,strokeDasharray:n,vectorEffect:"non-scaling-stroke"}),ne=({pathData:e,color:t,strokeWidth:r,opacity:o,strokeDasharray:n})=>{const a=I(e,E);return i.jsx(v.motion.path,{d:a,fill:"none",stroke:t,strokeWidth:r,opacity:o,strokeDasharray:n,vectorEffect:"non-scaling-stroke"})},oe=l.DEFAULT_COLOR_PALETTE[0],ae=1,ie=8,se="#000000",le=1,ce=h.memo(function({layer:t,isAnimated:r}){const o=h.useMemo(()=>{const n=k(t.data,t.mapping,t.index),a=[];for(const s of t.data){const c=l.getX(s),u=l.getY(s);if(c===null||u===null)continue;const d=l.getColor(s),p=l.getAlpha(s),f=l.getSize(s),g=l.getStrokeWidth(s);a.push({key:n(s),cx:c,cy:_(u),radius:(f??ie)/2,fill:d??oe,stroke:se,opacity:p??ae,strokeWidth:g??le})}return a},[t.data,t.index,t.mapping]);return i.jsx(i.Fragment,{children:o.map(n=>r?i.jsx(v.motion.circle,{initial:!1,transition:E,fill:n.fill,stroke:n.stroke,strokeWidth:n.strokeWidth,animate:{cx:y(n.cx),cy:y(n.cy),r:n.radius,opacity:n.opacity}},n.key):i.jsx("circle",{cx:y(n.cx),cy:y(n.cy),r:n.radius,fill:n.fill,opacity:n.opacity,stroke:n.stroke,strokeWidth:n.strokeWidth},n.key))})}),ue=l.DEFAULT_COLOR_PALETTE[0],de=1,F=A.arc(),O=Math.PI*2,ge=h.memo(function({layer:t,isAnimated:r}){const o=h.useRef(!1);h.useEffect(()=>{o.current=!0},[]);const n=h.useMemo(()=>{const a=k(t.data,t.mapping,t.index),s=[];for(const c of t.data){const u=a(c),d=l.getStartAngle(c),p=l.getEndAngle(c),f=l.getInnerRadius(c),g=l.getOuterRadius(c);d===null||p===null||f===null||g===null||s.push({key:u,startAngle:d,endAngle:p,innerRadius:f,outerRadius:g,fill:l.getColor(c)??ue,opacity:l.getAlpha(c)??de})}return s},[t.data,t.index,t.mapping]);return i.jsx("svg",{viewBox:"-1 -1 2 2",preserveAspectRatio:"xMidYMid meet",width:"100%",height:"100%","data-geom":"bar",className:M,children:n.map(a=>{if(r){const{key:s,...c}=a;return i.jsx(he,{isInitialRender:!o.current,...c},s)}return i.jsx("path",{d:F({startAngle:a.startAngle,endAngle:a.endAngle,innerRadius:a.innerRadius,outerRadius:a.outerRadius})??void 0,fill:a.fill,opacity:a.opacity},a.key)})})}),he=({startAngle:e,endAngle:t,innerRadius:r,outerRadius:o,fill:n,opacity:a,isInitialRender:s})=>{const c=s?e:O,u=s?t:O,d=v.useSpring(c,E),p=v.useSpring(u,E),f=v.useMotionValue(F({startAngle:c,endAngle:u,innerRadius:r,outerRadius:o})??"");return h.useEffect(()=>{d.set(e),p.set(t)},[d,p,e,t]),h.useEffect(()=>{const g=()=>{const b=d.get(),L=p.get();f.set(F({startAngle:b,endAngle:L,innerRadius:r,outerRadius:o})??"")},x=d.on("change",g),m=p.on("change",g);return()=>{x(),m()}},[d,p,r,o,f]),i.jsx(v.motion.path,{d:f,fill:n,opacity:a,transition:E})},pe=({compiled:e,shouldAnimate:t,panelRect:r})=>i.jsx("svg",{x:r.x,y:r.y,width:r.width,height:r.height,className:M,children:e.layers.map((o,n)=>{const a=`layer-${n}`;switch(o.geom){case"bar":return e.coordSystem.type==="polar"?i.jsx(ge,{layer:o,isAnimated:t},a):i.jsx(Qt,{layer:o,isAnimated:t},a);case"line":return i.jsx(ee,{layer:o,isAnimated:t},a);case"area":return i.jsx(Xt,{layer:o,isAnimated:t},a);case"point":return i.jsx(ce,{layer:o,isAnimated:t},a);default:return i.jsxs("text",{children:[o.geom," not implemented"]},a)}})});var fe="_1ymbsoj0";const X=(e,t)=>({x:e.x-t.x,y:e.y-t.y,width:e.width,height:e.height}),B=(e,t)=>{const r={};for(const[o,n]of Object.entries(e))r[o]=X(n,t);return r},ye=({compiled:e,plotRect:t,panelRect:r,axisRects:o,axisLabelRects:n,shouldAnimate:a})=>{const s=X(r,t),c=B(o,t),u=B(n,t);return i.jsxs("svg",{className:fe,width:t.width,height:t.height,style:{transform:`translate(${t.x}px, ${t.y}px)`},children:[i.jsx(Nt,{axisRects:c}),i.jsx(pe,{compiled:e,shouldAnimate:a,panelRect:s}),i.jsx(Gt,{axisLabelRects:u})]})},me={titleSize:{width:0,height:0},captionSize:{width:0,height:0}},ve=()=>{const e=h.useRef(null),t=h.useRef(null),[r,o]=h.useState(me);return h.useLayoutEffect(()=>{const n=()=>{const s=e.current?.offsetHeight??0,c=t.current?.offsetHeight??0,u=e.current?.offsetWidth??0,d=t.current?.offsetWidth??0;o(p=>p.titleSize.height===s&&p.captionSize.height===c&&p.titleSize.width===u&&p.captionSize.width===d?p:{titleSize:{width:u,height:s},captionSize:{width:d,height:c}})};n();const a=new ResizeObserver(n);return e.current&&a.observe(e.current),t.current&&a.observe(t.current),()=>a.disconnect()},[]),{titleRef:e,captionRef:t,measurements:r}};var xe="znp3wr0";const be=({spec:e,width:t,height:r,isAnimated:o})=>{const n=v.useReducedMotion(),a=h.useMemo(()=>l.compile(e),[e]),{titleRef:s,captionRef:c,measurements:u}=ve(),d=vt({spec:a,containerSize:{width:t,height:r},externalMeasurements:u});return d?i.jsxs("div",{className:xe,style:{width:t,height:r},children:[i.jsx(Et,{ref:s,compiled:a,titleRect:d.title}),i.jsx(ye,{compiled:a,plotRect:d.plot,panelRect:d.panel,axisRects:d.axes,axisLabelRects:d.axisLabels,shouldAnimate:o??!n}),i.jsx(bt,{ref:c,compiled:a,captionRect:d.caption}),i.jsx(Bt,{legends:a.guides.legends,rects:d.legends})]}):null};var K={white:"var(--graphy-white)",black:"var(--graphy-black)",transparent:"var(--graphy-transparent)",grey100:"var(--graphy-grey-100)",grey95:"var(--graphy-grey-95)",grey90:"var(--graphy-grey-90)",grey85:"var(--graphy-grey-85)",grey80:"var(--graphy-grey-80)",grey75:"var(--graphy-grey-75)",grey70:"var(--graphy-grey-70)",grey60:"var(--graphy-grey-60)",grey50:"var(--graphy-grey-50)",grey0:"var(--graphy-grey-0)",greyGradient80:"var(--graphy-grey-gradient-80)",green60:"var(--graphy-green-60)",green50:"var(--graphy-green-50)",red60:"var(--graphy-red-60)",red50:"var(--graphy-red-50)",amber70:"var(--graphy-amber-70)",amber50:"var(--graphy-amber-50)",amber40:"var(--graphy-amber-40)",amber30:"var(--graphy-amber-30)",blue80:"var(--graphy-blue-80)",blue60:"var(--graphy-blue-60)",purple50:"var(--graphy-purple-50)",purple30:"var(--graphy-purple-30)",brand:"var(--graphy-brand)",success:"var(--graphy-success)",warning:"var(--graphy-warning)",alert:"var(--graphy-alert)",textPrimary:"var(--graphy-text-primary)",textSecondary:"var(--graphy-text-secondary)",textDisabled:"var(--graphy-text-disabled)",iconPrimary:"var(--graphy-icon-primary)",iconSecondary:"var(--graphy-icon-secondary)",iconStickerBackground:"var(--graphy-icon-sticker-background)",border100:"var(--graphy-border-100)",border10:"var(--graphy-border-10)",sunkenBackground:"var(--graphy-sunken-background)",defaultBackground:"var(--graphy-default-background)",raisedBackground:"var(--graphy-raised-background)",overlayBackground:"var(--graphy-overlay-background)",overlayBorderGradient:"var(--graphy-overlay-border-gradient)",graphBackground:"var(--graphy-graph-background)",gridLineColor:"var(--graphy-grid-line-color)",hoverGuideLineColor:"var(--graphy-hover-guide-line-color)",originLineColor:"var(--graphy-origin-line-color)",targetLineColor:"var(--graphy-target-line-color)",targetLineMarkerColor:"var(--graphy-target-line-marker-color)",legendBackground:"var(--graphy-legend-background)",legendBorderColor:"var(--graphy-legend-border-color)",legendTextColor:"var(--graphy-legend-text-color)",dimmedSeriesLabelTextColor:"var(--graphy-dimmed-series-label-text-color)",dimmedSeriesLabelLineColor:"var(--graphy-dimmed-series-label-line-color)",trendNegativeColor:"var(--graphy-trend-negative-color)",trendPositiveColor:"var(--graphy-trend-positive-color)",tooltipBackground:"var(--graphy-tooltip-background)",tooltipBorderColor:"var(--graphy-tooltip-border-color)",tooltipHeadingTextColor:"var(--graphy-tooltip-heading-text-color)",tooltipLabelTextColor:"var(--graphy-tooltip-label-text-color)",tooltipValueTextColor:"var(--graphy-tooltip-value-text-color)",heatmapEmptyTileBackground:"var(--graphy-heatmap-empty-tile-background)",stackedBarHoverBorderColor:"var(--graphy-stacked-bar-hover-border-color)",defaultArrowAnnotationColor:"var(--graphy-default-arrow-annotation-color)",annotationFrameBorderColor:"var(--graphy-annotation-frame-border-color)",annotationMenuTriggerIconColor:"var(--graphy-annotation-menu-trigger-icon-color)",fontFamilyDefault:"var(--graphy-font-family-default)",fontFamilyHeading:"var(--graphy-font-family-heading)",fontWeightRegular:"var(--graphy-font-weight-regular)",fontWeightMedium:"var(--graphy-font-weight-medium)",fontWeightSemibold:"var(--graphy-font-weight-semibold)",fontWeightBold:"var(--graphy-font-weight-bold)",fontXxs:"var(--graphy-font-xxs)",fontXs:"var(--graphy-font-xs)",fontSm:"var(--graphy-font-sm)",fontMd:"var(--graphy-font-md)",fontLg:"var(--graphy-font-lg)",fontXl:"var(--graphy-font-xl)",fontEditorBody:"var(--graphy-font-editor-body)",fontHeadingSm:"var(--graphy-font-heading-sm)",fontHeadingMd:"var(--graphy-font-heading-md)",fontHeadingLg:"var(--graphy-font-heading-lg)",fontTickLabel:"var(--graphy-font-tick-label)",fontAxisLabel:"var(--graphy-font-axis-label)",fontDataLabel:"var(--graphy-font-data-label)",fontStackTotal:"var(--graphy-font-stack-total)",fontLegendLabel:"var(--graphy-font-legend-label)",fontSeriesLabel:"var(--graphy-font-series-label)",fontTooltipLabel:"var(--graphy-font-tooltip-label)",fontTooltipHeading:"var(--graphy-font-tooltip-heading)",fontTooltipFooter:"var(--graphy-font-tooltip-footer)",fontJumboTooltipLabel:"var(--graphy-font-jumbo-tooltip-label)",fontJumboTooltip:"var(--graphy-font-jumbo-tooltip)",fontMiniTooltipLabel:"var(--graphy-font-mini-tooltip-label)",fontMiniTooltipFooter:"var(--graphy-font-mini-tooltip-footer)",fontTooltipCaption:"var(--graphy-font-tooltip-caption)",fontTooltipCaptionSmall:"var(--graphy-font-tooltip-caption-small)",fontTrendTag:"var(--graphy-font-trend-tag)",fontTrendTagSmall:"var(--graphy-font-trend-tag-small)",fontGoalLineLabel:"var(--graphy-font-goal-line-label)",fontPieLabel:"var(--graphy-font-pie-label)",fontPieChartTotal:"var(--graphy-font-pie-chart-total)",fontDifferenceArrowSmall:"var(--graphy-font-difference-arrow-small)",fontDifferenceArrowMedium:"var(--graphy-font-difference-arrow-medium)",fontDifferenceArrowLarge:"var(--graphy-font-difference-arrow-large)",fontButton:"var(--graphy-font-button)",fontInput:"var(--graphy-font-input)",fontInputLabel:"var(--graphy-font-input-label)",fontSelectLabel:"var(--graphy-font-select-label)",fontSelectDescription:"var(--graphy-font-select-description)",fontColorSelectLabel:"var(--graphy-font-color-select-label)",fontMenuTitle:"var(--graphy-font-menu-title)",fontMenuGroupTitle:"var(--graphy-font-menu-group-title)",fontMenuItemLabel:"var(--graphy-font-menu-item-label)",fontMenuItemLabelSecondary:"var(--graphy-font-menu-item-label-secondary)",fontUITooltip:"var(--graphy-font-uitooltip)",fontUITooltipSecondary:"var(--graphy-font-uitooltip-secondary)",fontErrorBoundaryTitle:"var(--graphy-font-error-boundary-title)",fontErrorBoundaryMessage:"var(--graphy-font-error-boundary-message)",fontTableCell:"var(--graphy-font-table-cell)",fontTableHeaderCell:"var(--graphy-font-table-header-cell)",fontSourceLabel:"var(--graphy-font-source-label)",fontSourceLink:"var(--graphy-font-source-link)",fontTextEditorH1:"var(--graphy-font-text-editor-h1)",fontTextEditorH2:"var(--graphy-font-text-editor-h2)",fontTextEditorH3:"var(--graphy-font-text-editor-h3)",fontTextEditorH6:"var(--graphy-font-text-editor-h6)",fontTextEditorBody:"var(--graphy-font-text-editor-body)",fontTextEditorLink:"var(--graphy-font-text-editor-link)",fontHighlightModeTitle:"var(--graphy-font-highlight-mode-title)",fontHighlightModeSubtitle:"var(--graphy-font-highlight-mode-subtitle)"},Te="_1rkj4kp0",Ee="_1rkj4kp1";const Le=({theme:e,children:t,className:r,style:o})=>{const n=h.useMemo(()=>{if(!e)return o;const a={};for(const[s,c]of Object.entries(e))c!==void 0&&(a[K[s]]=c);return{...o,...J.assignInlineVars(a)}},[e,o]);return i.jsx("div",{className:N(Te,r),style:n,children:t})};exports.CanvasTextMeasurer=C;exports.GraphRenderer=be;exports.ThemeProvider=Le;exports.darkTheme=Ee;exports.useTextMeasurer=z;exports.vars=K;

package/dist/index.css

@@ -0,0 +1 @@
+._12eci1n0{position:absolute;bottom:0;left:0}._1mf2q6u0{margin:0}._1q25vjj0{position:absolute;top:0;left:0}.pr8m7u0{position:relative;pointer-events:none;height:100%}.pr8m7u1{position:absolute;transform:translateY(-50%);font:var(--graphy-font-legend-label);color:var(--graphy-legend-text-color);white-space:nowrap}._2hq2f70{position:absolute;pointer-events:none}.x9xdzb0{display:flex;flex-direction:column;gap:8px;pointer-events:none;font:var(--graphy-font-legend-label);color:var(--graphy-legend-text-color)}.x9xdzb1{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center}.x9xdzb2{flex-direction:row;gap:16px}.x9xdzb3{flex-direction:column;gap:8px;height:100%}.x9xdzb4{display:flex;align-items:center;gap:8px;white-space:nowrap}.x9xdzb5{display:inline-block;width:12px;height:12px;border-radius:2px}.x9xdzb6{border-radius:50%;opacity:.7}.wyi2w10{fill:var(--graphy-text-primary)}._1wf5x370{overflow:visible}._1ymbsoj0{position:absolute;top:0;left:0;overflow:visible}.znp3wr0{position:relative;background:var(--graphy-graph-background);color:var(--graphy-text-primary)}._1rkj4kp0{--graphy-transparent: transparent;--graphy-white: #ffffff;--graphy-black: #000000;--graphy-grey-100: #FFFFFF;--graphy-grey-95: #FCFCFC;--graphy-grey-90: #FAFAFA;--graphy-grey-85: #F5F5F5;--graphy-grey-80: #F0F0F0;--graphy-grey-75: #e8e8e8;--graphy-grey-70: #E5E5E5;--graphy-grey-60: #CCCCCC;--graphy-grey-50: #C4C4C4;--graphy-grey-0: #1D2129;--graphy-red-60: #E14B49;--graphy-red-50: #F93939;--graphy-amber-70: #FFBA8C;--graphy-amber-50: #FFC849;--graphy-amber-40: #FEAE47;--graphy-amber-30: #e7a816;--graphy-green-60: #06B299;--graphy-green-50: #42CD69;--graphy-blue-80: #2E62FF;--graphy-blue-60: #3D70FF;--graphy-purple-50: #7B56EA;--graphy-purple-30: #E093FE;--graphy-grey-gradient-80: linear-gradient(to top, #F0F0F1, #F9F9FF);--graphy-text-primary: var(--graphy-black);--graphy-text-secondary: color-mix(in srgb, transparent, var(--graphy-text-primary) 60%);--graphy-text-disabled: color-mix(in srgb, transparent, var(--graphy-text-primary) 50%);--graphy-icon-primary: currentColor;--graphy-icon-secondary: color-mix(in srgb, transparent, var(--graphy-text-primary) 60%);--graphy-icon-sticker-background: var(--graphy-grey-100);--graphy-brand: var(--graphy-purple-50);--graphy-success: var(--graphy-green-50);--graphy-warning: var(--graphy-amber-50);--graphy-alert: var(--graphy-red-50);--graphy-border-100: var(--graphy-grey-0);--graphy-border-10: color-mix(in srgb, transparent, var(--graphy-grey-0) 10%);--graphy-sunken-background: var(--graphy-grey-90);--graphy-default-background: var(--graphy-grey-100);--graphy-raised-background: var(--graphy-grey-85);--graphy-overlay-background: var(--graphy-grey-100);--graphy-overlay-border-gradient: none;--graphy-graph-background: var(--graphy-grey-100);--graphy-grid-line-color: var(--graphy-border-10);--graphy-hover-guide-line-color: var(--graphy-grey-0);--graphy-origin-line-color: var(--graphy-grey-0);--graphy-target-line-color: var(--graphy-border-100);--graphy-target-line-marker-color: #A0A6C5;--graphy-legend-background: var(--graphy-default-background);--graphy-legend-border-color: var(--graphy-border-10);--graphy-legend-text-color: var(--graphy-text-primary);--graphy-dimmed-series-label-text-color: var(--graphy-text-disabled);--graphy-dimmed-series-label-line-color: var(--graphy-grey-60);--graphy-trend-negative-color: var(--graphy-red-60);--graphy-trend-positive-color: var(--graphy-green-60);--graphy-tooltip-background: #333;--graphy-tooltip-border-color: #47474B;--graphy-tooltip-heading-text-color: #fff;--graphy-tooltip-label-text-color: #d5d6d9;--graphy-tooltip-value-text-color: #fff;--graphy-heatmap-empty-tile-background: var(--graphy-grey-80);--graphy-stacked-bar-hover-border-color: var(--graphy-grey-0);--graphy-default-arrow-annotation-color: var(--graphy-black);--graphy-annotation-frame-border-color: var(--graphy-blue-60);--graphy-annotation-menu-trigger-icon-color: #3d414c;--graphy-font-family-default: "Inter", -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", "NotoSansArabic", "NotoSansJP", "NotoSansSC", "NotoSansKR", "NotoSerifKR", sans-serif, "Apple Color Emoji", "NotoColorEmoji";--graphy-font-family-heading: "Inter", -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", "NotoSansArabic", "NotoSansJP", "NotoSansSC", "NotoSansKR", "NotoSerifKR", sans-serif, "Apple Color Emoji", "NotoColorEmoji";--graphy-font-weight-regular: 400;--graphy-font-weight-medium: 500;--graphy-font-weight-semibold: 600;--graphy-font-weight-bold: 700;--graphy-font-xxs: 1em/1;--graphy-font-xs: 1.1em/1;--graphy-font-sm: 1.2em/1.3 ;--graphy-font-md: 1.4em/1.43;--graphy-font-lg: 1.6em/1 ;--graphy-font-xl: 2em/1;--graphy-font-editor-body: 1.5em/1.47;--graphy-font-heading-sm: 1.8em/1.25;--graphy-font-heading-md: 2.2em/1.41;--graphy-font-heading-lg: 2.8em/1.29;--graphy-font-tick-label: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-axis-label: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-data-label: var(--graphy-font-weight-medium) var(--graphy-font-xs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-stack-total: var(--graphy-font-weight-semibold) var(--graphy-font-xs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-legend-label: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-series-label: var(--graphy-font-weight-semibold) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-tooltip-label: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-tooltip-heading: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-tooltip-footer: var(--graphy-font-weight-regular) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-jumbo-tooltip-label: var(--graphy-font-weight-regular) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-jumbo-tooltip: var(--graphy-font-weight-medium) var(--graphy-font-heading-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-mini-tooltip-label: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-mini-tooltip-footer: var(--graphy-font-weight-regular) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-tooltip-caption: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-tooltip-caption-small: var(--graphy-font-weight-medium) var(--graphy-font-xxs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-uitooltip: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-uitooltip-secondary: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-trend-tag: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-trend-tag-small: var(--graphy-font-weight-medium) var(--graphy-font-xs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-goal-line-label: var(--graphy-font-weight-medium) var(--graphy-font-xs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-pie-label: var(--graphy-font-weight-medium) var(--graphy-font-xs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-pie-chart-total: var(--graphy-font-weight-bold) var(--graphy-font-heading-lg) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-difference-arrow-small: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-difference-arrow-medium: var(--graphy-font-weight-medium) var(--graphy-font-lg) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-difference-arrow-large: var(--graphy-font-weight-semibold) var(--graphy-font-xl) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-button: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-input: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-input-label: var(--graphy-font-weight-medium) var(--graphy-font-xxs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-select-label: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-select-description: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-color-select-label: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-menu-title: var(--graphy-font-weight-semibold) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-menu-group-title: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-menu-item-label: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-menu-item-label-secondary: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-error-boundary-title: var(--graphy-font-weight-semibold) var(--graphy-font-heading-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-error-boundary-message: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-table-cell: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-table-header-cell: var(--graphy-font-weight-semibold) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-source-label: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-source-link: var(--graphy-font-weight-regular) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-text-editor-h1: var(--graphy-font-weight-bold) var(--graphy-font-heading-lg) var(--typography-chart-heading-font-family, var(--graphy-font-family-heading));--graphy-font-text-editor-h2: var(--graphy-font-weight-bold) var(--graphy-font-heading-md) var(--typography-chart-heading-font-family, var(--graphy-font-family-heading));--graphy-font-text-editor-h3: var(--graphy-font-weight-semibold) var(--graphy-font-heading-sm) var(--typography-chart-heading-font-family, var(--graphy-font-family-heading));--graphy-font-text-editor-h6: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-text-editor-body: var(--graphy-font-weight-medium) var(--graphy-font-editor-body) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-text-editor-link: var(--graphy-font-weight-regular) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-highlight-mode-title: var(--graphy-font-weight-bold) var(--graphy-font-md) var(--graphy-font-family-default);--graphy-font-highlight-mode-subtitle: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--graphy-font-family-default)}._1rkj4kp1{--graphy-transparent: transparent;--graphy-white: #ffffff;--graphy-black: #000000;--graphy-grey-100: #000000;--graphy-grey-95: #0D0D0D;--graphy-grey-90: #1A1A1A;--graphy-grey-85: #1F1F1F;--graphy-grey-80: #2A2A2A;--graphy-grey-75: #2e2e2e;--graphy-grey-70: #353535;--graphy-grey-60: #494949;--graphy-grey-50: #6F6F6F;--graphy-grey-0: #ffffff;--graphy-red-60: #CB3333;--graphy-red-50: #F93939;--graphy-amber-70: #f48135;--graphy-amber-50: #FEAE47;--graphy-amber-40: #FFC849;--graphy-amber-30: #ffd061;--graphy-green-60: #0AC600;--graphy-green-50: #42CD69;--graphy-blue-80: #2E62FF;--graphy-blue-60: #3D70FF;--graphy-purple-50: #7B56EA;--graphy-purple-30: #E093FE;--graphy-grey-gradient-80: linear-gradient(to top, #222429, #31353f);--graphy-text-primary: var(--graphy-grey-0);--graphy-text-secondary: color-mix(in srgb, transparent, var(--graphy-text-primary) 80%);--graphy-text-disabled: color-mix(in srgb, transparent, var(--graphy-text-primary) 50%);--graphy-icon-primary: currentColor;--graphy-icon-secondary: color-mix(in srgb, transparent, var(--graphy-text-primary) 60%);--graphy-icon-sticker-background: var(--graphy-grey-70);--graphy-border-100: var(--graphy-grey-0);--graphy-border-10: color-mix(in srgb, transparent, var(--graphy-grey-0) 10%);--graphy-brand: var(--graphy-purple-50);--graphy-success: var(--graphy-green-50);--graphy-warning: var(--graphy-amber-50);--graphy-alert: var(--graphy-red-50);--graphy-sunken-background: var(--graphy-grey-100);--graphy-default-background: var(--graphy-grey-90);--graphy-raised-background: var(--graphy-grey-80);--graphy-overlay-background: var(--graphy-grey-90);--graphy-overlay-border-gradient: var(--graphy-grey-gradient-80);--graphy-graph-background: var(--graphy-grey-100);--graphy-grid-line-color: var(--graphy-border-10);--graphy-hover-guide-line-color: var(--graphy-grey-0);--graphy-origin-line-color: var(--graphy-grey-0);--graphy-target-line-color: var(--graphy-border-100);--graphy-target-line-marker-color: var(--graphy-border-100);--graphy-legend-background: var(--graphy-default-background);--graphy-legend-border-color: color-mix(in srgb, transparent, var(--graphy-grey-0) 10%);--graphy-legend-text-color: var(--graphy-text-primary);--graphy-dimmed-series-label-text-color: var(--graphy-text-disabled);--graphy-dimmed-series-label-line-color: var(--graphy-grey-60);--graphy-trend-negative-color: var(--graphy-red-60);--graphy-trend-positive-color: var(--graphy-green-60);--graphy-tooltip-background: var(--graphy-grey-70);--graphy-tooltip-border-color: var(--graphy-grey-60);--graphy-tooltip-heading-text-color: var(--graphy-text-primary);--graphy-tooltip-label-text-color: var(--graphy-text-secondary);--graphy-tooltip-value-text-color: var(--graphy-text-primary);--graphy-heatmap-empty-tile-background: var(--graphy-grey-80);--graphy-stacked-bar-hover-border-color: var(--graphy-grey-0);--graphy-default-arrow-annotation-color: var(--graphy-white);--graphy-annotation-frame-border-color: var(--graphy-blue-60);--graphy-annotation-menu-trigger-icon-color: var(--graphy-white);--graphy-font-family-default: "Inter", -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", "NotoSansArabic", "NotoSansJP", "NotoSansSC", "NotoSansKR", "NotoSerifKR", sans-serif, "Apple Color Emoji", "NotoColorEmoji";--graphy-font-family-heading: "Inter", -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", "NotoSansArabic", "NotoSansJP", "NotoSansSC", "NotoSansKR", "NotoSerifKR", sans-serif, "Apple Color Emoji", "NotoColorEmoji";--graphy-font-weight-regular: 400;--graphy-font-weight-medium: 500;--graphy-font-weight-semibold: 600;--graphy-font-weight-bold: 700;--graphy-font-xxs: 1em/1;--graphy-font-xs: 1.1em/1;--graphy-font-sm: 1.2em/1.3 ;--graphy-font-md: 1.4em/1.43;--graphy-font-lg: 1.6em/1 ;--graphy-font-xl: 2em/1;--graphy-font-editor-body: 1.5em/1.47;--graphy-font-heading-sm: 1.8em/1.25;--graphy-font-heading-md: 2.2em/1.41;--graphy-font-heading-lg: 2.8em/1.29;--graphy-font-tick-label: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-axis-label: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-data-label: var(--graphy-font-weight-medium) var(--graphy-font-xs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-stack-total: var(--graphy-font-weight-semibold) var(--graphy-font-xs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-legend-label: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-series-label: var(--graphy-font-weight-semibold) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-tooltip-label: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-tooltip-heading: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-tooltip-footer: var(--graphy-font-weight-regular) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-jumbo-tooltip-label: var(--graphy-font-weight-regular) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-jumbo-tooltip: var(--graphy-font-weight-medium) var(--graphy-font-heading-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-mini-tooltip-label: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-mini-tooltip-footer: var(--graphy-font-weight-regular) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-tooltip-caption: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-tooltip-caption-small: var(--graphy-font-weight-medium) var(--graphy-font-xxs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-uitooltip: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-uitooltip-secondary: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-trend-tag: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-trend-tag-small: var(--graphy-font-weight-medium) var(--graphy-font-xs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-goal-line-label: var(--graphy-font-weight-medium) var(--graphy-font-xs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-pie-label: var(--graphy-font-weight-medium) var(--graphy-font-xs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-pie-chart-total: var(--graphy-font-weight-bold) var(--graphy-font-heading-lg) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-difference-arrow-small: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-difference-arrow-medium: var(--graphy-font-weight-medium) var(--graphy-font-lg) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-difference-arrow-large: var(--graphy-font-weight-semibold) var(--graphy-font-xl) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-button: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-input: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-input-label: var(--graphy-font-weight-medium) var(--graphy-font-xxs) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-select-label: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-select-description: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-color-select-label: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-menu-title: var(--graphy-font-weight-semibold) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-menu-group-title: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-menu-item-label: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-menu-item-label-secondary: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-error-boundary-title: var(--graphy-font-weight-semibold) var(--graphy-font-heading-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-error-boundary-message: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-table-cell: var(--graphy-font-weight-medium) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-table-header-cell: var(--graphy-font-weight-semibold) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-source-label: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-source-link: var(--graphy-font-weight-regular) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-text-editor-h1: var(--graphy-font-weight-bold) var(--graphy-font-heading-lg) var(--typography-chart-heading-font-family, var(--graphy-font-family-heading));--graphy-font-text-editor-h2: var(--graphy-font-weight-bold) var(--graphy-font-heading-md) var(--typography-chart-heading-font-family, var(--graphy-font-family-heading));--graphy-font-text-editor-h3: var(--graphy-font-weight-semibold) var(--graphy-font-heading-sm) var(--typography-chart-heading-font-family, var(--graphy-font-family-heading));--graphy-font-text-editor-h6: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-text-editor-body: var(--graphy-font-weight-medium) var(--graphy-font-editor-body) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-text-editor-link: var(--graphy-font-weight-regular) var(--graphy-font-md) var(--typography-chart-font-family, var(--graphy-font-family-default));--graphy-font-highlight-mode-title: var(--graphy-font-weight-bold) var(--graphy-font-md) var(--graphy-font-family-default);--graphy-font-highlight-mode-subtitle: var(--graphy-font-weight-medium) var(--graphy-font-sm) var(--graphy-font-family-default)}

package/dist/index.d.ts

@@ -0,0 +1,243 @@
+import { CSSProperties } from 'react';
+import { FontSpec } from '@graphysdk/viz-engine';
+import { JSX } from 'react/jsx-runtime';
+import { MeasuredText } from '@graphysdk/viz-engine';
+import { ReactNode } from 'react';
+import { SpecInput } from '@graphysdk/viz-engine';
+import { TextMeasurer } from '@graphysdk/viz-engine';
+
+/**
+ * Browser text measurer backed by OffscreenCanvas.
+ *
+ * Uses the same Canvas `measureText()` API that the rendering engine uses,
+ * ensuring measurement/rendering consistency.
+ *
+ * **Font loading:** Use the async `create()` factory to ensure all declared
+ * `@font-face` fonts are loaded before any measurements. This avoids
+ * measuring against fallback fonts and caching incorrect widths.
+ * The sync constructor is available for controlled environments where font
+ * readiness is managed externally (e.g. backend with pre-registered fonts).
+ *
+ * Includes an emoji correction that compensates for the known discrepancy
+ * where Canvas `measureText()` reports wider widths for emoji than the DOM
+ * actually renders (Chrome/Firefox at font sizes < ~24px). The correction
+ * is computed once per font by comparing Canvas vs DOM measurement of a
+ * reference emoji, then cached.
+ */
+export declare class CanvasTextMeasurer implements TextMeasurer {
+    private readonly ctx;
+    /**
+     * Caches the per-font emoji correction factor.
+     */
+    private readonly emojiCorrections;
+    /**
+     * Tracks the last font string set on the context.
+     */
+    private currentFont;
+    constructor();
+    /**
+     * Creates a CanvasTextMeasurer after all declared `@font-face` fonts
+     * have finished loading. This ensures measurements use the correct font
+     * glyphs from the first call, avoiding stale cache entries.
+     *
+     * Falls back to immediate construction if `document.fonts` is unavailable
+     * (e.g. non-browser environment).
+     *
+     * Note: document.fonts.ready still resolves even if some fonts fail to load.
+     */
+    static create(): Promise<CanvasTextMeasurer>;
+    measureText(text: string, font: FontSpec): MeasuredText;
+    /**
+     * Skip redundant `ctx.font` assignments
+     * Setting the property triggers CSS font string parsing and font resolution.
+     */
+    private setFont;
+    /**
+     * Computes the per-emoji width correction for a given font.
+     * Measures the reference emoji in both Canvas and DOM, caches the difference.
+     * Returns 0 if DOM is unavailable or the difference is negligible (< 0.5px).
+     */
+    private getEmojiCorrection;
+}
+
+export declare const darkTheme: string;
+
+export declare const GraphRenderer: ({ spec, width, height, isAnimated }: GraphRendererProps) => JSX.Element | null;
+
+declare interface GraphRendererProps {
+    spec: SpecInput;
+    width: number;
+    height: number;
+    isAnimated?: boolean;
+}
+
+export declare type ThemeKey = keyof ThemeValues;
+
+export declare type ThemeOverrides = Partial<ThemeValues>;
+
+export declare const ThemeProvider: ({ theme, children, className, style }: ThemeProviderProps) => JSX.Element;
+
+declare interface ThemeProviderProps {
+    theme?: ThemeOverrides;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+
+export declare type ThemeValues = Record<keyof typeof vars, string>;
+
+/**
+ * React hook that returns a font-ready, cached CanvasTextMeasurer.
+ *
+ * Returns `null` until `document.fonts.ready` resolves and the measurer
+ * is constructed. Consumers should gate rendering on a non-null value:
+ *
+ * ```tsx
+ * const measurer = useTextMeasurer();
+ * if (!measurer) return null; // fonts still loading
+ * ```
+ *
+ * Re-creates the measurer when additional fonts finish loading (e.g. in
+ * iframes where `document.fonts.ready` resolves before stylesheets inject
+ * their `@font-face` rules). The new instance gets a fresh cache so stale
+ * measurements from fallback fonts are discarded.
+ *
+ * Falls back to HeuristicTextMeasurer if OffscreenCanvas is unavailable.
+ */
+export declare const useTextMeasurer: () => TextMeasurer | null;
+
+export declare const vars: {
+    white: `var(--${string})`;
+    black: `var(--${string})`;
+    transparent: `var(--${string})`;
+    grey100: `var(--${string})`;
+    grey95: `var(--${string})`;
+    grey90: `var(--${string})`;
+    grey85: `var(--${string})`;
+    grey80: `var(--${string})`;
+    grey75: `var(--${string})`;
+    grey70: `var(--${string})`;
+    grey60: `var(--${string})`;
+    grey50: `var(--${string})`;
+    grey0: `var(--${string})`;
+    greyGradient80: `var(--${string})`;
+    green60: `var(--${string})`;
+    green50: `var(--${string})`;
+    red60: `var(--${string})`;
+    red50: `var(--${string})`;
+    amber70: `var(--${string})`;
+    amber50: `var(--${string})`;
+    amber40: `var(--${string})`;
+    amber30: `var(--${string})`;
+    blue80: `var(--${string})`;
+    blue60: `var(--${string})`;
+    purple50: `var(--${string})`;
+    purple30: `var(--${string})`;
+    brand: `var(--${string})`;
+    success: `var(--${string})`;
+    warning: `var(--${string})`;
+    alert: `var(--${string})`;
+    textPrimary: `var(--${string})`;
+    textSecondary: `var(--${string})`;
+    textDisabled: `var(--${string})`;
+    iconPrimary: `var(--${string})`;
+    iconSecondary: `var(--${string})`;
+    iconStickerBackground: `var(--${string})`;
+    border100: `var(--${string})`;
+    border10: `var(--${string})`;
+    sunkenBackground: `var(--${string})`;
+    defaultBackground: `var(--${string})`;
+    raisedBackground: `var(--${string})`;
+    overlayBackground: `var(--${string})`;
+    overlayBorderGradient: `var(--${string})`;
+    graphBackground: `var(--${string})`;
+    gridLineColor: `var(--${string})`;
+    hoverGuideLineColor: `var(--${string})`;
+    originLineColor: `var(--${string})`;
+    targetLineColor: `var(--${string})`;
+    targetLineMarkerColor: `var(--${string})`;
+    legendBackground: `var(--${string})`;
+    legendBorderColor: `var(--${string})`;
+    legendTextColor: `var(--${string})`;
+    dimmedSeriesLabelTextColor: `var(--${string})`;
+    dimmedSeriesLabelLineColor: `var(--${string})`;
+    trendNegativeColor: `var(--${string})`;
+    trendPositiveColor: `var(--${string})`;
+    tooltipBackground: `var(--${string})`;
+    tooltipBorderColor: `var(--${string})`;
+    tooltipHeadingTextColor: `var(--${string})`;
+    tooltipLabelTextColor: `var(--${string})`;
+    tooltipValueTextColor: `var(--${string})`;
+    heatmapEmptyTileBackground: `var(--${string})`;
+    stackedBarHoverBorderColor: `var(--${string})`;
+    defaultArrowAnnotationColor: `var(--${string})`;
+    annotationFrameBorderColor: `var(--${string})`;
+    annotationMenuTriggerIconColor: `var(--${string})`;
+    fontFamilyDefault: `var(--${string})`;
+    fontFamilyHeading: `var(--${string})`;
+    fontWeightRegular: `var(--${string})`;
+    fontWeightMedium: `var(--${string})`;
+    fontWeightSemibold: `var(--${string})`;
+    fontWeightBold: `var(--${string})`;
+    fontXxs: `var(--${string})`;
+    fontXs: `var(--${string})`;
+    fontSm: `var(--${string})`;
+    fontMd: `var(--${string})`;
+    fontLg: `var(--${string})`;
+    fontXl: `var(--${string})`;
+    fontEditorBody: `var(--${string})`;
+    fontHeadingSm: `var(--${string})`;
+    fontHeadingMd: `var(--${string})`;
+    fontHeadingLg: `var(--${string})`;
+    fontTickLabel: `var(--${string})`;
+    fontAxisLabel: `var(--${string})`;
+    fontDataLabel: `var(--${string})`;
+    fontStackTotal: `var(--${string})`;
+    fontLegendLabel: `var(--${string})`;
+    fontSeriesLabel: `var(--${string})`;
+    fontTooltipLabel: `var(--${string})`;
+    fontTooltipHeading: `var(--${string})`;
+    fontTooltipFooter: `var(--${string})`;
+    fontJumboTooltipLabel: `var(--${string})`;
+    fontJumboTooltip: `var(--${string})`;
+    fontMiniTooltipLabel: `var(--${string})`;
+    fontMiniTooltipFooter: `var(--${string})`;
+    fontTooltipCaption: `var(--${string})`;
+    fontTooltipCaptionSmall: `var(--${string})`;
+    fontTrendTag: `var(--${string})`;
+    fontTrendTagSmall: `var(--${string})`;
+    fontGoalLineLabel: `var(--${string})`;
+    fontPieLabel: `var(--${string})`;
+    fontPieChartTotal: `var(--${string})`;
+    fontDifferenceArrowSmall: `var(--${string})`;
+    fontDifferenceArrowMedium: `var(--${string})`;
+    fontDifferenceArrowLarge: `var(--${string})`;
+    fontButton: `var(--${string})`;
+    fontInput: `var(--${string})`;
+    fontInputLabel: `var(--${string})`;
+    fontSelectLabel: `var(--${string})`;
+    fontSelectDescription: `var(--${string})`;
+    fontColorSelectLabel: `var(--${string})`;
+    fontMenuTitle: `var(--${string})`;
+    fontMenuGroupTitle: `var(--${string})`;
+    fontMenuItemLabel: `var(--${string})`;
+    fontMenuItemLabelSecondary: `var(--${string})`;
+    fontUITooltip: `var(--${string})`;
+    fontUITooltipSecondary: `var(--${string})`;
+    fontErrorBoundaryTitle: `var(--${string})`;
+    fontErrorBoundaryMessage: `var(--${string})`;
+    fontTableCell: `var(--${string})`;
+    fontTableHeaderCell: `var(--${string})`;
+    fontSourceLabel: `var(--${string})`;
+    fontSourceLink: `var(--${string})`;
+    fontTextEditorH1: `var(--${string})`;
+    fontTextEditorH2: `var(--${string})`;
+    fontTextEditorH3: `var(--${string})`;
+    fontTextEditorH6: `var(--${string})`;
+    fontTextEditorBody: `var(--${string})`;
+    fontTextEditorLink: `var(--${string})`;
+    fontHighlightModeTitle: `var(--${string})`;
+    fontHighlightModeSubtitle: `var(--${string})`;
+};
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,836 @@
+import './index.css';
+import { jsx as s, jsxs as p, Fragment as C } from "react/jsx-runtime";
+import { useMotionValue as X, animate as ut, motion as _, useSpring as $, useReducedMotion as gt } from "motion/react";
+import { useState as Z, useEffect as w, useMemo as y, memo as k, useRef as O, useLayoutEffect as ht } from "react";
+import { DEFAULT_FONT_STYLE as pt, DEFAULT_FONT_WEIGHT as ft, CachedTextMeasurer as V, HeuristicTextMeasurer as yt, LayoutCompiler as mt, DEFAULT_COLOR_PALETTE as I, getStrokeWidth as J, createXValueReader as vt, getGroup as xt, getX as L, getYMin as q, GROUP_VARIABLES as Q, getY as T, getColor as R, getAlpha as F, getYMax as tt, getXMin as bt, getXMax as Lt, getSize as Tt, getStartAngle as Et, getEndAngle as At, getInnerRadius as _t, getOuterRadius as kt, compile as wt } from "@graphysdk/viz-engine";
+import St, { clsx as Ct } from "clsx";
+import { curveCatmullRom as It, curveLinear as Rt, area as Ft, line as et, arc as Dt } from "d3-shape";
+import { interpolatePath as Nt } from "d3-interpolate-path";
+import { assignInlineVars as Bt } from "@vanilla-extract/dynamic";
+typeof window < "u" && (window.__GRAPHY_SDK__ ??= {}, window.__GRAPHY_SDK__.reactRenderer = "0.0.1");
+const Pt = /\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu, rt = "😀";
+class H {
+  constructor() {
+    this.emojiCorrections = /* @__PURE__ */ new Map(), this.currentFont = "";
+    const r = new OffscreenCanvas(1, 1).getContext("2d");
+    if (!r)
+      throw new Error("Failed to create OffscreenCanvas 2D context");
+    this.ctx = r;
+  }
+  /**
+   * Creates a CanvasTextMeasurer after all declared `@font-face` fonts
+   * have finished loading. This ensures measurements use the correct font
+   * glyphs from the first call, avoiding stale cache entries.
+   *
+   * Falls back to immediate construction if `document.fonts` is unavailable
+   * (e.g. non-browser environment).
+   *
+   * Note: document.fonts.ready still resolves even if some fonts fail to load.
+   */
+  static async create() {
+    return typeof document < "u" && document.fonts && await document.fonts.ready, new H();
+  }
+  measureText(t, r) {
+    const o = Gt(r);
+    this.setFont(o);
+    const { width: n, fontBoundingBoxAscent: a, fontBoundingBoxDescent: i } = this.ctx.measureText(t);
+    let l = n;
+    const c = Mt(t);
+    if (c > 0) {
+      const d = this.getEmojiCorrection(o);
+      l -= d * c;
+    }
+    return {
+      width: l,
+      height: a + i,
+      ascent: a,
+      descent: i
+    };
+  }
+  /**
+   * Skip redundant `ctx.font` assignments
+   * Setting the property triggers CSS font string parsing and font resolution.
+   */
+  setFont(t) {
+    this.currentFont !== t && (this.ctx.font = t, this.currentFont = t);
+  }
+  /**
+   * Computes the per-emoji width correction for a given font.
+   * Measures the reference emoji in both Canvas and DOM, caches the difference.
+   * Returns 0 if DOM is unavailable or the difference is negligible (< 0.5px).
+   */
+  getEmojiCorrection(t) {
+    const r = this.emojiCorrections.get(t);
+    if (r !== void 0) return r;
+    this.setFont(t);
+    const o = this.ctx.measureText(rt).width, n = Ot(t);
+    let a = 0;
+    if (n !== null) {
+      const i = o - n;
+      a = i > 0.5 ? i : 0;
+    }
+    return this.emojiCorrections.set(t, a), a;
+  }
+}
+const Mt = (e) => {
+  const t = e.match(Pt);
+  return t ? t.length : 0;
+}, Ot = (e) => {
+  const t = zt();
+  return t ? (t.style.font = e, t.getBoundingClientRect().width) : null;
+};
+function Gt(e) {
+  const t = e.style ?? pt, r = e.weight ?? ft;
+  return `${t} ${r} ${e.size}px '${e.family}'`;
+}
+let b = null;
+const zt = () => typeof document > "u" ? null : (b || (b = document.createElement("span"), b.style.position = "absolute", b.style.visibility = "hidden", b.style.whiteSpace = "nowrap", b.style.left = "-9999px", b.textContent = rt, document.body.appendChild(b)), b), Wt = () => {
+  const [e, t] = Z(null);
+  return w(() => {
+    let r = !1;
+    const o = () => {
+      r || t(Ht());
+    };
+    return (async () => {
+      typeof document < "u" && document.fonts && await document.fonts.ready, o();
+    })(), typeof document < "u" && document.fonts && document.fonts.addEventListener("loadingdone", o), () => {
+      r = !0, typeof document < "u" && document.fonts && document.fonts.removeEventListener("loadingdone", o);
+    };
+  }, []), e;
+}, Ht = () => {
+  try {
+    return new V(new H());
+  } catch {
+    return new V(new yt());
+  }
+}, Ut = 12, $t = "sans-serif", Vt = {
+  family: $t,
+  size: Ut
+}, jt = (e) => (t) => {
+  if (!t.isVisible || t.ticks.length === 0) return 0;
+  const r = t.position === "top" || t.position === "bottom", o = t.ticks.map((n) => e.measureText(String(n.value), Vt));
+  return Math.max(...r ? o.map((n) => n.height) : o.map((n) => n.width));
+}, Yt = 20, Kt = () => () => Yt, Xt = 12, Zt = 8, Jt = 12, qt = "Inter", Qt = {
+  family: qt,
+  size: Jt
+}, te = Zt + Xt, ee = (e) => (t) => {
+  if (t.items.length === 0) return 0;
+  const r = t.position === "top" || t.position === "bottom", o = t.items.map((n) => e.measureText(String(n.value), Qt));
+  return r ? Math.max(...o.map((n) => n.height)) : Math.max(...o.map((n) => n.width)) + te;
+}, re = ({ spec: e, containerSize: t, externalMeasurements: r }) => {
+  const o = Wt(), n = y(() => o ? {
+    measureAxis: jt(o),
+    measureAxisLabel: Kt(),
+    measureLegend: ee(o)
+  } : null, [o]);
+  return y(() => n ? new mt(n).compile({ guides: e.guides, containerSize: t, externalMeasurements: r }) : null, [e, t, r, n]);
+}, nt = !1, P = (e) => e.text !== void 0 ? e.text : e.content ? e.content.map(P).join("") : "";
+var ne = "_12eci1n0", G = "_1mf2q6u0";
+const oe = ({ ref: e, compiled: t, captionRect: r }) => {
+  const { caption: o } = t.config.content;
+  return o === null ? null : /* @__PURE__ */ s(
+    "div",
+    {
+      ref: e,
+      className: ne,
+      style: {
+        width: r.width
+      },
+      children: /* @__PURE__ */ s("p", { className: G, children: typeof o == "string" ? o : P(o) })
+    }
+  );
+};
+var ae = "_1q25vjj0";
+const ie = ({ ref: e, compiled: t, titleRect: r }) => {
+  const { title: o, subtitle: n } = t.config.content;
+  if (o === null && n === null) return null;
+  const a = typeof o == "string" ? o : o !== null ? P(o) : "", i = typeof n == "string" ? n : n !== null ? P(n) : "";
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      ref: e,
+      className: ae,
+      style: {
+        width: r.width
+      },
+      children: [
+        o !== null && /* @__PURE__ */ s("h1", { className: G, children: a }),
+        n !== null && /* @__PURE__ */ s("p", { className: G, children: i })
+      ]
+    }
+  );
+}, f = (e) => `${e * 100}%`;
+function S(e) {
+  return 1 - e;
+}
+var se = "pr8m7u0", le = "pr8m7u1";
+const ce = 8, de = ({ legends: e }) => {
+  const t = y(() => {
+    const r = [];
+    for (const o of e)
+      for (const n of o.items) {
+        if (n.normalizedY === null) continue;
+        const a = typeof n.visual.color == "string" ? n.visual.color : void 0;
+        r.push({
+          key: `${String(n.value)}${a ? `-${a}` : ""}`,
+          label: String(n.value),
+          color: a,
+          x: ce,
+          y: f(S(n.normalizedY))
+        });
+      }
+    return r;
+  }, [e]);
+  return t.length === 0 ? null : /* @__PURE__ */ s("div", { className: se, children: t.map((r) => /* @__PURE__ */ s("span", { className: le, style: { left: r.x, top: r.y, color: r.color }, children: r.label }, r.key)) });
+};
+var ue = "_2hq2f70", ge = "x9xdzb0", he = "x9xdzb1", pe = "x9xdzb2", fe = "x9xdzb3", ot = "x9xdzb4", ye = "x9xdzb5", me = "x9xdzb6";
+const ve = "#9ca3af", xe = ({ legends: e }) => e.length === 0 ? null : /* @__PURE__ */ s("div", { className: ge, children: e.map((t, r) => {
+  const o = t.position === "left" || t.position === "right", n = t.aesthetics.includes("size");
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: Ct(he, { [fe]: o, [pe]: !o }),
+      children: n ? /* @__PURE__ */ s(Le, { legend: t }) : /* @__PURE__ */ s(be, { legend: t })
+    },
+    r
+  );
+}) }), be = ({ legend: e }) => e.items.map((t) => /* @__PURE__ */ p("div", { className: ot, children: [
+  /* @__PURE__ */ s("span", { className: ye, style: { backgroundColor: t.visual.color } }),
+  /* @__PURE__ */ s("span", { children: String(t.value) })
+] }, `${String(t.value)}${t.visual.color ? `-${t.visual.color}` : ""}`)), Le = ({ legend: e }) => {
+  const t = e.items.map((r) => {
+    const o = Number(r.visual.size);
+    return {
+      key: `${String(r.value)}-${o}`,
+      label: String(r.value),
+      color: typeof r.visual.color == "string" ? r.visual.color : void 0,
+      sizeValue: o
+    };
+  }).filter((r) => Number.isFinite(r.sizeValue) && r.sizeValue > 0);
+  return t.length === 0 ? null : t.map((r) => /* @__PURE__ */ p("div", { className: ot, children: [
+    /* @__PURE__ */ s(
+      "span",
+      {
+        className: me,
+        style: {
+          width: r.sizeValue,
+          height: r.sizeValue,
+          backgroundColor: r.color ?? ve
+        }
+      }
+    ),
+    /* @__PURE__ */ s("span", { children: r.label })
+  ] }, r.key));
+}, Te = k(function({ legends: t, rects: r }) {
+  const o = y(() => {
+    const n = /* @__PURE__ */ new Map();
+    for (const a of t) {
+      const i = n.get(a.position);
+      i ? i.push(a) : n.set(a.position, [a]);
+    }
+    return n;
+  }, [t]);
+  return /* @__PURE__ */ s(C, { children: Array.from(o, ([n, a]) => {
+    const i = r[n];
+    if (i == null) return null;
+    const l = a.filter((d) => d.display === "pill"), c = a.filter((d) => d.display === "direct");
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        className: ue,
+        style: {
+          left: i.x,
+          top: i.y,
+          width: i.width,
+          height: i.height
+        },
+        children: [
+          /* @__PURE__ */ s(xe, { legends: l }),
+          /* @__PURE__ */ s(de, { legends: c })
+        ]
+      },
+      n
+    );
+  }) });
+});
+var at = "wyi2w10";
+const Ee = ({ axisRects: e }) => /* @__PURE__ */ p(C, { children: [
+  N("top", e.top),
+  N("right", e.right),
+  N("bottom", e.bottom),
+  N("left", e.left)
+] }), N = (e, t) => t ? /* @__PURE__ */ p("g", { transform: `translate(${t.x}, ${t.y})`, children: [
+  nt,
+  /* @__PURE__ */ p(
+    "text",
+    {
+      className: at,
+      x: t.width / 2,
+      y: t.height / 2,
+      textAnchor: "middle",
+      dominantBaseline: "middle",
+      children: [
+        e,
+        " axis"
+      ]
+    }
+  )
+] }, `axis-${e}`) : null, Ae = ({ axisLabelRects: e }) => /* @__PURE__ */ p(C, { children: [
+  B("top", e.top),
+  B("right", e.right),
+  B("bottom", e.bottom),
+  B("left", e.left)
+] }), B = (e, t) => {
+  if (!t) return null;
+  const r = _e(e, t);
+  return /* @__PURE__ */ p("g", { transform: `translate(${t.x}, ${t.y})`, children: [
+    nt,
+    /* @__PURE__ */ p("text", { className: at, ...r, children: [
+      e,
+      " axis label"
+    ] })
+  ] }, `axis-label-${e}`);
+}, _e = (e, t) => {
+  const r = {
+    x: t.width / 2,
+    y: t.height / 2,
+    textAnchor: "middle",
+    dominantBaseline: "middle"
+  };
+  return e === "left" ? (r.x = 0, r.textAnchor = "start") : e === "right" && (r.x = t.width, r.textAnchor = "end"), r;
+}, ke = I[0], we = 0.3, Se = 1, E = {
+  type: "spring",
+  stiffness: 500,
+  damping: 60,
+  mass: 1
+}, Ce = I[0], Ie = 1, Re = 2, it = (e) => e === "catmull-rom" ? It : Rt, st = (e) => {
+  switch (e) {
+    case "dashed":
+      return "8 4";
+    case "dotted":
+      return "2 2";
+    case "solid":
+      return;
+  }
+}, lt = (e, t) => t.lineWidth !== "auto" ? t.lineWidth : J(e) ?? Re, D = (e, t, r) => {
+  const o = vt(e, t);
+  return (n) => {
+    const a = xt(n) ?? "default", i = o(n);
+    return `${r}-${a}${i !== null && i !== "" ? `-${i}` : ""}`;
+  };
+}, z = (e, t) => {
+  const r = X(e);
+  return w(() => {
+    const o = Nt(r.get(), e);
+    ut(0, 1, {
+      ...t,
+      onUpdate: (n) => {
+        const a = o(n);
+        return r.set(a);
+      }
+    });
+  }, [t, e, r]), r;
+};
+var M = "_1wf5x370";
+const Fe = k(function({ layer: t, isAnimated: r }) {
+  const o = t.params, n = st(o.lineType), [a, i] = y(() => {
+    const c = it(o.interpolate), d = (u) => S(tt(u) ?? T(u) ?? 0), g = Ft().x((u) => L(u) ?? 0).y0((u) => S(q(u) ?? 0)).y1(d).curve(c), h = et().x((u) => L(u) ?? 0).y(d).curve(c);
+    if (o.missingValues === "gap") {
+      const u = (v) => L(v) !== null && T(v) !== null;
+      g.defined(u), h.defined(u);
+    }
+    return [h, g];
+  }, [o.interpolate, o.missingValues]), l = y(() => {
+    const c = D(t.data, t.mapping, t.index), d = [];
+    return t.data.groupBy(Q.group).forEach((g) => {
+      let h = [...g];
+      o.missingValues === "connect" && (h = h.filter(
+        (U) => L(U) !== null && T(U) !== null
+      ));
+      const u = i(h), v = a(h);
+      if (!u || !v) return;
+      const m = h[0];
+      if (!m) return;
+      const x = R(m) ?? ke, A = F(m), dt = lt(m, o);
+      d.push({
+        key: c(m),
+        areaPath: u,
+        linePath: v,
+        color: x,
+        fillOpacity: A ?? we,
+        strokeWidth: dt,
+        strokeOpacity: Se,
+        strokeDasharray: n
+      });
+    }), d;
+  }, [i, a, t.data, t.index, t.mapping, o, n]);
+  return /* @__PURE__ */ s(
+    "svg",
+    {
+      viewBox: "0 0 1 1",
+      preserveAspectRatio: "none",
+      width: "100%",
+      height: "100%",
+      "data-geom": "area",
+      className: M,
+      children: l.map((c) => /* @__PURE__ */ s(
+        De,
+        {
+          areaPath: c.areaPath,
+          linePath: c.linePath,
+          color: c.color,
+          fillOpacity: c.fillOpacity,
+          strokeWidth: c.strokeWidth,
+          strokeOpacity: c.strokeOpacity,
+          strokeDasharray: c.strokeDasharray,
+          isAnimated: r
+        },
+        c.key
+      ))
+    }
+  );
+}), De = ({
+  areaPath: e,
+  linePath: t,
+  color: r,
+  fillOpacity: o,
+  strokeWidth: n,
+  strokeOpacity: a,
+  strokeDasharray: i,
+  isAnimated: l
+}) => l ? /* @__PURE__ */ s(
+  Ne,
+  {
+    areaPath: e,
+    linePath: t,
+    color: r,
+    fillOpacity: o,
+    strokeWidth: n,
+    strokeOpacity: a,
+    strokeDasharray: i
+  }
+) : /* @__PURE__ */ p("g", { children: [
+  /* @__PURE__ */ s("path", { d: e, fill: r, fillOpacity: o, stroke: "none" }),
+  /* @__PURE__ */ s(
+    "path",
+    {
+      d: t,
+      fill: "none",
+      stroke: r,
+      strokeWidth: n,
+      strokeOpacity: a,
+      strokeDasharray: i,
+      vectorEffect: "non-scaling-stroke"
+    }
+  )
+] }), Ne = ({
+  areaPath: e,
+  linePath: t,
+  color: r,
+  fillOpacity: o,
+  strokeWidth: n,
+  strokeOpacity: a,
+  strokeDasharray: i
+}) => {
+  const l = z(e, E), c = z(t, E);
+  return /* @__PURE__ */ p("g", { children: [
+    /* @__PURE__ */ s(_.path, { d: l, fill: r, fillOpacity: o, stroke: "none" }),
+    /* @__PURE__ */ s(
+      _.path,
+      {
+        d: c,
+        fill: "none",
+        stroke: r,
+        strokeWidth: n,
+        strokeOpacity: a,
+        strokeDasharray: i,
+        vectorEffect: "non-scaling-stroke"
+      }
+    )
+  ] });
+}, Be = I[0], Pe = 1, j = 4, Me = k(function({ layer: t, isAnimated: r }) {
+  const o = y(() => {
+    const n = D(t.data, t.mapping, t.index), a = [];
+    for (const i of t.data) {
+      const l = n(i), c = bt(i), d = Lt(i), g = q(i), h = tt(i) ?? T(i);
+      if (c === null || d === null || g === null || h === null)
+        continue;
+      const u = R(i), v = F(i);
+      let m = 1 - h, x = h - g;
+      x < 0 && (m += x, x = -x), a.push({
+        key: l,
+        x: c,
+        y: m,
+        width: d - c,
+        height: x,
+        fill: u ?? Be,
+        opacity: v ?? Pe
+      });
+    }
+    return a;
+  }, [t.data, t.index, t.mapping]);
+  return /* @__PURE__ */ s(C, { children: o.map((n) => {
+    const { key: a, ...i } = n;
+    return /* @__PURE__ */ s(Oe, { ...i, isAnimated: r }, a);
+  }) });
+}), Oe = ({ isAnimated: e, ...t }) => e ? /* @__PURE__ */ s(
+  _.rect,
+  {
+    initial: !1,
+    style: { transformBox: "view-box" },
+    transition: E,
+    fill: t.fill,
+    opacity: t.opacity,
+    rx: j,
+    animate: {
+      x: f(t.x),
+      y: f(t.y),
+      width: f(t.width),
+      height: f(t.height),
+      opacity: t.opacity
+    }
+  }
+) : /* @__PURE__ */ s(
+  "rect",
+  {
+    style: { transformBox: "view-box" },
+    x: f(t.x),
+    y: f(t.y),
+    width: f(t.width),
+    height: f(t.height),
+    fill: t.fill,
+    opacity: t.opacity,
+    rx: j
+  }
+), Ge = k(function({ layer: t, isAnimated: r }) {
+  const o = t.params, n = st(o.lineType), a = y(() => {
+    const l = et().x((c) => L(c) ?? 0).y((c) => S(T(c) ?? 0)).curve(it(o.interpolate));
+    return o.missingValues === "gap" && l.defined((c) => L(c) !== null && T(c) !== null), l;
+  }, [o.interpolate, o.missingValues]), i = y(() => {
+    const l = D(t.data, t.mapping, t.index), c = [];
+    return t.data.groupBy(Q.group).forEach((d) => {
+      let g = [...d];
+      o.missingValues === "connect" && (g = g.filter(
+        (A) => L(A) !== null && T(A) !== null
+      ));
+      const h = a(g);
+      if (!h) return;
+      const u = g[0];
+      if (!u) return;
+      const v = R(u) ?? Ce, m = F(u), x = lt(u, o);
+      c.push({
+        key: l(u),
+        pathData: h,
+        color: v,
+        opacity: m ?? Ie,
+        strokeWidth: x,
+        strokeDasharray: n
+      });
+    }), c;
+  }, [a, t.data, t.index, t.mapping, o, n]);
+  return /* @__PURE__ */ s(
+    "svg",
+    {
+      viewBox: "0 0 1 1",
+      preserveAspectRatio: "none",
+      width: "100%",
+      height: "100%",
+      "data-geom": "line",
+      className: M,
+      children: i.map((l) => /* @__PURE__ */ s(
+        ze,
+        {
+          pathData: l.pathData,
+          color: l.color,
+          strokeWidth: l.strokeWidth,
+          opacity: l.opacity,
+          strokeDasharray: l.strokeDasharray,
+          isAnimated: r
+        },
+        l.key
+      ))
+    }
+  );
+}), ze = ({ pathData: e, color: t, strokeWidth: r, opacity: o, strokeDasharray: n, isAnimated: a }) => a ? /* @__PURE__ */ s(
+  We,
+  {
+    pathData: e,
+    color: t,
+    strokeWidth: r,
+    opacity: o,
+    strokeDasharray: n
+  }
+) : /* @__PURE__ */ s(
+  "path",
+  {
+    d: e,
+    fill: "none",
+    stroke: t,
+    strokeWidth: r,
+    opacity: o,
+    strokeDasharray: n,
+    vectorEffect: "non-scaling-stroke"
+  }
+), We = ({
+  pathData: e,
+  color: t,
+  strokeWidth: r,
+  opacity: o,
+  strokeDasharray: n
+}) => {
+  const a = z(e, E);
+  return /* @__PURE__ */ s(
+    _.path,
+    {
+      d: a,
+      fill: "none",
+      stroke: t,
+      strokeWidth: r,
+      opacity: o,
+      strokeDasharray: n,
+      vectorEffect: "non-scaling-stroke"
+    }
+  );
+}, He = I[0], Ue = 1, $e = 8, Ve = "#000000", je = 1, Ye = k(function({ layer: t, isAnimated: r }) {
+  const o = y(() => {
+    const n = D(t.data, t.mapping, t.index), a = [];
+    for (const i of t.data) {
+      const l = L(i), c = T(i);
+      if (l === null || c === null)
+        continue;
+      const d = R(i), g = F(i), h = Tt(i), u = J(i);
+      a.push({
+        key: n(i),
+        cx: l,
+        cy: S(c),
+        radius: (h ?? $e) / 2,
+        fill: d ?? He,
+        stroke: Ve,
+        opacity: g ?? Ue,
+        strokeWidth: u ?? je
+      });
+    }
+    return a;
+  }, [t.data, t.index, t.mapping]);
+  return /* @__PURE__ */ s(C, { children: o.map((n) => r ? /* @__PURE__ */ s(
+    _.circle,
+    {
+      initial: !1,
+      transition: E,
+      fill: n.fill,
+      stroke: n.stroke,
+      strokeWidth: n.strokeWidth,
+      animate: {
+        cx: f(n.cx),
+        cy: f(n.cy),
+        r: n.radius,
+        opacity: n.opacity
+      }
+    },
+    n.key
+  ) : /* @__PURE__ */ s(
+    "circle",
+    {
+      cx: f(n.cx),
+      cy: f(n.cy),
+      r: n.radius,
+      fill: n.fill,
+      opacity: n.opacity,
+      stroke: n.stroke,
+      strokeWidth: n.strokeWidth
+    },
+    n.key
+  )) });
+}), Ke = I[0], Xe = 1, W = Dt(), Y = Math.PI * 2, Ze = k(function({
+  layer: t,
+  isAnimated: r
+}) {
+  const o = O(!1);
+  w(() => {
+    o.current = !0;
+  }, []);
+  const n = y(() => {
+    const a = D(t.data, t.mapping, t.index), i = [];
+    for (const l of t.data) {
+      const c = a(l), d = Et(l), g = At(l), h = _t(l), u = kt(l);
+      d === null || g === null || h === null || u === null || i.push({
+        key: c,
+        startAngle: d,
+        endAngle: g,
+        innerRadius: h,
+        outerRadius: u,
+        fill: R(l) ?? Ke,
+        opacity: F(l) ?? Xe
+      });
+    }
+    return i;
+  }, [t.data, t.index, t.mapping]);
+  return /* @__PURE__ */ s(
+    "svg",
+    {
+      viewBox: "-1 -1 2 2",
+      preserveAspectRatio: "xMidYMid meet",
+      width: "100%",
+      height: "100%",
+      "data-geom": "bar",
+      className: M,
+      children: n.map((a) => {
+        if (r) {
+          const { key: i, ...l } = a;
+          return /* @__PURE__ */ s(Je, { isInitialRender: !o.current, ...l }, i);
+        }
+        return /* @__PURE__ */ s(
+          "path",
+          {
+            d: W({
+              startAngle: a.startAngle,
+              endAngle: a.endAngle,
+              innerRadius: a.innerRadius,
+              outerRadius: a.outerRadius
+            }) ?? void 0,
+            fill: a.fill,
+            opacity: a.opacity
+          },
+          a.key
+        );
+      })
+    }
+  );
+}), Je = ({
+  startAngle: e,
+  endAngle: t,
+  innerRadius: r,
+  outerRadius: o,
+  fill: n,
+  opacity: a,
+  isInitialRender: i
+}) => {
+  const l = i ? e : Y, c = i ? t : Y, d = $(l, E), g = $(c, E), h = X(
+    W({ startAngle: l, endAngle: c, innerRadius: r, outerRadius: o }) ?? ""
+  );
+  return w(() => {
+    d.set(e), g.set(t);
+  }, [d, g, e, t]), w(() => {
+    const u = () => {
+      const x = d.get(), A = g.get();
+      h.set(
+        W({ startAngle: x, endAngle: A, innerRadius: r, outerRadius: o }) ?? ""
+      );
+    }, v = d.on("change", u), m = g.on("change", u);
+    return () => {
+      v(), m();
+    };
+  }, [d, g, r, o, h]), /* @__PURE__ */ s(_.path, { d: h, fill: n, opacity: a, transition: E });
+}, qe = ({ compiled: e, shouldAnimate: t, panelRect: r }) => /* @__PURE__ */ s("svg", { x: r.x, y: r.y, width: r.width, height: r.height, className: M, children: e.layers.map((o, n) => {
+  const a = `layer-${n}`;
+  switch (o.geom) {
+    case "bar":
+      return e.coordSystem.type === "polar" ? /* @__PURE__ */ s(Ze, { layer: o, isAnimated: t }, a) : /* @__PURE__ */ s(Me, { layer: o, isAnimated: t }, a);
+    case "line":
+      return /* @__PURE__ */ s(Ge, { layer: o, isAnimated: t }, a);
+    case "area":
+      return /* @__PURE__ */ s(Fe, { layer: o, isAnimated: t }, a);
+    case "point":
+      return /* @__PURE__ */ s(Ye, { layer: o, isAnimated: t }, a);
+    default:
+      return /* @__PURE__ */ p("text", { children: [
+        o.geom,
+        " not implemented"
+      ] }, a);
+  }
+}) });
+var Qe = "_1ymbsoj0";
+const ct = (e, t) => ({
+  x: e.x - t.x,
+  y: e.y - t.y,
+  width: e.width,
+  height: e.height
+}), K = (e, t) => {
+  const r = {};
+  for (const [o, n] of Object.entries(e))
+    r[o] = ct(n, t);
+  return r;
+}, tr = ({
+  compiled: e,
+  plotRect: t,
+  panelRect: r,
+  axisRects: o,
+  axisLabelRects: n,
+  shouldAnimate: a
+}) => {
+  const i = ct(r, t), l = K(o, t), c = K(n, t);
+  return /* @__PURE__ */ p(
+    "svg",
+    {
+      className: Qe,
+      width: t.width,
+      height: t.height,
+      style: { transform: `translate(${t.x}px, ${t.y}px)` },
+      children: [
+        /* @__PURE__ */ s(Ee, { axisRects: l }),
+        /* @__PURE__ */ s(qe, { compiled: e, shouldAnimate: a, panelRect: i }),
+        /* @__PURE__ */ s(Ae, { axisLabelRects: c })
+      ]
+    }
+  );
+}, er = {
+  titleSize: { width: 0, height: 0 },
+  captionSize: { width: 0, height: 0 }
+}, rr = () => {
+  const e = O(null), t = O(null), [r, o] = Z(er);
+  return ht(() => {
+    const n = () => {
+      const i = e.current?.offsetHeight ?? 0, l = t.current?.offsetHeight ?? 0, c = e.current?.offsetWidth ?? 0, d = t.current?.offsetWidth ?? 0;
+      o((g) => g.titleSize.height === i && g.captionSize.height === l && g.titleSize.width === c && g.captionSize.width === d ? g : {
+        titleSize: { width: c, height: i },
+        captionSize: { width: d, height: l }
+      });
+    };
+    n();
+    const a = new ResizeObserver(n);
+    return e.current && a.observe(e.current), t.current && a.observe(t.current), () => a.disconnect();
+  }, []), { titleRef: e, captionRef: t, measurements: r };
+};
+var nr = "znp3wr0";
+const pr = ({ spec: e, width: t, height: r, isAnimated: o }) => {
+  const n = gt(), a = y(() => wt(e), [e]), { titleRef: i, captionRef: l, measurements: c } = rr(), d = re({
+    spec: a,
+    containerSize: { width: t, height: r },
+    externalMeasurements: c
+  });
+  return d ? /* @__PURE__ */ p("div", { className: nr, style: { width: t, height: r }, children: [
+    /* @__PURE__ */ s(ie, { ref: i, compiled: a, titleRect: d.title }),
+    /* @__PURE__ */ s(
+      tr,
+      {
+        compiled: a,
+        plotRect: d.plot,
+        panelRect: d.panel,
+        axisRects: d.axes,
+        axisLabelRects: d.axisLabels,
+        shouldAnimate: o ?? !n
+      }
+    ),
+    /* @__PURE__ */ s(oe, { ref: l, compiled: a, captionRect: d.caption }),
+    /* @__PURE__ */ s(Te, { legends: a.guides.legends, rects: d.legends })
+  ] }) : null;
+};
+var or = { white: "var(--graphy-white)", black: "var(--graphy-black)", transparent: "var(--graphy-transparent)", grey100: "var(--graphy-grey-100)", grey95: "var(--graphy-grey-95)", grey90: "var(--graphy-grey-90)", grey85: "var(--graphy-grey-85)", grey80: "var(--graphy-grey-80)", grey75: "var(--graphy-grey-75)", grey70: "var(--graphy-grey-70)", grey60: "var(--graphy-grey-60)", grey50: "var(--graphy-grey-50)", grey0: "var(--graphy-grey-0)", greyGradient80: "var(--graphy-grey-gradient-80)", green60: "var(--graphy-green-60)", green50: "var(--graphy-green-50)", red60: "var(--graphy-red-60)", red50: "var(--graphy-red-50)", amber70: "var(--graphy-amber-70)", amber50: "var(--graphy-amber-50)", amber40: "var(--graphy-amber-40)", amber30: "var(--graphy-amber-30)", blue80: "var(--graphy-blue-80)", blue60: "var(--graphy-blue-60)", purple50: "var(--graphy-purple-50)", purple30: "var(--graphy-purple-30)", brand: "var(--graphy-brand)", success: "var(--graphy-success)", warning: "var(--graphy-warning)", alert: "var(--graphy-alert)", textPrimary: "var(--graphy-text-primary)", textSecondary: "var(--graphy-text-secondary)", textDisabled: "var(--graphy-text-disabled)", iconPrimary: "var(--graphy-icon-primary)", iconSecondary: "var(--graphy-icon-secondary)", iconStickerBackground: "var(--graphy-icon-sticker-background)", border100: "var(--graphy-border-100)", border10: "var(--graphy-border-10)", sunkenBackground: "var(--graphy-sunken-background)", defaultBackground: "var(--graphy-default-background)", raisedBackground: "var(--graphy-raised-background)", overlayBackground: "var(--graphy-overlay-background)", overlayBorderGradient: "var(--graphy-overlay-border-gradient)", graphBackground: "var(--graphy-graph-background)", gridLineColor: "var(--graphy-grid-line-color)", hoverGuideLineColor: "var(--graphy-hover-guide-line-color)", originLineColor: "var(--graphy-origin-line-color)", targetLineColor: "var(--graphy-target-line-color)", targetLineMarkerColor: "var(--graphy-target-line-marker-color)", legendBackground: "var(--graphy-legend-background)", legendBorderColor: "var(--graphy-legend-border-color)", legendTextColor: "var(--graphy-legend-text-color)", dimmedSeriesLabelTextColor: "var(--graphy-dimmed-series-label-text-color)", dimmedSeriesLabelLineColor: "var(--graphy-dimmed-series-label-line-color)", trendNegativeColor: "var(--graphy-trend-negative-color)", trendPositiveColor: "var(--graphy-trend-positive-color)", tooltipBackground: "var(--graphy-tooltip-background)", tooltipBorderColor: "var(--graphy-tooltip-border-color)", tooltipHeadingTextColor: "var(--graphy-tooltip-heading-text-color)", tooltipLabelTextColor: "var(--graphy-tooltip-label-text-color)", tooltipValueTextColor: "var(--graphy-tooltip-value-text-color)", heatmapEmptyTileBackground: "var(--graphy-heatmap-empty-tile-background)", stackedBarHoverBorderColor: "var(--graphy-stacked-bar-hover-border-color)", defaultArrowAnnotationColor: "var(--graphy-default-arrow-annotation-color)", annotationFrameBorderColor: "var(--graphy-annotation-frame-border-color)", annotationMenuTriggerIconColor: "var(--graphy-annotation-menu-trigger-icon-color)", fontFamilyDefault: "var(--graphy-font-family-default)", fontFamilyHeading: "var(--graphy-font-family-heading)", fontWeightRegular: "var(--graphy-font-weight-regular)", fontWeightMedium: "var(--graphy-font-weight-medium)", fontWeightSemibold: "var(--graphy-font-weight-semibold)", fontWeightBold: "var(--graphy-font-weight-bold)", fontXxs: "var(--graphy-font-xxs)", fontXs: "var(--graphy-font-xs)", fontSm: "var(--graphy-font-sm)", fontMd: "var(--graphy-font-md)", fontLg: "var(--graphy-font-lg)", fontXl: "var(--graphy-font-xl)", fontEditorBody: "var(--graphy-font-editor-body)", fontHeadingSm: "var(--graphy-font-heading-sm)", fontHeadingMd: "var(--graphy-font-heading-md)", fontHeadingLg: "var(--graphy-font-heading-lg)", fontTickLabel: "var(--graphy-font-tick-label)", fontAxisLabel: "var(--graphy-font-axis-label)", fontDataLabel: "var(--graphy-font-data-label)", fontStackTotal: "var(--graphy-font-stack-total)", fontLegendLabel: "var(--graphy-font-legend-label)", fontSeriesLabel: "var(--graphy-font-series-label)", fontTooltipLabel: "var(--graphy-font-tooltip-label)", fontTooltipHeading: "var(--graphy-font-tooltip-heading)", fontTooltipFooter: "var(--graphy-font-tooltip-footer)", fontJumboTooltipLabel: "var(--graphy-font-jumbo-tooltip-label)", fontJumboTooltip: "var(--graphy-font-jumbo-tooltip)", fontMiniTooltipLabel: "var(--graphy-font-mini-tooltip-label)", fontMiniTooltipFooter: "var(--graphy-font-mini-tooltip-footer)", fontTooltipCaption: "var(--graphy-font-tooltip-caption)", fontTooltipCaptionSmall: "var(--graphy-font-tooltip-caption-small)", fontTrendTag: "var(--graphy-font-trend-tag)", fontTrendTagSmall: "var(--graphy-font-trend-tag-small)", fontGoalLineLabel: "var(--graphy-font-goal-line-label)", fontPieLabel: "var(--graphy-font-pie-label)", fontPieChartTotal: "var(--graphy-font-pie-chart-total)", fontDifferenceArrowSmall: "var(--graphy-font-difference-arrow-small)", fontDifferenceArrowMedium: "var(--graphy-font-difference-arrow-medium)", fontDifferenceArrowLarge: "var(--graphy-font-difference-arrow-large)", fontButton: "var(--graphy-font-button)", fontInput: "var(--graphy-font-input)", fontInputLabel: "var(--graphy-font-input-label)", fontSelectLabel: "var(--graphy-font-select-label)", fontSelectDescription: "var(--graphy-font-select-description)", fontColorSelectLabel: "var(--graphy-font-color-select-label)", fontMenuTitle: "var(--graphy-font-menu-title)", fontMenuGroupTitle: "var(--graphy-font-menu-group-title)", fontMenuItemLabel: "var(--graphy-font-menu-item-label)", fontMenuItemLabelSecondary: "var(--graphy-font-menu-item-label-secondary)", fontUITooltip: "var(--graphy-font-uitooltip)", fontUITooltipSecondary: "var(--graphy-font-uitooltip-secondary)", fontErrorBoundaryTitle: "var(--graphy-font-error-boundary-title)", fontErrorBoundaryMessage: "var(--graphy-font-error-boundary-message)", fontTableCell: "var(--graphy-font-table-cell)", fontTableHeaderCell: "var(--graphy-font-table-header-cell)", fontSourceLabel: "var(--graphy-font-source-label)", fontSourceLink: "var(--graphy-font-source-link)", fontTextEditorH1: "var(--graphy-font-text-editor-h1)", fontTextEditorH2: "var(--graphy-font-text-editor-h2)", fontTextEditorH3: "var(--graphy-font-text-editor-h3)", fontTextEditorH6: "var(--graphy-font-text-editor-h6)", fontTextEditorBody: "var(--graphy-font-text-editor-body)", fontTextEditorLink: "var(--graphy-font-text-editor-link)", fontHighlightModeTitle: "var(--graphy-font-highlight-mode-title)", fontHighlightModeSubtitle: "var(--graphy-font-highlight-mode-subtitle)" }, ar = "_1rkj4kp0", fr = "_1rkj4kp1";
+const yr = ({ theme: e, children: t, className: r, style: o }) => {
+  const n = y(() => {
+    if (!e) return o;
+    const a = {};
+    for (const [i, l] of Object.entries(e))
+      l !== void 0 && (a[or[i]] = l);
+    return { ...o, ...Bt(a) };
+  }, [e, o]);
+  return /* @__PURE__ */ s("div", { className: St(ar, r), style: n, children: t });
+};
+export {
+  H as CanvasTextMeasurer,
+  pr as GraphRenderer,
+  yr as ThemeProvider,
+  fr as darkTheme,
+  Wt as useTextMeasurer,
+  or as vars
+};

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@graphysdk/react",
+  "author": "Graphy",
+  "version": "0.0.1",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css.ts",
+    "**/*.css",
+    "**/version.ts"
+  ],
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.17.0",
+    "@vanilla-extract/dynamic": "^2.1.2",
+    "clsx": "^2.1.1",
+    "d3-interpolate-path": "^2.3.0",
+    "d3-shape": "^3.2.0",
+    "motion": "^12.23.12",
+    "@graphysdk/viz-engine": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^6.0.3",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/d3-interpolate-path": "^2.0.3",
+    "@types/d3-shape": "^3.1.0",
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
+    "@vanilla-extract/vite-plugin": "^5.0.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "rollup-plugin-node-externals": "^8.1.1",
+    "tslib": "^2.8.1",
+    "vite": "^6.4.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.0",
+    "@graphytools/typescript-config": "0.0.1",
+    "@graphytools/eslint-config": "0.0.1",
+    "@graphytools/vitest-config": "1.0.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx,json,css,md}": [
+      "prettier --write"
+    ],
+    "*.{ts,tsx}": [
+      "eslint --max-warnings=0 --fix"
+    ]
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "TZ=utc vitest",
+    "lint": "eslint . --max-warnings 0",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "tsc --noEmit"
+  }
+}