@graphysdk/react-renderer 1.9.0-beta.1789480282040 → 1.9.0-beta.1789545386500

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const c=require("./history-chords-DK83-lsv.cjs"),se=require("./theme.contract.css-Dd-73-Je.cjs");let m=require("@graphysdk/viz-engine"),l=require("react"),a=require("react/jsx-runtime"),A=require("zustand"),B=require("zustand/vanilla"),$=require("clsx");$=c.__toESM($,1);var ne="_1a5iqpb0",oe="_1a5iqpb1";var ae="_1a5iqpb3",ie="_1a5iqpb4",ce="_1a5iqpb5";var L=({errors:e})=>{const[t,...r]=e;return(0,a.jsxs)("div",{role:"alert",className:ne,children:[(0,a.jsx)("strong",{className:oe,children:"This chart could not be rendered."}),t&&(0,a.jsx)(U,{diagnostic:t}),r.length>0&&(0,a.jsx)("ul",{className:"_1a5iqpb2",children:r.map((s,o)=>(0,a.jsx)("li",{children:(0,a.jsx)(U,{diagnostic:s})},`${s.code}-${o}`))})]})},U=({diagnostic:e})=>(0,a.jsxs)("div",{className:ae,children:[(0,a.jsx)("span",{className:ie,children:e.code}),(0,a.jsx)("p",{className:ce,children:e.message}),e.suggestion&&(0,a.jsx)("p",{className:"_1a5iqpb6",children:e.suggestion})]});function le(e=[],t=[]){return e.length===t.length&&e.every((r,s)=>Object.is(r,t[s]))}var W=class extends l.Component{constructor(...e){super(...e),this.state={caughtDiagnostic:null}}static getDerivedStateFromError(e){return{caughtDiagnostic:(0,m.buildDiagnostic)(e)}}componentDidCatch(e,t){const r=(0,m.buildDiagnostic)(e);c.logDiagnostics([r]),this.props.onError?.([r]),console.error("Chart render component stack:",t.componentStack)}componentDidUpdate(e){this.state.caughtDiagnostic&&!le(e.resetKeys,this.props.resetKeys)&&this.setState({caughtDiagnostic:null})}render(){const{caughtDiagnostic:e}=this.state;if(e)return(0,a.jsx)(L,{errors:[e]});const{forcedErrors:t,children:r}=this.props;return t&&t.length>0?(0,a.jsx)(L,{errors:t}):r}},z=e=>typeof e=="object"&&"geom"in e&&"render"in e,de=e=>{const t=(0,m.resolveDefinition)(e);return t instanceof m.Geom?t:null},X=(e,t)=>{const r=e.filter(s=>ue(s,t));return r.length===e.length?e:r},ue=(e,t)=>e.kind==="annotation"?(0,m.findAnnotation)(t.annotations,e.id)!==null:e.kind==="observations"||e.kind==="layer"&&e.layerId!==void 0?(0,m.findLayerById)(t.layers,e.layerId)!==void 0:!0,Y=[],he=()=>(0,B.createStore)(e=>({selection:Y,setSelection:t=>e(r=>ge(r.selection,t)?r:{selection:t}),clearSelection:()=>e(t=>t.selection.length===0?t:{selection:Y})})),ge=(e,t)=>e===t?!0:e.length!==t.length?!1:e.every((r,s)=>{const o=t[s];return o!==void 0&&(0,m.areEditTargetsEqual)(r,o)}),me=process.env.NODE_ENV!=="production",pe=5,fe=e=>{if(!me)return{emit:()=>{},subscribe:()=>ye,getLastTrigger:()=>null,getLastCompile:()=>null,getCacheStats:()=>e.getCacheStats()};const t=new Set;let r=null;return{emit:s=>{const o=e.getLastCompile();if(o){r=s;for(const d of t)d(s,o)}},subscribe:s=>(t.add(s),()=>{t.delete(s)}),getLastTrigger:()=>r,getLastCompile:()=>e.getLastCompile(),getCacheStats:()=>e.getCacheStats()}},ve=()=>(0,B.createStore)(e=>({lastCompile:null,history:[],nextId:1,lastSnapshot:null,recordCompile:(t,r)=>e(s=>{if(s.lastSnapshot===r)return s;const o={id:s.nextId,label:Se(t),stages:r.stages,durationMs:r.durationMs};return{lastCompile:o,history:be(s.history,o,pe),nextId:s.nextId+1,lastSnapshot:r}})})),ye=()=>{},Se=e=>{switch(e.kind){case"init":return"init";case"input":return"input change";case"data":return"data change";case"command":return e.command.metadata.description}},be=(e,t,r)=>{const s=e.length>=r?e.length-(r-1):0;return[...e.slice(s),t]};function Ee(e){const t=e.filter(z),r=new Set([...Object.keys(c.BUILT_IN_GEOM_RENDERERS),...t.map(u=>u.geom)]),s=[],o=new Set;for(const u of e){const g=de(u);g===null||r.has(g.type)||o.has(g.type)||(o.add(g.type),s.push({kind:"user-input",severity:"error",code:"MISSING_GEOM_RENDERER",message:`Custom geom '${g.type}' is registered but has no renderer.`,context:{requested:g.type,kind:"geom-renderer"},suggestion:`Add a render half for it: \`defineGeomRenderer(${g.type}Geom, { coord, render })\`, then include it in \`plugins\`.`}))}const d=new Map;for(const u of t){if("definition"in u)continue;const g=`${u.geom}|${u.coord}`,p=d.get(g);p?p.count+=1:d.set(g,{geom:u.geom,coord:u.coord,count:1})}const i=[];for(const{geom:u,coord:g,count:p}of d.values())p<2||i.push({kind:"user-input",severity:"warning",code:"DUPLICATE_REGISTERED_TYPE",message:`Multiple render-only overrides register ('${u}', '${g}') (${p} entries); the last in the array wins.`,context:{requested:`${u}@${g}`,kind:"geom-renderer"},suggestion:`Keep a single render-only override for ('${u}', '${g}').`});return{errors:s,warnings:i}}function xe(e,t){const{coordSystem:r,layers:s}=e,o=new Set,d=[];for(const i of s)t(i.geom,r.type)!==null||o.has(i.geom)||(o.add(i.geom),d.push({kind:"user-input",severity:"warning",code:"MISSING_GEOM_RENDERER",message:`No renderer for geom '${i.geom}' under ${r.type} coords; the layer is not painted.`,context:{requested:i.geom,kind:"geom-renderer"},suggestion:`Register a renderer for ('${i.geom}', '${r.type}') via \`defineGeomRenderer\`.`}));return d}function Ce(e,t){const{coordSystem:r,layers:s}=e,o=new Set,d=[];for(const i of s){if(i.interactive===!1||i.spatialKind!=="render-hit-test"||o.has(i.geom))continue;const u=t(i.geom,r.type);u===null||u.hitTest||c.isOverlayHosted(u)||(o.add(i.geom),d.push({kind:"user-input",severity:"warning",code:"MISSING_RENDER_HIT_TEST",message:`Geom '${i.geom}' declares spatialKind 'render-hit-test' but its renderer provides no hit-test; the layer has no hover.`,context:{requested:i.geom,kind:"geom-renderer"},suggestion:`Add a \`hitTest\` factory (precomputed geometry) or an overlay render (\`{ fn, options: { overlay: true } }\`, live simulation) to the renderer for ('${i.geom}', '${r.type}').`}))}return d}function Te(e){const t=new Set,r=[];for(const s of e.layers){const o=s.identityKey;s.interactive!==!1&&(s.spatialKind!=="render-hit-test"||typeof o!="object"||t.has(s.geom)||s.data.hasVariable(o.variable)||(t.add(s.geom),r.push({kind:"user-input",severity:"warning",code:"RENDER_HIT_TEST_IDENTITY",message:`Geom '${s.geom}' keys its identity on '${o.variable}', a column its compile output does not emit; its hover lookup is empty.`,context:{requested:s.geom,kind:"geom-renderer"},suggestion:`Emit the '${o.variable}' column from the geom's \`compile()\`, or point \`identityKey\` at a column it does emit.`})))}return r}function Re(e,t){const{coordSystem:r,layers:s}=e,o=new Set,d=[];for(const i of s){if(i.interactive===!1||i.spatialKind!=="render-hit-test"||o.has(i.geom))continue;const u=t(i.geom,r.type);u===null||!u.hitTest||!c.isOverlayHosted(u)||(o.add(i.geom),d.push({kind:"user-input",severity:"warning",code:"CONFLICTING_RENDER_HIT_TEST",message:`Geom '${i.geom}' declares both a \`hitTest\` factory and an overlay render; these are alternatives, so only the overlay is used.`,context:{requested:i.geom,kind:"geom-renderer"},suggestion:"Keep one: a `hitTest` factory for precomputed geometry, OR an overlay render (`{ fn, options: { overlay: true } }`) for a live simulation."}))}return d}function qe(e,t){const r=new Set,s=[];for(const o of e.layers)o.interactive!==!1&&(o.spatialKind!=="render-hit-test"||r.has(o.geom)||t.hasCapability(o.geom)||(r.add(o.geom),s.push({kind:"user-input",severity:"warning",code:"MISSING_ANCHOR_CAPABILITY",message:`Geom '${o.geom}' declares no \`resolveAnchorPosition\`; its observations cannot be annotated, so the editor overlay paints no creation trigger on them.`,context:{requested:o.geom,kind:"geom-renderer"},suggestion:"Implement `resolveAnchorPosition(observation, context)` on the geom, returning the normalised panel position an annotation on that observation belongs at."})));return s}function Ge(e,t){const{coordSystem:r,layers:s}=e,o=new Set,d=[];for(const i of s){if(i.interactive===!1||i.spatialKind==="render-hit-test"||o.has(i.geom))continue;const u=t(i.geom,r.type);u===null||!c.isOverlayHosted(u)||(o.add(i.geom),d.push({kind:"user-input",severity:"warning",code:"OVERLAY_REQUIRES_RENDER_HIT_TEST",message:`Geom '${i.geom}' declares an overlay render but its layer's spatialKind is '${i.spatialKind}', not 'render-hit-test'; the overlay's push-path hover resolves to nothing.`,context:{requested:i.geom,kind:"geom-renderer"},suggestion:"Have the geom's manifest yield spatialKind 'render-hit-test' so the scene layer carries the `byKey` index the overlay's `pushHover` resolves against."}))}return d}var ke=e=>(0,B.createStore)(t=>({scene:e,setScene:r=>t(s=>s.scene===r?s:{scene:r})})),Ne=({input:e,data:t,customPalettes:r,colorScheme:s,plugins:o,resolveRenderer:d,anchorResolver:i,onChange:u,onError:g,onWarnings:p})=>{const C=c.useLatestRef(u),k=c.useLatestRef(g),q=c.useLatestRef(p),[{session:f,compileBus:h}]=(0,l.useState)(()=>{const n=(0,m.createCompiler)({plugins:o});return{session:new m.GraphCompilationSession(n),compileBus:fe(n)}}),[y]=(0,l.useState)(()=>Ee(o??[])),S=(0,l.useRef)(null),[N]=(0,l.useState)(_e),T=(0,l.useRef)(null),b=(0,l.useCallback)(n=>y.errors.length===0?n:[...y.errors,...n??[]],[y]),j=(0,l.useCallback)(n=>{if(!n.ok)return n.errors;if(T.current)T.current.getState().setScene(n.scene);else{const v=ke(n.scene);v.subscribe(N.notify),T.current=v,N.notify()}return null},[N]),[I,D]=(0,l.useState)(()=>{const n=f.compile({input:e,data:t,customPalettes:r,colorScheme:s});return S.current=n,b(j(n))}),G=(0,l.useCallback)(n=>n.ok?[...n.warnings,...xe(n.scene,d),...Ce(n.scene,d),...Te(n.scene),...Re(n.scene,d),...Ge(n.scene,d),...qe(n.scene,i)]:n.warnings,[d,i]),E=(0,l.useCallback)(n=>{n.length!==0&&(c.logDiagnostics(n),k.current?.(n))},[k]),R=(0,l.useCallback)(n=>{n.length!==0&&(c.logDiagnostics(n),q.current?.(n))},[q]);(0,l.useEffect)(()=>{const n=S.current;n&&(E([...y.errors,...n.ok?[]:n.errors]),R([...y.warnings,...G(n)]),n.ok&&h.emit({kind:"init"}))},[h,E,R,y,G]),(0,l.useEffect)(()=>{const n=f.update({input:e,data:t,customPalettes:r,colorScheme:s});if(!n)return;n.sealedInput&&C.current?.(n.sealedInput);const v=j(n.result);D(b(v)),v&&E(v),R(G(n.result)),v||h.emit({kind:n.inputChanged?"input":"data"})},[e,t,r,s,f,h,j,E,R,b,G,C]);const _=(0,l.useCallback)(n=>{D(v=>v===null?v:b(null)),R(G(n))},[b,R,G]),w=(0,l.useCallback)(n=>{n.scene&&T.current?.getState().setScene(n.scene),n.result&&_(n.result),n.command&&h.emit({kind:"command",command:n.command}),n.input&&C.current?.(n.input),n.errors&&E([...n.errors])},[_,h,C,E]),x=(0,l.useCallback)(n=>{for(const v of n)w(v);return n.some(v=>!!v.scene)},[w]),M=(0,l.useCallback)((n,v)=>{x(f.applyCommand(n,v))},[f,x]),ee=(0,l.useCallback)(()=>{x(f.seal())},[f,x]),O=(0,l.useCallback)(()=>x(f.undo()),[f,x]),K=(0,l.useCallback)(()=>x(f.redo()),[f,x]),te=(0,l.useMemo)(()=>({stack:f.history,undo:O,redo:K}),[f,O,K]),re=(0,l.useCallback)(()=>T.current?.getState().scene??null,[]);return{store:T.current,dispatch:M,seal:ee,history:te,subscribe:N.subscribe,getScene:re,compileBus:h,compileErrors:I}},_e=()=>{const e=new Set;return{subscribe:t=>(e.add(t),()=>{e.delete(t)}),notify:()=>e.forEach(t=>t())}},Q=({data:e,input:t,plugins:r=[],formattingLocale:s,handleRef:o,onChange:d,onError:i,onWarnings:u,customPalettes:g,colorScheme:p="light",children:C})=>{const[k]=(0,l.useState)(()=>c.createGeomRendererResolver(r.filter(z))),q=(0,l.useId)(),[f]=(0,l.useState)(()=>(0,m.createAnchorResolver)(r)),[h]=(0,l.useState)(()=>he()),y=(0,l.useMemo)(()=>(0,m.createStyleResolver)({colorScheme:p}),[p]),{store:S,dispatch:N,seal:T,history:b,subscribe:j,getScene:I,compileBus:D,compileErrors:G}=Ne({input:t,data:e,customPalettes:g,colorScheme:p,plugins:r,resolveRenderer:k,anchorResolver:f,onChange:d,onError:i,onWarnings:u});(0,l.useEffect)(()=>{if(S)return S.subscribe((_,w)=>{if(_.scene.spec===w.scene.spec)return;const{selection:x,setSelection:M}=h.getState();x.length!==0&&M(X(x,_.scene.spec))})},[S,h]);const E=(0,l.useMemo)(()=>({dispatch:N,seal:T}),[N,T]);(0,l.useImperativeHandle)(o,()=>({commands:E,undo:b.undo,redo:b.redo,subscribe:j,getScene:I,getSelection:()=>h.getState().selection,setSelection:_=>h.getState().setSelection(_),subscribeSelection:h.subscribe}),[E,b,j,I,h]);const R=(0,l.useMemo)(()=>S?{chartId:q,store:S,selectionStore:h,commands:E,history:b,formattingLocale:s,compileBus:D,colorScheme:p,styleResolver:y,anchorResolver:f}:null,[q,S,h,E,b,s,D,p,y,f]);return(0,a.jsx)(W,{forcedErrors:G,onError:i,resetKeys:[t,e],children:R?(0,a.jsx)(c.GraphContext.Provider,{value:R,children:(0,a.jsx)(c.GeomRendererResolverProvider,{value:k,children:C})}):null})};function je(e){const t=(0,m.createGraphyBuilder)(e);return{...t,GraphProvider:s=>(0,a.jsx)(Q,{...s,plugins:t.plugins})}}var De=({children:e,...t})=>(0,a.jsx)("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",width:"100%",height:"100%",pointerEvents:"none",...t,children:e}),Ie=({box:e,children:t})=>(0,a.jsx)("svg",{x:(0,m.toPercent)(e.x0),y:(0,m.toPercent)(e.y0),width:(0,m.toPercent)(e.x1-e.x0),height:(0,m.toPercent)(e.y1-e.y0),overflow:"hidden",pointerEvents:"none",children:t}),we="drqe3u0",He="drqe3u1",Me="drqe3u2",Pe="drqe3u3",H="drqe3u4",$e="drqe3u5",Le="drqe3u6",Be="drqe3u7",P="drqe3u8",Oe="drqe3u9",Ke="drqe3ua";var Ae="drqe3uc",Ue="drqe3ud",Ye="drqe3ue",Fe="drqe3uf";var Ve="drqe3uh",We="drqe3ui",F={enabled:"drqe3uk drqe3uj",disabled:"drqe3ul drqe3uj"},V={ran:"drqe3un drqe3um",dim:"drqe3uo drqe3um"},J={ran:"drqe3uq drqe3up",cached:"drqe3ur drqe3up",untouched:"drqe3us drqe3up"},ze=({width:e=380,style:t,className:r}={})=>{const{compileBus:s}=c.useGraphContext(),[o]=(0,l.useState)(()=>ve()),[d,i]=(0,l.useState)(!1),[u,g]=(0,l.useState)(m.isCompilerCachingEnabled);(0,l.useEffect)(()=>{const{recordCompile:h}=o.getState(),y=s.getLastTrigger(),S=s.getLastCompile();return y&&S&&h(y,S),s.subscribe(h)},[o,s]);const p=(0,A.useStore)(o,h=>h.lastCompile),C=(0,A.useStore)(o,h=>h.history),k=s.getCacheStats(),q=p===null&&C.length===0,f=()=>{g(h=>{const y=!h;return(0,m.setCompilerCachingEnabled)(y),y})};return(0,a.jsxs)("div",{className:(0,$.default)(Ke,r),style:{width:e,...t},children:[(0,a.jsxs)("div",{className:we,children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{className:He,children:"compile cache"}),(0,a.jsx)("div",{className:Ye,children:q?"production: stats disabled":p?`last: ${p.label} · ${Z(p.durationMs)}`:"awaiting first compile…"})]}),(0,a.jsx)("button",{type:"button",onClick:()=>i(h=>!h),className:Fe,children:d?"▾":"▴"})]}),!d&&(0,a.jsxs)("div",{className:"drqe3ub",children:[(0,a.jsxs)("button",{type:"button",onClick:f,className:u?F.enabled:F.disabled,"aria-pressed":u,children:["cache ",u?"enabled":"disabled"]}),(0,a.jsx)("span",{className:"drqe3ug",children:"next compile reflects this toggle"})]}),!d&&!q&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(Xe,{delta:p?.stages,cumulative:k}),(0,a.jsx)(Qe,{entries:C})]})]})},Xe=({delta:e,cumulative:t})=>(0,a.jsxs)("table",{className:Me,children:[(0,a.jsx)("thead",{children:(0,a.jsxs)("tr",{className:Ve,children:[(0,a.jsx)("th",{className:Pe,children:"stage"}),(0,a.jsx)("th",{className:H,children:"Δ miss"}),(0,a.jsx)("th",{className:H,children:"Δ hit"}),(0,a.jsx)("th",{className:H,children:"total miss"}),(0,a.jsx)("th",{className:H,children:"total hit"})]})}),(0,a.jsx)("tbody",{children:m.COMPILER_STAGE_KEYS.map(r=>{const s=e?.[r],o=Je(s);return(0,a.jsxs)("tr",{className:Ae,children:[(0,a.jsxs)("td",{className:$e,children:[(0,a.jsx)("span",{className:J[o],"aria-hidden":!0})," ",r]}),(0,a.jsx)("td",{className:o==="ran"?V.ran:V.dim,children:s?.misses??0}),(0,a.jsx)("td",{className:P,children:s?.hits??0}),(0,a.jsx)("td",{className:P,children:t[r].misses}),(0,a.jsx)("td",{className:P,children:t[r].hits})]},r)})})]}),Qe=({entries:e})=>e.length===0?null:(0,a.jsxs)("div",{className:Ue,children:[(0,a.jsx)("div",{className:We,children:"recent compiles"}),e.map(t=>{const r=Ze(t.stages,d=>d.misses>0),s=m.COMPILER_STAGE_KEYS.length,o=r===0?"cached":"ran";return(0,a.jsxs)("div",{className:Le,children:[(0,a.jsx)("span",{className:J[o],"aria-hidden":!0}),(0,a.jsx)("span",{className:Be,title:t.label,children:t.label}),(0,a.jsxs)("span",{className:Oe,children:[r,"/",s," ran · ",Z(t.durationMs)]})]},t.id)})]}),Je=e=>!e||e.hits===0&&e.misses===0?"untouched":e.misses>0?"ran":"cached",Ze=(e,t)=>{let r=0;for(const s of m.COMPILER_STAGE_KEYS)t(e[s])&&(r+=1);return r},Z=e=>e>=10?`${e.toFixed(0)}ms`:`${e.toFixed(2)}ms`,et=()=>{const{history:e}=c.useGraphContext(),{stack:t,undo:r,redo:s}=e,o=(0,l.useCallback)(u=>t.subscribe(u),[t]),d=(0,l.useCallback)(()=>t.getSnapshot(),[t]),i=(0,l.useSyncExternalStore)(o,d,d);return(0,l.useMemo)(()=>({...i,undo:r,redo:s}),[i,r,s])},tt=new Set(["button","checkbox","color","file","hidden","image","radio","range","reset","submit"]),rt=(e,t={})=>{const{target:r,enabled:s=!0}=t;(0,l.useEffect)(()=>{const o=st(r);if(!s||!o)return;const d=i=>{if(!nt(i)||i.defaultPrevented||ot(i.target))return;const u=c.resolveHistoryStep(i);if(!u)return;const g=e.current;g&&(u==="undo"?g.undo():g.redo())&&i.preventDefault()};return o.addEventListener("keydown",d),()=>o.removeEventListener("keydown",d)},[e,r,s])},st=e=>e===void 0?window:e!==null&&"current"in e?e.current:e,nt=e=>"key"in e,ot=e=>e instanceof HTMLInputElement?!tt.has(e.type):e instanceof HTMLElement?e.isContentEditable||e.tagName==="TEXTAREA":!1;exports.BrandMark=c.BrandMark;exports.CanvasTextMeasurer=c.CanvasTextMeasurer;exports.DefaultFooter=c.DefaultFooter;exports.DefaultGrid=c.DefaultGrid;exports.DefaultHeader=c.DefaultHeader;exports.DefaultSwatch=c.DefaultSwatch;exports.DefaultTooltip=c.DefaultTooltip;exports.DevToolsPanel=ze;exports.GRAPH_MODES=c.GRAPH_MODES;exports.GraphErrorBoundary=W;exports.GraphErrorPanel=L;exports.GraphProvider=Q;exports.GraphRenderer=c.GraphRenderer;exports.HoverProvider=c.HoverProvider;exports.TextMeasurerProvider=c.TextMeasurerProvider;exports.ThemeProvider=c.ThemeProvider;exports.UnitBoxSvg=Ie;exports.UnitSpaceSvg=De;exports.createGraphyKit=je;exports.darkTheme=c.darkTheme;exports.defineGeomRenderer=c.defineGeomRenderer;exports.lightTheme=c.lightTheme;exports.lightenCss=c.lightenCss;exports.pruneSelection=X;exports.resolveBrandMarkVisual=c.resolveBrandMarkVisual;exports.useElementScreenRect=c.useElementScreenRect;exports.useGeomHitTest=c.useGeomHitTest;exports.useGeomHover=c.useGeomHover;exports.useGraphCommands=c.useGraphCommands;exports.useGraphHandle=c.useGraphHandle;exports.useGraphHistory=et;exports.useGraphHistoryShortcuts=rt;exports.useGraphSelection=c.useGraphSelection;exports.useHandleScene=c.useHandleScene;exports.useHoverState=c.useHoverState;exports.useSceneSelector=c.useSceneSelector;exports.useStyleReaders=c.useStyleReaders;exports.useStyleResolver=c.useStyleResolver;exports.useTextMeasurer=c.useTextMeasurer;exports.vars=se.vars;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const c=require("./history-chords-kAwHzxZz.cjs"),se=require("./theme.contract.css-Dd-73-Je.cjs");let m=require("@graphysdk/viz-engine"),l=require("react"),a=require("react/jsx-runtime"),A=require("zustand"),B=require("zustand/vanilla"),$=require("clsx");$=c.__toESM($,1);var ne="_1a5iqpb0",oe="_1a5iqpb1";var ae="_1a5iqpb3",ie="_1a5iqpb4",ce="_1a5iqpb5";var L=({errors:e})=>{const[t,...r]=e;return(0,a.jsxs)("div",{role:"alert",className:ne,children:[(0,a.jsx)("strong",{className:oe,children:"This chart could not be rendered."}),t&&(0,a.jsx)(U,{diagnostic:t}),r.length>0&&(0,a.jsx)("ul",{className:"_1a5iqpb2",children:r.map((s,o)=>(0,a.jsx)("li",{children:(0,a.jsx)(U,{diagnostic:s})},`${s.code}-${o}`))})]})},U=({diagnostic:e})=>(0,a.jsxs)("div",{className:ae,children:[(0,a.jsx)("span",{className:ie,children:e.code}),(0,a.jsx)("p",{className:ce,children:e.message}),e.suggestion&&(0,a.jsx)("p",{className:"_1a5iqpb6",children:e.suggestion})]});function le(e=[],t=[]){return e.length===t.length&&e.every((r,s)=>Object.is(r,t[s]))}var W=class extends l.Component{constructor(...e){super(...e),this.state={caughtDiagnostic:null}}static getDerivedStateFromError(e){return{caughtDiagnostic:(0,m.buildDiagnostic)(e)}}componentDidCatch(e,t){const r=(0,m.buildDiagnostic)(e);c.logDiagnostics([r]),this.props.onError?.([r]),console.error("Chart render component stack:",t.componentStack)}componentDidUpdate(e){this.state.caughtDiagnostic&&!le(e.resetKeys,this.props.resetKeys)&&this.setState({caughtDiagnostic:null})}render(){const{caughtDiagnostic:e}=this.state;if(e)return(0,a.jsx)(L,{errors:[e]});const{forcedErrors:t,children:r}=this.props;return t&&t.length>0?(0,a.jsx)(L,{errors:t}):r}},z=e=>typeof e=="object"&&"geom"in e&&"render"in e,de=e=>{const t=(0,m.resolveDefinition)(e);return t instanceof m.Geom?t:null},X=(e,t)=>{const r=e.filter(s=>ue(s,t));return r.length===e.length?e:r},ue=(e,t)=>e.kind==="annotation"?(0,m.findAnnotation)(t.annotations,e.id)!==null:e.kind==="observations"||e.kind==="layer"&&e.layerId!==void 0?(0,m.findLayerById)(t.layers,e.layerId)!==void 0:!0,Y=[],he=()=>(0,B.createStore)(e=>({selection:Y,setSelection:t=>e(r=>ge(r.selection,t)?r:{selection:t}),clearSelection:()=>e(t=>t.selection.length===0?t:{selection:Y})})),ge=(e,t)=>e===t?!0:e.length!==t.length?!1:e.every((r,s)=>{const o=t[s];return o!==void 0&&(0,m.areEditTargetsEqual)(r,o)}),me=process.env.NODE_ENV!=="production",pe=5,fe=e=>{if(!me)return{emit:()=>{},subscribe:()=>ye,getLastTrigger:()=>null,getLastCompile:()=>null,getCacheStats:()=>e.getCacheStats()};const t=new Set;let r=null;return{emit:s=>{const o=e.getLastCompile();if(o){r=s;for(const d of t)d(s,o)}},subscribe:s=>(t.add(s),()=>{t.delete(s)}),getLastTrigger:()=>r,getLastCompile:()=>e.getLastCompile(),getCacheStats:()=>e.getCacheStats()}},ve=()=>(0,B.createStore)(e=>({lastCompile:null,history:[],nextId:1,lastSnapshot:null,recordCompile:(t,r)=>e(s=>{if(s.lastSnapshot===r)return s;const o={id:s.nextId,label:Se(t),stages:r.stages,durationMs:r.durationMs};return{lastCompile:o,history:be(s.history,o,pe),nextId:s.nextId+1,lastSnapshot:r}})})),ye=()=>{},Se=e=>{switch(e.kind){case"init":return"init";case"input":return"input change";case"data":return"data change";case"command":return e.command.metadata.description}},be=(e,t,r)=>{const s=e.length>=r?e.length-(r-1):0;return[...e.slice(s),t]};function Ee(e){const t=e.filter(z),r=new Set([...Object.keys(c.BUILT_IN_GEOM_RENDERERS),...t.map(u=>u.geom)]),s=[],o=new Set;for(const u of e){const g=de(u);g===null||r.has(g.type)||o.has(g.type)||(o.add(g.type),s.push({kind:"user-input",severity:"error",code:"MISSING_GEOM_RENDERER",message:`Custom geom '${g.type}' is registered but has no renderer.`,context:{requested:g.type,kind:"geom-renderer"},suggestion:`Add a render half for it: \`defineGeomRenderer(${g.type}Geom, { coord, render })\`, then include it in \`plugins\`.`}))}const d=new Map;for(const u of t){if("definition"in u)continue;const g=`${u.geom}|${u.coord}`,p=d.get(g);p?p.count+=1:d.set(g,{geom:u.geom,coord:u.coord,count:1})}const i=[];for(const{geom:u,coord:g,count:p}of d.values())p<2||i.push({kind:"user-input",severity:"warning",code:"DUPLICATE_REGISTERED_TYPE",message:`Multiple render-only overrides register ('${u}', '${g}') (${p} entries); the last in the array wins.`,context:{requested:`${u}@${g}`,kind:"geom-renderer"},suggestion:`Keep a single render-only override for ('${u}', '${g}').`});return{errors:s,warnings:i}}function xe(e,t){const{coordSystem:r,layers:s}=e,o=new Set,d=[];for(const i of s)t(i.geom,r.type)!==null||o.has(i.geom)||(o.add(i.geom),d.push({kind:"user-input",severity:"warning",code:"MISSING_GEOM_RENDERER",message:`No renderer for geom '${i.geom}' under ${r.type} coords; the layer is not painted.`,context:{requested:i.geom,kind:"geom-renderer"},suggestion:`Register a renderer for ('${i.geom}', '${r.type}') via \`defineGeomRenderer\`.`}));return d}function Te(e,t){const{coordSystem:r,layers:s}=e,o=new Set,d=[];for(const i of s){if(i.interactive===!1||i.spatialKind!=="render-hit-test"||o.has(i.geom))continue;const u=t(i.geom,r.type);u===null||u.hitTest||c.isOverlayHosted(u)||(o.add(i.geom),d.push({kind:"user-input",severity:"warning",code:"MISSING_RENDER_HIT_TEST",message:`Geom '${i.geom}' declares spatialKind 'render-hit-test' but its renderer provides no hit-test; the layer has no hover.`,context:{requested:i.geom,kind:"geom-renderer"},suggestion:`Add a \`hitTest\` factory (precomputed geometry) or an overlay render (\`{ fn, options: { overlay: true } }\`, live simulation) to the renderer for ('${i.geom}', '${r.type}').`}))}return d}function Ce(e){const t=new Set,r=[];for(const s of e.layers){const o=s.identityKey;s.interactive!==!1&&(s.spatialKind!=="render-hit-test"||typeof o!="object"||t.has(s.geom)||s.data.hasVariable(o.variable)||(t.add(s.geom),r.push({kind:"user-input",severity:"warning",code:"RENDER_HIT_TEST_IDENTITY",message:`Geom '${s.geom}' keys its identity on '${o.variable}', a column its compile output does not emit; its hover lookup is empty.`,context:{requested:s.geom,kind:"geom-renderer"},suggestion:`Emit the '${o.variable}' column from the geom's \`compile()\`, or point \`identityKey\` at a column it does emit.`})))}return r}function Re(e,t){const{coordSystem:r,layers:s}=e,o=new Set,d=[];for(const i of s){if(i.interactive===!1||i.spatialKind!=="render-hit-test"||o.has(i.geom))continue;const u=t(i.geom,r.type);u===null||!u.hitTest||!c.isOverlayHosted(u)||(o.add(i.geom),d.push({kind:"user-input",severity:"warning",code:"CONFLICTING_RENDER_HIT_TEST",message:`Geom '${i.geom}' declares both a \`hitTest\` factory and an overlay render; these are alternatives, so only the overlay is used.`,context:{requested:i.geom,kind:"geom-renderer"},suggestion:"Keep one: a `hitTest` factory for precomputed geometry, OR an overlay render (`{ fn, options: { overlay: true } }`) for a live simulation."}))}return d}function qe(e,t){const r=new Set,s=[];for(const o of e.layers)o.interactive!==!1&&(o.spatialKind!=="render-hit-test"||r.has(o.geom)||t.hasCapability(o.geom)||(r.add(o.geom),s.push({kind:"user-input",severity:"warning",code:"MISSING_ANCHOR_CAPABILITY",message:`Geom '${o.geom}' declares no \`resolveAnchorPosition\`; its observations cannot be annotated, so the editor overlay paints no creation trigger on them.`,context:{requested:o.geom,kind:"geom-renderer"},suggestion:"Implement `resolveAnchorPosition(observation, context)` on the geom, returning the normalised panel position an annotation on that observation belongs at."})));return s}function Ge(e,t){const{coordSystem:r,layers:s}=e,o=new Set,d=[];for(const i of s){if(i.interactive===!1||i.spatialKind==="render-hit-test"||o.has(i.geom))continue;const u=t(i.geom,r.type);u===null||!c.isOverlayHosted(u)||(o.add(i.geom),d.push({kind:"user-input",severity:"warning",code:"OVERLAY_REQUIRES_RENDER_HIT_TEST",message:`Geom '${i.geom}' declares an overlay render but its layer's spatialKind is '${i.spatialKind}', not 'render-hit-test'; the overlay's push-path hover resolves to nothing.`,context:{requested:i.geom,kind:"geom-renderer"},suggestion:"Have the geom's manifest yield spatialKind 'render-hit-test' so the scene layer carries the `byKey` index the overlay's `pushHover` resolves against."}))}return d}var ke=e=>(0,B.createStore)(t=>({scene:e,setScene:r=>t(s=>s.scene===r?s:{scene:r})})),Ne=({input:e,data:t,customPalettes:r,colorScheme:s,plugins:o,resolveRenderer:d,anchorResolver:i,onChange:u,onError:g,onWarnings:p})=>{const T=c.useLatestRef(u),k=c.useLatestRef(g),q=c.useLatestRef(p),[{session:f,compileBus:h}]=(0,l.useState)(()=>{const n=(0,m.createCompiler)({plugins:o});return{session:new m.GraphCompilationSession(n),compileBus:fe(n)}}),[y]=(0,l.useState)(()=>Ee(o??[])),S=(0,l.useRef)(null),[N]=(0,l.useState)(_e),C=(0,l.useRef)(null),b=(0,l.useCallback)(n=>y.errors.length===0?n:[...y.errors,...n??[]],[y]),j=(0,l.useCallback)(n=>{if(!n.ok)return n.errors;if(C.current)C.current.getState().setScene(n.scene);else{const v=ke(n.scene);v.subscribe(N.notify),C.current=v,N.notify()}return null},[N]),[I,D]=(0,l.useState)(()=>{const n=f.compile({input:e,data:t,customPalettes:r,colorScheme:s});return S.current=n,b(j(n))}),G=(0,l.useCallback)(n=>n.ok?[...n.warnings,...xe(n.scene,d),...Te(n.scene,d),...Ce(n.scene),...Re(n.scene,d),...Ge(n.scene,d),...qe(n.scene,i)]:n.warnings,[d,i]),E=(0,l.useCallback)(n=>{n.length!==0&&(c.logDiagnostics(n),k.current?.(n))},[k]),R=(0,l.useCallback)(n=>{n.length!==0&&(c.logDiagnostics(n),q.current?.(n))},[q]);(0,l.useEffect)(()=>{const n=S.current;n&&(E([...y.errors,...n.ok?[]:n.errors]),R([...y.warnings,...G(n)]),n.ok&&h.emit({kind:"init"}))},[h,E,R,y,G]),(0,l.useEffect)(()=>{const n=f.update({input:e,data:t,customPalettes:r,colorScheme:s});if(!n)return;n.sealedInput&&T.current?.(n.sealedInput);const v=j(n.result);D(b(v)),v&&E(v),R(G(n.result)),v||h.emit({kind:n.inputChanged?"input":"data"})},[e,t,r,s,f,h,j,E,R,b,G,T]);const _=(0,l.useCallback)(n=>{D(v=>v===null?v:b(null)),R(G(n))},[b,R,G]),w=(0,l.useCallback)(n=>{n.scene&&C.current?.getState().setScene(n.scene),n.result&&_(n.result),n.command&&h.emit({kind:"command",command:n.command}),n.input&&T.current?.(n.input),n.errors&&E([...n.errors])},[_,h,T,E]),x=(0,l.useCallback)(n=>{for(const v of n)w(v);return n.some(v=>!!v.scene)},[w]),M=(0,l.useCallback)((n,v)=>{x(f.applyCommand(n,v))},[f,x]),ee=(0,l.useCallback)(()=>{x(f.seal())},[f,x]),O=(0,l.useCallback)(()=>x(f.undo()),[f,x]),K=(0,l.useCallback)(()=>x(f.redo()),[f,x]),te=(0,l.useMemo)(()=>({stack:f.history,undo:O,redo:K}),[f,O,K]),re=(0,l.useCallback)(()=>C.current?.getState().scene??null,[]);return{store:C.current,dispatch:M,seal:ee,history:te,subscribe:N.subscribe,getScene:re,compileBus:h,compileErrors:I}},_e=()=>{const e=new Set;return{subscribe:t=>(e.add(t),()=>{e.delete(t)}),notify:()=>e.forEach(t=>t())}},Q=({data:e,input:t,plugins:r=[],formattingLocale:s,handleRef:o,onChange:d,onError:i,onWarnings:u,customPalettes:g,colorScheme:p="light",children:T})=>{const[k]=(0,l.useState)(()=>c.createGeomRendererResolver(r.filter(z))),q=(0,l.useId)(),[f]=(0,l.useState)(()=>(0,m.createAnchorResolver)(r)),[h]=(0,l.useState)(()=>he()),y=(0,l.useMemo)(()=>(0,m.createStyleResolver)({colorScheme:p}),[p]),{store:S,dispatch:N,seal:C,history:b,subscribe:j,getScene:I,compileBus:D,compileErrors:G}=Ne({input:t,data:e,customPalettes:g,colorScheme:p,plugins:r,resolveRenderer:k,anchorResolver:f,onChange:d,onError:i,onWarnings:u});(0,l.useEffect)(()=>{if(S)return S.subscribe((_,w)=>{if(_.scene.spec===w.scene.spec)return;const{selection:x,setSelection:M}=h.getState();x.length!==0&&M(X(x,_.scene.spec))})},[S,h]);const E=(0,l.useMemo)(()=>({dispatch:N,seal:C}),[N,C]);(0,l.useImperativeHandle)(o,()=>({commands:E,undo:b.undo,redo:b.redo,subscribe:j,getScene:I,getSelection:()=>h.getState().selection,setSelection:_=>h.getState().setSelection(_),subscribeSelection:h.subscribe}),[E,b,j,I,h]);const R=(0,l.useMemo)(()=>S?{chartId:q,store:S,selectionStore:h,commands:E,history:b,formattingLocale:s,compileBus:D,colorScheme:p,styleResolver:y,anchorResolver:f}:null,[q,S,h,E,b,s,D,p,y,f]);return(0,a.jsx)(W,{forcedErrors:G,onError:i,resetKeys:[t,e],children:R?(0,a.jsx)(c.GraphContext.Provider,{value:R,children:(0,a.jsx)(c.GeomRendererResolverProvider,{value:k,children:T})}):null})};function je(e){const t=(0,m.createGraphyBuilder)(e);return{...t,GraphProvider:s=>(0,a.jsx)(Q,{...s,plugins:t.plugins})}}var De=({children:e,...t})=>(0,a.jsx)("svg",{viewBox:"0 0 1 1",preserveAspectRatio:"none",width:"100%",height:"100%",pointerEvents:"none",...t,children:e}),Ie=({box:e,children:t})=>(0,a.jsx)("svg",{x:(0,m.toPercent)(e.x0),y:(0,m.toPercent)(e.y0),width:(0,m.toPercent)(e.x1-e.x0),height:(0,m.toPercent)(e.y1-e.y0),overflow:"hidden",pointerEvents:"none",children:t}),we="drqe3u0",He="drqe3u1",Me="drqe3u2",Pe="drqe3u3",H="drqe3u4",$e="drqe3u5",Le="drqe3u6",Be="drqe3u7",P="drqe3u8",Oe="drqe3u9",Ke="drqe3ua";var Ae="drqe3uc",Ue="drqe3ud",Ye="drqe3ue",Fe="drqe3uf";var Ve="drqe3uh",We="drqe3ui",F={enabled:"drqe3uk drqe3uj",disabled:"drqe3ul drqe3uj"},V={ran:"drqe3un drqe3um",dim:"drqe3uo drqe3um"},J={ran:"drqe3uq drqe3up",cached:"drqe3ur drqe3up",untouched:"drqe3us drqe3up"},ze=({width:e=380,style:t,className:r}={})=>{const{compileBus:s}=c.useGraphContext(),[o]=(0,l.useState)(()=>ve()),[d,i]=(0,l.useState)(!1),[u,g]=(0,l.useState)(m.isCompilerCachingEnabled);(0,l.useEffect)(()=>{const{recordCompile:h}=o.getState(),y=s.getLastTrigger(),S=s.getLastCompile();return y&&S&&h(y,S),s.subscribe(h)},[o,s]);const p=(0,A.useStore)(o,h=>h.lastCompile),T=(0,A.useStore)(o,h=>h.history),k=s.getCacheStats(),q=p===null&&T.length===0,f=()=>{g(h=>{const y=!h;return(0,m.setCompilerCachingEnabled)(y),y})};return(0,a.jsxs)("div",{className:(0,$.default)(Ke,r),style:{width:e,...t},children:[(0,a.jsxs)("div",{className:we,children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{className:He,children:"compile cache"}),(0,a.jsx)("div",{className:Ye,children:q?"production: stats disabled":p?`last: ${p.label} · ${Z(p.durationMs)}`:"awaiting first compile…"})]}),(0,a.jsx)("button",{type:"button",onClick:()=>i(h=>!h),className:Fe,children:d?"▾":"▴"})]}),!d&&(0,a.jsxs)("div",{className:"drqe3ub",children:[(0,a.jsxs)("button",{type:"button",onClick:f,className:u?F.enabled:F.disabled,"aria-pressed":u,children:["cache ",u?"enabled":"disabled"]}),(0,a.jsx)("span",{className:"drqe3ug",children:"next compile reflects this toggle"})]}),!d&&!q&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(Xe,{delta:p?.stages,cumulative:k}),(0,a.jsx)(Qe,{entries:T})]})]})},Xe=({delta:e,cumulative:t})=>(0,a.jsxs)("table",{className:Me,children:[(0,a.jsx)("thead",{children:(0,a.jsxs)("tr",{className:Ve,children:[(0,a.jsx)("th",{className:Pe,children:"stage"}),(0,a.jsx)("th",{className:H,children:"Δ miss"}),(0,a.jsx)("th",{className:H,children:"Δ hit"}),(0,a.jsx)("th",{className:H,children:"total miss"}),(0,a.jsx)("th",{className:H,children:"total hit"})]})}),(0,a.jsx)("tbody",{children:m.COMPILER_STAGE_KEYS.map(r=>{const s=e?.[r],o=Je(s);return(0,a.jsxs)("tr",{className:Ae,children:[(0,a.jsxs)("td",{className:$e,children:[(0,a.jsx)("span",{className:J[o],"aria-hidden":!0})," ",r]}),(0,a.jsx)("td",{className:o==="ran"?V.ran:V.dim,children:s?.misses??0}),(0,a.jsx)("td",{className:P,children:s?.hits??0}),(0,a.jsx)("td",{className:P,children:t[r].misses}),(0,a.jsx)("td",{className:P,children:t[r].hits})]},r)})})]}),Qe=({entries:e})=>e.length===0?null:(0,a.jsxs)("div",{className:Ue,children:[(0,a.jsx)("div",{className:We,children:"recent compiles"}),e.map(t=>{const r=Ze(t.stages,d=>d.misses>0),s=m.COMPILER_STAGE_KEYS.length,o=r===0?"cached":"ran";return(0,a.jsxs)("div",{className:Le,children:[(0,a.jsx)("span",{className:J[o],"aria-hidden":!0}),(0,a.jsx)("span",{className:Be,title:t.label,children:t.label}),(0,a.jsxs)("span",{className:Oe,children:[r,"/",s," ran · ",Z(t.durationMs)]})]},t.id)})]}),Je=e=>!e||e.hits===0&&e.misses===0?"untouched":e.misses>0?"ran":"cached",Ze=(e,t)=>{let r=0;for(const s of m.COMPILER_STAGE_KEYS)t(e[s])&&(r+=1);return r},Z=e=>e>=10?`${e.toFixed(0)}ms`:`${e.toFixed(2)}ms`,et=()=>{const{history:e}=c.useGraphContext(),{stack:t,undo:r,redo:s}=e,o=(0,l.useCallback)(u=>t.subscribe(u),[t]),d=(0,l.useCallback)(()=>t.getSnapshot(),[t]),i=(0,l.useSyncExternalStore)(o,d,d);return(0,l.useMemo)(()=>({...i,undo:r,redo:s}),[i,r,s])},tt=new Set(["button","checkbox","color","file","hidden","image","radio","range","reset","submit"]),rt=(e,t={})=>{const{target:r,enabled:s=!0}=t;(0,l.useEffect)(()=>{const o=st(r);if(!s||!o)return;const d=i=>{if(!nt(i)||i.defaultPrevented||ot(i.target))return;const u=c.resolveHistoryStep(i);if(!u)return;const g=e.current;g&&(u==="undo"?g.undo():g.redo())&&i.preventDefault()};return o.addEventListener("keydown",d),()=>o.removeEventListener("keydown",d)},[e,r,s])},st=e=>e===void 0?window:e!==null&&"current"in e?e.current:e,nt=e=>"key"in e,ot=e=>e instanceof HTMLInputElement?!tt.has(e.type):e instanceof HTMLElement?e.isContentEditable||e.tagName==="TEXTAREA":!1;exports.BrandMark=c.BrandMark;exports.CanvasTextMeasurer=c.CanvasTextMeasurer;exports.DefaultFooter=c.DefaultFooter;exports.DefaultGrid=c.DefaultGrid;exports.DefaultHeader=c.DefaultHeader;exports.DefaultSwatch=c.DefaultSwatch;exports.DefaultTooltip=c.DefaultTooltip;exports.DevToolsPanel=ze;exports.GRAPH_MODES=c.GRAPH_MODES;exports.GraphErrorBoundary=W;exports.GraphErrorPanel=L;exports.GraphProvider=Q;exports.GraphRenderer=c.GraphRenderer;exports.HoverProvider=c.HoverProvider;exports.TextMeasurerProvider=c.TextMeasurerProvider;exports.ThemeProvider=c.ThemeProvider;exports.UnitBoxSvg=Ie;exports.UnitSpaceSvg=De;exports.createGraphyKit=je;exports.darkTheme=c.darkTheme;exports.defineGeomRenderer=c.defineGeomRenderer;exports.lightTheme=c.lightTheme;exports.lightenCss=c.lightenCss;exports.pruneSelection=X;exports.resolveBrandMarkVisual=c.resolveBrandMarkVisual;exports.useElementScreenRect=c.useElementScreenRect;exports.useGeomHitTest=c.useGeomHitTest;exports.useGeomHover=c.useGeomHover;exports.useGraphCommands=c.useGraphCommands;exports.useGraphHandle=c.useGraphHandle;exports.useGraphHistory=et;exports.useGraphHistoryShortcuts=rt;exports.useGraphSelection=c.useGraphSelection;exports.useHandleScene=c.useHandleScene;exports.useHoverState=c.useHoverState;exports.useSceneSelector=c.useSceneSelector;exports.useStyleReaderTree=c.useStyleReaderTree;exports.useStyleReaders=c.useStyleReaders;exports.useStyleResolver=c.useStyleResolver;exports.useTextMeasurer=c.useTextMeasurer;exports.vars=se.vars;

package/dist/index.d.ts

@@ -55,6 +55,7 @@ import { Spec } from '@graphysdk/viz-engine';
 import { SpecInput } from '@graphysdk/viz-engine';
 import { StoreApi } from 'zustand';
 import { StyleReadersForLayer } from '@graphysdk/viz-engine';
+import { StyleReaderTree } from '@graphysdk/viz-engine';
 import { StyleResolver } from '@graphysdk/viz-engine';
 import { SVGProps } from 'react';
 import { TextContent } from '@graphysdk/viz-engine';
@@ -1286,6 +1287,12 @@ export declare const useSceneSelector: <Selected>(selector: (scene: Scene) => Se
  */
 export declare const useStyleReaders: <L extends SceneLayer>(layer: L) => StyleReadersForLayer<L>;
 
+/**
+ * Nested chart style tree from the provider resolver. Subscribes to `scene.chrome`, so a chrome
+ * recompile re-renders callers. {@link useStyleReaders} does not, which is why this is a separate hook.
+ */
+export declare const useStyleReaderTree: () => StyleReaderTree;
+
 /** The chart's stylesheet resolver. One instance per provider, rebuilt when the colour scheme flips. */
 export declare const useStyleResolver: () => StyleResolver;
 

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { A as Dt, At as $t, Bt as Ht, Ct as le, Dt as ue, Et as xt, Ht as ne, It as Mt, M as Pt, N as Lt, Ot as Bt, Rt as Ot, St as U, Ut as K, Vt as he, X as At, Z as Kt, _ as Ut, _t as jt, a as Ft, at as Yt, bt as ge, dt as Vt, ft as Wt, gt as Xt, i as zt, it as Qt, k as Zt, kt as Jt, lt as er, n as tr, nt as rr, r as nr, s as sr, t as me, xt as or, yt as O, zt as ir } from "./history-chords-B2TZO9S_.js";
-import { n as cr } from "./theme.contract.css-DaZ5UPN0.js";
-import { COMPILER_STAGE_KEYS as j, Geom as pe, GraphCompilationSession as fe, areEditTargetsEqual as ve, buildDiagnostic as W, createAnchorResolver as ye, createCompiler as Se, createGraphyBuilder as be, createStyleResolver as Ee, findAnnotation as Ne, findLayerById as X, isCompilerCachingEnabled as Re, resolveDefinition as Te, setCompilerCachingEnabled as Ce, toPercent as P } from "@graphysdk/viz-engine";
-import { Component as qe, useCallback as f, useEffect as H, useId as Ie, useImperativeHandle as ke, useMemo as $, useRef as z, useState as N, useSyncExternalStore as Ge } from "react";
+import { A as Dt, At as $t, Bt as Ht, Ct as le, Dt as ue, Et as xt, Ht as he, It as Mt, M as Pt, N as Lt, Ot as Bt, Rt as Ot, St as U, Ut as ne, Vt as At, Wt as K, X as Kt, Z as Ut, _ as jt, _t as Ft, a as Yt, at as Wt, bt as ge, dt as Vt, ft as Xt, gt as zt, i as Qt, it as Zt, k as Jt, kt as er, lt as tr, n as rr, nt as nr, r as sr, s as or, t as me, xt as ir, yt as O, zt as ar } from "./history-chords-DUMZMIc_.js";
+import { n as dr } from "./theme.contract.css-DaZ5UPN0.js";
+import { COMPILER_STAGE_KEYS as j, Geom as pe, GraphCompilationSession as fe, areEditTargetsEqual as ve, buildDiagnostic as V, createAnchorResolver as ye, createCompiler as Se, createGraphyBuilder as be, createStyleResolver as Ee, findAnnotation as Re, findLayerById as X, isCompilerCachingEnabled as Te, resolveDefinition as Ne, setCompilerCachingEnabled as Ce, toPercent as P } from "@graphysdk/viz-engine";
+import { Component as qe, useCallback as f, useEffect as H, useId as Ie, useImperativeHandle as ke, useMemo as $, useRef as z, useState as R, useSyncExternalStore as Ge } from "react";
 import { Fragment as _e, jsx as d, jsxs as v } from "react/jsx-runtime";
 import { useStore as Q } from "zustand";
 import { createStore as F } from "zustand/vanilla";
@@ -50,10 +50,10 @@ var Le = class extends qe {
     super(...e), this.state = { caughtDiagnostic: null };
   }
   static getDerivedStateFromError(e) {
-    return { caughtDiagnostic: W(e) };
+    return { caughtDiagnostic: V(e) };
   }
   componentDidCatch(e, t) {
-    const r = W(e);
+    const r = V(e);
     K([r]), this.props.onError?.([r]), console.error("Chart render component stack:", t.componentStack);
   }
   componentDidUpdate(e) {
@@ -66,12 +66,12 @@ var Le = class extends qe {
     return t && t.length > 0 ? /* @__PURE__ */ d(Z, { errors: t }) : r;
   }
 }, se = (e) => typeof e == "object" && "geom" in e && "render" in e, Be = (e) => {
-  const t = Te(e);
+  const t = Ne(e);
   return t instanceof pe ? t : null;
 }, Oe = (e, t) => {
   const r = e.filter((n) => Ae(n, t));
   return r.length === e.length ? e : r;
-}, Ae = (e, t) => e.kind === "annotation" ? Ne(t.annotations, e.id) !== null : e.kind === "observations" ? X(t.layers, e.layerId) !== void 0 : e.kind === "layer" && e.layerId !== void 0 ? X(t.layers, e.layerId) !== void 0 : !0, ee = [], Ke = () => F((e) => ({
+}, Ae = (e, t) => e.kind === "annotation" ? Re(t.annotations, e.id) !== null : e.kind === "observations" ? X(t.layers, e.layerId) !== void 0 : e.kind === "layer" && e.layerId !== void 0 ? X(t.layers, e.layerId) !== void 0 : !0, ee = [], Ke = () => F((e) => ({
   selection: ee,
   setSelection: (t) => e((r) => Ue(r.selection, t) ? r : { selection: t }),
   clearSelection: () => e((t) => t.selection.length === 0 ? t : { selection: ee })
@@ -82,7 +82,7 @@ var Le = class extends qe {
   if (!je) return {
     emit: () => {
     },
-    subscribe: () => We,
+    subscribe: () => Ve,
     getLastTrigger: () => null,
     getLastCompile: () => null,
     getCacheStats: () => e.getCacheStats()
@@ -104,7 +104,7 @@ var Le = class extends qe {
     getLastCompile: () => e.getLastCompile(),
     getCacheStats: () => e.getCacheStats()
   };
-}, Ve = () => F((e) => ({
+}, We = () => F((e) => ({
   lastCompile: null,
   history: [],
   nextId: 1,
@@ -124,7 +124,7 @@ var Le = class extends qe {
       lastSnapshot: r
     };
   })
-})), We = () => {
+})), Ve = () => {
 }, Xe = (e) => {
   switch (e.kind) {
     case "init":
@@ -295,21 +295,21 @@ var st = (e) => F((t) => ({
   scene: e,
   setScene: (r) => t((n) => n.scene === r ? n : { scene: r })
 })), ot = ({ input: e, data: t, customPalettes: r, colorScheme: n, plugins: o, resolveRenderer: a, anchorResolver: i, onChange: c, onError: u, onWarnings: h }) => {
-  const R = O(c), k = O(u), q = O(h), [{ session: g, compileBus: l }] = N(() => {
+  const T = O(c), k = O(u), q = O(h), [{ session: g, compileBus: l }] = R(() => {
     const s = Se({ plugins: o });
     return {
       session: new fe(s),
       compileBus: Ye(s)
     };
-  }), [p] = N(() => Qe(o ?? [])), y = z(null), [G] = N(it), T = z(null), S = f((s) => p.errors.length === 0 ? s : [...p.errors, ...s ?? []], [p]), w = f((s) => {
+  }), [p] = R(() => Qe(o ?? [])), y = z(null), [G] = R(it), N = z(null), S = f((s) => p.errors.length === 0 ? s : [...p.errors, ...s ?? []], [p]), w = f((s) => {
     if (!s.ok) return s.errors;
-    if (T.current) T.current.getState().setScene(s.scene);
+    if (N.current) N.current.getState().setScene(s.scene);
     else {
       const m = st(s.scene);
-      m.subscribe(G.notify), T.current = m, G.notify();
+      m.subscribe(G.notify), N.current = m, G.notify();
     }
     return null;
-  }, [G]), [x, D] = N(() => {
+  }, [G]), [x, D] = R(() => {
     const s = g.compile({
       input: e,
       data: t,
@@ -347,7 +347,7 @@ var st = (e) => F((t) => ({
       colorScheme: n
     });
     if (!s) return;
-    s.sealedInput && R.current?.(s.sealedInput);
+    s.sealedInput && T.current?.(s.sealedInput);
     const m = w(s.result);
     D(S(m)), m && b(m), C(I(s.result)), m || l.emit({ kind: s.inputChanged ? "input" : "data" });
   }, [
@@ -362,7 +362,7 @@ var st = (e) => F((t) => ({
     C,
     S,
     I,
-    R
+    T
   ]);
   const _ = f((s) => {
     D((m) => m === null ? m : S(null)), C(I(s));
@@ -371,14 +371,14 @@ var st = (e) => F((t) => ({
     C,
     I
   ]), M = f((s) => {
-    s.scene && T.current?.getState().setScene(s.scene), s.result && _(s.result), s.command && l.emit({
+    s.scene && N.current?.getState().setScene(s.scene), s.result && _(s.result), s.command && l.emit({
       kind: "command",
       command: s.command
-    }), s.input && R.current?.(s.input), s.errors && b([...s.errors]);
+    }), s.input && T.current?.(s.input), s.errors && b([...s.errors]);
   }, [
     _,
     l,
-    R,
+    T,
     b
   ]), E = f((s) => {
     for (const m of s) M(m);
@@ -387,17 +387,17 @@ var st = (e) => F((t) => ({
     E(g.applyCommand(s, m));
   }, [g, E]), ae = f(() => {
     E(g.seal());
-  }, [g, E]), Y = f(() => E(g.undo()), [g, E]), V = f(() => E(g.redo()), [g, E]), ce = $(() => ({
+  }, [g, E]), Y = f(() => E(g.undo()), [g, E]), W = f(() => E(g.redo()), [g, E]), ce = $(() => ({
     stack: g.history,
     undo: Y,
-    redo: V
+    redo: W
   }), [
     g,
     Y,
-    V
-  ]), de = f(() => T.current?.getState().scene ?? null, []);
+    W
+  ]), de = f(() => N.current?.getState().scene ?? null, []);
   return {
-    store: T.current,
+    store: N.current,
     dispatch: B,
     seal: ae,
     history: ce,
@@ -414,8 +414,8 @@ var st = (e) => F((t) => ({
     }),
     notify: () => e.forEach((t) => t())
   };
-}, at = ({ data: e, input: t, plugins: r = [], formattingLocale: n, handleRef: o, onChange: a, onError: i, onWarnings: c, customPalettes: u, colorScheme: h = "light", children: R }) => {
-  const [k] = N(() => ge(r.filter(se))), q = Ie(), [g] = N(() => ye(r)), [l] = N(() => Ke()), p = $(() => Ee({ colorScheme: h }), [h]), { store: y, dispatch: G, seal: T, history: S, subscribe: w, getScene: x, compileBus: D, compileErrors: I } = ot({
+}, at = ({ data: e, input: t, plugins: r = [], formattingLocale: n, handleRef: o, onChange: a, onError: i, onWarnings: c, customPalettes: u, colorScheme: h = "light", children: T }) => {
+  const [k] = R(() => ge(r.filter(se))), q = Ie(), [g] = R(() => ye(r)), [l] = R(() => Ke()), p = $(() => Ee({ colorScheme: h }), [h]), { store: y, dispatch: G, seal: N, history: S, subscribe: w, getScene: x, compileBus: D, compileErrors: I } = ot({
     input: t,
     data: e,
     customPalettes: u,
@@ -437,8 +437,8 @@ var st = (e) => F((t) => ({
   }, [y, l]);
   const b = $(() => ({
     dispatch: G,
-    seal: T
-  }), [G, T]);
+    seal: N
+  }), [G, N]);
   ke(o, () => ({
     commands: b,
     undo: S.undo,
@@ -486,12 +486,12 @@ var st = (e) => F((t) => ({
       value: C,
       children: /* @__PURE__ */ d(ue, {
         value: k,
-        children: R
+        children: T
       })
     }) : null
   });
 };
-function pr(e) {
+function fr(e) {
   const t = be(e);
   return {
     ...t,
@@ -501,7 +501,7 @@ function pr(e) {
     })
   };
 }
-var fr = ({ children: e, ...t }) => /* @__PURE__ */ d("svg", {
+var vr = ({ children: e, ...t }) => /* @__PURE__ */ d("svg", {
   viewBox: "0 0 1 1",
   preserveAspectRatio: "none",
   width: "100%",
@@ -509,7 +509,7 @@ var fr = ({ children: e, ...t }) => /* @__PURE__ */ d("svg", {
   pointerEvents: "none",
   ...t,
   children: e
-}), vr = ({ box: e, children: t }) => /* @__PURE__ */ d("svg", {
+}), yr = ({ box: e, children: t }) => /* @__PURE__ */ d("svg", {
   x: P(e.x0),
   y: P(e.y0),
   width: P(e.x1 - e.x0),
@@ -519,7 +519,7 @@ var fr = ({ children: e, ...t }) => /* @__PURE__ */ d("svg", {
   children: t
 }), ct = "drqe3u0", dt = "drqe3u1", lt = "drqe3u2", ut = "drqe3u3", L = "drqe3u4", ht = "drqe3u5", gt = "drqe3u6", mt = "drqe3u7", A = "drqe3u8", pt = "drqe3u9", ft = "drqe3ua";
 var vt = "drqe3uc", yt = "drqe3ud", St = "drqe3ue", bt = "drqe3uf";
-var Et = "drqe3uh", Nt = "drqe3ui", te = {
+var Et = "drqe3uh", Rt = "drqe3ui", te = {
   enabled: "drqe3uk drqe3uj",
   disabled: "drqe3ul drqe3uj"
 }, re = {
@@ -529,13 +529,13 @@ var Et = "drqe3uh", Nt = "drqe3ui", te = {
   ran: "drqe3uq drqe3up",
   cached: "drqe3ur drqe3up",
   untouched: "drqe3us drqe3up"
-}, yr = ({ width: e = 380, style: t, className: r } = {}) => {
-  const { compileBus: n } = ne(), [o] = N(() => Ve()), [a, i] = N(!1), [c, u] = N(Re);
+}, Sr = ({ width: e = 380, style: t, className: r } = {}) => {
+  const { compileBus: n } = ne(), [o] = R(() => We()), [a, i] = R(!1), [c, u] = R(Te);
   H(() => {
     const { recordCompile: l } = o.getState(), p = n.getLastTrigger(), y = n.getLastCompile();
     return p && y && l(p, y), n.subscribe(l);
   }, [o, n]);
-  const h = Q(o, (l) => l.lastCompile), R = Q(o, (l) => l.history), k = n.getCacheStats(), q = h === null && R.length === 0, g = () => {
+  const h = Q(o, (l) => l.lastCompile), T = Q(o, (l) => l.history), k = n.getCacheStats(), q = h === null && T.length === 0, g = () => {
     u((l) => {
       const p = !l;
       return Ce(p), p;
@@ -576,13 +576,13 @@ var Et = "drqe3uh", Nt = "drqe3ui", te = {
           children: "next compile reflects this toggle"
         })]
       }),
-      !a && !q && /* @__PURE__ */ v(_e, { children: [/* @__PURE__ */ d(Rt, {
+      !a && !q && /* @__PURE__ */ v(_e, { children: [/* @__PURE__ */ d(Tt, {
         delta: h?.stages,
         cumulative: k
-      }), /* @__PURE__ */ d(Tt, { entries: R })] })
+      }), /* @__PURE__ */ d(Nt, { entries: T })] })
     ]
   });
-}, Rt = ({ delta: e, cumulative: t }) => /* @__PURE__ */ v("table", {
+}, Tt = ({ delta: e, cumulative: t }) => /* @__PURE__ */ v("table", {
   className: lt,
   children: [/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ v("tr", {
     className: Et,
@@ -643,10 +643,10 @@ var Et = "drqe3uh", Nt = "drqe3ui", te = {
       ]
     }, r);
   }) })]
-}), Tt = ({ entries: e }) => e.length === 0 ? null : /* @__PURE__ */ v("div", {
+}), Nt = ({ entries: e }) => e.length === 0 ? null : /* @__PURE__ */ v("div", {
   className: yt,
   children: [/* @__PURE__ */ d("div", {
-    className: Nt,
+    className: Rt,
     children: "recent compiles"
   }), e.map((t) => {
     const r = qt(t.stages, (a) => a.misses > 0), n = j.length;
@@ -679,7 +679,7 @@ var Et = "drqe3uh", Nt = "drqe3ui", te = {
   let r = 0;
   for (const n of j) t(e[n]) && (r += 1);
   return r;
-}, ie = (e) => e >= 10 ? `${e.toFixed(0)}ms` : `${e.toFixed(2)}ms`, Sr = () => {
+}, ie = (e) => e >= 10 ? `${e.toFixed(0)}ms` : `${e.toFixed(2)}ms`, br = () => {
   const { history: e } = ne(), { stack: t, undo: r, redo: n } = e, o = f((c) => t.subscribe(c), [t]), a = f(() => t.getSnapshot(), [t]), i = Ge(o, a, a);
   return $(() => ({
     ...i,
@@ -701,7 +701,7 @@ var Et = "drqe3uh", Nt = "drqe3ui", te = {
   "range",
   "reset",
   "submit"
-]), br = (e, t = {}) => {
+]), Er = (e, t = {}) => {
   const { target: r, enabled: n = !0 } = t;
   H(() => {
     const o = kt(r);
@@ -724,41 +724,42 @@ export {
   Pt as BrandMark,
   $t as CanvasTextMeasurer,
   Dt as DefaultFooter,
-  sr as DefaultGrid,
-  Zt as DefaultHeader,
+  or as DefaultGrid,
+  Jt as DefaultHeader,
   xt as DefaultSwatch,
-  At as DefaultTooltip,
-  yr as DevToolsPanel,
-  er as GRAPH_MODES,
+  Kt as DefaultTooltip,
+  Sr as DevToolsPanel,
+  tr as GRAPH_MODES,
   Le as GraphErrorBoundary,
   Z as GraphErrorPanel,
   at as GraphProvider,
-  Ft as GraphRenderer,
-  jt as HoverProvider,
+  Yt as GraphRenderer,
+  Ft as HoverProvider,
   Bt as TextMeasurerProvider,
-  rr as ThemeProvider,
-  vr as UnitBoxSvg,
-  fr as UnitSpaceSvg,
-  pr as createGraphyKit,
-  Qt as darkTheme,
-  or as defineGeomRenderer,
-  Yt as lightTheme,
+  nr as ThemeProvider,
+  yr as UnitBoxSvg,
+  vr as UnitSpaceSvg,
+  fr as createGraphyKit,
+  Zt as darkTheme,
+  ir as defineGeomRenderer,
+  Wt as lightTheme,
   Mt as lightenCss,
   Oe as pruneSelection,
   Lt as resolveBrandMarkVisual,
-  Wt as useElementScreenRect,
-  Xt as useGeomHitTest,
+  Xt as useElementScreenRect,
+  zt as useGeomHitTest,
   Vt as useGeomHover,
-  tr as useGraphCommands,
-  zt as useGraphHandle,
-  Sr as useGraphHistory,
-  br as useGraphHistoryShortcuts,
-  Ut as useGraphSelection,
-  nr as useHandleScene,
-  Kt as useHoverState,
-  Ht as useSceneSelector,
-  Ot as useStyleReaders,
-  ir as useStyleResolver,
-  Jt as useTextMeasurer,
-  cr as vars
+  rr as useGraphCommands,
+  Qt as useGraphHandle,
+  br as useGraphHistory,
+  Er as useGraphHistoryShortcuts,
+  jt as useGraphSelection,
+  sr as useHandleScene,
+  Ut as useHoverState,
+  At as useSceneSelector,
+  Ot as useStyleReaderTree,
+  ar as useStyleReaders,
+  Ht as useStyleResolver,
+  er as useTextMeasurer,
+  dr as vars
 };

package/package.json

@@ -11,7 +11,7 @@
     "visualization",
     "renderer"
   ],
-  "version": "1.9.0-beta.1789480282040",
+  "version": "1.9.0-beta.1789545386500",
   "type": "module",
   "sideEffects": [
     "**/*.css.ts",
@@ -55,7 +55,7 @@
     "react-colorful": "^5.6.1",
     "react-intl": "^8.1.3",
     "zustand": "^5.0.12",
-    "@graphysdk/viz-engine": "1.9.0-beta.1789480282040"
+    "@graphysdk/viz-engine": "1.9.0-beta.1789545386500"
   },
   "peerDependencies": {
     "@tiptap/core": "^3.0.0",