diff --git a/.gitignore b/.gitignore
index 0b3944b9..b97ef1d6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -185,3 +185,6 @@ _site/
# Test React app (local verification only)
test-react-app/
+
+# Built React example (generated by build:react-example)
+examples/react/
diff --git a/examples/react-app/data/barData.ts b/examples/react-app/data/barData.ts
new file mode 100644
index 00000000..d77f1ee4
--- /dev/null
+++ b/examples/react-app/data/barData.ts
@@ -0,0 +1,1086 @@
+import { TraceType } from 'maidr/react';
+import type { MaidrData } from 'maidr/react';
+
+export const barData: MaidrData = {
+ id: 'bar',
+ title: 'The Number of Tips by Day',
+ subplots: [
+ [
+ {
+ layers: [
+ {
+ id: '0',
+ type: TraceType.BAR,
+ selectors: 'path[clip-path="url(#p0f12ed050e)"]',
+ axes: {
+ x: 'Day',
+ y: 'Count',
+ format: {
+ x: {
+ function:
+ "const days = {Sun: 'Sunday', Mon: 'Monday', Tue: 'Tuesday', Wed: 'Wednesday', Thur: 'Thursday', Fri: 'Friday', Sat: 'Saturday'}; return days[value] || value",
+ },
+ y: { type: 'fixed', decimals: 1 },
+ },
+ },
+ data: [
+ { x: 'Sat', y: 87 },
+ { x: 'Sun', y: 76 },
+ { x: 'Thur', y: 62 },
+ { x: 'Fri', y: 19 },
+ ],
+ },
+ ],
+ },
+ ],
+ ],
+};
+
+export const barSvgInnerHTML = `
+
+
+
+ 2024-01-18T11:51:31.025970
+ image/svg+xml
+
+
+ Matplotlib v3.8.2, https://matplotlib.org/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
\ No newline at end of file
diff --git a/examples/react-app/data/lineData.ts b/examples/react-app/data/lineData.ts
new file mode 100644
index 00000000..3091a0a3
--- /dev/null
+++ b/examples/react-app/data/lineData.ts
@@ -0,0 +1,511 @@
+import { TraceType } from 'maidr/react';
+import type { MaidrData } from 'maidr/react';
+
+export const lineData: MaidrData = {
+ id: '151f3961-0445-4713-94f4-e2059c74c53a',
+ subplots: [
+ [
+ {
+ layers: [
+ {
+ id: 'c4ac3f68-6266-4f35-8125-33d8cdff1e9a',
+ type: TraceType.LINE,
+ title:
+ 'Line: Total Passengers per Year\nFrom the Flights Dataset',
+ axes: {
+ x: 'Year',
+ y: 'Total Passengers (Thousands)',
+ },
+ data: [
+ [
+ { x: 1949.0, y: 1520.0 },
+ { x: 1950.0, y: 1676.0 },
+ { x: 1951.0, y: 2042.0 },
+ { x: 1952.0, y: 2364.0 },
+ { x: 1953.0, y: 2700.0 },
+ { x: 1954.0, y: 2867.0 },
+ { x: 1955.0, y: 3408.0 },
+ { x: 1956.0, y: 3939.0 },
+ { x: 1957.0, y: 4421.0 },
+ { x: 1958.0, y: 4572.0 },
+ { x: 1959.0, y: 5140.0 },
+ { x: 1960.0, y: 5714.0 },
+ ],
+ ],
+ selectors: [
+ "g[id='maidr-bc200021-0bee-4a65-b89e-5bc56843df54'] path",
+ ],
+ },
+ ],
+ },
+ ],
+ ],
+};
+
+export const lineSvgInnerHTML = `
+
+
+
+ 2025-09-28T20:47:59.778672
+ image/svg+xml
+
+
+ Matplotlib v3.9.4, https://matplotlib.org/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
\ No newline at end of file
diff --git a/examples/react-app/data/smoothData.ts b/examples/react-app/data/smoothData.ts
new file mode 100644
index 00000000..6d65c260
--- /dev/null
+++ b/examples/react-app/data/smoothData.ts
@@ -0,0 +1,1671 @@
+import { TraceType } from 'maidr/react';
+import type { MaidrData } from 'maidr/react';
+
+export const smoothData: MaidrData = {
+ "id": "a6b8ffb5-9a9d-44be-9151-439a5373e405",
+ "subplots": [
+ [
+ {
+ "layers": [
+ {
+ "id": "c8cdf051-8c1b-4427-9589-39677dd422e3",
+ "type": TraceType.SMOOTH,
+ "title": "KDE: Plot of Random Data",
+ "axes": {
+ "x": "Value",
+ "y": "Density"
+ },
+ "data": [
+ [
+ {
+ "x": -4.090659720653128,
+ "y": 0.00003130990414432069,
+ "svg_x": 70.71000000000001,
+ "svg_y": 390.01265590666407
+ },
+ {
+ "x": -4.046474878482817,
+ "y": 0.00004940157954895194,
+ "svg_x": 72.38738693467339,
+ "svg_y": 389.9968557796951
+ },
+ {
+ "x": -4.002290036312505,
+ "y": 0.00007607327310168,
+ "svg_x": 74.06477386934678,
+ "svg_y": 389.9735624066279
+ },
+ {
+ "x": -3.9581051941421945,
+ "y": 0.00011432974593037363,
+ "svg_x": 75.74216080402013,
+ "svg_y": 389.94015161881754
+ },
+ {
+ "x": -3.9139203519718837,
+ "y": 0.00016769783590326188,
+ "svg_x": 77.41954773869348,
+ "svg_y": 389.89354329875846
+ },
+ {
+ "x": -3.8697355098015724,
+ "y": 0.00024007344105625092,
+ "svg_x": 79.09693467336685,
+ "svg_y": 389.8303350150977
+ },
+ {
+ "x": -3.825550667631261,
+ "y": 0.0003354436629372707,
+ "svg_x": 80.77432160804022,
+ "svg_y": 389.74704468509356
+ },
+ {
+ "x": -3.7813658254609503,
+ "y": 0.0004574762153518218,
+ "svg_x": 82.45170854271358,
+ "svg_y": 389.64046915909194
+ },
+ {
+ "x": -3.737180983290639,
+ "y": 0.0006089919549181578,
+ "svg_x": 84.12909547738695,
+ "svg_y": 389.5081448790347
+ },
+ {
+ "x": -3.6929961411203283,
+ "y": 0.0007913668341964648,
+ "svg_x": 85.80648241206032,
+ "svg_y": 389.34887017483504
+ },
+ {
+ "x": -3.648811298950017,
+ "y": 0.001003941753084901,
+ "svg_x": 87.4838693467337,
+ "svg_y": 389.1632206629054
+ },
+ {
+ "x": -3.604626456779706,
+ "y": 0.0012435452535690175,
+ "svg_x": 89.16125628140705,
+ "svg_y": 388.95396609442633
+ },
+ {
+ "x": -3.560441614609395,
+ "y": 0.0015042461494080136,
+ "svg_x": 90.83864321608043,
+ "svg_y": 388.7262863929583
+ },
+ {
+ "x": -3.5162567724390836,
+ "y": 0.0017774433516954526,
+ "svg_x": 92.5160301507538,
+ "svg_y": 388.4876932064695
+ },
+ {
+ "x": -3.472071930268773,
+ "y": 0.002052364207035492,
+ "svg_x": 94.19341708542716,
+ "svg_y": 388.2475946902381
+ },
+ {
+ "x": -3.4278870880984615,
+ "y": 0.002316982220368148,
+ "svg_x": 95.87080402010052,
+ "svg_y": 388.0164940256824
+ },
+ {
+ "x": -3.3837022459281507,
+ "y": 0.002559288528300005,
+ "svg_x": 97.5481909547739,
+ "svg_y": 387.8048789958368
+ },
+ {
+ "x": -3.3395174037578395,
+ "y": 0.002768773463206442,
+ "svg_x": 99.22557788944727,
+ "svg_y": 387.6219280808119
+ },
+ {
+ "x": -3.2953325615875286,
+ "y": 0.002937912950730226,
+ "svg_x": 100.90296482412062,
+ "svg_y": 387.4742123320726
+ },
+ {
+ "x": -3.2511477194172174,
+ "y": 0.0030634264478196717,
+ "svg_x": 102.580351758794,
+ "svg_y": 387.36459676878286
+ },
+ {
+ "x": -3.206962877246906,
+ "y": 0.003147090269864315,
+ "svg_x": 104.25773869346736,
+ "svg_y": 387.2915300692401
+ },
+ {
+ "x": -3.1627780350765953,
+ "y": 0.003195954713735132,
+ "svg_x": 105.93512562814071,
+ "svg_y": 387.2488549493211
+ },
+ {
+ "x": -3.118593192906284,
+ "y": 0.003221916448122887,
+ "svg_x": 107.61251256281409,
+ "svg_y": 387.226181609761
+ },
+ {
+ "x": -3.0744083507359727,
+ "y": 0.0032407201625036775,
+ "svg_x": 109.28989949748747,
+ "svg_y": 387.2097596329092
+ },
+ {
+ "x": -3.030223508565662,
+ "y": 0.0032705799740616803,
+ "svg_x": 110.96728643216083,
+ "svg_y": 387.1836819588776
+ },
+ {
+ "x": -2.986038666395351,
+ "y": 0.003330695294811018,
+ "svg_x": 112.6446733668342,
+ "svg_y": 387.1311810334864
+ },
+ {
+ "x": -2.94185382422504,
+ "y": 0.003439966724407699,
+ "svg_x": 114.32206030150756,
+ "svg_y": 387.03575026640186
+ },
+ {
+ "x": -2.8976689820547286,
+ "y": 0.003616184369685506,
+ "svg_x": 115.99944723618094,
+ "svg_y": 386.8818529016033
+ },
+ {
+ "x": -2.8534841398844177,
+ "y": 0.0038758663520965255,
+ "svg_x": 117.67683417085428,
+ "svg_y": 386.6550630547879
+ },
+ {
+ "x": -2.8092992977141065,
+ "y": 0.004234785019886466,
+ "svg_x": 119.35422110552767,
+ "svg_y": 386.3416061528822
+ },
+ {
+ "x": -2.765114455543795,
+ "y": 0.004709059027274733,
+ "svg_x": 121.03160804020102,
+ "svg_y": 385.92740518104165
+ },
+ {
+ "x": -2.7209296133734844,
+ "y": 0.005316543236077628,
+ "svg_x": 122.70899497487441,
+ "svg_y": 385.39686683033267
+ },
+ {
+ "x": -2.6767447712031736,
+ "y": 0.006078147298138619,
+ "svg_x": 124.38638190954775,
+ "svg_y": 384.7317299310948
+ },
+ {
+ "x": -2.6325599290328623,
+ "y": 0.007018683279955856,
+ "svg_x": 126.06376884422113,
+ "svg_y": 383.9103251911113
+ },
+ {
+ "x": -2.588375086862551,
+ "y": 0.00816689653076014,
+ "svg_x": 127.7411557788945,
+ "svg_y": 382.9075482373789
+ },
+ {
+ "x": -2.54419024469224,
+ "y": 0.00955447058922441,
+ "svg_x": 129.41854271356786,
+ "svg_y": 381.69572866775593
+ },
+ {
+ "x": -2.500005402521929,
+ "y": 0.011213998114074414,
+ "svg_x": 131.09592964824122,
+ "svg_y": 380.2464021120498
+ },
+ {
+ "x": -2.4558205603516177,
+ "y": 0.013176142299326211,
+ "svg_x": 132.7733165829146,
+ "svg_y": 378.5327892727166
+ },
+ {
+ "x": -2.411635718181307,
+ "y": 0.015466432767102797,
+ "svg_x": 134.45070351758795,
+ "svg_y": 376.53259418976427
+ },
+ {
+ "x": -2.367450876010996,
+ "y": 0.018102298264606652,
+ "svg_x": 136.12809045226132,
+ "svg_y": 374.23059569585735
+ },
+ {
+ "x": -2.3232660338406848,
+ "y": 0.021090992314206837,
+ "svg_x": 137.8054773869347,
+ "svg_y": 371.6204590225546
+ },
+ {
+ "x": -2.2790811916703735,
+ "y": 0.024428988799018718,
+ "svg_x": 139.48286432160808,
+ "svg_y": 368.7052636576999
+ },
+ {
+ "x": -2.2348963495000627,
+ "y": 0.02810320766963468,
+ "svg_x": 141.16025125628144,
+ "svg_y": 365.49643289055643
+ },
+ {
+ "x": -2.1907115073297514,
+ "y": 0.03209410150887552,
+ "svg_x": 142.8376381909548,
+ "svg_y": 362.01103820104174
+ },
+ {
+ "x": -2.14652666515944,
+ "y": 0.03638024637711627,
+ "svg_x": 144.51502512562817,
+ "svg_y": 358.2677899052919
+ },
+ {
+ "x": -2.1023418229891293,
+ "y": 0.04094371272125957,
+ "svg_x": 146.1924120603015,
+ "svg_y": 354.2823465428893
+ },
+ {
+ "x": -2.058156980818818,
+ "y": 0.045775230098893754,
+ "svg_x": 147.8697989949749,
+ "svg_y": 350.06280433288975
+ },
+ {
+ "x": -2.013972138648507,
+ "y": 0.05087807783074991,
+ "svg_x": 149.54718592964826,
+ "svg_y": 345.60629932362684
+ },
+ {
+ "x": -1.969787296478196,
+ "y": 0.05626977565145946,
+ "svg_x": 151.22457286432166,
+ "svg_y": 340.89753088508985
+ },
+ {
+ "x": -1.9256024543078851,
+ "y": 0.06198100985542495,
+ "svg_x": 152.901959798995,
+ "svg_y": 335.909699545316
+ },
+ {
+ "x": -1.8814176121375739,
+ "y": 0.06805175414252536,
+ "svg_x": 154.57934673366836,
+ "svg_y": 330.6078947988169
+ },
+ {
+ "x": -1.837232769967263,
+ "y": 0.07452512761687477,
+ "svg_x": 156.2567336683417,
+ "svg_y": 324.9544591426496
+ },
+ {
+ "x": -1.7930479277969518,
+ "y": 0.08144004739823013,
+ "svg_x": 157.9341206030151,
+ "svg_y": 318.9154048216907
+ },
+ {
+ "x": -1.7488630856266405,
+ "y": 0.08882405659950532,
+ "svg_x": 159.61150753768845,
+ "svg_y": 312.46667742022527
+ },
+ {
+ "x": -1.7046782434563297,
+ "y": 0.09668775184442237,
+ "svg_x": 161.28889447236185,
+ "svg_y": 305.5990225161777
+ },
+ {
+ "x": -1.6604934012860184,
+ "y": 0.10502196952360994,
+ "svg_x": 162.9662814070352,
+ "svg_y": 298.320443027372
+ },
+ {
+ "x": -1.6163085591157076,
+ "y": 0.11379835840206126,
+ "svg_x": 164.64366834170855,
+ "svg_y": 290.65569913233304
+ },
+ {
+ "x": -1.5721237169453963,
+ "y": 0.12297327358409418,
+ "svg_x": 166.32105527638194,
+ "svg_y": 282.6429075271602
+ },
+ {
+ "x": -1.527938874775085,
+ "y": 0.13249421999549524,
+ "svg_x": 167.9984422110553,
+ "svg_y": 274.3279140950715
+ },
+ {
+ "x": -1.4837540326047742,
+ "y": 0.14230750717421917,
+ "svg_x": 169.67582914572867,
+ "svg_y": 265.75760869553903
+ },
+ {
+ "x": -1.439569190434463,
+ "y": 0.15236547832193598,
+ "svg_x": 171.35321608040204,
+ "svg_y": 256.97361176711854
+ },
+ {
+ "x": -1.3953843482641521,
+ "y": 0.1626317155316665,
+ "svg_x": 173.03060301507543,
+ "svg_y": 248.00772841029658
+ },
+ {
+ "x": -1.3511995060938409,
+ "y": 0.17308299772117272,
+ "svg_x": 174.70798994974876,
+ "svg_y": 238.8802384520938
+ },
+ {
+ "x": -1.30701466392353,
+ "y": 0.18370742466476686,
+ "svg_x": 176.38537688442213,
+ "svg_y": 229.60153479823182
+ },
+ {
+ "x": -1.2628298217532188,
+ "y": 0.19449889202295975,
+ "svg_x": 178.0627638190955,
+ "svg_y": 220.17694859338522
+ },
+ {
+ "x": -1.2186449795829075,
+ "y": 0.2054488548588255,
+ "svg_x": 179.7401507537689,
+ "svg_y": 210.61394244592802
+ },
+ {
+ "x": -1.1744601374125967,
+ "y": 0.2165369037626608,
+ "svg_x": 181.41753768844222,
+ "svg_y": 200.9303406456211
+ },
+ {
+ "x": -1.1302752952422854,
+ "y": 0.22772198721362596,
+ "svg_x": 183.09492462311562,
+ "svg_y": 191.1619949987251
+ },
+ {
+ "x": -1.0860904530719746,
+ "y": 0.23893609109306826,
+ "svg_x": 184.77231155778895,
+ "svg_y": 181.36830474198078
+ },
+ {
+ "x": -1.0419056109016633,
+ "y": 0.2500818398791641,
+ "svg_x": 186.44969849246235,
+ "svg_y": 171.6343115077452
+ },
+ {
+ "x": -0.9977207687313525,
+ "y": 0.2610348806492031,
+ "svg_x": 188.12708542713568,
+ "svg_y": 162.06861728692533
+ },
+ {
+ "x": -0.9535359265610412,
+ "y": 0.2716511589935541,
+ "svg_x": 189.80447236180905,
+ "svg_y": 152.79703010513026
+ },
+ {
+ "x": -0.90935108439073,
+ "y": 0.28177842263187014,
+ "svg_x": 191.48185929648247,
+ "svg_y": 143.95251749062885
+ },
+ {
+ "x": -0.8651662422204192,
+ "y": 0.29127061621789874,
+ "svg_x": 193.1592462311558,
+ "svg_y": 135.6626349607336
+ },
+ {
+ "x": -0.8209814000501079,
+ "y": 0.30000335676177387,
+ "svg_x": 194.83663316582917,
+ "svg_y": 128.03601076510688
+ },
+ {
+ "x": -0.7767965578797971,
+ "y": 0.3078884629472529,
+ "svg_x": 196.51402010050253,
+ "svg_y": 121.14965689748414
+ },
+ {
+ "x": -0.7326117157094858,
+ "y": 0.3148855717629324,
+ "svg_x": 198.1914070351759,
+ "svg_y": 115.03882386345772
+ },
+ {
+ "x": -0.6884268735391745,
+ "y": 0.32100919334303957,
+ "svg_x": 199.8687939698493,
+ "svg_y": 109.69083942798028
+ },
+ {
+ "x": -0.6442420313688637,
+ "y": 0.3263300819174363,
+ "svg_x": 201.54618090452263,
+ "svg_y": 105.04391131419479
+ },
+ {
+ "x": -0.6000571891985524,
+ "y": 0.3309704701335142,
+ "svg_x": 203.223567839196,
+ "svg_y": 100.99128924578093
+ },
+ {
+ "x": -0.5558723470282416,
+ "y": 0.33509344713360784,
+ "svg_x": 204.9009547738694,
+ "svg_y": 97.39054146346182
+ },
+ {
+ "x": -0.5116875048579304,
+ "y": 0.3388874734755469,
+ "svg_x": 206.57834170854272,
+ "svg_y": 94.07707841564785
+ },
+ {
+ "x": -0.46750266268761953,
+ "y": 0.34254763379388015,
+ "svg_x": 208.25572864321612,
+ "svg_y": 90.88052550039473
+ },
+ {
+ "x": -0.42331782051730826,
+ "y": 0.3462556531994323,
+ "svg_x": 209.93311557788948,
+ "svg_y": 87.64217548024303
+ },
+ {
+ "x": -0.379132978346997,
+ "y": 0.35016088460650785,
+ "svg_x": 211.61050251256287,
+ "svg_y": 84.23159295015594
+ },
+ {
+ "x": -0.3349481361766862,
+ "y": 0.35436437876964516,
+ "svg_x": 213.28788944723618,
+ "svg_y": 80.56052656158184
+ },
+ {
+ "x": -0.2907632940063749,
+ "y": 0.3589077829052686,
+ "svg_x": 214.96527638190958,
+ "svg_y": 76.59260426534928
+ },
+ {
+ "x": -0.24657845183606408,
+ "y": 0.36376822627732547,
+ "svg_x": 216.6426633165829,
+ "svg_y": 72.34779991824182
+ },
+ {
+ "x": -0.20239360966575282,
+ "y": 0.3688596280403082,
+ "svg_x": 218.32005025125628,
+ "svg_y": 67.90129109548116
+ },
+ {
+ "x": -0.158208767495442,
+ "y": 0.37404011136746473,
+ "svg_x": 219.9974371859297,
+ "svg_y": 63.376984059284666
+ },
+ {
+ "x": -0.11402392532513073,
+ "y": 0.3791245353462726,
+ "svg_x": 221.67482412060306,
+ "svg_y": 58.93656919263699
+ },
+ {
+ "x": -0.0698390831548199,
+ "y": 0.3839006470696864,
+ "svg_x": 223.35221105527637,
+ "svg_y": 54.76541478265602
+ },
+ {
+ "x": -0.025654240984508192,
+ "y": 0.3881470589083364,
+ "svg_x": 225.0295979899498,
+ "svg_y": 51.05686680616102
+ },
+ {
+ "x": 0.01853060118580263,
+ "y": 0.3916511783707175,
+ "svg_x": 226.70698492462313,
+ "svg_y": 47.996590121895395
+ },
+ {
+ "x": 0.06271544335611345,
+ "y": 0.3942253366467558,
+ "svg_x": 228.3843718592965,
+ "svg_y": 45.748482818950734
+ },
+ {
+ "x": 0.10690028552642428,
+ "y": 0.3957196363213503,
+ "svg_x": 230.06175879396986,
+ "svg_y": 44.44345583497918
+ },
+ {
+ "x": 0.151085127696736,
+ "y": 0.39603042641955505,
+ "svg_x": 231.73914572864328,
+ "svg_y": 44.17203138685543
+ },
+ {
+ "x": 0.1952699698670468,
+ "y": 0.3951037788258021,
+ "svg_x": 233.41653266331664,
+ "svg_y": 44.98130688563249
+ },
+ {
+ "x": 0.23945481203735763,
+ "y": 0.3929338567226222,
+ "svg_x": 235.09391959798995,
+ "svg_y": 46.87637983914471
+ },
+ {
+ "x": 0.28363965420766934,
+ "y": 0.38955660570240125,
+ "svg_x": 236.77130653266335,
+ "svg_y": 49.82585763664865
+ },
+ {
+ "x": 0.32782449637798017,
+ "y": 0.3850397242779236,
+ "svg_x": 238.4486934673367,
+ "svg_y": 53.770616671641264
+ },
+ {
+ "x": 0.372009338548291,
+ "y": 0.37947032874379705,
+ "svg_x": 240.12608040201007,
+ "svg_y": 58.63457507303636
+ },
+ {
+ "x": 0.4161941807186018,
+ "y": 0.372942049436482,
+ "svg_x": 241.80346733668344,
+ "svg_y": 64.33596201689767
+ },
+ {
+ "x": 0.4603790228889135,
+ "y": 0.3655434111757971,
+ "svg_x": 243.4808542713568,
+ "svg_y": 70.79746551515571
+ },
+ {
+ "x": 0.5045638650592243,
+ "y": 0.3573492075739796,
+ "svg_x": 245.1582412060302,
+ "svg_y": 77.95376554943806
+ },
+ {
+ "x": 0.5487487072295352,
+ "y": 0.3484161627521771,
+ "svg_x": 246.83562814070353,
+ "svg_y": 85.75532285396146
+ },
+ {
+ "x": 0.5929335493998469,
+ "y": 0.3387835224962189,
+ "svg_x": 248.51301507537693,
+ "svg_y": 94.16786263740713
+ },
+ {
+ "x": 0.6371183915701577,
+ "y": 0.3284784205214732,
+ "svg_x": 250.19040201005024,
+ "svg_y": 103.16768802602685
+ },
+ {
+ "x": 0.6813032337404685,
+ "y": 0.31752505393460234,
+ "svg_x": 251.86778894472366,
+ "svg_y": 112.7336667946952
+ },
+ {
+ "x": 0.7254880759107802,
+ "y": 0.3059560185697742,
+ "svg_x": 253.54517587939702,
+ "svg_y": 122.83733179998868
+ },
+ {
+ "x": 0.7696729180810911,
+ "y": 0.29382372648592153,
+ "svg_x": 255.2225628140704,
+ "svg_y": 133.43290965899396
+ },
+ {
+ "x": 0.8138577602514019,
+ "y": 0.2812097378049739,
+ "svg_x": 256.8999497487437,
+ "svg_y": 144.44917091101868
+ },
+ {
+ "x": 0.8580426024217127,
+ "y": 0.26823011005451347,
+ "svg_x": 258.5773366834171,
+ "svg_y": 155.78475823947977
+ },
+ {
+ "x": 0.9022274445920244,
+ "y": 0.25503545937694905,
+ "svg_x": 260.2547236180905,
+ "svg_y": 167.3081330156758
+ },
+ {
+ "x": 0.9464122867623352,
+ "y": 0.241805244640202,
+ "svg_x": 261.93211055276385,
+ "svg_y": 178.8625671956059
+ },
+ {
+ "x": 0.9905971289326461,
+ "y": 0.2287366979512775,
+ "svg_x": 263.60949748743724,
+ "svg_y": 190.2758107104763
+ },
+ {
+ "x": 1.0347819711029578,
+ "y": 0.21602969136412215,
+ "svg_x": 265.2868844221106,
+ "svg_y": 201.37330792852399
+ },
+ {
+ "x": 1.0789668132732686,
+ "y": 0.20386951697380692,
+ "svg_x": 266.96427135678397,
+ "svg_y": 211.99323643347245
+ },
+ {
+ "x": 1.1231516554435794,
+ "y": 0.19240996017254688,
+ "svg_x": 268.64165829145725,
+ "svg_y": 222.00128977394942
+ },
+ {
+ "x": 1.1673364976138902,
+ "y": 0.18175909718993138,
+ "svg_x": 270.3190452261307,
+ "svg_y": 231.3030809950905
+ },
+ {
+ "x": 1.211521339784202,
+ "y": 0.17196992964293195,
+ "svg_x": 271.9964321608041,
+ "svg_y": 239.85232183121636
+ },
+ {
+ "x": 1.2557061819545128,
+ "y": 0.16303731457455878,
+ "svg_x": 273.67381909547737,
+ "svg_y": 247.65350381622972
+ },
+ {
+ "x": 1.2998910241248236,
+ "y": 0.15490174451017114,
+ "svg_x": 275.35120603015076,
+ "svg_y": 254.75859702111066
+ },
+ {
+ "x": 1.3440758662951353,
+ "y": 0.14745951009473,
+ "svg_x": 277.02859296482416,
+ "svg_y": 261.25817464822086
+ },
+ {
+ "x": 1.3882607084654461,
+ "y": 0.14057779975761067,
+ "svg_x": 278.70597989949755,
+ "svg_y": 267.268225937467
+ },
+ {
+ "x": 1.432445550635757,
+ "y": 0.13411252411764132,
+ "svg_x": 280.38336683417083,
+ "svg_y": 272.9145894563934
+ },
+ {
+ "x": 1.4766303928060678,
+ "y": 0.12792623967307265,
+ "svg_x": 282.0607537688443,
+ "svg_y": 278.31729968108544
+ },
+ {
+ "x": 1.5208152349763795,
+ "y": 0.12190357217991503,
+ "svg_x": 283.7381407035176,
+ "svg_y": 283.57711719137956
+ },
+ {
+ "x": 1.5650000771466903,
+ "y": 0.11596201041823524,
+ "svg_x": 285.41552763819095,
+ "svg_y": 288.76610207691124
+ },
+ {
+ "x": 1.6091849193170011,
+ "y": 0.11005677379190186,
+ "svg_x": 287.09291457286434,
+ "svg_y": 293.92336288284264
+ },
+ {
+ "x": 1.6533697614873129,
+ "y": 0.1041794959941977,
+ "svg_x": 288.7703015075377,
+ "svg_y": 299.05620621320224
+ },
+ {
+ "x": 1.6975546036576237,
+ "y": 0.09835151283339667,
+ "svg_x": 290.44768844221113,
+ "svg_y": 304.1459987202113
+ },
+ {
+ "x": 1.7417394458279345,
+ "y": 0.09261339706378388,
+ "svg_x": 292.1250753768844,
+ "svg_y": 309.1573067220882
+ },
+ {
+ "x": 1.7859242879982453,
+ "y": 0.08701289282645258,
+ "svg_x": 293.8024623115578,
+ "svg_y": 314.04843350062254
+ },
+ {
+ "x": 1.830109130168557,
+ "y": 0.08159348966267956,
+ "svg_x": 295.4798492462312,
+ "svg_y": 318.7813980364436
+ },
+ {
+ "x": 1.8742939723388679,
+ "y": 0.0763855528957766,
+ "svg_x": 297.15723618090453,
+ "svg_y": 323.32968117347247
+ },
+ {
+ "x": 1.9184788145091787,
+ "y": 0.07140128599983042,
+ "svg_x": 298.8346231155779,
+ "svg_y": 327.68262516798353
+ },
+ {
+ "x": 1.9626636566794904,
+ "y": 0.06663398846512668,
+ "svg_x": 300.51201005025126,
+ "svg_y": 331.8460818220832
+ },
+ {
+ "x": 2.006848498849801,
+ "y": 0.06206125598316489,
+ "svg_x": 302.18939698492466,
+ "svg_y": 335.8396176441818
+ },
+ {
+ "x": 2.051033341020112,
+ "y": 0.05765109900480679,
+ "svg_x": 303.866783919598,
+ "svg_y": 339.6911702866393
+ },
+ {
+ "x": 2.095218183190423,
+ "y": 0.05336953822680194,
+ "svg_x": 305.54417085427133,
+ "svg_y": 343.4304151274219
+ },
+ {
+ "x": 2.1394030253607346,
+ "y": 0.04918812043192671,
+ "svg_x": 307.2215577889447,
+ "svg_y": 347.08220140988345
+ },
+ {
+ "x": 2.1835878675310454,
+ "y": 0.04508997402881915,
+ "svg_x": 308.8989447236181,
+ "svg_y": 350.66126371662773
+ },
+ {
+ "x": 2.227772709701356,
+ "y": 0.04107342782164594,
+ "svg_x": 310.5763316582915,
+ "svg_y": 354.1690615645742
+ },
+ {
+ "x": 2.271957551871668,
+ "y": 0.03715275152929256,
+ "svg_x": 312.25371859296484,
+ "svg_y": 357.5931326822549
+ },
+ {
+ "x": 2.3161423940419787,
+ "y": 0.03335613121151739,
+ "svg_x": 313.93110552763824,
+ "svg_y": 360.9088611447775
+ },
+ {
+ "x": 2.3603272362122896,
+ "y": 0.029721463665121975,
+ "svg_x": 315.6084924623116,
+ "svg_y": 364.0831502826634
+ },
+ {
+ "x": 2.4045120783826004,
+ "y": 0.026290863920869323,
+ "svg_x": 317.2858793969849,
+ "svg_y": 367.0792194872361
+ },
+ {
+ "x": 2.448696920552912,
+ "y": 0.02310489079809747,
+ "svg_x": 318.9632663316583,
+ "svg_y": 369.8616472466169
+ },
+ {
+ "x": 2.492881762723223,
+ "y": 0.020197411492372003,
+ "svg_x": 320.6406532663317,
+ "svg_y": 372.4008560906129
+ },
+ {
+ "x": 2.5370666048935337,
+ "y": 0.017591789775999962,
+ "svg_x": 322.3180402010051,
+ "svg_y": 374.67644157570675
+ },
+ {
+ "x": 2.5812514470638455,
+ "y": 0.01529876128924196,
+ "svg_x": 323.9954271356784,
+ "svg_y": 376.67902787155583
+ },
+ {
+ "x": 2.6254362892341563,
+ "y": 0.013316029334183386,
+ "svg_x": 325.67281407035176,
+ "svg_y": 378.4106207691025
+ },
+ {
+ "x": 2.669621131404467,
+ "y": 0.01162934173930686,
+ "svg_x": 327.35020100502516,
+ "svg_y": 379.88366721505133
+ },
+ {
+ "x": 2.713805973574779,
+ "y": 0.010214636781484931,
+ "svg_x": 329.02758793969855,
+ "svg_y": 381.1191811990967
+ },
+ {
+ "x": 2.7579908157450896,
+ "y": 0.009040787223736605,
+ "svg_x": 330.7049748743719,
+ "svg_y": 382.1443472846079
+ },
+ {
+ "x": 2.8021756579154005,
+ "y": 0.008072511565588254,
+ "svg_x": 332.3823618090452,
+ "svg_y": 382.9899781063835
+ },
+ {
+ "x": 2.8463605000857113,
+ "y": 0.00727312623331302,
+ "svg_x": 334.0597487437186,
+ "svg_y": 383.6881107814732
+ },
+ {
+ "x": 2.890545342256023,
+ "y": 0.006606939789464267,
+ "svg_x": 335.737135678392,
+ "svg_y": 384.2699159577439
+ },
+ {
+ "x": 2.934730184426334,
+ "y": 0.006041203199682887,
+ "svg_x": 337.41452261306534,
+ "svg_y": 384.7639945739927
+ },
+ {
+ "x": 2.9789150265966446,
+ "y": 0.0055476053537744045,
+ "svg_x": 339.0919095477387,
+ "svg_y": 385.1950717662671
+ },
+ {
+ "x": 3.0230998687669564,
+ "y": 0.005103334328184673,
+ "svg_x": 340.76929648241213,
+ "svg_y": 385.583070028228
+ },
+ {
+ "x": 3.067284710937267,
+ "y": 0.00469172161203444,
+ "svg_x": 342.44668341708547,
+ "svg_y": 385.942546584808
+ },
+ {
+ "x": 3.111469553107578,
+ "y": 0.004302467273663569,
+ "svg_x": 344.1240703517588,
+ "svg_y": 386.2824967459695
+ },
+ {
+ "x": 3.155654395277889,
+ "y": 0.0039314288367225045,
+ "svg_x": 345.8014572864322,
+ "svg_y": 386.6065382889954
+ },
+ {
+ "x": 3.1998392374482005,
+ "y": 0.00357996005874073,
+ "svg_x": 347.4788442211056,
+ "svg_y": 386.9134889275373
+ },
+ {
+ "x": 3.2440240796185114,
+ "y": 0.00325381308477103,
+ "svg_x": 349.1562311557789,
+ "svg_y": 387.1983251013032
+ },
+ {
+ "x": 3.288208921788822,
+ "y": 0.0029616641378080047,
+ "svg_x": 350.83361809045226,
+ "svg_y": 387.4534695449565
+ },
+ {
+ "x": 3.332393763959134,
+ "y": 0.002713377658558054,
+ "svg_x": 352.51100502512566,
+ "svg_y": 387.6703072788363
+ },
+ {
+ "x": 3.3765786061294447,
+ "y": 0.0025181727194137945,
+ "svg_x": 354.18839195979905,
+ "svg_y": 387.840786947218
+ },
+ {
+ "x": 3.4207634482997555,
+ "y": 0.002382886367062822,
+ "svg_x": 355.8657788944724,
+ "svg_y": 387.9589375052238
+ },
+ {
+ "x": 3.4649482904700664,
+ "y": 0.0023105334984811314,
+ "svg_x": 357.5431658291457,
+ "svg_y": 388.0221259321987
+ },
+ {
+ "x": 3.509133132640378,
+ "y": 0.002299339525314164,
+ "svg_x": 359.22055276381917,
+ "svg_y": 388.03190204156226
+ },
+ {
+ "x": 3.553317974810689,
+ "y": 0.002342372821469825,
+ "svg_x": 360.8979396984925,
+ "svg_y": 387.9943194778723
+ },
+ {
+ "x": 3.5975028169809997,
+ "y": 0.0024278347355157397,
+ "svg_x": 362.57532663316584,
+ "svg_y": 387.9196824383092
+ },
+ {
+ "x": 3.6416876591513114,
+ "y": 0.002539984145932302,
+ "svg_x": 364.25271356783924,
+ "svg_y": 387.82173822449556
+ },
+ {
+ "x": 3.6858725013216223,
+ "y": 0.00266059114609928,
+ "svg_x": 365.9301005025126,
+ "svg_y": 387.71640768581597
+ },
+ {
+ "x": 3.730057343491933,
+ "y": 0.0027707415340285407,
+ "svg_x": 367.60748743718597,
+ "svg_y": 387.6202092920222
+ },
+ {
+ "x": 3.774242185662244,
+ "y": 0.0028527615963428567,
+ "svg_x": 369.2848743718593,
+ "svg_y": 387.548578148439
+ },
+ {
+ "x": 3.8184270278325556,
+ "y": 0.0028920110633454373,
+ "svg_x": 370.9622613065327,
+ "svg_y": 387.5143001422159
+ },
+ {
+ "x": 3.8626118700028664,
+ "y": 0.0028783073053032645,
+ "svg_x": 372.6396482412061,
+ "svg_y": 387.52626813921876
+ },
+ {
+ "x": 3.9067967121731773,
+ "y": 0.0028067962210261664,
+ "svg_x": 374.3170351758794,
+ "svg_y": 387.5887214049333
+ },
+ {
+ "x": 3.950981554343488,
+ "y": 0.0026781680364643024,
+ "svg_x": 375.9944221105527,
+ "svg_y": 387.70105713959646
+ },
+ {
+ "x": 3.9951663965138,
+ "y": 0.00249821579518853,
+ "svg_x": 377.67180904522615,
+ "svg_y": 387.85821606473297
+ },
+ {
+ "x": 4.0393512386841115,
+ "y": 0.0022768327260684323,
+ "svg_x": 379.3491959798996,
+ "svg_y": 388.05155805891803
+ },
+ {
+ "x": 4.083536080854421,
+ "y": 0.0020266235580977277,
+ "svg_x": 381.0265829145729,
+ "svg_y": 388.2700749477258
+ },
+ {
+ "x": 4.127720923024733,
+ "y": 0.0017613498743171332,
+ "svg_x": 382.7039698492462,
+ "svg_y": 388.5017482334508
+ },
+ {
+ "x": 4.171905765195045,
+ "y": 0.0014944339249074296,
+ "svg_x": 384.3813567839196,
+ "svg_y": 388.73485577028185
+ },
+ {
+ "x": 4.216090607365355,
+ "y": 0.0012377111179778001,
+ "svg_x": 386.058743718593,
+ "svg_y": 388.9590612600776
+ },
+ {
+ "x": 4.2602754495356665,
+ "y": 0.0010005588724088612,
+ "svg_x": 387.7361306532664,
+ "svg_y": 389.1661750572889
+ },
+ {
+ "x": 4.304460291705976,
+ "y": 0.0007894538513937033,
+ "svg_x": 389.4135175879397,
+ "svg_y": 389.350540853227
+ },
+ {
+ "x": 4.348645133876288,
+ "y": 0.0006079369247854676,
+ "svg_x": 391.09090452261313,
+ "svg_y": 389.5090662757368
+ },
+ {
+ "x": 4.3928299760466,
+ "y": 0.0004569087173062373,
+ "svg_x": 392.76829145728647,
+ "svg_y": 389.6409647760525
+ },
+ {
+ "x": 4.43701481821691,
+ "y": 0.0003351459303867038,
+ "svg_x": 394.4456783919598,
+ "svg_y": 389.747304705904
+ },
+ {
+ "x": 4.4811996603872215,
+ "y": 0.00023992108230452394,
+ "svg_x": 396.1230653266332,
+ "svg_y": 389.8304680756114
+ },
+ {
+ "x": 4.525384502557533,
+ "y": 0.00016762178506926528,
+ "svg_x": 397.8004522613066,
+ "svg_y": 389.89360971675495
+ },
+ {
+ "x": 4.569569344727843,
+ "y": 0.00011429271609108016,
+ "svg_x": 399.47783919597987,
+ "svg_y": 389.94018395834104
+ },
+ {
+ "x": 4.613754186898155,
+ "y": 0.00007605568471392627,
+ "svg_x": 401.15522613065326,
+ "svg_y": 389.9735777672152
+ },
+ {
+ "x": 4.657939029068467,
+ "y": 0.00004939342986240425,
+ "svg_x": 402.8326130653267,
+ "svg_y": 389.9968628971167
+ },
+ {
+ "x": 4.7021238712387765,
+ "y": 0.00003130622022640016,
+ "svg_x": 404.51000000000005,
+ "svg_y": 390.0126591239654
+ }
+ ]
+ ],
+ "selectors": [
+ "g[id='maidr-03825914-44f3-4ca5-94f0-42078a82560e'] path"
+ ]
+ }
+ ]
+ }
+ ]
+ ]
+};
+
+export const smoothSvgInnerHTML = `
+
+
+
+ 2025-11-11T11:50:33.867359
+ image/svg+xml
+
+
+ Matplotlib v3.10.6, https://matplotlib.org/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
diff --git a/examples/react-app/index.html b/examples/react-app/index.html
new file mode 100644
index 00000000..613e7c99
--- /dev/null
+++ b/examples/react-app/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+ MAIDR React Examples
+
+
+
+
+
+
diff --git a/examples/react-app/main.tsx b/examples/react-app/main.tsx
new file mode 100644
index 00000000..db5b9f6e
--- /dev/null
+++ b/examples/react-app/main.tsx
@@ -0,0 +1,73 @@
+import { createRoot } from 'react-dom/client';
+import { Maidr } from 'maidr/react';
+
+import { barData, barSvgInnerHTML } from './data/barData';
+import { lineData, lineSvgInnerHTML } from './data/lineData';
+import { smoothData, smoothSvgInnerHTML } from './data/smoothData';
+
+function BarChart() {
+ return (
+
+
+
+ );
+}
+
+function LineChart() {
+ return (
+
+
+
+ );
+}
+
+function SmoothChart() {
+ return (
+
+
+
+ );
+}
+
+function App() {
+ return (
+
+
MAIDR React Examples
+ Bar Chart
+
+ Line Chart
+
+ Smooth Chart
+
+
+ );
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ createRoot(document.getElementById('root')!).render();
+});
\ No newline at end of file
diff --git a/examples/react-app/tsconfig.json b/examples/react-app/tsconfig.json
new file mode 100644
index 00000000..df6c9e78
--- /dev/null
+++ b/examples/react-app/tsconfig.json
@@ -0,0 +1,18 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "maidr/react": ["../../src/react-entry.ts"],
+ "@command/*": ["../../src/command/*"],
+ "@model/*": ["../../src/model/*"],
+ "@state/*": ["../../src/state/*"],
+ "@service/*": ["../../src/service/*"],
+ "@type/*": ["../../src/type/*"],
+ "@ui/*": ["../../src/ui/*"],
+ "@util/*": ["../../src/util/*"]
+ }
+ },
+ "include": ["./**/*.ts", "./**/*.tsx"],
+ "exclude": ["node_modules"]
+}
diff --git a/examples/react-app/vite.config.ts b/examples/react-app/vite.config.ts
new file mode 100644
index 00000000..6bb48c26
--- /dev/null
+++ b/examples/react-app/vite.config.ts
@@ -0,0 +1,71 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import { viteSingleFile } from 'vite-plugin-singlefile';
+
+/**
+ * Post-build plugin that strips `type="module"` and `crossorigin` from
+ * inlined scripts so the single-file HTML works when opened via the
+ * file:// protocol. Uses attribute-level replacement so it handles any
+ * attribute order or extra attributes Vite may add in the future.
+ */
+function stripModuleType() {
+ return {
+ name: 'strip-module-type',
+ closeBundle() {
+ const outPath = path.resolve(__dirname, '../react/index.html');
+ if (fs.existsSync(outPath)) {
+ let html = fs.readFileSync(outPath, 'utf-8');
+ html = html.replace(/]*type="module"[^>]*>/g, (match) =>
+ match.replace(/\s*type="module"/, '').replace(/\s*crossorigin/, ''),
+ );
+ fs.writeFileSync(outPath, html);
+ }
+ },
+ };
+}
+
+export default defineConfig({
+ plugins: [
+ react(),
+ viteSingleFile({ removeViteModuleLoader: true }),
+ stripModuleType(),
+ ],
+ root: __dirname,
+ base: './',
+ build: {
+ outDir: '../react',
+ emptyOutDir: true,
+ // Inline all assets so the output is a single self-contained HTML file
+ // that works when opened via file:// with no external dependencies.
+ assetsInlineLimit: Infinity,
+ cssCodeSplit: false,
+ rollupOptions: {
+ output: {
+ format: 'iife',
+ },
+ onwarn(warning, warn) {
+ if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+ return;
+ }
+ warn(warning);
+ },
+ },
+ },
+ define: {
+ 'process.env.NODE_ENV': JSON.stringify('production'),
+ },
+ resolve: {
+ alias: {
+ 'maidr/react': path.resolve(__dirname, '../../src/react-entry.ts'),
+ '@command': path.resolve(__dirname, '../../src/command'),
+ '@model': path.resolve(__dirname, '../../src/model'),
+ '@state': path.resolve(__dirname, '../../src/state'),
+ '@service': path.resolve(__dirname, '../../src/service'),
+ '@type': path.resolve(__dirname, '../../src/type'),
+ '@ui': path.resolve(__dirname, '../../src/ui'),
+ '@util': path.resolve(__dirname, '../../src/util'),
+ },
+ },
+});
diff --git a/examples/react/index.html b/examples/react/index.html
deleted file mode 100644
index 571b771d..00000000
--- a/examples/react/index.html
+++ /dev/null
@@ -1,554 +0,0 @@
-
-
-
-
-
-
- MAIDR React Examples
-
-
-
-
-
-
diff --git a/package-lock.json b/package-lock.json
index 6acfdcce..ad1f406c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "maidr",
- "version": "3.51.0",
+ "version": "3.52.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "maidr",
- "version": "3.51.0",
+ "version": "3.52.0",
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
@@ -56,7 +56,8 @@
"typedoc-theme-hierarchy": "^6.0.0",
"typescript": "^5.8.3",
"vite": "^6.3.5",
- "vite-plugin-dts": "^4.5.4"
+ "vite-plugin-dts": "^4.5.4",
+ "vite-plugin-singlefile": "^2.3.0"
},
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0",
@@ -20359,6 +20360,23 @@
}
}
},
+ "node_modules/vite-plugin-singlefile": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/vite-plugin-singlefile/-/vite-plugin-singlefile-2.3.0.tgz",
+ "integrity": "sha512-DAcHzYypM0CasNLSz/WG0VdKOCxGHErfrjOoyIPiNxTPTGmO6rRD/te93n1YL/s+miXq66ipF1brMBikf99c6A==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "micromatch": "^4.0.8"
+ },
+ "engines": {
+ "node": ">18.0.0"
+ },
+ "peerDependencies": {
+ "rollup": "^4.44.1",
+ "vite": "^5.4.11 || ^6.0.0 || ^7.0.0"
+ }
+ },
"node_modules/vscode-uri": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
diff --git a/package.json b/package.json
index f42539a9..b6ebdf53 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,8 @@
"e2e": "npx playwright test --config=e2e_tests/config/test-config.ts",
"e2e:ui": "npx playwright test --ui",
"e2e:debug": "npx playwright test --debug",
- "e2e:install": "npx playwright install --with-deps"
+ "e2e:install": "npx playwright install --with-deps",
+ "build:react-example": "vite build --config examples/react-app/vite.config.ts"
},
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0",
@@ -101,7 +102,8 @@
"typedoc-theme-hierarchy": "^6.0.0",
"typescript": "^5.8.3",
"vite": "^6.3.5",
- "vite-plugin-dts": "^4.5.4"
+ "vite-plugin-dts": "^4.5.4",
+ "vite-plugin-singlefile": "^2.3.0"
},
"directories": {
"doc": "docs",
diff --git a/scripts/build-site.js b/scripts/build-site.js
index 9c2b3f4b..1b898fe6 100644
--- a/scripts/build-site.js
+++ b/scripts/build-site.js
@@ -8,6 +8,7 @@
* - TypeDoc generates API docs separately
*/
+const { execSync } = require('node:child_process');
const fs = require('node:fs');
const path = require('node:path');
const { marked } = require('marked');
@@ -208,6 +209,10 @@ if (fs.existsSync(distSource)) {
fs.cpSync(distSource, distDest, { recursive: true });
}
+// Build React example
+console.log('Building React example...');
+execSync('npm run build:react-example', { stdio: 'inherit', cwd: ROOT });
+
// Copy examples folder
console.log('Copying examples folder...');
const examplesSource = path.join(ROOT, 'examples');
diff --git a/tsconfig.json b/tsconfig.json
index f3dbee87..d41eb4d1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -28,5 +28,5 @@
"skipLibCheck": true
},
- "exclude": ["node_modules", "dist", "test-react-app"]
+ "exclude": ["node_modules", "dist", "test-react-app", "examples", "_site"]
}
diff --git a/typedoc.json b/typedoc.json
index 01ede2ca..38d0d4a7 100644
--- a/typedoc.json
+++ b/typedoc.json
@@ -8,7 +8,9 @@
"**/*.test.ts",
"**/*.spec.ts",
"**/node_modules/**",
- "test-react-app/**"
+ "test-react-app/**",
+ "examples/**",
+ "_site/**"
],
"name": "MAIDR Documentation",
"includeVersion": true,