@graphysdk/theme-comic 0.1.1-beta.1792518514317 → 0.1.1-beta.1792575115573

package/dist/comic.d.ts

@@ -3,10 +3,10 @@ import { Theme } from '@graphysdk/react';
  * Graphs as a panel of a printed comic, by way of the sound effects of the 1960s Batman show: a
  * square black frame round newsprint with a patch of screen tone in its corner, the flat colours of a
  * four-colour press under its dots, a black outline and a hard black shadow for every shape, thick
- * round lines and a title in capitals. A pie or a donut is the burst a comic letters "POW!" in, each
- * slice cut to its jagged edge at exactly its angles; a point is a little burst centred on its
- * reading. A text annotation is lettered as a sound effect, red capitals on a yellow plate. Groups take
- * vermillion, cyan, yellow, magenta, green and purple. Drawn for the light scheme only.
+ * round lines and a title in capitals. A point is a little burst, the shape a comic letters "POW!"
+ * in, centred on its reading. A text annotation is lettered as a sound effect, black capitals on a
+ * yellow plate. Groups take vermillion, cyan, yellow, magenta, green and purple. Drawn for the light
+ * scheme only.
  *
  * The faces are Bangers for the title, the sound effects, the axis names and the key, and Comic Neue
  * for the rest. Import `@graphysdk/theme-comic/fonts.css` once to load them.

package/dist/halftone.d.ts

@@ -1,5 +1,6 @@
 /**
  * The paper as a data URI, for the graph's `fill`: `paper` all over, with a tone of `ink` dots
- * fading out of its top right corner, where a title set from the left leaves the paper bare.
+ * fading out of its bottom right corner. The title and the legend sit in the top corners, one on
+ * each side as the writing direction turns, so the tone stays off both.
  */
 export declare const buildHalftonePaper: (paper: string, ink: string, inkOpacity: number) => string;

package/dist/index.cjs

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

package/dist/index.mjs

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

package/dist/renderer/burst.d.ts

@@ -1,24 +1,3 @@
 import { XYPoint } from '@graphysdk/react';
-/** A point of the burst's edge in polar terms: the angle clockwise from twelve o'clock, and the radius as a share of the circle's. */
-export interface BurstCorner {
-    angle: number;
-    radius: number;
-}
-/**
- * The burst's edge from `startAngle` to `endAngle`, clockwise: where it crosses the two angles, and
- * every corner between. A slice of a pie drawn as a burst is its sector cut to this edge, so the
- * slices of one pie tile the burst exactly, and each keeps its angle. Since the edge repeats every
- * two spikes, a slice's share of the burst's area is its share of the turn to within one spike.
- */
-export declare const traceBurstEdge: (startAngle: number, endAngle: number) => BurstCorner[];
-/** A polar point in the panel's pixels, about `centre`, for a circle of `radius` pixels. */
-export declare const toPanelPoint: (centre: XYPoint, radius: number, corner: BurstCorner) => XYPoint;
-/**
- * One slice of a pie or a donut as a burst, in the panel's pixels: its sector, from `startAngle` to
- * `endAngle`, cut to the burst's jagged edge outside and to the hole's circle inside. `radius` is the
- * burst's in pixels, and `holeRadius` the hole's, 0 for a pie. A slice that is the whole turn is the
- * whole burst, its hole cut out against the turn.
- */
-export declare const buildBurstSlice: (centre: XYPoint, radius: number, holeRadius: number, startAngle: number, endAngle: number) => string;
 /** A point as a little burst of `size` pixels across, centred exactly on `centre`, with a tip at twelve o'clock. */
 export declare const buildPointBurst: (centre: XYPoint, size: number) => string;

package/dist/renderer/paint.d.ts

@@ -15,4 +15,4 @@ export interface ShapePaint {
     shadow: PrintedShadow | null;
 }
 export type ReadShapePaint = (observation: Observation, state?: StyleState) => ShapePaint;
-export declare const useShapePaint: (layer: SceneLayerFor<"bar" | "point">) => ReadShapePaint;
+export declare const useShapePaint: (layer: SceneLayerFor<"point">) => ReadShapePaint;

package/dist/renderer/plugins.d.ts

@@ -1,7 +1,7 @@
 import { ResolvedGeomRenderer } from '@graphysdk/react';
 /**
- * The built-in geoms the theme redraws as bursts: pies, donuts and points. Bars, lines, areas and
- * tiles are drawn by the built-in renderers, which the stylesheet already inks as a comic prints them.
+ * The built-in geoms the theme redraws: points, as bursts. Bars, pies, lines, areas and tiles are
+ * drawn by the built-in renderers, which the stylesheet already inks as a comic prints them.
  * Positions, scales and axes come from the compiled layer unchanged, and colour, outline and shadow
  * come from the stylesheet.
  */

package/dist/renderer/point.d.ts

@@ -1,7 +1,8 @@
 import { ResolvedGeomRenderer } from '@graphysdk/react';
 /**
  * Scatter and bubble: each point a little burst in its group's colour, as a comic marks a hit, with
- * its centre exactly on the reading, outlined in black over a hard shadow. The hovered burst grows.
+ * its centre exactly on the reading, outlined in black over a hard shadow. The hovered burst is outlined more heavily.
+ * Bursts pop out of their readings in the intro, and move and resize as the built-in points do.
  */
 export declare const comicPoint: ResolvedGeomRenderer;
 /** A radar's vertices as the same bursts. */

package/package.json

@@ -13,7 +13,7 @@
     "theme",
     "comic"
   ],
-  "version": "0.1.1-beta.1792518514317",
+  "version": "0.1.1-beta.1792575115573",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -40,7 +40,7 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "@graphysdk/react": "^1.9.0-beta.1792518514317"
+    "@graphysdk/react": "^1.9.0-beta.1792575115573"
   },
   "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",
-    "@graphytools/typescript-config": "0.0.1",
-    "@graphytools/vitest-config": "1.0.0",
-    "@graphysdk/viz-engine": "1.9.0-beta.1792518514317",
+    "@graphysdk/react": "1.9.0-beta.1792575115573",
+    "@graphysdk/viz-engine": "1.9.0-beta.1792575115573",
     "@graphytools/eslint-config": "0.0.1",
-    "@graphysdk/react": "1.9.0-beta.1792518514317"
+    "@graphytools/typescript-config": "0.0.1",
+    "@graphytools/vitest-config": "1.0.0"
   },
   "publishConfig": {
     "access": "public"

package/dist/renderer/slice.d.ts

@@ -1,6 +0,0 @@
-import { ResolvedGeomRenderer } from '@graphysdk/react';
-/**
- * Pie, donut, rose and radial bar as plain sectors, each outlined in black over the one hard shadow of
- * the whole shape, so every slice's size is exactly its share. The hovered slice is outlined more heavily.
- */
-export declare const comicSlice: ResolvedGeomRenderer;