tailwind_dsl 0.0.3 → 0.0.4

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="572px" viewBox="-0.5 -0.5 1322 572"><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></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="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>

data/docs/project-plan/project.drawio

@@ -1,31 +1,43 @@
-<mxfile host="l0Z">
-  <diagram id="pKS" name="In progress">
+<mxfile host="WH2">
+  <diagram id="Wyw" name="In progress">
     <mxGraphModel dx="0" dy="0" background="#FFFAFA" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
       <root>
-        <mxCell id="page_root_pKS" parent="pKS"/>
-        <mxCell id="node_root_pKS" parent="page_root_pKS"/>
-        <mxCell id="pKS-1" value="DrawIO DSL" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fontColor=#1F2D3D;text;fontSize=28;fontStyle=1;fillColor=none" vertex="1" parent="node_root_pKS">
+        <mxCell id="page_root_Wyw" parent="Wyw"/>
+        <mxCell id="node_root_Wyw" parent="page_root_Wyw"/>
+        <mxCell id="Wyw-1" value="DrawIO DSL" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fontColor=#1F2D3D;text;fontSize=28;fontStyle=1;fillColor=none" vertex="1" parent="node_root_Wyw">
           <mxGeometry x="300" y="0" width="400" height="80" as="geometry"/>
         </mxCell>
-        <mxCell id="pKS-3" value="build a or addapt the existing RubyDsl so that it can write classes and specs based on tailwind domain model" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#d5e8d4;strokeColor=#82b366;fontColor=#333333" vertex="1" parent="node_root_pKS">
+        <mxCell id="Wyw-3" value="use a domain model generator to build base classes and unit tests" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#d5e8d4;strokeColor=#82b366;fontColor=#333333" vertex="1" parent="node_root_Wyw">
           <mxGeometry x="10" y="10" width="300" height="60" as="geometry"/>
         </mxCell>
+        <mxCell id="Wyw-4" value="restart the application so that I can figure out the issues with RuboCop" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#d5e8d4;strokeColor=#82b366;fontColor=#333333" vertex="1" parent="node_root_Wyw">
+          <mxGeometry x="330" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="Wyw-5" value="build a sample DSL to test how this can be used" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#d5e8d4;strokeColor=#82b366;fontColor=#333333" vertex="1" parent="node_root_Wyw">
+          <mxGeometry x="650" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
       </root>
     </mxGraphModel>
   </diagram>
-  <diagram id="edq" name="To Do">
+  <diagram id="pnr" name="To Do">
     <mxGraphModel dx="0" dy="0" background="#FFFAFA" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
       <root>
-        <mxCell id="page_root_edq" parent="edq"/>
-        <mxCell id="node_root_edq" parent="page_root_edq"/>
+        <mxCell id="page_root_pnr" parent="pnr"/>
+        <mxCell id="node_root_pnr" parent="page_root_pnr"/>
       </root>
     </mxGraphModel>
   </diagram>
-  <diagram id="yCV" name="Done">
+  <diagram id="BM1" name="Done">
     <mxGraphModel dx="0" dy="0" background="#FFFAFA" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
       <root>
-        <mxCell id="page_root_yCV" parent="yCV"/>
-        <mxCell id="node_root_yCV" parent="page_root_yCV"/>
+        <mxCell id="page_root_BM1" parent="BM1"/>
+        <mxCell id="node_root_BM1" parent="page_root_BM1"/>
+        <mxCell id="BM1-2" value="build file reader for raw design system files" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_BM1">
+          <mxGeometry x="10" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="BM1-3" value="use the design system file reader to generate a component graph in ./builder/utilities.rb" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_BM1">
+          <mxGeometry x="330" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
       </root>
     </mxGraphModel>
   </diagram>

data/docs/project-plan/project_done.svg

@@ -0,0 +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="622px" height="62px" viewBox="-0.5 -0.5 622 62"><defs><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-ffffff-0.9-ffffff-0.1-s-0"><stop offset="0%" style="stop-color: rgb(255, 255, 255); stop-opacity: 0.9;"/><stop offset="100%" style="stop-color: rgb(255, 255, 255); stop-opacity: 0.1;"/></linearGradient></defs><g><rect x="0" y="0" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 10.15 -1 Q -1 -1 -1 10.15 L -1 24 Q 150 42 301 24 L 301 10.15 Q 301 -1 289.85 -1 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" 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 center; width: 298px; height: 1px; padding-top: 30px; margin-left: 1px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">build file reader for raw design system files</div></div></div></foreignObject><text x="150" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">build file reader for raw design system files</text></switch></g><rect x="320" y="0" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 330.15 -1 Q 319 -1 319 10.15 L 319 24 Q 470 42 621 24 L 621 10.15 Q 621 -1 609.85 -1 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" 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 center; width: 298px; height: 1px; padding-top: 30px; margin-left: 321px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">use the design system file reader to generate a component graph in ./builder/utilities.rb</div></div></div></foreignObject><text x="470" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">use the design system file reader to generate a co...</text></switch></g></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/docs/project-plan/project_in_progress.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="692px" height="82px" viewBox="-0.5 -0.5 692 82"><defs><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-ffffff-0.9-ffffff-0.1-s-0"><stop offset="0%" style="stop-color: rgb(255, 255, 255); stop-opacity: 0.9;"/><stop offset="100%" style="stop-color: rgb(255, 255, 255); stop-opacity: 0.1;"/></linearGradient></defs><g><rect x="290" y="0" width="400" height="80" rx="12" ry="12" fill="none" stroke="none" 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 flex-start; width: 398px; height: 1px; padding-top: 7px; margin-left: 292px;"><div data-drawio-colors="color: #1F2D3D; " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 28px; font-family: Helvetica; color: rgb(31, 45, 61); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">DrawIO DSL</div></div></div></foreignObject><text x="292" y="35" fill="#1F2D3D" font-family="Helvetica" font-size="28px" font-weight="bold">DrawIO DSL</text></switch></g><rect x="0" y="10" width="300" height="60" rx="9" ry="9" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><path d="M 10.15 9 Q -1 9 -1 20.15 L -1 34 Q 150 52 301 34 L 301 20.15 Q 301 9 289.85 9 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" 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 center; width: 298px; height: 1px; padding-top: 40px; margin-left: 1px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">build a or addapt the existing RubyDsl so that it can write classes and specs based on tailwind domain model</div></div></div></foreignObject><text x="150" y="44" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">build a or addapt the existing RubyDsl so that it...</text></switch></g></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="942px" height="82px" viewBox="-0.5 -0.5 942 82"><defs><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-ffffff-0.9-ffffff-0.1-s-0"><stop offset="0%" style="stop-color: rgb(255, 255, 255); stop-opacity: 0.9;"/><stop offset="100%" style="stop-color: rgb(255, 255, 255); stop-opacity: 0.1;"/></linearGradient></defs><g><rect x="290" y="0" width="400" height="80" rx="12" ry="12" fill="none" stroke="none" 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 flex-start; width: 398px; height: 1px; padding-top: 7px; margin-left: 292px;"><div data-drawio-colors="color: #1F2D3D; " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 28px; font-family: Helvetica; color: rgb(31, 45, 61); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">DrawIO DSL</div></div></div></foreignObject><text x="292" y="35" fill="#1F2D3D" font-family="Helvetica" font-size="28px" font-weight="bold">DrawIO DSL</text></switch></g><rect x="0" y="10" width="300" height="60" rx="9" ry="9" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><path d="M 10.15 9 Q -1 9 -1 20.15 L -1 34 Q 150 52 301 34 L 301 20.15 Q 301 9 289.85 9 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" 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 center; width: 298px; height: 1px; padding-top: 40px; margin-left: 1px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">use a domain model generator to build base classes and unit tests</div></div></div></foreignObject><text x="150" y="44" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">use a domain model generator to build base classes...</text></switch></g><rect x="320" y="10" width="300" height="60" rx="9" ry="9" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><path d="M 330.15 9 Q 319 9 319 20.15 L 319 34 Q 470 52 621 34 L 621 20.15 Q 621 9 609.85 9 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" 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 center; width: 298px; height: 1px; padding-top: 40px; margin-left: 321px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">restart the application so that I can figure out the issues with RuboCop</div></div></div></foreignObject><text x="470" y="44" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">restart the application so that I can figure out t...</text></switch></g><rect x="640" y="10" width="300" height="60" rx="9" ry="9" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><path d="M 650.15 9 Q 639 9 639 20.15 L 639 34 Q 790 52 941 34 L 941 20.15 Q 941 9 929.85 9 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" 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 center; width: 298px; height: 1px; padding-top: 40px; margin-left: 641px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">build a sample DSL to test how this can be used</div></div></div></foreignObject><text x="790" y="44" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">build a sample DSL to test how this can be used</text></switch></g></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/docs/project-plan/project_todo.svg

@@ -0,0 +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="302px" height="62px" viewBox="-0.5 -0.5 302 62"><defs><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-ffffff-0.9-ffffff-0.1-s-0"><stop offset="0%" style="stop-color: rgb(255, 255, 255); stop-opacity: 0.9;"/><stop offset="100%" style="stop-color: rgb(255, 255, 255); stop-opacity: 0.1;"/></linearGradient></defs><g><rect x="0" y="0" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 10.15 -1 Q -1 -1 -1 10.15 L -1 24 Q 150 42 301 24 L 301 10.15 Q 301 -1 289.85 -1 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" 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 center; width: 298px; height: 1px; padding-top: 30px; margin-left: 1px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">build file reader for raw design system files</div></div></div></foreignObject><text x="150" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">build file reader for raw design system files</text></switch></g></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/_.rb

@@ -1,13 +1,13 @@
 # frozen_string_literal: true
 
-require_relative 'tailwind_dsl/config/configuration'
-require_relative 'tailwind_dsl/config/collection'
-require_relative 'tailwind_dsl/config/theme'
-require_relative 'tailwind_dsl/config/component_group'
-require_relative 'tailwind_dsl/config/component'
-require_relative 'tailwind_dsl/data_shape'
-require_relative 'tailwind_dsl/schema/web_site'
-require_relative 'tailwind_dsl/schema/page'
-require_relative 'tailwind_dsl/schema/component'
-require_relative 'tailwind_dsl/tailwind_dsl'
-require_relative 'tailwind_dsl/base_data_builder'
+# require_relative 'tailwind_dsl/config/configuration'
+# require_relative 'tailwind_dsl/config/collection'
+# require_relative 'tailwind_dsl/config/theme'
+# require_relative 'tailwind_dsl/data_shape'
+# require_relative 'tailwind_dsl/config/component_group'
+# require_relative 'tailwind_dsl/config/component'
+# require_relative 'tailwind_dsl/schema/web_site'
+# require_relative 'tailwind_dsl/schema/page'
+# require_relative 'tailwind_dsl/schema/component'
+# require_relative 'tailwind_dsl/tailwind_dsl'
+# require_relative 'tailwind_dsl/base_data_builder'

data/lib/tailwind_dsl/astro_demo/generate_astro_page_data.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module TailwindDsl
+  module AstroDemo
+    # Generate Astro page data from the raw component data.
+    #
+    # This data will build the page data JSON that is used by Tailwind-Components website
+    class GenerateAstroPageData
+      def initialize
+        # do something
+      end
+    end
+  end
+end

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

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module TailwindDsl
+  module RawComponents
+    # -----------------------------------------------------------------------------------------------
+    # Internal Data Structure
+    class Data
+      attr_reader :design_system_name
+      attr_reader :group                    # Component group information
+      attr_reader :source                   # Source file information for the component
+      attr_reader :target                   # Multiple target file information
+
+      # 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
+
+      # rubocop:disable Metrics/AbcSize
+      def initialize(design_system_name, group, file)
+        @design_system_name = design_system_name
+
+        @captured_comment_text = ''
+        @captured_comment_list = []
+        @captured_tailwind_config = ''
+
+        @group = Group.new(**group.slice(:key, :type, :sub_keys))
+        @source = Source.new(file: file[:absolute_file])
+        @target = Target.new(
+          folder: group[:folder],
+          html_file: file[:target][:html_file],
+          clean_html_file: file[:target][:clean_html_file],
+          tailwind_config_file: file[:target][:tailwind_config_file],
+          settings_file: file[:target][:settings_file],
+          data_file: file[:target][:data_file],
+          astro_file: file[:target][:astro_file]
+        )
+      end
+      # rubocop:enable Metrics/AbcSize
+
+      Group = Struct.new(:key, :type, :sub_keys, keyword_init: true)
+      Source = Struct.new(:file, keyword_init: true) do
+        def exist?
+          File.exist?(file)
+        end
+
+        def content
+          @content ||= File.exist?(file) ? File.read(file) : ''
+        end
+      end
+      Target = Struct.new(:folder, :html_file, :clean_html_file, :tailwind_config_file, :settings_file, :data_file, :astro_file, keyword_init: true)
+    end
+  end
+end

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

@@ -0,0 +1,206 @@
+# frozen_string_literal: true
+
+module TailwindDsl
+  module Etl
+    module ComponentStructures
+      # Generate component structures such as HTML, Astro, and data shapes, settings, tailwind config as
+      # individual files from the raw component data.
+      #
+      # By default this will just refresh the files on the system, in future it might have some smarts around
+      # what to update, but for now it is all files.
+      #
+      # Some times you need to reset the data, ie. delete the contents of the target folder, this happens when
+      # you change the structure of the source input files. This is a destructive operation, so be warned.
+      #
+      # To execute this you need to pass reset_root_path: true
+      class Transformer
+        COMMENT_REGEX = /<!--[\s\S]*?-->/.freeze
+        BLANK_LINE_REGEX = /(\n\s*\n)+/.freeze
+        TAILWIND_CONFIG_REGEX = /```(?<tailwind>\n[\s\S]+?)```/.freeze
+
+        # .gsub(/(\n\s*\n)+/, "\n")
+        attr_reader :uikit
+        attr_reader :root_target_path
+        attr_reader :reset_root_path
+
+        def initialize(uikit, root_target_path, reset_root_path: false)
+          @uikit = uikit
+          @root_target_path = root_target_path
+          @reset_root_path = reset_root_path
+        end
+
+        def generate
+          assert_root_target_path_exists
+
+          delete_target_root_path if reset_root_path
+
+          uikit.design_systems.each do |name, design_system|
+            process_design_system(name, design_system)
+          end
+        end
+
+        private
+
+        def assert_root_target_path_exists
+          raise 'Target path does not exist' unless Dir.exist?(root_target_path)
+        end
+
+        def delete_target_root_path
+          FileUtils.rm_rf(Dir.glob("#{root_target_path}/*"))
+        end
+
+        def process_design_system(design_system_name, design_system)
+          design_system[:groups].each do |group|
+            process_group(design_system_name, group)
+          end
+        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)
+
+            unless data.source.exist?
+              puts "Source file does not exist: #{data.source.file}"
+              next
+            end
+
+            process_component(data)
+          end
+        end
+
+        def process_component(data)
+          # Create a folder for the component
+          make_target_folder(data)
+
+          # Create a HTML file for each component
+          create_html_file(data)
+
+          # Create a clean HTML file for each component (comments removed)
+          create_clean_html_file(data)
+
+          # Create a tailwind config file (if one exists) - look in first comment for the ``` ```
+          create_tailwind_config_file(data)
+
+          # Create a settings file after extracting information from the HTML file
+          create_settings_file(data)
+
+          # Build a menu of sources
+          # see: https://tailwindui.com/components/application-ui/data-display/description-lists
+
+          # Create a data file
+
+          # Create an Astro file
+          # Create an HTML file
+          # Create a HTML file without tailwind config comment, but keep (DATA ONLY) comments
+        end
+
+        # Write a settings file
+        #   Record the source of the component
+        # Write a data file
+        #   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)
+        end
+
+        def make_target_folder(data)
+          FileUtils.mkdir_p(target_path(data))
+        end
+
+        def create_html_file(data)
+          # 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
+        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")
+
+          html = html.gsub(COMMENT_REGEX, '').gsub(BLANK_LINE_REGEX, "\n").lstrip
+
+          File.write(target_file(data, data.target.clean_html_file), html)
+        end
+
+        def create_tailwind_config_file(data)
+          data.captured_tailwind_config = extract_tailwind_config(data)
+
+          File.write(target_file(data, data.target.tailwind_config_file), data.captured_tailwind_config) if data.captured_tailwind_config
+        end
+
+        def create_settings_file(data)
+          # CUSTOM
+          # templates/tailwind/tui/ecommerce/page/product-pages/02.html
+          # templates/tailwind/tui/ecommerce/components/product-overviews/04.html
+          # templates/tailwind/tui/marketing/page/pricing/01.html
+          # templates/tailwind/tui/marketing/page/pricing/04.html
+          # templates/tailwind/tui/marketing/page/pricing/05.html
+          # templates/tailwind/tui/marketing/page/contact/01.html
+          # templates/tailwind/tui/marketing/page/contact/04.html
+          # templates/tailwind/tui/marketing/page/contact/02.html
+          # templates/tailwind/tui/marketing/page/contact/03.html
+          # templates/tailwind/tui/marketing/page/landing/02.html
+          # templates/tailwind/tui/marketing/page/landing/03.html
+          # templates/tailwind/tui/application-ui/page/settings-screens/01.html
+          # templates/tailwind/tui/application-ui/page/settings-screens/04.html
+          # templates/tailwind/tui/application-ui/page/settings-screens/05.html
+          # templates/tailwind/tui/application-ui/page/settings-screens/02.html
+          # templates/tailwind/tui/application-ui/page/detail-screens/04.html
+          # templates/tailwind/tui/application-ui/page/detail-screens/03.html
+          # templates/tailwind/tui/application-ui/page/detail-screens/03.html
+          # templates/tailwind/tui/application-ui/page/home-screens/04.html
+          # templates/tailwind/tui/application-ui/page/home-screens/05.html
+          # 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),
+            custom_html: {
+              html: data.captured_comment_text.match(/<html.*>/),
+              body: data.captured_comment_text.match(/<body.*>/)
+            },
+            tailwind_config: tailwind_config_settings(data.captured_tailwind_config)
+          }
+
+          File.write(target_file(data, data.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')
+
+          data.captured_comment_list.first.match(TAILWIND_CONFIG_REGEX)[:tailwind]
+        end
+
+        def extract_source(data)
+          # 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'
+
+          "##{data.design_system_name}/#{data.group.sub_keys.join('/')}"
+        end
+
+        def tailwind_config_settings(raw_tailwind_config)
+          return {} unless raw_tailwind_config
+
+          {
+            plugins: {
+              forms: raw_tailwind_config.include?("require('@tailwindcss/forms')"),
+              aspect_ratio: raw_tailwind_config.include?("require('@tailwindcss/aspect-ratio')"),
+              line_clamp: raw_tailwind_config.include?("require('@tailwindcss/line-clamp')"),
+              typography: raw_tailwind_config.include?("require('@tailwindcss/typography')")
+            }
+          }
+        end
+      end
+    end
+  end
+end