{ "id": "c2276d6621338", "name": "module", "version": "0.0.3", "children": [ { "label": "Right Gutter", "is": "div", "style": { "width": "250px", "flex-shrink": "0", "display": "flex", "flex-direction": "column", "height": "100vh" }, "attributes": {}, "id": "8b8bbe2c724435", "name": "component", "children": [ { "id": "e83bcac1724101", "variant": [], "is": "e83bcac1717377", "name": "component-instance", "attributes": {}, "style": { "font-family": "Helvetica", "display": "none", "flex-direction": "column", "border-bottom": "1px solid rgba(0,0,0,0.05)", "font-size": "10px", "color": "grey", "background": "rgba(0,0,0,0.05)", "flex-shrink": "0" }, "children": [ { "id": "794dcb6914177", "propertyName": "style", "targetIdPath": [ "b6c162d140" ], "value": {}, "name": "override", "children": [] }, { "id": "2b3a6c6d38884", "propertyName": "text", "targetIdPath": [ "e83bcac1717373", "8b8bbe2c15267" ], "value": "variant 3", "name": "override", "children": [] }, { "id": "5b95850823754", "propertyName": "style", "targetIdPath": [ "e83bcac1717373", "8b8bbe2c15266" ], "value": {}, "name": "override", "children": [] }, { "id": "fd77a0a797492", "propertyName": "text", "targetIdPath": [ "b6c162d1281" ], "value": "Component 1 Variants", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": 83, "top": 679, "right": 287, "bottom": 777.3571410945103 } } }, { "id": "2b3a6c6d1159", "label": "Tabs", "is": "div", "name": "element", "attributes": {}, "style": { "display": "none", "flex-shrink": "0" }, "children": [ { "id": "2b3a6c6d2278", "variant": [], "is": "5d7d4069129476", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "2b3a6c6d37742", "propertyName": "text", "targetIdPath": [ "5d7d4069129475" ], "value": "style", "name": "override", "children": [] }, { "id": "decafdc71418", "label": "Element", "is": "div", "name": "element", "attributes": {}, "style": { "display": "flex", "align-items": "center" }, "children": [ { "id": "decafdc72790", "name": "text", "label": "Text", "value": "Styles", "style": { "width": "100%" }, "children": [], "metadata": {} }, { "id": "b117fdbf37038", "label": "Element", "is": "div", "name": "element", "attributes": {}, "style": { "text-align": "right", "align-items": "center", "float": "right", "flex-shrink": "0", "display": "none" }, "children": [ { "id": "b117fdbf42334", "variant": [], "is": "38fc2a477419", "name": "component-instance", "attributes": {}, "style": { "height": "12px", "display": "inline-block", "margin-right": "8px" }, "children": [], "metadata": {} }, { "id": "b117fdbf43662", "variant": [], "is": "38fc2a474961", "name": "component-instance", "attributes": {}, "style": { "height": "12px", "display": "inline-block", "opacity": "0.3", "margin-right": "4px" }, "children": [], "metadata": {} } ], "metadata": { "bounds": { "left": 358.30681895013436, "top": 0.9941336943762735, "right": 458.30681895013436, "bottom": 100.99413369437627 } } } ], "metadata": {} } ], "metadata": { "bounds": { "left": -574.2679967438798, "top": 532.610825819163, "right": -474.26799674387985, "bottom": 632.610825819163 } } }, { "id": "2b3a6c6d2656", "variant": [], "is": "5d7d4069129476", "name": "component-instance", "attributes": {}, "style": { "font-family": "Helvetica", "color": "grey", "text-transform": "uppercase", "text-align": "center", "width": "100%", "padding": "8px", "background": "rgba(0,0,0,0.05)" }, "children": [ { "id": "2b3a6c6d37365", "propertyName": "text", "targetIdPath": [ "5d7d4069129475" ], "value": "attributes", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": -574.2679967438798, "top": 532.610825819163, "right": -474.26799674387985, "bottom": 632.610825819163 } } } ], "metadata": { "bounds": { "left": -462.73789354737085, "top": 621.2250662410207, "right": -362.73789354737085, "bottom": 721.2250662410207 } } }, { "id": "8b8bbe2c724433", "label": "Content", "is": "div", "name": "element", "attributes": {}, "style": { "overflow": "scroll", "height": "100%" }, "children": [ { "id": "9208d19596001", "variant": [], "is": "9208d19593983", "name": "component-instance", "attributes": {}, "style": {}, "children": [], "metadata": {}, "label": "Properties" }, { "id": "8b8bbe2c724434", "variant": [], "is": "2399b467", "name": "component-instance", "attributes": {}, "style": { "flex-direction": "column", "color": "#666" }, "children": [ { "id": "5b9585081289", "propertyName": "style", "targetIdPath": [ "9e4a45489816", "9e4a454812261", "9e4a454812259" ], "value": {}, "name": "override", "children": [] }, { "id": "b117fdbf317283", "propertyName": "style", "targetIdPath": [ "73b39db4591", "b117fdbf315949" ], "value": { "height": "12px", "float": "right" }, "name": "override", "children": [] }, { "id": "8e601d2b27110", "propertyName": "style", "targetIdPath": [ "bcda9fb5100610", "8e601d2b25755" ], "value": { "height": "16px", "position": "absolute", "right": "0" }, "name": "override", "children": [] }, { "id": "ceb14a4f483", "propertyName": "style", "targetIdPath": [ "decafdc7517269", "b6c162d140" ], "value": {}, "name": "override", "children": [] }, { "id": "c123fadc517", "propertyName": "style", "targetIdPath": [ "af2a67c2930", "b6c162d132" ], "value": {}, "name": "override", "children": [] }, { "id": "7c3f9323978", "propertyName": "style", "targetIdPath": [ "73b39db4591", "b6c162d140" ], "value": { "padding-bottom": "8px" }, "name": "override", "children": [] }, { "id": "a42cfca037047", "propertyName": "style", "targetIdPath": [ "af2a67c2930", "5d7d40697379", "fe15cadb58136", "7149f81937818" ], "value": {}, "name": "override", "children": [] }, { "id": "a42cfca038988", "propertyName": "style", "targetIdPath": [ "73b39db4401", "647e59ac5706", "647e59ac5707" ], "value": {}, "name": "override", "children": [] }, { "id": "a42cfca075849", "propertyName": "style", "targetIdPath": [ "73b39db4401", "647e59ac5706" ], "value": { "margin-bottom": "0" }, "name": "override", "children": [] }, { "id": "a42cfca0188372", "propertyName": "style", "targetIdPath": [ "af2a67c2930", "b6c162d140" ], "value": { "padding-bottom": "8px" }, "name": "override", "children": [] }, { "id": "a42cfca0190313", "propertyName": "style", "targetIdPath": [ "bcda9fb5100610", "b6c162d140" ], "value": { "padding-bottom": "8px" }, "name": "override", "children": [] }, { "id": "a42cfca0192254", "propertyName": "style", "targetIdPath": [ "bcda9fb5100963", "b6c162d140" ], "value": { "padding-bottom": "8px" }, "name": "override", "children": [] }, { "id": "97a4657148658", "propertyName": "style", "targetIdPath": [ "af2a67c2930" ], "value": { "display": "none" }, "name": "override", "children": [] }, { "id": "c0b66eff756", "propertyName": "style", "targetIdPath": [ "bcda9fb5101747" ], "value": { "display": "none" }, "name": "override", "children": [] } ], "metadata": { "bounds": { "left": -84, "top": 509, "right": 165, "bottom": 1481.8895764112922 } }, "label": "Styler" }, { "id": "76b155a0729336", "variant": [], "is": "76b155a0727421", "name": "component-instance", "attributes": {}, "style": { "margin-top": "16px", "display": "none" }, "children": [], "metadata": {} } ], "metadata": { "bounds": { "left": -501.92761920474743, "top": 443.5389744450359, "right": -401.92761920474743, "bottom": 543.5389744450358 } } } ], "metadata": { "bounds": { "left": 368.2438030763085, "top": 76, "right": 668, "bottom": 1535.8975564891314 } }, "controllers": [ "./controller.tsx" ] }, { "label": "Right Gutter Tab", "is": "div", "style": { "font-family": "Helvetica", "color": "grey", "text-transform": "uppercase", "text-align": "center", "width": "100%", "padding": "8px", "font-size": "9px" }, "attributes": {}, "id": "5d7d4069129476", "name": "component", "children": [ { "id": "5d7d4069129475", "name": "text", "label": "Text", "value": "tab", "style": { "font-size": "0.9em" }, "children": [], "metadata": {} } ], "metadata": { "bounds": { "left": 228, "top": 183, "right": 344, "bottom": 205.41000330706493 } } }, { "label": "Table", "is": "div", "style": { "font-family": "Helvetica", "color": "grey" }, "attributes": {}, "id": "76b155a060835", "name": "component", "children": [ { "id": "76b155a066470", "label": "Title", "is": "div", "name": "element", "attributes": {}, "style": { "padding": "4px 6px", "background": "rgba(0,0,0,0.05)" }, "children": [ { "id": "76b155a070229", "name": "text", "label": "Text", "value": "element", "style": {}, "children": [], "metadata": {} } ], "metadata": {} }, { "id": "76b155a077750", "label": "Content", "is": "div", "name": "element", "attributes": {}, "style": {}, "children": [ { "id": "76b155a0186866", "variant": [], "is": "76b155a0186865", "name": "component-instance", "attributes": {}, "style": {}, "children": [], "metadata": {} }, { "id": "76b155a0478594", "variant": [], "is": "76b155a0363014", "name": "component-instance", "attributes": {}, "style": {}, "children": [], "metadata": {} }, { "id": "76b155a0196288", "variant": [], "is": "76b155a0186865", "name": "component-instance", "attributes": {}, "style": {}, "children": [], "metadata": {} }, { "id": "76b155a0476702", "variant": [], "is": "76b155a0363014", "name": "component-instance", "attributes": {}, "style": {}, "children": [], "metadata": {} }, { "id": "76b155a0198175", "variant": [], "is": "76b155a0186865", "name": "component-instance", "attributes": {}, "style": {}, "children": [], "metadata": {} }, { "id": "76b155a0480488", "variant": [], "is": "76b155a0363014", "name": "component-instance", "attributes": {}, "style": {}, "children": [], "metadata": {} } ], "metadata": {} }, { "id": "76b155a0706279", "variant": [], "is": "76b155a0363014", "name": "component-instance", "attributes": {}, "style": {}, "children": [], "metadata": {} } ], "metadata": { "bounds": { "left": 787, "top": 117, "right": 1020.6103090839924, "bottom": 327.2848489676319 } } }, { "label": "row", "is": "div", "style": { "font-family": "Helvetica", "color": "grey", "padding": "4px 6px" }, "attributes": {}, "id": "76b155a0186865", "name": "component", "children": [ { "id": "76b155a0205727", "name": "text", "label": "Text", "value": "item", "style": {}, "children": [], "metadata": {} } ], "metadata": { "bounds": { "left": 1050, "top": 107, "right": 1249, "bottom": 157 } } }, { "label": "row alt", "is": "76b155a0186865", "style": { "font-family": "Helvetica", "color": "grey", "background": "rgba(0,0,0,0.01)" }, "attributes": {}, "id": "76b155a0363014", "name": "component", "children": [], "metadata": { "bounds": { "left": 1056, "top": 189, "right": 1255, "bottom": 239 } } }, { "label": "Element", "is": "div", "style": { "margin-top": "16px" }, "attributes": {}, "id": "76b155a0727421", "name": "component", "children": [ { "id": "76b155a0727411", "variant": [], "is": "76b155a060835", "name": "component-instance", "attributes": {}, "style": { "font-family": "Helvetica", "color": "grey" }, "children": [ { "id": "76b155a0727412", "propertyName": "text", "targetIdPath": [ "76b155a070229" ], "value": "current", "name": "override", "children": [] }, { "id": "76b155a0727413", "propertyName": "children", "targetIdPath": [ "76b155a077750" ], "name": "override", "children": [ { "id": "76b155a0727414", "variant": [], "is": "76b155a0186865", "name": "component-instance", "attributes": {}, "style": {}, "children": [], "metadata": {} } ], "metadata": {} }, { "id": "76b155a0727415", "propertyName": "text", "targetIdPath": [ "76b155a0706279", "76b155a0205727" ], "value": "item2", "name": "override", "children": [] }, { "id": "76b155a0776089", "propertyName": "style", "targetIdPath": [ "76b155a066470" ], "value": { "display": "non" }, "name": "override", "children": [] } ], "metadata": {} }, { "id": "76b155a0727416", "variant": [], "is": "76b155a060835", "name": "component-instance", "attributes": {}, "style": { "font-family": "Helvetica", "color": "grey" }, "children": [ { "id": "76b155a0727417", "propertyName": "text", "targetIdPath": [ "76b155a070229" ], "value": "parent component style", "name": "override", "children": [] }, { "id": "76b155a0727418", "propertyName": "children", "targetIdPath": [ "76b155a077750" ], "name": "override", "children": [ { "id": "76b155a0727419", "variant": [], "is": "76b155a0186865", "name": "component-instance", "attributes": {}, "style": {}, "children": [], "metadata": {} } ], "metadata": {} }, { "id": "76b155a0727420", "propertyName": "text", "targetIdPath": [ "76b155a0706279", "76b155a0205727" ], "value": "item2", "name": "override", "children": [] } ], "metadata": {} } ], "metadata": { "bounds": { "left": 788.2493240412458, "top": 371.12235895233323, "right": 1187.8216572455806, "bottom": 601.7868872648622 } } }, { "id": "9b7b527f58489", "variant": [], "is": "97a34b151010442", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "9b7b527f58490", "propertyName": "children", "targetIdPath": [ "97a34b151010440" ], "name": "override", "children": [ { "id": "9b7b527f58491", "label": "Element", "is": "ul", "name": "element", "attributes": {}, "style": {}, "children": [ { "id": "9b7b527f58492", "label": "Element", "is": "li", "name": "element", "attributes": {}, "style": {}, "children": [ { "id": "9b7b527f58493", "name": "text", "label": "Text", "value": "[Components] bindings UI for compiling", "style": {}, "children": [], "metadata": {} } ], "metadata": {} }, { "id": "9b7b527f86185", "label": "Element", "is": "li", "name": "element", "attributes": {}, "style": {}, "children": [ { "id": "9b7b527f86186", "name": "text", "label": "Text", "value": "[Content node] frame sizing (mobile, web, etc)", "style": {}, "children": [], "metadata": {} } ], "metadata": {} } ], "metadata": {} } ], "metadata": {} }, { "id": "9b7b527f58494", "propertyName": "text", "targetIdPath": [ "97a34b151010439" ], "value": " ", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": -123, "top": 158, "right": 170.65422704948787, "bottom": 358.7213373757045 } }, "label": "TODO" }, { "label": "Drawer", "is": "div", "style": {}, "attributes": {}, "id": "63257bfd4943", "name": "component", "children": [ { "id": "63257bfd32988", "variant": [], "is": "b6c162d113", "name": "component-instance", "attributes": {}, "style": { "height": "100%" }, "children": [ { "id": "63257bfd49032", "propertyName": "text", "targetIdPath": [ "b6c162d1281" ], "value": "drawer", "name": "override", "children": [] }, { "id": "63257bfd85132", "propertyName": "text", "targetIdPath": [ "6fd27ae1495" ], "value": "t", "name": "override", "children": [] }, { "id": "63257bfd97167", "propertyName": "children", "targetIdPath": [ "b6c162d140" ], "name": "override", "children": [ { "id": "63257bfd101179", "variant": [], "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "63257bfd101180", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Display", "name": "override", "children": [] }, { "id": "63257bfd101181", "propertyName": "children", "targetIdPath": [ "7149f81937818" ], "name": "override", "children": [ { "id": "63257bfd101182", "variant": [], "is": "50e32bec2591", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "63257bfd101183", "propertyName": "text", "targetIdPath": [ "67e386c7935" ], "value": "inline-block", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": 18, "top": 339, "right": 218.8212880775559, "bottom": 439 } }, "label": "Display Input" } ], "metadata": {} } ], "metadata": {} } ], "metadata": {} }, { "id": "63257bfd121486", "propertyName": "children", "targetIdPath": [ "b6c162d132" ], "name": "override", "children": [ { "id": "63257bfd121485", "label": "Element", "is": "div", "name": "element", "attributes": {}, "style": { "display": "block" }, "children": [ { "id": "63257bfd125547", "name": "text", "label": "Text", "value": "drawer", "style": {}, "children": [], "metadata": {} }, { "id": "63257bfd198648", "name": "text", "label": "Close Button", "value": "×", "style": { "float": "right", "cursor": "button" }, "children": [], "metadata": {} } ], "metadata": {} } ], "metadata": {} } ], "metadata": { "bounds": { "left": 331, "top": 199, "right": 535, "bottom": 297.3571410945104 } } } ], "metadata": { "bounds": { "left": 122.90514277469708, "top": 384, "right": 368, "bottom": 608.6589618414574 } } } ], "metadata": {} }