diff --git a/frontend/playwright/data/render-wasm/get-file-group-with-shadows.json b/frontend/playwright/data/render-wasm/get-file-group-with-shadows.json new file mode 100644 index 0000000000..8c3a0d90f9 --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-file-group-with-shadows.json @@ -0,0 +1,146 @@ +{ + "~:features": { + "~#set": [ + "fdata/path-data", + "plugins/runtime", + "design-tokens/v1", + "variants/v1", + "layout/grid", + "styles/v2", + "fdata/objects-map", + "render-wasm/v1", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:team-id": "~u6bd7c17d-4f59-815e-8006-5c1f6882469a", + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "group_with_text_shadows", + "~:revn": 31, + "~:modified-at": "~m1762430368134", + "~:vern": 0, + "~:id": "~u58c5cc60-d124-81bd-8007-0f30f1ac452a", + "~:is-shared": false, + "~:migrations": { + "~#ordered-set": [ + "legacy-2", + "legacy-3", + "legacy-5", + "legacy-6", + "legacy-7", + "legacy-8", + "legacy-9", + "legacy-10", + "legacy-11", + "legacy-12", + "legacy-13", + "legacy-14", + "legacy-16", + "legacy-17", + "legacy-18", + "legacy-19", + "legacy-25", + "legacy-26", + "legacy-27", + "legacy-28", + "legacy-29", + "legacy-31", + "legacy-32", + "legacy-33", + "legacy-34", + "legacy-36", + "legacy-37", + "legacy-38", + "legacy-39", + "legacy-40", + "legacy-41", + "legacy-42", + "legacy-43", + "legacy-44", + "legacy-45", + "legacy-46", + "legacy-47", + "legacy-48", + "legacy-49", + "legacy-50", + "legacy-51", + "legacy-52", + "legacy-53", + "legacy-54", + "legacy-55", + "legacy-56", + "legacy-57", + "legacy-59", + "legacy-62", + "legacy-65", + "legacy-66", + "legacy-67", + "0001-remove-tokens-from-groups", + "0002-normalize-bool-content-v2", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content-v2", + "0004-clean-shadow-color", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0008-fix-library-colors-v4", + "0009-clean-library-colors", + "0009-add-partial-text-touched-flags", + "0010-fix-swap-slots-pointing-non-existent-shapes", + "0011-fix-invalid-text-touched-flags", + "0012-fix-position-data", + "0013-fix-component-path", + "0013-clear-invalid-strokes-and-fills", + "0014-fix-tokens-lib-duplicate-ids", + "0014-clear-components-nil-objects", + "0015-fix-text-attrs-blank-strings", + "0016-copy-fills-from-position-data-to-text-node" + ] + }, + "~:version": 67, + "~:project-id": "~u6bd7c17d-4f59-815e-8006-5c1f68846e43", + "~:created-at": "~m1762273747633", + "~:backend": "legacy-db", + "~:data": { + "~:pages": [ + "~u58c5cc60-d124-81bd-8007-0f30f1ac452b" + ], + "~:pages-index": { + "~u58c5cc60-d124-81bd-8007-0f30f1ac452b": { + "~:objects": { + "~#penpot/objects-map/v2": { + "~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",0.01,\"~:height\",0.01,\"~:x1\",0,\"~:y1\",0,\"~:x2\",0.01,\"~:y2\",0.01]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~u22590301-48da-807a-8007-0f30f2c3c7a3\",\"~u457f223c-eff4-8043-8007-1186366cf83f\"]]]", + "~u457f223c-eff4-8043-8007-1186366cf83f": "[\"~#shape\",[\"^ \",\"~:y\",1127.9999542236328,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:index\",3,\"~:name\",\"Text shadow\",\"~:width\",937.0000171528263,\"~:type\",\"~:group\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",182,\"~:y\",1127.9999542236328]],[\"^:\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",1127.9999542236328]],[\"^:\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",1434.9999937907205]],[\"^:\",[\"^ \",\"~:x\",182,\"~:y\",1434.9999937907205]]],\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u457f223c-eff4-8043-8007-1186366cf83f\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",182,\"~:blocked\",false,\"~:proportion\",1,\"~:shadow\",[[\"^ \",\"~:color\",[\"^ \",\"^I\",\"#d276ff\",\"~:opacity\",1],\"~:spread\",1,\"~:offset-y\",4,\"~:style\",\"~:drop-shadow\",\"~:blur\",0,\"~:hidden\",false,\"^B\",\"~u376e6303-a232-8017-8004-908433a7d495\",\"~:offset-x\",4]],\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",182,\"~:y\",1127.9999542236328,\"^6\",937.0000171528263,\"~:height\",307.0000395670877,\"~:x1\",182,\"~:y1\",1127.9999542236328,\"~:x2\",1119.0000171528263,\"~:y2\",1434.9999937907205]],\"~:fills\",[],\"~:flip-x\",false,\"^T\",307.0000395670877,\"~:flip-y\",false,\"~:shapes\",[\"~u457f223c-eff4-8043-8007-1186366cf840\",\"~u457f223c-eff4-8043-8007-1186366cf841\",\"~u457f223c-eff4-8043-8007-1186366cf842\"]]]", + "~u22590301-48da-807a-8007-0f30f2c3c7a3": "[\"~#shape\",[\"^ \",\"~:y\",565.9999791979773,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:index\",3,\"~:name\",\"Text shadow\",\"~:width\",937.0000171528263,\"~:type\",\"~:group\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",182,\"~:y\",565.9999791979773]],[\"^:\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",565.9999791979773]],[\"^:\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",873.0000187650649]],[\"^:\",[\"^ \",\"~:x\",182,\"~:y\",873.0000187650649]]],\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a3\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",182,\"~:blocked\",false,\"~:proportion\",1,\"~:shadow\",[[\"^ \",\"~:color\",[\"^ \",\"^I\",\"#166ada\",\"~:opacity\",1],\"~:spread\",40,\"~:offset-y\",4,\"~:style\",\"~:drop-shadow\",\"~:blur\",50,\"~:hidden\",false,\"^B\",\"~u376e6303-a232-8017-8004-908433a7d495\",\"~:offset-x\",4]],\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",182,\"~:y\",565.9999791979773,\"^6\",937.0000171528263,\"~:height\",307.0000395670876,\"~:x1\",182,\"~:y1\",565.9999791979773,\"~:x2\",1119.0000171528263,\"~:y2\",873.0000187650649]],\"~:fills\",[],\"~:flip-x\",false,\"^T\",307.0000395670876,\"~:flip-y\",false,\"~:shapes\",[\"~u22590301-48da-807a-8007-0f30f2c3c7a4\",\"~u22590301-48da-807a-8007-0f30f2c3c7a5\",\"~udbebc08f-fd4a-800a-8007-11852f2de796\"]]]", + "~u22590301-48da-807a-8007-0f30f2c3c7a7": "[\"~#shape\",[\"^ \",\"~:y\",782.9999720950955,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:auto-height\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"7hmohksim0\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"\",\"^;\",\"normal\",\"~:typography-ref-id\",null,\"~:text-transform\",\"none\",\"~:font-id\",\"gfont-karla\",\"^8\",\"2fc3qdybqwr\",\"~:font-size\",\"35\",\"~:font-weight\",\"500\",\"~:typography-ref-file\",null,\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#5E18AF\",\"~:fill-opacity\",1]],\"~:font-family\",\"Karla\",\"~:text\",\"This is the text body\"]],\"^<\",null,\"^=\",\"none\",\"~:text-align\",\"left\",\"^>\",\"gfont-karla\",\"^8\",\"29emf8fbblr\",\"^?\",\"0\",\"^@\",\"500\",\"^A\",null,\"~:text-direction\",\"ltr\",\"^7\",\"paragraph\",\"^B\",\"500\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[[\"^ \",\"^F\",\"#5E18AF\",\"^G\",1]],\"^H\",\"Karla\"]]]],\"~:vertical-align\",\"\"],\"~:hide-in-viewer\",false,\"~:name\",\"Example of UI design, flex + grid layouts, prototyping, light + dark mode colors, typographies and components.\",\"~:width\",702.99999999999,\"^7\",\"^I\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",415.99998795994475,\"~:y\",782.9999720950955]],[\"^Q\",[\"^ \",\"~:x\",1118.9999879599347,\"~:y\",782.9999720950955]],[\"^Q\",[\"^ \",\"~:x\",1118.9999879599347,\"~:y\",824.9999708433805]],[\"^Q\",[\"^ \",\"~:x\",415.99998795994475,\"~:y\",824.9999708433805]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a7\",\"~:parent-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a5\",\"~:position-data\",[[\"^ \",\"~:y\",824.1999486982821,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"35px\",\"^@\",\"500\",\"~:y1\",0.4000000059604645,\"^O\",662.6312866210938,\"^C\",\"none solid rgb(94, 24, 175)\",\"^D\",\"normal\",\"~:x\",416.00003051766544,\"~:x1\",0,\"~:y2\",41.19999924302101,\"^E\",[[\"^ \",\"^F\",\"#5E18AF\",\"^G\",1]],\"~:x2\",662.6312866210938,\"~:direction\",\"ltr\",\"^H\",\"Karla\",\"~:height\",40.79999923706055,\"^I\",\"Example of UI design, flex + grid layouts, \"],[\"^ \",\"~:y\",866.199954032898,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"35px\",\"^@\",\"500\",\"^[\",42.400001525878906,\"^O\",615.8500366210938,\"^C\",\"none solid rgb(94, 24, 175)\",\"^D\",\"normal\",\"~:x\",416.00003051766544,\"^10\",0,\"^11\",83.20000457763672,\"^E\",[[\"^ \",\"^F\",\"#5E18AF\",\"^G\",1]],\"^12\",615.8500366210938,\"^13\",\"ltr\",\"^H\",\"Karla\",\"^14\",40.80000305175781,\"^I\",\"prototyping, light + dark mode colors, \"],[\"^ \",\"~:y\",908.199954032898,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"35px\",\"^@\",\"500\",\"^[\",84.4000015258789,\"^O\",503.13751220703125,\"^C\",\"none solid rgb(94, 24, 175)\",\"^D\",\"normal\",\"~:x\",416.00003051766544,\"^10\",0,\"^11\",125.20000457763672,\"^E\",[[\"^ \",\"^F\",\"#5E18AF\",\"^G\",1]],\"^12\",503.13751220703125,\"^13\",\"ltr\",\"^H\",\"Karla\",\"^14\",40.80000305175781,\"^I\",\"typographies and components.\"]],\"~:frame-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a5\",\"~:strokes\",[],\"~:x\",415.99998795994475,\"~:blocked\",false,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",415.99998795994475,\"~:y\",782.9999720950955,\"^O\",702.99999999999,\"^14\",41.999998748285066,\"^10\",415.99998795994475,\"^[\",782.9999720950955,\"^12\",1118.9999879599347,\"^11\",824.9999708433805]],\"^E\",[],\"~:flip-x\",null,\"^14\",41.999998748285066,\"~:flip-y\",null]]", + "~u22590301-48da-807a-8007-0f30f2c3c7a6": "[\"~#shape\",[\"^ \",\"~:y\",840.0000141561163,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"dxn5loqivn\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"normal\",\"~:typography-ref-id\",null,\"~:text-transform\",\"none\",\"~:font-id\",\"gfont-karla\",\"^8\",\"11x47j94xkq\",\"~:font-size\",\"35\",\"~:font-weight\",\"500\",\"~:typography-ref-file\",null,\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#5E18AF\",\"~:fill-opacity\",1]],\"~:font-family\",\"Karla\",\"~:text\",\"This is just another text at the bottom\"]],\"^<\",null,\"^=\",\"none\",\"~:text-align\",\"left\",\"^>\",\"gfont-karla\",\"^8\",\"1rfpnyrk4it\",\"^?\",\"35\",\"^@\",\"500\",\"^A\",null,\"~:text-direction\",\"ltr\",\"^7\",\"paragraph\",\"^B\",\"500\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[[\"^ \",\"^F\",\"#5E18AF\",\"^G\",1]],\"^H\",\"Karla\"]]]],\"~:vertical-align\",\"\"],\"~:hide-in-viewer\",false,\"~:name\",\"Version 1. June 2024\",\"~:width\",702.99999999999,\"^7\",\"^I\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",415.9999879599491,\"~:y\",840.0000141561163]],[\"^Q\",[\"^ \",\"~:x\",1118.999987959939,\"~:y\",840.0000141561163]],[\"^Q\",[\"^ \",\"~:x\",1118.999987959939,\"~:y\",873.000022023929]],[\"^Q\",[\"^ \",\"~:x\",415.9999879599491,\"~:y\",873.000022023929]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:hidden\",false,\"~:id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a6\",\"~:parent-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a5\",\"~:position-data\",[[\"^ \",\"~:y\",881.199900329113,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"35px\",\"^@\",\"500\",\"~:y1\",0.4000000059604645,\"^O\",323.5187683105469,\"^C\",\"none solid rgb(94, 24, 175)\",\"^D\",\"normal\",\"~:x\",416.00003051766544,\"~:x1\",0,\"~:y2\",41.19999924302101,\"^E\",[[\"^ \",\"^F\",\"#5E18AF\",\"^G\",1]],\"~:x2\",323.5187683105469,\"~:direction\",\"ltr\",\"^H\",\"Karla\",\"~:height\",40.79999923706055,\"^I\",\"Version 1. June 2024\"]],\"~:frame-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a5\",\"~:strokes\",[],\"~:x\",415.9999879599491,\"~:blocked\",false,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",415.9999879599491,\"~:y\",840.0000141561163,\"^O\",702.99999999999,\"^15\",33.000007867812656,\"^11\",415.9999879599491,\"^10\",840.0000141561163,\"^13\",1118.999987959939,\"^12\",873.000022023929]],\"^E\",[],\"~:flip-x\",null,\"^15\",33.000007867812656,\"~:flip-y\",null]]", + "~u22590301-48da-807a-8007-0f30f2c3c7a5": "[\"~#shape\",[\"^ \",\"~:y\",782.9999810452875,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",-2.842170943040401E-14,\"~:p2\",0,\"~:p3\",-2.842170943040401E-14,\"~:p4\",0],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"description\",\"~:layout-align-items\",\"~:start\",\"~:width\",703.0000076883839,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",416.0000094644423,\"~:y\",782.9999810452875]],[\"^J\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",782.9999810452875]],[\"^J\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",873.0000080957647]],[\"^J\",[\"^ \",\"~:x\",416.0000094644423,\"~:y\",873.0000080957647]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",15,\"~:column-gap\",15],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:layout-item-v-sizing\",\"^M\",\"~:layout-justify-content\",\"^C\",\"~:id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a5\",\"~:parent-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a3\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",416.00000946444237,\"~:blocked\",false,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",416.00000946444237,\"~:y\",782.9999810452875,\"^D\",703.0000076883839,\"~:height\",90.00002705047712,\"~:x1\",416.00000946444237,\"~:y1\",782.9999810452875,\"~:x2\",1119.0000171528263,\"~:y2\",873.0000080957647]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",90.00002705047712,\"~:flip-y\",null,\"~:shapes\",[\"~u22590301-48da-807a-8007-0f30f2c3c7a6\",\"~u22590301-48da-807a-8007-0f30f2c3c7a7\"]]]", + "~u22590301-48da-807a-8007-0f30f2c3c7a4": "[\"~#shape\",[\"^ \",\"~:y\",565.9999637007554,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:auto-width\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"8gvslj04p9\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"normal\",\"~:typography-ref-id\",null,\"~:text-transform\",\"none\",\"~:font-id\",\"gfont-karla\",\"^8\",\"2eqbmpbto3f\",\"~:font-size\",\"60\",\"~:font-weight\",\"700\",\"~:typography-ref-file\",null,\"~:font-variant-id\",\"700\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#805ad5\",\"~:fill-opacity\",1]],\"~:font-family\",\"Karla\",\"~:text\",\"This is the title\"]],\"^<\",null,\"^=\",\"none\",\"~:text-align\",\"left\",\"^>\",\"gfont-karla\",\"^8\",\"yl00fqu977\",\"^?\",\"60\",\"^@\",\"700\",\"^A\",null,\"~:text-direction\",\"ltr\",\"^7\",\"paragraph\",\"^B\",\"700\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[[\"^ \",\"^F\",\"#805ad5\",\"^G\",1]],\"^H\",\"Karla\"]]]],\"~:vertical-align\",\"\"],\"~:hide-in-viewer\",false,\"~:name\",\"Sales dashboard example\",\"~:width\",428.000002264963,\"^7\",\"^I\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",386.99999294062314,\"~:y\",565.9999637007555]],[\"^Q\",[\"^ \",\"~:x\",814.9999952055861,\"~:y\",565.9999637007555]],[\"^Q\",[\"^ \",\"~:x\",814.9999952055861,\"~:y\",638.0000023244937]],[\"^Q\",[\"^ \",\"~:x\",386.99999294062314,\"~:y\",638.0000023244937]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:hidden\",false,\"~:id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a4\",\"~:parent-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a3\",\"~:position-data\",[[\"^ \",\"~:y\",601.1998026371002,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"60px\",\"^@\",\"700\",\"~:y1\",0.800000011920929,\"^O\",736.3812866210938,\"^C\",\"none solid rgb(128, 90, 213)\",\"^D\",\"normal\",\"~:x\",306.9999465942383,\"~:x1\",0,\"~:y2\",71.20000153779984,\"^E\",[[\"^ \",\"^F\",\"#805ad5\",\"^G\",1]],\"~:x2\",736.3812866210938,\"~:direction\",\"ltr\",\"^H\",\"Karla\",\"~:height\",70.4000015258789,\"^I\",\"Sales dashboard example\"]],\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",386.9999929406232,\"~:blocked\",false,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",386.9999929406232,\"~:y\",565.9999637007554,\"^O\",428.000002264963,\"^11\",72.00003862373819,\"^Y\",386.9999929406232,\"^X\",565.9999637007554,\"^[\",814.9999952055862,\"^Z\",638.0000023244936]],\"^E\",[],\"~:flip-x\",null,\"^11\",72.00003862373819,\"~:flip-y\",null]]", + "~udbebc08f-fd4a-800a-8007-11852f2de796": "[\"~#shape\",[\"^ \",\"~:y\",704.9999632537276,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",123,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",182,\"~:y\",704.9999632537276]],[\"^<\",[\"^ \",\"~:x\",305,\"~:y\",704.9999632537276]],[\"^<\",[\"^ \",\"~:x\",305,\"~:y\",758.9999020993622]],[\"^<\",[\"^ \",\"~:x\",182,\"~:y\",758.9999020993622]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:constraints-v\",\"~:scale\",\"~:constraints-h\",\"^B\",\"~:r1\",0,\"~:id\",\"~udbebc08f-fd4a-800a-8007-11852f2de796\",\"~:parent-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a3\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",182,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",182,\"~:y\",704.9999632537276,\"^8\",123,\"~:height\",53.999938845634574,\"~:x1\",182,\"~:y1\",704.9999632537276,\"~:x2\",305,\"~:y2\",758.9999020993622]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#476fe7\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^M\",53.999938845634574,\"~:flip-y\",null]]", + "~u457f223c-eff4-8043-8007-1186366cf841": "[\"~#shape\",[\"^ \",\"~:y\",1344.9999721046204,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",-2.842170943040401E-14,\"~:p2\",0,\"~:p3\",-2.842170943040401E-14,\"~:p4\",0],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"description\",\"~:layout-align-items\",\"~:start\",\"~:width\",703.0000076883839,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",416.0000094644423,\"~:y\",1344.9999721046204]],[\"^J\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",1344.9999721046204]],[\"^J\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",1434.9999937907205]],[\"^J\",[\"^ \",\"~:x\",416.0000094644423,\"~:y\",1434.9999937907205]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",15,\"~:column-gap\",15],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:layout-item-v-sizing\",\"^M\",\"~:layout-justify-content\",\"^C\",\"~:id\",\"~u457f223c-eff4-8043-8007-1186366cf841\",\"~:parent-id\",\"~u457f223c-eff4-8043-8007-1186366cf83f\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",416.0000094644424,\"~:blocked\",false,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",416.0000094644424,\"~:y\",1344.9999721046204,\"^D\",703.0000076883839,\"~:height\",90.00002168610013,\"~:x1\",416.0000094644424,\"~:y1\",1344.9999721046204,\"~:x2\",1119.0000171528263,\"~:y2\",1434.9999937907205]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",90.00002168610013,\"~:flip-y\",null,\"~:shapes\",[\"~u457f223c-eff4-8043-8007-1186366cf843\",\"~u457f223c-eff4-8043-8007-1186366cf844\"]]]", + "~u457f223c-eff4-8043-8007-1186366cf840": "[\"~#shape\",[\"^ \",\"~:y\",1127.9999542236328,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:auto-width\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"8gvslj04p9\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"normal\",\"~:text-transform\",\"none\",\"~:font-id\",\"gfont-karla\",\"^8\",\"2eqbmpbto3f\",\"~:font-size\",\"60\",\"~:font-weight\",\"700\",\"~:font-variant-id\",\"700\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#805ad5\",\"~:fill-opacity\",1]],\"~:font-family\",\"Karla\",\"~:text\",\"This is the title\"]],\"^<\",\"none\",\"~:text-align\",\"left\",\"^=\",\"gfont-karla\",\"^8\",\"yl00fqu977\",\"^>\",\"60\",\"^?\",\"700\",\"~:text-direction\",\"ltr\",\"^7\",\"paragraph\",\"^@\",\"700\",\"^A\",\"none\",\"^B\",\"0\",\"^C\",[[\"^ \",\"^D\",\"#805ad5\",\"^E\",1]],\"^F\",\"Karla\"]]]],\"~:vertical-align\",\"\"],\"~:hide-in-viewer\",false,\"~:name\",\"Sales dashboard example\",\"~:width\",428.000002264963,\"^7\",\"^G\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",386.9999929406231,\"~:y\",1127.9999542236328]],[\"^O\",[\"^ \",\"~:x\",814.999995205586,\"~:y\",1127.9999542236328]],[\"^O\",[\"^ \",\"~:x\",814.999995205586,\"~:y\",1199.9999928474213]],[\"^O\",[\"^ \",\"~:x\",386.9999929406231,\"~:y\",1199.9999928474213]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:hidden\",false,\"~:id\",\"~u457f223c-eff4-8043-8007-1186366cf840\",\"~:parent-id\",\"~u457f223c-eff4-8043-8007-1186366cf83f\",\"~:position-data\",[[\"^ \",\"~:y\",1163.1997547745723,\"^;\",\"normal\",\"^<\",\"none\",\"^>\",\"60px\",\"^?\",\"700\",\"~:y1\",0.800000011920929,\"^M\",736.3812866210938,\"^A\",\"none solid rgb(128, 90, 213)\",\"^B\",\"normal\",\"~:x\",306.9999465942383,\"~:x1\",0,\"~:y2\",71.20000153779984,\"^C\",[[\"^ \",\"^D\",\"#805ad5\",\"^E\",1]],\"~:x2\",736.3812866210938,\"~:direction\",\"ltr\",\"^F\",\"Karla\",\"~:height\",70.4000015258789,\"^G\",\"Sales dashboard example\"]],\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",386.9999929406232,\"~:blocked\",false,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",386.9999929406232,\"~:y\",1127.9999542236328,\"^M\",428.000002264963,\"^[\",72.00003862378844,\"^W\",386.9999929406232,\"^V\",1127.9999542236328,\"^Y\",814.9999952055862,\"^X\",1199.9999928474213]],\"^C\",[],\"~:flip-x\",null,\"^[\",72.00003862378844,\"~:flip-y\",null]]", + "~u457f223c-eff4-8043-8007-1186366cf843": "[\"~#shape\",[\"^ \",\"~:y\",1401.999989181772,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"dxn5loqivn\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"normal\",\"~:text-transform\",\"none\",\"~:font-id\",\"gfont-karla\",\"^8\",\"11x47j94xkq\",\"~:font-size\",\"35\",\"~:font-weight\",\"500\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#5E18AF\",\"~:fill-opacity\",1]],\"~:font-family\",\"Karla\",\"~:text\",\"This is just another text at the bottom\"]],\"^<\",\"none\",\"~:text-align\",\"left\",\"^=\",\"gfont-karla\",\"^8\",\"1rfpnyrk4it\",\"^>\",\"35\",\"^?\",\"500\",\"~:text-direction\",\"ltr\",\"^7\",\"paragraph\",\"^@\",\"500\",\"^A\",\"none\",\"^B\",\"0\",\"^C\",[[\"^ \",\"^D\",\"#5E18AF\",\"^E\",1]],\"^F\",\"Karla\"]]]],\"~:vertical-align\",\"\"],\"~:hide-in-viewer\",false,\"~:name\",\"Version 1. June 2024\",\"~:width\",702.99999999999,\"^7\",\"^G\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",415.99998795994907,\"~:y\",1401.999989181772]],[\"^O\",[\"^ \",\"~:x\",1118.999987959939,\"~:y\",1401.999989181772]],[\"^O\",[\"^ \",\"~:x\",1118.999987959939,\"~:y\",1434.9999970495846]],[\"^O\",[\"^ \",\"~:x\",415.99998795994907,\"~:y\",1434.9999970495846]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:hidden\",false,\"~:id\",\"~u457f223c-eff4-8043-8007-1186366cf843\",\"~:parent-id\",\"~u457f223c-eff4-8043-8007-1186366cf841\",\"~:position-data\",[[\"^ \",\"~:y\",1443.1998753547687,\"^;\",\"normal\",\"^<\",\"none\",\"^>\",\"35px\",\"^?\",\"500\",\"~:y1\",0.4000000059604645,\"^M\",323.5187683105469,\"^A\",\"none solid rgb(94, 24, 175)\",\"^B\",\"normal\",\"~:x\",416.00003051766544,\"~:x1\",0,\"~:y2\",41.19999924302101,\"^C\",[[\"^ \",\"^D\",\"#5E18AF\",\"^E\",1]],\"~:x2\",323.5187683105469,\"~:direction\",\"ltr\",\"^F\",\"Karla\",\"~:height\",40.79999923706055,\"^G\",\"Version 1. June 2024\"]],\"~:frame-id\",\"~u457f223c-eff4-8043-8007-1186366cf841\",\"~:strokes\",[],\"~:x\",415.99998795994907,\"~:blocked\",false,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",415.99998795994907,\"~:y\",1401.999989181772,\"^M\",702.99999999999,\"^13\",33.000007867812656,\"^[\",415.99998795994907,\"^Z\",1401.999989181772,\"^11\",1118.999987959939,\"^10\",1434.9999970495846]],\"^C\",[],\"~:flip-x\",null,\"^13\",33.000007867812656,\"~:flip-y\",null]]", + "~u457f223c-eff4-8043-8007-1186366cf842": "[\"~#shape\",[\"^ \",\"~:y\",1266.9999993145393,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",123,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",182,\"~:y\",1266.9999993145393]],[\"^<\",[\"^ \",\"~:x\",305,\"~:y\",1266.9999993145393]],[\"^<\",[\"^ \",\"~:x\",305,\"~:y\",1320.999938160174]],[\"^<\",[\"^ \",\"~:x\",182,\"~:y\",1320.999938160174]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:constraints-v\",\"~:scale\",\"~:constraints-h\",\"^B\",\"~:r1\",0,\"~:id\",\"~u457f223c-eff4-8043-8007-1186366cf842\",\"~:parent-id\",\"~u457f223c-eff4-8043-8007-1186366cf83f\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",182,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",182,\"~:y\",1266.9999993145393,\"^8\",123,\"~:height\",53.99993884563446,\"~:x1\",182,\"~:y1\",1266.9999993145393,\"~:x2\",305,\"~:y2\",1320.9999381601738]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#476fe7\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^M\",53.99993884563446,\"~:flip-y\",null]]", + "~u457f223c-eff4-8043-8007-1186366cf844": "[\"~#shape\",[\"^ \",\"~:y\",1345.0000691910636,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:auto-height\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"7hmohksim0\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"\",\"^;\",\"normal\",\"~:text-transform\",\"none\",\"~:font-id\",\"gfont-karla\",\"^8\",\"2fc3qdybqwr\",\"~:font-size\",\"35\",\"~:font-weight\",\"500\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#5E18AF\",\"~:fill-opacity\",1]],\"~:font-family\",\"Karla\",\"~:text\",\"This is the text body\"]],\"^<\",\"none\",\"~:text-align\",\"left\",\"^=\",\"gfont-karla\",\"^8\",\"29emf8fbblr\",\"^>\",\"0\",\"^?\",\"500\",\"~:text-direction\",\"ltr\",\"^7\",\"paragraph\",\"^@\",\"500\",\"^A\",\"none\",\"^B\",\"0\",\"^C\",[[\"^ \",\"^D\",\"#5E18AF\",\"^E\",1]],\"^F\",\"Karla\"]]]],\"~:vertical-align\",\"\"],\"~:hide-in-viewer\",false,\"~:name\",\"Example of UI design, flex + grid layouts, prototyping, light + dark mode colors, typographies and components.\",\"~:width\",702.99999999999,\"^7\",\"^G\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",415.99998795994475,\"~:y\",1345.0000691910636]],[\"^O\",[\"^ \",\"~:x\",1118.9999879599347,\"~:y\",1345.0000691910636]],[\"^O\",[\"^ \",\"~:x\",1118.9999879599347,\"~:y\",1387.0000679393486]],[\"^O\",[\"^ \",\"~:x\",415.99998795994475,\"~:y\",1387.0000679393486]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u457f223c-eff4-8043-8007-1186366cf844\",\"~:parent-id\",\"~u457f223c-eff4-8043-8007-1186366cf841\",\"~:position-data\",[[\"^ \",\"~:y\",1386.2000457942502,\"^;\",\"normal\",\"^<\",\"none\",\"^>\",\"35px\",\"^?\",\"500\",\"~:y1\",0.4000000059604645,\"^M\",662.6312866210938,\"^A\",\"none solid rgb(94, 24, 175)\",\"^B\",\"normal\",\"~:x\",416.00003051766544,\"~:x1\",0,\"~:y2\",41.19999924302101,\"^C\",[[\"^ \",\"^D\",\"#5E18AF\",\"^E\",1]],\"~:x2\",662.6312866210938,\"~:direction\",\"ltr\",\"^F\",\"Karla\",\"~:height\",40.79999923706055,\"^G\",\"Example of UI design, flex + grid layouts, \"],[\"^ \",\"~:y\",1428.200051128866,\"^;\",\"normal\",\"^<\",\"none\",\"^>\",\"35px\",\"^?\",\"500\",\"^Y\",42.400001525878906,\"^M\",615.8500366210938,\"^A\",\"none solid rgb(94, 24, 175)\",\"^B\",\"normal\",\"~:x\",416.00003051766544,\"^Z\",0,\"^[\",83.20000457763672,\"^C\",[[\"^ \",\"^D\",\"#5E18AF\",\"^E\",1]],\"^10\",615.8500366210938,\"^11\",\"ltr\",\"^F\",\"Karla\",\"^12\",40.80000305175781,\"^G\",\"prototyping, light + dark mode colors, \"],[\"^ \",\"~:y\",1470.200051128866,\"^;\",\"normal\",\"^<\",\"none\",\"^>\",\"35px\",\"^?\",\"500\",\"^Y\",84.4000015258789,\"^M\",503.13751220703125,\"^A\",\"none solid rgb(94, 24, 175)\",\"^B\",\"normal\",\"~:x\",416.00003051766544,\"^Z\",0,\"^[\",125.20000457763672,\"^C\",[[\"^ \",\"^D\",\"#5E18AF\",\"^E\",1]],\"^10\",503.13751220703125,\"^11\",\"ltr\",\"^F\",\"Karla\",\"^12\",40.80000305175781,\"^G\",\"typographies and components.\"]],\"~:frame-id\",\"~u457f223c-eff4-8043-8007-1186366cf841\",\"~:strokes\",[],\"~:x\",415.99998795994475,\"~:blocked\",false,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",415.99998795994475,\"~:y\",1345.0000691910636,\"^M\",702.99999999999,\"^12\",41.99999874828518,\"^Z\",415.99998795994475,\"^Y\",1345.0000691910636,\"^10\",1118.9999879599347,\"^[\",1387.0000679393488]],\"^C\",[],\"~:flip-x\",null,\"^12\",41.99999874828518,\"~:flip-y\",null]]" + } + }, + "~:id": "~u58c5cc60-d124-81bd-8007-0f30f1ac452b", + "~:name": "Page 1" + } + }, + "~:id": "~u58c5cc60-d124-81bd-8007-0f30f1ac452a", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/ui/render-wasm-specs/texts.spec.js b/frontend/playwright/ui/render-wasm-specs/texts.spec.js index 26484a990e..816fb964ff 100644 --- a/frontend/playwright/ui/render-wasm-specs/texts.spec.js +++ b/frontend/playwright/ui/render-wasm-specs/texts.spec.js @@ -407,6 +407,22 @@ test("Renders a file with texts with breaking words", async ({ await expect(workspace.canvas).toHaveScreenshot(); }); +test("Renders a file with group with text with inherited shadows", async ({ + page, +}) => { + const workspace = new WasmWorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockGetFile("render-wasm/get-file-group-with-shadows.json"); + + await workspace.goToWorkspace({ + id: "58c5cc60-d124-81bd-8007-0f30f1ac452a", + pageId: "58c5cc60-d124-81bd-8007-0f30f1ac452b", + }); + + await workspace.waitForFirstRender(); + await expect(workspace.canvas).toHaveScreenshot(); +}); + test.skip("Updates text alignment edition - part 1", async ({ page }) => { const workspace = new WasmWorkspacePage(page); await workspace.setupEmptyFile(); diff --git a/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-group-with-text-with-inherited-shadows-1.png b/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-group-with-text-with-inherited-shadows-1.png new file mode 100644 index 0000000000..f8affcad8c Binary files /dev/null and b/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-group-with-text-with-inherited-shadows-1.png differ diff --git a/render-wasm/src/render.rs b/render-wasm/src/render.rs index e8a102f92f..0b790b17f1 100644 --- a/render-wasm/src/render.rs +++ b/render-wasm/src/render.rs @@ -101,8 +101,9 @@ impl NodeRenderState { /// Calculates the clip bounds for shadow rendering of a given shape. /// /// This function determines the clipping region that should be applied when rendering a - /// shadow for a shape element. It uses the shadow bounds but calculates the - /// transformation center based on the original shape, not the shadow bounds. + /// shadow for a shape element. For frames, it uses the shadow bounds to clip nested + /// shadows. For groups, it returns the existing clip bounds since groups should not + /// constrain nested shadows based on their selection rectangle bounds. /// /// # Parameters /// @@ -123,18 +124,22 @@ impl NodeRenderState { "Shape must be a Frame or Group for nested shadow clip bounds calculation" ); - let bounds = element.get_selrect_shadow_bounds(shadow); - let mut transform = element.transform; - transform.post_translate(element.center()); - transform.pre_translate(-element.center()); + match &element.shape_type { + Type::Frame(_) => { + let bounds = element.get_selrect_shadow_bounds(shadow); + let mut transform = element.transform; + transform.post_translate(element.center()); + transform.pre_translate(-element.center()); - let corners = match &element.shape_type { - Type::Rect(data) => data.corners, - Type::Frame(data) => data.corners, - _ => None, - }; + let corners = match &element.shape_type { + Type::Frame(data) => data.corners, + _ => None, + }; - Some((bounds, corners, transform)) + Some((bounds, corners, transform)) + } + _ => self.clip_bounds, + } } } @@ -234,6 +239,7 @@ pub(crate) struct RenderState { // Frames contained in groups must reset this nested_fills stack pushing a new empty vector. pub nested_fills: Vec>, pub nested_blurs: Vec>, // FIXME: why is this an option? + pub nested_shadows: Vec>, pub show_grid: Option, pub focus_mode: FocusMode, pub touched_ids: HashSet, @@ -304,6 +310,7 @@ impl RenderState { pending_tiles: PendingTiles::new_empty(), nested_fills: vec![], nested_blurs: vec![], + nested_shadows: vec![], show_grid: None, focus_mode: FocusMode::new(), touched_ids: HashSet::default(), @@ -453,6 +460,31 @@ impl RenderState { self.focus_mode.set_shapes(shapes); } + fn get_inherited_drop_shadows(&self) -> Option> { + let drop_shadows: Vec<&Shadow> = self + .nested_shadows + .iter() + .flat_map(|shadows| shadows.iter()) + .filter(|shadow| !shadow.hidden() && shadow.style() == crate::shapes::ShadowStyle::Drop) + .collect(); + + if drop_shadows.is_empty() { + return None; + } + + Some( + drop_shadows + .into_iter() + .map(|shadow| { + let mut paint = skia_safe::Paint::default(); + let filter = shadow.get_drop_shadow_filter(); + paint.set_image_filter(filter); + paint + }) + .collect(), + ) + } + #[allow(clippy::too_many_arguments)] pub fn render_shape( &mut self, @@ -575,7 +607,12 @@ impl RenderState { }); let text_content = text_content.new_bounds(shape.selrect()); - let drop_shadows = shape.drop_shadow_paints(); + let mut drop_shadows = shape.drop_shadow_paints(); + + if let Some(inherited_shadows) = self.get_inherited_drop_shadows() { + drop_shadows.extend(inherited_shadows); + } + let inner_shadows = shape.inner_shadow_paints(); let blur_filter = shape.image_filter(1.); let count_inner_strokes = shape.count_visible_inner_strokes(); @@ -612,14 +649,14 @@ impl RenderState { if let Some(parent_shadows) = parent_shadows { if !shape.has_visible_strokes() { - for shadow in &parent_shadows { + for shadow in parent_shadows { text::render( Some(self), None, &shape, &mut paragraphs_with_shadows, text_drop_shadows_surface_id.into(), - Some(shadow), + Some(&shadow), blur_filter.as_ref(), ); } @@ -875,6 +912,7 @@ impl RenderState { // being incorrectly applied to new frames self.nested_fills.clear(); self.nested_blurs.clear(); + self.nested_shadows.clear(); // reorder by distance to the center. self.current_tile = None; self.render_in_progress = true; @@ -923,7 +961,10 @@ impl RenderState { // other already drawn elements. if let Type::Group(group) = element.shape_type { let fills = &element.fills; + let shadows = &element.shadows; self.nested_fills.push(fills.to_vec()); + self.nested_shadows.push(shadows.to_vec()); + if group.masked { let paint = skia::Paint::default(); let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint); @@ -1005,6 +1046,7 @@ impl RenderState { Type::Frame(_) | Type::Group(_) => { self.nested_fills.pop(); self.nested_blurs.pop(); + self.nested_shadows.pop(); } _ => {} } @@ -1269,6 +1311,7 @@ impl RenderState { if shadow_shape.hidden { continue; } + let clip_bounds = node_render_state .get_nested_shadow_clip_bounds(element, shadow); @@ -1382,7 +1425,6 @@ impl RenderState { if element.is_recursive() { let children_clip_bounds = node_render_state.get_children_clip_bounds(element, None); - let mut children_ids: Vec<_> = element.children_ids_iter(false).collect(); // Z-index ordering on Layouts