@graphysdk/react 0.0.1 → 1.8.1-beta.1786024899180

package/LICENSE.md

@@ -0,0 +1,17 @@
+# License
+
+This software is available under any of the following licenses, at your option,
+depending on which one's conditions you meet:
+
+- **PolyForm Noncommercial 1.0.0** — for noncommercial use (personal,
+  charitable, educational, research, government).
+  See [licenses/PolyForm-NonCommercial-1.0.0.md](licenses/PolyForm-NonCommercial-1.0.0.md)
+
+- **PolyForm Small Business 1.0.0** — free commercial use for organizations
+  under the size thresholds defined in the license.
+  See [licenses/PolyForm-Small-Business-1.0.0.md](licenses/PolyForm-Small-Business-1.0.0.md)
+
+- **PolyForm Free Trial 1.0.0** — a 32-day evaluation for anyone else.
+  See [licenses/PolyForm-Free-Trial-1.0.0.md](licenses/PolyForm-Free-Trial-1.0.0.md)
+
+For commercial use beyond these terms, contact [hello@graphy.dev](mailto:hello@graphy.dev) or visit [https://graphy.dev](https://graphy.dev).

package/README.md

@@ -0,0 +1,76 @@
+# @graphysdk/react
+
+The recommended, batteries-included React entry point for Graphy.
+
+## Docs
+
+- [Quickstart](https://docs.graphy.dev/sdk-next/quickstart)
+- [Provider and renderer](https://docs.graphy.dev/sdk-next/rendering/provider-and-renderer)
+
+It re-exports the `@graphysdk/react-renderer` surface across the same two entry points — the read-only main entry and `/editable` — with one opinionated default: the **provenance mark is shown by default**.
+
+```tsx
+import { GraphProvider, GraphRenderer } from '@graphysdk/react';
+import { createSpec, pipe, geom, scale } from '@graphysdk/viz-engine';
+
+const input = pipe(createSpec({ x: 'month', y: 'revenue' }), geom.bar(), scale.x(), scale.y());
+
+export function Chart({ data }) {
+  return (
+    <GraphProvider data={data} input={input}>
+      <GraphRenderer />
+    </GraphProvider>
+  );
+}
+```
+
+## Entry points
+
+Two entries, mirroring `@graphysdk/react-renderer`'s own split:
+
+- **`@graphysdk/react`** — the read-only surface: `GraphProvider`, `GraphRenderer`, hooks, slots, theme, and types. This is where the batteries-included `GraphProvider` lives.
+- **`@graphysdk/react/editable`** — the editing surface: `EditableGraphRenderer`, `EditorPanel`, its sections, and the default controls. Kept separate so a read-only embed never bundles the editor or its stylesheet.
+
+The provenance default lives on `GraphProvider`, so editable mode inherits it — mount the editor inside the same provider:
+
+```tsx
+import { GraphProvider } from '@graphysdk/react';
+import { EditableGraphRenderer } from '@graphysdk/react/editable';
+
+export function EditableChart({ data, input, isEditing }) {
+  return (
+    <GraphProvider data={data} input={input}>
+      <EditableGraphRenderer mode={isEditing ? 'editable' : 'readonly'} />
+    </GraphProvider>
+  );
+}
+```
+
+## Which package should I use?
+
+- **`@graphysdk/react` (this package)** — start here. The provenance mark is on by default; everything else is identical to the renderer.
+- **`@graphysdk/react-renderer`** — the neutral, unopinionated layer. The mark is **off** by default. Reach for it directly when embedding into another product or building your own opinionated wrapper.
+
+Both share the same API (same two entry points), so moving between them is a one-line import change.
+
+## Turning the mark off
+
+The mark is a developer config flag, never a paywall. Opt out per chart with either API:
+
+```tsx
+// Low-level spec config
+import { config } from '@graphysdk/viz-engine';
+const input = pipe(
+  createSpec({ x: 'month', y: 'revenue' }),
+  geom.bar(),
+  config({ content: { isBrandMarkVisible: false } })
+);
+```
+
+```tsx
+// High-level GraphConfig API
+import { convertGraphConfig } from '@graphysdk/viz-engine/graph-config';
+const input = convertGraphConfig({ type: 'column', content: { isBrandMarkHidden: true } }, data);
+```
+
+An explicit setting always wins over this package's default.

package/dist/brand-mark-default.d.ts

@@ -0,0 +1,17 @@
+import { SpecInput } from '@graphysdk/viz-engine';
+/**
+ * Seed the "Made with Graphy" provenance badge to on for the batteries-included entry point.
+ *
+ * The low-level renderer resolves `config.content.brandMark.enabled` / `isBrandMarkVisible` to
+ * `false` (neutral by default). `@graphysdk/react` is the opinionated happy path, so it flips the
+ * default to `true` — but only when the caller has expressed no preference. An explicit `true` or
+ * `false` on either the structured field or the legacy flag is left untouched, so a caller opting
+ * out (directly, or via the high-level `content.isBrandMarkHidden` that the converter has already
+ * turned into `isBrandMarkVisible: false`) always wins.
+ *
+ * The seed goes through viz-engine's {@link updateSpec}, which applies the change with structural sharing:
+ * only the `config` → `content` path is rebuilt while every untouched subtree keeps its reference. Paired
+ * with the caller-side `useMemo` in {@link GraphProvider}, a stable input yields a stable result, so nothing
+ * downstream recompiles just because the mark was defaulted.
+ */
+export declare function withBrandMarkDefault(input: SpecInput): SpecInput;

package/dist/editable.cjs

@@ -0,0 +1 @@
+var r=require("@graphysdk/react-renderer/editable");Object.keys(r).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return r[e]}})});

package/dist/editable.d.ts

@@ -0,0 +1,21 @@
+/**
+ * `@graphysdk/react/editable` — the chart editing surface.
+ *
+ * Mirrors `@graphysdk/react-renderer/editable`: the editor canvas (`EditableGraphRenderer`), the
+ * `EditorPanel`, its sections, and the default controls. Kept out of the main entry so a read-only
+ * embed ships neither the editing panel nor its stylesheet.
+ *
+ * The batteries-included provenance default lives on this package's `GraphProvider` (the main entry),
+ * not here: `EditableGraphRenderer` mounts *inside* that provider, so the Made with Graphy badge
+ * still defaults on in editable mode. Pair the two entries:
+ *
+ * ```tsx
+ * import { GraphProvider } from '@graphysdk/react';
+ * import { EditableGraphRenderer } from '@graphysdk/react/editable';
+ *
+ * <GraphProvider data={data} input={input}>
+ *   <EditableGraphRenderer mode={isEditing ? 'editable' : 'readonly'} />
+ * </GraphProvider>;
+ * ```
+ */
+export * from '@graphysdk/react-renderer/editable';

package/dist/editable.mjs

@@ -0,0 +1 @@
+export * from "@graphysdk/react-renderer/editable";

package/dist/graph-provider.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { GraphProviderProps } from '@graphysdk/react-renderer';
+/**
+ * The batteries-included `GraphProvider`: identical to `@graphysdk/react-renderer`'s, except the
+ * provenance badge defaults to on. It seeds `config.content.brandMark.enabled` beneath the caller's
+ * `input`, so any explicit opt-out still wins, then hands the result to the renderer's provider. No
+ * rendering behaviour changes — only the resolved default.
+ */
+export declare const GraphProvider: (props: GraphProviderProps) => ReactElement;

package/dist/index.cjs

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

package/dist/index.d.ts

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