{ "id": "e165e1fb1437", "version": "0.0.6", "metadata": {}, "name": "module", "children": [ { "label": "Layout", "is": "b6c162d113", "style": { "display": "flex" }, "attributes": {}, "id": "73b39db4544", "name": "component", "children": [ { "id": "73b39db4541", "propertyName": "text", "targetIdPath": [ "b6c162d1281" ], "value": "Layout", "name": "override", "children": [], "metadata": {} }, { "id": "bcda9fb581807", "propertyName": "style", "targetIdPath": [ "b6c162d132" ], "value": { "border-to": "1px solid rgba(0,0,0,0.05)" }, "name": "override", "children": [] }, { "slotId": "d6261ad53069", "id": "e73029b41338", "children": [ { "id": "b117fdbf271909", "label": "Element", "is": "div", "name": "element", "attributes": {}, "style": { "position": "relative" }, "children": [ { "id": "b117fdbf273238", "name": "text", "label": "Text", "value": "layout", "style": {}, "children": [], "metadata": {}, "styleMixins": { "dc3b39eb1627": { "priority": 2 } } }, { "id": "b117fdbf315949", "variant": {}, "is": "38fc2a473732", "name": "component-instance", "attributes": {}, "style": { "user-select": "none", "height": "16px", "position": "absolute", "right": "0", "opacity": "0.6", "display": "none" }, "children": [], "metadata": {} } ], "metadata": {} } ], "metadata": {}, "name": "plug" }, { "slotId": "d6261ad52883", "id": "e73029b42675", "children": [ { "id": "80232641803", "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "slotId": "e73029b416045", "id": "74a0e29115699", "children": [ { "id": "74a0e29115698", "is": "d2bdce074664", "label": "display input", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "74a0e29116752", "variantId": null, "propertyName": "text", "targetIdPath": [ "67e386c7935" ], "value": "Flex", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": 779, "top": 247, "right": 980, "bottom": 334.77512727534497 } }, "variant": {} } ], "metadata": {}, "name": "plug" }, { "id": "74a0e29124117", "variantId": null, "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Display", "name": "override", "children": [] }, { "id": "74a0e29131482", "variantId": null, "propertyName": "text", "targetIdPath": [ "38fc2a4724622" ], "value": "Display", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": 0, "top": 424, "right": 278.36714911702734, "bottom": 597.5183718636592 } }, "variant": {} }, { "id": "6b3dde2e16265", "variant": {}, "is": "div", "name": "element", "attributes": {}, "style": { "display": "flex", "align-items": "center", "width": "100%", "box-sizing": "border-box", "flex-direction": "column" }, "children": [ { "id": "6b3dde2e16266", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "6b3dde2e16267", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Direction", "name": "override", "children": [] }, { "id": "6b3dde2e16268", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": {}, "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "6b3dde2e16269", "children": [ { "id": "6b3dde2e16270", "variant": {}, "is": "d2bdce074664", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "bc1e07091610", "variantId": null, "propertyName": "text", "targetIdPath": [ "67e386c7935" ], "value": "row\n", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": 18, "top": 339, "right": 218.8212880775559, "bottom": 439 } }, "label": "flex direction input" } ], "metadata": {}, "name": "plug" } ], "metadata": { "bounds": { "left": -282, "top": 523, "right": -44, "bottom": 558 } }, "label": "" }, { "id": "6b3dde2e16272", "variant": {}, "is": "div", "name": "element", "attributes": {}, "style": { "display": "flex", "align-items": "center", "width": "100%", "box-sizing": "border-box" }, "children": [ { "id": "6b3dde2e16273", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": { "width": "100%", "flex": "1", "margin-right": "6px" }, "children": [ { "id": "6b3dde2e16274", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Wrap", "name": "override", "children": [] }, { "id": "6b3dde2e16275", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": {}, "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "6b3dde2e16276", "children": [ { "id": "6b3dde2e16277", "variant": {}, "is": "d2bdce074664", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "bc1e07095587", "variantId": null, "propertyName": "text", "targetIdPath": [ "67e386c7935" ], "value": "nowrap", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": 18, "top": 339, "right": 218.8212880775559, "bottom": 439 } }, "label": "flex wrap input" } ], "metadata": {}, "name": "plug" } ], "metadata": { "bounds": { "left": -282, "top": 523, "right": -44, "bottom": 558 } } }, { "id": "6b3dde2e16279", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "6b3dde2e16280", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Justify Content", "name": "override", "children": [] }, { "id": "6b3dde2e16281", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": {}, "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "6b3dde2e16282", "children": [ { "id": "6b3dde2e16283", "variant": {}, "is": "d2bdce074664", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "bc1e070915141", "variantId": null, "propertyName": "text", "targetIdPath": [ "67e386c7935" ], "value": "flex-start", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": 18, "top": 339, "right": 218.8212880775559, "bottom": 439 } }, "label": "Justify content input" } ], "metadata": {}, "name": "plug" } ], "metadata": { "bounds": { "left": -282, "top": 523, "right": -44, "bottom": 558 } } } ], "metadata": { "bounds": { "left": 1306, "top": 286, "right": 1591.4162789760067, "bottom": 404.00426347733935 } } }, { "id": "6b3dde2e16285", "variant": {}, "is": "div", "name": "element", "attributes": {}, "style": { "display": "flex", "align-items": "center", "width": "100%", "box-sizing": "border-box" }, "children": [ { "id": "6b3dde2e16286", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": { "width": "100%", "flex": "1", "margin-right": "6px" }, "children": [ { "id": "6b3dde2e16287", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Align Items", "name": "override", "children": [] }, { "id": "6b3dde2e16288", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": {}, "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "6b3dde2e16289", "children": [ { "id": "6b3dde2e16290", "variant": {}, "is": "d2bdce074664", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "bc1e070926303", "variantId": null, "propertyName": "text", "targetIdPath": [ "67e386c7935" ], "value": "flex-end", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": 18, "top": 339, "right": 218.8212880775559, "bottom": 439 } }, "label": "align items input" } ], "metadata": {}, "name": "plug" } ], "metadata": { "bounds": { "left": -282, "top": 523, "right": -44, "bottom": 558 } } }, { "id": "6b3dde2e16292", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "6b3dde2e16293", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Align Content", "name": "override", "children": [] }, { "id": "6b3dde2e16294", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": {}, "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "6b3dde2e16295", "children": [ { "id": "6b3dde2e16296", "variant": {}, "is": "d2bdce074664", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "aeee74e012479", "variantId": null, "propertyName": "text", "targetIdPath": [ "67e386c7935" ], "value": "center", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": 18, "top": 339, "right": 218.8212880775559, "bottom": 439 } }, "label": "align content input" } ], "metadata": {}, "name": "plug" } ], "metadata": { "bounds": { "left": -282, "top": 523, "right": -44, "bottom": 558 } } } ], "metadata": { "bounds": { "left": 1306, "top": 286, "right": 1591.4162789760067, "bottom": 404.00426347733935 } } } ], "metadata": { "bounds": { "left": 1306, "top": 286, "right": 1591.4162789760067, "bottom": 404.00426347733935 } }, "label": "parent flexbox controls" }, { "id": "6b3dde2e1306", "variant": {}, "is": "div", "name": "element", "attributes": {}, "style": { "display": "flex", "align-items": "center", "width": "100%", "box-sizing": "border-box", "flex-direction": "column" }, "children": [ { "id": "5da9f61b148419", "variant": {}, "is": "div", "name": "element", "attributes": {}, "style": { "display": "flex", "align-items": "center", "width": "100%", "box-sizing": "border-box" }, "children": [ { "id": "5da9f61b148420", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": { "width": "100%", "flex": "1", "margin-right": "6px" }, "children": [ { "id": "5da9f61b148421", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Basis", "name": "override", "children": [] }, { "id": "5da9f61b148423", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": { "left": "opacity" }, "name": "override", "children": [] }, { "id": "5da9f61b148424", "propertyName": "text", "targetIdPath": [ "7149f8199969", "7149f8199121" ], "value": "5px", "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "89a7d9283885", "children": [ { "id": "a329dd6d19803", "is": "a329dd6d16879", "name": "component-instance", "attributes": { "placeholder": "0" }, "style": {}, "children": [], "metadata": { "bounds": { "left": 783.484050288946, "top": 164.5285555122662, "right": 883.484050288946, "bottom": 193.56436427116807 } }, "variant": {}, "label": "flex basis input" } ], "metadata": {}, "name": "plug" } ], "metadata": {}, "label": "" }, { "id": "5da9f61b148426", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": { "width": "100%", "flex": "1", "margin-right": "6px" }, "children": [ { "id": "5da9f61b148427", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Grow", "name": "override", "children": [] }, { "id": "5da9f61b148429", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": {}, "name": "override", "children": [] }, { "id": "5da9f61b148430", "propertyName": "text", "targetIdPath": [ "7149f8199969", "7149f8199121" ], "value": "0px", "name": "override", "children": [] }, { "id": "5da9f61b148431", "propertyName": "style", "targetIdPath": [ "7149f8199969", "7149f8199121" ], "value": { "font-size": "10px" }, "name": "override", "children": [] }, { "id": "5da9f61b148433", "propertyName": "attributes", "targetIdPath": [ "7149f8199969" ], "value": {}, "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "89a7d9287567", "children": [ { "id": "89a7d9287566", "is": "a329dd6d16879", "name": "component-instance", "attributes": { "placeholder": "0" }, "style": {}, "children": [], "metadata": { "bounds": { "left": 384, "top": 298, "right": 484, "bottom": 327.0358087589019 } }, "label": "flex grow input", "variant": {} } ], "metadata": {}, "name": "plug" } ], "metadata": {}, "label": "" }, { "id": "5da9f61b257033", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": { "width": "100%", "flex": "1" }, "children": [ { "id": "5da9f61b257034", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Shrink", "name": "override", "children": [] }, { "id": "5da9f61b257036", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": {}, "name": "override", "children": [] }, { "id": "5da9f61b257037", "propertyName": "text", "targetIdPath": [ "7149f8199969", "7149f8199121" ], "value": "0px", "name": "override", "children": [] }, { "id": "5da9f61b257038", "propertyName": "style", "targetIdPath": [ "7149f8199969", "7149f8199121" ], "value": { "font-size": "10px" }, "name": "override", "children": [] }, { "id": "5da9f61b257040", "propertyName": "attributes", "targetIdPath": [ "7149f8199969" ], "value": {}, "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "89a7d9289413", "children": [ { "id": "89a7d9289412", "is": "a329dd6d16879", "name": "component-instance", "attributes": { "placeholder": "0" }, "style": {}, "children": [], "metadata": { "bounds": { "left": 384, "top": 298, "right": 484, "bottom": 327.0358087589019 } }, "label": "flex shrink input", "variant": {} } ], "metadata": {}, "name": "plug" } ], "metadata": {} } ], "metadata": { "bounds": { "left": 1306, "top": 286, "right": 1591.4162789760067, "bottom": 404.00426347733935 } } }, { "id": "87448da4744165", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": {}, "children": [ { "id": "87448da4744166", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Align self", "name": "override", "children": [] }, { "id": "87448da4744170", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": {}, "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "e73029b451641", "children": [ { "id": "87448da4744168", "variant": {}, "is": "d2bdce074664", "name": "component-instance", "attributes": {}, "style": { "display": "inline-block", "width": "100%" }, "children": [ { "id": "aeee74e024174", "variantId": null, "propertyName": "text", "targetIdPath": [ "67e386c7935" ], "value": "auto", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": 18, "top": 339, "right": 218.8212880775559, "bottom": 439 } }, "label": "align self input" } ], "metadata": {}, "name": "plug" } ], "metadata": { "bounds": { "left": -282, "top": 523, "right": -44, "bottom": 558 } } } ], "metadata": { "bounds": { "left": 1306, "top": 286, "right": 1591.4162789760067, "bottom": 404.00426347733935 } }, "label": "child flexbox controls" }, { "id": "aec1d08b3369", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": { "display": "block" }, "children": [ { "id": "aec1d08b3370", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Position", "name": "override", "children": [] }, { "id": "aec1d08b26417", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": {}, "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "e73029b420231", "children": [ { "id": "aec1d08b3373", "variant": {}, "is": "d2bdce074664", "name": "component-instance", "attributes": {}, "style": { "display": "block", "width": "100%" }, "children": [ { "id": "aeee74e030039", "variantId": null, "propertyName": "text", "targetIdPath": [ "67e386c7935" ], "value": "relative", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": 18, "top": 339, "right": 218.8212880775559, "bottom": 439 } }, "label": "Position Input" } ], "metadata": {}, "name": "plug" } ], "metadata": {}, "label": "position" }, { "id": "6b3dde2e27840", "variant": {}, "is": "div", "name": "element", "attributes": {}, "style": { "display": "flex", "align-items": "center", "width": "100%", "box-sizing": "border-box" }, "children": [ { "id": "6b3dde2e27841", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": { "width": "100%", "flex": "1", "margin-right": "6px" }, "children": [ { "id": "6b3dde2e27842", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Left\n", "name": "override", "children": [] }, { "id": "6b3dde2e27843", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": { "left": "opacity" }, "name": "override", "children": [] }, { "id": "6b3dde2e27844", "propertyName": "text", "targetIdPath": [ "7149f8199969", "7149f8199121" ], "value": "5px", "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "6b3dde2e30982", "children": [ { "id": "9def6b022738", "is": "a329dd6d16879", "name": "component-instance", "attributes": { "placeholder": "0px" }, "style": {}, "children": [], "metadata": { "bounds": { "left": 384, "top": 298, "right": 484, "bottom": 327.0358087589019 } }, "variant": {}, "label": "left input" } ], "metadata": {}, "name": "plug" } ], "metadata": {} }, { "id": "6b3dde2e27845", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": { "width": "100%", "flex": "1" }, "children": [ { "id": "6b3dde2e27846", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Top", "name": "override", "children": [] }, { "id": "6b3dde2e27847", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": {}, "name": "override", "children": [] }, { "id": "6b3dde2e27848", "propertyName": "text", "targetIdPath": [ "7149f8199969", "7149f8199121" ], "value": "0px", "name": "override", "children": [] }, { "id": "6b3dde2e27849", "propertyName": "style", "targetIdPath": [ "7149f8199969", "7149f8199121" ], "value": { "font-size": "10px" }, "name": "override", "children": [] }, { "id": "6b3dde2e27850", "propertyName": "attributes", "targetIdPath": [ "7149f8199969" ], "value": {}, "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "6b3dde2e32492", "children": [ { "id": "6b3dde2e32491", "is": "a329dd6d16879", "name": "component-instance", "attributes": { "placeholder": "0px" }, "style": {}, "children": [], "metadata": { "bounds": { "left": 384, "top": 298, "right": 484, "bottom": 327.0358087589019 } }, "label": "top input", "variant": {} } ], "metadata": {}, "name": "plug" } ], "metadata": {} } ], "metadata": { "bounds": { "left": 1306, "top": 286, "right": 1591.4162789760067, "bottom": 404.00426347733935 } }, "label": "move controls" }, { "id": "a258f47017678", "variant": {}, "is": "div", "name": "element", "attributes": {}, "style": { "display": "flex", "align-items": "center", "width": "100%", "box-sizing": "border-box" }, "children": [ { "id": "a258f47017679", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": { "width": "100%", "flex": "1", "margin-right": "6px" }, "children": [ { "id": "a258f47017680", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Width", "name": "override", "children": [] }, { "id": "a258f47017682", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": { "left": "opacity" }, "name": "override", "children": [] }, { "id": "a258f47017683", "propertyName": "text", "targetIdPath": [ "7149f8199969", "7149f8199121" ], "value": "5px", "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "6b3dde2e43078", "children": [ { "id": "6b3dde2e43077", "is": "a329dd6d16879", "name": "component-instance", "attributes": { "placeholder": "auto" }, "style": {}, "children": [], "metadata": { "bounds": { "left": 384, "top": 298, "right": 484, "bottom": 327.0358087589019 } }, "label": "width input", "variant": {} } ], "metadata": {}, "name": "plug" } ], "metadata": {} }, { "id": "a258f47017684", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": { "width": "100%", "flex": "1" }, "children": [ { "id": "a258f47017685", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "Height", "name": "override", "children": [] }, { "id": "a258f47017687", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": {}, "name": "override", "children": [] }, { "id": "a258f47017688", "propertyName": "text", "targetIdPath": [ "7149f8199969", "7149f8199121" ], "value": "0px", "name": "override", "children": [] }, { "id": "a258f47017689", "propertyName": "style", "targetIdPath": [ "7149f8199969", "7149f8199121" ], "value": { "font-size": "10px" }, "name": "override", "children": [] }, { "id": "395537b0130", "propertyName": "attributes", "targetIdPath": [ "7149f8199969" ], "value": {}, "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "6b3dde2e44596", "children": [ { "id": "6b3dde2e44595", "is": "a329dd6d16879", "name": "component-instance", "attributes": { "placeholder": "auto" }, "style": {}, "children": [], "metadata": { "bounds": { "left": 384, "top": 298, "right": 484, "bottom": 327.0358087589019 } }, "label": "height input", "variant": {} } ], "metadata": {}, "name": "plug" } ], "metadata": {} } ], "metadata": { "bounds": { "left": 1306, "top": 286, "right": 1591.4162789760067, "bottom": 404.00426347733935 } }, "label": "size controls" }, { "id": "3693ea499167", "variant": {}, "is": "7149f8192509", "name": "component-instance", "attributes": {}, "style": { "display": "block" }, "children": [ { "id": "3693ea499168", "propertyName": "text", "targetIdPath": [ "7149f8192506" ], "value": "White Space", "name": "override", "children": [] }, { "id": "3693ea499169", "propertyName": "style", "targetIdPath": [ "7149f8192506" ], "value": {}, "name": "override", "children": [] }, { "slotId": "e73029b416045", "id": "3693ea499170", "children": [ { "id": "3693ea499171", "variant": {}, "is": "d2bdce074664", "name": "component-instance", "attributes": {}, "style": { "display": "block", "width": "100%" }, "children": [ { "id": "3693ea499172", "variantId": null, "propertyName": "text", "targetIdPath": [ "67e386c7935" ], "value": "nowrap", "name": "override", "children": [] } ], "metadata": { "bounds": { "left": 18, "top": 339, "right": 218.8212880775559, "bottom": 439 } }, "label": "white space input" } ], "metadata": {}, "name": "plug" } ], "metadata": {}, "label": "white space" } ], "metadata": {}, "name": "plug" }, { "id": "8023264121794", "propertyName": "style", "targetIdPath": [ "b6c162d140" ], "value": {}, "name": "override", "children": [] } ], "metadata": { "bounds": { "left": -308, "top": 428, "right": -38, "bottom": 999 } }, "controllers": [ "./layout-controller.tsx" ], "variant": { "b6e7db9d12817": true } } ] }