@graphysdk/theme-comic 0.1.1-beta.1792506850788 → 0.1.1-beta.1792511536251

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let H=require("react"),e=require("@graphysdk/react"),g=require("react/jsx-runtime");var B=(t,r)=>{const o=(0,e.getX)(t),l=(0,e.getY)(t)??(0,e.getYMax)(t);return o===null||l===null?null:{x:(0,e.toViewBoxX)(o)*r.width,y:(0,e.toViewBoxY)(l)*r.height}},Y=(t,r)=>{const o=(0,e.getX)(t),l=(0,e.getY)(t)??(0,e.getRadiusExtent)(t).outerRadius;if(o===null||l===null)return null;const i=(0,e.polarToUnit)(o,l),n=Math.min(r.width,r.height)/2;return{x:r.width/2+i.x*n,y:r.height/2-i.y*n}},z=22,F=Math.PI*2,Se=F/(z*2),$=(t,r,o)=>({x:t.x+Math.sin(o.angle)*o.radius*r,y:t.y-Math.cos(o.angle)*o.radius*r}),R=2,G=({x:t,y:r})=>`${t.toFixed(R)},${r.toFixed(R)}`,W=8,X=.6,j=(t,r)=>{const o=r/2,l=F/(W*2);return`M${Array.from({length:W*2},(i,n)=>$(t,o,{angle:n*l,radius:n%2===0?1:X})).map(G).join(" L")} Z`},D=t=>{const r=(0,e.useGeomStyleReader)(t);return(o,l)=>{const i=r.get("shadow",o,l);return{color:(0,e.toPaintColor)(r.get("fill",o,l)),opacity:r.get("alpha",o,l),fillOpacity:r.get("fillAlpha",o,l),outline:r.get("stroke",o,l),outlineWidth:r.get("strokeWidth",o,l),shadow:i==="none"?null:{offsetX:i.offsetX,offsetY:i.offsetY,color:i.color}}}},U=1.35,K=4,V=1,_=({layer:t,observations:r,panel:o,project:l,state:i})=>{const n=(0,e.useGeomStyleReader)(t),f=D(t),u=(0,H.useMemo)(()=>(0,e.createStableKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]),m=i==="hovered";return(0,g.jsx)("g",{"data-geom":"point",children:Array.from(r,p=>{const h=l(p,o);if(h===null)return null;const s=f(p,i),c=j(h,n.get("size",p,i)*U+(m?K:0));return(0,g.jsxs)("g",{opacity:s.opacity,children:[s.shadow!==null&&(0,g.jsx)("path",{d:c,transform:`translate(${s.shadow.offsetX} ${s.shadow.offsetY})`,fill:s.shadow.color}),(0,g.jsx)("path",{d:c,fill:s.color,fillOpacity:s.fillOpacity,stroke:s.outline,strokeWidth:s.outlineWidth+(m?V:0),strokeLinejoin:"round"})]},u(p))})})},N=(t,r)=>(0,e.defineGeomRenderer)("point",{coord:t,swatchShape:"circle",render:({layer:o,panelRect:l})=>(0,g.jsx)(_,{layer:o,observations:o.data,panel:l,project:r}),renderHover:({layer:o,primary:l,panelRect:i})=>(0,g.jsx)(_,{layer:o,observations:[l.observation],panel:i,project:r,state:"hovered"}),renderHoverCompanions:()=>null}),q=N("cartesian",B),J=N("polar",Y),Z=2,Q=2,ee=(t,r,o)=>[...t].flatMap(l=>{const{startAngle:i,endAngle:n}=(0,e.getAngleExtent)(l),{innerRadius:f,outerRadius:u}=(0,e.getRadiusExtent)(l);return i===null||n===null||f===null||u===null?[]:n<=i||u<=0?[]:[{key:`${o(l)}-${i}`,paint:r(l),startAngle:i,endAngle:n,innerRadius:f,outerRadius:u}]}),te=(t,r,o)=>(0,e.buildPolarBarArcPath)(t,{centerX:r.x,centerY:r.y,radius:o,digits:Q}),C=({layer:t,observations:r,panel:o,state:l})=>{const i=D(t),n=(0,H.useMemo)(()=>(0,e.createStableKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]),f=Math.min(o.width,o.height)/2;if(f<=0)return null;const u={x:o.width/2,y:o.height/2},m=ee(r,h=>i(h,l),n).flatMap(h=>{const s=te(h,u,f);return s===void 0?[]:[{key:h.key,path:s,paint:h.paint}]}),p=l==="hovered";return(0,g.jsxs)("g",{"data-geom":"bar",children:[!p&&m.map(({key:h,path:s,paint:c})=>c.shadow===null?null:(0,g.jsx)("path",{d:s,transform:`translate(${c.shadow.offsetX} ${c.shadow.offsetY})`,fill:c.shadow.color,opacity:c.opacity},`${h}-shadow`)),m.map(({key:h,path:s,paint:c})=>(0,g.jsx)("path",{"data-comic-slice":"sector",d:s,fill:c.color,fillOpacity:c.fillOpacity,fillRule:"evenodd",stroke:c.outline,strokeWidth:c.outlineWidth+(p?Z:0),strokeLinejoin:"round",opacity:c.opacity},h))]})},oe=(0,e.defineGeomRenderer)("bar",{coord:"polar",guideMode:"band",swatchShape:"slice",render:({layer:t,panelRect:r})=>(0,g.jsx)(C,{layer:t,observations:t.data,panel:r}),renderHover:({layer:t,primary:r,panelRect:o})=>(0,g.jsx)(C,{layer:t,observations:[r.observation],panel:o,state:"hovered"}),renderHoverCompanions:()=>null}),re=[oe,q,J],k=10,ae=.42,P=220,le=.6,T=1,ie=()=>{const t=Math.ceil(P/k),r=[];for(let o=0;o<=t;o+=1){const l=o%2===0?0:k/2;for(let i=0;i<=23;i+=1){const n=-(i*k+l),f=o*k,u=k*ae*(1-Math.hypot(n,f)/P);u>=le&&r.push(`<circle cx="${n.toFixed(T)}" cy="${f.toFixed(T)}" r="${u.toFixed(T)}"/>`)}}return r.join("")},ne=(t,r,o)=>{const l=`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="${t}"/><svg x="100%" y="0" width="1" height="1" overflow="visible"><g fill="${r}" fill-opacity="${o}">${ie()}</g></svg></svg>`;return`data:image/svg+xml,${encodeURIComponent(l)}`},a={paper:"#FBF3DF",bubble:"#FFFDF6",black:"#141414",secondary:"#4A4338",grid:"rgba(20, 20, 20, 0.2)",deepRed:"#C4161C"},w="'Bangers', 'Comic Neue', 'Comic Sans MS', cursive",se="'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive",d={vermillion:"#D9401F",cyan:"#0B85C8",yellow:"#FFD60A",magenta:"#D6247A",green:"#15964B",purple:"#7A3DC8"},de=[d.vermillion,d.cyan,d.yellow,d.magenta,d.green,d.purple],ce=["#FFE45C","#F58A1F","#C4161C"],he=[d.cyan,"#ECE5D4",d.vermillion],A={offsetX:4,offsetY:4,blur:0,color:a.black},ge={offsetX:6,offsetY:6,blur:0,color:a.black},S={offsetX:2,offsetY:2,blur:0,color:a.black},I={offsetX:4,offsetY:4,blur:0,color:a.black},fe={offsetX:6,offsetY:6,blur:0,color:a.black},ue={offsetX:2,offsetY:2,blur:0,color:d.yellow},pe={pattern:"dots",color:"rgba(20, 20, 20, 0.24)",size:7},ye={image:ne(a.paper,d.vermillion,.18),fit:"stretch",fallback:a.paper},ve={fontFamily:w,fontWeight:400,fontSize:22,lineHeight:1.05,letterSpacing:1.5,textTransform:"uppercase",textColor:a.black},M={fill:d.yellow,stroke:a.black,strokeWidth:3,cornerRadius:0,paddingInline:10,paddingBlock:5,shadow:{offsetX:5,offsetY:5,blur:0,color:d.vermillion}},x={fontFamily:w,fontWeight:400,fontSize:16,lineHeight:1.05,letterSpacing:1,textTransform:"uppercase",textColor:a.black},O={...M,strokeWidth:2.5,paddingInline:7,paddingBlock:3,shadow:{offsetX:3,offsetY:3,blur:0,color:d.vermillion}},E={fontFamily:w,fontWeight:400,letterSpacing:1,textTransform:"uppercase"},y={stroke:a.black,strokeAlpha:1},L={dashArray:[],lineCap:"round",lineJoin:"round"},v={textColor:a.black,fontWeight:700},b={textColor:a.secondary,fontWeight:700},me={tokens:{graphBackground:a.paper,graphBorder:a.black,geomBorder:a.black,textPrimary:a.black,textSecondary:a.secondary,ruleLine:a.black,gridLine:a.grid,hoverAffordance:a.black,hoverGuideFill:"rgba(20, 20, 20, 0.07)",hoverGuideLine:a.black,tooltipBackground:a.bubble,tooltipBorder:a.black,tooltipPrimaryRow:"rgba(255, 214, 10, 0.35)",annotationShape:d.yellow,annotationArrow:a.black,differenceLabelBackground:a.bubble,trendPositive:d.green,trendNegative:a.deepRed,trendNeutral:a.secondary},defaults:[e.style.graph({fill:ye,strokeWidth:4,cornerRadius:0,fontFamily:se,padding:22,shadow:fe}),e.style.geom({shadow:A,overpaint:pe}),e.style.geom({shadow:A},{state:"hovered"}),e.style.geom.bar({...y,strokeWidth:2.5,cornerRadius:0}),e.style.geom.bar({...y,strokeWidth:2.5,shadow:ge},{state:"hovered"}),e.style.geom.line({strokeWidth:3.5,...L,shadow:S,overpaint:"none"}),e.style.geom.line({shadow:S},{state:"hovered"}),e.style.geom.area({...y,fillAlpha:1,strokeWidth:2.5,...L}),e.style.geom.point({...y,size:13,strokeWidth:2,shadow:S}),e.style.geom.point({...y,strokeWidth:2,shadow:"none"},{state:"hovered"}),e.style.geom.tile({...y,cornerRadius:2,strokeWidth:1.5,shadow:"none"}),e.style.geom.tile({...y,strokeWidth:3,shadow:"none"},{state:"hovered"}),e.style.geom.rule({strokeWidth:2.5,dashArray:[3,3],lineCap:"round",shadow:"none"}),e.style.geom.rule.label({...E,textColor:d.yellow,fontSize:15}),e.style.gridLine({dashArray:[1,5]}),e.style.gridLine.x({strokeWidth:0}),e.style.gridLine.y({strokeWidth:1.5}),e.style.panelBorder({strokeWidth:0}),e.style.panelBorder.bottom({stroke:a.black,strokeWidth:3,dashArray:[]}),e.style.tickLine({strokeWidth:0}),e.style.tickLabel({...b,fontSize:14,lineHeight:1}),e.style.axisLabel({...v,...E,fontSize:18,lineHeight:1}),e.style.heading({...v}),e.style.heading.h1({fontFamily:w,fontWeight:400,fontSize:36,lineHeight:1,letterSpacing:1,textTransform:"uppercase",textShadow:ue}),e.style.heading.h2({...b,fontSize:16,lineHeight:1.2}),e.style.header({margin:{bottom:18}}),e.style.caption({...b,fontWeight:400,fontSize:13}),e.style.source({...b,fontWeight:400,fontSize:13}),e.style.dataLabel({...v,fontSize:14,fill:"transparent"}),e.style.legendItem({...v,...E,fontSize:18,fill:"transparent",stroke:"transparent"}),e.style.legendItem.swatch({size:16}),e.style.directLabel({fontWeight:700,fontSize:14}),e.style.tooltip({strokeWidth:2.5,cornerRadius:10,paddingInline:12,paddingBlock:9,shadow:I}),e.style.tooltip.heading({...v,fontSize:15,lineHeight:1.3}),e.style.tooltip.label({...b,fontSize:14,lineHeight:1.3}),e.style.tooltip.value({...v,fontSize:14,lineHeight:1.3}),e.style.legend.popover({strokeWidth:2.5,cornerRadius:10,shadow:I}),e.style.annotation.text({...ve,...M}),e.style.annotation.shape({fillAlpha:.35,stroke:a.black,strokeWidth:2}),e.style.annotation.arrow({strokeWidth:3.5,dashArray:[]}),e.style.annotation.arrow.outline({stroke:a.paper,strokeWidth:2}),e.style.annotation.pinnedNumber({stroke:a.black,shadow:S}),e.style.annotation.pinnedNumber.label({...x,...O}),e.style.annotation.comment({stroke:a.black,shadow:S}),e.style.annotation.comment.label({...x,...O}),e.style.annotation.differenceArrow({stroke:a.black,strokeWidth:2.5}),e.style.annotation.differenceArrow.label({...x,...O,fontSize:18}),e.style.panelBorder.bottom({strokeWidth:0},{coord:"polar"}),e.style.tickLabel({...v,textOutlineColor:a.paper,textOutlineWidth:3.5},{coord:"polar"}),e.style.geom.area({fillAlpha:.5,shadow:"none"},{coord:"polar"}),e.style.geom.area({shadow:"none"},{coord:"polar",state:"hovered"}),e.style.geom.bar({strokeWidth:2.5,shadow:A},{coord:"polar"}),e.style.geom.bar({strokeWidth:2.5},{coord:"polar",state:"hovered"})]},ke={name:"comic",styles:me,palettes:{categorical:de,sequential:ce,diverging:he},colorScheme:"light",plugins:re};exports.comic=ke;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let H=require("react"),e=require("@graphysdk/react"),f=require("react/jsx-runtime");var $=(t,o)=>{const r=(0,e.getX)(t),a=(0,e.getY)(t)??(0,e.getYMax)(t);return r===null||a===null?null:{x:(0,e.toViewBoxX)(r)*o.width,y:(0,e.toViewBoxY)(a)*o.height}},G=(t,o)=>{const r=(0,e.getX)(t),a=(0,e.getY)(t)??(0,e.getRadiusExtent)(t).outerRadius;if(r===null||a===null)return null;const i=(0,e.polarToUnit)(r,a),l=Math.min(o.width,o.height)/2;return{x:o.width/2+i.x*l,y:o.height/2-i.y*l}},X=22,F=Math.PI*2,be=F/(X*2),j=(t,o,r)=>({x:t.x+Math.sin(r.angle)*r.radius*o,y:t.y-Math.cos(r.angle)*r.radius*o}),W=2,U=({x:t,y:o})=>`${t.toFixed(W)},${o.toFixed(W)}`,_=8,K=.6,V=(t,o)=>{const r=o/2,a=F/(_*2);return`M${Array.from({length:_*2},(i,l)=>j(t,r,{angle:l*a,radius:l%2===0?1:K})).map(U).join(" L")} Z`},D=t=>{const o=(0,e.useGeomStyleReader)(t);return(r,a)=>{const i=o.get("shadow",r,a);return{color:(0,e.toPaintColor)(o.get("fill",r,a)),opacity:o.get("alpha",r,a),fillOpacity:o.get("fillAlpha",r,a),outline:o.get("stroke",r,a),outlineWidth:o.get("strokeWidth",r,a),shadow:i==="none"?null:{offsetX:i.offsetX,offsetY:i.offsetY,color:i.color}}}},N=1.35,q=4,J=1,C=({layer:t,observations:o,panel:r,project:a,state:i})=>{const l=(0,e.useGeomStyleReader)(t),h=D(t),g=(0,H.useMemo)(()=>(0,e.createStableKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]),p=i==="hovered";return(0,f.jsx)("g",{"data-geom":"point",children:Array.from(o,y=>{const u=a(y,r);if(u===null)return null;const s=h(y,i),c=V(u,l.get("size",y,i)*N+(p?q:0));return(0,f.jsxs)("g",{opacity:s.opacity,children:[s.shadow!==null&&(0,f.jsx)("path",{d:c,transform:`translate(${s.shadow.offsetX} ${s.shadow.offsetY})`,fill:s.shadow.color}),(0,f.jsx)("path",{d:c,fill:s.color,fillOpacity:s.fillOpacity,stroke:s.outline,strokeWidth:s.outlineWidth+(p?J:0),strokeLinejoin:"round"})]},g(y))})})},M=(t,o)=>(0,e.defineGeomRenderer)("point",{coord:t,swatchShape:"circle",render:({layer:r,panelRect:a})=>(0,f.jsx)(C,{layer:r,observations:r.data,panel:a,project:o}),renderHover:({layer:r,primary:a,panelRect:i})=>(0,f.jsx)(C,{layer:r,observations:[a.observation],panel:i,project:o,state:"hovered"}),renderHoverCompanions:()=>null,getEditOutlineShapes:({layer:r,panelRect:a,styleReaders:i})=>(0,e.buildDotsEditOutlineShapes)(Array.from(r.data,l=>{const h=o(l,a),g=i.get("size",l);if(h===null||g===void 0)return[];const p=i.get("strokeWidth",l)??0;return[{center:h,size:g*N+p}]}).flat())}),Z=M("cartesian",$),Q=M("polar",G),ee=2,te=2,B=t=>{const{startAngle:o,endAngle:r}=(0,e.getAngleExtent)(t),{innerRadius:a,outerRadius:i}=(0,e.getRadiusExtent)(t);return o===null||r===null||a===null||i===null||r<=o||i<=0?null:{startAngle:o,endAngle:r,innerRadius:a,outerRadius:i}},oe=(t,o,r)=>[...t].flatMap(a=>{const i=B(a);return i===null?[]:[{key:`${r(a)}-${i.startAngle}`,paint:o(a),...i}]}),z=(t,o,r)=>(0,e.buildPolarBarArcPath)(t,{centerX:o.x,centerY:o.y,radius:r,digits:te}),R=({layer:t,observations:o,panel:r,state:a})=>{const i=D(t),l=(0,H.useMemo)(()=>(0,e.createStableKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]),h=Math.min(r.width,r.height)/2;if(h<=0)return null;const g={x:r.width/2,y:r.height/2},p=oe(o,u=>i(u,a),l).flatMap(u=>{const s=z(u,g,h);return s===void 0?[]:[{key:u.key,path:s,paint:u.paint}]}),y=a==="hovered";return(0,f.jsxs)("g",{"data-geom":"bar",children:[!y&&p.map(({key:u,path:s,paint:c})=>c.shadow===null?null:(0,f.jsx)("path",{d:s,transform:`translate(${c.shadow.offsetX} ${c.shadow.offsetY})`,fill:c.shadow.color,opacity:c.opacity},`${u}-shadow`)),p.map(({key:u,path:s,paint:c})=>(0,f.jsx)("path",{"data-comic-slice":"sector",d:s,fill:c.color,fillOpacity:c.fillOpacity,fillRule:"evenodd",stroke:c.outline,strokeWidth:c.outlineWidth+(y?ee:0),strokeLinejoin:"round",opacity:c.opacity},u))]})},re=(0,e.defineGeomRenderer)("bar",{coord:"polar",guideMode:"band",swatchShape:"slice",render:({layer:t,panelRect:o})=>(0,f.jsx)(R,{layer:t,observations:t.data,panel:o}),renderHover:({layer:t,primary:o,panelRect:r})=>(0,f.jsx)(R,{layer:t,observations:[o.observation],panel:r,state:"hovered"}),renderHoverCompanions:()=>null,getEditOutlineShapes:({layer:t,panelRect:o,shouldAnimateTransitions:r})=>{const a=Math.min(o.width,o.height)/2,i={x:o.width/2,y:o.height/2},l=Array.from(t.data,h=>{const g=B(h);return g===null?"":z(g,i,a)??""}).join("");return l===""?[]:[{kind:"region",pathData:l,shouldAnimateTransitions:r}]}}),ae=[re,Z,Q],k=10,ne=.42,P=220,ie=.6,T=1,le=()=>{const t=Math.ceil(P/k),o=[];for(let r=0;r<=t;r+=1){const a=r%2===0?0:k/2;for(let i=0;i<=23;i+=1){const l=-(i*k+a),h=r*k,g=k*ne*(1-Math.hypot(l,h)/P);g>=ie&&o.push(`<circle cx="${l.toFixed(T)}" cy="${h.toFixed(T)}" r="${g.toFixed(T)}"/>`)}}return o.join("")},se=(t,o,r)=>{const a=`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="${t}"/><svg x="100%" y="0" width="1" height="1" overflow="visible"><g fill="${o}" fill-opacity="${r}">${le()}</g></svg></svg>`;return`data:image/svg+xml,${encodeURIComponent(a)}`},n={paper:"#FBF3DF",bubble:"#FFFDF6",black:"#141414",secondary:"#4A4338",grid:"rgba(20, 20, 20, 0.2)",deepRed:"#C4161C"},w="'Bangers', 'Comic Neue', 'Comic Sans MS', cursive",de="'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive",d={vermillion:"#D9401F",cyan:"#0B85C8",yellow:"#FFD60A",magenta:"#D6247A",green:"#15964B",purple:"#7A3DC8"},ce=[d.vermillion,d.cyan,d.yellow,d.magenta,d.green,d.purple],he=["#FFE45C","#F58A1F","#C4161C"],ge=[d.cyan,"#ECE5D4",d.vermillion],A={offsetX:4,offsetY:4,blur:0,color:n.black},ue={offsetX:6,offsetY:6,blur:0,color:n.black},S={offsetX:2,offsetY:2,blur:0,color:n.black},I={offsetX:4,offsetY:4,blur:0,color:n.black},fe={offsetX:6,offsetY:6,blur:0,color:n.black},pe={offsetX:2,offsetY:2,blur:0,color:d.yellow},ye={pattern:"dots",color:"rgba(20, 20, 20, 0.24)",size:7},me={image:se(n.paper,d.vermillion,.18),fit:"stretch",fallback:n.paper},ve={fontFamily:w,fontWeight:400,fontSize:22,lineHeight:1.05,letterSpacing:1.5,textTransform:"uppercase",textColor:n.black},Y={fill:d.yellow,stroke:n.black,strokeWidth:3,cornerRadius:0,paddingInline:10,paddingBlock:5,shadow:{offsetX:5,offsetY:5,blur:0,color:d.vermillion}},O={fontFamily:w,fontWeight:400,fontSize:16,lineHeight:1.05,letterSpacing:1,textTransform:"uppercase",textColor:n.black},E={...Y,strokeWidth:2.5,paddingInline:7,paddingBlock:3,shadow:{offsetX:3,offsetY:3,blur:0,color:d.vermillion}},x={fontFamily:w,fontWeight:400,letterSpacing:1,textTransform:"uppercase"},m={stroke:n.black,strokeAlpha:1},L={dashArray:[],lineCap:"round",lineJoin:"round"},v={textColor:n.black,fontWeight:700},b={textColor:n.secondary,fontWeight:700},ke={tokens:{graphBackground:n.paper,graphBorder:n.black,geomBorder:n.black,textPrimary:n.black,textSecondary:n.secondary,ruleLine:n.black,gridLine:n.grid,hoverAffordance:n.black,hoverGuideFill:"rgba(20, 20, 20, 0.07)",hoverGuideLine:n.black,tooltipBackground:n.bubble,tooltipBorder:n.black,tooltipPrimaryRow:"rgba(255, 214, 10, 0.35)",annotationShape:d.yellow,annotationArrow:n.black,differenceLabelBackground:n.bubble,trendPositive:d.green,trendNegative:n.deepRed,trendNeutral:n.secondary},defaults:[e.style.graph({fill:me,strokeWidth:4,cornerRadius:0,fontFamily:de,padding:22,shadow:fe}),e.style.geom({shadow:A,overpaint:ye}),e.style.geom({shadow:A},{state:"hovered"}),e.style.geom.bar({...m,strokeWidth:2.5,cornerRadius:0}),e.style.geom.bar({...m,strokeWidth:2.5,shadow:ue},{state:"hovered"}),e.style.geom.line({strokeWidth:3.5,...L,shadow:S,overpaint:"none"}),e.style.geom.line({shadow:S},{state:"hovered"}),e.style.geom.area({...m,fillAlpha:1,strokeWidth:2.5,...L}),e.style.geom.point({...m,size:13,strokeWidth:2,shadow:S}),e.style.geom.point({...m,strokeWidth:2,shadow:"none"},{state:"hovered"}),e.style.geom.tile({...m,cornerRadius:2,strokeWidth:1.5,shadow:"none"}),e.style.geom.tile({...m,strokeWidth:3,shadow:"none"},{state:"hovered"}),e.style.geom.rule({strokeWidth:2.5,dashArray:[3,3],lineCap:"round",shadow:"none"}),e.style.geom.rule.label({...x,textColor:d.yellow,fontSize:15}),e.style.gridLine({dashArray:[1,5]}),e.style.gridLine.x({strokeWidth:0}),e.style.gridLine.y({strokeWidth:1.5}),e.style.panelBorder({strokeWidth:0}),e.style.panelBorder.bottom({stroke:n.black,strokeWidth:3,dashArray:[]}),e.style.tickLine({strokeWidth:0}),e.style.tickLabel({...b,fontSize:14,lineHeight:1}),e.style.axisLabel({...v,...x,fontSize:18,lineHeight:1}),e.style.heading({...v}),e.style.heading.h1({fontFamily:w,fontWeight:400,fontSize:36,lineHeight:1,letterSpacing:1,textTransform:"uppercase",textShadow:pe}),e.style.heading.h2({...b,fontSize:16,lineHeight:1.2}),e.style.header({margin:{bottom:18}}),e.style.caption({...b,fontWeight:400,fontSize:13}),e.style.source({...b,fontWeight:400,fontSize:13}),e.style.dataLabel({...v,fontSize:14,fill:"transparent"}),e.style.legendItem({...v,...x,fontSize:18,fill:"transparent",stroke:"transparent"}),e.style.legendItem.swatch({size:16}),e.style.directLabel({fontWeight:700,fontSize:14}),e.style.tooltip({strokeWidth:2.5,cornerRadius:10,paddingInline:12,paddingBlock:9,shadow:I}),e.style.tooltip.heading({...v,fontSize:15,lineHeight:1.3}),e.style.tooltip.label({...b,fontSize:14,lineHeight:1.3}),e.style.tooltip.value({...v,fontSize:14,lineHeight:1.3}),e.style.legend.popover({strokeWidth:2.5,cornerRadius:10,shadow:I}),e.style.annotation.text({...ve,...Y}),e.style.annotation.shape({fillAlpha:.35,stroke:n.black,strokeWidth:2}),e.style.annotation.arrow({strokeWidth:3.5,dashArray:[]}),e.style.annotation.arrow.outline({stroke:n.paper,strokeWidth:2}),e.style.annotation.pinnedNumber({stroke:n.black,shadow:S}),e.style.annotation.pinnedNumber.label({...O,...E}),e.style.annotation.comment({stroke:n.black,shadow:S}),e.style.annotation.comment.label({...O,...E}),e.style.annotation.differenceArrow({stroke:n.black,strokeWidth:2.5}),e.style.annotation.differenceArrow.label({...O,...E,fontSize:18}),e.style.panelBorder.bottom({strokeWidth:0},{coord:"polar"}),e.style.tickLabel({...v,textOutlineColor:n.paper,textOutlineWidth:3.5},{coord:"polar"}),e.style.geom.area({fillAlpha:.5,shadow:"none"},{coord:"polar"}),e.style.geom.area({shadow:"none"},{coord:"polar",state:"hovered"}),e.style.geom.bar({strokeWidth:2.5,shadow:A},{coord:"polar"}),e.style.geom.bar({strokeWidth:2.5},{coord:"polar",state:"hovered"})]},Se={name:"comic",styles:ke,palettes:{categorical:ce,sequential:he,diverging:ge},colorScheme:"light",plugins:ae};exports.comic=Se;

package/dist/index.mjs

@@ -1,39 +1,39 @@
 import { useMemo as H } from "react";
-import { buildPolarBarArcPath as j, createStableKeyGenerator as F, defineGeomRenderer as D, getAngleExtent as K, getRadiusExtent as N, getX as B, getY as M, getYMax as V, polarToUnit as q, style as e, toPaintColor as J, toViewBoxX as Z, toViewBoxY as Q, useGeomStyleReader as z } from "@graphysdk/react";
-import { jsx as p, jsxs as Y } from "react/jsx-runtime";
-var ee = (o, r) => {
-  const t = B(o), i = M(o) ?? V(o);
-  return t === null || i === null ? null : {
-    x: Z(t) * r.width,
-    y: Q(i) * r.height
+import { buildDotsEditOutlineShapes as q, buildPolarBarArcPath as J, createStableKeyGenerator as F, defineGeomRenderer as D, getAngleExtent as Z, getRadiusExtent as N, getX as B, getY as M, getYMax as Q, polarToUnit as ee, style as t, toPaintColor as te, toViewBoxX as oe, toViewBoxY as re, useGeomStyleReader as z } from "@graphysdk/react";
+import { jsx as u, jsxs as Y } from "react/jsx-runtime";
+var ae = (e, o) => {
+  const r = B(e), a = M(e) ?? Q(e);
+  return r === null || a === null ? null : {
+    x: oe(r) * o.width,
+    y: re(a) * o.height
   };
-}, oe = (o, r) => {
-  const t = B(o), i = M(o) ?? N(o).outerRadius;
-  if (t === null || i === null) return null;
-  const n = q(t, i), l = Math.min(r.width, r.height) / 2;
+}, ie = (e, o) => {
+  const r = B(e), a = M(e) ?? N(e).outerRadius;
+  if (r === null || a === null) return null;
+  const n = ee(r, a), l = Math.min(o.width, o.height) / 2;
   return {
-    x: r.width / 2 + n.x * l,
-    y: r.height / 2 - n.y * l
+    x: o.width / 2 + n.x * l,
+    y: o.height / 2 - n.y * l
   };
-}, te = 22, $ = Math.PI * 2, Fe = $ / (te * 2), re = (o, r, t) => ({
-  x: o.x + Math.sin(t.angle) * t.radius * r,
-  y: o.y - Math.cos(t.angle) * t.radius * r
-}), C = 2, ae = ({ x: o, y: r }) => `${o.toFixed(C)},${r.toFixed(C)}`, R = 8, ie = 0.6, ne = (o, r) => {
-  const t = r / 2, i = $ / (R * 2);
-  return `M${Array.from({ length: R * 2 }, (n, l) => re(o, t, {
-    angle: l * i,
-    radius: l % 2 === 0 ? 1 : ie
-  })).map(ae).join(" L")} Z`;
-}, X = (o) => {
-  const r = z(o);
-  return (t, i) => {
-    const n = r.get("shadow", t, i);
+}, ne = 22, $ = Math.PI * 2, Ne = $ / (ne * 2), le = (e, o, r) => ({
+  x: e.x + Math.sin(r.angle) * r.radius * o,
+  y: e.y - Math.cos(r.angle) * r.radius * o
+}), C = 2, de = ({ x: e, y: o }) => `${e.toFixed(C)},${o.toFixed(C)}`, _ = 8, se = 0.6, ce = (e, o) => {
+  const r = o / 2, a = $ / (_ * 2);
+  return `M${Array.from({ length: _ * 2 }, (n, l) => le(e, r, {
+    angle: l * a,
+    radius: l % 2 === 0 ? 1 : se
+  })).map(de).join(" L")} Z`;
+}, X = (e) => {
+  const o = z(e);
+  return (r, a) => {
+    const n = o.get("shadow", r, a);
     return {
-      color: J(r.get("fill", t, i)),
-      opacity: r.get("alpha", t, i),
-      fillOpacity: r.get("fillAlpha", t, i),
-      outline: r.get("stroke", t, i),
-      outlineWidth: r.get("strokeWidth", t, i),
+      color: te(o.get("fill", r, a)),
+      opacity: o.get("alpha", r, a),
+      fillOpacity: o.get("fillAlpha", r, a),
+      outline: o.get("stroke", r, a),
+      outlineWidth: o.get("strokeWidth", r, a),
       shadow: n === "none" ? null : {
         offsetX: n.offsetX,
         offsetY: n.offsetY,
@@ -41,163 +41,191 @@ var ee = (o, r) => {
       }
     };
   };
-}, le = 1.35, de = 4, se = 1, _ = ({ layer: o, observations: r, panel: t, project: i, state: n }) => {
-  const l = z(o), f = X(o), g = H(() => F(o.data, o.mapping, o.id), [
-    o.data,
-    o.mapping,
-    o.id
-  ]), k = n === "hovered";
-  return /* @__PURE__ */ p("g", {
+}, G = 1.35, he = 4, ge = 1, R = ({ layer: e, observations: o, panel: r, project: a, state: n }) => {
+  const l = z(e), h = X(e), g = H(() => F(e.data, e.mapping, e.id), [
+    e.data,
+    e.mapping,
+    e.id
+  ]), p = n === "hovered";
+  return /* @__PURE__ */ u("g", {
     "data-geom": "point",
-    children: Array.from(r, (u) => {
-      const h = i(u, t);
-      if (h === null) return null;
-      const d = f(u, n), c = ne(h, l.get("size", u, n) * le + (k ? de : 0));
+    children: Array.from(o, (m) => {
+      const f = a(m, r);
+      if (f === null) return null;
+      const d = h(m, n), c = ce(f, l.get("size", m, n) * G + (p ? he : 0));
       return /* @__PURE__ */ Y("g", {
         opacity: d.opacity,
-        children: [d.shadow !== null && /* @__PURE__ */ p("path", {
+        children: [d.shadow !== null && /* @__PURE__ */ u("path", {
           d: c,
           transform: `translate(${d.shadow.offsetX} ${d.shadow.offsetY})`,
           fill: d.shadow.color
-        }), /* @__PURE__ */ p("path", {
+        }), /* @__PURE__ */ u("path", {
           d: c,
           fill: d.color,
           fillOpacity: d.fillOpacity,
           stroke: d.outline,
-          strokeWidth: d.outlineWidth + (k ? se : 0),
+          strokeWidth: d.outlineWidth + (p ? ge : 0),
           strokeLinejoin: "round"
         })]
-      }, g(u));
+      }, g(m));
     })
   });
-}, G = (o, r) => D("point", {
-  coord: o,
+}, U = (e, o) => D("point", {
+  coord: e,
   swatchShape: "circle",
-  render: ({ layer: t, panelRect: i }) => /* @__PURE__ */ p(_, {
-    layer: t,
-    observations: t.data,
-    panel: i,
-    project: r
+  render: ({ layer: r, panelRect: a }) => /* @__PURE__ */ u(R, {
+    layer: r,
+    observations: r.data,
+    panel: a,
+    project: o
   }),
-  renderHover: ({ layer: t, primary: i, panelRect: n }) => /* @__PURE__ */ p(_, {
-    layer: t,
-    observations: [i.observation],
+  renderHover: ({ layer: r, primary: a, panelRect: n }) => /* @__PURE__ */ u(R, {
+    layer: r,
+    observations: [a.observation],
     panel: n,
-    project: r,
+    project: o,
     state: "hovered"
   }),
-  renderHoverCompanions: () => null
-}), ce = G("cartesian", ee), he = G("polar", oe), fe = 2, ge = 2, pe = (o, r, t) => [...o].flatMap((i) => {
-  const { startAngle: n, endAngle: l } = K(i), { innerRadius: f, outerRadius: g } = N(i);
-  return n === null || l === null || f === null || g === null ? [] : l <= n || g <= 0 ? [] : [{
-    key: `${t(i)}-${n}`,
-    paint: r(i),
-    startAngle: n,
-    endAngle: l,
-    innerRadius: f,
-    outerRadius: g
+  renderHoverCompanions: () => null,
+  getEditOutlineShapes: ({ layer: r, panelRect: a, styleReaders: n }) => q(Array.from(r.data, (l) => {
+    const h = o(l, a), g = n.get("size", l);
+    if (h === null || g === void 0) return [];
+    const p = n.get("strokeWidth", l) ?? 0;
+    return [{
+      center: h,
+      size: g * G + p
+    }];
+  }).flat())
+}), fe = U("cartesian", ae), ue = U("polar", ie), pe = 2, me = 2, j = (e) => {
+  const { startAngle: o, endAngle: r } = Z(e), { innerRadius: a, outerRadius: n } = N(e);
+  return o === null || r === null || a === null || n === null || r <= o || n <= 0 ? null : {
+    startAngle: o,
+    endAngle: r,
+    innerRadius: a,
+    outerRadius: n
+  };
+}, ve = (e, o, r) => [...e].flatMap((a) => {
+  const n = j(a);
+  return n === null ? [] : [{
+    key: `${r(a)}-${n.startAngle}`,
+    paint: o(a),
+    ...n
   }];
-}), ue = (o, r, t) => j(o, {
-  centerX: r.x,
-  centerY: r.y,
-  radius: t,
-  digits: ge
-}), x = ({ layer: o, observations: r, panel: t, state: i }) => {
-  const n = X(o), l = H(() => F(o.data, o.mapping, o.id), [
-    o.data,
-    o.mapping,
-    o.id
-  ]), f = Math.min(t.width, t.height) / 2;
-  if (f <= 0) return null;
+}), K = (e, o, r) => J(e, {
+  centerX: o.x,
+  centerY: o.y,
+  radius: r,
+  digits: me
+}), x = ({ layer: e, observations: o, panel: r, state: a }) => {
+  const n = X(e), l = H(() => F(e.data, e.mapping, e.id), [
+    e.data,
+    e.mapping,
+    e.id
+  ]), h = Math.min(r.width, r.height) / 2;
+  if (h <= 0) return null;
   const g = {
-    x: t.width / 2,
-    y: t.height / 2
-  }, k = pe(r, (h) => n(h, i), l).flatMap((h) => {
-    const d = ue(h, g, f);
+    x: r.width / 2,
+    y: r.height / 2
+  }, p = ve(o, (f) => n(f, a), l).flatMap((f) => {
+    const d = K(f, g, h);
     return d === void 0 ? [] : [{
-      key: h.key,
+      key: f.key,
       path: d,
-      paint: h.paint
+      paint: f.paint
     }];
-  }), u = i === "hovered";
+  }), m = a === "hovered";
   return /* @__PURE__ */ Y("g", {
     "data-geom": "bar",
-    children: [!u && k.map(({ key: h, path: d, paint: c }) => c.shadow === null ? null : /* @__PURE__ */ p("path", {
+    children: [!m && p.map(({ key: f, path: d, paint: c }) => c.shadow === null ? null : /* @__PURE__ */ u("path", {
       d,
       transform: `translate(${c.shadow.offsetX} ${c.shadow.offsetY})`,
       fill: c.shadow.color,
       opacity: c.opacity
-    }, `${h}-shadow`)), k.map(({ key: h, path: d, paint: c }) => /* @__PURE__ */ p("path", {
+    }, `${f}-shadow`)), p.map(({ key: f, path: d, paint: c }) => /* @__PURE__ */ u("path", {
       "data-comic-slice": "sector",
       d,
       fill: c.color,
       fillOpacity: c.fillOpacity,
       fillRule: "evenodd",
       stroke: c.outline,
-      strokeWidth: c.outlineWidth + (u ? fe : 0),
+      strokeWidth: c.outlineWidth + (m ? pe : 0),
       strokeLinejoin: "round",
       opacity: c.opacity
-    }, h))]
+    }, f))]
   });
-}, me = D("bar", {
+}, ke = D("bar", {
   coord: "polar",
   guideMode: "band",
   swatchShape: "slice",
-  render: ({ layer: o, panelRect: r }) => /* @__PURE__ */ p(x, {
-    layer: o,
-    observations: o.data,
-    panel: r
+  render: ({ layer: e, panelRect: o }) => /* @__PURE__ */ u(x, {
+    layer: e,
+    observations: e.data,
+    panel: o
   }),
-  renderHover: ({ layer: o, primary: r, panelRect: t }) => /* @__PURE__ */ p(x, {
-    layer: o,
-    observations: [r.observation],
-    panel: t,
+  renderHover: ({ layer: e, primary: o, panelRect: r }) => /* @__PURE__ */ u(x, {
+    layer: e,
+    observations: [o.observation],
+    panel: r,
     state: "hovered"
   }),
-  renderHoverCompanions: () => null
-}), ve = [
-  me,
-  ce,
-  he
-], b = 10, ke = 0.42, P = 220, be = 0.6, A = 1, Se = () => {
-  const o = Math.ceil(P / b), r = [];
-  for (let t = 0; t <= o; t += 1) {
-    const i = t % 2 === 0 ? 0 : b / 2;
+  renderHoverCompanions: () => null,
+  getEditOutlineShapes: ({ layer: e, panelRect: o, shouldAnimateTransitions: r }) => {
+    const a = Math.min(o.width, o.height) / 2, n = {
+      x: o.width / 2,
+      y: o.height / 2
+    }, l = Array.from(e.data, (h) => {
+      const g = j(h);
+      return g === null ? "" : K(g, n, a) ?? "";
+    }).join("");
+    return l === "" ? [] : [{
+      kind: "region",
+      pathData: l,
+      shouldAnimateTransitions: r
+    }];
+  }
+}), Se = [
+  ke,
+  fe,
+  ue
+], S = 10, be = 0.42, P = 220, we = 0.6, A = 1, Te = () => {
+  const e = Math.ceil(P / S), o = [];
+  for (let r = 0; r <= e; r += 1) {
+    const a = r % 2 === 0 ? 0 : S / 2;
     for (let n = 0; n <= 23; n += 1) {
-      const l = -(n * b + i), f = t * b, g = b * ke * (1 - Math.hypot(l, f) / P);
-      g >= be && r.push(`<circle cx="${l.toFixed(A)}" cy="${f.toFixed(A)}" r="${g.toFixed(A)}"/>`);
+      const l = -(n * S + a), h = r * S, g = S * be * (1 - Math.hypot(l, h) / P);
+      g >= we && o.push(`<circle cx="${l.toFixed(A)}" cy="${h.toFixed(A)}" r="${g.toFixed(A)}"/>`);
     }
   }
-  return r.join("");
-}, we = (o, r, t) => {
-  const i = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="${o}"/><svg x="100%" y="0" width="1" height="1" overflow="visible"><g fill="${r}" fill-opacity="${t}">${Se()}</g></svg></svg>`;
-  return `data:image/svg+xml,${encodeURIComponent(i)}`;
-}, a = {
+  return o.join("");
+}, Ae = (e, o, r) => {
+  const a = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="${e}"/><svg x="100%" y="0" width="1" height="1" overflow="visible"><g fill="${o}" fill-opacity="${r}">${Te()}</g></svg></svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(a)}`;
+}, i = {
   paper: "#FBF3DF",
   bubble: "#FFFDF6",
   black: "#141414",
   secondary: "#4A4338",
   grid: "rgba(20, 20, 20, 0.2)",
   deepRed: "#C4161C"
-}, T = "'Bangers', 'Comic Neue', 'Comic Sans MS', cursive", Te = "'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive", s = {
+}, T = "'Bangers', 'Comic Neue', 'Comic Sans MS', cursive", Oe = "'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive", s = {
   vermillion: "#D9401F",
   cyan: "#0B85C8",
   yellow: "#FFD60A",
   magenta: "#D6247A",
   green: "#15964B",
   purple: "#7A3DC8"
-}, Ae = [
+}, Ee = [
   s.vermillion,
   s.cyan,
   s.yellow,
   s.magenta,
   s.green,
   s.purple
-], Oe = [
+], ye = [
   "#FFE45C",
   "#F58A1F",
   "#C4161C"
-], ye = [
+], We = [
   s.cyan,
   "#ECE5D4",
   s.vermillion
@@ -205,51 +233,51 @@ var ee = (o, r) => {
   offsetX: 4,
   offsetY: 4,
   blur: 0,
-  color: a.black
-}, Ee = {
+  color: i.black
+}, Ce = {
   offsetX: 6,
   offsetY: 6,
   blur: 0,
-  color: a.black
-}, S = {
+  color: i.black
+}, b = {
   offsetX: 2,
   offsetY: 2,
   blur: 0,
-  color: a.black
+  color: i.black
 }, I = {
   offsetX: 4,
   offsetY: 4,
   blur: 0,
-  color: a.black
-}, We = {
+  color: i.black
+}, _e = {
   offsetX: 6,
   offsetY: 6,
   blur: 0,
-  color: a.black
-}, Ce = {
+  color: i.black
+}, Re = {
   offsetX: 2,
   offsetY: 2,
   blur: 0,
   color: s.yellow
-}, Re = {
+}, xe = {
   pattern: "dots",
   color: "rgba(20, 20, 20, 0.24)",
   size: 7
-}, _e = {
-  image: we(a.paper, s.vermillion, 0.18),
+}, Pe = {
+  image: Ae(i.paper, s.vermillion, 0.18),
   fit: "stretch",
-  fallback: a.paper
-}, xe = {
+  fallback: i.paper
+}, Ie = {
   fontFamily: T,
   fontWeight: 400,
   fontSize: 22,
   lineHeight: 1.05,
   letterSpacing: 1.5,
   textTransform: "uppercase",
-  textColor: a.black
-}, U = {
+  textColor: i.black
+}, V = {
   fill: s.yellow,
-  stroke: a.black,
+  stroke: i.black,
   strokeWidth: 3,
   cornerRadius: 0,
   paddingInline: 10,
@@ -260,16 +288,16 @@ var ee = (o, r) => {
     blur: 0,
     color: s.vermillion
   }
-}, y = {
+}, E = {
   fontFamily: T,
   fontWeight: 400,
   fontSize: 16,
   lineHeight: 1.05,
   letterSpacing: 1,
   textTransform: "uppercase",
-  textColor: a.black
-}, E = {
-  ...U,
+  textColor: i.black
+}, y = {
+  ...V,
   strokeWidth: 2.5,
   paddingInline: 7,
   paddingBlock: 3,
@@ -284,278 +312,278 @@ var ee = (o, r) => {
   fontWeight: 400,
   letterSpacing: 1,
   textTransform: "uppercase"
-}, m = {
-  stroke: a.black,
+}, v = {
+  stroke: i.black,
   strokeAlpha: 1
 }, L = {
   dashArray: [],
   lineCap: "round",
   lineJoin: "round"
-}, v = {
-  textColor: a.black,
+}, k = {
+  textColor: i.black,
   fontWeight: 700
 }, w = {
-  textColor: a.secondary,
+  textColor: i.secondary,
   fontWeight: 700
-}, Pe = {
+}, Le = {
   tokens: {
-    graphBackground: a.paper,
-    graphBorder: a.black,
-    geomBorder: a.black,
-    textPrimary: a.black,
-    textSecondary: a.secondary,
-    ruleLine: a.black,
-    gridLine: a.grid,
-    hoverAffordance: a.black,
+    graphBackground: i.paper,
+    graphBorder: i.black,
+    geomBorder: i.black,
+    textPrimary: i.black,
+    textSecondary: i.secondary,
+    ruleLine: i.black,
+    gridLine: i.grid,
+    hoverAffordance: i.black,
     hoverGuideFill: "rgba(20, 20, 20, 0.07)",
-    hoverGuideLine: a.black,
-    tooltipBackground: a.bubble,
-    tooltipBorder: a.black,
+    hoverGuideLine: i.black,
+    tooltipBackground: i.bubble,
+    tooltipBorder: i.black,
     tooltipPrimaryRow: "rgba(255, 214, 10, 0.35)",
     annotationShape: s.yellow,
-    annotationArrow: a.black,
-    differenceLabelBackground: a.bubble,
+    annotationArrow: i.black,
+    differenceLabelBackground: i.bubble,
     trendPositive: s.green,
-    trendNegative: a.deepRed,
-    trendNeutral: a.secondary
+    trendNegative: i.deepRed,
+    trendNeutral: i.secondary
   },
   defaults: [
-    e.graph({
-      fill: _e,
+    t.graph({
+      fill: Pe,
       strokeWidth: 4,
       cornerRadius: 0,
-      fontFamily: Te,
+      fontFamily: Oe,
       padding: 22,
-      shadow: We
+      shadow: _e
     }),
-    e.geom({
+    t.geom({
       shadow: O,
-      overpaint: Re
+      overpaint: xe
     }),
-    e.geom({ shadow: O }, { state: "hovered" }),
-    e.geom.bar({
-      ...m,
+    t.geom({ shadow: O }, { state: "hovered" }),
+    t.geom.bar({
+      ...v,
       strokeWidth: 2.5,
       cornerRadius: 0
     }),
-    e.geom.bar({
-      ...m,
+    t.geom.bar({
+      ...v,
       strokeWidth: 2.5,
-      shadow: Ee
+      shadow: Ce
     }, { state: "hovered" }),
-    e.geom.line({
+    t.geom.line({
       strokeWidth: 3.5,
       ...L,
-      shadow: S,
+      shadow: b,
       overpaint: "none"
     }),
-    e.geom.line({ shadow: S }, { state: "hovered" }),
-    e.geom.area({
-      ...m,
+    t.geom.line({ shadow: b }, { state: "hovered" }),
+    t.geom.area({
+      ...v,
       fillAlpha: 1,
       strokeWidth: 2.5,
       ...L
     }),
-    e.geom.point({
-      ...m,
+    t.geom.point({
+      ...v,
       size: 13,
       strokeWidth: 2,
-      shadow: S
+      shadow: b
     }),
-    e.geom.point({
-      ...m,
+    t.geom.point({
+      ...v,
       strokeWidth: 2,
       shadow: "none"
     }, { state: "hovered" }),
-    e.geom.tile({
-      ...m,
+    t.geom.tile({
+      ...v,
       cornerRadius: 2,
       strokeWidth: 1.5,
       shadow: "none"
     }),
-    e.geom.tile({
-      ...m,
+    t.geom.tile({
+      ...v,
       strokeWidth: 3,
       shadow: "none"
     }, { state: "hovered" }),
-    e.geom.rule({
+    t.geom.rule({
       strokeWidth: 2.5,
       dashArray: [3, 3],
       lineCap: "round",
       shadow: "none"
     }),
-    e.geom.rule.label({
+    t.geom.rule.label({
       ...W,
       textColor: s.yellow,
       fontSize: 15
     }),
-    e.gridLine({ dashArray: [1, 5] }),
-    e.gridLine.x({ strokeWidth: 0 }),
-    e.gridLine.y({ strokeWidth: 1.5 }),
-    e.panelBorder({ strokeWidth: 0 }),
-    e.panelBorder.bottom({
-      stroke: a.black,
+    t.gridLine({ dashArray: [1, 5] }),
+    t.gridLine.x({ strokeWidth: 0 }),
+    t.gridLine.y({ strokeWidth: 1.5 }),
+    t.panelBorder({ strokeWidth: 0 }),
+    t.panelBorder.bottom({
+      stroke: i.black,
       strokeWidth: 3,
       dashArray: []
     }),
-    e.tickLine({ strokeWidth: 0 }),
-    e.tickLabel({
+    t.tickLine({ strokeWidth: 0 }),
+    t.tickLabel({
       ...w,
       fontSize: 14,
       lineHeight: 1
     }),
-    e.axisLabel({
-      ...v,
+    t.axisLabel({
+      ...k,
       ...W,
       fontSize: 18,
       lineHeight: 1
     }),
-    e.heading({ ...v }),
-    e.heading.h1({
+    t.heading({ ...k }),
+    t.heading.h1({
       fontFamily: T,
       fontWeight: 400,
       fontSize: 36,
       lineHeight: 1,
       letterSpacing: 1,
       textTransform: "uppercase",
-      textShadow: Ce
+      textShadow: Re
     }),
-    e.heading.h2({
+    t.heading.h2({
       ...w,
       fontSize: 16,
       lineHeight: 1.2
     }),
-    e.header({ margin: { bottom: 18 } }),
-    e.caption({
+    t.header({ margin: { bottom: 18 } }),
+    t.caption({
       ...w,
       fontWeight: 400,
       fontSize: 13
     }),
-    e.source({
+    t.source({
       ...w,
       fontWeight: 400,
       fontSize: 13
     }),
-    e.dataLabel({
-      ...v,
+    t.dataLabel({
+      ...k,
       fontSize: 14,
       fill: "transparent"
     }),
-    e.legendItem({
-      ...v,
+    t.legendItem({
+      ...k,
       ...W,
       fontSize: 18,
       fill: "transparent",
       stroke: "transparent"
     }),
-    e.legendItem.swatch({ size: 16 }),
-    e.directLabel({
+    t.legendItem.swatch({ size: 16 }),
+    t.directLabel({
       fontWeight: 700,
       fontSize: 14
     }),
-    e.tooltip({
+    t.tooltip({
       strokeWidth: 2.5,
       cornerRadius: 10,
       paddingInline: 12,
       paddingBlock: 9,
       shadow: I
     }),
-    e.tooltip.heading({
-      ...v,
+    t.tooltip.heading({
+      ...k,
       fontSize: 15,
       lineHeight: 1.3
     }),
-    e.tooltip.label({
+    t.tooltip.label({
       ...w,
       fontSize: 14,
       lineHeight: 1.3
     }),
-    e.tooltip.value({
-      ...v,
+    t.tooltip.value({
+      ...k,
       fontSize: 14,
       lineHeight: 1.3
     }),
-    e.legend.popover({
+    t.legend.popover({
       strokeWidth: 2.5,
       cornerRadius: 10,
       shadow: I
     }),
-    e.annotation.text({
-      ...xe,
-      ...U
+    t.annotation.text({
+      ...Ie,
+      ...V
     }),
-    e.annotation.shape({
+    t.annotation.shape({
       fillAlpha: 0.35,
-      stroke: a.black,
+      stroke: i.black,
       strokeWidth: 2
     }),
-    e.annotation.arrow({
+    t.annotation.arrow({
       strokeWidth: 3.5,
       dashArray: []
     }),
-    e.annotation.arrow.outline({
-      stroke: a.paper,
+    t.annotation.arrow.outline({
+      stroke: i.paper,
       strokeWidth: 2
     }),
-    e.annotation.pinnedNumber({
-      stroke: a.black,
-      shadow: S
+    t.annotation.pinnedNumber({
+      stroke: i.black,
+      shadow: b
     }),
-    e.annotation.pinnedNumber.label({
-      ...y,
-      ...E
+    t.annotation.pinnedNumber.label({
+      ...E,
+      ...y
     }),
-    e.annotation.comment({
-      stroke: a.black,
-      shadow: S
+    t.annotation.comment({
+      stroke: i.black,
+      shadow: b
     }),
-    e.annotation.comment.label({
-      ...y,
-      ...E
+    t.annotation.comment.label({
+      ...E,
+      ...y
     }),
-    e.annotation.differenceArrow({
-      stroke: a.black,
+    t.annotation.differenceArrow({
+      stroke: i.black,
       strokeWidth: 2.5
     }),
-    e.annotation.differenceArrow.label({
-      ...y,
+    t.annotation.differenceArrow.label({
       ...E,
+      ...y,
       fontSize: 18
     }),
-    e.panelBorder.bottom({ strokeWidth: 0 }, { coord: "polar" }),
-    e.tickLabel({
-      ...v,
-      textOutlineColor: a.paper,
+    t.panelBorder.bottom({ strokeWidth: 0 }, { coord: "polar" }),
+    t.tickLabel({
+      ...k,
+      textOutlineColor: i.paper,
       textOutlineWidth: 3.5
     }, { coord: "polar" }),
-    e.geom.area({
+    t.geom.area({
       fillAlpha: 0.5,
       shadow: "none"
     }, { coord: "polar" }),
-    e.geom.area({ shadow: "none" }, {
+    t.geom.area({ shadow: "none" }, {
       coord: "polar",
       state: "hovered"
     }),
-    e.geom.bar({
+    t.geom.bar({
       strokeWidth: 2.5,
       shadow: O
     }, { coord: "polar" }),
-    e.geom.bar({ strokeWidth: 2.5 }, {
+    t.geom.bar({ strokeWidth: 2.5 }, {
       coord: "polar",
       state: "hovered"
     })
   ]
-}, De = {
+}, Be = {
   name: "comic",
-  styles: Pe,
+  styles: Le,
   palettes: {
-    categorical: Ae,
-    sequential: Oe,
-    diverging: ye
+    categorical: Ee,
+    sequential: ye,
+    diverging: We
   },
   colorScheme: "light",
-  plugins: ve
+  plugins: Se
 };
 export {
-  De as comic
+  Be as comic
 };

package/package.json

@@ -13,7 +13,7 @@
     "theme",
     "comic"
   ],
-  "version": "0.1.1-beta.1792506850788",
+  "version": "0.1.1-beta.1792511536251",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -40,7 +40,7 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "@graphysdk/react": "^1.9.0-beta.1792506850788"
+    "@graphysdk/react": "^1.9.0-beta.1792511536251"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.1",
@@ -52,11 +52,11 @@
     "vite": "^8.1.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.1.11",
+    "@graphysdk/viz-engine": "1.9.0-beta.1792511536251",
+    "@graphysdk/react": "1.9.0-beta.1792511536251",
     "@graphytools/eslint-config": "0.0.1",
     "@graphytools/typescript-config": "0.0.1",
-    "@graphytools/vitest-config": "1.0.0",
-    "@graphysdk/viz-engine": "1.9.0-beta.1792506850788",
-    "@graphysdk/react": "1.9.0-beta.1792506850788"
+    "@graphytools/vitest-config": "1.0.0"
   },
   "publishConfig": {
     "access": "public"