Merge pull request #8346 from penpot/alotor-fix-problem-text-autogrouw

🐛 Fix problem with autogrow change while editing text

.github/workflows/build-docker.yml

@@ -59,6 +59,7 @@ jobs:
           mv penpot/frontend bundle-frontend
           mv penpot/exporter bundle-exporter
           mv penpot/storybook bundle-storybook
+          mv penpot/mcp bundle-mcp
           popd
 
       - name: Set up Docker Buildx
@@ -89,6 +90,7 @@ jobs:
             backend
             exporter
             storybook
+            mcp
           labels: |
             bundle_version=${{ steps.bundles.outputs.bundle_version }}
 
@@ -152,6 +154,21 @@ jobs:
           cache-from: type=registry,ref=${{ secrets.DOCKER_REGISTRY }}/${{ env.DOCKER_IMAGE }}:buildcache
           cache-to: type=registry,ref=${{ secrets.DOCKER_REGISTRY }}/${{ env.DOCKER_IMAGE }}:buildcache,mode=max
 
+      - name: Build and push MCP Docker image
+        uses: docker/build-push-action@v6
+        env:
+          DOCKER_IMAGE: 'mcp'
+          BUNDLE_PATH: './bundle-mcp'
+        with:
+          context: ./docker/images/
+          file: ./docker/images/Dockerfile.mcp
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ secrets.DOCKER_REGISTRY }}/${{ env.DOCKER_IMAGE }}:${{ steps.vars.outputs.gh_ref }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=registry,ref=${{ secrets.DOCKER_REGISTRY }}/${{ env.DOCKER_IMAGE }}:buildcache
+          cache-to: type=registry,ref=${{ secrets.DOCKER_REGISTRY }}/${{ env.DOCKER_IMAGE }}:buildcache,mode=max
+
       - name: Notify Mattermost
         if: failure()
         uses: mattermost/action-mattermost-notify@master

CHANGES.md

@@ -1,5 +1,19 @@
 # CHANGELOG
 
+
+## 2.13.2
+
+### :bug: Bugs fixed
+
+- Fix security issue (Path Traversal Vulnerability) on fonts related RPC method
+
+
+## 2.13.1
+
+### :bug: Bugs fixed
+
+- Fix PDF Exporter outputs empty page when board has A4 format [Taiga #13181](https://tree.taiga.io/project/penpot/issue/13181)
+
 ## 2.13.0
 
 ### :heart: Community contributions (Thank you!)

backend/src/app/media.clj

@@ -35,8 +35,7 @@
    javax.xml.parsers.SAXParserFactory
    org.apache.commons.io.IOUtils
    org.im4java.core.ConvertCmd
-   org.im4java.core.IMOperation
-   org.im4java.core.Info))
+   org.im4java.core.IMOperation))
 
 (def default-max-file-size
   (* 1024 1024 10)) ; 10 MiB
@@ -224,17 +223,18 @@
   ;; If we are processing an animated gif we use the first frame with -scene 0
   (let [dim-result (sh/sh "identify" "-format" "%w %h\n" path)
         orient-result (sh/sh "identify" "-format" "%[EXIF:Orientation]\n" path)]
-    (if (and (= 0 (:exit dim-result))
-             (= 0 (:exit orient-result)))
+    (when (= 0 (:exit dim-result))
       (let [[w h] (-> (:out dim-result)
                       str/trim
                       (clojure.string/split #"\s+")
                       (->> (mapv #(Integer/parseInt %))))
-            orientation (-> orient-result :out str/trim)]
-        (case orientation
-          ("6" "8") {:width h :height w} ; Rotated 90 or 270 degrees
-          {:width w :height h}))         ; Normal or unknown orientation
-      nil)))
+            orientation-exit (:exit orient-result)
+            orientation      (-> orient-result :out str/trim)]
+        (if (= 0 orientation-exit)
+          (case orientation
+            ("6" "8") {:width h :height w} ; Rotated 90 or 270 degrees
+            {:width w :height h})          ; Normal or unknown orientation
+          {:width w :height h})))))        ; If orientation can't be read, use dimensions as-is
 
 (defmethod process :info
   [{:keys [input] :as params}]
@@ -247,26 +247,37 @@
                     :hint "uploaded svg does not provides dimensions"))
         (merge input info {:ts (ct/now) :size (fs/size path)}))
 
-      (let [instance (Info. (str path))
-            mtype'   (.getProperty instance "Mime type")]
+      (let [path-str      (str path)
+            identify-res  (sh/sh "identify" "-format" "image/%[magick]\n" path-str)
+            ;; identify prints one line per frame (animated GIFs, etc.); we take the first one
+            mtype'        (if (zero? (:exit identify-res))
+                            (-> identify-res
+                                :out
+                                str/trim
+                                (str/split #"\s+" 2)
+                                first
+                                str/lower)
+                            (ex/raise :type :validation
+                                      :code :invalid-image
+                                      :hint "invalid image"))
+            {:keys [width height]}
+            (or (get-dimensions-with-orientation path-str)
+                (do
+                  (l/warn "Failed to read image dimensions with orientation" {:path path})
+                  (ex/raise :type :validation
+                            :code :invalid-image
+                            :hint "invalid image")))]
         (when (and (string? mtype)
-                   (not= mtype mtype'))
+                   (not= (str/lower mtype) mtype'))
           (ex/raise :type :validation
                     :code :media-type-mismatch
                     :hint (str "Seems like you are uploading a file whose content does not match the extension."
                                "Expected: " mtype ". Got: " mtype')))
-        (let [{:keys [width height]}
-              (or (get-dimensions-with-orientation (str path))
-                  (do
-                    (l/warn "Failed to read image dimensions with orientation; falling back to im4java"
-                            {:path path})
-                    {:width  (.getPageWidth instance)
-                     :height (.getPageHeight instance)}))]
-          (assoc input
-                 :width  width
-                 :height height
-                 :size (fs/size path)
-                 :ts (ct/now)))))))
+        (assoc input
+               :width  width
+               :height height
+               :size (fs/size path)
+               :ts (ct/now))))))
 
 (defmethod process-error org.im4java.core.InfoException
   [error]

backend/src/app/rpc/commands/fonts.clj

@@ -89,7 +89,8 @@
 (def ^:private schema:create-font-variant
   [:map {:title "create-font-variant"}
    [:team-id ::sm/uuid]
-   [:data [:map-of ::sm/text ::sm/any]]
+   [:data [:map-of ::sm/text [:or ::sm/bytes
+                              [::sm/vec ::sm/bytes]]]]
    [:font-id ::sm/uuid]
    [:font-family ::sm/text]
    [:font-weight [::sm/one-of {:format "number"} valid-weight]]

backend/test/backend_tests/rpc_font_test.clj

@@ -275,3 +275,30 @@
       (let [res (th/run-task! :storage-gc-touched {})]
         (t/is (= 0 (:freeze res)))
         (t/is (= 3 (:delete res)))))))
+
+(t/deftest input-sanitization-1
+  (with-mocks [mock {:target 'app.rpc.quotes/check! :return nil}]
+    (let [prof    (th/create-profile* 1 {:is-active true})
+          team-id (:default-team-id prof)
+          proj-id (:default-project-id prof)
+          font-id (uuid/custom 10 1)
+
+          ttfdata (-> (io/resource "backend_tests/test_files/font-1.ttf")
+                      (io/read*))
+
+          params  {::th/type :create-font-variant
+                   ::rpc/profile-id (:id prof)
+                   :team-id team-id
+                   :font-id font-id
+                   :font-family "somefont"
+                   :font-weight 400
+                   :font-style "normal"
+                   :data {"font/ttf" "/etc/passwd"}}
+          out     (th/command! params)]
+
+      (t/is (= 0 (:call-count @mock)))
+      ;; (th/print-result! out)
+
+      (let [error      (:error out)
+            error-data (ex-data error)]
+        (t/is (th/ex-info? error))))))

common/src/app/common/features.cljc

@@ -55,6 +55,7 @@
     "design-tokens/v1"
     "text-editor/v2-html-paste"
     "text-editor/v2"
+    "text-editor-wasm/v1"
     "render-wasm/v1"
     "variants/v1"})
 
@@ -78,6 +79,7 @@
     "plugins/runtime"
     "text-editor/v2-html-paste"
     "text-editor/v2"
+    "text-editor-wasm/v1"
     "tokens/numeric-input"
     "render-wasm/v1"})
 
@@ -127,6 +129,7 @@
     :feature-design-tokens "design-tokens/v1"
     :feature-text-editor-v2 "text-editor/v2"
     :feature-text-editor-v2-html-paste "text-editor/v2-html-paste"
+    :feature-text-editor-wasm "text-editor-wasm/v1"
     :feature-render-wasm "render-wasm/v1"
     :feature-variants "variants/v1"
     :feature-token-input "tokens/numeric-input"

common/src/app/common/schema.cljc

@@ -1009,6 +1009,15 @@
      {:title "agent"
       :description "instance of clojure agent"}}))
 
+#?(:clj
+   (register!
+    {:type ::bytes
+     :pred bytes?
+     :type-properties
+     {:title "bytes"
+      :description "bytes array"}}))
+
+
 (register! ::any (mu/update-properties :any assoc :gen/gen sg/any))
 
 ;; ---- PREDICATES

docker/imagemagick/Dockerfile

@@ -24,6 +24,7 @@ RUN set -e; \
         libltdl-dev \
         liblzma-dev \
         libopenexr-dev \
+        libxml2-dev \
         libpng-dev \
         librsvg2-dev \
         libtiff-dev \
@@ -52,6 +53,7 @@ RUN set -e; \
         libfftw3-dev \
         libheif-dev \
         libjpeg-dev \
+        libxml2-dev \
         liblcms2-dev \
         libltdl-dev \
         liblzma-dev \
@@ -77,6 +79,7 @@ RUN set -e; \
         libopenjp2-7 \
         libpng16-16 \
         librsvg2-2 \
+        libxml2 \
         libtiff6 \
         libwebp7 \
         libwebpdemux2 \

docker/images/Dockerfile.backend

@@ -125,7 +125,7 @@ RUN set -ex; \
 
 COPY --from=build /opt/jre /opt/jre
 COPY --from=build /opt/node /opt/node
-COPY --from=penpotapp/imagemagick:7.1.2-0 /opt/imagick /opt/imagick
+COPY --from=penpotapp/imagemagick:7.1.2-13 /opt/imagick /opt/imagick
 
 ARG BUNDLE_PATH="./bundle-backend/"
 COPY --chown=penpot:penpot $BUNDLE_PATH /opt/penpot/backend/

docker/images/Dockerfile.exporter

@@ -107,7 +107,7 @@ RUN set -eux; \
 
 ARG BUNDLE_PATH="./bundle-exporter/"
 COPY --chown=penpot:penpot $BUNDLE_PATH /opt/penpot/exporter/
-COPY --from=penpotapp/imagemagick:7.1.2-0 /opt/imagick /opt/imagick
+COPY --from=penpotapp/imagemagick:7.1.2-13 /opt/imagick /opt/imagick
 
 WORKDIR /opt/penpot/exporter
 USER penpot:penpot

docker/images/Dockerfile.mcp

@@ -0,0 +1,58 @@
+FROM ubuntu:24.04
+LABEL maintainer="Penpot <docker@penpot.app>"
+
+ENV LANG=en_US.UTF-8 \
+    LC_ALL=en_US.UTF-8 \
+    NODE_VERSION=v22.21.1 \
+    DEBIAN_FRONTEND=noninteractive \
+    PATH=/opt/node/bin:$PATH
+
+RUN set -ex; \
+    useradd -U -M -u 1001 -s /bin/false -d /opt/penpot penpot; \
+    mkdir -p /etc/resolvconf/resolv.conf.d; \
+    echo "nameserver 127.0.0.11" > /etc/resolvconf/resolv.conf.d/tail; \
+    apt-get -qq update; \
+    apt-get -qqy --no-install-recommends install \
+      curl \
+      tzdata \
+      locales \
+      ca-certificates \
+    ; \
+    rm -rf /var/lib/apt/lists/*; \
+    echo "en_US.UTF-8 UTF-8" >> /etc/locale.gen; \
+    locale-gen; \
+    find /usr/share/i18n/locales/ -type f ! -name "en_US" ! -name "POSIX" ! -name "C" -delete;
+
+RUN set -eux; \
+    ARCH="$(dpkg --print-architecture)"; \
+    case "${ARCH}" in \
+       aarch64|arm64) \
+         BINARY_URL="https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-linux-arm64.tar.gz"; \
+         ;; \
+       amd64|x86_64) \
+         BINARY_URL="https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-linux-x64.tar.gz"; \
+         ;; \
+       *) \
+         echo "Unsupported arch: ${ARCH}"; \
+         exit 1; \
+         ;; \
+    esac; \
+    curl -LfsSo /tmp/nodejs.tar.gz ${BINARY_URL}; \
+    mkdir -p /opt/node; \
+    cd /opt/node; \
+    tar -xf /tmp/nodejs.tar.gz --strip-components=1; \
+    chown -R root /opt/node; \
+    rm -rf /tmp/nodejs.tar.gz; \
+    corepack enable; \
+    mkdir -p /opt/penpot; \
+    chown -R penpot:penpot /opt/penpot;
+
+ARG BUNDLE_PATH="./bundle-mcp/"
+COPY --chown=penpot:penpot $BUNDLE_PATH /opt/penpot/mcp/
+
+WORKDIR /opt/penpot/mcp
+USER penpot:penpot
+
+RUN ./setup
+
+CMD ["node", "index.js", "--multi-user"]

docker/images/files/nginx.conf.template

@@ -130,6 +130,7 @@ http {
         }
 
         location /readyz {
+            access_log off;
             proxy_pass $PENPOT_BACKEND_URI$request_uri;
         }
 
@@ -144,7 +145,7 @@ http {
         location / {
             include /etc/nginx/overrides/location.d/*.conf;
 
-            location ~* \.(js|css|jpg|png|svg|gif|ttf|woff|woff2|wasm)$ {
+            location ~* \.(js|css|jpg|png|svg|gif|ttf|woff|woff2|wasm|map)$ {
                 add_header Cache-Control "public, max-age=604800" always; # 7 days
             }
 
@@ -152,8 +153,10 @@ http {
                 return 301 " /404";
             }
 
+            add_header X-Frame-Options SAMEORIGIN always;
             add_header Cache-Control "no-store, no-cache, max-age=0" always;
             try_files $uri /index.html$is_args$args /index.html =404;
+
         }
     }
 }

docs/technical-guide/getting-started/index.md

@@ -8,9 +8,7 @@ desc: Customize your Penpot instance today. Learn how to install with Elestio, D
 This guide explains how to get your own Penpot instance, running on a machine you control,
 to test it, use it by you or your team, or even customize and extend it any way you like.
 
-If you need more context you can look at the <a
-href="https://community.penpot.app/t/self-hosting-penpot-i/2336" target="_blank">post
-about self-hosting</a> in Penpot community.
+For additional context, see the post <a href="https://penpot.app/blog/how-to-self-host-penpot/" target="_blank">How to self-host Penpot: A technical implementation guide</a> on the Penpot blog.
 
 <strong>The experience stays the same, whether you use
 Penpot <a href="https://design.penpot.app" target="_blank">in the cloud</a>

docs/technical-guide/getting-started/recommended-settings.md

@@ -14,7 +14,7 @@ Keep in mind that database size doesn't grow strictly proportionally with user c
 
 # About Valkey / Redis requirements
 
-"Valkey is mainly used for coordinating websocket notifications and, since Penpot 2.11, as a cache. Therefore, disk storage will not be necessary as it will use the instance's RAM.
+Valkey is mainly used for coordinating websocket notifications and, since Penpot 2.11, as a cache. Therefore, disk storage will not be necessary as it will use the instance's RAM.
 
 To prevent the cache from hogging all the system's RAM usage, it is recommended to use two configuration parameters which, both in the docker-compose.yaml provided by Penpot and in the official Helm Chart, come with default parameters that should be sufficient for most deployments:
 

exporter/src/app/renderer/pdf.cljs

@@ -38,6 +38,24 @@
                   (assoc :path "/render.html")
                   (assoc :query (u/map->query-string params)))))
 
+          (sync-page-size! [dom]
+            (bw/eval! dom
+                      (fn [elem]
+                        ;; IMPORTANT: No CLJS runtime allowed. Use only JS
+                        ;; primitives.  This runs in a context without access to
+                        ;; cljs.core. Avoid any functions that transpile to
+                        ;; cljs.core/* calls, as they will break in the browser
+                        ;; runtime.
+
+                        (let [width (.getAttribute ^js elem "width")
+                              height (.getAttribute ^js elem "height")
+                              style-node (let [node (.createElement js/document "style")]
+                                           (.appendChild (.-head js/document) node)
+                                           node)]
+                          (set! (.-textContent style-node)
+                                (dm/str "@page { size: " width "px " height "px; margin: 0; }\n"
+                                        "html, body, #app { margin: 0; padding: 0; width: " width "px; height: " height "px; overflow: visible; }"))))))
+
           (render-object [page base-uri {:keys [id] :as object}]
             (p/let [uri  (prepare-uri base-uri id)
                     path (sh/tempfile :prefix "penpot.tmp.pdf." :suffix (mime/get-extension type))]
@@ -45,6 +63,7 @@
               (bw/nav! page uri)
               (p/let [dom (bw/select page (dm/str "#screenshot-" id))]
                 (bw/wait-for dom)
+                (sync-page-size! dom)
                 (bw/screenshot dom {:full-page? true})
                 (bw/sleep page 2000) ; the good old fix with sleep
                 (bw/pdf page {:path path})

frontend/playwright/data/render-wasm/get-file-fill-blend-blurs.json

@@ -0,0 +1,147 @@
+{
+    "~:features": {
+        "~#set": [
+            "fdata/path-data",
+            "plugins/runtime",
+            "design-tokens/v1",
+            "variants/v1",
+            "layout/grid",
+            "styles/v2",
+            "fdata/objects-map",
+            "text-editor/v2",
+            "render-wasm/v1",
+            "components/v2",
+            "fdata/shape-data-type"
+        ]
+    },
+    "~:team-id": "~ud7430f09-4f59-8049-8007-6277bb7586f6",
+    "~: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": "test_color_blending",
+    "~:revn": 78,
+    "~:modified-at": "~m1770820738388",
+    "~:vern": 0,
+    "~:id": "~ub15901d7-d46d-8056-8007-8d5e34fc1f0c",
+    "~: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",
+            "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",
+            "0015-clean-shadow-color",
+            "0016-copy-fills-from-position-data-to-text-node"
+        ]
+    },
+    "~:version": 67,
+    "~:project-id": "~ud7430f09-4f59-8049-8007-6277bb765abd",
+    "~:created-at": "~m1770741329904",
+    "~:backend": "legacy-db",
+    "~:data": {
+        "~:pages": [
+            "~ub15901d7-d46d-8056-8007-8d5e34fc1f0d"
+        ],
+        "~:pages-index": {
+            "~ub15901d7-d46d-8056-8007-8d5e34fc1f0d": {
+                "~: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\",[\"~u3b7d4c1f-3b79-80e5-8007-8d5e38c5a297\",\"~udb80df91-a3a3-803b-8007-8e379b5fd50f\",\"~udb80df91-a3a3-803b-8007-8e38034ff7c8\",\"~udb80df91-a3a3-803b-8007-8e37a71c9d28\",\"~udb80df91-a3a3-803b-8007-8e384d8c53b9\",\"~udb80df91-a3a3-803b-8007-8e37c09b4084\",\"~u18522c44-655d-8050-8007-8e89f4bdc0c4\",\"~u097859f1-ca3b-80ba-8007-8e8beb99a3f5\",\"~u18522c44-655d-8050-8007-8e89f4bdc0c5\",\"~u097859f1-ca3b-80ba-8007-8e8bfca43303\",\"~ufb1f50bf-1bff-8030-8007-8e8c3bd8fcd7\",\"~u18522c44-655d-8050-8007-8e89f4bdc0c6\"]]]",
+                        "~u097859f1-ca3b-80ba-8007-8e8bfca43303": "[\"~#shape\",[\"^ \",\"~:y\",-637.0000057220459,\"~: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\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",336.9999895095825,\"~:y\",-637.000005722046]],[\"^<\",[\"^ \",\"~:x\",636.9999995231628,\"~:y\",-637.000005722046]],[\"^<\",[\"^ \",\"~:x\",636.9999995231628,\"~:y\",-337.00000858306885]],[\"^<\",[\"^ \",\"~:x\",336.9999895095825,\"~:y\",-337.00000858306885]]],\"~: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,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~u097859f1-ca3b-80ba-8007-8e8bfca43303\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:center\",\"~:stroke-width\",10,\"~:stroke-color\",\"#4bff00\",\"~:stroke-opacity\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"~:outer\",\"^N\",10,\"^O\",\"#333fbd\",\"^P\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"~:inner\",\"^N\",10,\"^O\",\"#ff0000\",\"^P\",1]],\"~:x\",336.9999895095825,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",336.9999895095825,\"~:y\",-637.0000057220459,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",336.9999895095825,\"~:y1\",-637.0000057220459,\"~:x2\",636.9999995231628,\"~:y2\",-337.00000858306885]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^11\",\"#ff0000\",\"^12\",1]],\"~:flip-x\",null,\"^W\",299.99999713897705,\"~:flip-y\",null]]",
+                        "~udb80df91-a3a3-803b-8007-8e384d8c53b9": "[\"~#shape\",[\"^ \",\"~:y\",450.99999806284904,\"~: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\",\"Ellipse\",\"~:width\",300.0000065565109,\"~:type\",\"~:circle\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1021.0000203847885,\"~:y\",450.99999806284904]],[\"^<\",[\"^ \",\"~:x\",1321.0000269412994,\"~:y\",450.99999806284904]],[\"^<\",[\"^ \",\"~:x\",1321.0000269412994,\"~:y\",751.0000142753124]],[\"^<\",[\"^ \",\"~:x\",1021.0000203847885,\"~:y\",751.0000142753124]]],\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e37b7ddd15c\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"^@\",\"~udb80df91-a3a3-803b-8007-8e384d8c53b9\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",20,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",1]],\"~:x\",1021.0000203847885,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1021.0000203847885,\"~:y\",450.99999806284904,\"^8\",300.0000065565109,\"~:height\",300.0000162124634,\"~:x1\",1021.0000203847885,\"~:y1\",450.99999806284904,\"~:x2\",1321.0000269412994,\"~:y2\",751.0000142753124]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^W\",\"#ff0000\",\"^X\",1]],\"~:flip-x\",null,\"^Q\",300.0000162124634,\"~:flip-y\",null]]",
+                        "~udb80df91-a3a3-803b-8007-8e379b5fd50f": "[\"~#shape\",[\"^ \",\"~:y\",82.00000368146124,\"~: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\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",686.7500124588994,\"~:y\",82.00000368146122]],[\"^<\",[\"^ \",\"~:x\",986.7500224724797,\"~:y\",82.00000368146122]],[\"^<\",[\"^ \",\"~:x\",986.7500224724797,\"~:y\",382.0000008204383]],[\"^<\",[\"^ \",\"~:x\",686.7500124588994,\"~:y\",382.0000008204383]]],\"~: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,\"~:r1\",0,\"~:id\",\"~udb80df91-a3a3-803b-8007-8e379b5fd50f\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",686.7500124588994,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",686.7500124588994,\"~:y\",82.00000368146124,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",686.7500124588994,\"~:y1\",82.00000368146124,\"~:x2\",986.7500224724797,\"~:y2\",382.0000008204383]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^P\",\"#ff0000\",\"^Q\",1]],\"~:flip-x\",null,\"^J\",299.99999713897705,\"~:flip-y\",null]]",
+                        "~u3b7d4c1f-3b79-80e5-8007-8d5e38c5a297": "[\"~#shape\",[\"^ \",\"~:y\",81.9999960520667,\"~: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\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",337.0000200882939,\"~:y\",81.99999605206669]],[\"^<\",[\"^ \",\"~:x\",637.0000301018742,\"~:y\",81.99999605206669]],[\"^<\",[\"^ \",\"~:x\",637.0000301018742,\"~:y\",381.99999319104376]],[\"^<\",[\"^ \",\"~:x\",337.0000200882939,\"~:y\",381.99999319104376]]],\"~: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,\"~:blur\",[\"^ \",\"~:id\",\"~u432cbb09-2ee7-80bf-8007-8d660b2f52ad\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~u3b7d4c1f-3b79-80e5-8007-8d5e38c5a297\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",337.0000200882939,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",337.0000200882939,\"~:y\",81.9999960520667,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",337.0000200882939,\"~:y1\",81.9999960520667,\"~:x2\",637.0000301018742,\"~:y2\",381.99999319104376]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^T\",\"#ff0000\",\"^U\",1]],\"~:flip-x\",null,\"^N\",299.99999713897705,\"~:flip-y\",null]]",
+                        "~ufb1f50bf-1bff-8030-8007-8e8c3bd8fcd7": "[\"~#shape\",[\"^ \",\"~:y\",-629.9999999999998,\"~: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\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1037,\"~:y\",-630]],[\"^<\",[\"^ \",\"~:x\",1337.0000100135803,\"~:y\",-630]],[\"^<\",[\"^ \",\"~:x\",1337.0000100135803,\"~:y\",-330.0000028610228]],[\"^<\",[\"^ \",\"~:x\",1037,\"~:y\",-330.0000028610228]]],\"~: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,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~ufb1f50bf-1bff-8030-8007-8e8c3bd8fcd7\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:outer\",\"~:stroke-width\",10,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"~:inner\",\"^N\",10,\"^O\",\"#ff0000\",\"^P\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"~:center\",\"^N\",10,\"^O\",\"#4bff00\",\"^P\",1]],\"~:x\",1037,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1037,\"~:y\",-629.9999999999998,\"^8\",300.0000100135803,\"~:height\",299.999997138977,\"~:x1\",1037,\"~:y1\",-629.9999999999998,\"~:x2\",1337.0000100135803,\"~:y2\",-330.0000028610228]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^11\",\"#ff0000\",\"^12\",1]],\"~:flip-x\",null,\"^W\",299.999997138977,\"~:flip-y\",null]]",
+                        "~u097859f1-ca3b-80ba-8007-8e8beb99a3f5": "[\"~#shape\",[\"^ \",\"~:y\",-626.0000057220459,\"~: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\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",687.0000123977661,\"~:y\",-626.000005722046]],[\"^<\",[\"^ \",\"~:x\",987.0000224113464,\"~:y\",-626.000005722046]],[\"^<\",[\"^ \",\"~:x\",987.0000224113464,\"~:y\",-326.00000858306885]],[\"^<\",[\"^ \",\"~:x\",687.0000123977661,\"~:y\",-326.00000858306885]]],\"~: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,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~u097859f1-ca3b-80ba-8007-8e8beb99a3f5\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",10,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"^M\",\"^N\",10,\"^O\",\"#ff0000\",\"^P\",1]],\"~:x\",687.0000123977661,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",687.0000123977661,\"~:y\",-626.0000057220459,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",687.0000123977661,\"~:y1\",-626.0000057220459,\"~:x2\",987.0000224113464,\"~:y2\",-326.00000858306885]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^[\",\"#ff0000\",\"^10\",1]],\"~:flip-x\",null,\"^U\",299.99999713897705,\"~:flip-y\",null]]",
+                        "~udb80df91-a3a3-803b-8007-8e37a71c9d28": "[\"~#shape\",[\"^ \",\"~:y\",450.99999806284904,\"~: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\",\"Ellipse\",\"~:width\",300.0000065565109,\"~:type\",\"~:circle\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",337.0000203847885,\"~:y\",450.99999806284904]],[\"^<\",[\"^ \",\"~:x\",637.0000269412994,\"~:y\",450.99999806284904]],[\"^<\",[\"^ \",\"~:x\",637.0000269412994,\"~:y\",751.0000142753124]],[\"^<\",[\"^ \",\"~:x\",337.0000203847885,\"~:y\",751.0000142753124]]],\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e37b7ddd15c\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"^@\",\"~udb80df91-a3a3-803b-8007-8e37a71c9d28\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",337.0000203847885,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",337.0000203847885,\"~:y\",450.99999806284904,\"^8\",300.0000065565109,\"~:height\",300.0000162124634,\"~:x1\",337.0000203847885,\"~:y1\",450.99999806284904,\"~:x2\",637.0000269412994,\"~:y2\",751.0000142753124]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^P\",\"#ff0000\",\"^Q\",1]],\"~:flip-x\",null,\"^J\",300.0000162124634,\"~:flip-y\",null]]",
+                        "~u18522c44-655d-8050-8007-8e89f4bdc0c5": "[\"~#shape\",[\"^ \",\"~:y\",-287.0000057220459,\"~: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\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",337.00002002716064,\"~:y\",-287.000005722046]],[\"^<\",[\"^ \",\"~:x\",637.000030040741,\"~:y\",-287.000005722046]],[\"^<\",[\"^ \",\"~:x\",637.000030040741,\"~:y\",12.999991416931152]],[\"^<\",[\"^ \",\"~:x\",337.00002002716064,\"~:y\",12.999991416931152]]],\"~: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,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~u18522c44-655d-8050-8007-8e89f4bdc0c5\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:outer\",\"~:stroke-width\",10,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"~:inner\",\"^N\",10,\"^O\",\"#ff0000\",\"^P\",1]],\"~:x\",337.00002002716064,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",337.00002002716064,\"~:y\",-287.0000057220459,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",337.00002002716064,\"~:y1\",-287.0000057220459,\"~:x2\",637.000030040741,\"~:y2\",12.999991416931152]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^10\",\"#ff0000\",\"^11\",1]],\"~:flip-x\",null,\"^V\",299.99999713897705,\"~:flip-y\",null]]",
+                        "~udb80df91-a3a3-803b-8007-8e37c09b4084": "[\"~#shape\",[\"^ \",\"~:y\",450.99999806284904,\"~: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\",\"Ellipse\",\"~:width\",300.0000065565109,\"~:type\",\"~:circle\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",679.0000203847885,\"~:y\",450.99999806284904]],[\"^<\",[\"^ \",\"~:x\",979.0000269412994,\"~:y\",450.99999806284904]],[\"^<\",[\"^ \",\"~:x\",979.0000269412994,\"~:y\",751.0000142753124]],[\"^<\",[\"^ \",\"~:x\",679.0000203847885,\"~:y\",751.0000142753124]]],\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:id\",\"~udb80df91-a3a3-803b-8007-8e37c09b4084\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",679.0000203847885,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",679.0000203847885,\"~:y\",450.99999806284904,\"^8\",300.0000065565109,\"~:height\",300.0000162124634,\"~:x1\",679.0000203847885,\"~:y1\",450.99999806284904,\"~:x2\",979.0000269412994,\"~:y2\",751.0000142753124]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^L\",\"#ff0000\",\"^M\",1]],\"~:flip-x\",null,\"^F\",300.0000162124634,\"~:flip-y\",null]]",
+                        "~u18522c44-655d-8050-8007-8e89f4bdc0c4": "[\"~#shape\",[\"^ \",\"~:y\",-287.0000057220459,\"~: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\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",686.7500123977661,\"~:y\",-287.000005722046]],[\"^<\",[\"^ \",\"~:x\",986.7500224113464,\"~:y\",-287.000005722046]],[\"^<\",[\"^ \",\"~:x\",986.7500224113464,\"~:y\",12.999991416931152]],[\"^<\",[\"^ \",\"~:x\",686.7500123977661,\"~:y\",12.999991416931152]]],\"~: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,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~u18522c44-655d-8050-8007-8e89f4bdc0c4\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",10,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",0.5],[\"^ \",\"^J\",\"^K\",\"^L\",\"^M\",\"^N\",10,\"^O\",\"#ff0000\",\"^P\",1]],\"~:x\",686.7500123977661,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",686.7500123977661,\"~:y\",-287.0000057220459,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",686.7500123977661,\"~:y1\",-287.0000057220459,\"~:x2\",986.7500224113464,\"~:y2\",12.999991416931152]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^[\",\"#ff0000\",\"^10\",1]],\"~:flip-x\",null,\"^U\",299.99999713897705,\"~:flip-y\",null]]",
+                        "~udb80df91-a3a3-803b-8007-8e38034ff7c8": "[\"~#shape\",[\"^ \",\"~:y\",82.00000368146124,\"~: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\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1036.5000048295049,\"~:y\",82.00000368146122]],[\"^<\",[\"^ \",\"~:x\",1336.5000148430852,\"~:y\",82.00000368146122]],[\"^<\",[\"^ \",\"~:x\",1336.5000148430852,\"~:y\",382.0000008204383]],[\"^<\",[\"^ \",\"~:x\",1036.5000048295049,\"~:y\",382.0000008204383]]],\"~: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,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~udb80df91-a3a3-803b-8007-8e38034ff7c8\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",10,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",1]],\"~:x\",1036.5000048295049,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1036.5000048295049,\"~:y\",82.00000368146124,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",1036.5000048295049,\"~:y1\",82.00000368146124,\"~:x2\",1336.5000148430852,\"~:y2\",382.0000008204383]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^[\",\"#ff0000\",\"^10\",1]],\"~:flip-x\",null,\"^U\",299.99999713897705,\"~:flip-y\",null]]",
+                        "~u18522c44-655d-8050-8007-8e89f4bdc0c6": "[\"~#shape\",[\"^ \",\"~:y\",-287.0000057220459,\"~: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\",300.0000100135803,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1036.5000047683716,\"~:y\",-287.000005722046]],[\"^<\",[\"^ \",\"~:x\",1336.500014781952,\"~:y\",-287.000005722046]],[\"^<\",[\"^ \",\"~:x\",1336.500014781952,\"~:y\",12.999991416931152]],[\"^<\",[\"^ \",\"~:x\",1036.5000047683716,\"~:y\",12.999991416931152]]],\"~: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,\"~:blur\",[\"^ \",\"~:id\",\"~udb80df91-a3a3-803b-8007-8e380b12ac2a\",\"^9\",\"~:layer-blur\",\"~:value\",7,\"~:hidden\",false],\"~:r1\",0,\"^B\",\"~u18522c44-655d-8050-8007-8e89f4bdc0c6\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",10,\"~:stroke-color\",\"#333fbd\",\"~:stroke-opacity\",1],[\"^ \",\"^J\",\"^K\",\"^L\",\"~:outer\",\"^N\",10,\"^O\",\"#ff0000\",\"^P\",1]],\"~:x\",1036.5000047683716,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1036.5000047683716,\"~:y\",-287.0000057220459,\"^8\",300.0000100135803,\"~:height\",299.99999713897705,\"~:x1\",1036.5000047683716,\"~:y1\",-287.0000057220459,\"~:x2\",1336.500014781952,\"~:y2\",12.999991416931152]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1],[\"^ \",\"^10\",\"#ff0000\",\"^11\",1]],\"~:flip-x\",null,\"^V\",299.99999713897705,\"~:flip-y\",null]]"
+                    }
+                },
+                "~:id": "~ub15901d7-d46d-8056-8007-8d5e34fc1f0d",
+                "~:name": "Page 1"
+            }
+        },
+        "~:id": "~ub15901d7-d46d-8056-8007-8d5e34fc1f0c",
+        "~:options": {
+            "~:components-v2": true,
+            "~:base-font-size": "16px"
+        }
+    }
+}

frontend/playwright/data/render-wasm/get-file-flex-layouts.json

@@ -22,8 +22,8 @@
     "~:has-media-trimmed": false,
     "~:comment-thread-seqn": 0,
     "~:name": "flex_index_position",
-    "~:revn": 114,
-    "~:modified-at": "~m1769430362161",
+    "~:revn": 126,
+    "~:modified-at": "~m1770978609930",
     "~:vern": 0,
     "~:id": "~u31fe2e21-73e7-80f3-8007-73894fb58240",
     "~:is-shared": false,
@@ -117,31 +117,63 @@
                 "~:name": "Page 1",
                 "~: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]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~: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,\"^I\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d50980078e\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc2f\",\"~u94eaebe4-addd-80d1-8007-79d5055d6859\",\"~u77c71dba-32ee-804c-8007-736561cf857f\"]]]",
-                        "~u77c71dba-32ee-804c-8007-736561cff457": "[\"~#shape\",[\"^ \",\"~:y\",396.00000357564704,\"~:rx\",8,\"~: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\",80,\"~:transforming\",false,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",396.00000357564704]],[\"^>\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",396.00000357564704]],[\"^>\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",476.00000357564704]],[\"^>\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",476.00000357564704]]],\"~:r2\",8,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:r1\",8,\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cff457\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:strokes\",[],\"~:x\",688.9999775886536,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",396.00000357564704,\"^9\",80,\"~:height\",80,\"~:x1\",688.9999775886536,\"~:y1\",396.00000357564704,\"~:x2\",768.9999775886536,\"~:y2\",476.00000357564704]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#e8e9ea\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^M\",80,\"~:flip-y\",null]]",
-                        "~u94eaebe4-addd-80d1-8007-79d508aa2885": "[\"~#shape\",[\"^ \",\"~:y\",612.0000188344361,\"~:rx\",8,\"~: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\",80,\"~:transforming\",false,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",604.9999165534973,\"~:y\",612.0000188344361]],[\"^>\",[\"^ \",\"~:x\",684.9999165534973,\"~:y\",612.0000188344361]],[\"^>\",[\"^ \",\"~:x\",684.9999165534973,\"~:y\",692.0000188344361]],[\"^>\",[\"^ \",\"~:x\",604.9999165534973,\"~:y\",692.0000188344361]]],\"~:r2\",8,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2885\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:strokes\",[],\"~:x\",604.9999165534973,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",604.9999165534973,\"~:y\",612.0000188344361,\"^9\",80,\"~:height\",80,\"~:x1\",604.9999165534973,\"~:y1\",612.0000188344361,\"~:x2\",684.9999165534973,\"~:y2\",692.0000188344361]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#e8e9ea\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^M\",80,\"~:flip-y\",null]]",
-                        "~u94eaebe4-addd-80d1-8007-79d508aa2886": "[\"~#shape\",[\"^ \",\"~:y\",636.0000188344361,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:rx\",8,\"~:layout-padding\",[\"^ \",\"~:p1\",8,\"~:p2\",12,\"~:p3\",8,\"~:p4\",12],\"~: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\",\"Dark / Button / Primary / Text / Default\",\"~:layout-align-items\",\"~:center\",\"~:width\",66,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",611.9999165534973,\"~:y\",636.0000188344361]],[\"^K\",[\"^ \",\"~:x\",677.9999165534973,\"~:y\",636.0000188344361]],[\"^K\",[\"^ \",\"~:x\",677.9999165534973,\"~:y\",668.0000188344361]],[\"^K\",[\"^ \",\"~:x\",611.9999165534973,\"~:y\",668.0000188344361]]],\"~:r2\",8,\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:layout-justify-content\",\"^D\",\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2886\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:strokes\",[],\"~:x\",611.9999165534973,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",611.9999165534973,\"~:y\",636.0000188344361,\"^E\",66,\"~:height\",32,\"~:x1\",611.9999165534973,\"~:y1\",636.0000188344361,\"~:x2\",677.9999165534973,\"~:y2\",668.0000188344361]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#7efff5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^17\",32,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d508aa2887\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d508aa2887": "[\"~#shape\",[\"^ \",\"~:y\",644.0000188344361,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",2,\"~:p3\",0,\"~:p4\",2],\"~: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\",\"_Utilities / Text / White\",\"~:layout-align-items\",\"~:start\",\"~:width\",42,\"~:layout-padding-type\",\"~:simple\",\"~:transforming\",false,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",623.9999165534973,\"~:y\",644.0000188344361]],[\"^K\",[\"^ \",\"~:x\",665.9999165534973,\"~:y\",644.0000188344361]],[\"^K\",[\"^ \",\"~:x\",665.9999165534973,\"~:y\",660.0000188344361]],[\"^K\",[\"^ \",\"~:x\",623.9999165534973,\"~:y\",660.0000188344361]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",6],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2887\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2886\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2886\",\"~:strokes\",[],\"~:x\",623.9999165534973,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",623.9999165534973,\"~:y\",644.0000188344361,\"^D\",42,\"~:height\",16,\"~:x1\",623.9999165534973,\"~:y1\",644.0000188344361,\"~:x2\",665.9999165534973,\"~:y2\",660.0000188344361]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",16,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d508aa2888\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d508aa2888": "[\"~#shape\",[\"^ \",\"~:y\",645.0000188344363,\"~: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\",\"~:index\",null,\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:path\",\"\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:text-align\",\"left\",\"~:font-id\",\"gfont-work-sans\",\"~:font-size\",\"12\",\"~:font-weight\",\"500\",\"~:modified-at\",\"2024-06-04T14:15:09.786Z\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"underline\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#000000\",\"~:fill-color-ref-file\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"~:fill-opacity\",1,\"~:fill-color-ref-id\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:font-family\",\"Work Sans\",\"~:text\",\"Label\"]],\"^=\",\"uppercase\",\"^>\",\"center\",\"^?\",\"gfont-work-sans\",\"^@\",\"12\",\"^A\",\"500\",\"^8\",\"paragraph\",\"^B\",\"2024-06-04T14:15:09.786Z\",\"^C\",\"500\",\"^D\",\"underline\",\"^E\",\"0\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"^K\",\"Work Sans\"]]]],\"~:vertical-align\",\"center\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^I\",1]]],\"~:hide-in-viewer\",true,\"~:name\",\"Input\",\"~:saved-component-root\",null,\"~:width\",38,\"^8\",\"^L\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",625.9999165534973,\"~:y\",645.0000188344363]],[\"^S\",[\"^ \",\"~:x\",663.9999165534973,\"~:y\",645.0000188344363]],[\"^S\",[\"^ \",\"~:x\",663.9999165534973,\"~:y\",660.0000188344359]],[\"^S\",[\"^ \",\"~:x\",625.9999165534973,\"~:y\",660.0000188344363]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2888\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2887\",\"~:position-data\",[[\"^ \",\"~:y\",659.3400268554688,\"^:\",\"1.2\",\"^<\",\"normal\",\"^=\",\"uppercase\",\"^>\",\"left\",\"^?\",\"sourcesanspro\",\"^@\",\"12\",\"^A\",\"500\",\"~:text-direction\",\"ltr\",\"^Q\",37.94000244140625,\"^C\",\"regular\",\"^D\",\"underline\",\"^E\",\"0\",\"~:x\",626.0299682617188,\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:direction\",\"ltr\",\"^K\",\"Work Sans\",\"~:height\",14.08001708984375,\"^L\",\"Label\"]],\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2887\",\"~:strokes\",[],\"~:x\",625.9999165534973,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",625.9999165534973,\"~:y\",645.0000188344363,\"^Q\",38,\"^11\",15,\"~:x1\",625.9999165534973,\"~:y1\",645.0000188344363,\"~:x2\",663.9999165534973,\"~:y2\",660.0000188344363]],\"^F\",[],\"~:flip-x\",null,\"^11\",15,\"~:flip-y\",null]]",
-                        "~u77c71dba-32ee-804c-8007-736561cff45a": "[\"~#shape\",[\"^ \",\"~:y\",429.00000357564727,\"~: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\",\"~:index\",null,\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:path\",\"\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:text-align\",\"left\",\"~:font-id\",\"gfont-work-sans\",\"~:font-size\",\"12\",\"~:font-weight\",\"500\",\"~:modified-at\",\"2024-06-04T14:15:09.786Z\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"underline\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#000000\",\"~:fill-color-ref-file\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"~:fill-opacity\",1,\"~:fill-color-ref-id\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:font-family\",\"Work Sans\",\"~:text\",\"Label\"]],\"^=\",\"uppercase\",\"^>\",\"center\",\"^?\",\"gfont-work-sans\",\"^@\",\"12\",\"^A\",\"500\",\"^8\",\"paragraph\",\"^B\",\"2024-06-04T14:15:09.786Z\",\"^C\",\"500\",\"^D\",\"underline\",\"^E\",\"0\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"^K\",\"Work Sans\"]]]],\"~:vertical-align\",\"center\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^I\",1]]],\"~:hide-in-viewer\",true,\"~:name\",\"Input\",\"~:saved-component-root\",null,\"~:width\",38,\"^8\",\"^L\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",709.9999775886536,\"~:y\",429.00000357564727]],[\"^S\",[\"^ \",\"~:x\",747.9999775886536,\"~:y\",429.00000357564727]],[\"^S\",[\"^ \",\"~:x\",747.9999775886536,\"~:y\",444.0000035756468]],[\"^S\",[\"^ \",\"~:x\",709.9999775886536,\"~:y\",444.00000357564727]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cff45a\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cff459\",\"~:position-data\",[[\"^ \",\"~:y\",443.3399963378906,\"^:\",\"1.2\",\"^<\",\"normal\",\"^=\",\"uppercase\",\"^>\",\"left\",\"^?\",\"sourcesanspro\",\"^@\",\"12\",\"^A\",\"500\",\"~:text-direction\",\"ltr\",\"^Q\",37.93994140625,\"^C\",\"regular\",\"^D\",\"underline\",\"^E\",\"0\",\"~:x\",710.030029296875,\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:direction\",\"ltr\",\"^K\",\"Work Sans\",\"~:height\",14.079986572265625,\"^L\",\"Label\"]],\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cff459\",\"~:strokes\",[],\"~:x\",709.9999775886536,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",709.9999775886536,\"~:y\",429.00000357564727,\"^Q\",38,\"^11\",15,\"~:x1\",709.9999775886536,\"~:y1\",429.00000357564727,\"~:x2\",747.9999775886536,\"~:y2\",444.00000357564727]],\"^F\",[],\"~:flip-x\",null,\"^11\",15,\"~:flip-y\",null]]",
-                        "~u77c71dba-32ee-804c-8007-736561cff459": "[\"~#shape\",[\"^ \",\"~:y\",428.00000357564704,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",2,\"~:p3\",0,\"~:p4\",2],\"~: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\",\"_Utilities / Text / White\",\"~:layout-align-items\",\"~:start\",\"~:width\",42,\"~:layout-padding-type\",\"~:simple\",\"~:transforming\",false,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",707.9999775886536,\"~:y\",428.00000357564704]],[\"^K\",[\"^ \",\"~:x\",749.9999775886536,\"~:y\",428.00000357564704]],[\"^K\",[\"^ \",\"~:x\",749.9999775886536,\"~:y\",444.00000357564704]],[\"^K\",[\"^ \",\"~:x\",707.9999775886536,\"~:y\",444.00000357564704]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",6],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cff459\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cff458\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cff458\",\"~:strokes\",[],\"~:x\",707.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",707.9999775886536,\"~:y\",428.00000357564704,\"^D\",42,\"~:height\",16,\"~:x1\",707.9999775886536,\"~:y1\",428.00000357564704,\"~:x2\",749.9999775886536,\"~:y2\",444.00000357564704]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",16,\"~:flip-y\",null,\"~:shapes\",[\"~u77c71dba-32ee-804c-8007-736561cff45a\"]]]",
-                        "~u77c71dba-32ee-804c-8007-736561cff458": "[\"~#shape\",[\"^ \",\"~:y\",420.00000357564704,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:rx\",8,\"~:layout-padding\",[\"^ \",\"~:p1\",8,\"~:p2\",12,\"~:p3\",8,\"~:p4\",12],\"~: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\",\"Dark / Button / Primary / Text / Default\",\"~:layout-align-items\",\"~:center\",\"~:width\",66,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",695.9999775886536,\"~:y\",420.00000357564704]],[\"^K\",[\"^ \",\"~:x\",761.9999775886536,\"~:y\",420.00000357564704]],[\"^K\",[\"^ \",\"~:x\",761.9999775886536,\"~:y\",452.00000357564704]],[\"^K\",[\"^ \",\"~:x\",695.9999775886536,\"~:y\",452.00000357564704]]],\"~:r2\",8,\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:layout-justify-content\",\"^D\",\"~:r1\",8,\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cff458\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:strokes\",[],\"~:x\",695.9999775886536,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",695.9999775886536,\"~:y\",420.00000357564704,\"^E\",66,\"~:height\",32,\"~:x1\",695.9999775886536,\"~:y1\",420.00000357564704,\"~:x2\",761.9999775886536,\"~:y2\",452.00000357564704]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#7efff5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^17\",32,\"~:flip-y\",null,\"~:shapes\",[\"~u77c71dba-32ee-804c-8007-736561cff459\"]]]",
-                        "~u77c71dba-32ee-804c-8007-736561cf857f": "[\"~#shape\",[\"^ \",\"~:y\",395.99997913999186,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",12,\"~:p3\",0,\"~:p4\",12],\"~: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\",\"~:wrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Board Parent 1\",\"~:layout-align-items\",\"~:start\",\"~:width\",272,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",593.0000386238098,\"~:y\",395.99997913999186]],[\"^J\",[\"^ \",\"~:x\",865.0000386238098,\"~:y\",395.99997913999186]],[\"^J\",[\"^ \",\"~:x\",865.0000386238098,\"~:y\",475.9999669761459]],[\"^J\",[\"^ \",\"~:x\",593.0000386238098,\"~:y\",475.9999669761459]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cf857f\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",593.0000386238098,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",593.0000386238098,\"~:y\",395.99997913999186,\"^D\",272,\"~:height\",79.99998783615405,\"~:x1\",593.0000386238098,\"~:y1\",395.99997913999186,\"~:x2\",865.0000386238098,\"~:y2\",475.9999669761459]],\"~:fills\",[],\"~:flip-x\",null,\"^15\",79.99998783615405,\"~:flip-y\",null,\"~:shapes\",[\"~u77c71dba-32ee-804c-8007-736561cf8584\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d50980078e": "[\"~#shape\",[\"^ \",\"~:y\",720.0000478045426,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",12,\"~:p3\",0,\"~:p4\",12],\"~: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\",\"~:wrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Board Parent 4\",\"~:layout-align-items\",\"~:start\",\"~:width\",272,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",592.9998555183411,\"~:y\",720.0000478045426]],[\"^J\",[\"^ \",\"~:x\",864.9998555183411,\"~:y\",720.0000478045426]],[\"^J\",[\"^ \",\"~:x\",864.9998555183411,\"~:y\",800.0000356406968]],[\"^J\",[\"^ \",\"~:x\",592.9998555183411,\"~:y\",800.0000356406968]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d50980078e\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:column-reverse\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",592.9998555183411,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",592.9998555183411,\"~:y\",720.0000478045426,\"^D\",272,\"~:height\",79.9999878361541,\"~:x1\",592.9998555183411,\"~:y1\",720.0000478045426,\"~:x2\",864.9998555183411,\"~:y2\",800.0000356406968]],\"~:fills\",[],\"~:flip-x\",null,\"^15\",79.9999878361541,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d50980078f\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d50980078f": "[\"~#shape\",[\"^ \",\"~:y\",719.9999806874634,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"Board Child\",\"~:width\",80,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",604.9999775886536,\"~:y\",719.9999806874634]],[\"^;\",[\"^ \",\"~:x\",684.9999775886536,\"~:y\",719.9999806874634]],[\"^;\",[\"^ \",\"~:x\",684.9999775886536,\"~:y\",799.9999806874634]],[\"^;\",[\"^ \",\"~:x\",604.9999775886536,\"~:y\",799.9999806874634]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078e\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078e\",\"~:strokes\",[],\"~:x\",604.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",604.9999775886536,\"~:y\",719.9999806874634,\"^7\",80,\"~:height\",80,\"~:x1\",604.9999775886536,\"~:y1\",719.9999806874634,\"~:x2\",684.9999775886536,\"~:y2\",799.9999806874634]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",80,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d509800790\",\"~u94eaebe4-addd-80d1-8007-79d509800791\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d508a9dc2f": "[\"~#shape\",[\"^ \",\"~:y\",612.000024916359,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",12,\"~:p3\",0,\"~:p4\",12],\"~: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\",\"~:wrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Board Parent 3\",\"~:layout-align-items\",\"~:start\",\"~:width\",272,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",592.9999165534973,\"~:y\",612.000024916359]],[\"^J\",[\"^ \",\"~:x\",864.9999165534973,\"~:y\",612.000024916359]],[\"^J\",[\"^ \",\"~:x\",864.9999165534973,\"~:y\",692.0000127525132]],[\"^J\",[\"^ \",\"~:x\",592.9999165534973,\"~:y\",692.0000127525132]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc2f\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",592.9999165534973,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",592.9999165534973,\"~:y\",612.000024916359,\"^D\",272,\"~:height\",79.9999878361541,\"~:x1\",592.9999165534973,\"~:y1\",612.000024916359,\"~:x2\",864.9999165534973,\"~:y2\",692.0000127525132]],\"~:fills\",[],\"~:flip-x\",null,\"^15\",79.9999878361541,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d509800790": "[\"~#shape\",[\"^ \",\"~:y\",720.0000417226197,\"~:rx\",8,\"~: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\",80,\"~:transforming\",false,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",604.9998555183411,\"~:y\",720.0000417226197]],[\"^>\",[\"^ \",\"~:x\",684.9998555183411,\"~:y\",720.0000417226197]],[\"^>\",[\"^ \",\"~:x\",684.9998555183411,\"~:y\",800.0000417226197]],[\"^>\",[\"^ \",\"~:x\",604.9998555183411,\"~:y\",800.0000417226197]]],\"~:r2\",8,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d509800790\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:strokes\",[],\"~:x\",604.9998555183411,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",604.9998555183411,\"~:y\",720.0000417226197,\"^9\",80,\"~:height\",80,\"~:x1\",604.9998555183411,\"~:y1\",720.0000417226197,\"~:x2\",684.9998555183411,\"~:y2\",800.0000417226197]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#e8e9ea\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^M\",80,\"~:flip-y\",null]]",
-                        "~u94eaebe4-addd-80d1-8007-79d508a9dc30": "[\"~#shape\",[\"^ \",\"~:y\",612.0000188344361,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"Board Child\",\"~:width\",80,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",604.9999775886536,\"~:y\",612.0000188344361]],[\"^;\",[\"^ \",\"~:x\",684.9999775886536,\"~:y\",612.0000188344361]],[\"^;\",[\"^ \",\"~:x\",684.9999775886536,\"~:y\",692.0000188344361]],[\"^;\",[\"^ \",\"~:x\",604.9999775886536,\"~:y\",692.0000188344361]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc2f\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc2f\",\"~:strokes\",[],\"~:x\",604.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",604.9999775886536,\"~:y\",612.0000188344361,\"^7\",80,\"~:height\",80,\"~:x1\",604.9999775886536,\"~:y1\",612.0000188344361,\"~:x2\",684.9999775886536,\"~:y2\",692.0000188344361]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",80,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d508aa2885\",\"~u94eaebe4-addd-80d1-8007-79d508aa2886\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d509800791": "[\"~#shape\",[\"^ \",\"~:y\",744.0000417226197,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:rx\",8,\"~:layout-padding\",[\"^ \",\"~:p1\",8,\"~:p2\",12,\"~:p3\",8,\"~:p4\",12],\"~: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\",\"Dark / Button / Primary / Text / Default\",\"~:layout-align-items\",\"~:center\",\"~:width\",66,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",611.9998555183411,\"~:y\",744.0000417226197]],[\"^K\",[\"^ \",\"~:x\",677.9998555183411,\"~:y\",744.0000417226197]],[\"^K\",[\"^ \",\"~:x\",677.9998555183411,\"~:y\",776.0000417226197]],[\"^K\",[\"^ \",\"~:x\",611.9998555183411,\"~:y\",776.0000417226197]]],\"~:r2\",8,\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:layout-justify-content\",\"^D\",\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d509800791\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:strokes\",[],\"~:x\",611.9998555183411,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",611.9998555183411,\"~:y\",744.0000417226197,\"^E\",66,\"~:height\",32,\"~:x1\",611.9998555183411,\"~:y1\",744.0000417226197,\"~:x2\",677.9998555183411,\"~:y2\",776.0000417226197]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#7efff5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^17\",32,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d509800792\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d509800792": "[\"~#shape\",[\"^ \",\"~:y\",752.0000417226197,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",2,\"~:p3\",0,\"~:p4\",2],\"~: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\",\"_Utilities / Text / White\",\"~:layout-align-items\",\"~:start\",\"~:width\",42,\"~:layout-padding-type\",\"~:simple\",\"~:transforming\",false,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",623.9998555183411,\"~:y\",752.0000417226197]],[\"^K\",[\"^ \",\"~:x\",665.9998555183411,\"~:y\",752.0000417226197]],[\"^K\",[\"^ \",\"~:x\",665.9998555183411,\"~:y\",768.0000417226197]],[\"^K\",[\"^ \",\"~:x\",623.9998555183411,\"~:y\",768.0000417226197]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",6],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d509800792\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d509800791\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d509800791\",\"~:strokes\",[],\"~:x\",623.9998555183411,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",623.9998555183411,\"~:y\",752.0000417226197,\"^D\",42,\"~:height\",16,\"~:x1\",623.9998555183411,\"~:y1\",752.0000417226197,\"~:x2\",665.9998555183411,\"~:y2\",768.0000417226197]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",16,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d509800793\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d509800793": "[\"~#shape\",[\"^ \",\"~:y\",753.0000417226199,\"~: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\",\"~:index\",null,\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:path\",\"\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:text-align\",\"left\",\"~:font-id\",\"gfont-work-sans\",\"~:font-size\",\"12\",\"~:font-weight\",\"500\",\"~:modified-at\",\"2024-06-04T14:15:09.786Z\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"underline\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#000000\",\"~:fill-color-ref-file\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"~:fill-opacity\",1,\"~:fill-color-ref-id\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:font-family\",\"Work Sans\",\"~:text\",\"Label\"]],\"^=\",\"uppercase\",\"^>\",\"center\",\"^?\",\"gfont-work-sans\",\"^@\",\"12\",\"^A\",\"500\",\"^8\",\"paragraph\",\"^B\",\"2024-06-04T14:15:09.786Z\",\"^C\",\"500\",\"^D\",\"underline\",\"^E\",\"0\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"^K\",\"Work Sans\"]]]],\"~:vertical-align\",\"center\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^I\",1]]],\"~:hide-in-viewer\",true,\"~:name\",\"Input\",\"~:saved-component-root\",null,\"~:width\",38,\"^8\",\"^L\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",625.9998555183411,\"~:y\",753.0000417226199]],[\"^S\",[\"^ \",\"~:x\",663.9998555183411,\"~:y\",753.0000417226199]],[\"^S\",[\"^ \",\"~:x\",663.9998555183411,\"~:y\",768.0000417226195]],[\"^S\",[\"^ \",\"~:x\",625.9998555183411,\"~:y\",768.0000417226199]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d509800793\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d509800792\",\"~:position-data\",[[\"^ \",\"~:y\",767.340087890625,\"^:\",\"1.2\",\"^<\",\"normal\",\"^=\",\"uppercase\",\"^>\",\"left\",\"^?\",\"sourcesanspro\",\"^@\",\"12\",\"^A\",\"500\",\"~:text-direction\",\"ltr\",\"^Q\",37.93994140625,\"^C\",\"regular\",\"^D\",\"underline\",\"^E\",\"0\",\"~:x\",626.0299072265625,\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:direction\",\"ltr\",\"^K\",\"Work Sans\",\"~:height\",14.08001708984375,\"^L\",\"Label\"]],\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d509800792\",\"~:strokes\",[],\"~:x\",625.9998555183411,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",625.9998555183411,\"~:y\",753.0000417226199,\"^Q\",38,\"^11\",15,\"~:x1\",625.9998555183411,\"~:y1\",753.0000417226199,\"~:x2\",663.9998555183411,\"~:y2\",768.0000417226199]],\"^F\",[],\"~:flip-x\",null,\"^11\",15,\"~:flip-y\",null]]",
-                        "~u77c71dba-32ee-804c-8007-736561cf8584": "[\"~#shape\",[\"^ \",\"~:y\",396.00000357564704,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"Board Child\",\"~:width\",80,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",396.00000357564704]],[\"^;\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",396.00000357564704]],[\"^;\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",476.00000357564704]],[\"^;\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",476.00000357564704]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cf857f\",\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cf857f\",\"~:strokes\",[],\"~:x\",688.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",396.00000357564704,\"^7\",80,\"~:height\",80,\"~:x1\",688.9999775886536,\"~:y1\",396.00000357564704,\"~:x2\",768.9999775886536,\"~:y2\",476.00000357564704]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",80,\"~:flip-y\",null,\"~:shapes\",[\"~u77c71dba-32ee-804c-8007-736561cff457\",\"~u77c71dba-32ee-804c-8007-736561cff458\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d5055d6859": "[\"~#shape\",[\"^ \",\"~:y\",504.00000202817546,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",12,\"~:p3\",0,\"~:p4\",12],\"~: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\",\"~:wrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Board Parent 2\",\"~:layout-align-items\",\"~:start\",\"~:width\",272,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",592.9999775886536,\"~:y\",504.00000202817546]],[\"^J\",[\"^ \",\"~:x\",864.9999775886536,\"~:y\",504.00000202817546]],[\"^J\",[\"^ \",\"~:x\",864.9999775886536,\"~:y\",583.9999898643296]],[\"^J\",[\"^ \",\"~:x\",592.9999775886536,\"~:y\",583.9999898643296]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d6859\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:row-reverse\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",592.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",592.9999775886536,\"~:y\",504.00000202817546,\"^D\",272,\"~:height\",79.9999878361541,\"~:x1\",592.9999775886536,\"~:y1\",504.00000202817546,\"~:x2\",864.9999775886536,\"~:y2\",583.9999898643296]],\"~:fills\",[],\"~:flip-x\",null,\"^15\",79.9999878361541,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d5055d685a\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d5055d685a": "[\"~#shape\",[\"^ \",\"~:y\",503.9999959462525,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"Board Child\",\"~:width\",80,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",503.9999959462525]],[\"^;\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",503.9999959462525]],[\"^;\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",583.9999959462525]],[\"^;\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",583.9999959462525]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d6859\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d6859\",\"~:strokes\",[],\"~:x\",688.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",503.9999959462525,\"^7\",80,\"~:height\",80,\"~:x1\",688.9999775886536,\"~:y1\",503.9999959462525,\"~:x2\",768.9999775886536,\"~:y2\",583.9999959462525]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",80,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d5055d685b\",\"~u94eaebe4-addd-80d1-8007-79d5055d685c\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d5055d685b": "[\"~#shape\",[\"^ \",\"~:y\",503.9999959462525,\"~:rx\",8,\"~: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\",80,\"~:transforming\",false,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",503.9999959462525]],[\"^>\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",503.9999959462525]],[\"^>\",[\"^ \",\"~:x\",768.9999775886536,\"~:y\",583.9999959462525]],[\"^>\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",583.9999959462525]]],\"~:r2\",8,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685b\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:strokes\",[],\"~:x\",688.9999775886536,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",688.9999775886536,\"~:y\",503.9999959462525,\"^9\",80,\"~:height\",80,\"~:x1\",688.9999775886536,\"~:y1\",503.9999959462525,\"~:x2\",768.9999775886536,\"~:y2\",583.9999959462525]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#e8e9ea\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^M\",80,\"~:flip-y\",null]]",
-                        "~u94eaebe4-addd-80d1-8007-79d5055d685c": "[\"~#shape\",[\"^ \",\"~:y\",527.9999959462525,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:rx\",8,\"~:layout-padding\",[\"^ \",\"~:p1\",8,\"~:p2\",12,\"~:p3\",8,\"~:p4\",12],\"~: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\",\"Dark / Button / Primary / Text / Default\",\"~:layout-align-items\",\"~:center\",\"~:width\",66,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",695.9999775886536,\"~:y\",527.9999959462525]],[\"^K\",[\"^ \",\"~:x\",761.9999775886536,\"~:y\",527.9999959462525]],[\"^K\",[\"^ \",\"~:x\",761.9999775886536,\"~:y\",559.9999959462525]],[\"^K\",[\"^ \",\"~:x\",695.9999775886536,\"~:y\",559.9999959462525]]],\"~:r2\",8,\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:layout-justify-content\",\"^D\",\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685c\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:strokes\",[],\"~:x\",695.9999775886536,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",695.9999775886536,\"~:y\",527.9999959462525,\"^E\",66,\"~:height\",32,\"~:x1\",695.9999775886536,\"~:y1\",527.9999959462525,\"~:x2\",761.9999775886536,\"~:y2\",559.9999959462525]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#7efff5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^17\",32,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d5055d685d\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d5055d685d": "[\"~#shape\",[\"^ \",\"~:y\",535.9999959462525,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",2,\"~:p3\",0,\"~:p4\",2],\"~: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\",\"_Utilities / Text / White\",\"~:layout-align-items\",\"~:start\",\"~:width\",42,\"~:layout-padding-type\",\"~:simple\",\"~:transforming\",false,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",707.9999775886536,\"~:y\",535.9999959462525]],[\"^K\",[\"^ \",\"~:x\",749.9999775886536,\"~:y\",535.9999959462525]],[\"^K\",[\"^ \",\"~:x\",749.9999775886536,\"~:y\",551.9999959462525]],[\"^K\",[\"^ \",\"~:x\",707.9999775886536,\"~:y\",551.9999959462525]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",6],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685d\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685c\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685c\",\"~:strokes\",[],\"~:x\",707.9999775886536,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",707.9999775886536,\"~:y\",535.9999959462525,\"^D\",42,\"~:height\",16,\"~:x1\",707.9999775886536,\"~:y1\",535.9999959462525,\"~:x2\",749.9999775886536,\"~:y2\",551.9999959462525]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",16,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d5055d685e\"]]]",
-                        "~u94eaebe4-addd-80d1-8007-79d5055d685e": "[\"~#shape\",[\"^ \",\"~:y\",536.9999959462527,\"~: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\",\"~:index\",null,\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:path\",\"\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:text-align\",\"left\",\"~:font-id\",\"gfont-work-sans\",\"~:font-size\",\"12\",\"~:font-weight\",\"500\",\"~:modified-at\",\"2024-06-04T14:15:09.786Z\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"underline\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#000000\",\"~:fill-color-ref-file\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"~:fill-opacity\",1,\"~:fill-color-ref-id\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:font-family\",\"Work Sans\",\"~:text\",\"Label\"]],\"^=\",\"uppercase\",\"^>\",\"center\",\"^?\",\"gfont-work-sans\",\"^@\",\"12\",\"^A\",\"500\",\"^8\",\"paragraph\",\"^B\",\"2024-06-04T14:15:09.786Z\",\"^C\",\"500\",\"^D\",\"underline\",\"^E\",\"0\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"^K\",\"Work Sans\"]]]],\"~:vertical-align\",\"center\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^I\",1]]],\"~:hide-in-viewer\",true,\"~:name\",\"Input\",\"~:saved-component-root\",null,\"~:width\",38,\"^8\",\"^L\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",709.9999775886536,\"~:y\",536.9999959462527]],[\"^S\",[\"^ \",\"~:x\",747.9999775886536,\"~:y\",536.9999959462527]],[\"^S\",[\"^ \",\"~:x\",747.9999775886536,\"~:y\",551.9999959462523]],[\"^S\",[\"^ \",\"~:x\",709.9999775886536,\"~:y\",551.9999959462527]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685e\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685d\",\"~:position-data\",[[\"^ \",\"~:y\",551.3400268554688,\"^:\",\"1.2\",\"^<\",\"normal\",\"^=\",\"uppercase\",\"^>\",\"left\",\"^?\",\"sourcesanspro\",\"^@\",\"12\",\"^A\",\"500\",\"~:text-direction\",\"ltr\",\"^Q\",37.93994140625,\"^C\",\"regular\",\"^D\",\"underline\",\"^E\",\"0\",\"~:x\",710.030029296875,\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:direction\",\"ltr\",\"^K\",\"Work Sans\",\"~:height\",14.08001708984375,\"^L\",\"Label\"]],\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685d\",\"~:strokes\",[],\"~:x\",709.9999775886536,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",709.9999775886536,\"~:y\",536.9999959462527,\"^Q\",38,\"^11\",15,\"~:x1\",709.9999775886536,\"~:y1\",536.9999959462527,\"~:x2\",747.9999775886536,\"~:y2\",551.9999959462527]],\"^F\",[],\"~:flip-x\",null,\"^11\",15,\"~:flip-y\",null]]"
+                        "~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]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~: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,\"^I\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d50980078e\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc2f\",\"~u94eaebe4-addd-80d1-8007-79d5055d6859\",\"~u77c71dba-32ee-804c-8007-736561cf857f\",\"~u9299427e-8172-80bb-8007-90e7059421c0\",\"~u9299427e-8172-80bb-8007-90e71cbb9fea\",\"~u9299427e-8172-80bb-8007-90e71fba0f7d\",\"~u9299427e-8172-80bb-8007-90e72469bf8c\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e71fba0f82": "[\"~#shape\",[\"^ \",\"~:y\",210.0000271241638,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",null,\"~:index\",null,\"~:name\",\"base-background\",\"~:width\",24,\"~:type\",\"~:rect\",\"~:svg-attrs\",[\"^ \",\"~:fill\",\"none\",\"~:stroke-linejoin\",\"round\",\"~:stroke-linecap\",\"round\",\"~:id\",\"base-background\"],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1140,\"~:y\",210.0000271241638]],[\"^?\",[\"^ \",\"~:x\",1164,\"~:y\",210.0000271241638]],[\"^?\",[\"^ \",\"~:x\",1164,\"~:y\",234.0000271241638]],[\"^?\",[\"^ \",\"~:x\",1140,\"~:y\",234.0000271241638]]],\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c5\",\"~: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\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:hidden\",true,\"^=\",\"~u9299427e-8172-80bb-8007-90e71fba0f82\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f81\",\"~:svg-viewbox\",[\"^ \",\"~:y\",0,\"~:y1\",0,\"^6\",24,\"~:x\",0,\"~:x1\",0,\"~:y2\",24,\"~:x2\",24,\"~:height\",24],\"~:svg-defs\",[\"^ \"],\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f81\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-color\",\"#ffffff\",\"~:stroke-opacity\",1,\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",2]],\"~:x\",1140,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1140,\"~:y\",210.0000271241638,\"^6\",24,\"^K\",24,\"^H\",1140,\"^G\",210.0000271241638,\"^J\",1164,\"^I\",234.0000271241638]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",24,\"~:flip-y\",null]]",
+                        "~u9299427e-8172-80bb-8007-90e7059421c2": "[\"~#shape\",[\"^ \",\"~:y\",198.00002998518676,\"~:hide-fill-on-export\",false,\"~:layout-item-absolute\",true,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",0,\"~:p3\",0,\"~: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\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"add-favorites\",\"~:layout-align-items\",\"~:center\",\"~:width\",48,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:touched\",[\"~#set\",[\"^2\",\"~:layout-item-z-index\"]],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",792,\"~:y\",198.00002998518676]],[\"^P\",[\"^ \",\"~:x\",840,\"~:y\",198.00002998518676]],[\"^P\",[\"^ \",\"~:x\",840,\"~:y\",246.00002426314086]],[\"^P\",[\"^ \",\"~:x\",792,\"~:y\",246.00002426314086]]],\"~:r2\",50,\"~:shape-ref\",\"~uc8b014fe-f285-8021-8007-8ea400bd9406\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",50,\"~:layout-justify-content\",\"^F\",\"~:r1\",50,\"~:id\",\"~u9299427e-8172-80bb-8007-90e7059421c2\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e7059421c0\",\"~:layout-flex-dir\",\"~:row\",\"~:applied-tokens\",[\"^ \",\"~:fill\",\"color.bg.default\"],\"~:layout-align-content\",\"~:stretch\",\"~:component-id\",\"~uc8b014fe-f285-8021-8007-8ea447a0bc30\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e7059421c0\",\"~:strokes\",[],\"~:x\",792,\"~:proportion\",1,\"~:r4\",50,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",792,\"~:y\",198.00002998518676,\"^G\",48,\"~:height\",47.9999942779541,\"~:x1\",792,\"~:y1\",198.00002998518676,\"~:x2\",840,\"~:y2\",246.00002426314086]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#ffffff\",\"~:fill-opacity\",0.3]],\"~:flip-x\",null,\"^1?\",47.9999942779541,\"~:component-file\",\"~ud0eb4518-f33d-81e1-8007-8fe418fea255\",\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e7059421c4\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e71fba0f83": "[\"~#shape\",[\"^ \",\"~:y\",212.99997181105346,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"svg-path\",\"~:width\",20,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1142,\"~:y\",212.99997181105346]],[\"^;\",[\"^ \",\"~:x\",1162,\"~:y\",212.99997181105346]],[\"^;\",[\"^ \",\"~:x\",1162,\"~:y\",230.99997181105346]],[\"^;\",[\"^ \",\"~:x\",1142,\"~:y\",230.99997181105346]]],\"~:r2\",0,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c6\",\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e71fba0f83\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f81\",\"~:applied-tokens\",[\"^ \"],\"~:component-id\",\"~uc8b014fe-f285-8021-8007-8ea4f64a1c9b\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f81\",\"~:strokes\",[],\"~:x\",1142,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1142,\"~:y\",212.99997181105346,\"^7\",20,\"~:height\",18,\"~:x1\",1142,\"~:y1\",212.99997181105346,\"~:x2\",1162,\"~:y2\",230.99997181105346]],\"~:fills\",[],\"~:flip-x\",null,\"^N\",18,\"~:component-file\",\"~ud0eb4518-f33d-81e1-8007-8fe418fea255\",\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e71fba0f84\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e7059421c3": "[\"~#shape\",[\"^ \",\"~:y\",192.00001259178498,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"patinegro\",\"~:width\",264.80230943863717,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",579.9999793759137,\"~:y\",192.00001259178498]],[\"^9\",[\"^ \",\"~:x\",844.8022888145506,\"~:y\",192.00001259178498]],[\"^9\",[\"^ \",\"~:x\",844.8022888145506,\"~:y\",388.1131514739925]],[\"^9\",[\"^ \",\"~:x\",579.9999793759137,\"~:y\",388.1131514739925]]],\"~:r2\",0,\"~:proportion-lock\",true,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e7059421c3\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e7059421c1\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e7059421c1\",\"~:strokes\",[],\"~:x\",579.9999793759134,\"~:proportion\",1.3487940630797774,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",579.9999793759134,\"~:y\",192.00001259178498,\"^5\",264.80230943863717,\"~:height\",196.11313888220752,\"~:x1\",579.9999793759134,\"~:y1\",192.00001259178498,\"~:x2\",844.8022888145506,\"~:y2\",388.1131514739925]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#b73d3d\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^H\",196.11313888220752,\"~:flip-y\",null]]",
+                        "~u9299427e-8172-80bb-8007-90e71fba0f80": "[\"~#shape\",[\"^ \",\"~:y\",192.00001259178498,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"patinegro\",\"~:width\",264.80230943863717,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",915.9999793759137,\"~:y\",192.00001259178498]],[\"^9\",[\"^ \",\"~:x\",1180.8022888145506,\"~:y\",192.00001259178498]],[\"^9\",[\"^ \",\"~:x\",1180.8022888145506,\"~:y\",388.1131514739925]],[\"^9\",[\"^ \",\"~:x\",915.9999793759137,\"~:y\",388.1131514739925]]],\"~:r2\",0,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c3\",\"~:proportion-lock\",true,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e71fba0f80\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f7e\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f7e\",\"~:strokes\",[],\"~:x\",915.9999793759134,\"~:proportion\",1.3487940630797774,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",915.9999793759134,\"~:y\",192.00001259178498,\"^5\",264.80230943863717,\"~:height\",196.11313888220752,\"~:x1\",915.9999793759134,\"~:y1\",192.00001259178498,\"~:x2\",1180.8022888145506,\"~:y2\",388.1131514739925]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#b73d3d\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^I\",196.11313888220752,\"~:flip-y\",null]]",
+                        "~u9299427e-8172-80bb-8007-90e7059421c0": "[\"~#shape\",[\"^ \",\"~:y\",191.99998474121094,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",0,\"~:p3\",0,\"~: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\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"card-img / patinegro\",\"~:layout-align-items\",\"~:start\",\"~:variant-name\",\"patinegro\",\"~:width\",265,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",580,\"~:y\",191.99998474121094]],[\"^M\",[\"^ \",\"~:x\",845,\"~:y\",191.99998474121094]],[\"^M\",[\"^ \",\"~:x\",845,\"~:y\",369.99997875688996]],[\"^M\",[\"^ \",\"~:x\",580,\"~:y\",369.99997875688996]]],\"~:r2\",20,\"~:component-root\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:r3\",20,\"~:layout-justify-content\",\"^E\",\"~:r1\",20,\"~:id\",\"~u9299427e-8172-80bb-8007-90e7059421c0\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:component-id\",\"~u9299427e-8172-80bb-8007-90e7059a83e2\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",580,\"~:main-instance\",true,\"~:proportion\",1,\"~:r4\",20,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",580,\"~:y\",191.99998474121094,\"^G\",265,\"~:height\",177.99999401567902,\"~:x1\",580,\"~:y1\",191.99998474121094,\"~:x2\",845,\"~:y2\",369.99997875688996]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^1=\",177.99999401567902,\"~:component-file\",\"~u31fe2e21-73e7-80f3-8007-73894fb58240\",\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e7059421c1\",\"~u9299427e-8172-80bb-8007-90e7059421c2\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e71fba0f81": "[\"~#shape\",[\"^ \",\"~:y\",209.99999660658568,\"~:rx\",0,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",null,\"~:index\",null,\"~:hide-in-viewer\",true,\"~:name\",\"heart\",\"~:width\",24,\"~:type\",\"~:frame\",\"~:svg-attrs\",[\"^ \",\"^8\",\"24\",\"~:height\",\"24\"],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1140,\"~:y\",209.99999660658568]],[\"^>\",[\"^ \",\"~:x\",1164,\"~:y\",209.99999660658568]],[\"^>\",[\"^ \",\"~:x\",1164,\"~:y\",233.99999660658568]],[\"^>\",[\"^ \",\"~:x\",1140,\"~:y\",233.99999660658568]]],\"~:r2\",0,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c4\",\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",0,\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e71fba0f81\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f7f\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f7f\",\"~:strokes\",[],\"~:x\",1140,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1140,\"~:y\",209.99999660658568,\"^8\",24,\"^<\",24,\"~:x1\",1140,\"~:y1\",209.99999660658568,\"~:x2\",1164,\"~:y2\",233.99999660658568]],\"~:fills\",[],\"~:flip-x\",null,\"~:ry\",0,\"^<\",24,\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e71fba0f82\",\"~u9299427e-8172-80bb-8007-90e71fba0f83\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e7059421c1": "[\"~#shape\",[\"^ \",\"~:y\",191.99999475401955,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"img-city\",\"~:width\",265,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",580,\"~:y\",191.99999475401978]],[\"^;\",[\"^ \",\"~:x\",845,\"~:y\",191.99999475401978]],[\"^;\",[\"^ \",\"~:x\",845,\"~:y\",369.9899634401968]],[\"^;\",[\"^ \",\"~:x\",580,\"~:y\",369.9899634401968]]],\"~:r2\",0,\"~:layout-item-h-sizing\",\"~:fill\",\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:layout-item-v-sizing\",\"^>\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e7059421c1\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e7059421c0\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e7059421c0\",\"~:strokes\",[],\"~:x\",580,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",580,\"~:y\",191.99999475401955,\"^7\",265,\"~:height\",177.989968686177,\"~:x1\",580,\"~:y1\",191.99999475401955,\"~:x2\",845,\"~:y2\",369.98996344019656]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^M\",177.989968686177,\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e7059421c3\"]]]",
+                        "~u77c71dba-32ee-804c-8007-736561cff457": "[\"~#shape\",[\"^ \",\"~:y\",222.00000357564704,\"~:rx\",8,\"~: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\",80,\"~:transforming\",false,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",379.0000081062317,\"~:y\",222.00000357564704]],[\"^>\",[\"^ \",\"~:x\",459.0000081062317,\"~:y\",222.00000357564704]],[\"^>\",[\"^ \",\"~:x\",459.0000081062317,\"~:y\",302.00000357564704]],[\"^>\",[\"^ \",\"~:x\",379.0000081062317,\"~:y\",302.00000357564704]]],\"~:r2\",8,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:r1\",8,\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cff457\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:strokes\",[],\"~:x\",379.0000081062317,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",379.0000081062317,\"~:y\",222.00000357564704,\"^9\",80,\"~:height\",80,\"~:x1\",379.0000081062317,\"~:y1\",222.00000357564704,\"~:x2\",459.0000081062317,\"~:y2\",302.00000357564704]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#e8e9ea\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^M\",80,\"~:flip-y\",null]]",
+                        "~u9299427e-8172-80bb-8007-90e7059421c6": "[\"~#shape\",[\"^ \",\"~:y\",212.99997181105346,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"svg-path\",\"~:width\",20,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",806,\"~:y\",212.99997181105346]],[\"^;\",[\"^ \",\"~:x\",826,\"~:y\",212.99997181105346]],[\"^;\",[\"^ \",\"~:x\",826,\"~:y\",230.99997181105346]],[\"^;\",[\"^ \",\"~:x\",806,\"~:y\",230.99997181105346]]],\"~:r2\",0,\"~:shape-ref\",\"~uc8b014fe-f285-8021-8007-8ea51856a422\",\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e7059421c6\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e7059421c4\",\"~:applied-tokens\",[\"^ \"],\"~:component-id\",\"~uc8b014fe-f285-8021-8007-8ea4f64a1c9b\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e7059421c4\",\"~:strokes\",[],\"~:x\",806,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",806,\"~:y\",212.99997181105346,\"^7\",20,\"~:height\",18,\"~:x1\",806,\"~:y1\",212.99997181105346,\"~:x2\",826,\"~:y2\",230.99997181105346]],\"~:fills\",[],\"~:flip-x\",null,\"^N\",18,\"~:component-file\",\"~ud0eb4518-f33d-81e1-8007-8fe418fea255\",\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e705944588\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d508aa2885": "[\"~#shape\",[\"^ \",\"~:y\",437.999988316858,\"~:rx\",8,\"~: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\",80,\"~:transforming\",false,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",295.0000081062317,\"~:y\",437.999988316858]],[\"^>\",[\"^ \",\"~:x\",375.0000081062317,\"~:y\",437.999988316858]],[\"^>\",[\"^ \",\"~:x\",375.0000081062317,\"~:y\",517.999988316858]],[\"^>\",[\"^ \",\"~:x\",295.0000081062317,\"~:y\",517.999988316858]]],\"~:r2\",8,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2885\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:strokes\",[],\"~:x\",295.0000081062317,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",295.0000081062317,\"~:y\",437.999988316858,\"^9\",80,\"~:height\",80,\"~:x1\",295.0000081062317,\"~:y1\",437.999988316858,\"~:x2\",375.0000081062317,\"~:y2\",517.999988316858]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#e8e9ea\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^M\",80,\"~:flip-y\",null]]",
+                        "~u9299427e-8172-80bb-8007-90e71fba0f84": "[\"~#shape\",[\"^ \",\"~:y\",null,\"~:stroke-cap-start\",\"round\",\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",null,\"~:index\",null,\"~:content\",[\"~#penpot/path-data\",\"~bAQAAAAAAAAAAAAAAAAAAAAAAAAAA4JBE/P9fQwMAAACuD5FE/IleQwBAkUT8yVxDAECRRPx/WkMDAAAAAECRRHx2V0M08ZBE/P9UQwCQkET8/1RDAwAAAK5XkET8/1RDADCQRPx/VUMAAJBE/P9WQwMAAAAA0I9E/H9VQ1Koj0T8/1RDAHCPRPz/VEMDAAAAzA6PRPz/VEMAwI5EfHZXQwDAjkT8f1pDAwAAAADAjkT8zFxDAPCORPyMXkMAII9E/P9fQwIAAAAAAAAAAAAAAAAAAAAAAAAAAACQRPz/ZkMCAAAAAAAAAAAAAAAAAAAAAAAAAADgkET8/19D\"],\"~:name\",\"svg-path\",\"~:width\",null,\"~:type\",\"~:path\",\"~:svg-attrs\",[\"^ \",\"~:fill\",\"none\",\"~:stroke-linecap\",\"round\",\"~:stroke-linejoin\",\"round\"],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1142,\"~:y\",212.99997181105346]],[\"^A\",[\"^ \",\"~:x\",1162,\"~:y\",212.99997181105346]],[\"^A\",[\"^ \",\"~:x\",1162,\"~:y\",230.99997181105346]],[\"^A\",[\"^ \",\"~:x\",1142,\"~:y\",230.99997181105346]]],\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e705944588\",\"~:proportion-lock\",false,\"~:stroke-cap-end\",\"round\",\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:constraints-v\",\"~:scale\",\"~:svg-transform\",[\"^ \",\"~:a\",1,\"~:b\",0,\"~:c\",0,\"~:d\",1,\"~:e\",0,\"~:f\",0],\"~:constraints-h\",\"^H\",\"~:id\",\"~u9299427e-8172-80bb-8007-90e71fba0f84\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f83\",\"~:svg-viewbox\",[\"^ \",\"~:y\",3,\"~:y1\",3,\"^9\",20,\"~:x\",2,\"~:x1\",2,\"~:y2\",21,\"~:x2\",22,\"~:height\",18],\"~:applied-tokens\",[\"^ \",\"~:stroke-color\",\"color.icon.default\"],\"~:svg-defs\",[\"^ \"],\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f83\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",2,\"^T\",\"#ffffff\",\"~:stroke-opacity\",1]],\"~:x\",null,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1142,\"~:y\",212.99997181105346,\"^9\",20,\"^R\",18,\"^O\",1142,\"^N\",212.99997181105346,\"^Q\",1162,\"^P\",230.99997181105346]],\"~:fills\",[],\"~:flip-x\",null,\"^R\",null,\"~:flip-y\",null]]",
+                        "~u94eaebe4-addd-80d1-8007-79d508aa2886": "[\"~#shape\",[\"^ \",\"~:y\",461.999988316858,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:rx\",8,\"~:layout-padding\",[\"^ \",\"~:p1\",8,\"~:p2\",12,\"~:p3\",8,\"~:p4\",12],\"~: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\",\"Dark / Button / Primary / Text / Default\",\"~:layout-align-items\",\"~:center\",\"~:width\",66,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",302.0000081062317,\"~:y\",461.999988316858]],[\"^K\",[\"^ \",\"~:x\",368.0000081062317,\"~:y\",461.999988316858]],[\"^K\",[\"^ \",\"~:x\",368.0000081062317,\"~:y\",493.999988316858]],[\"^K\",[\"^ \",\"~:x\",302.0000081062317,\"~:y\",493.999988316858]]],\"~:r2\",8,\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:layout-justify-content\",\"^D\",\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2886\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:strokes\",[],\"~:x\",302.0000081062317,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",302.0000081062317,\"~:y\",461.999988316858,\"^E\",66,\"~:height\",32,\"~:x1\",302.0000081062317,\"~:y1\",461.999988316858,\"~:x2\",368.0000081062317,\"~:y2\",493.999988316858]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#7efff5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^17\",32,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d508aa2887\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e7059421c4": "[\"~#shape\",[\"^ \",\"~:y\",209.99999660658568,\"~:rx\",0,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",null,\"~:index\",null,\"~:hide-in-viewer\",true,\"~:name\",\"heart\",\"~:width\",24,\"~:type\",\"~:frame\",\"~:svg-attrs\",[\"^ \",\"^8\",\"24\",\"~:height\",\"24\"],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",804,\"~:y\",209.99999660658568]],[\"^>\",[\"^ \",\"~:x\",828,\"~:y\",209.99999660658568]],[\"^>\",[\"^ \",\"~:x\",828,\"~:y\",233.99999660658568]],[\"^>\",[\"^ \",\"~:x\",804,\"~:y\",233.99999660658568]]],\"~:r2\",0,\"~:shape-ref\",\"~uc8b014fe-f285-8021-8007-8ea400bd9407\",\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",0,\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e7059421c4\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e7059421c2\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e7059421c2\",\"~:strokes\",[],\"~:x\",804,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",804,\"~:y\",209.99999660658568,\"^8\",24,\"^<\",24,\"~:x1\",804,\"~:y1\",209.99999660658568,\"~:x2\",828,\"~:y2\",233.99999660658568]],\"~:fills\",[],\"~:flip-x\",null,\"~:ry\",0,\"^<\",24,\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e7059421c5\",\"~u9299427e-8172-80bb-8007-90e7059421c6\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d508aa2887": "[\"~#shape\",[\"^ \",\"~:y\",469.999988316858,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",2,\"~:p3\",0,\"~:p4\",2],\"~: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\",\"_Utilities / Text / White\",\"~:layout-align-items\",\"~:start\",\"~:width\",42,\"~:layout-padding-type\",\"~:simple\",\"~:transforming\",false,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",314.0000081062317,\"~:y\",469.999988316858]],[\"^K\",[\"^ \",\"~:x\",356.0000081062317,\"~:y\",469.999988316858]],[\"^K\",[\"^ \",\"~:x\",356.0000081062317,\"~:y\",485.999988316858]],[\"^K\",[\"^ \",\"~:x\",314.0000081062317,\"~:y\",485.999988316858]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",6],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2887\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2886\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2886\",\"~:strokes\",[],\"~:x\",314.0000081062317,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",314.0000081062317,\"~:y\",469.999988316858,\"^D\",42,\"~:height\",16,\"~:x1\",314.0000081062317,\"~:y1\",469.999988316858,\"~:x2\",356.0000081062317,\"~:y2\",485.999988316858]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",16,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d508aa2888\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e7059421c5": "[\"~#shape\",[\"^ \",\"~:y\",210.0000271241638,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",null,\"~:index\",null,\"~:name\",\"base-background\",\"~:width\",24,\"~:type\",\"~:rect\",\"~:svg-attrs\",[\"^ \",\"~:fill\",\"none\",\"~:stroke-linejoin\",\"round\",\"~:stroke-linecap\",\"round\",\"~:id\",\"base-background\"],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",804,\"~:y\",210.0000271241638]],[\"^?\",[\"^ \",\"~:x\",828,\"~:y\",210.0000271241638]],[\"^?\",[\"^ \",\"~:x\",828,\"~:y\",234.0000271241638]],[\"^?\",[\"^ \",\"~:x\",804,\"~:y\",234.0000271241638]]],\"~:shape-ref\",\"~uc8b014fe-f285-8021-8007-8ea400bd9408\",\"~: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\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:hidden\",true,\"^=\",\"~u9299427e-8172-80bb-8007-90e7059421c5\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e7059421c4\",\"~:svg-viewbox\",[\"^ \",\"~:y\",0,\"~:y1\",0,\"^6\",24,\"~:x\",0,\"~:x1\",0,\"~:y2\",24,\"~:x2\",24,\"~:height\",24],\"~:svg-defs\",[\"^ \"],\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e7059421c4\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-color\",\"#ffffff\",\"~:stroke-opacity\",1,\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",2]],\"~:x\",804,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",804,\"~:y\",210.0000271241638,\"^6\",24,\"^K\",24,\"^H\",804,\"^G\",210.0000271241638,\"^J\",828,\"^I\",234.0000271241638]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",24,\"~:flip-y\",null]]",
+                        "~u9299427e-8172-80bb-8007-90e71cbb9fea": "[\"~#shape\",[\"^ \",\"~:y\",428.99998474121094,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",0,\"~:p3\",0,\"~: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\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"card-img / patinegro\",\"~:layout-align-items\",\"~:start\",\"~:width\",265,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",580,\"~:y\",428.99998474121094]],[\"^L\",[\"^ \",\"~:x\",845,\"~:y\",428.99998474121094]],[\"^L\",[\"^ \",\"~:x\",845,\"~:y\",606.99997875689]],[\"^L\",[\"^ \",\"~:x\",580,\"~:y\",606.99997875689]]],\"~:r2\",20,\"~:component-root\",true,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c0\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",20,\"~:layout-justify-content\",\"^E\",\"~:r1\",20,\"~:id\",\"~u9299427e-8172-80bb-8007-90e71cbb9fea\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:component-id\",\"~u9299427e-8172-80bb-8007-90e7059a83e2\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",580,\"~:proportion\",1,\"~:r4\",20,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",580,\"~:y\",428.99998474121094,\"^F\",265,\"~:height\",177.99999401567902,\"~:x1\",580,\"~:y1\",428.99998474121094,\"~:x2\",845,\"~:y2\",606.99997875689]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^1:\",177.99999401567902,\"~:component-file\",\"~u31fe2e21-73e7-80f3-8007-73894fb58240\",\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e71cbc342d\",\"~u9299427e-8172-80bb-8007-90e71cbc342f\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d508aa2888": "[\"~#shape\",[\"^ \",\"~:y\",470.9999883168582,\"~: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\",\"~:index\",null,\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:path\",\"\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:text-align\",\"left\",\"~:font-id\",\"gfont-work-sans\",\"~:font-size\",\"12\",\"~:font-weight\",\"500\",\"~:modified-at\",\"2024-06-04T14:15:09.786Z\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"underline\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#000000\",\"~:fill-color-ref-file\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"~:fill-opacity\",1,\"~:fill-color-ref-id\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:font-family\",\"Work Sans\",\"~:text\",\"Label\"]],\"^=\",\"uppercase\",\"^>\",\"center\",\"^?\",\"gfont-work-sans\",\"^@\",\"12\",\"^A\",\"500\",\"^8\",\"paragraph\",\"^B\",\"2024-06-04T14:15:09.786Z\",\"^C\",\"500\",\"^D\",\"underline\",\"^E\",\"0\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"^K\",\"Work Sans\"]]]],\"~:vertical-align\",\"center\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^I\",1]]],\"~:hide-in-viewer\",true,\"~:name\",\"Input\",\"~:saved-component-root\",null,\"~:width\",38,\"^8\",\"^L\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",316.0000081062317,\"~:y\",470.9999883168582]],[\"^S\",[\"^ \",\"~:x\",354.0000081062317,\"~:y\",470.9999883168582]],[\"^S\",[\"^ \",\"~:x\",354.0000081062317,\"~:y\",485.99998831685775]],[\"^S\",[\"^ \",\"~:x\",316.0000081062317,\"~:y\",485.9999883168582]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2888\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2887\",\"~:position-data\",[[\"^ \",\"~:y\",485.3399963378906,\"^:\",\"1.2\",\"^<\",\"normal\",\"^=\",\"uppercase\",\"^>\",\"left\",\"^?\",\"sourcesanspro\",\"^@\",\"12\",\"^A\",\"500\",\"~:text-direction\",\"ltr\",\"^Q\",37.94000244140625,\"^C\",\"regular\",\"^D\",\"underline\",\"^E\",\"0\",\"~:x\",316.0299987792969,\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:direction\",\"ltr\",\"^K\",\"Work Sans\",\"~:height\",14.079986572265625,\"^L\",\"Label\"]],\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508aa2887\",\"~:strokes\",[],\"~:x\",316.0000081062317,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",316.0000081062317,\"~:y\",470.9999883168582,\"^Q\",38,\"^11\",15,\"~:x1\",316.0000081062317,\"~:y1\",470.9999883168582,\"~:x2\",354.0000081062317,\"~:y2\",485.9999883168582]],\"^F\",[],\"~:flip-x\",null,\"^11\",15,\"~:flip-y\",null]]",
+                        "~u77c71dba-32ee-804c-8007-736561cff45a": "[\"~#shape\",[\"^ \",\"~:y\",255.00000357564727,\"~: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\",\"~:index\",null,\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:path\",\"\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:text-align\",\"left\",\"~:font-id\",\"gfont-work-sans\",\"~:font-size\",\"12\",\"~:font-weight\",\"500\",\"~:modified-at\",\"2024-06-04T14:15:09.786Z\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"underline\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#000000\",\"~:fill-color-ref-file\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"~:fill-opacity\",1,\"~:fill-color-ref-id\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:font-family\",\"Work Sans\",\"~:text\",\"Label\"]],\"^=\",\"uppercase\",\"^>\",\"center\",\"^?\",\"gfont-work-sans\",\"^@\",\"12\",\"^A\",\"500\",\"^8\",\"paragraph\",\"^B\",\"2024-06-04T14:15:09.786Z\",\"^C\",\"500\",\"^D\",\"underline\",\"^E\",\"0\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"^K\",\"Work Sans\"]]]],\"~:vertical-align\",\"center\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^I\",1]]],\"~:hide-in-viewer\",true,\"~:name\",\"Input\",\"~:saved-component-root\",null,\"~:width\",38,\"^8\",\"^L\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",400.0000081062317,\"~:y\",255.00000357564727]],[\"^S\",[\"^ \",\"~:x\",438.0000081062317,\"~:y\",255.00000357564727]],[\"^S\",[\"^ \",\"~:x\",438.0000081062317,\"~:y\",270.0000035756468]],[\"^S\",[\"^ \",\"~:x\",400.0000081062317,\"~:y\",270.00000357564727]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cff45a\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cff459\",\"~:position-data\",[[\"^ \",\"~:y\",269.3399963378906,\"^:\",\"1.2\",\"^<\",\"normal\",\"^=\",\"uppercase\",\"^>\",\"left\",\"^?\",\"sourcesanspro\",\"^@\",\"12\",\"^A\",\"500\",\"~:text-direction\",\"ltr\",\"^Q\",37.94000244140625,\"^C\",\"regular\",\"^D\",\"underline\",\"^E\",\"0\",\"~:x\",400.0299987792969,\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:direction\",\"ltr\",\"^K\",\"Work Sans\",\"~:height\",14.080001831054688,\"^L\",\"Label\"]],\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cff459\",\"~:strokes\",[],\"~:x\",400.0000081062317,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",400.0000081062317,\"~:y\",255.00000357564727,\"^Q\",38,\"^11\",15,\"~:x1\",400.0000081062317,\"~:y1\",255.00000357564727,\"~:x2\",438.0000081062317,\"~:y2\",270.00000357564727]],\"^F\",[],\"~:flip-x\",null,\"^11\",15,\"~:flip-y\",null]]",
+                        "~u77c71dba-32ee-804c-8007-736561cff459": "[\"~#shape\",[\"^ \",\"~:y\",254.00000357564704,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",2,\"~:p3\",0,\"~:p4\",2],\"~: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\",\"_Utilities / Text / White\",\"~:layout-align-items\",\"~:start\",\"~:width\",42,\"~:layout-padding-type\",\"~:simple\",\"~:transforming\",false,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",398.0000081062317,\"~:y\",254.00000357564704]],[\"^K\",[\"^ \",\"~:x\",440.0000081062317,\"~:y\",254.00000357564704]],[\"^K\",[\"^ \",\"~:x\",440.0000081062317,\"~:y\",270.00000357564704]],[\"^K\",[\"^ \",\"~:x\",398.0000081062317,\"~:y\",270.00000357564704]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",6],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cff459\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cff458\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cff458\",\"~:strokes\",[],\"~:x\",398.0000081062317,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",398.0000081062317,\"~:y\",254.00000357564704,\"^D\",42,\"~:height\",16,\"~:x1\",398.0000081062317,\"~:y1\",254.00000357564704,\"~:x2\",440.0000081062317,\"~:y2\",270.00000357564704]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",16,\"~:flip-y\",null,\"~:shapes\",[\"~u77c71dba-32ee-804c-8007-736561cff45a\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e705944588": "[\"~#shape\",[\"^ \",\"~:y\",null,\"~:stroke-cap-start\",\"round\",\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",null,\"~:index\",null,\"~:content\",[\"~#penpot/path-data\",\"~bAQAAAAAAAAAAAAAAAAAAAAAAAAAAwE1E/P9fQwMAAABcH05E/IleQwCATkT8yVxDAIBORPx/WkMDAAAAAIBORHx2V0No4k1E/P9UQwAgTUT8/1RDAwAAAFyvTET8/1RDAGBMRPx/VUMAAExE/P9WQwMAAAAAoEtE/H9VQ6RQS0T8/1RDAOBKRPz/VEMDAAAAmB1KRPz/VEMAgElEfHZXQwCASUT8f1pDAwAAAACASUT8zFxDAOBJRPyMXkMAQEpE/P9fQwIAAAAAAAAAAAAAAAAAAAAAAAAAAABMRPz/ZkMCAAAAAAAAAAAAAAAAAAAAAAAAAADATUT8/19D\"],\"~:name\",\"svg-path\",\"~:width\",null,\"~:type\",\"~:path\",\"~:svg-attrs\",[\"^ \",\"~:fill\",\"none\",\"~:stroke-linecap\",\"round\",\"~:stroke-linejoin\",\"round\"],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",806,\"~:y\",212.99997181105346]],[\"^A\",[\"^ \",\"~:x\",826,\"~:y\",212.99997181105346]],[\"^A\",[\"^ \",\"~:x\",826,\"~:y\",230.99997181105346]],[\"^A\",[\"^ \",\"~:x\",806,\"~:y\",230.99997181105346]]],\"~:shape-ref\",\"~uc8b014fe-f285-8021-8007-8ea518570b0f\",\"~:proportion-lock\",false,\"~:stroke-cap-end\",\"round\",\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:constraints-v\",\"~:scale\",\"~:svg-transform\",[\"^ \",\"~:a\",1,\"~:b\",0,\"~:c\",0,\"~:d\",1,\"~:e\",0,\"~:f\",0],\"~:constraints-h\",\"^H\",\"~:id\",\"~u9299427e-8172-80bb-8007-90e705944588\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e7059421c6\",\"~:svg-viewbox\",[\"^ \",\"~:y\",3,\"~:y1\",3,\"^9\",20,\"~:x\",2,\"~:x1\",2,\"~:y2\",21,\"~:x2\",22,\"~:height\",18],\"~:applied-tokens\",[\"^ \",\"~:stroke-color\",\"color.icon.default\"],\"~:svg-defs\",[\"^ \"],\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e7059421c6\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",2,\"^T\",\"#ffffff\",\"~:stroke-opacity\",1]],\"~:x\",null,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",806,\"~:y\",212.99997181105346,\"^9\",20,\"^R\",18,\"^O\",806,\"^N\",212.99997181105346,\"^Q\",826,\"^P\",230.99997181105346]],\"~:fills\",[],\"~:flip-x\",null,\"^R\",null,\"~:flip-y\",null]]",
+                        "~u77c71dba-32ee-804c-8007-736561cff458": "[\"~#shape\",[\"^ \",\"~:y\",246.00000357564704,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:rx\",8,\"~:layout-padding\",[\"^ \",\"~:p1\",8,\"~:p2\",12,\"~:p3\",8,\"~:p4\",12],\"~: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\",\"Dark / Button / Primary / Text / Default\",\"~:layout-align-items\",\"~:center\",\"~:width\",66,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",386.0000081062317,\"~:y\",246.00000357564704]],[\"^K\",[\"^ \",\"~:x\",452.0000081062317,\"~:y\",246.00000357564704]],[\"^K\",[\"^ \",\"~:x\",452.0000081062317,\"~:y\",278.00000357564704]],[\"^K\",[\"^ \",\"~:x\",386.0000081062317,\"~:y\",278.00000357564704]]],\"~:r2\",8,\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:layout-justify-content\",\"^D\",\"~:r1\",8,\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cff458\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:strokes\",[],\"~:x\",386.0000081062317,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",386.0000081062317,\"~:y\",246.00000357564704,\"^E\",66,\"~:height\",32,\"~:x1\",386.0000081062317,\"~:y1\",246.00000357564704,\"~:x2\",452.0000081062317,\"~:y2\",278.00000357564704]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#7efff5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^17\",32,\"~:flip-y\",null,\"~:shapes\",[\"~u77c71dba-32ee-804c-8007-736561cff459\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e72469bf8e": "[\"~#shape\",[\"^ \",\"~:y\",444.00002998518676,\"~:hide-fill-on-export\",false,\"~:layout-item-absolute\",true,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",0,\"~:p3\",0,\"~: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\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"add-favorites\",\"~:layout-align-items\",\"~:center\",\"~:width\",48,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1128,\"~:y\",444.00002998518676]],[\"^M\",[\"^ \",\"~:x\",1176,\"~:y\",444.00002998518676]],[\"^M\",[\"^ \",\"~:x\",1176,\"~:y\",492.00002426314086]],[\"^M\",[\"^ \",\"~:x\",1128,\"~:y\",492.00002426314086]]],\"~:r2\",50,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c2\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",50,\"~:layout-justify-content\",\"^F\",\"~:r1\",50,\"~:id\",\"~u9299427e-8172-80bb-8007-90e72469bf8e\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e72469bf8c\",\"~:layout-flex-dir\",\"~:row\",\"~:applied-tokens\",[\"^ \",\"~:fill\",\"color.bg.default\"],\"~:layout-align-content\",\"~:stretch\",\"~:component-id\",\"~uc8b014fe-f285-8021-8007-8ea447a0bc30\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e72469bf8c\",\"~:strokes\",[],\"~:x\",1128,\"~:proportion\",1,\"~:r4\",50,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1128,\"~:y\",444.00002998518676,\"^G\",48,\"~:height\",47.9999942779541,\"~:x1\",1128,\"~:y1\",444.00002998518676,\"~:x2\",1176,\"~:y2\",492.00002426314086]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#ffffff\",\"~:fill-opacity\",0.3]],\"~:flip-x\",null,\"^1<\",47.9999942779541,\"~:component-file\",\"~ud0eb4518-f33d-81e1-8007-8fe418fea255\",\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e72469bf90\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e71cbc342e": "[\"~#shape\",[\"^ \",\"~:y\",429.000012591785,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"patinegro\",\"~:width\",264.80230943863717,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",579.9999793759137,\"~:y\",429.000012591785]],[\"^9\",[\"^ \",\"~:x\",844.8022888145506,\"~:y\",429.000012591785]],[\"^9\",[\"^ \",\"~:x\",844.8022888145506,\"~:y\",625.1131514739925]],[\"^9\",[\"^ \",\"~:x\",579.9999793759137,\"~:y\",625.1131514739925]]],\"~:r2\",0,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c3\",\"~:proportion-lock\",true,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e71cbc342e\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71cbc342d\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71cbc342d\",\"~:strokes\",[],\"~:x\",579.9999793759134,\"~:proportion\",1.3487940630797774,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",579.9999793759134,\"~:y\",429.000012591785,\"^5\",264.80230943863717,\"~:height\",196.11313888220752,\"~:x1\",579.9999793759134,\"~:y1\",429.000012591785,\"~:x2\",844.8022888145506,\"~:y2\",625.1131514739925]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#b73d3d\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^I\",196.11313888220752,\"~:flip-y\",null]]",
+                        "~u77c71dba-32ee-804c-8007-736561cf857f": "[\"~#shape\",[\"^ \",\"~:y\",221.99999439878093,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",12,\"~:p3\",0,\"~:p4\",12],\"~: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\",\"~:wrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Board Parent 1\",\"~:layout-align-items\",\"~:start\",\"~:width\",272,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",283.0000081062317,\"~:y\",221.99999439878093]],[\"^J\",[\"^ \",\"~:x\",555.0000081062317,\"~:y\",221.99999439878093]],[\"^J\",[\"^ \",\"~:x\",555.0000081062317,\"~:y\",301.999982234935]],[\"^J\",[\"^ \",\"~:x\",283.0000081062317,\"~:y\",301.999982234935]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cf857f\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",283.0000081062317,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",283.0000081062317,\"~:y\",221.99999439878093,\"^D\",272,\"~:height\",79.99998783615405,\"~:x1\",283.0000081062317,\"~:y1\",221.99999439878093,\"~:x2\",555.0000081062317,\"~:y2\",301.999982234935]],\"~:fills\",[],\"~:flip-x\",null,\"^15\",79.99998783615405,\"~:flip-y\",null,\"~:shapes\",[\"~u77c71dba-32ee-804c-8007-736561cf8584\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e72469bf8f": "[\"~#shape\",[\"^ \",\"~:y\",438.000012591785,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"patinegro\",\"~:width\",264.80230943863717,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",915.9999793759137,\"~:y\",438.000012591785]],[\"^9\",[\"^ \",\"~:x\",1180.8022888145506,\"~:y\",438.000012591785]],[\"^9\",[\"^ \",\"~:x\",1180.8022888145506,\"~:y\",634.1131514739925]],[\"^9\",[\"^ \",\"~:x\",915.9999793759137,\"~:y\",634.1131514739925]]],\"~:r2\",0,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c3\",\"~:proportion-lock\",true,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e72469bf8f\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e72469bf8d\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e72469bf8d\",\"~:strokes\",[],\"~:x\",915.9999793759134,\"~:proportion\",1.3487940630797774,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",915.9999793759134,\"~:y\",438.000012591785,\"^5\",264.80230943863717,\"~:height\",196.11313888220752,\"~:x1\",915.9999793759134,\"~:y1\",438.000012591785,\"~:x2\",1180.8022888145506,\"~:y2\",634.1131514739925]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#b73d3d\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^I\",196.11313888220752,\"~:flip-y\",null]]",
+                        "~u9299427e-8172-80bb-8007-90e71cbc342f": "[\"~#shape\",[\"^ \",\"~:y\",435.00002998518676,\"~:hide-fill-on-export\",false,\"~:layout-item-absolute\",true,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",0,\"~:p3\",0,\"~: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\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"add-favorites\",\"~:layout-align-items\",\"~:center\",\"~:width\",48,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:touched\",[\"~#set\",[\"~:layout-item-z-index\"]],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",792,\"~:y\",435.00002998518676]],[\"^P\",[\"^ \",\"~:x\",840,\"~:y\",435.00002998518676]],[\"^P\",[\"^ \",\"~:x\",840,\"~:y\",483.00002426314086]],[\"^P\",[\"^ \",\"~:x\",792,\"~:y\",483.00002426314086]]],\"~:r2\",50,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c2\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",50,\"~:layout-justify-content\",\"^F\",\"~:r1\",50,\"~:id\",\"~u9299427e-8172-80bb-8007-90e71cbc342f\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71cbb9fea\",\"~:layout-flex-dir\",\"~:row\",\"~:applied-tokens\",[\"^ \",\"~:fill\",\"color.bg.default\"],\"~:layout-align-content\",\"~:stretch\",\"~:component-id\",\"~uc8b014fe-f285-8021-8007-8ea447a0bc30\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71cbb9fea\",\"~:strokes\",[],\"~:x\",792,\"~:proportion\",1,\"~:r4\",50,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",792,\"~:y\",435.00002998518676,\"^G\",48,\"~:height\",47.9999942779541,\"~:x1\",792,\"~:y1\",435.00002998518676,\"~:x2\",840,\"~:y2\",483.00002426314086]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#ffffff\",\"~:fill-opacity\",0.3]],\"~:flip-x\",null,\"^1?\",47.9999942779541,\"~:component-file\",\"~ud0eb4518-f33d-81e1-8007-8fe418fea255\",\"~:flip-y\",null,\"^N\",1,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e71cbc3430\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d50980078e": "[\"~#shape\",[\"^ \",\"~:y\",546.0000478045426,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",12,\"~:p3\",0,\"~:p4\",12],\"~: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\",\"~:wrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Board Parent 4\",\"~:layout-align-items\",\"~:start\",\"~:width\",272,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",283.0000081062317,\"~:y\",546.0000478045426]],[\"^J\",[\"^ \",\"~:x\",555.0000081062317,\"~:y\",546.0000478045426]],[\"^J\",[\"^ \",\"~:x\",555.0000081062317,\"~:y\",626.0000356406968]],[\"^J\",[\"^ \",\"~:x\",283.0000081062317,\"~:y\",626.0000356406968]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d50980078e\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:column-reverse\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",283.0000081062317,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",283.0000081062317,\"~:y\",546.0000478045426,\"^D\",272,\"~:height\",79.9999878361541,\"~:x1\",283.0000081062317,\"~:y1\",546.0000478045426,\"~:x2\",555.0000081062317,\"~:y2\",626.0000356406968]],\"~:fills\",[],\"~:flip-x\",null,\"^15\",79.9999878361541,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d50980078f\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e72469bf8c": "[\"~#shape\",[\"^ \",\"~:y\",437.99998474121094,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",0,\"~:p3\",0,\"~: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\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"card-img / patinegro\",\"~:layout-align-items\",\"~:start\",\"~:width\",265,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",916,\"~:y\",437.99998474121094]],[\"^L\",[\"^ \",\"~:x\",1181,\"~:y\",437.99998474121094]],[\"^L\",[\"^ \",\"~:x\",1181,\"~:y\",615.99997875689]],[\"^L\",[\"^ \",\"~:x\",916,\"~:y\",615.99997875689]]],\"~:r2\",20,\"~:component-root\",true,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c0\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",20,\"~:layout-justify-content\",\"^E\",\"~:r1\",20,\"~:id\",\"~u9299427e-8172-80bb-8007-90e72469bf8c\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:component-id\",\"~u9299427e-8172-80bb-8007-90e7059a83e2\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",916,\"~:proportion\",1,\"~:r4\",20,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",916,\"~:y\",437.99998474121094,\"^F\",265,\"~:height\",177.99999401567902,\"~:x1\",916,\"~:y1\",437.99998474121094,\"~:x2\",1181,\"~:y2\",615.99997875689]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^1:\",177.99999401567902,\"~:component-file\",\"~u31fe2e21-73e7-80f3-8007-73894fb58240\",\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e72469bf8d\",\"~u9299427e-8172-80bb-8007-90e72469bf8e\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d50980078f": "[\"~#shape\",[\"^ \",\"~:y\",545.9999806874634,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"Board Child\",\"~:width\",80,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",295.0000081062317,\"~:y\",545.9999806874634]],[\"^;\",[\"^ \",\"~:x\",375.0000081062317,\"~:y\",545.9999806874634]],[\"^;\",[\"^ \",\"~:x\",375.0000081062317,\"~:y\",625.9999806874634]],[\"^;\",[\"^ \",\"~:x\",295.0000081062317,\"~:y\",625.9999806874634]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078e\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078e\",\"~:strokes\",[],\"~:x\",295.0000081062317,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",295.0000081062317,\"~:y\",545.9999806874634,\"^7\",80,\"~:height\",80,\"~:x1\",295.0000081062317,\"~:y1\",545.9999806874634,\"~:x2\",375.0000081062317,\"~:y2\",625.9999806874634]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",80,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d509800790\",\"~u94eaebe4-addd-80d1-8007-79d509800791\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e72469bf8d": "[\"~#shape\",[\"^ \",\"~:y\",437.99999475401955,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"img-city\",\"~:width\",265,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",916,\"~:y\",437.9999947540198]],[\"^;\",[\"^ \",\"~:x\",1181,\"~:y\",437.9999947540198]],[\"^;\",[\"^ \",\"~:x\",1181,\"~:y\",615.9899634401968]],[\"^;\",[\"^ \",\"~:x\",916,\"~:y\",615.9899634401968]]],\"~:r2\",0,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c1\",\"~:layout-item-h-sizing\",\"~:fill\",\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:layout-item-v-sizing\",\"^?\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e72469bf8d\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e72469bf8c\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e72469bf8c\",\"~:strokes\",[],\"~:x\",916,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",916,\"~:y\",437.99999475401955,\"^7\",265,\"~:height\",177.989968686177,\"~:x1\",916,\"~:y1\",437.99999475401955,\"~:x2\",1181,\"~:y2\",615.9899634401966]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^N\",177.989968686177,\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e72469bf8f\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e71cbc342d": "[\"~#shape\",[\"^ \",\"~:y\",428.99999475401955,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"img-city\",\"~:width\",265,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",580,\"~:y\",428.9999947540198]],[\"^;\",[\"^ \",\"~:x\",845,\"~:y\",428.9999947540198]],[\"^;\",[\"^ \",\"~:x\",845,\"~:y\",606.9899634401968]],[\"^;\",[\"^ \",\"~:x\",580,\"~:y\",606.9899634401968]]],\"~:r2\",0,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c1\",\"~:layout-item-h-sizing\",\"~:fill\",\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:layout-item-v-sizing\",\"^?\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e71cbc342d\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71cbb9fea\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71cbb9fea\",\"~:strokes\",[],\"~:x\",580,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",580,\"~:y\",428.99999475401955,\"^7\",265,\"~:height\",177.989968686177,\"~:x1\",580,\"~:y1\",428.99999475401955,\"~:x2\",845,\"~:y2\",606.9899634401966]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^N\",177.989968686177,\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e71cbc342e\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d508a9dc2f": "[\"~#shape\",[\"^ \",\"~:y\",437.9999943987809,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",12,\"~:p3\",0,\"~:p4\",12],\"~: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\",\"~:wrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Board Parent 3\",\"~:layout-align-items\",\"~:start\",\"~:width\",272,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",283.0000081062317,\"~:y\",437.9999943987809]],[\"^J\",[\"^ \",\"~:x\",555.0000081062317,\"~:y\",437.9999943987809]],[\"^J\",[\"^ \",\"~:x\",555.0000081062317,\"~:y\",517.999982234935]],[\"^J\",[\"^ \",\"~:x\",283.0000081062317,\"~:y\",517.999982234935]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc2f\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",283.0000081062317,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",283.0000081062317,\"~:y\",437.9999943987809,\"^D\",272,\"~:height\",79.9999878361541,\"~:x1\",283.0000081062317,\"~:y1\",437.9999943987809,\"~:x2\",555.0000081062317,\"~:y2\",517.999982234935]],\"~:fills\",[],\"~:flip-x\",null,\"^15\",79.9999878361541,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d509800790": "[\"~#shape\",[\"^ \",\"~:y\",546.0000417226197,\"~:rx\",8,\"~: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\",80,\"~:transforming\",false,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",295.0000081062317,\"~:y\",546.0000417226197]],[\"^>\",[\"^ \",\"~:x\",375.0000081062317,\"~:y\",546.0000417226197]],[\"^>\",[\"^ \",\"~:x\",375.0000081062317,\"~:y\",626.0000417226197]],[\"^>\",[\"^ \",\"~:x\",295.0000081062317,\"~:y\",626.0000417226197]]],\"~:r2\",8,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d509800790\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:strokes\",[],\"~:x\",295.0000081062317,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",295.0000081062317,\"~:y\",546.0000417226197,\"^9\",80,\"~:height\",80,\"~:x1\",295.0000081062317,\"~:y1\",546.0000417226197,\"~:x2\",375.0000081062317,\"~:y2\",626.0000417226197]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#e8e9ea\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^M\",80,\"~:flip-y\",null]]",
+                        "~u9299427e-8172-80bb-8007-90e72469bf92": "[\"~#shape\",[\"^ \",\"~:y\",458.99997181105346,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"svg-path\",\"~:width\",20,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1142,\"~:y\",458.99997181105346]],[\"^;\",[\"^ \",\"~:x\",1162,\"~:y\",458.99997181105346]],[\"^;\",[\"^ \",\"~:x\",1162,\"~:y\",476.99997181105346]],[\"^;\",[\"^ \",\"~:x\",1142,\"~:y\",476.99997181105346]]],\"~:r2\",0,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c6\",\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e72469bf92\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e72469bf90\",\"~:applied-tokens\",[\"^ \"],\"~:component-id\",\"~uc8b014fe-f285-8021-8007-8ea4f64a1c9b\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e72469bf90\",\"~:strokes\",[],\"~:x\",1142,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1142,\"~:y\",458.99997181105346,\"^7\",20,\"~:height\",18,\"~:x1\",1142,\"~:y1\",458.99997181105346,\"~:x2\",1162,\"~:y2\",476.99997181105346]],\"~:fills\",[],\"~:flip-x\",null,\"^N\",18,\"~:component-file\",\"~ud0eb4518-f33d-81e1-8007-8fe418fea255\",\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e72469bf93\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e71cbc3432": "[\"~#shape\",[\"^ \",\"~:y\",449.99997181105346,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"svg-path\",\"~:width\",20,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",806,\"~:y\",449.99997181105346]],[\"^;\",[\"^ \",\"~:x\",826,\"~:y\",449.99997181105346]],[\"^;\",[\"^ \",\"~:x\",826,\"~:y\",467.99997181105346]],[\"^;\",[\"^ \",\"~:x\",806,\"~:y\",467.99997181105346]]],\"~:r2\",0,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c6\",\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e71cbc3432\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71cbc3430\",\"~:applied-tokens\",[\"^ \"],\"~:component-id\",\"~uc8b014fe-f285-8021-8007-8ea4f64a1c9b\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71cbc3430\",\"~:strokes\",[],\"~:x\",806,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",806,\"~:y\",449.99997181105346,\"^7\",20,\"~:height\",18,\"~:x1\",806,\"~:y1\",449.99997181105346,\"~:x2\",826,\"~:y2\",467.99997181105346]],\"~:fills\",[],\"~:flip-x\",null,\"^N\",18,\"~:component-file\",\"~ud0eb4518-f33d-81e1-8007-8fe418fea255\",\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e71cbc3433\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d508a9dc30": "[\"~#shape\",[\"^ \",\"~:y\",437.999988316858,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"Board Child\",\"~:width\",80,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",295.0000081062317,\"~:y\",437.999988316858]],[\"^;\",[\"^ \",\"~:x\",375.0000081062317,\"~:y\",437.999988316858]],[\"^;\",[\"^ \",\"~:x\",375.0000081062317,\"~:y\",517.999988316858]],[\"^;\",[\"^ \",\"~:x\",295.0000081062317,\"~:y\",517.999988316858]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc30\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc2f\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d508a9dc2f\",\"~:strokes\",[],\"~:x\",295.0000081062317,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",295.0000081062317,\"~:y\",437.999988316858,\"^7\",80,\"~:height\",80,\"~:x1\",295.0000081062317,\"~:y1\",437.999988316858,\"~:x2\",375.0000081062317,\"~:y2\",517.999988316858]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",80,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d508aa2885\",\"~u94eaebe4-addd-80d1-8007-79d508aa2886\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d509800791": "[\"~#shape\",[\"^ \",\"~:y\",570.0000417226197,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:rx\",8,\"~:layout-padding\",[\"^ \",\"~:p1\",8,\"~:p2\",12,\"~:p3\",8,\"~:p4\",12],\"~: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\",\"Dark / Button / Primary / Text / Default\",\"~:layout-align-items\",\"~:center\",\"~:width\",66,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",302.0000081062317,\"~:y\",570.0000417226197]],[\"^K\",[\"^ \",\"~:x\",368.0000081062317,\"~:y\",570.0000417226197]],[\"^K\",[\"^ \",\"~:x\",368.0000081062317,\"~:y\",602.0000417226197]],[\"^K\",[\"^ \",\"~:x\",302.0000081062317,\"~:y\",602.0000417226197]]],\"~:r2\",8,\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:layout-justify-content\",\"^D\",\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d509800791\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d50980078f\",\"~:strokes\",[],\"~:x\",302.0000081062317,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",302.0000081062317,\"~:y\",570.0000417226197,\"^E\",66,\"~:height\",32,\"~:x1\",302.0000081062317,\"~:y1\",570.0000417226197,\"~:x2\",368.0000081062317,\"~:y2\",602.0000417226197]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#7efff5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^17\",32,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d509800792\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e72469bf93": "[\"~#shape\",[\"^ \",\"~:y\",null,\"~:stroke-cap-start\",\"round\",\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",null,\"~:index\",null,\"~:content\",[\"~#penpot/path-data\",\"~bAQAAAAAAAAAAAAAAAAAAAAAAAAAA4JBE/v/qQwMAAACuD5FE/kTqQwBAkUT+ZOlDAECRRP4/6EMDAAAAAECRRD675kM08ZBE/n/lQwCQkET+f+VDAwAAAK5XkET+f+VDADCQRP6/5UMAAJBE/n/mQwMAAAAA0I9E/r/lQ1Koj0T+f+VDAHCPRP5/5UMDAAAAzA6PRP5/5UMAwI5EPrvmQwDAjkT+P+hDAwAAAADAjkR+ZulDAPCORH5G6kMAII9E/v/qQwIAAAAAAAAAAAAAAAAAAAAAAAAAAACQRP5/7kMCAAAAAAAAAAAAAAAAAAAAAAAAAADgkET+/+pD\"],\"~:name\",\"svg-path\",\"~:width\",null,\"~:type\",\"~:path\",\"~:svg-attrs\",[\"^ \",\"~:fill\",\"none\",\"~:stroke-linecap\",\"round\",\"~:stroke-linejoin\",\"round\"],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1142,\"~:y\",458.99997181105346]],[\"^A\",[\"^ \",\"~:x\",1162,\"~:y\",458.99997181105346]],[\"^A\",[\"^ \",\"~:x\",1162,\"~:y\",476.99997181105346]],[\"^A\",[\"^ \",\"~:x\",1142,\"~:y\",476.99997181105346]]],\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e705944588\",\"~:proportion-lock\",false,\"~:stroke-cap-end\",\"round\",\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:constraints-v\",\"~:scale\",\"~:svg-transform\",[\"^ \",\"~:a\",1,\"~:b\",0,\"~:c\",0,\"~:d\",1,\"~:e\",0,\"~:f\",0],\"~:constraints-h\",\"^H\",\"~:id\",\"~u9299427e-8172-80bb-8007-90e72469bf93\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e72469bf92\",\"~:svg-viewbox\",[\"^ \",\"~:y\",3,\"~:y1\",3,\"^9\",20,\"~:x\",2,\"~:x1\",2,\"~:y2\",21,\"~:x2\",22,\"~:height\",18],\"~:applied-tokens\",[\"^ \",\"~:stroke-color\",\"color.icon.default\"],\"~:svg-defs\",[\"^ \"],\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e72469bf92\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",2,\"^T\",\"#ffffff\",\"~:stroke-opacity\",1]],\"~:x\",null,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1142,\"~:y\",458.99997181105346,\"^9\",20,\"^R\",18,\"^O\",1142,\"^N\",458.99997181105346,\"^Q\",1162,\"^P\",476.99997181105346]],\"~:fills\",[],\"~:flip-x\",null,\"^R\",null,\"~:flip-y\",null]]",
+                        "~u9299427e-8172-80bb-8007-90e71cbc3433": "[\"~#shape\",[\"^ \",\"~:y\",null,\"~:stroke-cap-start\",\"round\",\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",null,\"~:index\",null,\"~:content\",[\"~#penpot/path-data\",\"~bAQAAAAAAAAAAAAAAAAAAAAAAAAAAwE1E/n/mQwMAAABcH05E/sTlQwCATkT+5ORDAIBORP6/40MDAAAAAIBORD474kNo4k1E/v/gQwAgTUT+/+BDAwAAAFyvTET+/+BDAGBMRP4/4UMAAExE/v/hQwMAAAAAoEtE/j/hQ6RQS0T+/+BDAOBKRP7/4EMDAAAAmB1KRP7/4EMAgElEPjviQwCASUT+v+NDAwAAAACASUR+5uRDAOBJRH7G5UMAQEpE/n/mQwIAAAAAAAAAAAAAAAAAAAAAAAAAAABMRP7/6UMCAAAAAAAAAAAAAAAAAAAAAAAAAADATUT+f+ZD\"],\"~:name\",\"svg-path\",\"~:width\",null,\"~:type\",\"~:path\",\"~:svg-attrs\",[\"^ \",\"~:fill\",\"none\",\"~:stroke-linecap\",\"round\",\"~:stroke-linejoin\",\"round\"],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",806,\"~:y\",449.99997181105346]],[\"^A\",[\"^ \",\"~:x\",826,\"~:y\",449.99997181105346]],[\"^A\",[\"^ \",\"~:x\",826,\"~:y\",467.99997181105346]],[\"^A\",[\"^ \",\"~:x\",806,\"~:y\",467.99997181105346]]],\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e705944588\",\"~:proportion-lock\",false,\"~:stroke-cap-end\",\"round\",\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:constraints-v\",\"~:scale\",\"~:svg-transform\",[\"^ \",\"~:a\",1,\"~:b\",0,\"~:c\",0,\"~:d\",1,\"~:e\",0,\"~:f\",0],\"~:constraints-h\",\"^H\",\"~:id\",\"~u9299427e-8172-80bb-8007-90e71cbc3433\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71cbc3432\",\"~:svg-viewbox\",[\"^ \",\"~:y\",3,\"~:y1\",3,\"^9\",20,\"~:x\",2,\"~:x1\",2,\"~:y2\",21,\"~:x2\",22,\"~:height\",18],\"~:applied-tokens\",[\"^ \",\"~:stroke-color\",\"color.icon.default\"],\"~:svg-defs\",[\"^ \"],\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71cbc3432\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",2,\"^T\",\"#ffffff\",\"~:stroke-opacity\",1]],\"~:x\",null,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",806,\"~:y\",449.99997181105346,\"^9\",20,\"^R\",18,\"^O\",806,\"^N\",449.99997181105346,\"^Q\",826,\"^P\",467.99997181105346]],\"~:fills\",[],\"~:flip-x\",null,\"^R\",null,\"~:flip-y\",null]]",
+                        "~u94eaebe4-addd-80d1-8007-79d509800792": "[\"~#shape\",[\"^ \",\"~:y\",578.0000417226197,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",2,\"~:p3\",0,\"~:p4\",2],\"~: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\",\"_Utilities / Text / White\",\"~:layout-align-items\",\"~:start\",\"~:width\",42,\"~:layout-padding-type\",\"~:simple\",\"~:transforming\",false,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",314.0000081062317,\"~:y\",578.0000417226197]],[\"^K\",[\"^ \",\"~:x\",356.0000081062317,\"~:y\",578.0000417226197]],[\"^K\",[\"^ \",\"~:x\",356.0000081062317,\"~:y\",594.0000417226197]],[\"^K\",[\"^ \",\"~:x\",314.0000081062317,\"~:y\",594.0000417226197]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",6],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d509800792\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d509800791\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d509800791\",\"~:strokes\",[],\"~:x\",314.0000081062317,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",314.0000081062317,\"~:y\",578.0000417226197,\"^D\",42,\"~:height\",16,\"~:x1\",314.0000081062317,\"~:y1\",578.0000417226197,\"~:x2\",356.0000081062317,\"~:y2\",594.0000417226197]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",16,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d509800793\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e72469bf90": "[\"~#shape\",[\"^ \",\"~:y\",455.9999966065857,\"~:rx\",0,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",null,\"~:index\",null,\"~:hide-in-viewer\",true,\"~:name\",\"heart\",\"~:width\",24,\"~:type\",\"~:frame\",\"~:svg-attrs\",[\"^ \",\"^8\",\"24\",\"~:height\",\"24\"],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1140,\"~:y\",455.9999966065857]],[\"^>\",[\"^ \",\"~:x\",1164,\"~:y\",455.9999966065857]],[\"^>\",[\"^ \",\"~:x\",1164,\"~:y\",479.9999966065857]],[\"^>\",[\"^ \",\"~:x\",1140,\"~:y\",479.9999966065857]]],\"~:r2\",0,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c4\",\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",0,\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e72469bf90\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e72469bf8e\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e72469bf8e\",\"~:strokes\",[],\"~:x\",1140,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1140,\"~:y\",455.9999966065857,\"^8\",24,\"^<\",24,\"~:x1\",1140,\"~:y1\",455.9999966065857,\"~:x2\",1164,\"~:y2\",479.9999966065857]],\"~:fills\",[],\"~:flip-x\",null,\"~:ry\",0,\"^<\",24,\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e72469bf91\",\"~u9299427e-8172-80bb-8007-90e72469bf92\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e71cbc3430": "[\"~#shape\",[\"^ \",\"~:y\",446.9999966065857,\"~:rx\",0,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",null,\"~:index\",null,\"~:hide-in-viewer\",true,\"~:name\",\"heart\",\"~:width\",24,\"~:type\",\"~:frame\",\"~:svg-attrs\",[\"^ \",\"^8\",\"24\",\"~:height\",\"24\"],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",804,\"~:y\",446.9999966065857]],[\"^>\",[\"^ \",\"~:x\",828,\"~:y\",446.9999966065857]],[\"^>\",[\"^ \",\"~:x\",828,\"~:y\",470.9999966065857]],[\"^>\",[\"^ \",\"~:x\",804,\"~:y\",470.9999966065857]]],\"~:r2\",0,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c4\",\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",0,\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e71cbc3430\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71cbc342f\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71cbc342f\",\"~:strokes\",[],\"~:x\",804,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",804,\"~:y\",446.9999966065857,\"^8\",24,\"^<\",24,\"~:x1\",804,\"~:y1\",446.9999966065857,\"~:x2\",828,\"~:y2\",470.9999966065857]],\"~:fills\",[],\"~:flip-x\",null,\"~:ry\",0,\"^<\",24,\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e71cbc3431\",\"~u9299427e-8172-80bb-8007-90e71cbc3432\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d509800793": "[\"~#shape\",[\"^ \",\"~:y\",579.0000417226199,\"~: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\",\"~:index\",null,\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:path\",\"\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:text-align\",\"left\",\"~:font-id\",\"gfont-work-sans\",\"~:font-size\",\"12\",\"~:font-weight\",\"500\",\"~:modified-at\",\"2024-06-04T14:15:09.786Z\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"underline\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#000000\",\"~:fill-color-ref-file\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"~:fill-opacity\",1,\"~:fill-color-ref-id\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:font-family\",\"Work Sans\",\"~:text\",\"Label\"]],\"^=\",\"uppercase\",\"^>\",\"center\",\"^?\",\"gfont-work-sans\",\"^@\",\"12\",\"^A\",\"500\",\"^8\",\"paragraph\",\"^B\",\"2024-06-04T14:15:09.786Z\",\"^C\",\"500\",\"^D\",\"underline\",\"^E\",\"0\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"^K\",\"Work Sans\"]]]],\"~:vertical-align\",\"center\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^I\",1]]],\"~:hide-in-viewer\",true,\"~:name\",\"Input\",\"~:saved-component-root\",null,\"~:width\",38,\"^8\",\"^L\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",316.0000081062317,\"~:y\",579.0000417226199]],[\"^S\",[\"^ \",\"~:x\",354.0000081062317,\"~:y\",579.0000417226199]],[\"^S\",[\"^ \",\"~:x\",354.0000081062317,\"~:y\",594.0000417226195]],[\"^S\",[\"^ \",\"~:x\",316.0000081062317,\"~:y\",594.0000417226199]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d509800793\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d509800792\",\"~:position-data\",[[\"^ \",\"~:y\",593.340087890625,\"^:\",\"1.2\",\"^<\",\"normal\",\"^=\",\"uppercase\",\"^>\",\"left\",\"^?\",\"sourcesanspro\",\"^@\",\"12\",\"^A\",\"500\",\"~:text-direction\",\"ltr\",\"^Q\",37.94000244140625,\"^C\",\"regular\",\"^D\",\"underline\",\"^E\",\"0\",\"~:x\",316.0299987792969,\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:direction\",\"ltr\",\"^K\",\"Work Sans\",\"~:height\",14.08001708984375,\"^L\",\"Label\"]],\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d509800792\",\"~:strokes\",[],\"~:x\",316.0000081062317,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",316.0000081062317,\"~:y\",579.0000417226199,\"^Q\",38,\"^11\",15,\"~:x1\",316.0000081062317,\"~:y1\",579.0000417226199,\"~:x2\",354.0000081062317,\"~:y2\",594.0000417226199]],\"^F\",[],\"~:flip-x\",null,\"^11\",15,\"~:flip-y\",null]]",
+                        "~u9299427e-8172-80bb-8007-90e72469bf91": "[\"~#shape\",[\"^ \",\"~:y\",456.0000271241638,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",null,\"~:index\",null,\"~:name\",\"base-background\",\"~:width\",24,\"~:type\",\"~:rect\",\"~:svg-attrs\",[\"^ \",\"~:fill\",\"none\",\"~:stroke-linejoin\",\"round\",\"~:stroke-linecap\",\"round\",\"~:id\",\"base-background\"],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1140,\"~:y\",456.0000271241638]],[\"^?\",[\"^ \",\"~:x\",1164,\"~:y\",456.0000271241638]],[\"^?\",[\"^ \",\"~:x\",1164,\"~:y\",480.0000271241638]],[\"^?\",[\"^ \",\"~:x\",1140,\"~:y\",480.0000271241638]]],\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c5\",\"~: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\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:hidden\",true,\"^=\",\"~u9299427e-8172-80bb-8007-90e72469bf91\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e72469bf90\",\"~:svg-viewbox\",[\"^ \",\"~:y\",0,\"~:y1\",0,\"^6\",24,\"~:x\",0,\"~:x1\",0,\"~:y2\",24,\"~:x2\",24,\"~:height\",24],\"~:svg-defs\",[\"^ \"],\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e72469bf90\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-color\",\"#ffffff\",\"~:stroke-opacity\",1,\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",2]],\"~:x\",1140,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1140,\"~:y\",456.0000271241638,\"^6\",24,\"^K\",24,\"^H\",1140,\"^G\",456.0000271241638,\"^J\",1164,\"^I\",480.0000271241638]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",24,\"~:flip-y\",null]]",
+                        "~u9299427e-8172-80bb-8007-90e71cbc3431": "[\"~#shape\",[\"^ \",\"~:y\",447.0000271241638,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",null,\"~:index\",null,\"~:name\",\"base-background\",\"~:width\",24,\"~:type\",\"~:rect\",\"~:svg-attrs\",[\"^ \",\"~:fill\",\"none\",\"~:stroke-linejoin\",\"round\",\"~:stroke-linecap\",\"round\",\"~:id\",\"base-background\"],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",804,\"~:y\",447.0000271241638]],[\"^?\",[\"^ \",\"~:x\",828,\"~:y\",447.0000271241638]],[\"^?\",[\"^ \",\"~:x\",828,\"~:y\",471.0000271241638]],[\"^?\",[\"^ \",\"~:x\",804,\"~:y\",471.0000271241638]]],\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c5\",\"~: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\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:hidden\",true,\"^=\",\"~u9299427e-8172-80bb-8007-90e71cbc3431\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71cbc3430\",\"~:svg-viewbox\",[\"^ \",\"~:y\",0,\"~:y1\",0,\"^6\",24,\"~:x\",0,\"~:x1\",0,\"~:y2\",24,\"~:x2\",24,\"~:height\",24],\"~:svg-defs\",[\"^ \"],\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71cbc3430\",\"~:strokes\",[[\"^ \",\"~:stroke-style\",\"~:solid\",\"~:stroke-color\",\"#ffffff\",\"~:stroke-opacity\",1,\"~:stroke-alignment\",\"~:inner\",\"~:stroke-width\",2]],\"~:x\",804,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",804,\"~:y\",447.0000271241638,\"^6\",24,\"^K\",24,\"^H\",804,\"^G\",447.0000271241638,\"^J\",828,\"^I\",471.0000271241638]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",24,\"~:flip-y\",null]]",
+                        "~u77c71dba-32ee-804c-8007-736561cf8584": "[\"~#shape\",[\"^ \",\"~:y\",222.00000357564704,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"Board Child\",\"~:width\",80,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",379.0000081062317,\"~:y\",222.00000357564704]],[\"^;\",[\"^ \",\"~:x\",459.0000081062317,\"~:y\",222.00000357564704]],[\"^;\",[\"^ \",\"~:x\",459.0000081062317,\"~:y\",302.00000357564704]],[\"^;\",[\"^ \",\"~:x\",379.0000081062317,\"~:y\",302.00000357564704]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u77c71dba-32ee-804c-8007-736561cf8584\",\"~:parent-id\",\"~u77c71dba-32ee-804c-8007-736561cf857f\",\"~:frame-id\",\"~u77c71dba-32ee-804c-8007-736561cf857f\",\"~:strokes\",[],\"~:x\",379.0000081062317,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",379.0000081062317,\"~:y\",222.00000357564704,\"^7\",80,\"~:height\",80,\"~:x1\",379.0000081062317,\"~:y1\",222.00000357564704,\"~:x2\",459.0000081062317,\"~:y2\",302.00000357564704]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",80,\"~:flip-y\",null,\"~:shapes\",[\"~u77c71dba-32ee-804c-8007-736561cff457\",\"~u77c71dba-32ee-804c-8007-736561cff458\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d5055d6859": "[\"~#shape\",[\"^ \",\"~:y\",330.00000202817546,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",12,\"~:p3\",0,\"~:p4\",12],\"~: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\",\"~:wrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"Board Parent 2\",\"~:layout-align-items\",\"~:start\",\"~:width\",272,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",283.0000081062317,\"~:y\",330.00000202817546]],[\"^J\",[\"^ \",\"~:x\",555.0000081062317,\"~:y\",330.00000202817546]],[\"^J\",[\"^ \",\"~:x\",555.0000081062317,\"~:y\",409.99998986432956]],[\"^J\",[\"^ \",\"~:x\",283.0000081062317,\"~:y\",409.99998986432956]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-item-v-sizing\",\"~:fix\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d6859\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:row-reverse\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",283.0000081062317,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",283.0000081062317,\"~:y\",330.00000202817546,\"^D\",272,\"~:height\",79.9999878361541,\"~:x1\",283.0000081062317,\"~:y1\",330.00000202817546,\"~:x2\",555.0000081062317,\"~:y2\",409.99998986432956]],\"~:fills\",[],\"~:flip-x\",null,\"^15\",79.9999878361541,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d5055d685a\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d5055d685a": "[\"~#shape\",[\"^ \",\"~:y\",329.9999959462525,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"Board Child\",\"~:width\",80,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",379.0000081062317,\"~:y\",329.9999959462525]],[\"^;\",[\"^ \",\"~:x\",459.0000081062317,\"~:y\",329.9999959462525]],[\"^;\",[\"^ \",\"~:x\",459.0000081062317,\"~:y\",409.9999959462525]],[\"^;\",[\"^ \",\"~:x\",379.0000081062317,\"~:y\",409.9999959462525]]],\"~:show-content\",true,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d6859\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d6859\",\"~:strokes\",[],\"~:x\",379.0000081062317,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",379.0000081062317,\"~:y\",329.9999959462525,\"^7\",80,\"~:height\",80,\"~:x1\",379.0000081062317,\"~:y1\",329.9999959462525,\"~:x2\",459.0000081062317,\"~:y2\",409.9999959462525]],\"~:fills\",[],\"~:flip-x\",null,\"^K\",80,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d5055d685b\",\"~u94eaebe4-addd-80d1-8007-79d5055d685c\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d5055d685b": "[\"~#shape\",[\"^ \",\"~:y\",329.9999959462525,\"~:rx\",8,\"~: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\",80,\"~:transforming\",false,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",379.0000081062317,\"~:y\",329.9999959462525]],[\"^>\",[\"^ \",\"~:x\",459.0000081062317,\"~:y\",329.9999959462525]],[\"^>\",[\"^ \",\"~:x\",459.0000081062317,\"~:y\",409.9999959462525]],[\"^>\",[\"^ \",\"~:x\",379.0000081062317,\"~:y\",409.9999959462525]]],\"~:r2\",8,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685b\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:strokes\",[],\"~:x\",379.0000081062317,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",379.0000081062317,\"~:y\",329.9999959462525,\"^9\",80,\"~:height\",80,\"~:x1\",379.0000081062317,\"~:y1\",329.9999959462525,\"~:x2\",459.0000081062317,\"~:y2\",409.9999959462525]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#e8e9ea\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^M\",80,\"~:flip-y\",null]]",
+                        "~u9299427e-8172-80bb-8007-90e71fba0f7e": "[\"~#shape\",[\"^ \",\"~:y\",191.99999475401955,\"~: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,\"~:hide-in-viewer\",true,\"~:name\",\"img-city\",\"~:width\",265,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",916,\"~:y\",191.99999475401978]],[\"^;\",[\"^ \",\"~:x\",1181,\"~:y\",191.99999475401978]],[\"^;\",[\"^ \",\"~:x\",1181,\"~:y\",369.9899634401968]],[\"^;\",[\"^ \",\"~:x\",916,\"~:y\",369.9899634401968]]],\"~:r2\",0,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c1\",\"~:layout-item-h-sizing\",\"~:fill\",\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:layout-item-v-sizing\",\"^?\",\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u9299427e-8172-80bb-8007-90e71fba0f7e\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f7d\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f7d\",\"~:strokes\",[],\"~:x\",916,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",916,\"~:y\",191.99999475401955,\"^7\",265,\"~:height\",177.989968686177,\"~:x1\",916,\"~:y1\",191.99999475401955,\"~:x2\",1181,\"~:y2\",369.98996344019656]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^N\",177.989968686177,\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e71fba0f80\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d5055d685c": "[\"~#shape\",[\"^ \",\"~:y\",353.9999959462525,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:rx\",8,\"~:layout-padding\",[\"^ \",\"~:p1\",8,\"~:p2\",12,\"~:p3\",8,\"~:p4\",12],\"~: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\",\"Dark / Button / Primary / Text / Default\",\"~:layout-align-items\",\"~:center\",\"~:width\",66,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",386.0000081062317,\"~:y\",353.9999959462525]],[\"^K\",[\"^ \",\"~:x\",452.0000081062317,\"~:y\",353.9999959462525]],[\"^K\",[\"^ \",\"~:x\",452.0000081062317,\"~:y\",385.9999959462525]],[\"^K\",[\"^ \",\"~:x\",386.0000081062317,\"~:y\",385.9999959462525]]],\"~:r2\",8,\"~:show-content\",true,\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",4,\"~:column-gap\",4],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:r3\",8,\"~:layout-justify-content\",\"^D\",\"~:r1\",8,\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685c\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:layout-flex-dir\",\"~:row\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685a\",\"~:strokes\",[],\"~:x\",386.0000081062317,\"~:proportion\",1,\"~:r4\",8,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",386.0000081062317,\"~:y\",353.9999959462525,\"^E\",66,\"~:height\",32,\"~:x1\",386.0000081062317,\"~:y1\",353.9999959462525,\"~:x2\",452.0000081062317,\"~:y2\",385.9999959462525]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#7efff5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"~:ry\",8,\"^17\",32,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d5055d685d\"]]]",
+                        "~u9299427e-8172-80bb-8007-90e71fba0f7f": "[\"~#shape\",[\"^ \",\"~:y\",198.00002998518676,\"~:hide-fill-on-export\",false,\"~:layout-item-absolute\",true,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",0,\"~:p3\",0,\"~: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\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"add-favorites\",\"~:layout-align-items\",\"~:center\",\"~:width\",48,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:touched\",[\"~#set\",[\"~:layout-item-z-index\"]],\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",1128,\"~:y\",198.00002998518676]],[\"^P\",[\"^ \",\"~:x\",1176,\"~:y\",198.00002998518676]],[\"^P\",[\"^ \",\"~:x\",1176,\"~:y\",246.00002426314086]],[\"^P\",[\"^ \",\"~:x\",1128,\"~:y\",246.00002426314086]]],\"~:r2\",50,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c2\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^;\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",50,\"~:layout-justify-content\",\"^F\",\"~:r1\",50,\"~:id\",\"~u9299427e-8172-80bb-8007-90e71fba0f7f\",\"~:parent-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f7d\",\"~:layout-flex-dir\",\"~:row\",\"~:applied-tokens\",[\"^ \",\"~:fill\",\"color.bg.default\"],\"~:layout-align-content\",\"~:stretch\",\"~:component-id\",\"~uc8b014fe-f285-8021-8007-8ea447a0bc30\",\"~:frame-id\",\"~u9299427e-8172-80bb-8007-90e71fba0f7d\",\"~:strokes\",[],\"~:x\",1128,\"~:proportion\",1,\"~:r4\",50,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",1128,\"~:y\",198.00002998518676,\"^G\",48,\"~:height\",47.9999942779541,\"~:x1\",1128,\"~:y1\",198.00002998518676,\"~:x2\",1176,\"~:y2\",246.00002426314086]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#ffffff\",\"~:fill-opacity\",0.3]],\"~:flip-x\",null,\"^1?\",47.9999942779541,\"~:component-file\",\"~ud0eb4518-f33d-81e1-8007-8fe418fea255\",\"~:flip-y\",null,\"^N\",0,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e71fba0f81\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d5055d685d": "[\"~#shape\",[\"^ \",\"~:y\",361.9999959462525,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",2,\"~:p3\",0,\"~:p4\",2],\"~: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\",\"_Utilities / Text / White\",\"~:layout-align-items\",\"~:start\",\"~:width\",42,\"~:layout-padding-type\",\"~:simple\",\"~:transforming\",false,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",398.0000081062317,\"~:y\",361.9999959462525]],[\"^K\",[\"^ \",\"~:x\",440.0000081062317,\"~:y\",361.9999959462525]],[\"^K\",[\"^ \",\"~:x\",440.0000081062317,\"~:y\",377.9999959462525]],[\"^K\",[\"^ \",\"~:x\",398.0000081062317,\"~:y\",377.9999959462525]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",6],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:layout-justify-content\",\"~:center\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685d\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685c\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685c\",\"~:strokes\",[],\"~:x\",398.0000081062317,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",398.0000081062317,\"~:y\",361.9999959462525,\"^D\",42,\"~:height\",16,\"~:x1\",398.0000081062317,\"~:y1\",361.9999959462525,\"~:x2\",440.0000081062317,\"~:y2\",377.9999959462525]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",16,\"~:flip-y\",null,\"~:shapes\",[\"~u94eaebe4-addd-80d1-8007-79d5055d685e\"]]]",
+                        "~u94eaebe4-addd-80d1-8007-79d5055d685e": "[\"~#shape\",[\"^ \",\"~:y\",362.99999594625274,\"~: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\",\"~:index\",null,\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:path\",\"\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:text-align\",\"left\",\"~:font-id\",\"gfont-work-sans\",\"~:font-size\",\"12\",\"~:font-weight\",\"500\",\"~:modified-at\",\"2024-06-04T14:15:09.786Z\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"underline\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#000000\",\"~:fill-color-ref-file\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"~:fill-opacity\",1,\"~:fill-color-ref-id\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:font-family\",\"Work Sans\",\"~:text\",\"Label\"]],\"^=\",\"uppercase\",\"^>\",\"center\",\"^?\",\"gfont-work-sans\",\"^@\",\"12\",\"^A\",\"500\",\"^8\",\"paragraph\",\"^B\",\"2024-06-04T14:15:09.786Z\",\"^C\",\"500\",\"^D\",\"underline\",\"^E\",\"0\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"^K\",\"Work Sans\"]]]],\"~:vertical-align\",\"center\",\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^I\",1]]],\"~:hide-in-viewer\",true,\"~:name\",\"Input\",\"~:saved-component-root\",null,\"~:width\",38,\"^8\",\"^L\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",400.0000081062317,\"~:y\",362.99999594625274]],[\"^S\",[\"^ \",\"~:x\",438.0000081062317,\"~:y\",362.99999594625274]],[\"^S\",[\"^ \",\"~:x\",438.0000081062317,\"~:y\",377.9999959462523]],[\"^S\",[\"^ \",\"~:x\",400.0000081062317,\"~:y\",377.99999594625274]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u02e9633d-4ce7-80da-8007-736558496fa8\",\"~:id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685e\",\"~:parent-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685d\",\"~:position-data\",[[\"^ \",\"~:y\",377.3399963378906,\"^:\",\"1.2\",\"^<\",\"normal\",\"^=\",\"uppercase\",\"^>\",\"left\",\"^?\",\"sourcesanspro\",\"^@\",\"12\",\"^A\",\"500\",\"~:text-direction\",\"ltr\",\"^Q\",37.94000244140625,\"^C\",\"regular\",\"^D\",\"underline\",\"^E\",\"0\",\"~:x\",400.0299987792969,\"^F\",[[\"^ \",\"^G\",\"#000000\",\"^H\",\"~ucaa70d02-51e1-81ae-8007-735e7de3d7bc\",\"^I\",1,\"^J\",\"~udfa92acf-7d18-8079-8003-baba8789d8af\"]],\"~:direction\",\"ltr\",\"^K\",\"Work Sans\",\"~:height\",14.079986572265625,\"^L\",\"Label\"]],\"~:frame-id\",\"~u94eaebe4-addd-80d1-8007-79d5055d685d\",\"~:strokes\",[],\"~:x\",400.0000081062317,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",400.0000081062317,\"~:y\",362.99999594625274,\"^Q\",38,\"^11\",15,\"~:x1\",400.0000081062317,\"~:y1\",362.99999594625274,\"~:x2\",438.0000081062317,\"~:y2\",377.99999594625274]],\"^F\",[],\"~:flip-x\",null,\"^11\",15,\"~:flip-y\",null]]",
+                        "~u9299427e-8172-80bb-8007-90e71fba0f7d": "[\"~#shape\",[\"^ \",\"~:y\",191.99998474121094,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",0,\"~:p2\",0,\"~:p3\",0,\"~: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\",\"~:grow-type\",\"~:fixed\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"card-img / patinegro\",\"~:layout-align-items\",\"~:start\",\"~:width\",265,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",916,\"~:y\",191.99998474121094]],[\"^L\",[\"^ \",\"~:x\",1181,\"~:y\",191.99998474121094]],[\"^L\",[\"^ \",\"~:x\",1181,\"~:y\",369.99997875688996]],[\"^L\",[\"^ \",\"~:x\",916,\"~:y\",369.99997875688996]]],\"~:r2\",20,\"~:component-root\",true,\"~:shape-ref\",\"~u9299427e-8172-80bb-8007-90e7059421c0\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",0,\"~:column-gap\",0],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u7c4e00d1-1f97-8161-8007-8f7861f33b60\",\"~:r3\",20,\"~:layout-justify-content\",\"^E\",\"~:r1\",20,\"~:id\",\"~u9299427e-8172-80bb-8007-90e71fba0f7d\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:component-id\",\"~u9299427e-8172-80bb-8007-90e7059a83e2\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",916,\"~:proportion\",1,\"~:r4\",20,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",916,\"~:y\",191.99998474121094,\"^F\",265,\"~:height\",177.99999401567902,\"~:x1\",916,\"~:y1\",191.99998474121094,\"~:x2\",1181,\"~:y2\",369.99997875688996]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^1:\",177.99999401567902,\"~:component-file\",\"~u31fe2e21-73e7-80f3-8007-73894fb58240\",\"~:flip-y\",null,\"~:shapes\",[\"~u9299427e-8172-80bb-8007-90e71fba0f7e\",\"~u9299427e-8172-80bb-8007-90e71fba0f7f\"]]]"
                     }
                 }
             }
@@ -150,6 +182,16 @@
         "~:options": {
             "~:components-v2": true,
             "~:base-font-size": "16px"
+        },
+        "~:components": {
+            "~u9299427e-8172-80bb-8007-90e7059a83e2": {
+                "~:id": "~u9299427e-8172-80bb-8007-90e7059a83e2",
+                "~:name": "patinegro",
+                "~:path": "card-img",
+                "~:modified-at": "~m1770978606872",
+                "~:main-instance-id": "~u9299427e-8172-80bb-8007-90e7059421c0",
+                "~:main-instance-page": "~u02e9633d-4ce7-80da-8007-736558496fa8"
+            }
         }
     }
 }

frontend/playwright/data/workspace/get-file-13305.json

@@ -0,0 +1,137 @@
+{
+    "~: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": "~u99e49e93-362f-80ef-8007-3450ea52c9a4",
+    "~: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": "BUG 13305",
+    "~:revn": 11,
+    "~:modified-at": "~m1770911234124",
+    "~:vern": 0,
+    "~:id": "~u9666e946-78e8-8111-8007-8fe5f0f454bf",
+    "~: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",
+            "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",
+            "0015-clean-shadow-color",
+            "0016-copy-fills-from-position-data-to-text-node"
+        ]
+    },
+    "~:version": 67,
+    "~:project-id": "~ucd8f7672-e5d1-810f-8007-87e124eda82a",
+    "~:created-at": "~m1770911129553",
+    "~:backend": "legacy-db",
+    "~:data": {
+        "~:pages": [
+            "~u9666e946-78e8-8111-8007-8fe5f0f49ac6"
+        ],
+        "~:pages-index": {
+            "~u9666e946-78e8-8111-8007-8fe5f0f49ac6": {
+                "~: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\",[\"~u3edd6127-ced7-80c6-8007-8fe5f6c52e5a\"]]]",
+                        "~u3edd6127-ced7-80c6-8007-8fe5f6c52e5a": "[\"~#shape\",[\"^ \",\"~:y\",99.99999499320984,\"~: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,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Board\",\"~:width\",511.99998180389287,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",99.9999820137034,\"~:y\",99.99999499320984]],[\"^=\",[\"^ \",\"~:x\",611.9999638175963,\"~:y\",99.99999499320984]],[\"^=\",[\"^ \",\"~:x\",611.9999638175963,\"~:y\",611.9999695949548]],[\"^=\",[\"^ \",\"~:x\",99.9999820137034,\"~:y\",611.9999695949548]]],\"~: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\",\"~u3edd6127-ced7-80c6-8007-8fe5f6c52e5a\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",99.9999820137034,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",99.9999820137034,\"~:y\",99.99999499320984,\"^9\",511.99998180389287,\"~:height\",511.99997460174495,\"~:x1\",99.9999820137034,\"~:y1\",99.99999499320984,\"~:x2\",611.9999638175963,\"~:y2\",611.9999695949548]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^K\",511.99997460174495,\"~:flip-y\",null,\"~:shapes\",[\"~u3edd6127-ced7-80c6-8007-8fe60306baa7\",\"~u3edd6127-ced7-80c6-8007-8fe61479065a\"]]]",
+                        "~u3edd6127-ced7-80c6-8007-8fe60306baa7": "[\"~#shape\",[\"^ \",\"~:y\",109.99999433755875,\"~: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\",100.00000357627869,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",109.99998164176941,\"~:y\",109.99999433755875]],[\"^<\",[\"^ \",\"~:x\",209.9999852180481,\"~:y\",109.99999433755875]],[\"^<\",[\"^ \",\"~:x\",209.9999852180481,\"~:y\",209.9999930858612]],[\"^<\",[\"^ \",\"~:x\",109.99998164176941,\"~:y\",209.9999930858612]]],\"~: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\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:r1\",0,\"~:id\",\"~u3edd6127-ced7-80c6-8007-8fe60306baa7\",\"~:parent-id\",\"~u3edd6127-ced7-80c6-8007-8fe5f6c52e5a\",\"~:frame-id\",\"~u3edd6127-ced7-80c6-8007-8fe5f6c52e5a\",\"~:strokes\",[],\"~:x\",109.99998164176941,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",109.99998164176941,\"~:y\",109.99999433755875,\"^8\",100.00000357627869,\"~:height\",99.99999874830246,\"~:x1\",109.99998164176941,\"~:y1\",109.99999433755875,\"~:x2\",209.9999852180481,\"~:y2\",209.9999930858612]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^N\",99.99999874830246,\"~:flip-y\",null]]",
+                        "~u3edd6127-ced7-80c6-8007-8fe61479065a": "[\"~#shape\",[\"^ \",\"~:y\",483.9999952316284,\"~: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\",\"Ellipse\",\"~:width\",256.000000834465,\"~:type\",\"~:circle\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",483.99998211860657,\"~:y\",483.9999952316284]],[\"^<\",[\"^ \",\"~:x\",739.9999829530716,\"~:y\",483.9999952316284]],[\"^<\",[\"^ \",\"~:x\",739.9999829530716,\"~:y\",739.9999876022339]],[\"^<\",[\"^ \",\"~:x\",483.99998211860657,\"~:y\",739.9999876022339]]],\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u3edd6127-ced7-80c6-8007-8fe61479065a\",\"~:parent-id\",\"~u3edd6127-ced7-80c6-8007-8fe5f6c52e5a\",\"~:frame-id\",\"~u3edd6127-ced7-80c6-8007-8fe5f6c52e5a\",\"~:strokes\",[],\"~:x\",483.99998211860657,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",483.99998211860657,\"~:y\",483.9999952316284,\"^8\",256.000000834465,\"~:height\",255.99999237060547,\"~:x1\",483.99998211860657,\"~:y1\",483.9999952316284,\"~:x2\",739.9999829530716,\"~:y2\",739.9999876022339]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^J\",255.99999237060547,\"~:flip-y\",null]]"
+                    }
+                },
+                "~:id": "~u9666e946-78e8-8111-8007-8fe5f0f49ac6",
+                "~:name": "Page 1"
+            }
+        },
+        "~:id": "~u9666e946-78e8-8111-8007-8fe5f0f454bf",
+        "~:options": {
+            "~:components-v2": true,
+            "~:base-font-size": "16px"
+        }
+    }
+}

frontend/playwright/data/workspace/update-file-13305.json

@@ -0,0 +1,98 @@
+{
+    "~:revn": 11,
+    "~:lagged": [
+        {
+            "~:id": "~u9666e946-78e8-8111-8007-8fe7be6223c2",
+            "~:revn": 12,
+            "~:file-id": "~u9666e946-78e8-8111-8007-8fe5f0f454bf",
+            "~:session-id": "~u3966be0d-5f49-807f-8007-8fe68b13fee6",
+            "~:changes": [
+                {
+                    "~:type": "~:mod-obj",
+                    "~:id": "~u3edd6127-ced7-80c6-8007-8fe5f6c52e5a",
+                    "~:page-id": "~u9666e946-78e8-8111-8007-8fe5f0f49ac6",
+                    "~:operations": [
+                        {
+                            "~:type": "~:set",
+                            "~:attr": "~:y",
+                            "~:val": 110.00000528339297,
+                            "~:ignore-geometry": false,
+                            "~:ignore-touched": false
+                        },
+                        {
+                            "~:type": "~:set",
+                            "~:attr": "~:width",
+                            "~:val": 629.9999776102587,
+                            "~:ignore-geometry": false,
+                            "~:ignore-touched": false
+                        },
+                        {
+                            "~:type": "~:set",
+                            "~:attr": "~:points",
+                            "~:val": [
+                                {
+                                    "~#point": {
+                                        "~:x": 109.99999217353886,
+                                        "~:y": 110.00000528339297
+                                    }
+                                },
+                                {
+                                    "~#point": {
+                                        "~:x": 739.9999697837976,
+                                        "~:y": 110.00000528339297
+                                    }
+                                },
+                                {
+                                    "~#point": {
+                                        "~:x": 739.9999697837976,
+                                        "~:y": 739.9999740316338
+                                    }
+                                },
+                                {
+                                    "~#point": {
+                                        "~:x": 109.99999217353886,
+                                        "~:y": 739.9999740316338
+                                    }
+                                }
+                            ],
+                            "~:ignore-geometry": false,
+                            "~:ignore-touched": false
+                        },
+                        {
+                            "~:type": "~:set",
+                            "~:attr": "~:x",
+                            "~:val": 109.99999217353889,
+                            "~:ignore-geometry": false,
+                            "~:ignore-touched": false
+                        },
+                        {
+                            "~:type": "~:set",
+                            "~:attr": "~:selrect",
+                            "~:val": {
+                                "~#rect": {
+                                    "~:x": 109.99999217353889,
+                                    "~:y": 110.00000528339297,
+                                    "~:width": 629.9999776102587,
+                                    "~:height": 629.9999687482408,
+                                    "~:x1": 109.99999217353889,
+                                    "~:y1": 110.00000528339297,
+                                    "~:x2": 739.9999697837976,
+                                    "~:y2": 739.9999740316338
+                                }
+                            },
+                            "~:ignore-geometry": false,
+                            "~:ignore-touched": false
+                        },
+                        {
+                            "~:type": "~:set",
+                            "~:attr": "~:height",
+                            "~:val": 629.9999687482408,
+                            "~:ignore-geometry": false,
+                            "~:ignore-touched": false
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}

frontend/playwright/ui/pages/WasmWorkspacePage.js

@@ -10,7 +10,7 @@ export const WASM_FLAGS = [
 export class WasmWorkspacePage extends WorkspacePage {
   static async init(page) {
     await super.init(page);
-    await WorkspacePage.mockConfigFlags(page, WASM_FLAGS);
+    await WasmWorkspacePage.mockConfigFlags(page, WASM_FLAGS);
 
     await page.addInitScript(() => {
       document.addEventListener("penpot:wasm:loaded", () => {
@@ -27,6 +27,14 @@ export class WasmWorkspacePage extends WorkspacePage {
     });
   }
 
+  static async mockConfigFlags(page, flags) {
+    await super.mockConfigFlags(page, [...WASM_FLAGS, ...flags]);
+  }
+
+  async mockConfigFlags(flags) {
+    return WasmWorkspacePage.mockConfigFlags(this.page, flags);
+  }
+
   constructor(page) {
     super(page);
     this.canvas = page.getByTestId("canvas-wasm-shapes");

frontend/playwright/ui/pages/WorkspacePage.js

@@ -338,9 +338,18 @@ export class WorkspacePage extends BaseWebSocketPage {
 
   async clickWithDragViewportAt(x, y, width, height) {
     await this.page.waitForTimeout(100);
-    await this.viewport.hover({ position: { x, y } });
+    const box = await this.viewport.boundingBox();
+    if (!box) throw new Error('Viewport not visible');
+
+    const startX = box.x + x;
+    const startY = box.y + y;
+    const endX = startX + width;
+    const endY = startY + height;
+
+    await this.page.mouse.move(startX, startY);
     await this.page.mouse.down();
-    await this.viewport.hover({ position: { x: x + width, y: y + height } });
+    // Use steps so mouseup is properly processed (see Playwright issue #20254)
+    await this.page.mouse.move(endX, endY, { steps: 10 });
     await this.page.mouse.up();
   }
 

frontend/playwright/ui/render-wasm-specs/shapes.spec.js

@@ -165,6 +165,7 @@ test("Updates canvas background", async ({ page }) => {
   });
   await canvasBackgroundInput.fill("FABADA");
   await workspace.page.keyboard.press("Enter");
+  await workspace.waitForFirstRenderWithoutUI();
 
   await expect(workspace.canvas).toHaveScreenshot();
 });
@@ -196,7 +197,7 @@ test("Renders a file with blurs applied to any kind of shape", async ({
 
 test("Renders a file with shadows applied to any kind of shape", async ({
   page,
-}) => {
+}) => { 
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile("render-wasm/get-file-shadows.json");
@@ -290,6 +291,24 @@ test("Renders a file with nested clipping frames", async ({ page }) => {
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
+test("Renders clipped frames with strokes correctly (no double painting)", async ({
+  page,
+}) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile(
+    "render-wasm/get-file-frame-strokes-opacity.json",
+  );
+
+  await workspace.goToWorkspace({
+    id: "3144ac7c-a5cc-80e8-8007-8bbb29a4e56e",
+    pageId: "3144ac7c-a5cc-80e8-8007-8bbb29a510ac",
+  });
+  await workspace.waitForFirstRenderWithoutUI();
+
+  await expect(workspace.canvas).toHaveScreenshot();
+});
+
 test("Renders a clipped frame with a large blur drop shadow", async ({
   page,
 }) => {
@@ -305,3 +324,35 @@ test("Renders a clipped frame with a large blur drop shadow", async ({
 
   await expect(workspace.canvas).toHaveScreenshot();
 });
+
+test("Renders a file with solid, dotted, dashed and mixed stroke styles", async ({
+  page,
+}) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("render-wasm/get-file-stroke-styles.json");
+
+  await workspace.goToWorkspace({
+    id: "b888b894-3697-80d3-8006-51cc8a55c200",
+    pageId: "b888b894-3697-80d3-8006-51cc8a55c210",
+  });
+  await workspace.waitForFirstRenderWithoutUI();
+
+  await expect(workspace.canvas).toHaveScreenshot();
+});
+
+test("Renders shapes with multiple fills and blur", async ({
+  page,
+}) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("render-wasm/get-file-fill-blend-blurs.json");
+
+  await workspace.goToWorkspace({
+    id: "b15901d7-d46d-8056-8007-8d5e34fc1f0c",
+    pageId: "b15901d7-d46d-8056-8007-8d5e34fc1f0d",
+  });
+  await workspace.waitForFirstRenderWithoutUI();
+
+  await expect(workspace.canvas).toHaveScreenshot();
+});

frontend/playwright/ui/specs/assets-tab.spec.js

@@ -1,14 +1,14 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
+  await WasmWorkspacePage.init(page);
 });
 
 test("User adds a library and its automatically selected in the color palette", async ({
   page,
 }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile();
   await workspacePage.mockRPC(
     "link-file-to-library",
@@ -53,7 +53,7 @@ test("User adds a library and its automatically selected in the color palette",
 test("BUG 10090 - Local library should be expanded by default", async ({
   page,
 }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile(page);
 
   await workspacePage.goToWorkspace();

frontend/playwright/ui/specs/colorpicker.spec.js

@@ -1,15 +1,15 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
+  await WasmWorkspacePage.init(page);
 });
 
 // Fix for https://tree.taiga.io/project/penpot/issue/7549
 test("Bug 7549 - User clicks on color swatch to display the color picker next to it", async ({
   page,
 }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile(page);
 
   await workspacePage.goToWorkspace();
@@ -25,7 +25,7 @@ test("Bug 7549 - User clicks on color swatch to display the color picker next to
 });
 
 test("Create a LINEAR gradient", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile();
   await workspacePage.mockRPC(
     /get\-file\?/,
@@ -99,7 +99,7 @@ test("Create a LINEAR gradient", async ({ page }) => {
 });
 
 test("Create a RADIAL gradient", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile();
   await workspacePage.mockRPC(
     /get\-file\?/,
@@ -183,7 +183,7 @@ test("Create a RADIAL gradient", async ({ page }) => {
 });
 
 test("Gradient stops limit", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.mockConfigFlags(["enable-feature-render-wasm"]);
   await workspacePage.setupEmptyFile(page);
 
@@ -215,7 +215,7 @@ test("Gradient stops limit", async ({ page }) => {
 test("Bug 9900 - Color picker has no inputs for HSV values", async ({
   page,
 }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile(page);
 
   await workspacePage.goToWorkspace();
@@ -232,7 +232,7 @@ test("Bug 9900 - Color picker has no inputs for HSV values", async ({
 });
 
 test("Bug 10089 - Cannot change alpha", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile();
   await workspacePage.mockRPC(
     /get\-file\?/,

frontend/playwright/ui/specs/design-tab.spec.js

@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
+  await WasmWorkspacePage.init(page);
 });
 
 const multipleConstraintsFileId = `03bff843-920f-81a1-8004-756365e1eb6a`;
@@ -42,7 +42,7 @@ test.describe("Constraints", () => {
   test("Constraint dropdown shows 'Mixed' when multiple layers are selected with different constraints", async ({
     page,
   }) => {
-    const workspace = new WorkspacePage(page);
+    const workspace = new WasmWorkspacePage(page);
     await setupFileWithMultipeConstraints(workspace);
     await workspace.goToWorkspace({
       fileId: multipleConstraintsFileId,
@@ -70,7 +70,7 @@ test.describe("Shape attributes", () => {
   test("Cannot add a new fill when the limit has been reached", async ({
     page,
   }) => {
-    const workspace = new WorkspacePage(page);
+    const workspace = new WasmWorkspacePage(page);
     await workspace.mockConfigFlags(["enable-feature-render-wasm"]);
     await workspace.setupEmptyFile();
     await workspace.mockRPC(/get\-file\?/, "design/get-file-fills-limit.json");
@@ -94,7 +94,7 @@ test.describe("Shape attributes", () => {
   test.skip("Cannot add a new text fill when the limit has been reached", async ({
     page,
   }) => {
-    const workspace = new WorkspacePage(page);
+    const workspace = new WasmWorkspacePage(page);
     await workspace.mockConfigFlags(["enable-feature-render-wasm"]);
     await workspace.setupEmptyFile();
     await workspace.mockRPC(
@@ -128,7 +128,7 @@ test.describe("Multiple shapes attributes", () => {
   test("User selects multiple shapes with sames fills, strokes, shadows and blur", async ({
     page,
   }) => {
-    const workspace = new WorkspacePage(page);
+    const workspace = new WasmWorkspacePage(page);
     await setupFileWithMultipeConstraints(workspace);
     await workspace.goToWorkspace({
       fileId: multipleConstraintsFileId,
@@ -148,7 +148,7 @@ test.describe("Multiple shapes attributes", () => {
   test("User selects multiple shapes with different fills, strokes, shadows and blur", async ({
     page,
   }) => {
-    const workspace = new WorkspacePage(page);
+    const workspace = new WasmWorkspacePage(page);
     await setupFileWithMultipeAttributes(workspace);
     await workspace.goToWorkspace({
       fileId: multipleAttributesFileId,
@@ -168,7 +168,7 @@ test.describe("Multiple shapes attributes", () => {
 test("BUG 7760 - Layout losing properties when changing parents", async ({
   page,
 }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile();
   await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-7760.json");
   await workspacePage.mockRPC(
@@ -205,7 +205,7 @@ test("BUG 7760 - Layout losing properties when changing parents", async ({
 test("BUG 9061 - Group blur visibility toggle icon not updating", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page);
+  const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockRPC(/get\-file\?/, "design/get-file-9061.json");
   await workspace.mockRPC(
@@ -234,7 +234,7 @@ test("BUG 9061 - Group blur visibility toggle icon not updating", async ({
 test("BUG 9543 - Layout padding inputs not showing 'mixed' when needed", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page);
+  const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockRPC(/get\-file\?/, "design/get-file-9543.json");
   await workspace.mockRPC(
@@ -267,7 +267,7 @@ test("BUG 9543 - Layout padding inputs not showing 'mixed' when needed", async (
 test("BUG 11177 - Font size input not showing 'mixed' when needed", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page);
+  const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockRPC(/get\-file\?/, "design/get-file-11177.json");
 
@@ -288,7 +288,7 @@ test("BUG 11177 - Font size input not showing 'mixed' when needed", async ({
 test("BUG 12287 Fix identical text fills not being added/removed", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page);
+  const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockRPC(/get\-file\?/, "design/get-file-12287.json");
 
@@ -323,7 +323,7 @@ test("BUG 12287 Fix identical text fills not being added/removed", async ({
 });
 
 test("BUG 12384 - Export crashing when exporting a board", async ({ page }) => {
-  const workspace = new WorkspacePage(page);
+  const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockRPC(/get\-file\?/, "design/get-file-12384.json");
 

frontend/playwright/ui/specs/export-frames.spec.js

@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
+  await WasmWorkspacePage.init(page);
 });
 
 /**
@@ -32,7 +32,7 @@ test.describe("Export frames to PDF", () => {
   test("Export frames menu option is NOT visible when page has no frames", async ({
     page,
   }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await workspacePage.setupEmptyFile();
 
     await workspacePage.goToWorkspace();
@@ -48,7 +48,7 @@ test.describe("Export frames to PDF", () => {
   test("Export frames menu option is visible when there are frames (even if not selected)", async ({
     page,
   }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await setupWorkspaceWithFrames(workspacePage);
 
     // Open main menu
@@ -62,7 +62,7 @@ test.describe("Export frames to PDF", () => {
   test("Export frames modal shows all frames when none are selected", async ({
     page,
   }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await setupWorkspaceWithFrames(workspacePage);
 
     // Don't select any frame
@@ -88,7 +88,7 @@ test.describe("Export frames to PDF", () => {
   test("Export frames modal shows only the selected frames", async ({
     page,
   }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await setupWorkspaceWithFrames(workspacePage);
 
     // Select Frame 1
@@ -116,7 +116,7 @@ test.describe("Export frames to PDF", () => {
   });
 
   test("User can deselect frames in the export modal", async ({ page }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await setupWorkspaceWithFrames(workspacePage);
 
     // Select Frame 1
@@ -149,7 +149,7 @@ test.describe("Export frames to PDF", () => {
   test("Export button is disabled when all frames are deselected", async ({
     page,
   }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await setupWorkspaceWithFrames(workspacePage);
 
     // Select Frame 1
@@ -173,7 +173,7 @@ test.describe("Export frames to PDF", () => {
   });
 
   test("User can cancel the export modal", async ({ page }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await setupWorkspaceWithFrames(workspacePage);
 
     // Select Frame 1

frontend/playwright/ui/specs/inspect-layout.spec.js

@@ -1,15 +1,15 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
+  await WasmWorkspacePage.init(page);
 });
 
 // Fix for https://tree.taiga.io/project/penpot/issue/9042
 test("Bug 9042 - Measurement unit dropdowns for columns are cut off in grid layout edit mode", async ({
   page,
 }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile(page);
   await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-9042.json");
   await workspacePage.mockRPC(
@@ -37,7 +37,7 @@ test("[Taiga #9116] Copy CSS background color in the selected format in the INSP
   page,
   context,
 }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile(page);
   await workspacePage.goToWorkspace();
 
@@ -87,7 +87,7 @@ test("[Taiga #10630] [INSPECT] Style assets not being displayed on info tab", as
   page,
   context,
 }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile(page);
   await workspacePage.goToWorkspace();
   await workspacePage.mockRPC(

frontend/playwright/ui/specs/inspect-tab.spec.js

@@ -1,10 +1,10 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 const flags = ["enable-inspect-styles"];
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
+  await WasmWorkspacePage.init(page);
 });
 
 const setupFile = async (workspacePage) => {
@@ -90,7 +90,7 @@ const copyPropertyFromPropertyRow = async (panel, property) => {
 
 /**
  * Returns the style panel by its title
- * @param {WorkspacePage} workspacePage - The workspace page instance
+ * @param {WasmWorkspacePage} workspacePage - The workspace page instance
  * @param {string} title - The title of the panel to retrieve
  */
 const getPanelByTitle = async (workspacePage, title) => {
@@ -103,7 +103,7 @@ const getPanelByTitle = async (workspacePage, title) => {
 
 /**
  * Selects a layer in the layers panel
- * @param {WorkspacePage} workspacePage - The workspace page instance
+ * @param {WasmWorkspacePage} workspacePage - The workspace page instance
  * @param {string} layerName - The name of the layer to select
  * @param {string} parentLayerName - The name of the parent layer to expand (optional)
  */
@@ -118,7 +118,7 @@ const selectLayer = async (workspacePage, layerName, parentLayerName) => {
 
 /**
  * Opens the Inspect tab
- * @param {WorkspacePage} workspacePage - The workspace page instance
+ * @param {WasmWorkspacePage} workspacePage - The workspace page instance
  */
 
 const openInspectTab = async (workspacePage) => {
@@ -133,7 +133,7 @@ const openInspectTab = async (workspacePage) => {
 /**
  * @typedef {'hex' | 'rgba' | 'hsla'} ColorSpace
  *
- * @param {WorkspacePage} workspacePage - The workspace page instance
+ * @param {WasmWorkspacePage} workspacePage - The workspace page instance
  * @param {ColorSpace} colorSpace - The color space to select
  */
 const selectColorSpace = async (workspacePage, colorSpace) => {
@@ -148,7 +148,7 @@ const selectColorSpace = async (workspacePage, colorSpace) => {
 
 test.describe("Inspect tab - Styles", () => {
   test.skip("Open Inspect tab", async ({ page }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await setupFile(workspacePage);
 
     await selectLayer(workspacePage, shapeToLayerName.flex);
@@ -162,7 +162,7 @@ test.describe("Inspect tab - Styles", () => {
   });
   test.describe("Inspect tab - Flex", () => {
     test("Shape Layout Flex ", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.flex);
@@ -178,7 +178,7 @@ test.describe("Inspect tab - Styles", () => {
     });
 
     test("Shape Layout Flex Element", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(
@@ -199,7 +199,7 @@ test.describe("Inspect tab - Styles", () => {
   });
 
   test("Shape Layout Grid", async ({ page }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await setupFile(workspacePage);
 
     await selectLayer(workspacePage, shapeToLayerName.grid);
@@ -216,7 +216,7 @@ test.describe("Inspect tab - Styles", () => {
 
   test.describe("Inspect tab - Shadow", () => {
     test("Shape Shadow - Single shadow", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.shadow);
@@ -232,7 +232,7 @@ test.describe("Inspect tab - Styles", () => {
     });
 
     test("Shape Shadow - Multiple shadow", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.shadowMultiple);
@@ -249,7 +249,7 @@ test.describe("Inspect tab - Styles", () => {
 
     // FIXME: flaky/random (depends on trace ?)
     test.skip("Shape Shadow - Composite shadow", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.shadowComposite);
@@ -278,7 +278,7 @@ test.describe("Inspect tab - Styles", () => {
   });
 
   test("Shape - Blur", async ({ page }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await setupFile(workspacePage);
 
     await selectLayer(workspacePage, shapeToLayerName.blur);
@@ -295,7 +295,7 @@ test.describe("Inspect tab - Styles", () => {
 
   test.describe("Inspect tab - Border radius", () => {
     test("Shape - Border radius - individual", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(
@@ -325,7 +325,7 @@ test.describe("Inspect tab - Styles", () => {
     });
 
     test("Shape - Border radius - multiple", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(
@@ -365,7 +365,7 @@ test.describe("Inspect tab - Styles", () => {
     });
 
     test("Shape - Border radius - token", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(
@@ -399,7 +399,7 @@ test.describe("Inspect tab - Styles", () => {
 
   test.describe("Inspect tab - Fill", () => {
     test("Shape - Fill - Solid", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.fill.solid);
@@ -416,7 +416,7 @@ test.describe("Inspect tab - Styles", () => {
     test("Change color space and ensure fill and shorthand changes", async ({
       page,
     }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.fill.solid);
@@ -454,7 +454,7 @@ test.describe("Inspect tab - Styles", () => {
     });
 
     test("Shape - Fill - Gradient", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.fill.gradient);
@@ -469,7 +469,7 @@ test.describe("Inspect tab - Styles", () => {
     });
 
     test("Shape - Fill - Image", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.fill.image);
@@ -489,7 +489,7 @@ test.describe("Inspect tab - Styles", () => {
     });
 
     test("Shape - Fill - Multiple", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.fill.multiple);
@@ -509,7 +509,7 @@ test.describe("Inspect tab - Styles", () => {
     });
 
     test("Shape - Fill - Token", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.fill.token);
@@ -532,7 +532,7 @@ test.describe("Inspect tab - Styles", () => {
 
   test.describe("Inspect tab - Stroke", () => {
     test("Shape - Stroke - Solid", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.stroke.solid);
@@ -547,7 +547,7 @@ test.describe("Inspect tab - Styles", () => {
     });
 
     test("Shape - Stroke - Gradient", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.stroke.gradient);
@@ -562,7 +562,7 @@ test.describe("Inspect tab - Styles", () => {
     });
 
     test("Shape - Stroke - Image", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.stroke.image);
@@ -582,7 +582,7 @@ test.describe("Inspect tab - Styles", () => {
     });
 
     test("Shape - Stroke - Multiple", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.stroke.multiple);
@@ -602,7 +602,7 @@ test.describe("Inspect tab - Styles", () => {
     });
 
     test("Shape - Stroke - Token", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.stroke.token);
@@ -625,7 +625,7 @@ test.describe("Inspect tab - Styles", () => {
 
   test.describe("Inspect tab - Typography", () => {
     test("Text - simple", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.text.simple);
@@ -643,7 +643,7 @@ test.describe("Inspect tab - Styles", () => {
     });
 
     test("Text - token", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.text.token);
@@ -679,7 +679,7 @@ test.describe("Inspect tab - Styles", () => {
       await expect(textPreview).toBeVisible();
     });
     test("Text - composite token", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.text.compositeToken);
@@ -705,7 +705,7 @@ test.describe("Inspect tab - Styles", () => {
 
   test.describe("Copy properties", () => {
     test("Copy single property", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.flex);
@@ -722,7 +722,7 @@ test.describe("Inspect tab - Styles", () => {
       expect(shorthand).toBe("display: flex;");
     });
     test("Copy shorthand - multiple properties", async ({ page }) => {
-      const workspacePage = new WorkspacePage(page);
+      const workspacePage = new WasmWorkspacePage(page);
       await setupFile(workspacePage);
 
       await selectLayer(workspacePage, shapeToLayerName.shadow);

frontend/playwright/ui/specs/layers-tab.spec.js

@@ -1,14 +1,14 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
+  await WasmWorkspacePage.init(page);
 });
 
 test("BUG 7466 - Layers tab height extends to the bottom when 'Pages' is collapsed", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page);
+  const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
 
   await workspace.goToWorkspace();

frontend/playwright/ui/specs/subscriptions-workspace.spec.js

@@ -1,9 +1,9 @@
 import { test, expect } from "@playwright/test";
-import WorkspacePage from "../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  await WorkspacePage.mockConfigFlags(page, [
+  await WasmWorkspacePage.init(page);
+  await WasmWorkspacePage.mockConfigFlags(page, [
     "enable-subscriptions",
     "disable-onboarding",
   ]);
@@ -13,16 +13,16 @@ test.describe("Subscriptions: workspace", () => {
   test("Unlimited team should have 'Power up your plan' link in main menu", async ({
     page,
   }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await workspacePage.setupEmptyFile();
 
-    await WorkspacePage.mockRPC(
+    await WasmWorkspacePage.mockRPC(
       page,
       "get-profile",
       "subscription/get-profile-unlimited-subscription.json",
     );
 
-    await WorkspacePage.mockRPC(
+    await WasmWorkspacePage.mockRPC(
       page,
       "get-subscription-usage",
       "subscription/get-subscription-usage.json",
@@ -41,16 +41,16 @@ test.describe("Subscriptions: workspace", () => {
   test("Enterprise team should not have 'Power up your plan' link in main menu", async ({
     page,
   }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await workspacePage.setupEmptyFile();
 
-    await WorkspacePage.mockRPC(
+    await WasmWorkspacePage.mockRPC(
       page,
       "get-profile",
       "subscription/get-profile-enterprise-subscription.json",
     );
 
-    await WorkspacePage.mockRPC(
+    await WasmWorkspacePage.mockRPC(
       page,
       "get-subscription-usage",
       "subscription/get-subscription-usage.json",
@@ -69,16 +69,16 @@ test.describe("Subscriptions: workspace", () => {
   test("Professional team should have 7 days autosaved versions", async ({
     page,
   }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await workspacePage.setupEmptyFile();
 
-    await WorkspacePage.mockRPC(
+    await WasmWorkspacePage.mockRPC(
       page,
       "get-profile",
       "subscription/get-profile-enterprise-subscription.json",
     );
 
-    await WorkspacePage.mockRPC(
+    await WasmWorkspacePage.mockRPC(
       page,
       "get-subscription-usage",
       "subscription/get-subscription-usage.json",
@@ -105,22 +105,22 @@ test.describe("Subscriptions: workspace", () => {
   test("Unlimited team should have 30 days autosaved versions", async ({
     page,
   }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await workspacePage.setupEmptyFile();
 
-    await WorkspacePage.mockRPC(
+    await WasmWorkspacePage.mockRPC(
       page,
       "get-profile",
       "subscription/get-profile-unlimited-subscription.json",
     );
 
-    await WorkspacePage.mockRPC(
+    await WasmWorkspacePage.mockRPC(
       page,
       "get-subscription-usage",
       "subscription/get-subscription-usage.json",
     );
 
-    await WorkspacePage.mockRPC(
+    await WasmWorkspacePage.mockRPC(
       page,
       "get-teams",
       "subscription/get-teams-unlimited-one-team.json",
@@ -147,22 +147,22 @@ test.describe("Subscriptions: workspace", () => {
   test("Unlimited team should have 90 days autosaved versions", async ({
     page,
   }) => {
-    const workspacePage = new WorkspacePage(page);
+    const workspacePage = new WasmWorkspacePage(page);
     await workspacePage.setupEmptyFile();
 
-    await WorkspacePage.mockRPC(
+    await WasmWorkspacePage.mockRPC(
       page,
       "get-profile",
       "subscription/get-profile-enterprise-subscription.json",
     );
 
-    await WorkspacePage.mockRPC(
+    await WasmWorkspacePage.mockRPC(
       page,
       "get-subscription-usage",
       "subscription/get-subscription-usage.json",
     );
 
-    await WorkspacePage.mockRPC(
+    await WasmWorkspacePage.mockRPC(
       page,
       "get-teams",
       "subscription/get-teams-enterprise-one-team.json",

frontend/playwright/ui/specs/variants.spec.js

@@ -1,12 +1,12 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage  } from "../pages/WorkspacePage";
+import { WasmWorkspacePage  } from "../pages/WasmWorkspacePage";
 import { BaseWebSocketPage } from "../pages/BaseWebSocketPage";
 import { Clipboard } from "../../helpers/Clipboard";
 
 test.beforeEach(async ({ page, context }) => {
   await Clipboard.enable(context, Clipboard.Permission.ALL);
 
-  await WorkspacePage.init(page);
+  await WasmWorkspacePage.init(page);
   await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-variants.json");
 });
 
@@ -127,7 +127,7 @@ const validateVariant = async (variant) => {
 };
 
 test("User creates a variant", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await setupVariantsFileWithVariant(workspacePage);
 
   await workspacePage.clickLeafLayer("Rectangle");
@@ -154,7 +154,7 @@ test("User creates a variant", async ({ page }) => {
 });
 
 test("User duplicates a variant container", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await setupVariantsFileWithVariant(workspacePage);
 
   const variant = await findVariant(workspacePage, 0);
@@ -177,7 +177,7 @@ test("User duplicates a variant container", async ({ page }) => {
 });
 
 test("User copy paste a variant container", async ({ page, context }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   // Access to the read/write clipboard necesary for this functionality
   await setupVariantsFileWithVariant(workspacePage);
   await workspacePage.mockRPC(
@@ -212,7 +212,7 @@ test("User copy paste a variant container", async ({ page, context }) => {
 });
 
 test("User cut paste a variant container", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await setupVariantsFileWithVariant(workspacePage);
 
   const variant = await findVariant(workspacePage, 0);
@@ -240,7 +240,7 @@ test("User cut paste a variant container", async ({ page }) => {
 test("User cut paste a variant container into a board, and undo twice", async ({
   page,
 }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await setupVariantsFileWithVariant(workspacePage);
 
   const variant = await findVariant(workspacePage, 0);
@@ -283,7 +283,7 @@ test("User cut paste a variant container into a board, and undo twice", async ({
 });
 
 test("User copy paste a variant", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await setupVariantsFileWithVariant(workspacePage);
 
   const variant = await findVariant(workspacePage, 0);
@@ -308,7 +308,7 @@ test("User copy paste a variant", async ({ page }) => {
 });
 
 test("User cut paste a variant outside the container", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await setupVariantsFileWithVariant(workspacePage);
 
   const variant = await findVariant(workspacePage, 0);
@@ -333,7 +333,7 @@ test("User cut paste a variant outside the container", async ({ page }) => {
 });
 
 test("User drag and drop a variant outside the container", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await setupVariantsFileWithVariant(workspacePage);
 
   const variant = await findVariant(workspacePage, 0);
@@ -347,7 +347,7 @@ test("User drag and drop a variant outside the container", async ({ page }) => {
 });
 
 test("User cut paste a component inside a variant", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await setupVariantsFileWithVariant(workspacePage);
 
   const variant = await findVariant(workspacePage, 0);
@@ -378,7 +378,7 @@ test("User cut paste a component inside a variant", async ({ page }) => {
 test("User cut paste a component with path inside a variant", async ({
   page,
 }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await setupVariantsFileWithVariant(workspacePage);
 
   const variant = await findVariant(workspacePage, 0);
@@ -417,7 +417,7 @@ test("User cut paste a component with path inside a variant", async ({
 test("User drag and drop a component with path inside a variant", async ({
   page,
 }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await setupVariantsFileWithVariant(workspacePage);
 
   const variant = findVariantNoWait(workspacePage, 0);
@@ -450,7 +450,7 @@ test("User drag and drop a component with path inside a variant", async ({
 });
 
 test("User cut paste a variant into another container", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await setupVariantsFileWithVariant(workspacePage);
 
   // Create anothe variant

frontend/playwright/ui/specs/versions.spec.js

@@ -1,15 +1,15 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 import { presenceFixture } from "../../data/workspace/ws-notifications";
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
-  const workspacePage = new WorkspacePage(page);
+  await WasmWorkspacePage.init(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile(page);
 });
 
 test("Save and restore version", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
 
   await workspacePage.mockRPC(/get\-file\?/, "workspace/versions-init.json");
   await workspacePage.mockRPC(
@@ -97,7 +97,7 @@ test("Save and restore version", async ({ page }) => {
 });
 
 test("BUG 11006 - Fix history panel shortcut", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.mockRPC(/get\-file\?/, "workspace/versions-init.json");
   await workspacePage.mockRPC(
     "get-file-snapshots?file-id=*",

frontend/playwright/ui/specs/workspace-comments.spec.js

@@ -1,12 +1,12 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
+  await WasmWorkspacePage.init(page);
 });
 
 test("Group bubbles when zooming out if they overlap", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile();
 
   await workspacePage.setupFileWithComments();

frontend/playwright/ui/specs/workspace-modifers.spec.js

@@ -0,0 +1,26 @@
+import { test, expect } from "@playwright/test";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
+
+test.beforeEach(async ({ page }) => {
+  await WasmWorkspacePage.init(page);
+});
+
+test("BUG 13305 - Fix resize board to fit content", async ({ page }) => {
+  const workspacePage = new WasmWorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockGetFile("workspace/get-file-13305.json");
+  await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-13305.json");
+
+  await workspacePage.goToWorkspace({
+    fileId: "9666e946-78e8-8111-8007-8fe5f0f454bf",
+    pageId: "9666e946-78e8-8111-8007-8fe5f0f49ac6",
+  });
+
+  await workspacePage.clickLeafLayer("Board");
+  await workspacePage.rightSidebar.getByRole("button", { name: "Resize board to fit content" }).click();
+
+  await expect(workspacePage.rightSidebar.getByTitle("Width").getByRole("textbox")).toHaveValue("630");
+  await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("630");
+  await expect(workspacePage.rightSidebar.getByTitle("X axis").getByRole("textbox")).toHaveValue("110");
+  await expect(workspacePage.rightSidebar.getByTitle("Y axis").getByRole("textbox")).toHaveValue("110");
+});

frontend/playwright/ui/specs/workspace-shared-library.spec.js

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 const mainFileId = "3622460c-3408-81e2-8005-2fd0e55888b7";
 const sharedFileId = "3622460c-3408-81e2-8005-2fc938010233";
@@ -13,12 +13,12 @@ const sharedFileFragmentId1 = "3622460c-3408-81e2-8005-31859c15ff91";
 const sharedFileFragmentId2 = "3622460c-3408-81e2-8005-31859c15ff90";
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
+  await WasmWorkspacePage.init(page);
 });
 
 // Fix for https://tree.taiga.io/project/penpot/issue/9042
 test("Bug 9056 - 'More info' doesn't open the update tab", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile(page);
 
   await workspacePage.mockRPC(
@@ -76,7 +76,7 @@ test("Bug 9056 - 'More info' doesn't open the update tab", async ({ page }) => {
 test("Bug 10113 - Empty library modal for non-empty library", async ({
   page,
 }) => {
-  const workspace = new WorkspacePage(page);
+  const workspace = new WasmWorkspacePage(page);
 
   await workspace.setupEmptyFile(page);
   await workspace.mockRPC(/get\-file\?/, "workspace/get-file-10113.json");

frontend/playwright/ui/specs/workspace-viewer-role.spec.js

@@ -1,13 +1,13 @@
 import { test, expect } from "@playwright/test";
-import { WorkspacePage } from "../pages/WorkspacePage";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 import { presenceFixture } from "../../data/workspace/ws-notifications";
 
 test.beforeEach(async ({ page }) => {
-  await WorkspacePage.init(page);
+  await WasmWorkspacePage.init(page);
 
-  const workspacePage = new WorkspacePage(page);
+  const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile(page);
-  await WorkspacePage.mockRPC(page, "get-teams", "get-teams-role-viewer.json");
+  await WasmWorkspacePage.mockRPC(page, "get-teams", "get-teams-role-viewer.json");
 
   await workspacePage.goToWorkspace();
 });

frontend/src/app/main/data/workspace/modifiers.cljs

@@ -571,11 +571,13 @@
               nil
 
               (ctm/has-geometry? (:modifiers data))
-              (d/vec2 id (ctm/modifiers->transform (:modifiers data)))
+              (let [parent (:geometry-parent (:modifiers data))
+                    kind (if (d/not-empty? parent) :parent :child)]
+                (d/vec2 id {:transform (ctm/modifiers->transform (:modifiers data)) :kind kind}))
 
               ;; Unit matrix is used for reflowing
               :else
-              (d/vec2 id default-transform))))))
+              (d/vec2 id {:transform default-transform :kind :parent}))))))
 
 (defn- parse-geometry-modifiers
   [modif-tree]

frontend/src/app/main/data/workspace/texts.cljs

@@ -32,6 +32,7 @@
    [app.main.features :as features]
    [app.main.fonts :as fonts]
    [app.main.router :as rt]
+   [app.render-wasm.api :as wasm.api]
    [app.util.text-editor :as ted]
    [app.util.text.content.styles :as styles]
    [app.util.timers :as ts]
@@ -46,6 +47,7 @@
 (def ^function create-editor editor.v2/create)
 (def ^function set-editor-root! editor.v2/setRoot)
 (def ^function get-editor-root editor.v2/getRoot)
+(def ^function is-empty? editor.v2/isEmpty)
 (def ^function dispose! editor.v2/dispose)
 
 (declare v2-update-text-shape-content)
@@ -507,12 +509,12 @@
      ptk/EffectEvent
      (effect [_ state _]
        (when (features/active-feature? state "text-editor/v2")
-         (let [instance (:workspace-editor state)
-               styles   (some-> (editor.v2/getCurrentStyle instance)
-                                (styles/get-styles-from-style-declaration :removed-mixed true)
-                                ((comp update-node-fn migrate-node))
-                                (styles/attrs->styles))]
-           (editor.v2/applyStylesToSelection instance styles)))))))
+         (when-let [instance (:workspace-editor state)]
+           (let [styles   (some-> (editor.v2/getCurrentStyle instance)
+                                  (styles/get-styles-from-style-declaration :removed-mixed true)
+                                  ((comp update-node-fn migrate-node))
+                                  (styles/attrs->styles))]
+             (editor.v2/applyStylesToSelection instance styles))))))))
 
 ;; --- RESIZE UTILS
 
@@ -776,17 +778,30 @@
              (rx/of (v2-update-text-editor-styles id attrs)))
 
            (when (features/active-feature? state "render-wasm/v1")
-             (rx/of (dwwt/resize-wasm-text-debounce id)))))))
+             (rx/concat
+              ;; Apply style to selected spans and sync content
+              (when (wasm.api/text-editor-is-active?)
+                (let [span-attrs (select-keys attrs txt/text-node-attrs)]
+                  (when (not (empty? span-attrs))
+                    (let [result (wasm.api/apply-style-to-selection span-attrs)]
+                      (when result
+                        (rx/of (v2-update-text-shape-content
+                                (:shape-id result) (:content result)
+                                :update-name? true)))))))
+              ;; Resize (with delay for font-id changes)
+              (cond->> (rx/of (dwwt/resize-wasm-text id))
+                (contains? attrs :font-id)
+                (rx/delay 200))))))))
 
     ptk/EffectEvent
     (effect [_ state _]
       (when (features/active-feature? state "text-editor/v2")
-        (let [instance (:workspace-editor state)
-              attrs-to-override (some-> (editor.v2/getCurrentStyle instance)
-                                        (styles/get-styles-from-style-declaration))
-              overriden-attrs (merge attrs-to-override attrs)
-              styles  (styles/attrs->styles overriden-attrs)]
-          (editor.v2/applyStylesToSelection instance styles))))))
+        (when-let [instance (:workspace-editor state)]
+          (let [attrs-to-override (some-> (editor.v2/getCurrentStyle instance)
+                                          (styles/get-styles-from-style-declaration))
+                overriden-attrs (merge attrs-to-override attrs)
+                styles  (styles/attrs->styles overriden-attrs)]
+            (editor.v2/applyStylesToSelection instance styles)))))))
 
 (defn update-all-attrs
   [ids attrs]
@@ -901,15 +916,22 @@
       (update-in state [:workspace-text-modifier shape-id] {:position-data position-data}))))
 
 (defn v2-update-text-shape-content
-  [id content & {:keys [update-name? name finalize?]
-                 :or {update-name? false name nil finalize? false}}]
+  [id content & {:keys [update-name? name finalize? save-undo?]
+                 :or {update-name? false name nil finalize? false save-undo? true}}]
   (ptk/reify ::v2-update-text-shape-content
     ptk/WatchEvent
     (watch [_ state _]
       (if (features/active-feature? state "render-wasm/v1")
         (let [objects      (dsh/lookup-page-objects state)
               shape        (get objects id)
-              new-shape?   (nil? (:content shape))]
+              new-shape?   (nil? (:content shape))
+              prev-content (:content shape)
+              has-prev-content? (not (nil? (:prev-content shape)))
+              has-content? (when-not new-shape?
+                             (v2-content-has-text? content))
+              did-has-content? (when-not new-shape?
+                                 (v2-content-has-text? prev-content))]
+
           (rx/concat
            (rx/of
             (dwsh/update-shapes
@@ -917,24 +939,35 @@
              (fn [shape]
                (let [new-shape (-> shape
                                    (assoc :content content)
+                                   (cond-> (and has-content?
+                                                has-prev-content?)
+                                     (dissoc :prev-content))
+                                   (cond-> (and did-has-content?
+                                                (not has-content?))
+                                     (assoc :prev-content prev-content))
                                    (cond-> (and update-name? (some? name))
                                      (assoc :name name)))]
                  new-shape))
-             {:undo-group (when new-shape? id)})
+             {:save-undo? save-undo? :undo-group (when new-shape? id)})
 
-            (if (and (not= :fixed (:grow-type shape)) finalize?)
-              (dwm/apply-wasm-modifiers
-               (dwwt/resize-wasm-text-modifiers shape content)
-               {:undo-group (when new-shape? id)})
-
-              (dwm/set-wasm-modifiers
-               (dwwt/resize-wasm-text-modifiers shape content)
-               {:undo-group (when new-shape? id)})))
+            (let [modifiers (dwwt/resize-wasm-text-modifiers shape content)
+                  options {:undo-group (when new-shape? id)}]
+              (if (and (not= :fixed (:grow-type shape)) finalize?)
+                (dwm/apply-wasm-modifiers modifiers options)
+                (dwm/set-wasm-modifiers modifiers options))))
 
            (when finalize?
              (rx/concat
-              (when (and (not (v2-content-has-text? content)) (some? id))
+              (when (and (not has-content?) (some? id))
                 (rx/of
+                 (when has-prev-content?
+                   (dwsh/update-shapes
+                    [id]
+                    (fn [shape]
+                      (let [new-shape (-> shape
+                                          (assoc :content (:prev-content shape)))]
+                        new-shape))
+                    {:save-undo? false}))
                  (dws/deselect-shape id)
                  (dwsh/delete-shapes #{id})))
               (rx/of (dwt/finish-transform))))))

frontend/src/app/main/data/workspace/transforms.cljs

@@ -409,7 +409,7 @@
              modif-tree (dwm/build-modif-tree ids objects get-modifier)]
 
          (if (features/active-feature? state "render-wasm/v1")
-           (rx/of (dwm/apply-wasm-modifiers modif-tree {:ignore-snap-pixel true}))
+           (rx/of (dwm/apply-wasm-modifiers modif-tree (assoc options :ignore-snap-pixel true)))
 
            (let [modif-tree (gm/set-objects-modifiers modif-tree objects)]
              (rx/of (dwm/apply-modifiers* objects modif-tree nil options)))))))))
@@ -1247,7 +1247,6 @@
                           (some? new-modif)
                           (assoc (:id frame) {:modifiers new-modif})))))
                   {}))]
-
         (if (features/active-feature? state "render-wasm/v1")
           (rx/of (dwm/apply-wasm-modifiers modifiers {:undo-group undo-group}))
           (rx/of (dwm/apply-modifiers {:modifiers modifiers :undo-group undo-group})))))))

frontend/src/app/main/features.cljs

@@ -50,17 +50,41 @@
         (set/union (get team :features))
         (setup-wasm-features state))))
 
+(defn enabled-by-flags?
+  [{:keys [features-runtime features]} feature]
+  (or (contains? features-runtime feature)
+      (contains? features feature)))
+
+(defn enabled-without-migration?
+  [{:keys [features-runtime features]} feature]
+  (or (contains? features-runtime feature)
+      (contains? global-enabled-features feature)
+      (contains? features feature)))
+
+(defn wasm-url-override
+  [state]
+  (case (get (rt/get-params state) :wasm)
+    "true"  true
+    "false" false
+    nil))
+
 (defn active-feature?
   "Given a state and feature, check if feature is enabled."
   [state feature]
-  (assert (contains? cfeat/supported-features feature) "feature not supported")
-  (let [runtime-features (get state :features-runtime)
-        enabled-features (get state :features)]
-    (or (contains? runtime-features feature)
-        (if (contains? cfeat/no-migration-features feature)
-          (or (contains? global-enabled-features feature)
-              (contains? enabled-features feature))
-          (contains? enabled-features feature)))))
+  (assert (contains? cfeat/supported-features feature)
+          "feature not supported")
+
+  (let [wasm-override (when (= feature "render-wasm/v1")
+                        (wasm-url-override state))]
+    (cond
+      (some? wasm-override)
+      wasm-override
+
+      (contains? cfeat/no-migration-features feature)
+      (enabled-without-migration? state feature)
+
+      :else
+      (enabled-by-flags? state feature))))
 
 (def ^:private features-ref
   (l/derived (l/key :features) st/state))

frontend/src/app/main/ui/workspace/shapes/text/text_edition_outline.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.shapes.text.text-edition-outline
   (:require
    [app.common.geom.shapes :as gsh]
+   [app.common.math :as mth]
    [app.main.data.helpers :as dsh]
    [app.main.data.workspace.texts :as dwt]
    [app.main.features :as features]
@@ -18,14 +19,19 @@
 (mf/defc text-edition-outline
   [{:keys [shape zoom modifiers]}]
   (if (features/active-feature? @st/state "render-wasm/v1")
-    (let [{:keys [width height]} (wasm.api/get-text-dimensions (:id shape))
-          selrect-transform (mf/deref refs/workspace-selrect)
-          [selrect transform] (dsh/get-selrect selrect-transform shape)]
+    (let [selrect-transform (mf/deref refs/workspace-selrect)
+          [selrect transform] (dsh/get-selrect selrect-transform shape)
+
+          [sr-width sr-height]
+          (if (or (mth/close? (:width selrect) 0.01) (mth/close? (:height selrect) 0.01))
+            (let [{:keys [width height]} (wasm.api/get-text-dimensions (:id shape))]
+              [width height])
+            [(:width selrect) (:height selrect)])]
       [:rect.main.viewport-selrect
        {:x (:x selrect)
         :y (:y selrect)
-        :width (max width (:width selrect))
-        :height (max height (:height selrect))
+        :width sr-width
+        :height sr-height
         :transform transform
         :style {:stroke "var(--color-accent-tertiary)"
                 :stroke-width (/ 1 zoom)

frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs

@@ -117,7 +117,8 @@
               (st/emit! (dwt/v2-update-text-shape-content shape-id content
                                                           :update-name? update-name?
                                                           :name generated-name
-                                                          :finalize? true))))
+                                                          :finalize? true
+                                                          :save-undo? false))))
 
           (let [container-node (mf/ref-val container-ref)]
             (dom/set-style! container-node "opacity" 0)))
@@ -135,15 +136,21 @@
         on-needs-layout
         (fn []
           (when-let [content (content/dom->cljs (dwt/get-editor-root instance))]
-            (st/emit! (dwt/v2-update-text-shape-content shape-id content :update-name? true)))
+            (st/emit! (dwt/v2-update-text-shape-content shape-id content
+                                                        :update-name? true
+                                                        :save-undo? false)))
           ;; FIXME: We need to find a better way to trigger layout changes.
           #_(st/emit!
              (dwt/v2-update-text-shape-position-data shape-id [])))
 
         on-change
         (fn []
-          (when-let [content (content/dom->cljs (dwt/get-editor-root instance))]
-            (st/emit! (dwt/v2-update-text-shape-content shape-id content :update-name? true))))
+          (let [is-empty? (dwt/is-empty? instance)
+                save-undo? (not is-empty?)]
+            (when-let [content (content/dom->cljs (dwt/get-editor-root instance))]
+              (st/emit! (dwt/v2-update-text-shape-content shape-id content
+                                                          :update-name? true
+                                                          :save-undo? save-undo?)))))
 
         on-clipboard-change
         (fn [event]
@@ -247,7 +254,7 @@
       :ref container-ref
       :data-testid "text-editor-container"
       :style {:width "var(--editor-container-width)"
-              :height "var(--editor-container-height)"}
+              :height "var(--editor-container-height)"}}
       ;; We hide the editor when is blurred because otherwise the
       ;; selection won't let us see the underlying text. Use opacity
       ;; because display or visibility won't allow to recover focus
@@ -256,7 +263,7 @@
       ;; IMPORTANT! This is now done through DOM mutations (see
       ;; on-blur and on-focus) but I keep this for future references.
       ;; :opacity (when @blurred 0)}}
-      }
+
      [:div
       {:class (dm/str
                "mousetrap "
@@ -345,11 +352,9 @@
                 max-height (max height selrect-height)
                 valign (-> shape :content :vertical-align)
                 y (:y selrect)
-                y (if (and valign (> height selrect-height))
-                    (case valign
-                      "bottom" (- y (- height selrect-height))
-                      "center" (- y (/ (- height selrect-height) 2))
-                      y)
+                y (case valign
+                    "bottom" (+ y (- selrect-height height))
+                    "center" (+ y (/ (- selrect-height height) 2))
                     y)]
             [(assoc selrect :y y :width max-width :height max-height) transform])
 

frontend/src/app/main/ui/workspace/shapes/text/v2_editor.scss

@@ -29,6 +29,23 @@
 
   color: transparent;
 
+  // Match Skia's text layout precision: prevent browser text-size
+  // adjustments and ensure consistent kerning across browsers.
+  text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  font-kerning: normal;
+
+  &::selection,
+  *::selection {
+    color: transparent;
+    -webkit-text-fill-color: transparent; // WebKit/Safari
+  }
+
+  &::-moz-selection,
+  *::-moz-selection {
+    color: transparent;
+  }
+
   [data-itype="paragraph"] {
     line-height: inherit;
     user-select: text;

frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs

@@ -30,6 +30,7 @@
                                                                    typography-entry]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
+   [app.util.text.content :as content]
    [app.util.text.ui :as txu]
    [app.util.timers :as ts]
    [beicon.v2.core :as rx]
@@ -128,15 +129,21 @@
   [{:keys [ids values on-blur] :as props}]
   (let [grow-type (:grow-type values)
 
+        editor-instance (mf/deref refs/workspace-editor)
+
         handle-change-grow
         (mf/use-fn
-         (mf/deps ids on-blur)
+         (mf/deps ids on-blur editor-instance)
          (fn [value]
+           (on-blur)
            (let [uid (js/Symbol)
-                 grow-type (keyword value)]
-             (st/emit!
-              (dwu/start-undo-transaction uid)
-              (dwsh/update-shapes ids #(assoc % :grow-type grow-type)))
+                 grow-type (keyword value)
+                 content (when editor-instance
+                           (content/dom->cljs (dwt/get-editor-root editor-instance)))]
+             (st/emit! (dwu/start-undo-transaction uid))
+             (when (some? content)
+               (st/emit! (dwt/v2-update-text-shape-content (first ids) content :finalize? true)))
+             (st/emit! (dwsh/update-shapes ids #(assoc % :grow-type grow-type)))
 
              (when (features/active-feature? @st/state "render-wasm/v1")
                (st/emit! (dwwt/resize-wasm-text-all ids)))

frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs

@@ -70,7 +70,7 @@
 
         on-click
         (mf/use-fn
-         (mf/deps id)
+         (mf/deps id current-page-id)
          (fn []
            ;; For the wasm renderer, apply a blur effect to the viewport canvas
            ;; when we navigate to a different page.

frontend/src/app/main/ui/workspace/viewport/actions.cljs

@@ -19,10 +19,14 @@
    [app.main.data.workspace.media :as dwm]
    [app.main.data.workspace.path :as dwdp]
    [app.main.data.workspace.specialized-panel :as-alias dwsp]
+   [app.main.data.workspace.texts :as dwt]
+   [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.workspace.sidebar.assets.components :as wsac]
    [app.main.ui.workspace.viewport.viewport-ref :as uwvv]
+   [app.render-wasm.api :as wasm.api]
+   [app.render-wasm.wasm :as wasm.wasm]
    [app.util.dom :as dom]
    [app.util.dom.dnd :as dnd]
    [app.util.dom.normalize-wheel :as nw]
@@ -91,7 +95,17 @@
                          ::dwsp/interrupt)
 
                (when (and (not= edition id) (or text-editing? grid-editing?))
-                 (st/emit! (dw/clear-edition-mode)))
+                 (st/emit! (dw/clear-edition-mode))
+                 ;; Sync and stop WASM text editor when exiting edit mode
+                 (when (and text-editing?
+                            (features/active-feature? @st/state "render-wasm/v1")
+                            wasm.wasm/context-initialized?)
+                   (when-let [{:keys [shape-id content]} (wasm.api/text-editor-sync-content)]
+                     (st/emit! (dwt/v2-update-text-shape-content
+                                shape-id content
+                                :update-name? true
+                                :finalize? true)))
+                   (wasm.api/text-editor-stop)))
 
                (when (and (not text-editing?)
                           (not blocked)
@@ -184,6 +198,20 @@
                     (not drawing-tool))
            (st/emit! (dw/select-shape (:id @hover) shift?)))
 
+         ;; If clicking on a text shape and wasm render is enabled, forward cursor position
+         (when (and hovering?
+                    (not @space?)
+                    edition  ;; Only when already in edit mode
+                    (not drawing-path?)
+                    (not drawing-tool))
+           (let [hover-shape @hover]
+             (when (and (= :text (:type hover-shape))
+                        (features/active-feature? @st/state "text-editor-wasm/v1")
+                        wasm.wasm/context-initialized?)
+               (let [raw-pt (dom/get-client-position event)]
+                 ;; FIXME
+                 (wasm.api/text-editor-set-cursor-from-point (.-x raw-pt) (.-y raw-pt))))))
+
          (when (and @z?
                     (not @space?)
                     (not edition)
@@ -223,8 +251,15 @@
             (when (and (not drawing-path?) shape)
               (cond
                 (and editable? (not= id edition) (not read-only?))
-                (st/emit! (dw/select-shape id)
-                          (dw/start-editing-selected))
+                (do
+                  (st/emit! (dw/select-shape id)
+                            (dw/start-editing-selected))
+                  ;; If using wasm text-editor, notify WASM to start editing this shape
+                  ;; and set cursor position from the double-click location
+                  (when (and (= type :text)
+                             (features/active-feature? @st/state "text-editor-wasm/v1")
+                             wasm.wasm/context-initialized?)
+                    (wasm.api/text-editor-start id)))
 
                 (some? selected-shape)
                 (do

frontend/src/app/main/ui/workspace/viewport/hooks.cljs

@@ -164,7 +164,6 @@
                         ;; for the release of the z key
                         (when-not ^boolean value
                           (reset! z* false))))
-
     (hooks/use-stream kbd-zoom-s
                       (fn [kevent]
                         (dom/prevent-default kevent)
@@ -316,7 +315,7 @@
                                 (and (cfh/group-shape? objects %)
                                      (not (contains? child-parent? %)))
                                 (and (features/active-feature? @st/state "render-wasm/v1")
-                                     (cfh/text-shape? objects %)
+                                     (cfh/text-shape? (get objects %))
                                      (not (wasm.api/intersect-position-in-shape % @last-point-ref)))))))
 
                remove-measure-xf

frontend/src/app/main/ui/workspace/viewport/viewport_ref.cljs

@@ -66,6 +66,14 @@
             (gpt/divide zoom)
             (gpt/add box))))))
 
+(defn point->viewport-relative
+  "Convert client coordinates to viewport-relative coordinates.
+   Unlike point->viewport, this does NOT convert to canvas coordinates -
+   it just subtracts the viewport's bounding rect offset."
+  [pt]
+  (when (some? @viewport-brect)
+    (gpt/subtract pt @viewport-brect)))
+
 (defn inside-viewport?
   [target]
   (dom/is-child? @viewport-ref target))

frontend/src/app/main/ui/workspace/viewport_wasm.cljs

@@ -54,6 +54,7 @@
    [app.main.ui.workspace.viewport.viewport-ref :refer [create-viewport-ref]]
    [app.main.ui.workspace.viewport.widgets :as widgets]
    [app.render-wasm.api :as wasm.api]
+   [app.render-wasm.text-editor-input :refer [text-editor-input]]
    [app.util.debug :as dbg]
    [app.util.text-editor :as ted]
    [beicon.v2.core :as rx]
@@ -407,7 +408,14 @@
 
       (when picking-color?
         [:> pixel-overlay/pixel-overlay-wasm* {:viewport-ref viewport-ref
-                                               :canvas-ref canvas-ref}])]
+                                               :canvas-ref canvas-ref}])
+
+      ;; WASM text editor contenteditable (must be outside SVG to work)
+      (when (and show-text-editor?
+                 (features/active-feature? @st/state "text-editor-wasm/v1"))
+        [:& text-editor-input {:shape editing-shape
+                               :zoom zoom
+                               :vbox vbox}])]
 
      [:canvas {:id "render"
                :data-testid "canvas-wasm-shapes"
@@ -452,7 +460,10 @@
                 :height (max 0 (- (:height vbox) rule-area-size))}]]]
 
       [:g {:style {:pointer-events (if disable-events? "none" "auto")}}
-       (when show-text-editor?
+       ;; Text editor handling:
+       ;; - When text-editor-wasm/v1 is active, contenteditable is rendered in viewport-overlays (HTML DOM)
+       (when (and show-text-editor?
+                  (not (features/active-feature? @st/state "text-editor-wasm/v1")))
          (if (features/active-feature? @st/state "text-editor/v2")
            [:& editor-v2/text-editor {:shape editing-shape
                                       :canvas-ref canvas-ref

frontend/src/app/render_wasm/api.cljs

@@ -39,6 +39,7 @@
    [app.render-wasm.serializers :as sr]
    [app.render-wasm.serializers.color :as sr-clr]
    [app.render-wasm.svg-filters :as svg-filters]
+   [app.render-wasm.text-editor :as text-editor]
    [app.render-wasm.wasm :as wasm]
    [app.util.debug :as dbg]
    [app.util.dom :as dom]
@@ -50,15 +51,18 @@
    [cuerdas.core :as str]
    [promesa.core :as p]
    [rumext.v2 :as mf]))
-
 (def use-dpr? (contains? cf/flags :render-wasm-dpr))
 
 (def ^:const UUID-U8-SIZE 16)
 (def ^:const UUID-U32-SIZE (/ UUID-U8-SIZE 4))
 
+;; FIXME: Migrate this as we adjust the DTO structure in wasm
 (def ^:const MODIFIER-U8-SIZE 40)
 (def ^:const MODIFIER-U32-SIZE (/ MODIFIER-U8-SIZE 4))
 (def ^:const MODIFIER-TRANSFORM-U8-OFFSET-SIZE 16)
+(def ^:const INPUT-MODIFIER-U8-SIZE 44)
+(def ^:const INPUT-MODIFIER-U32-SIZE (/ INPUT-MODIFIER-U8-SIZE 4))
+
 
 (def ^:const GRID-LAYOUT-ROW-U8-SIZE 8)
 (def ^:const GRID-LAYOUT-COLUMN-U8-SIZE 8)
@@ -74,6 +78,18 @@
 ;; Threshold below which we use synchronous processing (no chunking overhead)
 (def ^:const ASYNC_THRESHOLD 100)
 
+;; Re-export public WebGL functions
+(def capture-canvas-pixels webgl/capture-canvas-pixels)
+(def restore-previous-canvas-pixels webgl/restore-previous-canvas-pixels)
+(def clear-canvas-pixels webgl/clear-canvas-pixels)
+
+;; Re-export public text editor functions
+(def text-editor-start text-editor/text-editor-start)
+(def text-editor-stop text-editor/text-editor-stop)
+(def text-editor-set-cursor-from-point text-editor/text-editor-set-cursor-from-point)
+(def text-editor-is-active? text-editor/text-editor-is-active?)
+(def text-editor-sync-content text-editor/text-editor-sync-content)
+
 (def dpr
   (if use-dpr? (if (exists? js/window) js/window.devicePixelRatio 1.0) 1.0))
 
@@ -109,11 +125,36 @@
    (mf/element object-svg #js {:shape shape})
    (rds/renderToStaticMarkup)))
 
+;; forward declare helpers so render can call them
+(declare request-render)
+(declare set-shape-vertical-align fonts-from-text-content)
+
 ;; This should never be called from the outside.
 (defn- render
   [timestamp]
   (when (and wasm/context-initialized? (not @wasm/context-lost?))
     (h/call wasm/internal-module "_render" timestamp)
+
+    ;; Update text editor blink (so cursor toggles) using the same timestamp
+    (try
+      (when wasm/context-initialized?
+        (text-editor/text-editor-update-blink timestamp)
+        ;; Render text editor overlay on top of main canvas (only if feature enabled)
+        ;; Determine if text-editor-wasm feature is active without requiring
+        ;; app.main.features to avoid circular dependency: check runtime and
+        ;; persisted feature sets in the store state.
+        (let [runtime-features (get @st/state :features-runtime)
+              enabled-features (get @st/state :features)]
+          (when (or (contains? runtime-features "text-editor-wasm/v1")
+                    (contains? enabled-features "text-editor-wasm/v1"))
+            (text-editor/text-editor-render-overlay)))
+        ;; Poll for editor events; if any event occurs, trigger a re-render
+        (let [ev (text-editor/text-editor-poll-event)]
+          (when (and ev (not= ev 0))
+            (request-render "text-editor-event"))))
+      (catch :default e
+        (js/console.error "text-editor overlay/update failed:" e)))
+
     (set! wasm/internal-frame-id nil)
     (ug/dispatch! (ug/event "penpot:wasm:render"))))
 
@@ -187,25 +228,6 @@
 
 (declare get-text-dimensions)
 
-(defn update-text-rect!
-  [id]
-  (when wasm/context-initialized?
-    (let [dimensions (get-text-dimensions id)
-          page-id (:current-page-id @st/state)]
-      (mw/emit!
-       {:cmd :index/update-text-rect
-        :page-id page-id
-        :shape-id id
-        :dimensions dimensions}))))
-
-
-(defn- ensure-text-content
-  "Guarantee that the shape always sends a valid text tree to WASM. When the
-  content is nil (freshly created text) we fall back to
-  tc/default-text-content so the renderer receives typography information."
-  [content]
-  (or content (tc/v2-default-text-content)))
-
 (defn use-shape
   [id]
   (when wasm/context-initialized?
@@ -216,6 +238,47 @@
               (aget buffer 2)
               (aget buffer 3)))))
 
+(defn set-shape-text-content
+  "This function sets shape text content and returns a stream that loads the needed fonts asynchronously"
+  [shape-id content]
+
+  ;; Cache content for text editor sync
+  (text-editor/cache-shape-text-content! shape-id content)
+
+  (h/call wasm/internal-module "_clear_shape_text")
+
+  (set-shape-vertical-align (get content :vertical-align))
+
+  (let [fonts         (f/get-content-fonts content)
+        fallback-fonts (fonts-from-text-content content true)
+        all-fonts (concat fonts fallback-fonts)
+        result (f/store-fonts all-fonts)]
+    (f/load-fallback-fonts-for-editor! fallback-fonts)
+    (h/call wasm/internal-module "_update_shape_text_layout")
+    result))
+
+(defn apply-style-to-selection
+  "Apply style attrs to the currently selected text spans.
+   Updates the cached content, pushes to WASM, and returns {:shape-id :content} for saving."
+  [attrs]
+  (text-editor/apply-style-to-selection attrs use-shape set-shape-text-content))
+
+(defn update-text-rect!
+  [id]
+  (when wasm/context-initialized?
+    (mw/emit!
+     {:cmd :index/update-text-rect
+      :page-id (:current-page-id @st/state)
+      :shape-id id
+      :dimensions (get-text-dimensions id)})))
+
+(defn- ensure-text-content
+  "Guarantee that the shape always sends a valid text tree to WASM. When the
+  content is nil (freshly created text) we fall back to
+  tc/default-text-content so the renderer receives typography information."
+  [content]
+  (or content (tc/v2-default-text-content)))
+
 (defn set-parent-id
   [id]
   (let [buffer (uuid/get-u32 id)]
@@ -859,22 +922,6 @@
 
           (if fallback-fonts-only? updated-fonts fallback-fonts))))))
 
-(defn set-shape-text-content
-  "This function sets shape text content and returns a stream that loads the needed fonts asynchronously"
-  [shape-id content]
-
-  (h/call wasm/internal-module "_clear_shape_text")
-
-  (set-shape-vertical-align (get content :vertical-align))
-
-  (let [fonts          (f/get-content-fonts content)
-        fallback-fonts (fonts-from-text-content content true)
-        all-fonts      (concat fonts fallback-fonts)
-        result         (f/store-fonts all-fonts)]
-    (f/load-fallback-fonts-for-editor! fallback-fonts)
-    (f/update-text-layout shape-id)
-    result))
-
 (defn set-shape-grow-type
   [grow-type]
   (h/call wasm/internal-module "_set_shape_grow_type" (sr/translate-grow-type grow-type)))
@@ -1072,7 +1119,7 @@
 (defn- set-objects-async
   "Asynchronously process shapes in chunks, yielding to the browser between chunks.
    Returns a promise that resolves when all shapes are processed.
-   
+
    Renders a preview only periodically during loading to show progress,
    then does a full tile-based render at the end."
   [shapes render-callback]
@@ -1234,13 +1281,16 @@
   (when-not ^boolean (empty? entries)
     (let [heapf32 (mem/get-heap-f32)
           heapu32 (mem/get-heap-u32)
-          size    (mem/get-alloc-size entries MODIFIER-U8-SIZE)
+          size    (mem/get-alloc-size entries INPUT-MODIFIER-U8-SIZE)
           offset  (mem/alloc->offset-32 size)]
 
-      (reduce (fn [offset [id transform]]
-                (-> offset
-                    (mem.h32/write-uuid heapu32 id)
-                    (mem.h32/write-matrix heapf32 transform)))
+      (reduce (fn [offset [id data]]
+                (let [transform (:transform data)
+                      kind (:kind data)]
+                  (-> offset
+                      (mem.h32/write-uuid heapu32 id)
+                      (mem.h32/write-matrix heapf32 transform)
+                      (mem.h32/write-u32 heapu32 (sr/translate-transform-entry-kind kind)))))
               offset
               entries)
 
@@ -1557,33 +1607,41 @@
               (persistent! result)))
 
           result
-          (->> result
-               (mapv
-                (fn [{:keys [paragraph span start-pos end-pos direction x y width height]}]
-                  (let [content (:content shape)
-                        element (-> content :children
-                                    (get 0) :children ;; paragraph-set
-                                    (get paragraph) :children ;; paragraph
-                                    (get span))
-                        text (subs (:text element) start-pos end-pos)]
+          (into []
+                (keep
+                 (fn [{:keys [paragraph span start-pos end-pos direction x y width height]}]
+                   (let [content (:content shape)
+                         element (-> content :children
+                                     (get 0) :children ;; paragraph-set
+                                     (get paragraph) :children ;; paragraph
+                                     (get span))
+                         element-text (:text element)]
 
-                    (d/patch-object
-                     txt/default-text-attrs
-                     (d/without-nils
-                      {:x x
-                       :y (+ y height)
-                       :width width
-                       :height height
-                       :direction       (dr/translate-direction direction)
-                       :font-family     (get element :font-family)
-                       :font-size       (get element :font-size)
-                       :font-weight     (get element :font-weight)
-                       :text-transform  (get element :text-transform)
-                       :text-decoration (get element :text-decoration)
-                       :letter-spacing  (get element :letter-spacing)
-                       :font-style      (get element :font-style)
-                       :fills           (d/nilv (get element :fills) [{:fill-color "#000000"}])
-                       :text            text}))))))]
+                     ;; Add comprehensive nil-safety checks
+                     (when (and element
+                                element-text
+                                (>= start-pos 0)
+                                (<= end-pos (count element-text))
+                                (<= start-pos end-pos))
+                       (let [text (subs element-text start-pos end-pos)]
+                         (d/patch-object
+                          txt/default-text-attrs
+                          (d/without-nils
+                           {:x x
+                            :y (+ y height)
+                            :width width
+                            :height height
+                            :direction       (dr/translate-direction direction)
+                            :font-family     (get element :font-family)
+                            :font-size       (get element :font-size)
+                            :font-weight     (get element :font-weight)
+                            :text-transform  (get element :text-transform)
+                            :text-decoration (get element :text-decoration)
+                            :letter-spacing  (get element :letter-spacing)
+                            :font-style      (get element :font-style)
+                            :fills           (get element :fills)
+                            :text            text})))))))
+                result)]
       (mem/free)
 
       result)))
@@ -1617,7 +1675,4 @@
                 (p/resolved false)))))
       (p/resolved false))))
 
-;; Re-export public WebGL functions
-(def capture-canvas-pixels webgl/capture-canvas-pixels)
-(def restore-previous-canvas-pixels webgl/restore-previous-canvas-pixels)
-(def clear-canvas-pixels webgl/clear-canvas-pixels)
+

frontend/src/app/render_wasm/api/fonts.cljs

@@ -31,9 +31,17 @@
 (def ^:private default-letter-spacing 0.0)
 
 (defn- google-font-id->uuid
+  "Returns the UUID for a Google Font ID. Uses uuid/zero as fallback when the
+  font is not found in fontsdb. uuid/zero maps to the default font (Source 
+  Sans Pro) in WASM.
+  A font id may not exist for different reasons:
+  - the gfonts.json catalog was updated and fonts were renamed or removed,
+  - the file was imported from another Penpot instance with different fonts,
+  ..."
   [font-id]
-  (let [font (fonts/get-font-data font-id)]
-    (:uuid font)))
+  (let [font (fonts/get-font-data font-id)
+        result (:uuid font)]
+    (or result uuid/zero)))
 
 (defn- custom-font-id->uuid
   [font-id]
@@ -320,7 +328,7 @@
      :style-name style
      :weight weight
      :emoji? emoji?
-     :fallbck? fallback?
+     :fallback? fallback?
      :asset-id asset-id}))
 
 (defn store-font

frontend/src/app/render_wasm/api/shared.js

@@ -240,3 +240,17 @@ export const RawGrowType = {
   "auto-height": 2,
 };
 
+export const CursorDirection = {
+  "backward": 0,
+  "forward": 1,
+  "line-before": 2,
+  "line-after": 3,
+  "line-start": 4,
+  "line-end": 5,
+};
+
+export const RawTransformEntryKind = {
+  "parent": 0,
+  "child": 1,
+};
+

frontend/src/app/render_wasm/mem.cljs

@@ -61,6 +61,29 @@
   []
   (h/call wasm/internal-module "_free_bytes"))
 
+(defn read-string
+  "Read a UTF-8 string from WASM memory given a byte pointer/offset.
+   Uses Emscripten's UTF8ToString to decode the string."
+  [ptr]
+  (h/call wasm/internal-module "UTF8ToString" ptr))
+
+(defn read-null-terminated-string
+  "Read a null-terminated UTF-8 string from WASM memory.
+   Manually reads bytes until null terminator and decodes using TextDecoder."
+  [ptr]
+  (when (and ptr (not (zero? ptr)))
+    (let [heap (get-heap-u8)
+          ;; Find the null terminator
+          end-idx (loop [idx ptr]
+                    (if (zero? (aget heap idx))
+                      idx
+                      (recur (inc idx))))
+          ;; Extract the bytes (excluding null terminator)
+          bytes (.slice heap ptr end-idx)
+          ;; Decode using TextDecoder
+          decoder (js/TextDecoder. "utf-8")]
+      (.decode decoder bytes))))
+
 (defn slice
   "Returns a copy of a portion of a typed array into a new typed array
   object selected from start to end."

frontend/src/app/render_wasm/serializers.cljs

@@ -274,3 +274,8 @@
     :edge 3
     :unknown 4
     4))
+
+(defn translate-transform-entry-kind [kind]
+  (let [values (unchecked-get wasm/serializers "transform-entry-kind")
+        default (unchecked-get values "parent")]
+    (d/nilv (unchecked-get values (d/name kind)) default)))

frontend/src/app/render_wasm/text_editor.cljs

@@ -0,0 +1,300 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.render-wasm.text-editor
+  "Text editor WASM bindings"
+  (:require
+   [app.common.uuid :as uuid]
+   [app.render-wasm.helpers :as h]
+   [app.render-wasm.mem :as mem]
+   [app.render-wasm.wasm :as wasm]))
+
+(defn text-editor-start
+  [id]
+  (when wasm/context-initialized?
+    (let [buffer (uuid/get-u32 id)]
+      (h/call wasm/internal-module "_text_editor_start"
+              (aget buffer 0)
+              (aget buffer 1)
+              (aget buffer 2)
+              (aget buffer 3)))))
+
+(defn text-editor-set-cursor-from-point
+  [x y]
+  (when wasm/context-initialized?
+    (h/call wasm/internal-module "_text_editor_set_cursor_from_point" x y)))
+
+(defn text-editor-update-blink
+  [timestamp-ms]
+  (when wasm/context-initialized?
+    (h/call wasm/internal-module "_text_editor_update_blink" timestamp-ms)))
+
+(defn text-editor-render-overlay
+  []
+  (when wasm/context-initialized?
+    (h/call wasm/internal-module "_text_editor_render_overlay")))
+
+(defn text-editor-poll-event
+  []
+  (when wasm/context-initialized?
+    (let [res (h/call wasm/internal-module "_text_editor_poll_event")]
+      res)))
+
+(defn text-editor-insert-text
+  [text]
+  (when wasm/context-initialized?
+    (let [encoder (js/TextEncoder.)
+          buf (.encode encoder text)
+          heapu8 (mem/get-heap-u8)
+          size (mem/size buf)
+          offset (mem/alloc size)]
+      (mem/write-buffer offset heapu8 buf)
+      (h/call wasm/internal-module "_text_editor_insert_text")
+      (mem/free))))
+
+(defn text-editor-delete-backward []
+  (when wasm/context-initialized?
+    (h/call wasm/internal-module "_text_editor_delete_backward")))
+
+(defn text-editor-delete-forward []
+  (when wasm/context-initialized?
+    (h/call wasm/internal-module "_text_editor_delete_forward")))
+
+(defn text-editor-insert-paragraph []
+  (when wasm/context-initialized?
+    (h/call wasm/internal-module "_text_editor_insert_paragraph")))
+
+(defn text-editor-move-cursor
+  [direction extend-selection]
+  (when wasm/context-initialized?
+    (h/call wasm/internal-module "_text_editor_move_cursor" direction (if extend-selection 1 0))))
+
+(defn text-editor-select-all
+  []
+  (when wasm/context-initialized?
+    (h/call wasm/internal-module "_text_editor_select_all")))
+
+(defn text-editor-stop
+  []
+  (when wasm/context-initialized?
+    (h/call wasm/internal-module "_text_editor_stop")))
+
+(defn text-editor-is-active?
+  []
+  (when wasm/context-initialized?
+    (not (zero? (h/call wasm/internal-module "_text_editor_is_active")))))
+
+(defn text-editor-export-content
+  []
+  (when wasm/context-initialized?
+    (let [ptr (h/call wasm/internal-module "_text_editor_export_content")]
+      (when (and ptr (not (zero? ptr)))
+        (let [json-str (mem/read-null-terminated-string ptr)]
+          (mem/free)
+          (js/JSON.parse json-str))))))
+
+(defn text-editor-export-selection
+  "Export only the currently selected text as plain text from the WASM editor. Requires WASM support (_text_editor_export_selection)."
+  []
+  (when wasm/context-initialized?
+    (let [ptr (h/call wasm/internal-module "_text_editor_export_selection")]
+      (when (and ptr (not (zero? ptr)))
+        (let [text (mem/read-null-terminated-string ptr)]
+          (mem/free)
+          text)))))
+
+(defn text-editor-get-active-shape-id
+  []
+  (when wasm/context-initialized?
+    (try
+      (let [byte-offset (mem/alloc 16)
+            u32-offset (mem/->offset-32 byte-offset)
+            heap (mem/get-heap-u32)]
+        (h/call wasm/internal-module "_text_editor_get_active_shape_id" byte-offset)
+        (let [a (aget heap u32-offset)
+              b (aget heap (+ u32-offset 1))
+              c (aget heap (+ u32-offset 2))
+              d (aget heap (+ u32-offset 3))
+              result (when (or (not= a 0) (not= b 0) (not= c 0) (not= d 0))
+                       (uuid/from-unsigned-parts a b c d))]
+          (mem/free)
+          result))
+      (catch js/Error e
+        (js/console.error "[text-editor-get-active-shape-id] Error:" e)
+        nil))))
+
+(defn text-editor-get-selection
+  []
+  (when wasm/context-initialized?
+    (let [byte-offset (mem/alloc 16)
+          u32-offset  (mem/->offset-32 byte-offset)
+          heap        (mem/get-heap-u32)
+          active?     (h/call wasm/internal-module "_text_editor_get_selection" byte-offset)]
+      (try
+        (when (= active? 1)
+          {:anchor-para   (aget heap u32-offset)
+           :anchor-offset (aget heap (+ u32-offset 1))
+           :focus-para    (aget heap (+ u32-offset 2))
+           :focus-offset  (aget heap (+ u32-offset 3))})
+        (finally
+          (mem/free))))))
+
+(def ^:private shape-text-contents (atom {}))
+
+(defn- merge-exported-texts-into-content
+  "Merge exported span texts back into the existing content tree.
+
+  The WASM editor may split or merge paragraphs (Enter / Backspace at
+  paragraph boundary), so the exported structure can differ from the
+  original.  When extra paragraphs or spans appear we clone styling from
+  the nearest existing sibling; when fewer appear we truncate.
+
+  exported-texts  vector of vectors  [[\"span1\" \"span2\"] [\"p2s1\"]]
+  content         existing Penpot content map (root -> paragraph-set -> …)"
+  [content exported-texts]
+  (let [para-set       (first (get content :children))
+        orig-paras     (get para-set :children)
+        num-orig       (count orig-paras)
+        last-orig-para (when (seq orig-paras) (last orig-paras))
+        template-span  (when last-orig-para
+                         (-> last-orig-para :children last))
+        new-paras
+        (mapv (fn [para-idx exported-span-texts]
+                (let [orig-para (if (< para-idx num-orig)
+                                  (nth orig-paras para-idx)
+                                  (dissoc last-orig-para :children))
+                      orig-spans     (get orig-para :children)
+                      num-orig-spans (count orig-spans)
+                      last-orig-span (when (seq orig-spans) (last orig-spans))]
+                  (assoc orig-para :children
+                         (mapv (fn [span-idx new-text]
+                                 (let [orig-span (if (< span-idx num-orig-spans)
+                                                   (nth orig-spans span-idx)
+                                                   (or last-orig-span template-span))]
+                                   (assoc orig-span :text new-text)))
+                               (range (count exported-span-texts))
+                               exported-span-texts))))
+              (range (count exported-texts))
+              exported-texts)
+        new-para-set (assoc para-set :children new-paras)]
+    (assoc content :children [new-para-set])))
+
+(defn text-editor-sync-content
+  "Sync text content from the WASM text editor back to the frontend shape.
+
+  Exports the current span texts from WASM, merges them into the shape's
+  cached content tree (preserving per-span styling), and returns the
+  shape-id and the fully merged content map ready for
+  v2-update-text-shape-content."
+  []
+  (when (and wasm/context-initialized? (text-editor-is-active?))
+    (let [shape-id  (text-editor-get-active-shape-id)
+          new-texts (text-editor-export-content)]
+      (when (and shape-id new-texts)
+        (let [texts-clj (js->clj new-texts)
+              content   (get @shape-text-contents shape-id)]
+          (when content
+            (let [merged (merge-exported-texts-into-content content texts-clj)]
+              (swap! shape-text-contents assoc shape-id merged)
+              {:shape-id shape-id
+               :content  merged})))))))
+
+(defn cache-shape-text-content!
+  [shape-id content]
+  (when (some? content)
+    (swap! shape-text-contents assoc shape-id content)))
+
+(defn get-cached-content
+  [shape-id]
+  (get @shape-text-contents shape-id))
+
+(defn update-cached-content!
+  [shape-id content]
+  (swap! shape-text-contents assoc shape-id content))
+
+(defn- normalize-selection
+  "Given anchor/focus para+offset, return {:start-para :start-offset :end-para :end-offset}
+   ordered so start <= end."
+  [{:keys [anchor-para anchor-offset focus-para focus-offset]}]
+  (if (or (< anchor-para focus-para)
+          (and (= anchor-para focus-para) (<= anchor-offset focus-offset)))
+    {:start-para anchor-para :start-offset anchor-offset
+     :end-para focus-para :end-offset focus-offset}
+    {:start-para focus-para :start-offset focus-offset
+     :end-para anchor-para :end-offset anchor-offset}))
+
+(defn- apply-attrs-to-paragraph
+  "Apply attrs to spans within [sel-start, sel-end) char range of a single paragraph.
+   Splits spans at boundaries as needed."
+  [para sel-start sel-end attrs]
+  (let [spans  (:children para)
+        result (loop [spans spans
+                      pos   0
+                      acc   []]
+                 (if (empty? spans)
+                   acc
+                   (let [span      (first spans)
+                         text      (:text span)
+                         span-len  (count text)
+                         span-end  (+ pos span-len)
+                         ol-start  (max pos sel-start)
+                         ol-end    (min span-end sel-end)
+                         has-overlap? (< ol-start ol-end)]
+                     (if (not has-overlap?)
+                       (recur (rest spans) span-end (conj acc span))
+                       (let [before   (when (> ol-start pos)
+                                        (assoc span :text (subs text 0 (- ol-start pos))))
+                             selected (merge span attrs
+                                             {:text (subs text (- ol-start pos) (- ol-end pos))})
+                             after    (when (< ol-end span-end)
+                                        (assoc span :text (subs text (- ol-end pos))))]
+                         (recur (rest spans) span-end
+                                (-> acc
+                                    (into (keep identity [before selected after])))))))))]
+    (assoc para :children result)))
+
+(defn- para-char-count
+  [para]
+  (apply + (map (fn [span] (count (:text span))) (:children para))))
+
+(defn apply-style-to-selection
+  [attrs use-shape-fn set-shape-text-content-fn]
+  (when (and wasm/context-initialized? (text-editor-is-active?))
+    (let [shape-id (text-editor-get-active-shape-id)
+          sel      (text-editor-get-selection)]
+      (when (and shape-id sel)
+        (let [content (get @shape-text-contents shape-id)]
+          (when content
+            (let [{:keys [start-para start-offset end-para end-offset]}
+                  (normalize-selection sel)
+                  collapsed? (and (= start-para end-para) (= start-offset end-offset))
+                  para-set   (first (:children content))
+                  paras      (:children para-set)
+                  new-paras
+                  (when (not collapsed?)
+                    (mapv (fn [idx para]
+                            (cond
+                              (or (< idx start-para) (> idx end-para))
+                              para
+                              (= start-para end-para)
+                              (apply-attrs-to-paragraph para start-offset end-offset attrs)
+                              (= idx start-para)
+                              (apply-attrs-to-paragraph para start-offset (para-char-count para) attrs)
+                              (= idx end-para)
+                              (apply-attrs-to-paragraph para 0 end-offset attrs)
+                              :else
+                              (apply-attrs-to-paragraph para 0 (para-char-count para) attrs)))
+                          (range (count paras))
+                          paras))
+                  new-content (when new-paras
+                                (assoc content :children
+                                       [(assoc para-set :children new-paras)]))]
+              (when new-content
+                (swap! shape-text-contents assoc shape-id new-content)
+                (use-shape-fn shape-id)
+                (set-shape-text-content-fn shape-id new-content)
+                {:shape-id shape-id
+                 :content  new-content}))))))))

frontend/src/app/render_wasm/text_editor_input.cljs

@@ -0,0 +1,240 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.render-wasm.text-editor-input
+  "Contenteditable DOM element for WASM text editor input"
+  (:require
+   [app.common.geom.shapes :as gsh]
+   [app.main.data.workspace.texts :as dwt]
+   [app.main.store :as st]
+   [app.render-wasm.api :as wasm.api]
+   [app.render-wasm.text-editor :as text-editor]
+   [app.util.dom :as dom]
+   [app.util.object :as obj]
+   [cuerdas.core :as str]
+   [goog.events :as events]
+   [rumext.v2 :as mf])
+  (:import goog.events.EventType))
+
+(defn- sync-wasm-text-editor-content!
+  "Sync WASM text editor content back to the shape via the standard
+  commit pipeline. Called after every text-modifying input."
+  [& {:keys [finalize?]}]
+  (when-let [{:keys [shape-id content]} (text-editor/text-editor-sync-content)]
+    (st/emit! (dwt/v2-update-text-shape-content
+               shape-id content
+               :update-name? true
+               :finalize? finalize?))))
+
+(mf/defc text-editor-input
+  "Contenteditable element positioned over the text shape to capture input events."
+  {::mf/wrap-props false}
+  [props]
+  (let [shape (obj/get props "shape")
+        zoom  (obj/get props "zoom")
+        vbox  (obj/get props "vbox")
+
+        contenteditable-ref (mf/use-ref nil)
+        composing?          (mf/use-state false)
+
+        ;; Calculate screen position from shape bounds
+        shape-bounds (gsh/shape->rect shape)
+        screen-x     (* (- (:x shape-bounds) (:x vbox)) zoom)
+        screen-y     (* (- (:y shape-bounds) (:y vbox)) zoom)
+        screen-w     (* (:width shape-bounds) zoom)
+        screen-h     (* (:height shape-bounds) zoom)]
+
+    ;; Focus contenteditable on mount
+    (mf/use-effect
+     (fn []
+       (when-let [node (mf/ref-val contenteditable-ref)]
+         (.focus node))
+       js/undefined))
+
+    ;; Animation loop for cursor blink
+    (mf/use-effect
+     (fn []
+       (let [raf-id (atom nil)
+             animate (fn animate []
+                       (when (text-editor/text-editor-is-active?)
+                         (wasm.api/request-render "cursor-blink")
+                         (reset! raf-id (js/requestAnimationFrame animate))))]
+         (animate)
+         (fn []
+           (when @raf-id
+             (js/cancelAnimationFrame @raf-id))))))
+
+    ;; Document-level keydown handler for control keys
+    (mf/use-effect
+     (fn []
+       (let [on-doc-keydown
+             (fn [e]
+               (when (and (text-editor/text-editor-is-active?)
+                          (not @composing?))
+                 (let [key    (.-key e)
+                       ctrl?  (or (.-ctrlKey e) (.-metaKey e))
+                       shift? (.-shiftKey e)]
+                   (cond
+                     ;; Escape: finalize and stop
+                     (= key "Escape")
+                     (do
+                       (dom/prevent-default e)
+                       (sync-wasm-text-editor-content! :finalize? true)
+                       (text-editor/text-editor-stop))
+
+                     ;; Ctrl+A: select all (key is "a" or "A" depending on platform)
+                     (and ctrl? (= (str/lower key) "a"))
+                     (do
+                       (dom/prevent-default e)
+                       (text-editor/text-editor-select-all)
+                       (wasm.api/request-render "text-select-all"))
+
+                     ;; Enter
+                     (= key "Enter")
+                     (do
+                       (dom/prevent-default e)
+                       (text-editor/text-editor-insert-paragraph)
+                       (sync-wasm-text-editor-content!)
+                       (wasm.api/request-render "text-paragraph"))
+
+                     ;; Backspace
+                     (= key "Backspace")
+                     (do
+                       (dom/prevent-default e)
+                       (text-editor/text-editor-delete-backward)
+                       (sync-wasm-text-editor-content!)
+                       (wasm.api/request-render "text-delete-backward"))
+
+                     ;; Delete
+                     (= key "Delete")
+                     (do
+                       (dom/prevent-default e)
+                       (text-editor/text-editor-delete-forward)
+                       (sync-wasm-text-editor-content!)
+                       (wasm.api/request-render "text-delete-forward"))
+
+                     ;; Arrow keys
+                     (= key "ArrowLeft")
+                     (do
+                       (dom/prevent-default e)
+                       (text-editor/text-editor-move-cursor 0 shift?)
+                       (wasm.api/request-render "text-cursor-move"))
+
+                     (= key "ArrowRight")
+                     (do
+                       (dom/prevent-default e)
+                       (text-editor/text-editor-move-cursor 1 shift?)
+                       (wasm.api/request-render "text-cursor-move"))
+
+                     (= key "ArrowUp")
+                     (do
+                       (dom/prevent-default e)
+                       (text-editor/text-editor-move-cursor 2 shift?)
+                       (wasm.api/request-render "text-cursor-move"))
+
+                     (= key "ArrowDown")
+                     (do
+                       (dom/prevent-default e)
+                       (text-editor/text-editor-move-cursor 3 shift?)
+                       (wasm.api/request-render "text-cursor-move"))
+
+                     (= key "Home")
+                     (do
+                       (dom/prevent-default e)
+                       (text-editor/text-editor-move-cursor 4 shift?)
+                       (wasm.api/request-render "text-cursor-move"))
+
+                     (= key "End")
+                     (do
+                       (dom/prevent-default e)
+                       (text-editor/text-editor-move-cursor 5 shift?)
+                       (wasm.api/request-render "text-cursor-move"))
+
+                     ;; Let contenteditable handle text input via on-input
+                     :else nil))))]
+         (events/listen js/document EventType.KEYDOWN on-doc-keydown true)
+         (fn []
+           (events/unlisten js/document EventType.KEYDOWN on-doc-keydown true)))))
+
+    ;; Composition and input events
+    (let [on-composition-start
+          (mf/use-fn
+           (fn [_event]
+             (reset! composing? true)))
+
+          on-composition-end
+          (mf/use-fn
+           (fn [^js event]
+             (reset! composing? false)
+             (let [data (.-data event)]
+               (when data
+                 (text-editor/text-editor-insert-text data)
+                 (sync-wasm-text-editor-content!)
+                 (wasm.api/request-render "text-composition"))
+               (when-let [node (mf/ref-val contenteditable-ref)]
+                 (set! (.-textContent node) "")))))
+
+          on-paste
+          (mf/use-fn
+           (fn [^js event]
+             (dom/prevent-default event)
+             (let [clipboard-data (.-clipboardData event)
+                   text (.getData clipboard-data "text/plain")]
+               (when (and text (seq text))
+                 (text-editor/text-editor-insert-text text)
+                 (sync-wasm-text-editor-content!)
+                 (wasm.api/request-render "text-paste"))
+               (when-let [node (mf/ref-val contenteditable-ref)]
+                 (set! (.-textContent node) "")))))
+
+          on-copy
+          (mf/use-fn
+           (fn [^js event]
+             (when (text-editor/text-editor-is-active?)
+               (dom/prevent-default event)
+               (when (text-editor/text-editor-get-selection)
+                 (let [text (text-editor/text-editor-export-selection)]
+                   (.setData (.-clipboardData event) "text/plain" text))))))
+
+          on-input
+          (mf/use-fn
+           (fn [^js event]
+             (let [native-event (.-nativeEvent event)
+                   input-type   (.-inputType native-event)
+                   data         (.-data native-event)]
+               ;; Skip composition-related input events - composition-end handles those
+               (when (and (not @composing?)
+                          (not= input-type "insertCompositionText"))
+                 (when (and data (seq data))
+                   (text-editor/text-editor-insert-text data)
+                   (sync-wasm-text-editor-content!)
+                   (wasm.api/request-render "text-input"))
+                 (when-let [node (mf/ref-val contenteditable-ref)]
+                   (set! (.-textContent node) ""))))))]
+
+      [:div
+       {:ref contenteditable-ref
+        :contentEditable true
+        :suppressContentEditableWarning true
+        :on-composition-start on-composition-start
+        :on-composition-end on-composition-end
+        :on-input on-input
+        :on-paste on-paste
+        :on-copy on-copy
+        ;; FIXME on-click
+        ;; :on-click on-click
+        :id "text-editor-wasm-input"
+        ;; FIXME
+        :style {:position "absolute"
+                :left (str screen-x "px")
+                :top (str screen-y "px")
+                :width (str screen-w "px")
+                :height (str screen-h "px")
+                :opacity 0
+                :overflow "hidden"
+                :white-space "pre"
+                :cursor "text"
+                :z-index 10}}])))

frontend/src/app/render_wasm/wasm.cljs

@@ -54,6 +54,7 @@
        :text-direction shared/RawTextDirection
        :text-decoration shared/RawTextDecoration
        :text-transform shared/RawTextTransform
+       :transform-entry-kind shared/RawTransformEntryKind
        :segment-data shared/RawSegmentData
        :stroke-linecap shared/RawStrokeLineCap
        :stroke-linejoin shared/RawStrokeLineJoin

frontend/src/app/util/text/content/styles.cljs

@@ -32,7 +32,8 @@
   "This function adds units to style values"
   [k v]
   (cond
-    (and (or (= k :font-size)
+    (and (keyword? k)
+         (or (= k :font-size)
              (= k :letter-spacing))
          (not= (str/slice v -2) "px"))
     (str v "px")

frontend/text-editor/README.md

@@ -82,6 +82,26 @@ The `TextEditor` contains a series of references to DOM elements, one of them is
 
 `ChangeController` is called by the `TextEditor` instance everytime a change is performed on the content of the `contenteditable` element.
 
+### Best practices
+
+#### Use `isType` functions
+
+Instead of handling elements by their properties like this:
+
+```javascript
+if (element.tagName === "SPAN") {
+  ...
+}
+```
+
+Use functions like `isParagraph`, `isTextSpan` or `isLineBreak`:
+
+```javascript
+if (isTextSpan(element)) {
+  ...
+}
+```
+
 ### Events
 
 - `change`: This event is dispatched every time a change is made in the editor. All changes are debounced to prevent dispatching too many change events. This event is also dispatched when there are pending change events and the user blurs the textarea element.

frontend/text-editor/src/editor/TextEditor.js

@@ -690,6 +690,19 @@ export function isTextEditor(instance) {
   return instance instanceof TextEditor;
 }
 
+/**
+ * Returns true if the TextEditor is empty.
+ *
+ * @param {TextEditor} instance
+ * @returns {boolean}
+ */
+export function isEmpty(instance) {
+  if (isTextEditor(instance)) {
+    return instance.isEmpty;
+  }
+  throw new TypeError('Instance is not a TextEditor');
+}
+
 /**
  * Returns the root element of a TextEditor
  * instance.
@@ -714,9 +727,9 @@ export function getRoot(instance) {
 export function setRoot(instance, root) {
   if (isTextEditor(instance)) {
     instance.root = root;
+    return instance;
   }
-
-  return instance;
+  throw new TypeError("Instance is not a TextEditor");
 }
 
 /**
@@ -741,7 +754,7 @@ export function getCurrentStyle(instance) {
   if (isTextEditor(instance)) {
     return instance.currentStyle;
   }
-  return null;
+  throw new TypeError('Instance is not a TextEditor');
 }
 
 /**
@@ -756,7 +769,7 @@ export function applyStylesToSelection(instance, styles) {
   if (isTextEditor(instance)) {
     return instance.applyStylesToSelection(styles);
   }
-  return null;
+  throw new TypeError('Instance is not a TextEditor');
 }
 
 /**
@@ -770,7 +783,7 @@ export function dispose(instance) {
   if (isTextEditor(instance)) {
     return instance.dispose();
   }
-  return null;
+  throw new TypeError('Instance is not a TextEditor');
 }
 
 export default TextEditor;

frontend/text-editor/src/editor/content/dom/Style.js

@@ -336,20 +336,22 @@ export function getStyle(element, styleName, styleUnit) {
  * @returns {HTMLElement}
  */
 export function setStylesFromObject(element, allowedStyles, styleObject) {
-  if (element.tagName === "SPAN")
-    for (const [styleName, styleUnit] of allowedStyles) {
-      if (!(styleName in styleObject)) {
-        continue;
-      }
-      let styleValue = styleObject[styleName];
-      if (!styleValue) continue;
-
-      if (styleName === "font-family") {
-        styleValue = sanitizeFontFamily(styleValue);
-      }
-
-      setStyle(element, styleName, styleValue, styleUnit);
+  for (const [styleName, styleUnit] of allowedStyles) {
+    if (!(styleName in styleObject)) {
+      continue;
     }
+
+    let styleValue = styleObject[styleName];
+    if (!styleValue) {
+      continue;
+    }
+
+    if (styleName === "font-family") {
+      styleValue = sanitizeFontFamily(styleValue);
+    }
+
+    setStyle(element, styleName, styleValue, styleUnit);
+  }
   return element;
 }
 

frontend/text-editor/src/editor/controllers/ChangeController.js

@@ -54,8 +54,12 @@ export class ChangeController extends EventTarget {
     return this.#hasPendingChanges;
   }
 
+  /**
+   * Handles timeout.
+   */
   #onTimeout = () => {
     this.dispatchEvent(new Event("change"));
+    this.#hasPendingChanges = false;
   };
 
   /**

frontend/text-editor/src/editor/controllers/SelectionController.js

@@ -1961,7 +1961,8 @@ export class SelectionController extends EventTarget {
         this.setSelection(newTextSpan.firstChild, 0, newTextSpan.firstChild, 0);
       }
       // The styles are applied to the paragraph
-      else {
+      else
+      {
         const paragraph = this.startParagraph;
         setParagraphStyles(paragraph, newStyles);
         // Apply styles to child text spans.
@@ -1969,11 +1970,9 @@ export class SelectionController extends EventTarget {
           setTextSpanStyles(textSpan, newStyles);
         }
       }
-      return this.#notifyStyleChange();
-
-      // If the startContainer and endContainer are different
-      // then we need to iterate through those nodes to apply
-      // the styles.
+    // If the startContainer and endContainer are different
+    // then we need to iterate through those nodes to apply
+    // the styles.
     } else if (startNode !== endNode) {
       const safeGuard = new SafeGuard("applyStylesTo");
       safeGuard.start();
@@ -2022,12 +2021,12 @@ export class SelectionController extends EventTarget {
         }
 
         // We've reached the final node so we can return safely.
-        if (this.#textNodeIterator.currentNode === expectedEndNode) return;
+        if (this.#textNodeIterator.currentNode === expectedEndNode)
+          break;
 
         this.#textNodeIterator.nextNode();
       } while (this.#textNodeIterator.currentNode);
     }
-
     return this.#notifyStyleChange();
   }
 

manage.sh

@@ -124,7 +124,7 @@ function run-devenv-shell {
     docker exec -ti \
            -e JAVA_OPTS="$JAVA_OPTS" \
            -e EXTERNAL_UID=$CURRENT_USER_ID \
-           penpot-devenv-main sudo -EH -u penpot bash;
+           penpot-devenv-main sudo -EH -u penpot $@
 }
 
 function run-devenv-isolated-shell {
@@ -138,7 +138,7 @@ function run-devenv-isolated-shell {
            -e SHADOWCLJS_EXTRA_PARAMS=$SHADOWCLJS_EXTRA_PARAMS \
            -e JAVA_OPTS="$JAVA_OPTS" \
            -w /home/penpot/penpot/$1 \
-           $DEVENV_IMGNAME:latest sudo -EH -u penpot bash
+           $DEVENV_IMGNAME:latest sudo -EH -u penpot $@
 }
 
 function build-imagemagick-docker-image {
@@ -215,6 +215,23 @@ function build-frontend-bundle {
     echo ">> bundle frontend end";
 }
 
+function build-mcp-bundle {
+    echo ">> bundle mcp start";
+
+    mkdir -p ./bundles
+    local version=$(print-current-version);
+    local bundle_dir="./bundles/mcp";
+
+    build "mcp";
+
+    rm -rf $bundle_dir;
+    mv ./mcp/dist $bundle_dir;
+    echo $version > $bundle_dir/version.txt;
+    put-license-file $bundle_dir;
+    echo ">> bundle mcp end";
+}
+
+
 function build-backend-bundle {
     echo ">> bundle backend start";
 
@@ -309,6 +326,16 @@ function build-exporter-docker-image {
     popd;
 }
 
+function build-mcp-docker-image {
+    rsync -avr --delete ./bundles/mcp/ ./docker/images/bundle-mcp/;
+    pushd ./docker/images;
+    docker build \
+        -t penpotapp/mcp:$CURRENT_BRANCH -t penpotapp/mcp:latest \
+        --build-arg BUNDLE_PATH="./bundle-mcp/" \
+        -f Dockerfile.mcp .;
+    popd;
+}
+
 function build-storybook-docker-image {
     rsync -avr --delete ./bundles/storybook/ ./docker/images/bundle-storybook/;
     pushd ./docker/images;
@@ -335,17 +362,19 @@ function usage {
     echo "- isolated-shell                   Starts a bash shell in a new devenv container."
     echo "- log-devenv                       Show logs of the running devenv docker compose service."
     echo ""
-    echo "- build-bundle                     Build all bundles (frontend, backend and exporter)."
+    echo "- build-bundle                     Build all bundles (frontend, backend, exporter, storybook and mcp)."
     echo "- build-frontend-bundle            Build frontend bundle"
     echo "- build-backend-bundle             Build backend bundle."
     echo "- build-exporter-bundle            Build exporter bundle."
     echo "- build-storybook-bundle           Build storybook bundle."
+    echo "- build-mcp-bundle                 Build mcp bundle."
     echo "- build-docs-bundle                Build docs bundle."
     echo ""
     echo "- build-docker-images              Build all docker images (frontend, backend and exporter)."
     echo "- build-frontend-docker-image      Build frontend docker images."
     echo "- build-backend-docker-image       Build backend docker images."
     echo "- build-exporter-docker-image      Build exporter docker images."
+    echo "- build-mcp-docker-image           Build exporter docker images."
     echo "- build-storybook-docker-image     Build storybook docker images."
     echo ""
     echo "- version                          Show penpot's version."
@@ -397,6 +426,7 @@ case $1 in
     ## production builds
     build-bundle)
         build-frontend-bundle;
+        build-mcp-bundle;
         build-backend-bundle;
         build-exporter-bundle;
         build-storybook-bundle;
@@ -406,6 +436,10 @@ case $1 in
         build-frontend-bundle;
         ;;
 
+    build-mcp-bundle)
+        build-mcp-bundle;
+        ;;
+
     build-backend-bundle)
         build-backend-bundle;
         ;;
@@ -413,7 +447,7 @@ case $1 in
     build-exporter-bundle)
         build-exporter-bundle;
         ;;
-    
+
     build-storybook-bundle)
         build-storybook-bundle;
         ;;
@@ -431,6 +465,7 @@ case $1 in
         build-frontend-docker-image
         build-backend-docker-image
         build-exporter-docker-image
+        build-mcp-docker-image
         build-storybook-docker-image
         ;;
 
@@ -445,7 +480,11 @@ case $1 in
     build-exporter-docker-image)
         build-exporter-docker-image
         ;;
- 
+
+    build-mcp-docker-image)
+        build-mcp-docker-image
+        ;;
+
     build-storybook-docker-image)
         build-storybook-docker-image
         ;;

mcp/packages/plugin/public/manifest.json

@@ -1,6 +1,7 @@
 {
     "name": "Penpot MCP Plugin",
     "code": "plugin.js",
+    "version": 2,
     "description": "This plugin enables interaction with the Penpot MCP server",
     "permissions": ["content:read", "content:write", "library:read", "library:write", "comment:read", "comment:write"]
 }

mcp/packages/server/src/PenpotMcpServer.ts

@@ -55,8 +55,8 @@ export class PenpotMcpServer {
         this.port = parseInt(process.env.PENPOT_MCP_SERVER_PORT ?? "4401", 10);
         this.webSocketPort = parseInt(process.env.PENPOT_MCP_WEBSOCKET_PORT ?? "4402", 10);
         this.replPort = parseInt(process.env.PENPOT_MCP_REPL_PORT ?? "4403", 10);
-        this.listenAddress = process.env.PENPOT_MCP_SERVER_LISTEN_ADDRESS ?? "localhost";
-        this.serverAddress = process.env.PENPOT_MCP_SERVER_ADDRESS ?? "localhost";
+        this.listenAddress = process.env.PENPOT_MCP_SERVER_LISTEN_ADDRESS ?? "0.0.0.0";
+        this.serverAddress = process.env.PENPOT_MCP_SERVER_ADDRESS ?? "0.0.0.0";
 
         this.configLoader = new ConfigurationLoader(process.cwd());
         this.apiDocs = new ApiDocs();

render-wasm/docs/text_editor.md

@@ -0,0 +1,217 @@
+# Text Editor Architecture
+
+## Overview (Simplified)
+
+```mermaid
+flowchart TB
+    subgraph Browser["Browser / DOM"]
+        CE[contenteditable]
+        Events[DOM Events]
+    end
+
+    subgraph CLJS["ClojureScript"]
+        InputHandler[text_editor_input.cljs]
+        Bindings[text_editor.cljs]
+        ContentCache[(content cache)]
+    end
+
+    subgraph WASM["WASM Boundary"]
+        FFI["_text_editor_* functions"]
+    end
+
+    subgraph Rust["Rust"]
+        subgraph StateModule["state/text_editor.rs"]
+            TES[TextEditorState]
+            Selection[TextSelection]
+            Cursor[TextCursor]
+        end
+
+        subgraph WASMImpl["wasm/text_editor.rs"]
+            StateOps[start / stop]
+            CursorOps[cursor / selection]
+            EditOps[insert / delete]
+            ExportOps[export content]
+        end
+
+        subgraph RenderMod["render/text_editor.rs"]
+            RenderOverlay[render_overlay]
+        end
+
+        Shapes[(ShapesPool)]
+    end
+
+    subgraph Skia["Skia"]
+        Canvas[Canvas]
+        Paragraph[Paragraph layout]
+    end
+
+    %% Flow
+    CE --> Events
+    Events --> InputHandler
+    InputHandler --> Bindings
+    Bindings --> FFI
+    FFI --> StateOps & CursorOps & EditOps & ExportOps
+
+    StateOps --> TES
+    CursorOps --> TES
+    EditOps --> TES
+    EditOps --> Shapes
+    ExportOps --> Shapes
+    TES --> Selection --> Cursor
+
+    RenderOverlay --> TES
+    RenderOverlay --> Shapes
+    Shapes --> Paragraph
+    RenderOverlay --> Canvas
+    Paragraph --> Canvas
+
+    ExportOps --> ContentCache
+    ContentCache --> InputHandler
+```
+
+---
+
+## Detailed Architecture
+
+```mermaid
+flowchart TB
+    subgraph Browser["Browser / DOM"]
+        CE[contenteditable element]
+        KeyEvents[keydown / keyup]
+        MouseEvents[mousedown / mousemove]
+        IME[compositionstart / end]
+    end
+
+    subgraph CLJS["ClojureScript Layer"]
+        subgraph InputMod["text_editor_input.cljs"]
+            EventHandler[Event Handler]
+            BlinkLoop[RAF Blink Loop]
+            SyncFn[sync-content!]
+        end
+
+        subgraph BindingsMod["text_editor.cljs"]
+            direction TB
+            StartStop[start / stop]
+            CursorFns[set-cursor / move]
+            SelectFns[select-all / extend]
+            EditFns[insert / delete]
+            ExportFns[export-content]
+            StyleFns[apply-style]
+        end
+
+        ContentCache[(shape-text-contents<br/>atom)]
+    end
+
+    subgraph WASM["WASM Boundary"]
+        direction TB
+        FFI_State["_text_editor_start<br/>_text_editor_stop<br/>_text_editor_is_active"]
+        FFI_Cursor["_text_editor_set_cursor_from_point<br/>_text_editor_move_cursor<br/>_text_editor_select_all"]
+        FFI_Edit["_text_editor_insert_text<br/>_text_editor_delete_backward<br/>_text_editor_insert_paragraph"]
+        FFI_Query["_text_editor_export_content<br/>_text_editor_get_selection<br/>_text_editor_poll_event"]
+        FFI_Render["_text_editor_render_overlay<br/>_text_editor_update_blink"]
+    end
+
+    subgraph Rust["Rust Layer"]
+        subgraph StateMod["state/text_editor.rs"]
+            TES[TextEditorState]
+            Selection[TextSelection]
+            Cursor[TextCursor]
+            Events[EditorEvent queue]
+        end
+
+        subgraph WASMMod["wasm/text_editor.rs"]
+            direction TB
+            WStateOps[State ops]
+            WCursorOps[Cursor ops]
+            WEditOps[Edit ops]
+            WQueryOps[Query ops]
+        end
+
+        subgraph RenderMod["render/text_editor.rs"]
+            RenderOverlay[render_overlay]
+            RenderCursor[render_cursor]
+            RenderSelection[render_selection]
+        end
+
+        Shapes[(ShapesPool<br/>TextContent)]
+    end
+
+    subgraph Skia["Skia"]
+        Canvas[Canvas]
+        SkParagraph[textlayout::Paragraph]
+        TextBoxes[get_rects_for_range]
+    end
+
+    %% Browser to CLJS
+    CE --> KeyEvents & MouseEvents & IME
+    KeyEvents --> EventHandler
+    MouseEvents --> EventHandler
+    IME --> EventHandler
+
+    %% CLJS internal
+    EventHandler --> StartStop & CursorFns & EditFns & SelectFns
+    BlinkLoop --> FFI_Render
+    SyncFn --> ExportFns
+    ExportFns --> ContentCache
+    ContentCache --> SyncFn
+    StyleFns --> ContentCache
+
+    %% CLJS to WASM
+    StartStop --> FFI_State
+    CursorFns --> FFI_Cursor
+    SelectFns --> FFI_Cursor
+    EditFns --> FFI_Edit
+    ExportFns --> FFI_Query
+
+    %% WASM to Rust impl
+    FFI_State --> WStateOps
+    FFI_Cursor --> WCursorOps
+    FFI_Edit --> WEditOps
+    FFI_Query --> WQueryOps
+    FFI_Render --> RenderOverlay
+
+    %% Rust internal
+    WStateOps --> TES
+    WCursorOps --> TES
+    WEditOps --> TES
+    WEditOps --> Shapes
+    WQueryOps --> TES
+    WQueryOps --> Shapes
+
+    TES --> Selection
+    Selection --> Cursor
+    TES --> Events
+
+    %% Render flow
+    RenderOverlay --> RenderCursor & RenderSelection
+    RenderCursor --> TES
+    RenderSelection --> TES
+    RenderCursor --> Shapes
+    RenderSelection --> Shapes
+
+    %% Skia
+    Shapes --> SkParagraph
+    SkParagraph --> TextBoxes
+    RenderCursor --> Canvas
+    RenderSelection --> Canvas
+```
+
+---
+
+## Key Files
+
+| Layer | File | Purpose |
+|-------|------|---------|
+| DOM | - | contenteditable captures keyboard/IME input |
+| CLJS | `text_editor_input.cljs` | Event handling, blink loop, content sync |
+| CLJS | `text_editor.cljs` | WASM bindings, content cache, style application |
+| Rust | `state/text_editor.rs` | TextEditorState, TextSelection, TextCursor |
+| Rust | `wasm/text_editor.rs` | WASM exported functions |
+| Rust | `render/text_editor.rs` | Cursor & selection overlay rendering |
+
+## Data Flow
+
+1. **Input**: DOM events → ClojureScript handler → WASM function → Rust state
+2. **Edit**: Rust modifies TextContent in ShapesPool → triggers layout
+3. **Sync**: Export content → merge with cached styles → update shape
+4. **Render**: RAF loop → render_overlay → Skia draws cursor/selection

render-wasm/src/main.rs

@@ -301,11 +301,7 @@ pub extern "C" fn set_view_end() {
         #[cfg(feature = "profile-macros")]
         {
             let total_time = performance::get_time() - unsafe { VIEW_INTERACTION_START };
-            performance::console_log!(
-                "[PERF] view_interaction (zoom_changed={}): {}ms",
-                zoom_changed,
-                total_time
-            );
+            performance::console_log!("[PERF] view_interaction: {}ms", total_time);
         }
     });
 }
@@ -701,21 +697,6 @@ pub extern "C" fn clean_modifiers() {
     });
 }
 
-#[no_mangle]
-pub extern "C" fn propagate_modifiers(pixel_precision: bool) -> *mut u8 {
-    let bytes = mem::bytes();
-
-    let entries: Vec<_> = bytes
-        .chunks(size_of::<<TransformEntry as SerializableResult>::BytesType>())
-        .map(|data| TransformEntry::try_from(data).unwrap())
-        .collect();
-
-    with_state!(state, {
-        let result = shapes::propagate_modifiers(state, &entries, pixel_precision);
-        mem::write_vec(result)
-    })
-}
-
 #[no_mangle]
 pub extern "C" fn set_modifiers() {
     let bytes = mem::bytes();

render-wasm/src/render.rs

@@ -10,6 +10,7 @@ mod shadows;
 mod strokes;
 mod surfaces;
 pub mod text;
+pub mod text_editor;
 mod ui;
 
 use skia_safe::{self as skia, Matrix, RRect, Rect};
@@ -22,7 +23,7 @@ pub use surfaces::{SurfaceId, Surfaces};
 
 use crate::performance;
 use crate::shapes::{
-    all_with_ancestors, Blur, BlurType, Corners, Fill, Shadow, Shape, SolidColor, Type,
+    all_with_ancestors, Blur, BlurType, Corners, Fill, Shadow, Shape, SolidColor, Stroke, Type,
 };
 use crate::state::{ShapesPoolMutRef, ShapesPoolRef};
 use crate::tiles::{self, PendingTiles, TileRect};
@@ -33,8 +34,9 @@ use crate::wapi;
 pub use fonts::*;
 pub use images::*;
 
-// This is the extra are used for tile rendering.
-const VIEWPORT_INTEREST_AREA_THRESHOLD: i32 = 2;
+// This is the extra area used for tile rendering (tiles beyond viewport).
+// Higher values pre-render more tiles, reducing empty squares during pan but using more memory.
+const VIEWPORT_INTEREST_AREA_THRESHOLD: i32 = 3;
 const MAX_BLOCKING_TIME_MS: i32 = 32;
 const NODE_BATCH_THRESHOLD: i32 = 3;
 
@@ -697,20 +699,17 @@ impl RenderState {
                 canvas.translate(translation);
             });
 
-            for fill in shape.fills().rev() {
-                fills::render(self, shape, fill, antialias, SurfaceId::Current);
-            }
+            fills::render(self, shape, &shape.fills, antialias, SurfaceId::Current);
 
-            for stroke in shape.visible_strokes().rev() {
-                strokes::render(
-                    self,
-                    shape,
-                    stroke,
-                    Some(SurfaceId::Current),
-                    None,
-                    antialias,
-                );
-            }
+            // Pass strokes in natural order; stroke merging handles top-most ordering internally.
+            let visible_strokes: Vec<&Stroke> = shape.visible_strokes().collect();
+            strokes::render(
+                self,
+                shape,
+                &visible_strokes,
+                Some(SurfaceId::Current),
+                antialias,
+            );
 
             self.surfaces.apply_mut(SurfaceId::Current as u32, |s| {
                 s.canvas().restore();
@@ -1014,33 +1013,35 @@ impl RenderState {
                 {
                     if let Some(fills_to_render) = self.nested_fills.last() {
                         let fills_to_render = fills_to_render.clone();
-                        for fill in fills_to_render.iter() {
-                            fills::render(self, shape, fill, antialias, fills_surface_id);
-                        }
+                        fills::render(self, shape, &fills_to_render, antialias, fills_surface_id);
                     }
                 } else {
-                    for fill in shape.fills().rev() {
-                        fills::render(self, shape, fill, antialias, fills_surface_id);
-                    }
+                    fills::render(self, shape, &shape.fills, antialias, fills_surface_id);
                 }
 
-                for stroke in shape.visible_strokes().rev() {
+                // Skip stroke rendering for clipped frames - they are drawn in render_shape_exit
+                // over the children. Drawing twice would cause incorrect opacity blending.
+                let skip_strokes = matches!(shape.shape_type, Type::Frame(_)) && shape.clip_content;
+                if !skip_strokes {
+                    // Pass strokes in natural order; stroke merging handles top-most ordering internally.
+                    let visible_strokes: Vec<&Stroke> = shape.visible_strokes().collect();
                     strokes::render(
                         self,
                         shape,
-                        stroke,
+                        &visible_strokes,
                         Some(strokes_surface_id),
-                        None,
                         antialias,
                     );
                     if !fast_mode {
-                        shadows::render_stroke_inner_shadows(
-                            self,
-                            shape,
-                            stroke,
-                            antialias,
-                            innershadows_surface_id,
-                        );
+                        for stroke in &visible_strokes {
+                            shadows::render_stroke_inner_shadows(
+                                self,
+                                shape,
+                                stroke,
+                                antialias,
+                                innershadows_surface_id,
+                            );
+                        }
                     }
                 }
 
@@ -1240,8 +1241,6 @@ impl RenderState {
         if self.render_in_progress {
             if tree.len() != 0 {
                 self.render_shape_tree_partial(base_object, tree, timestamp, true)?;
-            } else {
-                println!("Empty tree");
             }
             self.flush_and_submit();
 
@@ -1264,8 +1263,6 @@ impl RenderState {
     ) -> Result<(), String> {
         if tree.len() != 0 {
             self.render_shape_tree_partial(base_object, tree, timestamp, false)?;
-        } else {
-            println!("Empty tree");
         }
         self.flush_and_submit();
 
@@ -1402,6 +1399,10 @@ impl RenderState {
             element_strokes.to_mut().clear_fills();
             element_strokes.to_mut().clear_shadows();
             element_strokes.to_mut().clip_content = false;
+            // Frame blur is applied at the save_layer level - avoid double blur on the stroke paint
+            if Self::frame_clip_layer_blur(element).is_some() {
+                element_strokes.to_mut().set_blur(None);
+            }
             self.render_shape(
                 &element_strokes,
                 clip_bounds,
@@ -1551,6 +1552,11 @@ impl RenderState {
         plain_shape_mut.clear_shadows();
         plain_shape_mut.blur = None;
 
+        // Shadow rendering uses a single render_shape call with no render_shape_exit,
+        // so strokes must be drawn here. Disable clip_content to avoid skip_strokes
+        // (which defers strokes to render_shape_exit for clipped frames).
+        plain_shape_mut.clip_content = false;
+
         let Some(drop_filter) = transformed_shadow.get_drop_shadow_filter() else {
             return;
         };
@@ -1660,6 +1666,158 @@ impl RenderState {
         }
     }
 
+    /// Renders element drop shadows to DropShadows surface and composites to Current.
+    /// Used for both normal shadow rendering and pre-layer rendering (frame_clip_layer_blur).
+    #[allow(clippy::too_many_arguments)]
+    fn render_element_drop_shadows_and_composite(
+        &mut self,
+        element: &Shape,
+        tree: ShapesPoolRef,
+        extrect: &mut Option<Rect>,
+        clip_bounds: Option<ClipStack>,
+        scale: f32,
+        translation: (f32, f32),
+        node_render_state: &NodeRenderState,
+    ) {
+        let element_extrect = extrect.get_or_insert_with(|| element.extrect(tree, scale));
+        let inherited_layer_blur = match element.shape_type {
+            Type::Frame(_) | Type::Group(_) => element.blur,
+            _ => None,
+        };
+
+        for shadow in element.drop_shadows_visible() {
+            let paint = skia::Paint::default();
+            let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint);
+            self.surfaces
+                .canvas(SurfaceId::DropShadows)
+                .save_layer(&layer_rec);
+
+            self.render_drop_black_shadow(
+                element,
+                element_extrect,
+                shadow,
+                clip_bounds.clone(),
+                scale,
+                translation,
+                None,
+            );
+
+            if !matches!(element.shape_type, Type::Bool(_)) {
+                for shadow_shape_id in element.children.iter() {
+                    let Some(shadow_shape) = tree.get(shadow_shape_id) else {
+                        continue;
+                    };
+                    if shadow_shape.hidden {
+                        continue;
+                    }
+                    let nested_clip_bounds =
+                        node_render_state.get_nested_shadow_clip_bounds(element, shadow);
+
+                    if !matches!(shadow_shape.shape_type, Type::Text(_)) {
+                        self.render_drop_black_shadow(
+                            shadow_shape,
+                            &shadow_shape.extrect(tree, scale),
+                            shadow,
+                            nested_clip_bounds,
+                            scale,
+                            translation,
+                            inherited_layer_blur,
+                        );
+                    } else {
+                        let paint = skia::Paint::default();
+                        let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint);
+                        self.surfaces
+                            .canvas(SurfaceId::DropShadows)
+                            .save_layer(&layer_rec);
+                        self.surfaces
+                            .canvas(SurfaceId::DropShadows)
+                            .scale((scale, scale));
+                        self.surfaces
+                            .canvas(SurfaceId::DropShadows)
+                            .translate(translation);
+
+                        let mut transformed_shadow: Cow<Shadow> = Cow::Borrowed(shadow);
+                        transformed_shadow.to_mut().color = skia::Color::BLACK;
+                        transformed_shadow.to_mut().blur = transformed_shadow.blur * scale;
+                        transformed_shadow.to_mut().spread = transformed_shadow.spread * scale;
+
+                        let mut new_shadow_paint = skia::Paint::default();
+                        new_shadow_paint
+                            .set_image_filter(transformed_shadow.get_drop_shadow_filter());
+                        new_shadow_paint.set_blend_mode(skia::BlendMode::SrcOver);
+
+                        self.with_nested_blurs_suppressed(|state| {
+                            state.render_shape(
+                                shadow_shape,
+                                nested_clip_bounds,
+                                SurfaceId::DropShadows,
+                                SurfaceId::DropShadows,
+                                SurfaceId::DropShadows,
+                                SurfaceId::DropShadows,
+                                true,
+                                None,
+                                Some(vec![new_shadow_paint.clone()]),
+                            );
+                        });
+                        self.surfaces.canvas(SurfaceId::DropShadows).restore();
+                    }
+                }
+            }
+
+            let mut paint = skia::Paint::default();
+            paint.set_color(shadow.color);
+            paint.set_blend_mode(skia::BlendMode::SrcIn);
+            self.surfaces
+                .canvas(SurfaceId::DropShadows)
+                .draw_paint(&paint);
+
+            self.surfaces.canvas(SurfaceId::DropShadows).restore();
+        }
+
+        if let Some(clips) = clip_bounds.as_ref() {
+            let antialias = element.should_use_antialias(scale);
+            self.surfaces.canvas(SurfaceId::Current).save();
+            for (bounds, corners, transform) in clips.iter() {
+                let mut total_matrix = Matrix::new_identity();
+                total_matrix.pre_scale((scale, scale), None);
+                total_matrix.pre_translate((translation.0, translation.1));
+                total_matrix.pre_concat(transform);
+
+                self.surfaces
+                    .canvas(SurfaceId::Current)
+                    .concat(&total_matrix);
+
+                if let Some(corners) = corners {
+                    let rrect = RRect::new_rect_radii(*bounds, corners);
+                    self.surfaces.canvas(SurfaceId::Current).clip_rrect(
+                        rrect,
+                        skia::ClipOp::Intersect,
+                        antialias,
+                    );
+                } else {
+                    self.surfaces.canvas(SurfaceId::Current).clip_rect(
+                        *bounds,
+                        skia::ClipOp::Intersect,
+                        antialias,
+                    );
+                }
+
+                self.surfaces
+                    .canvas(SurfaceId::Current)
+                    .concat(&total_matrix.invert().unwrap_or_default());
+            }
+            self.surfaces
+                .draw_into(SurfaceId::DropShadows, SurfaceId::Current, None);
+            self.surfaces.canvas(SurfaceId::Current).restore();
+        } else {
+            self.surfaces
+                .draw_into(SurfaceId::DropShadows, SurfaceId::Current, None);
+        }
+        self.surfaces
+            .canvas(SurfaceId::DropShadows)
+            .clear(skia::Color::TRANSPARENT);
+    }
+
     pub fn render_shape_tree_partial_uncached(
         &mut self,
         tree: ShapesPoolRef,
@@ -1742,6 +1900,33 @@ impl RenderState {
             // If a container was flattened, it doesn't affect children visually, so we skip
             // the expensive enter/exit operations and process children directly
             if !element.can_flatten() {
+                // Enter focus early so shadow_before_layer can run (it needs focus_mode.is_active())
+                self.focus_mode.enter(&element.id);
+
+                // For frames with layer blur, render shadow BEFORE the layer so it doesn't get
+                // the layer blur (which would make it more diffused than without clipping)
+                let shadow_before_layer = !node_render_state.is_root()
+                    && self.focus_mode.is_active()
+                    && !self.options.is_fast_mode()
+                    && !matches!(element.shape_type, Type::Text(_))
+                    && Self::frame_clip_layer_blur(element).is_some()
+                    && element.drop_shadows_visible().next().is_some();
+
+                if shadow_before_layer {
+                    let translation = self
+                        .surfaces
+                        .get_render_context_translation(self.render_area, scale);
+                    self.render_element_drop_shadows_and_composite(
+                        element,
+                        tree,
+                        &mut extrect,
+                        clip_bounds.clone(),
+                        scale,
+                        translation,
+                        &node_render_state,
+                    );
+                }
+
                 self.render_shape_enter(element, mask);
             }
 
@@ -1753,180 +1938,25 @@ impl RenderState {
                 // Skip expensive drop shadow rendering in fast mode (during pan/zoom)
                 let skip_shadows = self.options.is_fast_mode();
 
+                // Skip shadow block when already rendered before the layer (frame_clip_layer_blur)
+                let shadows_already_rendered = Self::frame_clip_layer_blur(element).is_some();
+
                 // For text shapes, render drop shadow using text rendering logic
-                if !skip_shadows && !matches!(element.shape_type, Type::Text(_)) {
-                    // Shadow rendering technique: Two-pass approach for proper opacity handling
-                    //
-                    // The shadow rendering uses a two-pass technique to ensure that overlapping
-                    // shadow areas maintain correct opacity without unwanted darkening:
-                    //
-                    // 1. First pass: Render shadow shape in pure black (alpha channel preserved)
-                    //    - This creates the shadow silhouette with proper alpha gradients
-                    //    - The black color acts as a mask for the final shadow color
-                    //
-                    // 2. Second pass: Apply actual shadow color using SrcIn blend mode
-                    //    - SrcIn preserves the alpha channel from the black shadow
-                    //    - Only the color channels are replaced, maintaining transparency
-                    //    - This prevents overlapping shadows from accumulating opacity
-                    //
-                    // This approach is essential for complex shapes with transparency where
-                    // multiple shadow areas might overlap, ensuring visual consistency.
-                    let inherited_layer_blur = match element.shape_type {
-                        Type::Frame(_) | Type::Group(_) => element.blur,
-                        _ => None,
-                    };
-
-                    for shadow in element.drop_shadows_visible() {
-                        let paint = skia::Paint::default();
-                        let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint);
-
-                        self.surfaces
-                            .canvas(SurfaceId::DropShadows)
-                            .save_layer(&layer_rec);
-
-                        // First pass: Render shadow in black to establish alpha mask
-                        let element_extrect =
-                            extrect.get_or_insert_with(|| element.extrect(tree, scale));
-                        self.render_drop_black_shadow(
-                            element,
-                            element_extrect,
-                            shadow,
-                            clip_bounds.clone(),
-                            scale,
-                            translation,
-                            None,
-                        );
-
-                        if !matches!(element.shape_type, Type::Bool(_)) {
-                            // Nested shapes shadowing - apply black shadow to child shapes too
-                            for shadow_shape_id in element.children.iter() {
-                                let Some(shadow_shape) = tree.get(shadow_shape_id) else {
-                                    continue;
-                                };
-                                if shadow_shape.hidden {
-                                    continue;
-                                }
-                                let clip_bounds = node_render_state
-                                    .get_nested_shadow_clip_bounds(element, shadow);
-
-                                if !matches!(shadow_shape.shape_type, Type::Text(_)) {
-                                    self.render_drop_black_shadow(
-                                        shadow_shape,
-                                        &shadow_shape.extrect(tree, scale),
-                                        shadow,
-                                        clip_bounds,
-                                        scale,
-                                        translation,
-                                        inherited_layer_blur,
-                                    );
-                                } else {
-                                    let paint = skia::Paint::default();
-                                    let layer_rec =
-                                        skia::canvas::SaveLayerRec::default().paint(&paint);
-
-                                    self.surfaces
-                                        .canvas(SurfaceId::DropShadows)
-                                        .save_layer(&layer_rec);
-                                    self.surfaces
-                                        .canvas(SurfaceId::DropShadows)
-                                        .scale((scale, scale));
-                                    self.surfaces
-                                        .canvas(SurfaceId::DropShadows)
-                                        .translate(translation);
-
-                                    let mut transformed_shadow: Cow<Shadow> = Cow::Borrowed(shadow);
-
-                                    transformed_shadow.to_mut().color = skia::Color::BLACK;
-                                    transformed_shadow.to_mut().blur =
-                                        transformed_shadow.blur * scale;
-                                    transformed_shadow.to_mut().spread =
-                                        transformed_shadow.spread * scale;
-
-                                    let mut new_shadow_paint = skia::Paint::default();
-                                    new_shadow_paint.set_image_filter(
-                                        transformed_shadow.get_drop_shadow_filter(),
-                                    );
-                                    new_shadow_paint.set_blend_mode(skia::BlendMode::SrcOver);
-
-                                    self.with_nested_blurs_suppressed(|state| {
-                                        state.render_shape(
-                                            shadow_shape,
-                                            clip_bounds,
-                                            SurfaceId::DropShadows,
-                                            SurfaceId::DropShadows,
-                                            SurfaceId::DropShadows,
-                                            SurfaceId::DropShadows,
-                                            true,
-                                            None,
-                                            Some(vec![new_shadow_paint.clone()]),
-                                        );
-                                    });
-                                    self.surfaces.canvas(SurfaceId::DropShadows).restore();
-                                }
-                            }
-                        }
-
-                        // Second pass: Apply actual shadow color using SrcIn blend mode
-                        // This preserves the alpha channel from the black shadow while
-                        // replacing only the color channels, preventing opacity accumulation
-                        let mut paint = skia::Paint::default();
-                        paint.set_color(shadow.color);
-                        paint.set_blend_mode(skia::BlendMode::SrcIn);
-                        self.surfaces
-                            .canvas(SurfaceId::DropShadows)
-                            .draw_paint(&paint);
-
-                        self.surfaces.canvas(SurfaceId::DropShadows).restore();
-                    }
+                if !skip_shadows
+                    && !shadows_already_rendered
+                    && !matches!(element.shape_type, Type::Text(_))
+                {
+                    self.render_element_drop_shadows_and_composite(
+                        element,
+                        tree,
+                        &mut extrect,
+                        clip_bounds.clone(),
+                        scale,
+                        translation,
+                        &node_render_state,
+                    );
                 }
 
-                if let Some(clips) = clip_bounds.as_ref() {
-                    let antialias = element.should_use_antialias(scale);
-
-                    self.surfaces.canvas(SurfaceId::Current).save();
-                    for (bounds, corners, transform) in clips.iter() {
-                        let mut total_matrix = Matrix::new_identity();
-                        total_matrix.pre_scale((scale, scale), None);
-                        total_matrix.pre_translate((translation.0, translation.1));
-                        total_matrix.pre_concat(transform);
-
-                        self.surfaces
-                            .canvas(SurfaceId::Current)
-                            .concat(&total_matrix);
-
-                        if let Some(corners) = corners {
-                            let rrect = RRect::new_rect_radii(*bounds, corners);
-                            self.surfaces.canvas(SurfaceId::Current).clip_rrect(
-                                rrect,
-                                skia::ClipOp::Intersect,
-                                antialias,
-                            );
-                        } else {
-                            self.surfaces.canvas(SurfaceId::Current).clip_rect(
-                                *bounds,
-                                skia::ClipOp::Intersect,
-                                antialias,
-                            );
-                        }
-
-                        self.surfaces
-                            .canvas(SurfaceId::Current)
-                            .concat(&total_matrix.invert().unwrap_or_default());
-                    }
-
-                    self.surfaces
-                        .draw_into(SurfaceId::DropShadows, SurfaceId::Current, None);
-
-                    self.surfaces.canvas(SurfaceId::Current).restore();
-                } else {
-                    self.surfaces
-                        .draw_into(SurfaceId::DropShadows, SurfaceId::Current, None);
-                }
-
-                self.surfaces
-                    .canvas(SurfaceId::DropShadows)
-                    .clear(skia::Color::TRANSPARENT);
-
                 self.render_shape(
                     element,
                     clip_bounds.clone(),
@@ -1992,10 +2022,14 @@ impl RenderState {
                     if element.is_flex_reverse() && has_z_index {
                         ids.reverse();
                     }
-                    ids.sort_by(|id1, id2| {
-                        let z1 = tree.get(id1).map(|s| s.z_index()).unwrap_or(0);
-                        let z2 = tree.get(id2).map(|s| s.z_index()).unwrap_or(0);
-                        z2.cmp(&z1)
+                    // Sort by z_index descending (higher z renders on top).
+                    // When z_index is equal, absolute children go behind
+                    // non-absolute children (false < true).
+                    ids.sort_by_key(|id| {
+                        let s = tree.get(id);
+                        let z = s.map(|s| s.z_index()).unwrap_or(0);
+                        let abs = s.map(|s| s.is_absolute()).unwrap_or(false);
+                        (std::cmp::Reverse(z), abs)
                     });
                     ids
                 } else {
@@ -2063,8 +2097,13 @@ impl RenderState {
                     }
                 } else {
                     performance::begin_measure!("render_shape_tree::uncached");
+                    // Only allow stopping (yielding) if the current tile is NOT visible.
+                    // This ensures all visible tiles render synchronously before showing,
+                    // eliminating empty squares during zoom. Interest-area tiles can still yield.
+                    let tile_is_visible = self.tile_viewbox.is_visible(&current_tile);
+                    let can_stop = allow_stop && !tile_is_visible;
                     let (is_empty, early_return) =
-                        self.render_shape_tree_partial_uncached(tree, timestamp, allow_stop)?;
+                        self.render_shape_tree_partial_uncached(tree, timestamp, can_stop)?;
 
                     if early_return {
                         return Ok(());
@@ -2189,17 +2228,20 @@ impl RenderState {
      * Given a shape, check the indexes and update it's location in the tile set
      * returns the tiles that have changed in the process.
      */
-    pub fn update_shape_tiles(&mut self, shape: &Shape, tree: ShapesPoolRef) -> Vec<tiles::Tile> {
+    pub fn update_shape_tiles(
+        &mut self,
+        shape: &Shape,
+        tree: ShapesPoolRef,
+    ) -> HashSet<tiles::Tile> {
         let TileRect(rsx, rsy, rex, rey) = self.get_tiles_for_shape(shape, tree);
 
-        let old_tiles = self
+        // Collect old tiles to avoid borrow conflict with remove_shape_at
+        let old_tiles: Vec<_> = self
             .tiles
             .get_tiles_of(shape.id)
-            .map_or(Vec::new(), |tiles| tiles.iter().copied().collect());
+            .map_or(Vec::new(), |t| t.iter().copied().collect());
 
-        let new_tiles = (rsx..=rex).flat_map(|x| (rsy..=rey).map(move |y| tiles::Tile::from(x, y)));
-
-        let mut result = HashSet::<tiles::Tile>::new();
+        let mut result = HashSet::<tiles::Tile>::with_capacity(old_tiles.len());
 
         // First, remove the shape from all tiles where it was previously located
         for tile in old_tiles {
@@ -2208,12 +2250,66 @@ impl RenderState {
         }
 
         // Then, add the shape to the new tiles
-        for tile in new_tiles {
+        for tile in (rsx..=rex).flat_map(|x| (rsy..=rey).map(move |y| tiles::Tile::from(x, y))) {
             self.tiles.add_shape_at(tile, shape.id);
             result.insert(tile);
         }
 
-        result.iter().copied().collect()
+        result
+    }
+
+    /*
+     * Incremental version of update_shape_tiles for pan/zoom operations.
+     * Updates the tile index and returns ONLY tiles that need cache invalidation.
+     *
+     * During pan operations, shapes don't move in world coordinates. The interest
+     * area (viewport) moves, which changes which tiles we track in the index, but
+     * tiles that were already cached don't need re-rendering just because the
+     * viewport moved.
+     *
+     * This function:
+     * 1. Updates the tile index (adds/removes shapes from tiles based on interest area)
+     * 2. Returns empty vec for cache invalidation (pan doesn't change tile content)
+     *
+     * Tile cache invalidation only happens when shapes actually move or change,
+     * which is handled by rebuild_touched_tiles, not during pan/zoom.
+     */
+    pub fn update_shape_tiles_incremental(
+        &mut self,
+        shape: &Shape,
+        tree: ShapesPoolRef,
+    ) -> Vec<tiles::Tile> {
+        let TileRect(rsx, rsy, rex, rey) = self.get_tiles_for_shape(shape, tree);
+
+        let old_tiles: HashSet<tiles::Tile> = self
+            .tiles
+            .get_tiles_of(shape.id)
+            .map_or(HashSet::new(), |tiles| tiles.iter().copied().collect());
+
+        let new_tiles: HashSet<tiles::Tile> = (rsx..=rex)
+            .flat_map(|x| (rsy..=rey).map(move |y| tiles::Tile::from(x, y)))
+            .collect();
+
+        // Tiles where shape is being removed from index (left interest area)
+        let removed: Vec<_> = old_tiles.difference(&new_tiles).copied().collect();
+        // Tiles where shape is being added to index (entered interest area)
+        let added: Vec<_> = new_tiles.difference(&old_tiles).copied().collect();
+
+        // Update the index: remove from old tiles
+        for tile in &removed {
+            self.tiles.remove_shape_at(*tile, shape.id);
+        }
+
+        // Update the index: add to new tiles
+        for tile in &added {
+            self.tiles.add_shape_at(*tile, shape.id);
+        }
+
+        // Don't invalidate cache for pan/zoom - the tile content hasn't changed,
+        // only the interest area moved. Tiles that were cached are still valid.
+        // New tiles that entered the interest area will be rendered fresh since
+        // they weren't in the cache anyway.
+        Vec::new()
     }
 
     /*
@@ -2239,12 +2335,22 @@ impl RenderState {
     pub fn rebuild_tiles_shallow(&mut self, tree: ShapesPoolRef) {
         performance::begin_measure!("rebuild_tiles_shallow");
 
-        let mut all_tiles = HashSet::<tiles::Tile>::new();
+        // Check if zoom changed - if so, we need full cache invalidation
+        // because tiles are rendered at specific zoom levels
+        let zoom_changed = self.zoom_changed();
+
+        let mut tiles_to_invalidate = HashSet::<tiles::Tile>::new();
         let mut nodes = vec![Uuid::nil()];
         while let Some(shape_id) = nodes.pop() {
             if let Some(shape) = tree.get(&shape_id) {
                 if shape_id != Uuid::nil() {
-                    all_tiles.extend(self.update_shape_tiles(shape, tree));
+                    if zoom_changed {
+                        // Zoom changed: use full update that tracks all affected tiles
+                        tiles_to_invalidate.extend(self.update_shape_tiles(shape, tree));
+                    } else {
+                        // Pan only: use incremental update that preserves valid cached tiles
+                        self.update_shape_tiles_incremental(shape, tree);
+                    }
                 } else {
                     // We only need to rebuild tiles from the first level.
                     for child_id in shape.children_ids_iter(false) {
@@ -2256,9 +2362,6 @@ impl RenderState {
 
         // Invalidate changed tiles - old content stays visible until new tiles render
         self.surfaces.remove_cached_tiles(self.background_color);
-        for tile in all_tiles {
-            self.remove_cached_tile(tile);
-        }
 
         performance::end_measure!("rebuild_tiles_shallow");
     }
@@ -2307,7 +2410,7 @@ impl RenderState {
 
         let mut all_tiles = HashSet::<tiles::Tile>::new();
 
-        let ids = self.touched_ids.clone();
+        let ids = std::mem::take(&mut self.touched_ids);
 
         for shape_id in ids.iter() {
             if let Some(shape) = tree.get(shape_id) {
@@ -2322,8 +2425,6 @@ impl RenderState {
             self.remove_cached_tile(tile);
         }
 
-        self.clean_touched();
-
         performance::end_measure!("rebuild_touched_tiles");
     }
 
@@ -2380,6 +2481,7 @@ impl RenderState {
         self.touched_ids.insert(uuid);
     }
 
+    #[allow(dead_code)]
     pub fn clean_touched(&mut self) {
         self.touched_ids.clear();
     }

render-wasm/src/render/fills.rs

@@ -2,7 +2,7 @@ use skia_safe::{self as skia, Paint, RRect};
 
 use super::{filters, RenderState, SurfaceId};
 use crate::render::get_source_rect;
-use crate::shapes::{Fill, Frame, ImageFill, Rect, Shape, Type};
+use crate::shapes::{merge_fills, Fill, Frame, ImageFill, Rect, Shape, Type};
 
 fn draw_image_fill(
     render_state: &mut RenderState,
@@ -92,6 +92,76 @@ fn draw_image_fill(
  * This SHOULD be the only public function in this module.
  */
 pub fn render(
+    render_state: &mut RenderState,
+    shape: &Shape,
+    fills: &[Fill],
+    antialias: bool,
+    surface_id: SurfaceId,
+) {
+    if fills.is_empty() {
+        return;
+    }
+
+    // Image fills use draw_image_fill which needs render_state for GPU images
+    // and sampling options that get_fill_shader (used by merge_fills) lacks.
+    let has_image_fills = fills.iter().any(|f| matches!(f, Fill::Image(_)));
+    if has_image_fills {
+        for fill in fills.iter().rev() {
+            render_single_fill(render_state, shape, fill, antialias, surface_id);
+        }
+        return;
+    }
+
+    let mut paint = merge_fills(fills, shape.selrect);
+    paint.set_anti_alias(antialias);
+
+    if let Some(image_filter) = shape.image_filter(1.) {
+        let bounds = image_filter.compute_fast_bounds(shape.selrect);
+        if filters::render_with_filter_surface(
+            render_state,
+            bounds,
+            surface_id,
+            |state, temp_surface| {
+                let mut filtered_paint = paint.clone();
+                filtered_paint.set_image_filter(image_filter.clone());
+                draw_fill_to_surface(state, shape, temp_surface, &filtered_paint);
+            },
+        ) {
+            return;
+        } else {
+            paint.set_image_filter(image_filter);
+        }
+    }
+
+    draw_fill_to_surface(render_state, shape, surface_id, &paint);
+}
+
+/// Draws a single paint (with a merged shader) to the appropriate surface
+/// based on the shape type.
+fn draw_fill_to_surface(
+    render_state: &mut RenderState,
+    shape: &Shape,
+    surface_id: SurfaceId,
+    paint: &Paint,
+) {
+    match &shape.shape_type {
+        Type::Rect(_) | Type::Frame(_) => {
+            render_state.surfaces.draw_rect_to(surface_id, shape, paint);
+        }
+        Type::Circle => {
+            render_state
+                .surfaces
+                .draw_circle_to(surface_id, shape, paint);
+        }
+        Type::Path(_) | Type::Bool(_) => {
+            render_state.surfaces.draw_path_to(surface_id, shape, paint);
+        }
+        Type::Group(_) => {}
+        _ => unreachable!("This shape should not have fills"),
+    }
+}
+
+fn render_single_fill(
     render_state: &mut RenderState,
     shape: &Shape,
     fill: &Fill,
@@ -108,7 +178,14 @@ pub fn render(
             |state, temp_surface| {
                 let mut filtered_paint = paint.clone();
                 filtered_paint.set_image_filter(image_filter.clone());
-                draw_fill_to_surface(state, shape, fill, antialias, temp_surface, &filtered_paint);
+                draw_single_fill_to_surface(
+                    state,
+                    shape,
+                    fill,
+                    antialias,
+                    temp_surface,
+                    &filtered_paint,
+                );
             },
         ) {
             return;
@@ -117,10 +194,10 @@ pub fn render(
         }
     }
 
-    draw_fill_to_surface(render_state, shape, fill, antialias, surface_id, &paint);
+    draw_single_fill_to_surface(render_state, shape, fill, antialias, surface_id, &paint);
 }
 
-fn draw_fill_to_surface(
+fn draw_single_fill_to_surface(
     render_state: &mut RenderState,
     shape: &Shape,
     fill: &Fill,
@@ -153,8 +230,6 @@ fn draw_fill_to_surface(
         (_, Type::Group(_)) => {
             // Groups can have fills but they propagate them to their children
         }
-        (_, _) => {
-            unreachable!("This shape should not have fills")
-        }
+        _ => unreachable!("This shape should not have fills"),
     }
 }

render-wasm/src/render/shadows.rs

@@ -40,7 +40,7 @@ pub fn render_stroke_inner_shadows(
     if !shape.has_fills() {
         for shadow in shape.inner_shadows_visible() {
             let filter = shadow.get_inner_shadow_filter();
-            strokes::render(
+            strokes::render_single(
                 render_state,
                 shape,
                 stroke,

render-wasm/src/render/strokes.rs

@@ -1,7 +1,7 @@
 use crate::math::{Matrix, Point, Rect};
 
 use crate::shapes::{
-    Corners, Fill, ImageFill, Path, Shape, Stroke, StrokeCap, StrokeKind, SvgAttrs, Type,
+    merge_fills, Corners, Fill, ImageFill, Path, Shape, Stroke, StrokeCap, StrokeKind, Type,
 };
 use skia_safe::{self as skia, ImageFilter, RRect};
 
@@ -9,32 +9,28 @@ use super::{filters, RenderState, SurfaceId};
 use crate::render::filters::compose_filters;
 use crate::render::{get_dest_rect, get_source_rect};
 
-// FIXME: See if we can simplify these arguments
 #[allow(clippy::too_many_arguments)]
 fn draw_stroke_on_rect(
     canvas: &skia::Canvas,
     stroke: &Stroke,
     rect: &Rect,
-    selrect: &Rect,
     corners: &Option<Corners>,
-    svg_attrs: Option<&SvgAttrs>,
+    paint: &skia::Paint,
     scale: f32,
     shadow: Option<&ImageFilter>,
     blur: Option<&ImageFilter>,
     antialias: bool,
 ) {
-    // Draw the different kind of strokes for a rect is straightforward, we just need apply a stroke to:
-    // - The same rect if it's a center stroke
-    // - A bigger rect if it's an outer stroke
-    // - A smaller rect if it's an outer stroke
     let stroke_rect = stroke.aligned_rect(rect, scale);
-    let mut paint = stroke.to_paint(selrect, svg_attrs, antialias);
+    let mut paint = paint.clone();
 
     // Apply both blur and shadow filters if present, composing them if necessary.
     let filter = compose_filters(blur, shadow);
     paint.set_image_filter(filter);
 
-    match corners {
+    // By default just draw the rect. Only dotted inner/outer strokes need
+    // clipping to prevent the dotted pattern from appearing in wrong areas.
+    let draw_stroke = || match corners {
         Some(radii) => {
             let radii = stroke.outer_corners(radii);
             let rrect = RRect::new_rect_radii(stroke_rect, &radii);
@@ -43,34 +39,58 @@ fn draw_stroke_on_rect(
         None => {
             canvas.draw_rect(stroke_rect, &paint);
         }
+    };
+
+    if let Some(clip_op) = stroke.clip_op() {
+        let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint);
+        canvas.save_layer(&layer_rec);
+        match corners {
+            Some(radii) => {
+                let rrect = RRect::new_rect_radii(*rect, radii);
+                canvas.clip_rrect(rrect, clip_op, antialias);
+            }
+            None => {
+                canvas.clip_rect(*rect, clip_op, antialias);
+            }
+        }
+        draw_stroke();
+        canvas.restore();
+    } else {
+        draw_stroke();
     }
 }
 
-// FIXME: See if we can simplify these arguments
 #[allow(clippy::too_many_arguments)]
 fn draw_stroke_on_circle(
     canvas: &skia::Canvas,
     stroke: &Stroke,
     rect: &Rect,
-    selrect: &Rect,
-    svg_attrs: Option<&SvgAttrs>,
+    paint: &skia::Paint,
     scale: f32,
     shadow: Option<&ImageFilter>,
     blur: Option<&ImageFilter>,
     antialias: bool,
 ) {
-    // Draw the different kind of strokes for an oval is straightforward, we just need apply a stroke to:
-    // - The same oval if it's a center stroke
-    // - A bigger oval if it's an outer stroke
-    // - A smaller oval if it's an outer stroke
     let stroke_rect = stroke.aligned_rect(rect, scale);
-    let mut paint = stroke.to_paint(selrect, svg_attrs, antialias);
+    let mut paint = paint.clone();
 
     // Apply both blur and shadow filters if present, composing them if necessary.
     let filter = compose_filters(blur, shadow);
     paint.set_image_filter(filter);
 
-    canvas.draw_oval(stroke_rect, &paint);
+    // By default just draw the circle. Only dotted inner/outer strokes need
+    // clipping to prevent the dotted pattern from appearing in wrong areas.
+    if let Some(clip_op) = stroke.clip_op() {
+        let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint);
+        canvas.save_layer(&layer_rec);
+        let mut clip_path = skia::Path::new();
+        clip_path.add_oval(rect, None);
+        canvas.clip_path(&clip_path, clip_op, antialias);
+        canvas.draw_oval(stroke_rect, &paint);
+        canvas.restore();
+    } else {
+        canvas.draw_oval(stroke_rect, &paint);
+    }
 }
 
 fn draw_outer_stroke_path(
@@ -122,15 +142,13 @@ fn draw_inner_stroke_path(
 }
 
 // For outer stroke we draw a center stroke (with double width) and use another path with blend mode clear to remove the inner stroke added
-// FIXME: See if we can simplify these arguments
 #[allow(clippy::too_many_arguments)]
-pub fn draw_stroke_on_path(
+fn draw_stroke_on_path(
     canvas: &skia::Canvas,
     stroke: &Stroke,
     path: &Path,
-    selrect: &Rect,
+    paint: &skia::Paint,
     path_transform: Option<&Matrix>,
-    svg_attrs: Option<&SvgAttrs>,
     shadow: Option<&ImageFilter>,
     blur: Option<&ImageFilter>,
     antialias: bool,
@@ -140,31 +158,28 @@ pub fn draw_stroke_on_path(
 
     let is_open = path.is_open();
 
-    let mut paint: skia_safe::Handle<_> =
-        stroke.to_stroked_paint(is_open, selrect, svg_attrs, antialias);
-
+    let mut draw_paint = paint.clone();
     let filter = compose_filters(blur, shadow);
-    paint.set_image_filter(filter);
+    draw_paint.set_image_filter(filter);
 
     match stroke.render_kind(is_open) {
         StrokeKind::Inner => {
-            draw_inner_stroke_path(canvas, &skia_path, &paint, blur, antialias);
+            draw_inner_stroke_path(canvas, &skia_path, &draw_paint, blur, antialias);
         }
         StrokeKind::Center => {
-            canvas.draw_path(&skia_path, &paint);
+            canvas.draw_path(&skia_path, &draw_paint);
         }
         StrokeKind::Outer => {
-            draw_outer_stroke_path(canvas, &skia_path, &paint, blur, antialias);
+            draw_outer_stroke_path(canvas, &skia_path, &draw_paint, blur, antialias);
         }
     }
 
     handle_stroke_caps(
         &mut skia_path,
         stroke,
-        selrect,
         canvas,
         is_open,
-        svg_attrs,
+        paint,
         blur,
         antialias,
     );
@@ -207,17 +222,15 @@ fn handle_stroke_cap(
     }
 }
 
-// FIXME: See if we can simplify these arguments
 #[allow(clippy::too_many_arguments)]
 fn handle_stroke_caps(
     path: &mut skia::Path,
     stroke: &Stroke,
-    selrect: &Rect,
     canvas: &skia::Canvas,
     is_open: bool,
-    svg_attrs: Option<&SvgAttrs>,
+    paint: &skia::Paint,
     blur: Option<&ImageFilter>,
-    antialias: bool,
+    _antialias: bool,
 ) {
     let mut points = vec![Point::default(); path.count_points()];
     path.get_points(&mut points);
@@ -230,7 +243,7 @@ fn handle_stroke_caps(
         let first_point = points.first().unwrap();
         let last_point = points.last().unwrap();
 
-        let mut paint_stroke = stroke.to_stroked_paint(is_open, selrect, svg_attrs, antialias);
+        let mut paint_stroke = paint.clone();
 
         if let Some(filter) = blur {
             paint_stroke.set_image_filter(filter.clone());
@@ -405,30 +418,25 @@ fn draw_image_stroke_in_container(
 
     match &shape.shape_type {
         shape_type @ (Type::Rect(_) | Type::Frame(_)) => {
+            let paint = stroke.to_paint(&outer_rect, svg_attrs, antialias);
             draw_stroke_on_rect(
                 canvas,
                 stroke,
                 container,
-                &outer_rect,
                 &shape_type.corners(),
-                svg_attrs,
+                &paint,
                 scale,
                 None,
                 None,
                 antialias,
             );
         }
-        Type::Circle => draw_stroke_on_circle(
-            canvas,
-            stroke,
-            container,
-            &outer_rect,
-            svg_attrs,
-            scale,
-            None,
-            None,
-            antialias,
-        ),
+        Type::Circle => {
+            let paint = stroke.to_paint(&outer_rect, svg_attrs, antialias);
+            draw_stroke_on_circle(
+                canvas, stroke, container, &paint, scale, None, None, antialias,
+            );
+        }
 
         shape_type @ (Type::Path(_) | Type::Bool(_)) => {
             if let Some(p) = shape_type.path() {
@@ -446,21 +454,21 @@ fn draw_image_stroke_in_container(
                     }
                 }
                 let is_open = p.is_open();
-                let mut paint = stroke.to_stroked_paint(is_open, &outer_rect, svg_attrs, antialias);
+                let paint = stroke.to_stroked_paint(is_open, &outer_rect, svg_attrs, antialias);
                 canvas.draw_path(&path, &paint);
                 if stroke.render_kind(is_open) == StrokeKind::Outer {
                     // Small extra inner stroke to overlap with the fill
                     // and avoid unnecesary artifacts.
-                    paint.set_stroke_width(1. / scale);
-                    canvas.draw_path(&path, &paint);
+                    let mut thin_paint = paint.clone();
+                    thin_paint.set_stroke_width(1. / scale);
+                    canvas.draw_path(&path, &thin_paint);
                 }
                 handle_stroke_caps(
                     &mut path,
                     stroke,
-                    &outer_rect,
                     canvas,
                     is_open,
-                    svg_attrs,
+                    &paint,
                     shape.image_filter(1.).as_ref(),
                     antialias,
                 );
@@ -509,8 +517,230 @@ fn draw_image_stroke_in_container(
     canvas.restore();
 }
 
-#[allow(clippy::too_many_arguments)]
+/// Renders all strokes for a shape. Merges strokes that share the same
+/// geometry (kind, width, style, caps) into a single draw call to avoid
+/// anti-aliasing edge bleed between them.
 pub fn render(
+    render_state: &mut RenderState,
+    shape: &Shape,
+    strokes: &[&Stroke],
+    surface_id: Option<SurfaceId>,
+    antialias: bool,
+) {
+    if strokes.is_empty() {
+        return;
+    }
+
+    let has_image_fills = strokes.iter().any(|s| matches!(s.fill, Fill::Image(_)));
+    let can_merge = !has_image_fills && strokes.len() > 1 && strokes_share_geometry(strokes);
+
+    if !can_merge {
+        // When blur is active, render all strokes into a single offscreen surface
+        // and apply blur once to the composite. This prevents blur from making
+        // edges semi-transparent and revealing strokes underneath.
+        if let Some(image_filter) = shape.image_filter(1.) {
+            let mut content_bounds = shape.selrect;
+            let max_margin = strokes
+                .iter()
+                .map(|s| s.bounds_width(shape.is_open()))
+                .fold(0.0f32, f32::max);
+            if max_margin > 0.0 {
+                content_bounds.inset((-max_margin, -max_margin));
+            }
+            let max_cap = strokes
+                .iter()
+                .map(|s| s.cap_bounds_margin())
+                .fold(0.0f32, f32::max);
+            if max_cap > 0.0 {
+                content_bounds.inset((-max_cap, -max_cap));
+            }
+            let bounds = image_filter.compute_fast_bounds(content_bounds);
+            let target = surface_id.unwrap_or(SurfaceId::Strokes);
+            if filters::render_with_filter_surface(
+                render_state,
+                bounds,
+                target,
+                |state, temp_surface| {
+                    // Use save_layer with the blur filter so it applies once
+                    // to the composite of all strokes, not per-stroke.
+                    let canvas = state.surfaces.canvas(temp_surface);
+                    let mut blur_paint = skia::Paint::default();
+                    blur_paint.set_image_filter(image_filter.clone());
+                    let layer_rec = skia::canvas::SaveLayerRec::default().paint(&blur_paint);
+                    canvas.save_layer(&layer_rec);
+
+                    for stroke in strokes.iter().rev() {
+                        // bypass_filter=true prevents each stroke from creating
+                        // its own filter surface. The blur on the paint inside
+                        // draw functions is harmless — it composes with the
+                        // layer's filter but the layer filter is the dominant one.
+                        render_single_internal(
+                            state,
+                            shape,
+                            stroke,
+                            Some(temp_surface),
+                            None,
+                            antialias,
+                            true,
+                            true,
+                        );
+                    }
+
+                    state.surfaces.canvas(temp_surface).restore();
+                },
+            ) {
+                return;
+            }
+        }
+
+        // No blur or filter surface unavailable — draw strokes individually.
+        for stroke in strokes.iter().rev() {
+            render_single(render_state, shape, stroke, surface_id, None, antialias);
+        }
+        return;
+    }
+
+    render_merged(render_state, shape, strokes, surface_id, antialias, false);
+}
+
+fn strokes_share_geometry(strokes: &[&Stroke]) -> bool {
+    strokes.windows(2).all(|pair| {
+        pair[0].kind == pair[1].kind
+            && pair[0].width == pair[1].width
+            && pair[0].style == pair[1].style
+            && pair[0].cap_start == pair[1].cap_start
+            && pair[0].cap_end == pair[1].cap_end
+    })
+}
+
+fn render_merged(
+    render_state: &mut RenderState,
+    shape: &Shape,
+    strokes: &[&Stroke],
+    surface_id: Option<SurfaceId>,
+    antialias: bool,
+    bypass_filter: bool,
+) {
+    let representative = *strokes
+        .last()
+        .expect("render_merged expects at least one stroke");
+
+    let blur_filter = if bypass_filter {
+        None
+    } else {
+        shape.image_filter(1.)
+    };
+
+    // Handle blur filter
+    if !bypass_filter {
+        if let Some(image_filter) = blur_filter.clone() {
+            let mut content_bounds = shape.selrect;
+            let stroke_margin = representative.bounds_width(shape.is_open());
+            if stroke_margin > 0.0 {
+                content_bounds.inset((-stroke_margin, -stroke_margin));
+            }
+            let cap_margin = representative.cap_bounds_margin();
+            if cap_margin > 0.0 {
+                content_bounds.inset((-cap_margin, -cap_margin));
+            }
+            let bounds = image_filter.compute_fast_bounds(content_bounds);
+            let target = surface_id.unwrap_or(SurfaceId::Strokes);
+            if filters::render_with_filter_surface(
+                render_state,
+                bounds,
+                target,
+                |state, temp_surface| {
+                    let blur_filter = image_filter.clone();
+
+                    state.surfaces.apply_mut(temp_surface as u32, |surface| {
+                        let canvas = surface.canvas();
+                        let mut blur_paint = skia::Paint::default();
+                        blur_paint.set_image_filter(blur_filter.clone());
+                        let layer_rec = skia::canvas::SaveLayerRec::default().paint(&blur_paint);
+                        canvas.save_layer(&layer_rec);
+                    });
+
+                    render_merged(state, shape, strokes, Some(temp_surface), antialias, true);
+
+                    state.surfaces.apply_mut(temp_surface as u32, |surface| {
+                        surface.canvas().restore();
+                    });
+                },
+            ) {
+                return;
+            }
+        }
+    }
+
+    // `merge_fills` puts fills[0] on top (each new fill goes under the accumulated shader
+    // via SrcOver), matching the non-merged path where strokes[0] is drawn last (on top).
+    let fills: Vec<Fill> = strokes.iter().map(|s| s.fill.clone()).collect();
+
+    let merged = merge_fills(&fills, shape.selrect);
+    let scale = render_state.get_scale();
+    let target_surface = surface_id.unwrap_or(SurfaceId::Strokes);
+    let canvas = render_state.surfaces.canvas_and_mark_dirty(target_surface);
+    let selrect = shape.selrect;
+    let svg_attrs = shape.svg_attrs.as_ref();
+    let path_transform = shape.to_path_transform();
+
+    match &shape.shape_type {
+        shape_type @ (Type::Rect(_) | Type::Frame(_)) => {
+            let mut paint = representative.to_paint(&selrect, svg_attrs, antialias);
+            paint.set_shader(merged.shader());
+            draw_stroke_on_rect(
+                canvas,
+                representative,
+                &selrect,
+                &shape_type.corners(),
+                &paint,
+                scale,
+                None,
+                blur_filter.as_ref(),
+                antialias,
+            );
+        }
+        Type::Circle => {
+            let mut paint = representative.to_paint(&selrect, svg_attrs, antialias);
+            paint.set_shader(merged.shader());
+            draw_stroke_on_circle(
+                canvas,
+                representative,
+                &selrect,
+                &paint,
+                scale,
+                None,
+                blur_filter.as_ref(),
+                antialias,
+            );
+        }
+        Type::Text(_) => {}
+        shape_type @ (Type::Path(_) | Type::Bool(_)) => {
+            if let Some(path) = shape_type.path() {
+                let is_open = path.is_open();
+                let mut paint =
+                    representative.to_stroked_paint(is_open, &selrect, svg_attrs, antialias);
+                paint.set_shader(merged.shader());
+                draw_stroke_on_path(
+                    canvas,
+                    representative,
+                    path,
+                    &paint,
+                    path_transform.as_ref(),
+                    None,
+                    blur_filter.as_ref(),
+                    antialias,
+                );
+            }
+        }
+        _ => unreachable!("This shape should not have strokes"),
+    }
+}
+
+/// Renders a single stroke. Used by the shadow module which needs per-stroke
+/// shadow filters.
+#[allow(clippy::too_many_arguments)]
+pub fn render_single(
     render_state: &mut RenderState,
     shape: &Shape,
     stroke: &Stroke,
@@ -518,7 +748,7 @@ pub fn render(
     shadow: Option<&ImageFilter>,
     antialias: bool,
 ) {
-    render_internal(
+    render_single_internal(
         render_state,
         shape,
         stroke,
@@ -526,34 +756,12 @@ pub fn render(
         shadow,
         antialias,
         false,
+        false,
     );
 }
 
-/// Internal function to render a stroke with support for offscreen blur rendering.
-///
-/// # Parameters
-/// - `render_state`: The rendering state containing surfaces and context.
-/// - `shape`: The shape to render the stroke for.
-/// - `stroke`: The stroke configuration (width, fill, style, etc.).
-/// - `surface_id`: Optional target surface ID. Defaults to `SurfaceId::Strokes` if `None`.
-/// - `shadow`: Optional shadow filter to apply to the stroke.
-/// - `antialias`: Whether to use antialiasing for rendering.
-/// - `bypass_filter`:
-///   - If `false`, attempts to use offscreen filter surface for blur effects.
-///   - If `true`, renders directly to the target surface (used for recursive calls to avoid infinite loops when rendering into the filter surface).
-///
-/// # Behavior
-/// When `bypass_filter` is `false` and the shape has a blur filter:
-/// 1. Calculates bounds including stroke width and cap margins.
-/// 2. Attempts to render into an offscreen filter surface at unscaled coordinates.
-/// 3. If successful, composites the result back to the target surface and returns early.
-/// 4. If the offscreen render fails or `bypass_filter` is `true`, renders directly to the target
-///    surface using the appropriate drawing function for the shape type.
-///
-/// The recursive call with `bypass_filter=true` ensures that when rendering into the filter
-/// surface, we don't attempt to create another filter surface, avoiding infinite recursion.
 #[allow(clippy::too_many_arguments)]
-fn render_internal(
+fn render_single_internal(
     render_state: &mut RenderState,
     shape: &Shape,
     stroke: &Stroke,
@@ -561,10 +769,10 @@ fn render_internal(
     shadow: Option<&ImageFilter>,
     antialias: bool,
     bypass_filter: bool,
+    skip_blur: bool,
 ) {
     if !bypass_filter {
         if let Some(image_filter) = shape.image_filter(1.) {
-            // We have to calculate the bounds considering the stroke and the cap margins.
             let mut content_bounds = shape.selrect;
             let stroke_margin = stroke.bounds_width(shape.is_open());
             if stroke_margin > 0.0 {
@@ -582,7 +790,7 @@ fn render_internal(
                 bounds,
                 target,
                 |state, temp_surface| {
-                    render_internal(
+                    render_single_internal(
                         state,
                         shape,
                         stroke,
@@ -590,6 +798,7 @@ fn render_internal(
                         shadow,
                         antialias,
                         true,
+                        true,
                     );
                 },
             ) {
@@ -605,6 +814,12 @@ fn render_internal(
     let path_transform = shape.to_path_transform();
     let svg_attrs = shape.svg_attrs.as_ref();
 
+    let blur = if skip_blur {
+        None
+    } else {
+        shape.image_filter(1.)
+    };
+
     if !matches!(shape.shape_type, Type::Text(_))
         && shadow.is_none()
         && matches!(stroke.fill, Fill::Image(_))
@@ -622,42 +837,45 @@ fn render_internal(
     } else {
         match &shape.shape_type {
             shape_type @ (Type::Rect(_) | Type::Frame(_)) => {
+                let paint = stroke.to_paint(&selrect, svg_attrs, antialias);
                 draw_stroke_on_rect(
                     canvas,
                     stroke,
                     &selrect,
-                    &selrect,
                     &shape_type.corners(),
-                    svg_attrs,
+                    &paint,
                     scale,
                     shadow,
-                    shape.image_filter(1.).as_ref(),
+                    blur.as_ref(),
+                    antialias,
+                );
+            }
+            Type::Circle => {
+                let paint = stroke.to_paint(&selrect, svg_attrs, antialias);
+                draw_stroke_on_circle(
+                    canvas,
+                    stroke,
+                    &selrect,
+                    &paint,
+                    scale,
+                    shadow,
+                    blur.as_ref(),
                     antialias,
                 );
             }
-            Type::Circle => draw_stroke_on_circle(
-                canvas,
-                stroke,
-                &selrect,
-                &selrect,
-                svg_attrs,
-                scale,
-                shadow,
-                shape.image_filter(1.).as_ref(),
-                antialias,
-            ),
             Type::Text(_) => {}
             shape_type @ (Type::Path(_) | Type::Bool(_)) => {
                 if let Some(path) = shape_type.path() {
+                    let is_open = path.is_open();
+                    let paint = stroke.to_stroked_paint(is_open, &selrect, svg_attrs, antialias);
                     draw_stroke_on_path(
                         canvas,
                         stroke,
                         path,
-                        &selrect,
+                        &paint,
                         path_transform.as_ref(),
-                        svg_attrs,
                         shadow,
-                        shape.image_filter(1.).as_ref(),
+                        blur.as_ref(),
                         antialias,
                     );
                 }

render-wasm/src/render/text_editor.rs

@@ -0,0 +1,240 @@
+use crate::shapes::{Shape, TextContent, Type, VerticalAlign};
+use crate::state::{TextEditorState, TextSelection};
+use skia_safe::textlayout::{RectHeightStyle, RectWidthStyle};
+use skia_safe::{BlendMode, Canvas, Matrix, Paint, Rect};
+
+pub fn render_overlay(
+    canvas: &Canvas,
+    editor_state: &TextEditorState,
+    shape: &Shape,
+    transform: &Matrix,
+) {
+    if !editor_state.is_active {
+        return;
+    }
+
+    let Type::Text(text_content) = &shape.shape_type else {
+        return;
+    };
+
+    canvas.save();
+    canvas.concat(transform);
+
+    if editor_state.selection.is_selection() {
+        render_selection(canvas, editor_state, text_content, shape);
+    }
+
+    if editor_state.cursor_visible {
+        render_cursor(canvas, editor_state, text_content, shape);
+    }
+
+    canvas.restore();
+}
+
+fn render_cursor(
+    canvas: &Canvas,
+    editor_state: &TextEditorState,
+    text_content: &TextContent,
+    shape: &Shape,
+) {
+    let Some(rect) = calculate_cursor_rect(editor_state, text_content, shape) else {
+        return;
+    };
+
+    let mut paint = Paint::default();
+    paint.set_color(editor_state.theme.cursor_color);
+    paint.set_anti_alias(true);
+
+    canvas.draw_rect(rect, &paint);
+}
+
+fn render_selection(
+    canvas: &Canvas,
+    editor_state: &TextEditorState,
+    text_content: &TextContent,
+    shape: &Shape,
+) {
+    let selection = &editor_state.selection;
+    let rects = calculate_selection_rects(selection, text_content, shape);
+
+    if rects.is_empty() {
+        return;
+    }
+
+    let mut paint = Paint::default();
+    paint.set_blend_mode(BlendMode::Multiply);
+    paint.set_color(editor_state.theme.selection_color);
+    paint.set_anti_alias(true);
+    for rect in rects {
+        canvas.draw_rect(rect, &paint);
+    }
+}
+
+fn vertical_align_offset(
+    shape: &Shape,
+    layout_paragraphs: &[&skia_safe::textlayout::Paragraph],
+) -> f32 {
+    let total_height: f32 = layout_paragraphs.iter().map(|p| p.height()).sum();
+    match shape.vertical_align() {
+        VerticalAlign::Center => (shape.selrect().height() - total_height) / 2.0,
+        VerticalAlign::Bottom => shape.selrect().height() - total_height,
+        _ => 0.0,
+    }
+}
+
+fn calculate_cursor_rect(
+    editor_state: &TextEditorState,
+    text_content: &TextContent,
+    shape: &Shape,
+) -> Option<Rect> {
+    let cursor = editor_state.selection.focus;
+    let paragraphs = text_content.paragraphs();
+    if cursor.paragraph >= paragraphs.len() {
+        return None;
+    }
+
+    let layout_paragraphs: Vec<_> = text_content.layout.paragraphs.iter().flatten().collect();
+
+    if cursor.paragraph >= layout_paragraphs.len() {
+        return None;
+    }
+
+    let selrect = shape.selrect();
+
+    let mut y_offset = vertical_align_offset(shape, &layout_paragraphs);
+    for (idx, laid_out_para) in layout_paragraphs.iter().enumerate() {
+        if idx == cursor.paragraph {
+            let char_pos = cursor.char_offset;
+            // For cursor, we get a zero-width range at the position
+            // We need to handle edge cases:
+            // - At start of paragraph: use position 0
+            // - At end of paragraph: use last position
+            let para = &paragraphs[cursor.paragraph];
+            let para_char_count: usize = para
+                .children()
+                .iter()
+                .map(|span| span.text.chars().count())
+                .sum();
+
+            let (cursor_x, cursor_height) = if para_char_count == 0 {
+                // Empty paragraph - use default height
+                (0.0, laid_out_para.height())
+            } else if char_pos == 0 {
+                let rects = laid_out_para.get_rects_for_range(
+                    0..1,
+                    RectHeightStyle::Max,
+                    RectWidthStyle::Tight,
+                );
+                if !rects.is_empty() {
+                    (rects[0].rect.left(), rects[0].rect.height())
+                } else {
+                    (0.0, laid_out_para.height())
+                }
+            } else if char_pos >= para_char_count {
+                let rects = laid_out_para.get_rects_for_range(
+                    para_char_count.saturating_sub(1)..para_char_count,
+                    RectHeightStyle::Max,
+                    RectWidthStyle::Tight,
+                );
+                if !rects.is_empty() {
+                    (rects[0].rect.right(), rects[0].rect.height())
+                } else {
+                    (laid_out_para.longest_line(), laid_out_para.height())
+                }
+            } else {
+                let rects = laid_out_para.get_rects_for_range(
+                    char_pos..char_pos + 1,
+                    RectHeightStyle::Max,
+                    RectWidthStyle::Tight,
+                );
+                if !rects.is_empty() {
+                    (rects[0].rect.left(), rects[0].rect.height())
+                } else {
+                    // Fallback: use glyph position
+                    let pos = laid_out_para.get_glyph_position_at_coordinate((0.0, 0.0));
+                    (pos.position as f32, laid_out_para.height())
+                }
+            };
+
+            return Some(Rect::from_xywh(
+                selrect.x() + cursor_x,
+                selrect.y() + y_offset,
+                editor_state.theme.cursor_width,
+                cursor_height,
+            ));
+        }
+        y_offset += laid_out_para.height();
+    }
+
+    None
+}
+
+fn calculate_selection_rects(
+    selection: &TextSelection,
+    text_content: &TextContent,
+    shape: &Shape,
+) -> Vec<Rect> {
+    let mut rects = Vec::new();
+
+    let start = selection.start();
+    let end = selection.end();
+
+    let paragraphs = text_content.paragraphs();
+    let layout_paragraphs: Vec<_> = text_content.layout.paragraphs.iter().flatten().collect();
+
+    let selrect = shape.selrect();
+    let mut y_offset = vertical_align_offset(shape, &layout_paragraphs);
+
+    for (para_idx, laid_out_para) in layout_paragraphs.iter().enumerate() {
+        let para_height = laid_out_para.height();
+
+        // Check if this paragraph is in selection range
+        if para_idx < start.paragraph || para_idx > end.paragraph {
+            y_offset += para_height;
+            continue;
+        }
+
+        // Calculate character range for this paragraph
+        let para = &paragraphs[para_idx];
+        let para_char_count: usize = para
+            .children()
+            .iter()
+            .map(|span| span.text.chars().count())
+            .sum();
+
+        let range_start = if para_idx == start.paragraph {
+            start.char_offset
+        } else {
+            0
+        };
+
+        let range_end = if para_idx == end.paragraph {
+            end.char_offset
+        } else {
+            para_char_count
+        };
+
+        if range_start < range_end {
+            use skia_safe::textlayout::{RectHeightStyle, RectWidthStyle};
+            let text_boxes = laid_out_para.get_rects_for_range(
+                range_start..range_end,
+                RectHeightStyle::Max,
+                RectWidthStyle::Tight,
+            );
+
+            for text_box in text_boxes {
+                let r = text_box.rect;
+                rects.push(Rect::from_xywh(
+                    selrect.x() + r.left(),
+                    selrect.y() + y_offset + r.top(),
+                    r.width(),
+                    r.height(),
+                ));
+            }
+        }
+
+        y_offset += para_height;
+    }
+
+    rects
+}

render-wasm/src/shapes.rs

@@ -620,6 +620,7 @@ impl Shape {
         (added, removed)
     }
 
+    #[allow(dead_code)]
     pub fn fills(&self) -> std::slice::Iter<'_, Fill> {
         self.fills.iter()
     }
@@ -1119,6 +1120,28 @@ impl Shape {
         }
     }
 
+    /// Returns children in forward (non-reversed) order - useful for layout calculations
+    pub fn children_ids_iter_forward(
+        &self,
+        include_hidden: bool,
+    ) -> Box<dyn Iterator<Item = &Uuid> + '_> {
+        if include_hidden {
+            return Box::new(self.children.iter());
+        }
+
+        if let Type::Bool(_) = self.shape_type {
+            Box::new([].iter())
+        } else if let Type::Group(group) = self.shape_type {
+            if group.masked {
+                Box::new(self.children.iter().skip(1))
+            } else {
+                Box::new(self.children.iter())
+            }
+        } else {
+            Box::new(self.children.iter())
+        }
+    }
+
     pub fn all_children(
         &self,
         shapes: ShapesPoolRef,

render-wasm/src/shapes/fills.rs

@@ -241,10 +241,14 @@ pub fn merge_fills(fills: &[Fill], bounding_box: Rect) -> skia::Paint {
 
         if let Some(shader) = shader {
             combined_shader = match combined_shader {
+                // Use SrcOver and treat the newly encountered fill as the source (top),
+                // overlaying it over the previously composed shader (destination/bottom).
+                // This avoids edge bleed from underlying fills when anti-aliasing causes
+                // fractional coverage at shape boundaries.
                 Some(existing_shader) => Some(skia::shaders::blend(
-                    skia::Blender::mode(skia::BlendMode::DstOver),
-                    existing_shader,
+                    skia::Blender::mode(skia::BlendMode::SrcOver),
                     shader,
+                    existing_shader,
                 )),
                 None => Some(shader),
             };

render-wasm/src/shapes/modifiers.rs

@@ -300,7 +300,20 @@ fn propagate_reflow(
         Type::Frame(Frame {
             layout: Some(_), ..
         }) => {
-            layout_reflows.insert(*id);
+            let mut skip_reflow = false;
+            if shape.is_layout_horizontal_fill() || shape.is_layout_vertical_fill() {
+                if let Some(parent_id) = shape.parent_id {
+                    if parent_id != Uuid::nil() && !reflown.contains(&parent_id) {
+                        // If this is a fill layout but the parent has not been reflown yet
+                        // we wait for the next iteration for reflow
+                        skip_reflow = true;
+                    }
+                }
+            }
+
+            if !skip_reflow {
+                layout_reflows.insert(*id);
+            }
         }
         Type::Group(Group { masked: true }) => {
             let children_ids = shape.children_ids(true);
@@ -417,28 +430,26 @@ pub fn propagate_modifiers(
                 }
             }
         }
-
-        let mut layout_reflows_vec: Vec<Uuid> = layout_reflows.into_iter().collect();
-
-        // We sort the reflows so they are process first the ones that are more
-        // deep in the tree structure. This way we can be sure that the children layouts
-        // are already reflowed.
+        // We sort the reflows so they are processed deepest-first in the
+        // tree structure. This way we can be sure that the children layouts
+        // are already reflowed before their parents.
+        let mut layout_reflows_vec: Vec<Uuid> =
+            std::mem::take(&mut layout_reflows).into_iter().collect();
         layout_reflows_vec.sort_unstable_by(|id_a, id_b| {
             let da = shapes.get_depth(id_a);
             let db = shapes.get_depth(id_b);
             db.cmp(&da)
         });
 
-        let mut bounds_temp = bounds.clone();
-        for id in layout_reflows_vec.iter() {
+        for id in &layout_reflows_vec {
             if reflown.contains(id) {
                 continue;
             }
-            reflow_shape(id, state, &mut reflown, &mut entries, &mut bounds_temp);
+            reflow_shape(id, state, &mut reflown, &mut entries, &mut bounds);
         }
-        layout_reflows = HashSet::new();
     }
 
+    #[allow(dead_code)]
     modifiers
         .iter()
         .map(|(key, val)| TransformEntry::from_input(*key, *val))

render-wasm/src/shapes/modifiers/flex_layout.rs

@@ -184,15 +184,18 @@ fn initialize_tracks(
 ) -> Vec<TrackData> {
     let mut tracks = Vec::<TrackData>::new();
     let mut current_track = TrackData::default();
-    let mut children = shape.children_ids(true);
     let mut first = true;
 
-    if flex_data.is_reverse() {
-        children.reverse();
-    }
+    // When is_reverse() is true, we need forward order (children_ids_iter_forward).
+    // When is_reverse() is false, we need reversed order (children_ids_iter).
+    let children_iter: Box<dyn Iterator<Item = Uuid>> = if flex_data.is_reverse() {
+        Box::new(shape.children_ids_iter_forward(true).copied())
+    } else {
+        Box::new(shape.children_ids_iter(true).copied())
+    };
 
-    for child_id in children.iter() {
-        let Some(child) = shapes.get(child_id) else {
+    for child_id in children_iter {
+        let Some(child) = shapes.get(&child_id) else {
             continue;
         };
 
@@ -293,7 +296,7 @@ fn distribute_fill_main_space(layout_axis: &LayoutAxis, tracks: &mut [TrackData]
                 track.main_size += delta;
 
                 if (child.main_size - child.max_main_size).abs() < MIN_SIZE {
-                    to_resize_children.remove(i);
+                    to_resize_children.swap_remove(i);
                 }
             }
         }
@@ -330,7 +333,7 @@ fn distribute_fill_across_space(layout_axis: &LayoutAxis, tracks: &mut [TrackDat
             left_space -= delta;
 
             if (track.across_size - track.max_across_size).abs() < MIN_SIZE {
-                to_resize_tracks.remove(i);
+                to_resize_tracks.swap_remove(i);
             }
         }
     }

render-wasm/src/shapes/modifiers/grid_layout.rs

@@ -6,7 +6,7 @@ use crate::shapes::{
 };
 use crate::state::ShapesPoolRef;
 use crate::uuid::Uuid;
-use std::collections::{HashMap, VecDeque};
+use std::collections::{HashMap, HashSet, VecDeque};
 
 use super::common::GetBounds;
 
@@ -537,7 +537,7 @@ fn cell_bounds(
 
 pub fn create_cell_data<'a>(
     layout_bounds: &Bounds,
-    children: &[Uuid],
+    children: &HashSet<Uuid>,
     shapes: ShapesPoolRef<'a>,
     cells: &Vec<GridCell>,
     column_tracks: &[TrackData],
@@ -614,7 +614,7 @@ pub fn grid_cell_data<'a>(
 
     let bounds = &mut HashMap::<Uuid, Bounds>::new();
     let layout_bounds = shape.bounds();
-    let children = shape.children_ids(false);
+    let children: HashSet<Uuid> = shape.children_ids_iter(false).copied().collect();
 
     let column_tracks = calculate_tracks(
         true,
@@ -707,7 +707,7 @@ pub fn reflow_grid_layout(
 ) -> VecDeque<Modifier> {
     let mut result = VecDeque::new();
     let layout_bounds = bounds.find(shape);
-    let children = shape.children_ids(true);
+    let children: HashSet<Uuid> = shape.children_ids_iter(true).copied().collect();
 
     let column_tracks = calculate_tracks(
         true,

render-wasm/src/shapes/strokes.rs

@@ -119,6 +119,19 @@ impl Stroke {
         self.width *= value;
     }
 
+    /// Returns the clip operation for dotted inner/outer strokes.
+    /// Returns `None` when no clipping is needed (center or non-dotted).
+    pub fn clip_op(&self) -> Option<skia::ClipOp> {
+        if self.style != StrokeStyle::Dotted || self.kind == StrokeKind::Center {
+            return None;
+        }
+        match self.kind {
+            StrokeKind::Inner => Some(skia::ClipOp::Intersect),
+            StrokeKind::Outer => Some(skia::ClipOp::Difference),
+            StrokeKind::Center => None,
+        }
+    }
+
     pub fn delta(&self) -> f32 {
         match self.kind {
             StrokeKind::Inner => 0.,
@@ -128,20 +141,28 @@ impl Stroke {
     }
 
     pub fn outer_rect(&self, rect: &Rect) -> Rect {
-        match self.kind {
-            StrokeKind::Inner => Rect::from_xywh(
-                rect.left + (self.width / 2.),
-                rect.top + (self.width / 2.),
-                rect.width() - self.width,
-                rect.height() - self.width,
-            ),
-            StrokeKind::Center => Rect::from_xywh(rect.left, rect.top, rect.width(), rect.height()),
-            StrokeKind::Outer => Rect::from_xywh(
-                rect.left - (self.width / 2.),
-                rect.top - (self.width / 2.),
-                rect.width() + self.width,
-                rect.height() + self.width,
-            ),
+        match (self.kind, self.style) {
+            (StrokeKind::Inner, StrokeStyle::Dotted) | (StrokeKind::Outer, StrokeStyle::Dotted) => {
+                // Boundary so circles center on it and semicircles match after clipping
+                *rect
+            }
+            _ => match self.kind {
+                StrokeKind::Inner => Rect::from_xywh(
+                    rect.left + (self.width / 2.),
+                    rect.top + (self.width / 2.),
+                    rect.width() - self.width,
+                    rect.height() - self.width,
+                ),
+                StrokeKind::Center => {
+                    Rect::from_xywh(rect.left, rect.top, rect.width(), rect.height())
+                }
+                StrokeKind::Outer => Rect::from_xywh(
+                    rect.left - (self.width / 2.),
+                    rect.top - (self.width / 2.),
+                    rect.width() + self.width,
+                    rect.height() + self.width,
+                ),
+            },
         }
     }
 
@@ -155,6 +176,11 @@ impl Stroke {
     }
 
     pub fn outer_corners(&self, corners: &Corners) -> Corners {
+        if matches!(self.style, StrokeStyle::Dotted | StrokeStyle::Dashed) {
+            // Path at boundary so no corner offset
+            return *corners;
+        }
+
         let offset = match self.kind {
             StrokeKind::Center => 0.0,
             StrokeKind::Inner => -self.width / 2.0,

render-wasm/src/shapes/text.rs

@@ -116,6 +116,7 @@ impl TextContentSize {
 pub struct TextPositionWithAffinity {
     pub position_with_affinity: PositionWithAffinity,
     pub paragraph: i32,
+    #[allow(dead_code)]
     pub span: i32,
     pub offset: i32,
 }
@@ -316,6 +317,10 @@ impl TextContent {
         &self.paragraphs
     }
 
+    pub fn paragraphs_mut(&mut self) -> &mut Vec<Paragraph> {
+        &mut self.paragraphs
+    }
+
     pub fn width(&self) -> f32 {
         self.size.width
     }
@@ -428,8 +433,16 @@ impl TextContent {
             let end_y = offset_y + layout_paragraph.height();
 
             // We only test against paragraphs that can contain the current y
-            // coordinate.
-            if point.y > start_y && point.y < end_y {
+            // coordinate. Use >= for start and handle zero-height paragraphs.
+            let paragraph_height = layout_paragraph.height();
+            let matches = if paragraph_height > 0.0 {
+                point.y >= start_y && point.y < end_y
+            } else {
+                // For zero-height paragraphs (empty lines), match if we're at the start position
+                point.y >= start_y && point.y <= start_y + 1.0
+            };
+
+            if matches {
                 let position_with_affinity =
                     layout_paragraph.get_glyph_position_at_coordinate(*point);
                 if let Some(paragraph) = self.paragraphs().get(paragraph_index as usize) {
@@ -438,18 +451,37 @@ impl TextContent {
                     // in which span we are.
                     let mut computed_position = 0;
                     let mut span_offset = 0;
-                    for span in paragraph.children() {
-                        span_index += 1;
-                        let length = span.text.len();
-                        let start_position = computed_position;
-                        let end_position = computed_position + length;
-                        let current_position = position_with_affinity.position as usize;
-                        if start_position <= current_position && end_position >= current_position {
-                            span_offset = position_with_affinity.position - start_position as i32;
-                            break;
+
+                    // If paragraph has no spans, default to span 0, offset 0
+                    if paragraph.children().is_empty() {
+                        span_index = 0;
+                        span_offset = 0;
+                    } else {
+                        for span in paragraph.children() {
+                            span_index += 1;
+                            let length = span.text.chars().count();
+                            let start_position = computed_position;
+                            let end_position = computed_position + length;
+                            let current_position = position_with_affinity.position as usize;
+
+                            // Handle empty spans: if the span is empty and current position
+                            // matches the start, this is the right span
+                            if length == 0 && current_position == start_position {
+                                span_offset = 0;
+                                break;
+                            }
+
+                            if start_position <= current_position
+                                && end_position >= current_position
+                            {
+                                span_offset =
+                                    position_with_affinity.position - start_position as i32;
+                                break;
+                            }
+                            computed_position += length;
                         }
-                        computed_position += length;
                     }
+
                     return Some(TextPositionWithAffinity::new(
                         position_with_affinity,
                         paragraph_index,
@@ -460,6 +492,26 @@ impl TextContent {
             }
             offset_y += layout_paragraph.height();
         }
+
+        // Handle completely empty text shapes: if there are no paragraphs or all paragraphs
+        // are empty, and the click is within the text shape bounds, return a default position
+        if (self.paragraphs().is_empty() || self.layout.paragraphs.is_empty())
+            && self.bounds.contains(*point)
+        {
+            // Create a default position at the start of the text
+            use skia_safe::textlayout::Affinity;
+            let default_position = PositionWithAffinity {
+                position: 0,
+                affinity: Affinity::Downstream,
+            };
+            return Some(TextPositionWithAffinity::new(
+                default_position,
+                0, // paragraph 0
+                0, // span 0
+                0, // offset 0
+            ));
+        }
+
         None
     }
 
@@ -838,6 +890,10 @@ impl Paragraph {
         &self.children
     }
 
+    pub fn children_mut(&mut self) -> &mut Vec<TextSpan> {
+        &mut self.children
+    }
+
     #[allow(dead_code)]
     fn add_span(&mut self, span: TextSpan) {
         self.children.push(span);
@@ -847,6 +903,26 @@ impl Paragraph {
         self.line_height
     }
 
+    pub fn letter_spacing(&self) -> f32 {
+        self.letter_spacing
+    }
+
+    pub fn text_align(&self) -> TextAlign {
+        self.text_align
+    }
+
+    pub fn text_direction(&self) -> TextDirection {
+        self.text_direction
+    }
+
+    pub fn text_decoration(&self) -> Option<TextDecoration> {
+        self.text_decoration
+    }
+
+    pub fn text_transform(&self) -> Option<TextTransform> {
+        self.text_transform
+    }
+
     pub fn paragraph_to_style(&self) -> ParagraphStyle {
         let mut style = ParagraphStyle::default();
 
@@ -1228,14 +1304,21 @@ pub fn calculate_text_layout_data(
             let current_y = para_layout.y;
             let text_paragraph = text_paragraphs.get(paragraph_index);
             if let Some(text_para) = text_paragraph {
-                let mut span_ranges: Vec<(usize, usize, usize)> = vec![];
+                let mut span_ranges: Vec<(usize, usize, usize, String, String)> = vec![];
                 let mut cur = 0;
                 for (span_index, span) in text_para.children().iter().enumerate() {
-                    let text: String = span.apply_text_transform();
-                    span_ranges.push((cur, cur + text.len(), span_index));
-                    cur += text.len();
+                    let transformed_text: String = span.apply_text_transform();
+                    let original_text = span.text.clone();
+                    let text = transformed_text.clone();
+                    let text_len = text.len();
+                    span_ranges.push((cur, cur + text_len, span_index, text, original_text));
+                    cur += text_len;
                 }
-                for (start, end, span_index) in span_ranges {
+                for (start, end, span_index, transformed_text, original_text) in span_ranges {
+                    // Skip empty spans to avoid invalid rect calculations
+                    if start >= end {
+                        continue;
+                    }
                     let rects = para_layout.paragraph.get_rects_for_range(
                         start..end,
                         RectHeightStyle::Tight,
@@ -1245,22 +1328,43 @@ pub fn calculate_text_layout_data(
                         let direction = textbox.direct;
                         let mut rect = textbox.rect;
                         let cy = rect.top + rect.height() / 2.0;
-                        let start_pos = para_layout
+
+                        // Get byte positions from Skia's transformed text layout
+                        let glyph_start = para_layout
                             .paragraph
                             .get_glyph_position_at_coordinate((rect.left + 0.1, cy))
                             .position as usize;
-                        let end_pos = para_layout
+                        let glyph_end = para_layout
                             .paragraph
                             .get_glyph_position_at_coordinate((rect.right - 0.1, cy))
                             .position as usize;
-                        let start_pos = start_pos.saturating_sub(start);
-                        let end_pos = end_pos.saturating_sub(start);
+
+                        // Convert to byte positions relative to this span
+                        let byte_start = glyph_start.saturating_sub(start);
+                        let byte_end = glyph_end.saturating_sub(start);
+
+                        // Convert byte positions to character positions in ORIGINAL text
+                        // This handles multi-byte UTF-8 and text transform differences
+                        let char_start = transformed_text
+                            .char_indices()
+                            .position(|(i, _)| i >= byte_start)
+                            .unwrap_or(0);
+                        let char_end = transformed_text
+                            .char_indices()
+                            .position(|(i, _)| i >= byte_end)
+                            .unwrap_or_else(|| transformed_text.chars().count());
+
+                        // Clamp to original text length for safety
+                        let original_char_count = original_text.chars().count();
+                        let final_start = char_start.min(original_char_count);
+                        let final_end = char_end.min(original_char_count);
+
                         rect.offset((x, current_y));
                         position_data.push(PositionData {
                             paragraph: paragraph_index as u32,
                             span: span_index as u32,
-                            start_pos: start_pos as u32,
-                            end_pos: end_pos as u32,
+                            start_pos: final_start as u32,
+                            end_pos: final_end as u32,
                             x: rect.x(),
                             y: rect.y(),
                             width: rect.width(),

render-wasm/src/shapes/transform.rs

@@ -39,6 +39,7 @@ pub struct TransformEntry {
 }
 
 impl TransformEntry {
+    // FIXME: We should be able to refactor code so we don't need these from_* methods
     pub fn from_input(id: Uuid, transform: Matrix) -> Self {
         TransformEntry {
             id,
@@ -47,6 +48,8 @@ impl TransformEntry {
             propagate: true,
         }
     }
+
+    // FIXME: We should be able to refactor code so we don't need these from_* methods
     pub fn from_propagate(id: Uuid, transform: Matrix) -> Self {
         TransformEntry {
             id,
@@ -119,6 +122,7 @@ impl From<TransformEntry> for [u8; 40] {
     }
 }
 
+// FIXME: Use a DTO for this
 impl SerializableResult for TransformEntry {
     type BytesType = [u8; 40];
 

render-wasm/src/state/text_editor.rs

@@ -1,9 +1,226 @@
 #![allow(dead_code)]
 
 use crate::shapes::TextPositionWithAffinity;
+use crate::uuid::Uuid;
+use skia_safe::Color;
 
-/// TODO: Now this is just a tuple with 2 i32 working
-/// as indices (paragraph and span).
+/// Cursor position within text content.
+/// Uses character offsets for precise positioning.
+#[derive(Debug, PartialEq, Eq, Clone, Copy, Default)]
+pub struct TextCursor {
+    pub paragraph: usize,
+    pub char_offset: usize,
+}
+
+impl TextCursor {
+    pub fn new(paragraph: usize, char_offset: usize) -> Self {
+        Self {
+            paragraph,
+            char_offset,
+        }
+    }
+
+    pub fn zero() -> Self {
+        Self {
+            paragraph: 0,
+            char_offset: 0,
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy, Default)]
+pub struct TextSelection {
+    pub anchor: TextCursor,
+    pub focus: TextCursor,
+}
+
+impl TextSelection {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    pub fn from_cursor(cursor: TextCursor) -> Self {
+        Self {
+            anchor: cursor,
+            focus: cursor,
+        }
+    }
+
+    pub fn is_collapsed(&self) -> bool {
+        self.anchor == self.focus
+    }
+
+    pub fn is_selection(&self) -> bool {
+        !self.is_collapsed()
+    }
+
+    pub fn set_caret(&mut self, cursor: TextCursor) {
+        self.anchor = cursor;
+        self.focus = cursor;
+    }
+
+    pub fn extend_to(&mut self, cursor: TextCursor) {
+        self.focus = cursor;
+    }
+
+    pub fn collapse_to_focus(&mut self) {
+        self.anchor = self.focus;
+    }
+
+    pub fn collapse_to_anchor(&mut self) {
+        self.focus = self.anchor;
+    }
+
+    pub fn start(&self) -> TextCursor {
+        if self.anchor.paragraph < self.focus.paragraph {
+            self.anchor
+        } else if self.anchor.paragraph > self.focus.paragraph {
+            self.focus
+        } else if self.anchor.char_offset <= self.focus.char_offset {
+            self.anchor
+        } else {
+            self.focus
+        }
+    }
+
+    pub fn end(&self) -> TextCursor {
+        if self.anchor.paragraph > self.focus.paragraph {
+            self.anchor
+        } else if self.anchor.paragraph < self.focus.paragraph {
+            self.focus
+        } else if self.anchor.char_offset >= self.focus.char_offset {
+            self.anchor
+        } else {
+            self.focus
+        }
+    }
+}
+
+/// Events that the text editor can emit for frontend synchronization
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+#[repr(u8)]
+pub enum EditorEvent {
+    None = 0,
+    ContentChanged = 1,
+    SelectionChanged = 2,
+    NeedsLayout = 3,
+}
+
+/// FIXME: It should be better to get these constants from the frontend through the API.
+const SELECTION_COLOR: Color = Color::from_argb(255, 0, 209, 184);
+const CURSOR_WIDTH: f32 = 1.5;
+const CURSOR_COLOR: Color = Color::BLACK;
+const CURSOR_BLINK_INTERVAL_MS: f64 = 530.0;
+
+pub struct TextEditorTheme {
+    pub selection_color: Color,
+    pub cursor_width: f32,
+    pub cursor_color: Color,
+}
+
+pub struct TextEditorState {
+    pub theme: TextEditorTheme,
+    pub selection: TextSelection,
+    pub is_active: bool,
+    pub active_shape_id: Option<Uuid>,
+    pub cursor_visible: bool,
+    pub last_blink_time: f64,
+    pending_events: Vec<EditorEvent>,
+}
+
+impl TextEditorState {
+    pub fn new() -> Self {
+        Self {
+            theme: TextEditorTheme {
+                selection_color: SELECTION_COLOR,
+                cursor_width: CURSOR_WIDTH,
+                cursor_color: CURSOR_COLOR,
+            },
+            selection: TextSelection::new(),
+            is_active: false,
+            active_shape_id: None,
+            cursor_visible: true,
+            last_blink_time: 0.0,
+            pending_events: Vec::new(),
+        }
+    }
+
+    pub fn start(&mut self, shape_id: Uuid) {
+        self.is_active = true;
+        self.active_shape_id = Some(shape_id);
+        self.cursor_visible = true;
+        self.last_blink_time = 0.0;
+        self.selection = TextSelection::new();
+        self.pending_events.clear();
+    }
+
+    pub fn stop(&mut self) {
+        self.is_active = false;
+        self.active_shape_id = None;
+        self.cursor_visible = false;
+        self.pending_events.clear();
+    }
+
+    pub fn set_caret_from_position(&mut self, position: TextPositionWithAffinity) {
+        let cursor = TextCursor::new(position.paragraph as usize, position.offset as usize);
+        self.selection.set_caret(cursor);
+        self.reset_blink();
+        self.push_event(EditorEvent::SelectionChanged);
+    }
+
+    pub fn extend_selection_from_position(&mut self, position: TextPositionWithAffinity) {
+        let cursor = TextCursor::new(position.paragraph as usize, position.offset as usize);
+        self.selection.extend_to(cursor);
+        self.reset_blink();
+        self.push_event(EditorEvent::SelectionChanged);
+    }
+
+    pub fn update_blink(&mut self, timestamp_ms: f64) {
+        if !self.is_active {
+            return;
+        }
+
+        if self.last_blink_time == 0.0 {
+            self.last_blink_time = timestamp_ms;
+            self.cursor_visible = true;
+            return;
+        }
+
+        let elapsed = timestamp_ms - self.last_blink_time;
+        if elapsed >= CURSOR_BLINK_INTERVAL_MS {
+            self.cursor_visible = !self.cursor_visible;
+            self.last_blink_time = timestamp_ms;
+        }
+    }
+
+    pub fn reset_blink(&mut self) {
+        self.cursor_visible = true;
+        self.last_blink_time = 0.0;
+    }
+
+    pub fn push_event(&mut self, event: EditorEvent) {
+        if self.pending_events.last() != Some(&event) {
+            self.pending_events.push(event);
+        }
+    }
+
+    pub fn poll_event(&mut self) -> EditorEvent {
+        self.pending_events.pop().unwrap_or(EditorEvent::None)
+    }
+
+    pub fn has_pending_events(&self) -> bool {
+        !self.pending_events.is_empty()
+    }
+
+    pub fn set_caret_position_from(
+        &mut self,
+        text_position_with_affinity: TextPositionWithAffinity,
+    ) {
+        self.set_caret_from_position(text_position_with_affinity);
+    }
+}
+
+/// TODO: Remove legacy code
 #[derive(Debug, PartialEq, Clone, Copy)]
 pub struct TextNodePosition {
     pub paragraph: i32,
@@ -15,89 +232,7 @@ impl TextNodePosition {
         Self { paragraph, span }
     }
 
-    #[allow(dead_code)]
     pub fn is_invalid(&self) -> bool {
         self.paragraph < 0 || self.span < 0
     }
 }
-
-pub struct TextPosition {
-    node: Option<TextNodePosition>,
-    offset: i32,
-}
-
-impl TextPosition {
-    pub fn new() -> Self {
-        Self {
-            node: None,
-            offset: -1,
-        }
-    }
-
-    pub fn set(&mut self, node: Option<TextNodePosition>, offset: i32) {
-        self.node = node;
-        self.offset = offset;
-    }
-}
-
-pub struct TextSelection {
-    focus: TextPosition,
-    anchor: TextPosition,
-}
-
-impl TextSelection {
-    pub fn new() -> Self {
-        Self {
-            focus: TextPosition::new(),
-            anchor: TextPosition::new(),
-        }
-    }
-
-    #[allow(dead_code)]
-    pub fn is_caret(&self) -> bool {
-        self.focus.node == self.anchor.node && self.focus.offset == self.anchor.offset
-    }
-
-    #[allow(dead_code)]
-    pub fn is_selection(&self) -> bool {
-        !self.is_caret()
-    }
-
-    pub fn set_focus(&mut self, node: Option<TextNodePosition>, offset: i32) {
-        self.focus.set(node, offset);
-    }
-
-    pub fn set_anchor(&mut self, node: Option<TextNodePosition>, offset: i32) {
-        self.anchor.set(node, offset);
-    }
-
-    pub fn set(&mut self, node: Option<TextNodePosition>, offset: i32) {
-        self.set_focus(node, offset);
-        self.set_anchor(node, offset);
-    }
-}
-
-pub struct TextEditorState {
-    selection: TextSelection,
-}
-
-impl TextEditorState {
-    pub fn new() -> Self {
-        Self {
-            selection: TextSelection::new(),
-        }
-    }
-
-    pub fn set_caret_position_from(
-        &mut self,
-        text_position_with_affinity: TextPositionWithAffinity,
-    ) {
-        self.selection.set(
-            Some(TextNodePosition::new(
-                text_position_with_affinity.paragraph,
-                text_position_with_affinity.span,
-            )),
-            text_position_with_affinity.offset,
-        );
-    }
-}

render-wasm/src/tiles.rs

@@ -209,16 +209,19 @@ impl PendingTiles {
         }
     }
 
-    pub fn update(&mut self, tile_viewbox: &TileViewbox, surfaces: &Surfaces) {
-        self.list.clear();
-
-        let columns = tile_viewbox.interest_rect.width();
-        let rows = tile_viewbox.interest_rect.height();
-
+    // Generate tiles in spiral order from center
+    fn generate_spiral(rect: &TileRect) -> Vec<Tile> {
+        let columns = rect.width();
+        let rows = rect.height();
         let total = columns * rows;
 
-        let mut cx = tile_viewbox.interest_rect.center_x();
-        let mut cy = tile_viewbox.interest_rect.center_y();
+        if total <= 0 {
+            return Vec::new();
+        }
+
+        let mut result = Vec::with_capacity(total as usize);
+        let mut cx = rect.center_x();
+        let mut cy = rect.center_y();
 
         let ratio = (columns as f32 / rows as f32).ceil() as i32;
 
@@ -228,7 +231,7 @@ impl PendingTiles {
         let mut direction = 0;
         let mut current = 0;
 
-        self.list.push(Tile(cx, cy));
+        result.push(Tile(cx, cy));
         while current < total {
             match direction {
                 0 => cx += 1,
@@ -238,7 +241,7 @@ impl PendingTiles {
                 _ => unreachable!("Invalid direction"),
             }
 
-            self.list.push(Tile(cx, cy));
+            result.push(Tile(cx, cy));
 
             direction_current += 1;
             let direction_total = if direction % 2 == 0 {
@@ -258,18 +261,44 @@ impl PendingTiles {
             }
             current += 1;
         }
-        self.list.reverse();
+        result.reverse();
+        result
+    }
 
-        // Create a new list where the cached tiles go first
-        let iter1 = self
-            .list
-            .iter()
-            .filter(|t| surfaces.has_cached_tile_surface(**t));
-        let iter2 = self
-            .list
-            .iter()
-            .filter(|t| !surfaces.has_cached_tile_surface(**t));
-        self.list = iter1.chain(iter2).copied().collect();
+    pub fn update(&mut self, tile_viewbox: &TileViewbox, surfaces: &Surfaces) {
+        self.list.clear();
+
+        // Generate spiral for the interest area (viewport + margin)
+        let spiral = Self::generate_spiral(&tile_viewbox.interest_rect);
+
+        // Partition tiles into 4 priority groups (highest priority = processed last due to pop()):
+        // 1. visible + cached (fastest - just blit from cache)
+        // 2. visible + uncached (user sees these, render next)
+        // 3. interest + cached (pre-rendered area, blit from cache)
+        // 4. interest + uncached (lowest priority - background pre-render)
+        let mut visible_cached = Vec::new();
+        let mut visible_uncached = Vec::new();
+        let mut interest_cached = Vec::new();
+        let mut interest_uncached = Vec::new();
+
+        for tile in spiral {
+            let is_visible = tile_viewbox.visible_rect.contains(&tile);
+            let is_cached = surfaces.has_cached_tile_surface(tile);
+
+            match (is_visible, is_cached) {
+                (true, true) => visible_cached.push(tile),
+                (true, false) => visible_uncached.push(tile),
+                (false, true) => interest_cached.push(tile),
+                (false, false) => interest_uncached.push(tile),
+            }
+        }
+
+        // Build final list with lowest priority first (they get popped last)
+        // Order: interest_uncached, interest_cached, visible_uncached, visible_cached
+        self.list.extend(interest_uncached);
+        self.list.extend(interest_cached);
+        self.list.extend(visible_uncached);
+        self.list.extend(visible_cached);
     }
 
     pub fn pop(&mut self) -> Option<Tile> {

render-wasm/src/wasm.rs

@@ -9,3 +9,5 @@ pub mod shapes;
 pub mod strokes;
 pub mod svg_attrs;
 pub mod text;
+pub mod text_editor;
+pub mod transforms;

render-wasm/src/wasm/layouts.rs

@@ -57,7 +57,6 @@ pub extern "C" fn set_layout_data(
     min_w: f32,
     align_self: u8,
     is_absolute: bool,
-    has_z_index: bool,
     z_index: i32,
 ) {
     with_current_shape_mut!(state, |shape: &mut Shape| {
@@ -68,7 +67,7 @@ pub extern "C" fn set_layout_data(
         let min_h = if has_min_h { Some(min_h) } else { None };
         let max_w = if has_max_w { Some(max_w) } else { None };
         let min_w = if has_min_w { Some(min_w) } else { None };
-        let z_index = if has_z_index { Some(z_index) } else { None };
+        let z_index = if z_index != 0 { Some(z_index) } else { None };
 
         let raw_align_self = align::RawAlignSelf::from(align_self);
 

render-wasm/src/wasm/shapes/base_props.rs

@@ -8,166 +8,252 @@ use crate::{with_state_mut, STATE};
 
 use super::RawShapeType;
 
-/// Binary layout for batched shape base properties:
-///
-/// | Offset | Size | Field        | Type                              |
-/// |--------|------|--------------|-----------------------------------|
-/// | 0      | 16   | id           | UUID (4 × u32 LE)                 |
-/// | 16     | 16   | parent_id    | UUID (4 × u32 LE)                 |
-/// | 32     | 1    | shape_type   | u8                                |
-/// | 33     | 1    | flags        | u8 (bit0: clip, bit1: hidden)     |
-/// | 34     | 1    | blend_mode   | u8                                |
-/// | 35     | 1    | constraint_h | u8 (0xFF = None)                  |
-/// | 36     | 1    | constraint_v | u8 (0xFF = None)                  |
-/// | 37     | 3    | padding      | -                                 |
-/// | 40     | 4    | opacity      | f32 LE                            |
-/// | 44     | 4    | rotation     | f32 LE                            |
-/// | 48     | 24   | transform    | 6 × f32 LE (a,b,c,d,e,f)          |
-/// | 72     | 16   | selrect      | 4 × f32 LE (x1,y1,x2,y2)          |
-/// | 88     | 16   | corners      | 4 × f32 LE (r1,r2,r3,r4)          |
-/// |--------|------|--------------|-----------------------------------|
-/// | Total  | 104  |              |                                   |
-pub const BASE_PROPS_SIZE: usize = 104;
-
 const FLAG_CLIP_CONTENT: u8 = 0b0000_0001;
 const FLAG_HIDDEN: u8 = 0b0000_0010;
 const CONSTRAINT_NONE: u8 = 0xFF;
 
-/// Reads a f32 from a byte slice at the given offset (little-endian)
-#[inline]
-fn read_f32_le(bytes: &[u8], offset: usize) -> f32 {
-    f32::from_le_bytes([
-        bytes[offset],
-        bytes[offset + 1],
-        bytes[offset + 2],
-        bytes[offset + 3],
-    ])
+const RAW_BASE_PROPS_SIZE: usize = std::mem::size_of::<RawBasePropsData>();
+
+/// Binary layout for batched shape base properties.
+///
+/// The struct fields directly mirror the binary protocol — the layout
+/// documentation lives in the struct definition itself via `#[repr(C)]`.
+#[repr(C)]
+#[repr(align(4))]
+#[derive(Debug, Clone, Copy)]
+pub struct RawBasePropsData {
+    // UUID id (16 bytes)
+    id_a: u32,
+    id_b: u32,
+    id_c: u32,
+    id_d: u32,
+    // UUID parent_id (16 bytes)
+    parent_a: u32,
+    parent_b: u32,
+    parent_c: u32,
+    parent_d: u32,
+    // Single-byte fields
+    shape_type: u8,
+    flags: u8,
+    blend_mode: u8,
+    constraint_h: u8,
+    constraint_v: u8,
+    padding: [u8; 3],
+    // f32 fields
+    opacity: f32,
+    rotation: f32,
+    // Transform matrix (a, b, c, d, e, f)
+    transform_a: f32,
+    transform_b: f32,
+    transform_c: f32,
+    transform_d: f32,
+    transform_e: f32,
+    transform_f: f32,
+    // Selrect (x1, y1, x2, y2)
+    selrect_x1: f32,
+    selrect_y1: f32,
+    selrect_x2: f32,
+    selrect_y2: f32,
+    // Corners (r1, r2, r3, r4)
+    corner_r1: f32,
+    corner_r2: f32,
+    corner_r3: f32,
+    corner_r4: f32,
 }
 
-/// Reads a u32 from a byte slice at the given offset (little-endian)
-#[inline]
-fn read_u32_le(bytes: &[u8], offset: usize) -> u32 {
-    u32::from_le_bytes([
-        bytes[offset],
-        bytes[offset + 1],
-        bytes[offset + 2],
-        bytes[offset + 3],
-    ])
+impl RawBasePropsData {
+    fn id(&self) -> Uuid {
+        uuid_from_u32_quartet(self.id_a, self.id_b, self.id_c, self.id_d)
+    }
+
+    fn parent_id(&self) -> Uuid {
+        uuid_from_u32_quartet(self.parent_a, self.parent_b, self.parent_c, self.parent_d)
+    }
+
+    fn clip_content(&self) -> bool {
+        (self.flags & FLAG_CLIP_CONTENT) != 0
+    }
+
+    fn hidden(&self) -> bool {
+        (self.flags & FLAG_HIDDEN) != 0
+    }
+
+    fn blend_mode(&self) -> BlendMode {
+        RawBlendMode::from(self.blend_mode).into()
+    }
+
+    fn constraint_h(&self) -> Option<ConstraintH> {
+        if self.constraint_h == CONSTRAINT_NONE {
+            None
+        } else {
+            Some(RawConstraintH::from(self.constraint_h).into())
+        }
+    }
+
+    fn constraint_v(&self) -> Option<ConstraintV> {
+        if self.constraint_v == CONSTRAINT_NONE {
+            None
+        } else {
+            Some(RawConstraintV::from(self.constraint_v).into())
+        }
+    }
 }
 
-/// Parses UUID from bytes at given offset
-#[inline]
-fn read_uuid(bytes: &[u8], offset: usize) -> Uuid {
-    uuid_from_u32_quartet(
-        read_u32_le(bytes, offset),
-        read_u32_le(bytes, offset + 4),
-        read_u32_le(bytes, offset + 8),
-        read_u32_le(bytes, offset + 12),
-    )
+impl From<[u8; RAW_BASE_PROPS_SIZE]> for RawBasePropsData {
+    fn from(bytes: [u8; RAW_BASE_PROPS_SIZE]) -> Self {
+        unsafe { std::mem::transmute(bytes) }
+    }
 }
 
 #[no_mangle]
 pub extern "C" fn set_shape_base_props() {
     let bytes = mem::bytes();
 
-    if bytes.len() < BASE_PROPS_SIZE {
+    if bytes.len() < RAW_BASE_PROPS_SIZE {
         return;
     }
 
-    // Parse all fields from the buffer
-    let id = read_uuid(&bytes, 0);
-    let parent_id = read_uuid(&bytes, 16);
-    let shape_type = bytes[32];
-    let flags = bytes[33];
-    let blend_mode = bytes[34];
-    let constraint_h = bytes[35];
-    let constraint_v = bytes[36];
-    // bytes[37..40] are padding
+    let data: [u8; RAW_BASE_PROPS_SIZE] = bytes[..RAW_BASE_PROPS_SIZE].try_into().unwrap();
+    let raw = RawBasePropsData::from(data);
 
-    let opacity = read_f32_le(&bytes, 40);
-    let rotation = read_f32_le(&bytes, 44);
-
-    // Transform matrix (a, b, c, d, e, f)
-    let transform_a = read_f32_le(&bytes, 48);
-    let transform_b = read_f32_le(&bytes, 52);
-    let transform_c = read_f32_le(&bytes, 56);
-    let transform_d = read_f32_le(&bytes, 60);
-    let transform_e = read_f32_le(&bytes, 64);
-    let transform_f = read_f32_le(&bytes, 68);
-
-    // Selrect (x1, y1, x2, y2)
-    let selrect_x1 = read_f32_le(&bytes, 72);
-    let selrect_y1 = read_f32_le(&bytes, 76);
-    let selrect_x2 = read_f32_le(&bytes, 80);
-    let selrect_y2 = read_f32_le(&bytes, 84);
-
-    // Corners (r1, r2, r3, r4)
-    let corner_r1 = read_f32_le(&bytes, 88);
-    let corner_r2 = read_f32_le(&bytes, 92);
-    let corner_r3 = read_f32_le(&bytes, 96);
-    let corner_r4 = read_f32_le(&bytes, 100);
-
-    // Decode flags
-    let clip_content = (flags & FLAG_CLIP_CONTENT) != 0;
-    let hidden = (flags & FLAG_HIDDEN) != 0;
-
-    // Convert raw enum values
-    let shape_type_enum = RawShapeType::from(shape_type);
-    let blend_mode_enum: BlendMode = RawBlendMode::from(blend_mode).into();
-
-    let constraint_h_opt: Option<ConstraintH> = if constraint_h == CONSTRAINT_NONE {
-        None
-    } else {
-        Some(RawConstraintH::from(constraint_h).into())
-    };
-
-    let constraint_v_opt: Option<ConstraintV> = if constraint_v == CONSTRAINT_NONE {
-        None
-    } else {
-        Some(RawConstraintV::from(constraint_v).into())
-    };
+    let id = raw.id();
+    let parent_id = raw.parent_id();
+    let shape_type = RawShapeType::from(raw.shape_type);
 
     with_state_mut!(state, {
-        // Select/create the shape
         state.use_shape(id);
-
-        // Set parent relationship
         state.set_parent_for_current_shape(parent_id);
-
-        // Mark shape as touched
         state.touch_current();
 
-        // Apply all properties to the current shape
         if let Some(shape) = state.current_shape_mut() {
-            // Type
-            shape.set_shape_type(shape_type_enum.into());
-
-            // Boolean flags
-            shape.set_clip(clip_content);
-            shape.set_hidden(hidden);
-
-            // Blend mode and opacity
-            shape.set_blend_mode(blend_mode_enum);
-            shape.set_opacity(opacity);
-
-            // Constraints
-            shape.set_constraint_h(constraint_h_opt);
-            shape.set_constraint_v(constraint_v_opt);
-
-            // Transform
-            shape.set_rotation(rotation);
+            shape.set_shape_type(shape_type.into());
+            shape.set_clip(raw.clip_content());
+            shape.set_hidden(raw.hidden());
+            shape.set_blend_mode(raw.blend_mode());
+            shape.set_opacity(raw.opacity);
+            shape.set_constraint_h(raw.constraint_h());
+            shape.set_constraint_v(raw.constraint_v());
+            shape.set_rotation(raw.rotation);
             shape.set_transform(
-                transform_a,
-                transform_b,
-                transform_c,
-                transform_d,
-                transform_e,
-                transform_f,
+                raw.transform_a,
+                raw.transform_b,
+                raw.transform_c,
+                raw.transform_d,
+                raw.transform_e,
+                raw.transform_f,
             );
-
-            // Geometry
-            shape.set_selrect(selrect_x1, selrect_y1, selrect_x2, selrect_y2);
-            shape.set_corners((corner_r1, corner_r2, corner_r3, corner_r4));
+            shape.set_selrect(
+                raw.selrect_x1,
+                raw.selrect_y1,
+                raw.selrect_x2,
+                raw.selrect_y2,
+            );
+            shape.set_corners((raw.corner_r1, raw.corner_r2, raw.corner_r3, raw.corner_r4));
         }
     });
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// Helper: builds a 104-byte buffer with all zeros, then lets the
+    /// caller poke specific offsets before transmuting.
+    fn make_bytes() -> [u8; RAW_BASE_PROPS_SIZE] {
+        [0u8; RAW_BASE_PROPS_SIZE]
+    }
+
+    fn raw_from(bytes: &[u8; RAW_BASE_PROPS_SIZE]) -> RawBasePropsData {
+        RawBasePropsData::from(*bytes)
+    }
+
+    #[test]
+    fn test_raw_base_props_layout() {
+        assert_eq!(RAW_BASE_PROPS_SIZE, 104);
+        assert_eq!(std::mem::align_of::<RawBasePropsData>(), 4);
+    }
+
+    #[test]
+    fn test_field_offsets_match_binary_protocol() {
+        // Verify that key struct fields sit at the documented byte offsets.
+        assert_eq!(std::mem::offset_of!(RawBasePropsData, id_a), 0);
+        assert_eq!(std::mem::offset_of!(RawBasePropsData, parent_a), 16);
+        assert_eq!(std::mem::offset_of!(RawBasePropsData, shape_type), 32);
+        assert_eq!(std::mem::offset_of!(RawBasePropsData, flags), 33);
+        assert_eq!(std::mem::offset_of!(RawBasePropsData, blend_mode), 34);
+        assert_eq!(std::mem::offset_of!(RawBasePropsData, constraint_h), 35);
+        assert_eq!(std::mem::offset_of!(RawBasePropsData, constraint_v), 36);
+        assert_eq!(std::mem::offset_of!(RawBasePropsData, padding), 37);
+        assert_eq!(std::mem::offset_of!(RawBasePropsData, opacity), 40);
+        assert_eq!(std::mem::offset_of!(RawBasePropsData, rotation), 44);
+        assert_eq!(std::mem::offset_of!(RawBasePropsData, transform_a), 48);
+        assert_eq!(std::mem::offset_of!(RawBasePropsData, selrect_x1), 72);
+        assert_eq!(std::mem::offset_of!(RawBasePropsData, corner_r1), 88);
+    }
+
+    #[test]
+    fn test_full_deserialization() {
+        let mut bytes = make_bytes();
+        // id
+        bytes[0..4].copy_from_slice(&1_u32.to_le_bytes());
+        bytes[4..8].copy_from_slice(&2_u32.to_le_bytes());
+        bytes[8..12].copy_from_slice(&3_u32.to_le_bytes());
+        bytes[12..16].copy_from_slice(&4_u32.to_le_bytes());
+        // parent_id
+        bytes[16..20].copy_from_slice(&5_u32.to_le_bytes());
+        bytes[20..24].copy_from_slice(&6_u32.to_le_bytes());
+        bytes[24..28].copy_from_slice(&7_u32.to_le_bytes());
+        bytes[28..32].copy_from_slice(&8_u32.to_le_bytes());
+        // shape_type = Rect (3)
+        bytes[32] = 3;
+        // flags = clip + hidden
+        bytes[33] = FLAG_CLIP_CONTENT | FLAG_HIDDEN;
+        // blend_mode = Overlay (15)
+        bytes[34] = 15;
+        // constraint_h = Center (3)
+        bytes[35] = 3;
+        // constraint_v = Scale (4)
+        bytes[36] = 4;
+        // opacity
+        bytes[40..44].copy_from_slice(&0.5_f32.to_le_bytes());
+        // rotation
+        bytes[44..48].copy_from_slice(&90.0_f32.to_le_bytes());
+        // transform (a=2, b=0, c=0, d=2, e=50, f=60)
+        bytes[48..52].copy_from_slice(&2.0_f32.to_le_bytes());
+        bytes[52..56].copy_from_slice(&0.0_f32.to_le_bytes());
+        bytes[56..60].copy_from_slice(&0.0_f32.to_le_bytes());
+        bytes[60..64].copy_from_slice(&2.0_f32.to_le_bytes());
+        bytes[64..68].copy_from_slice(&50.0_f32.to_le_bytes());
+        bytes[68..72].copy_from_slice(&60.0_f32.to_le_bytes());
+        // selrect
+        bytes[72..76].copy_from_slice(&0.0_f32.to_le_bytes());
+        bytes[76..80].copy_from_slice(&0.0_f32.to_le_bytes());
+        bytes[80..84].copy_from_slice(&100.0_f32.to_le_bytes());
+        bytes[84..88].copy_from_slice(&200.0_f32.to_le_bytes());
+        // corners
+        bytes[88..92].copy_from_slice(&4.0_f32.to_le_bytes());
+        bytes[92..96].copy_from_slice(&8.0_f32.to_le_bytes());
+        bytes[96..100].copy_from_slice(&12.0_f32.to_le_bytes());
+        bytes[100..104].copy_from_slice(&16.0_f32.to_le_bytes());
+
+        let raw = raw_from(&bytes);
+
+        assert_eq!(raw.id(), uuid_from_u32_quartet(1, 2, 3, 4));
+        assert_eq!(raw.parent_id(), uuid_from_u32_quartet(5, 6, 7, 8));
+        assert_eq!(raw.shape_type, 3); // Rect
+        assert!(raw.clip_content());
+        assert!(raw.hidden());
+        assert_eq!(raw.blend_mode(), BlendMode(skia_safe::BlendMode::Overlay));
+        assert_eq!(raw.constraint_h(), Some(ConstraintH::Center));
+        assert_eq!(raw.constraint_v(), Some(ConstraintV::Scale));
+        assert_eq!(raw.opacity, 0.5);
+        assert_eq!(raw.rotation, 90.0);
+        assert_eq!(raw.transform_a, 2.0);
+        assert_eq!(raw.transform_e, 50.0);
+        assert_eq!(raw.transform_f, 60.0);
+        assert_eq!(raw.selrect_x1, 0.0);
+        assert_eq!(raw.selrect_y2, 200.0);
+        assert_eq!(raw.corner_r1, 4.0);
+        assert_eq!(raw.corner_r4, 16.0);
+    }
+}

render-wasm/src/wasm/transforms.rs

@@ -0,0 +1,88 @@
+use macros::ToJs;
+
+use skia_safe as skia;
+
+use crate::mem;
+use crate::shapes::{self, TransformEntry, TransformEntrySource};
+use crate::utils::uuid_from_u32_quartet;
+use crate::{with_state, STATE};
+
+#[derive(Debug, PartialEq, Clone, Copy, ToJs)]
+#[repr(u8)]
+enum RawTransformEntryKind {
+    #[allow(dead_code)]
+    Parent = 0,
+    Child = 1,
+}
+
+impl From<u8> for RawTransformEntryKind {
+    fn from(value: u8) -> Self {
+        unsafe { std::mem::transmute(value) }
+    }
+}
+
+#[derive(Debug, PartialEq, Clone, Copy)]
+#[repr(C)]
+#[repr(align(4))]
+pub struct RawTransformEntry {
+    id: [u32; 4],
+    transform: [f32; 6],
+    kind: RawTransformEntryKind,
+}
+
+const RAW_TRANSFORM_ENTRY_SIZE: usize = size_of::<RawTransformEntry>();
+
+impl From<[u8; RAW_TRANSFORM_ENTRY_SIZE]> for RawTransformEntry {
+    fn from(bytes: [u8; RAW_TRANSFORM_ENTRY_SIZE]) -> Self {
+        unsafe { std::mem::transmute(bytes) }
+    }
+}
+
+impl TryFrom<&[u8]> for RawTransformEntry {
+    type Error = String;
+    fn try_from(bytes: &[u8]) -> Result<Self, Self::Error> {
+        let bytes: [u8; RAW_TRANSFORM_ENTRY_SIZE] = bytes
+            .try_into()
+            .map_err(|_| "Invalid transform entry bytes".to_string())?;
+        Ok(RawTransformEntry::from(bytes))
+    }
+}
+
+impl From<RawTransformEntry> for TransformEntry {
+    fn from(value: RawTransformEntry) -> Self {
+        let [a, b, c, d] = value.id;
+        let transform = skia::Matrix::new_all(
+            value.transform[0],
+            value.transform[2],
+            value.transform[4],
+            value.transform[1],
+            value.transform[3],
+            value.transform[5],
+            0.0,
+            0.0,
+            1.0,
+        );
+
+        TransformEntry {
+            id: uuid_from_u32_quartet(a, b, c, d),
+            transform,
+            source: TransformEntrySource::Input,
+            propagate: value.kind == RawTransformEntryKind::Child,
+        }
+    }
+}
+
+#[no_mangle]
+pub extern "C" fn propagate_modifiers(pixel_precision: bool) -> *mut u8 {
+    let bytes = mem::bytes();
+
+    let entries: Vec<TransformEntry> = bytes
+        .chunks(RAW_TRANSFORM_ENTRY_SIZE)
+        .map(|data| RawTransformEntry::try_from(data).unwrap().into())
+        .collect();
+
+    with_state!(state, {
+        let result = shapes::propagate_modifiers(state, &entries, pixel_precision);
+        mem::write_vec(result)
+    })
+}