tailwind_dsl 0.0.10 → 0.0.12

data/docs/domain-model.svg

@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1322px" height="727px" viewBox="-0.5 -0.5 1322 727"><defs/><g><rect x="5" y="0" width="210" height="210" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 7px; margin-left: 6px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Tailwind GEM</div></div></div></foreignObject><text x="110" y="27" fill="#333333" font-family="Helvetica" font-size="20px" text-anchor="middle">Tailwind GEM</text></switch></g><rect x="225" y="0" width="210" height="210" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 7px; margin-left: 226px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Configuration</div></div></div></foreignObject><text x="330" y="27" fill="#333333" font-family="Helvetica" font-size="20px" text-anchor="middle">Configuration</text></switch></g><rect x="450" y="25" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 25px; margin-left: 450px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Configuration</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">collections: Collections</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">themes: Themes</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">data_shapes: DataShapes</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">component_groups: ComponentGroups</p></div></div></div></foreignObject><text x="450" y="109" fill="#333333" font-family="Helvetica" font-size="12px">Configuration...</text></switch></g><rect x="670" y="25" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 25px; margin-left: 670px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Collection</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">component_groups: ComponentGroups</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">default_themes: Themes</p></div></div></div></foreignObject><text x="670" y="109" fill="#333333" font-family="Helvetica" font-size="12px">Collection...</text></switch></g><rect x="890" y="25" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 25px; margin-left: 890px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Theme</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p></div></div></div></foreignObject><text x="890" y="109" fill="#333333" font-family="Helvetica" font-size="12px">Theme...</text></switch></g><rect x="1110" y="25" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 25px; margin-left: 1110px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>DataShape</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p></div></div></div></foreignObject><text x="1110" y="109" fill="#333333" font-family="Helvetica" font-size="12px">DataShape...</text></switch></g><rect x="10" y="205" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 205px; margin-left: 10px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>ComponentGroup</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">collection: Collection</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">components: Components</p></div></div></div></foreignObject><text x="10" y="289" fill="#333333" font-family="Helvetica" font-size="12px">ComponentGroup...</text></switch></g><rect x="230" y="205" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 205px; margin-left: 230px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Component</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">data_shape: DataShape</p></div></div></div></foreignObject><text x="230" y="289" fill="#333333" font-family="Helvetica" font-size="12px">Component...</text></switch></g><path d="M 650 105 Q 650 105 667.76 105" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 661.88 108.5 L 668.88 105 L 661.88 101.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 650 105 Q 650 105 887.76 105" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 881.88 108.5 L 888.88 105 L 881.88 101.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 650 105 Q 650 105 1107.76 105" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1101.88 108.5 L 1108.88 105 L 1101.88 101.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 650 105 Q 660 105 660 150 Q 660 195 330 195 Q 0 195 0 240 Q 0 285 7.76 285" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1.88 288.5 L 8.88 285 L 1.88 281.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 210 285 Q 210 285 227.76 285" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 221.88 288.5 L 228.88 285 L 221.88 281.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 230 285 Q 220 285 220 240 Q 220 195 770 195 Q 1320 195 1320 150 Q 1320 105 1312.24 105" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1318.12 101.5 L 1311.12 105 L 1318.12 108.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 670 105 Q 660 105 660 60 Q 660 15 770 15 Q 880 15 880 105 Q 880 195 990 195 Q 1100 195 1100 150 Q 1100 105 1092.24 105" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1098.12 101.5 L 1091.12 105 L 1098.12 108.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><rect x="445" y="180" width="210" height="210" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 187px; margin-left: 446px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Schema</div></div></div></foreignObject><text x="550" y="207" fill="#333333" font-family="Helvetica" font-size="20px" text-anchor="middle">Schema</text></switch></g><rect x="670" y="205" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 205px; margin-left: 670px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>WebSite</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">target_folder: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">base_collection: Collection</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">theme: Theme</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">root: Page</p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">favourite_components() : Components</p></div></div></div></foreignObject><text x="670" y="289" fill="#333333" font-family="Helvetica" font-size="12px">WebSite...</text></switch></g><rect x="890" y="205" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 205px; margin-left: 890px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Page</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">sub_folder: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">level: Integer</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">pages: Pages</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">components: Components</p></div></div></div></foreignObject><text x="890" y="289" fill="#333333" font-family="Helvetica" font-size="12px">Page...</text></switch></g><rect x="1110" y="205" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 205px; margin-left: 1110px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Component</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">component_group: ComponentGroup</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">data_shape: DataShape</p></div></div></div></foreignObject><text x="1110" y="289" fill="#333333" font-family="Helvetica" font-size="12px">Component...</text></switch></g><path d="M 870 285 Q 870 285 887.76 285" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 881.88 288.5 L 888.88 285 L 881.88 281.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 1090 285 Q 1090 285 1107.76 285" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1101.88 288.5 L 1108.88 285 L 1101.88 281.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 1090 285 Q 1090 285 991.75 363.6" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 994.15 357.2 L 990.87 364.3 L 998.53 362.66" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><rect x="5" y="360" width="210" height="210" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 367px; margin-left: 6px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Tailwind Generator</div></div></div></foreignObject><text x="110" y="387" fill="#333333" font-family="Helvetica" font-size="20px" text-anchor="middle">Tailwind Generator</text></switch></g><rect x="225" y="360" width="210" height="210" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 367px; margin-left: 226px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Tailwind DSL</div></div></div></foreignObject><text x="330" y="387" fill="#333333" font-family="Helvetica" font-size="20px" text-anchor="middle">Tailwind DSL</text></switch></g><rect x="450" y="385" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 385px; margin-left: 450px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>TailwindDsl</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">website()</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">page()</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">component()</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">save()</p></div></div></div></foreignObject><text x="450" y="469" fill="#333333" font-family="Helvetica" font-size="12px">TailwindDsl...</text></switch></g><rect x="665" y="360" width="210" height="210" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 367px; margin-left: 666px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">DataBuilder</div></div></div></foreignObject><text x="770" y="387" fill="#333333" font-family="Helvetica" font-size="20px" text-anchor="middle">DataBuilder</text></switch></g><rect x="890" y="385" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 385px; margin-left: 890px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>BaseDataBuilder</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">obj: Hash</p></div></div></div></foreignObject><text x="890" y="469" fill="#333333" font-family="Helvetica" font-size="12px">BaseDataBuilder...</text></switch></g><rect x="1130" y="385" width="160" height="160" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 162px; height: 160px; padding-top: 385px; margin-left: 1130px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 160px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><i>&lt;&lt; MixIn &gt;&gt;</i></p><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Factory</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">data()</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">data_instance()</p></div></div></div></foreignObject><text x="1130" y="469" fill="#333333" font-family="Helvetica" font-size="12px">&lt;&lt; MixIn &gt;&gt;...</text></switch></g><rect x="10" y="565" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 565px; margin-left: 10px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Root</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">design_systems: Types::Strict::Array.of(DesignSystem)</p></div></div></div></foreignObject><text x="10" y="649" fill="#333333" font-family="Helvetica" font-size="12px">Root...</text></switch></g><rect x="230" y="565" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 565px; margin-left: 230px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>DesignSystem</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">path: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">stats: Types::Strict::Hash</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">groups: Types::Strict::Array.of(Group)</p></div></div></div></foreignObject><text x="230" y="649" fill="#333333" font-family="Helvetica" font-size="12px">DesignSystem...</text></switch></g><rect x="450" y="565" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 565px; margin-left: 450px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Group</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">type: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">folder: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">sub_keys: Types::Array.of(Types::Strict:'Types::Strict::String')</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">files: Types::Strict::Array.of(SourceFile)</p></div></div></div></foreignObject><text x="450" y="649" fill="#333333" font-family="Helvetica" font-size="12px">Group...</text></switch></g><rect x="670" y="565" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 565px; margin-left: 670px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>SourceFile</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">file_name: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">file_name_only: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">absolute_file: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">file: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">target: TailwindDsl::XTransformers::RawComponents::TargetFile</p></div></div></div></foreignObject><text x="670" y="649" fill="#333333" font-family="Helvetica" font-size="12px">SourceFile...</text></switch></g><rect x="890" y="565" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 565px; margin-left: 890px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>TargetFile</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">html_file: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">clean_html_file: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">tailwind_config_file: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">settings_file: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">data_file: Types::Strict::String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">astro_file: Types::Strict::String</p></div></div></div></foreignObject><text x="890" y="649" fill="#333333" font-family="Helvetica" font-size="12px">TargetFile...</text></switch></g><path d="M 210 645 Q 210 645 227.76 645" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 221.88 648.5 L 228.88 645 L 221.88 641.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 430 645 Q 430 645 447.76 645" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 441.88 648.5 L 448.88 645 L 441.88 641.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 650 645 Q 650 645 667.76 645" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 661.88 648.5 L 668.88 645 L 661.88 641.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 870 645 Q 870 645 887.76 645" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 881.88 648.5 L 888.88 645 L 881.88 641.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1322px" height="772px" viewBox="-0.5 -0.5 1322 772"><defs/><g><rect x="5" y="0" width="210" height="210" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 7px; margin-left: 6px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Tailwind GEM</div></div></div></foreignObject><text x="110" y="27" fill="#333333" font-family="Helvetica" font-size="20px" text-anchor="middle">Tailwind GEM</text></switch></g><rect x="225" y="0" width="210" height="210" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 7px; margin-left: 226px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Configuration</div></div></div></foreignObject><text x="330" y="27" fill="#333333" font-family="Helvetica" font-size="20px" text-anchor="middle">Configuration</text></switch></g><rect x="450" y="25" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 25px; margin-left: 450px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Configuration</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">collections: Collections</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">themes: Themes</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">data_shapes: DataShapes</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">component_groups: ComponentGroups</p></div></div></div></foreignObject><text x="450" y="109" fill="#333333" font-family="Helvetica" font-size="12px">Configuration...</text></switch></g><rect x="670" y="25" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 25px; margin-left: 670px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Collection</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">component_groups: ComponentGroups</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">default_themes: Themes</p></div></div></div></foreignObject><text x="670" y="109" fill="#333333" font-family="Helvetica" font-size="12px">Collection...</text></switch></g><rect x="890" y="25" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 25px; margin-left: 890px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Theme</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p></div></div></div></foreignObject><text x="890" y="109" fill="#333333" font-family="Helvetica" font-size="12px">Theme...</text></switch></g><rect x="1110" y="25" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 25px; margin-left: 1110px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>DataShape</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p></div></div></div></foreignObject><text x="1110" y="109" fill="#333333" font-family="Helvetica" font-size="12px">DataShape...</text></switch></g><rect x="10" y="205" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 205px; margin-left: 10px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>ComponentGroup</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">collection: Collection</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">components: Components</p></div></div></div></foreignObject><text x="10" y="289" fill="#333333" font-family="Helvetica" font-size="12px">ComponentGroup...</text></switch></g><rect x="230" y="205" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 205px; margin-left: 230px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Component</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">data_shape: DataShape</p></div></div></div></foreignObject><text x="230" y="289" fill="#333333" font-family="Helvetica" font-size="12px">Component...</text></switch></g><path d="M 650 105 Q 650 105 667.76 105" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 661.88 108.5 L 668.88 105 L 661.88 101.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 650 105 Q 650 105 887.76 105" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 881.88 108.5 L 888.88 105 L 881.88 101.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 650 105 Q 650 105 1107.76 105" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1101.88 108.5 L 1108.88 105 L 1101.88 101.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 650 105 Q 660 105 660 150 Q 660 195 330 195 Q 0 195 0 240 Q 0 285 7.76 285" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1.88 288.5 L 8.88 285 L 1.88 281.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 210 285 Q 210 285 227.76 285" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 221.88 288.5 L 228.88 285 L 221.88 281.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 230 285 Q 220 285 220 240 Q 220 195 770 195 Q 1320 195 1320 150 Q 1320 105 1312.24 105" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1318.12 101.5 L 1311.12 105 L 1318.12 108.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 670 105 Q 660 105 660 60 Q 660 15 770 15 Q 880 15 880 105 Q 880 195 990 195 Q 1100 195 1100 150 Q 1100 105 1092.24 105" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1098.12 101.5 L 1091.12 105 L 1098.12 108.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><rect x="445" y="180" width="210" height="210" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 187px; margin-left: 446px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Schema</div></div></div></foreignObject><text x="550" y="207" fill="#333333" font-family="Helvetica" font-size="20px" text-anchor="middle">Schema</text></switch></g><rect x="670" y="205" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 205px; margin-left: 670px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>WebSite</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">target_folder: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">base_collection: Collection</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">theme: Theme</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">root: Page</p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">favourite_components() : Components</p></div></div></div></foreignObject><text x="670" y="289" fill="#333333" font-family="Helvetica" font-size="12px">WebSite...</text></switch></g><rect x="890" y="205" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 205px; margin-left: 890px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Page</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">sub_folder: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">level: Integer</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">pages: Pages</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">components: Components</p></div></div></div></foreignObject><text x="890" y="289" fill="#333333" font-family="Helvetica" font-size="12px">Page...</text></switch></g><rect x="1110" y="205" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 205px; margin-left: 1110px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Component</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: Symbol</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">description: String</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">component_group: ComponentGroup</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">data_shape: DataShape</p></div></div></div></foreignObject><text x="1110" y="289" fill="#333333" font-family="Helvetica" font-size="12px">Component...</text></switch></g><path d="M 870 285 Q 870 285 887.76 285" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 881.88 288.5 L 888.88 285 L 881.88 281.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 1090 285 Q 1090 285 1107.76 285" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1101.88 288.5 L 1108.88 285 L 1101.88 281.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 1090 285 Q 1090 285 991.75 363.6" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 994.15 357.2 L 990.87 364.3 L 998.53 362.66" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><rect x="5" y="360" width="210" height="210" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 367px; margin-left: 6px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Tailwind Generator</div></div></div></foreignObject><text x="110" y="387" fill="#333333" font-family="Helvetica" font-size="20px" text-anchor="middle">Tailwind Generator</text></switch></g><rect x="225" y="360" width="210" height="210" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 367px; margin-left: 226px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Tailwind DSL</div></div></div></foreignObject><text x="330" y="387" fill="#333333" font-family="Helvetica" font-size="20px" text-anchor="middle">Tailwind DSL</text></switch></g><rect x="450" y="385" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 385px; margin-left: 450px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>TailwindDsl</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">website()</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">page()</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">component()</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">save()</p></div></div></div></foreignObject><text x="450" y="469" fill="#333333" font-family="Helvetica" font-size="12px">TailwindDsl...</text></switch></g><rect x="665" y="360" width="210" height="210" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 367px; margin-left: 666px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">DataBuilder</div></div></div></foreignObject><text x="770" y="387" fill="#333333" font-family="Helvetica" font-size="20px" text-anchor="middle">DataBuilder</text></switch></g><rect x="890" y="385" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 385px; margin-left: 890px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>BaseDataBuilder</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">obj: Hash</p></div></div></div></foreignObject><text x="890" y="469" fill="#333333" font-family="Helvetica" font-size="12px">BaseDataBuilder...</text></switch></g><rect x="1130" y="385" width="160" height="160" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 162px; height: 160px; padding-top: 385px; margin-left: 1130px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 160px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><i>&lt;&lt; MixIn &gt;&gt;</i></p><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Factory</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">data()</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">data_instance()</p></div></div></div></foreignObject><text x="1130" y="469" fill="#333333" font-family="Helvetica" font-size="12px">&lt;&lt; MixIn &gt;&gt;...</text></switch></g><rect x="5" y="560" width="210" height="210" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 567px; margin-left: 6px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Raw Component Transformers</div></div></div></foreignObject><text x="110" y="587" fill="#333333" font-family="Helvetica" font-size="20px" text-anchor="middle">Raw Component Transfo...</text></switch></g><rect x="230" y="585" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 585px; margin-left: 230px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>UiKit</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">design_systems: DesignSystem[]</p></div></div></div></foreignObject><text x="230" y="669" fill="#333333" font-family="Helvetica" font-size="12px">UiKit...</text></switch></g><rect x="450" y="585" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 585px; margin-left: 450px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>DesignSystem</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: string</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">stats: Hash</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">groups: Group[]</p></div></div></div></foreignObject><text x="450" y="669" fill="#333333" font-family="Helvetica" font-size="12px">DesignSystem...</text></switch></g><rect x="670" y="585" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 585px; margin-left: 670px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>Group</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">key: string</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">type: string</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">folder: string</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">sub_keys: string[]</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">files: SourceFile[]</p></div></div></div></foreignObject><text x="670" y="669" fill="#333333" font-family="Helvetica" font-size="12px">Group...</text></switch></g><rect x="890" y="585" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 585px; margin-left: 890px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>SourceFile</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">name: string</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">file_name: string</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">file_name_only: string</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">file: string</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">target: TargetFile</p></div></div></div></foreignObject><text x="890" y="669" fill="#333333" font-family="Helvetica" font-size="12px">SourceFile...</text></switch></g><rect x="1110" y="585" width="200" height="160" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 202px; height: 160px; padding-top: 585px; margin-left: 1110px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 200px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin:0px;margin-left:4px;margin-bottom:4px;text-align:center"><b>TargetFile</b></p><hr size="1" /><p style="margin:0px;margin-left:4px;margin-bottom:4px">html_file: string</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">clean_html_file: string</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">tailwind_config_file: string</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">settings_file: string</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">data_file: string</p><p style="margin:0px;margin-left:4px;margin-bottom:4px">astro_file: string</p></div></div></div></foreignObject><text x="1110" y="669" fill="#333333" font-family="Helvetica" font-size="12px">TargetFile...</text></switch></g><path d="M 430 665 Q 430 665 447.76 665" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 441.88 668.5 L 448.88 665 L 441.88 661.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 650 665 Q 650 665 667.76 665" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 661.88 668.5 L 668.88 665 L 661.88 661.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 870 665 Q 870 665 887.76 665" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 881.88 668.5 L 888.88 665 L 881.88 661.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/><path d="M 1090 665 Q 1090 665 1107.76 665" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1101.88 668.5 L 1108.88 665 L 1101.88 661.5" fill="none" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>

data/lib/tailwind_dsl/etl/component_structures/generator.rb

@@ -20,73 +20,71 @@ module TailwindDsl
 
         # .gsub(/(\n\s*\n)+/, "\n")
         attr_reader :uikit
-        attr_reader :root_raw_component_path
-        attr_reader :root_target_path
+        attr_reader :source_root_path
+        attr_reader :target_root_path
         attr_reader :reset_root_path
 
-        def initialize(uikit, root_raw_component_path, root_target_path, reset_root_path: false)
+        def initialize(uikit, source_root_path, target_root_path, reset_root_path: false)
           @uikit = uikit
-          @root_raw_component_path = root_raw_component_path
-          @root_target_path = root_target_path
+          @source_root_path = source_root_path
+          @target_root_path = target_root_path
           @reset_root_path = reset_root_path
         end
 
         def generate
-          assert_root_target_path_exists
+          assert_target_root_path_exists
 
           delete_target_root_path if reset_root_path
 
-          uikit.design_systems.each do |design_system|
-            process_design_system(design_system)
-          end
+          @components = query_components
+
+          process_components
         end
 
         private
 
-        def assert_root_target_path_exists
-          raise 'Target path does not exist' unless Dir.exist?(root_target_path)
+        def assert_target_root_path_exists
+          raise 'Target path does not exist' unless Dir.exist?(target_root_path)
         end
 
         def delete_target_root_path
-          FileUtils.rm_rf(Dir.glob("#{root_target_path}/*"))
+          FileUtils.rm_rf(Dir.glob("#{target_root_path}/*"))
         end
 
-        def process_design_system(design_system)
-          design_system_name = design_system.name
-          design_system.groups.each do |group|
-            process_group(design_system_name, group)
-          end
+        def query_components
+          RawComponentQuery.query(uikit,
+                                  raw_component_root_path: source_root_path,
+                                  component_structure_root_path: target_root_path).records
         end
 
-        def process_group(design_system_name, group)
-          group.files.each do |file|
-            # puts "DSN: #{design_system_name}, GRP: #{group.type}, FILE: #{file.file}"
-            data = Data.new(design_system_name, group, file, root_raw_component_path)
-
-            unless data.source.exist?
-              puts "Source file does not exist: #{data.source.file}"
+        def process_components
+          @components.each do |component|
+            unless File.exist?(component.absolute_path.source_file)
+              puts "Source file does not exist: #{component.absolute_path.source_file}"
               next
             end
 
-            process_component(data)
+            # puts "DSN: #{component.design_system.name}, GRP: #{component.group.type}, FILE: #{component.relative_path.source_file}"
+
+            process_component(component)
           end
         end
 
-        def process_component(data)
+        def process_component(component)
           # Create a folder for the component
-          make_target_folder(data)
+          make_target_folder(component)
 
-          # Create a HTML file for each component
-          create_html_file(data)
+          # # Create a HTML file for each component
+          create_html_file(component)
 
-          # Create a clean HTML file for each component (comments removed)
-          create_clean_html_file(data)
+          # # Create a clean HTML file for each component (comments removed)
+          create_clean_html_file(component)
 
-          # Create a tailwind config file (if one exists) - look in first comment for the ``` ```
-          create_tailwind_config_file(data)
+          # # Create a tailwind config file (if one exists) - look in first comment for the ``` ```
+          create_tailwind_config_file(component)
 
-          # Create a settings file after extracting information from the HTML file
-          create_settings_file(data)
+          # # Create a settings file after extracting information from the HTML file
+          create_settings_file(component)
 
           # Build a menu of sources
           # see: https://tailwindui.com/components/application-ui/data-display/description-lists
@@ -104,42 +102,38 @@ module TailwindDsl
         #   Note that the data file is meant to represent the data in the raw component
         # Write an Astro file
 
-        def target_path(data)
-          File.join(root_target_path, data.design_system_name, data.target.folder)
-        end
-
-        def target_file(data, file)
-          File.join(root_target_path, data.design_system_name, file)
+        def target_path(component)
+          File.join(target_root_path, component.design_system.name, component.group.folder)
         end
 
-        def make_target_folder(data)
-          FileUtils.mkdir_p(target_path(data))
+        def make_target_folder(component)
+          FileUtils.mkdir_p(target_path(component))
         end
 
-        def create_html_file(data)
+        def create_html_file(component)
           # rules:
           # if the html file exists, then read the settings file, if the settings has html overwrite, then overwrite the html file
           # overwrite = true
-          FileUtils.cp_r(data.source.file, target_file(data, data.target.html_file), remove_destination: true) # if overwrite
+          FileUtils.cp_r(component.absolute_path.source_file, component.absolute_path.target_html_file, remove_destination: true) # if overwrite
         end
 
-        def create_clean_html_file(data)
-          html = data.source.content || ''
-          data.captured_comment_list = html.scan(COMMENT_REGEX)
-          data.captured_comment_text = data.captured_comment_list.join("\n")
+        def create_clean_html_file(component)
+          html = File.read(component.absolute_path.source_file) || ''
+          component.captured_comment_list = html.scan(COMMENT_REGEX)
+          component.captured_comment_text = component.captured_comment_list.join("\n")
 
           html = html.gsub(COMMENT_REGEX, '').gsub(BLANK_LINE_REGEX, "\n").lstrip
 
-          File.write(target_file(data, data.target.clean_html_file), html)
+          File.write(component.absolute_path.target_clean_html_file, html)
         end
 
-        def create_tailwind_config_file(data)
-          data.captured_tailwind_config = extract_tailwind_config(data)
+        def create_tailwind_config_file(component)
+          component.captured_tailwind_config = extract_tailwind_config(component)
 
-          File.write(target_file(data, data.target.tailwind_config_file), data.captured_tailwind_config) if data.captured_tailwind_config
+          File.write(component.absolute_path.target_tailwind_config_file, component.captured_tailwind_config) if component.captured_tailwind_config
         end
 
-        def create_settings_file(data)
+        def create_settings_file(component)
           # CUSTOM
           # templates/tailwind/tui/ecommerce/page/product-pages/02.html
           # templates/tailwind/tui/ecommerce/components/product-overviews/04.html
@@ -164,31 +158,31 @@ module TailwindDsl
           # templates/tailwind/tui/application-ui/page/home-screens/02.html
           # templates/tailwind/tui/application-ui/component/list/feed/03.html
           settings = {
-            source: extract_source(data),
+            source: extract_source(component),
             custom_html: {
-              html: data.captured_comment_text.match(/<html.*>/),
-              body: data.captured_comment_text.match(/<body.*>/)
+              html: component.captured_comment_text.match(/<html.*>/),
+              body: component.captured_comment_text.match(/<body.*>/)
             },
-            tailwind_config: tailwind_config_settings(data.captured_tailwind_config)
+            tailwind_config: tailwind_config_settings(component.captured_tailwind_config)
           }
 
-          File.write(target_file(data, data.target.settings_file), JSON.pretty_generate(settings))
+          File.write(component.absolute_path.target_settings_file, JSON.pretty_generate(settings))
         end
 
-        def extract_tailwind_config(data)
-          return nil if data.captured_comment_list.length.zero? || !data.captured_comment_list.first.include?('// tailwind.config.js')
+        def extract_tailwind_config(component)
+          return nil if component.captured_comment_list.length.zero? || !component.captured_comment_list.first.include?('// tailwind.config.js')
 
-          data.captured_comment_list.first.match(TAILWIND_CONFIG_REGEX)[:tailwind]
+          component.captured_comment_list.first.match(TAILWIND_CONFIG_REGEX)[:tailwind]
         end
 
-        def extract_source(data)
+        def extract_source(component)
           # In future I may be able to store the source in a comment in the HTML file
           # but at the moment all components are generally from TailwindUI and the source
           # URL can be inferred from the sub keys.
 
-          return "https://tailwindui.com/components/#{data.group.sub_keys.join('/')}" if data.design_system_name == 'tui'
+          return "https://tailwindui.com/components/#{component.group.sub_keys.join('/')}" if component.design_system.name == 'tui'
 
-          "##{data.design_system_name}/#{data.group.sub_keys.join('/')}"
+          "##{component.design_system.name}/#{component.group.sub_keys.join('/')}"
         end
 
         def tailwind_config_settings(raw_tailwind_config)

data/lib/tailwind_dsl/etl/component_structures/raw_component_query.rb

@@ -0,0 +1,174 @@
+# frozen_string_literal: true
+
+module TailwindDsl
+  module Etl
+    module ComponentStructures
+      # Raw Component Query will return a list of raw components that are available for processing
+      #
+      # This is a two pass process:
+      #  1. Query the raw component folder for all files that match the pattern and build up a graph with required information
+      #  2. Flatten the graph into a list of rows
+      #
+      # If you need to debug, then pass in the debug flag and it will output the graph to the console
+      class RawComponentQuery
+        DesignSystem = Struct.new(
+          :name,
+          :source_path,
+          :target_path,
+          keyword_init: true
+        )
+
+        Group = Struct.new(
+          :key,
+          :type,
+          :sub_keys,
+          :folder,
+          keyword_init: true
+        )
+        FilePath = Struct.new(
+          :source_file,
+          :target_html_file,
+          :target_clean_html_file,
+          :target_tailwind_config_file,
+          :target_settings_file,
+          :target_data_file,
+          :target_astro_file, keyword_init: true
+        )
+
+        class Record
+          attr_reader :design_system
+          attr_reader :group
+          attr_reader :absolute_path
+          attr_reader :relative_path
+
+          # Storage buckets for data that is extracted from the source file
+          attr_accessor :captured_comment_text
+          attr_accessor :captured_comment_list
+          attr_accessor :captured_tailwind_config
+
+          def initialize(design_system:, group:, absolute_path:, relative_path:)
+            @design_system = design_system
+            @group = group
+            @absolute_path = absolute_path
+            @relative_path = relative_path
+          end
+
+          def to_h
+            {
+              design_system: design_system.to_h,
+              group: group.to_h,
+              absolute_path: absolute_path.to_h,
+              relative_path: relative_path.to_h
+            }
+          end
+        end
+
+        attr_reader :uikit
+        attr_reader :raw_component_root_path
+        attr_reader :component_structure_root_path
+        attr_reader :current_design_system
+        attr_reader :debug
+        attr_reader :records
+
+        def initialize(uikit, **args)
+          @uikit = uikit
+          @raw_component_root_path = args[:raw_component_root_path] || raise(ArgumentError, 'Missing raw_component_root_path')
+          @component_structure_root_path = args[:component_structure_root_path] || raise(ArgumentError, 'Missing component_structure_root_path')
+          @debug = args[:debug] || false
+        end
+
+        class << self
+          def query(uikit, raw_component_root_path:, component_structure_root_path:, debug: false)
+            instance = new(uikit, raw_component_root_path: raw_component_root_path, component_structure_root_path: component_structure_root_path, debug: debug)
+            instance.call
+          end
+        end
+
+        def call
+          @records = build_records
+
+          self
+        end
+
+        # Flattened list of records in hash format
+        # @return [Array<Hash>] list
+        def to_h
+          records.map(&:to_h)
+        end
+
+        private
+
+        def build_records
+          uikit.design_systems.flat_map do |design_system|
+            @current_design_system = design_system
+            design_system.groups.flat_map do |group|
+              group.files.map do |file|
+                Record.new(
+                  design_system: DesignSystem.new(**map_design_system),
+                  group: Group.new(**map_group(group)),
+                  absolute_path: FilePath.new(**map_absolute_file(file)),
+                  relative_path: FilePath.new(**map_relative_file(file))
+                )
+              end
+            end
+          end
+        end
+
+        def design_system_name
+          current_design_system.name
+        end
+
+        def source_path
+          File.join(raw_component_root_path, design_system_name)
+        end
+
+        def target_path
+          File.join(component_structure_root_path, design_system_name)
+        end
+
+        def map_design_system
+          {
+            name: design_system_name,
+            source_path: source_path,
+            target_path: target_path
+          }
+        end
+
+        def map_group(group)
+          {
+            key: group.key,
+            type: group.type,
+            sub_keys: group.sub_keys,
+            folder: group.folder
+          }
+        end
+
+        def map_relative_file(file)
+          {
+            source_file: file.file,
+            target_html_file: file.target.html_file,
+            target_clean_html_file: file.target.clean_html_file,
+            target_tailwind_config_file: file.target.tailwind_config_file,
+            target_settings_file: file.target.settings_file,
+            target_data_file: file.target.data_file,
+            target_astro_file: file.target.astro_file
+          }
+        end
+
+        # rubocop:disable Metrics/AbcSize
+        def map_absolute_file(file)
+          {
+            source_file: File.join(source_path, file.file),
+            target_html_file: File.join(target_path, file.target.html_file),
+            target_clean_html_file: File.join(target_path, file.target.clean_html_file),
+            target_tailwind_config_file: File.join(target_path, file.target.tailwind_config_file),
+            target_settings_file: File.join(target_path, file.target.settings_file),
+            target_data_file: File.join(target_path, file.target.data_file),
+            target_astro_file: File.join(target_path, file.target.astro_file)
+          }
+        end
+        # rubocop:enable Metrics/AbcSize
+      end
+    end
+  end
+end

data/lib/tailwind_dsl/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TailwindDsl
-  VERSION = '0.0.10'
+  VERSION = '0.0.12'
 end

data/lib/tailwind_dsl.rb

@@ -15,7 +15,7 @@ require_relative 'tailwind_dsl/etl/raw_components/schema/group'
 require_relative 'tailwind_dsl/etl/raw_components/schema/design_system'
 require_relative 'tailwind_dsl/etl/raw_components/schema/uikit'
 
-require_relative 'tailwind_dsl/etl/component_structures/data'
+require_relative 'tailwind_dsl/etl/component_structures/raw_component_query'
 require_relative 'tailwind_dsl/etl/component_structures/generator'
 # require_relative 'tailwind_dsl/astro_demo/generate_astro_page_data'