🎉 Add 2.7 release slides (#6440)

🐛 Properly propagate export errors from worker to main thread

CHANGES.md

@@ -1,6 +1,50 @@
 # CHANGELOG
 
-## 2.6.2 (Unreleased)
+## 2.7.0 (Unreleased)
+
+### :rocket: Epics and highlights
+
+### :boom: Breaking changes & Deprecations
+
+### :heart: Community contributions (Thank you!)
+- Design improvements to the Invitations page with an empty state [GitHub #2608](https://github.com/penpot/penpot/issues/2608) by [@iprithvitharun](https://github.com/iprithvitharun)
+
+### :sparkles: New features
+- Update board presets with a newer devices [Taiga #10610](https://tree.taiga.io/project/penpot/us/10610)
+- Propagate "sharing a prototype" to editors and viewers [Taiga #8853](https://tree.taiga.io/project/penpot/us/8853)
+- Design improvements to the Invitations page with an empty state [Taiga #4554](https://tree.taiga.io/project/penpot/us/4554)
+- Duplicate token sets [Taiga #10694](https://tree.taiga.io/project/penpot/issue/10694)
+- Add set selection in create Token themes flow [Taiga #10746](https://tree.taiga.io/project/penpot/issue/10746)
+- Display indicator on not active sets [Taiga #10668](https://tree.taiga.io/project/penpot/issue/10668)
+
+### :bug: Bugs fixed
+- Fix problem in viewer with the back button [Taiga #10907](https://tree.taiga.io/project/penpot/issue/10907)
+- Fix resize bar background on tokens panel [Taiga #10811](https://tree.taiga.io/project/penpot/issue/10811)
+- Fix shortcut for history version panel [Taiga #11006](https://tree.taiga.io/project/penpot/issue/11006)
+- Fix positioning of comment drafts when near the right / bottom edges of viewport [Taiga #10534](https://tree.taiga.io/project/penpot/issue/10534)
+- Fix path having a wrong selrect [Taiga #10257](https://tree.taiga.io/project/penpot/issue/10257)
+- Fix SVG `stroke-linecap` property when importing SVGs [Taiga #9489](https://tree.taiga.io/project/penpot/issue/9489)
+- Fix position problems cutting-pasting a component [Taiga #10677](https://tree.taiga.io/project/penpot/issue/10677)
+- Fix design tab has a horizontal scroll [Taiga #10660](https://tree.taiga.io/project/penpot/issue/10660)
+- Fix long file names being clipped when longer than allowed length [Taiga #10662](https://tree.taiga.io/project/penpot/issue/10662)
+- Fix problem with error detail in toast [Taiga #10519](https://tree.taiga.io/project/penpot/issue/10519)
+- Fix view mode error when an external user tries to export something from a prototype using a shared link [Taiga #10251](https://tree.taiga.io/project/penpot/issue/10251)
+- Fix merge path nodes with only one node selected [Taiga #9626](https://tree.taiga.io/project/penpot/issue/9626)
+- Fix problem with import errors [Taiga #10040](https://tree.taiga.io/project/penpot/issue/10040)
+- Fix color gradient on texts [Taiga Issue #7488](https://tree.taiga.io/project/penpot/issue/7488)
+- Add support for self mentions [Taiga #10809](https://tree.taiga.io/project/penpot/issue/10809)
+- Fix team info settings alignment [Taiga #10869](https://tree.taiga.io/project/penpot/issue/10869)
+- Fix left sidebar horizontal scroll on nested layers [Taiga #10791](https://tree.taiga.io/project/penpot/issue/10791)
+- Improve error message details importing tokens [Taiga Issue #10772](https://tree.taiga.io/project/penpot/issue/10772)
+- Fix no selected set after Drag & Drop [Github #71](https://github.com/tokens-studio/penpot/issues/71)
+- Styledictionary v5 Update [Github #6283](https://github.com/penpot/penpot/pull/6283)
+- Fix Rename a set throws an internal error [Github #78](https://github.com/tokens-studio/penpot/issues/78)
+- Fix Out of Sync Token Value & Color Picker [Github #102](https://github.com/tokens-studio/penpot/issues/102)
+- Fix Color should preserve color space [Github #69](https://github.com/tokens-studio/penpot/issues/69)
+- Fix cannot rename Design Token Sets when group of same name exists [Taiga Issue #10773](https://tree.taiga.io/project/penpot/issue/10773)
+- Fix problem when duplicating grid layout [Github #6391](https://github.com/penpot/penpot/issues/6391)
+
+## 2.6.2
 
 ### :bug: Bugs fixed
 
@@ -15,6 +59,7 @@
 - Fix incorrect uuid parsing from different parts of code
 - Fix update layout on component restore [Taiga #10637](https://tree.taiga.io/project/penpot/issue/10637)
 - Fix horizontal scroll in viewer [Github #6290](https://github.com/penpot/penpot/issues/6290)
+- Fix detach component in a particular case [Taiga #10837](https://tree.taiga.io/project/penpot/issue/10837)
 
 ## 2.6.1
 

README.md

@@ -16,18 +16,18 @@
 </p>
 
 <p align="center">
-    <a href="https://penpot.app/"><b>Website</b></a>  •  
-    <a href="https://help.penpot.app/technical-guide/getting-started/"><b>Getting Started</b></a>  •  
-    <a href="https://help.penpot.app/user-guide/"><b>User Guide</b></a>  •  
-    <a href="https://help.penpot.app/user-guide/introduction/info/"><b>Tutorials & Info</b></a>  •  
+    <a href="https://penpot.app/"><b>Website</b></a>  •
+    <a href="https://help.penpot.app/user-guide/"><b>User Guide</b></a>  •
+    <a href="https://penpot.app/learning-center"><b>Learning Center</b></a>  •
     <a href="https://community.penpot.app/"><b>Community</b></a>
 </p>
 <p align="center">
-    <a href="https://www.youtube.com/@Penpot"><b>Youtube</b></a>  •  
-    <a href="https://peertube.kaleidos.net/a/penpot_app/video-channels"><b>Peertube</b></a>  •  
-    <a href="https://www.linkedin.com/company/penpot/"><b>Linkedin</b></a>  •  
-    <a href="https://instagram.com/penpot.app"><b>Instagram</b></a>  •  
-    <a href="https://fosstodon.org/@penpot/"><b>Mastodon</b></a>  •  
+    <a href="https://www.youtube.com/@Penpot"><b>Youtube</b></a>  •
+    <a href="https://peertube.kaleidos.net/a/penpot_app/video-channels"><b>Peertube</b></a>  •
+    <a href="https://www.linkedin.com/company/penpot/"><b>Linkedin</b></a>  •
+    <a href="https://instagram.com/penpot.app"><b>Instagram</b></a>  •
+    <a href="https://fosstodon.org/@penpot/"><b>Mastodon</b></a>  •
+    <a href="https://bsky.app/profile/penpot.app"><b>Bluesky</b></a>  •
     <a href="https://twitter.com/penpotapp"><b>X</b></a>
 
 </p>
@@ -40,12 +40,13 @@
 
 Penpot is the first **open-source** design tool for design and code collaboration. Designers can create stunning designs, interactive prototypes, design systems at scale, while developers enjoy ready-to-use code and make their workflow easy and fast. And all of this with no handoff drama.
 
-Penpot is available on browser and [self host](https://penpot.app/self-host). It’s web-based and works with open standards (SVG, CSS and HTML). And last but not least, it’s free! 
+Available on browser or self-hosted, Penpot works with open standards like SVG, CSS, HTML and JSON, and it’s free!
 
-Penpot’s latest [huge release 2.0](https://penpot.app/dev-diaries), takes the platform to a whole new level. This update introduces the ground-breaking [CSS Grid Layout feature](https://penpot.app/penpot-2.0), a complete UI redesign, a new Components system, and much more. Plus, it's faster and more accessible. 
+The latest updates take Penpot even further. It’s the first design tool to integrate native [design tokens](https://penpot.dev/collaboration/design-tokens)—a single source of truth to improve efficiency and collaboration between product design and development.
+With the [huge 2.0 release](https://penpot.app/dev-diaries), Penpot took the platform to a whole new level. This update introduces the ground-breaking [CSS Grid Layout feature](https://penpot.app/penpot-2.0), a complete UI redesign, a new Components system, and much more.
+For organizations that need extra service for its teams, [get in touch](https://cal.com/team/penpot/talk-to-us)
 
-
-🎇 **Penpot Fest** is our design, code & Open Source event. Check out the highlights from [Penpot Fest 2023 edition](https://www.youtube.com/watch?v=sOpLZaK5mDc)!
+🎇 Design, code, and Open Source meet at [Penpot Fest](https://penpot.app/penpotfest)! Be part of the 2025 edition in Madrid, Spain, on October 9-10.
 
 ## Table of contents ##
 
@@ -61,7 +62,7 @@ Penpot’s latest [huge release 2.0](https://penpot.app/dev-diaries), takes the
 Penpot expresses designs as code. Designers can do their best work and see it will be beautifully implemented by developers in a two-way collaboration.
 
 ### Plugin system ###
-[Penpot plugins](https://penpot.app/penpothub/plugins) let you expand the platform's capabilities, give you the flexibility to integrate it with other apps, and design custom solutions. 
+[Penpot plugins](https://penpot.app/penpothub/plugins) let you expand the platform's capabilities, give you the flexibility to integrate it with other apps, and design custom solutions.
 
 ### Designed for developers ###
 Penpot was built to serve both designers and developers and create a fluid design-code process. You have the choice to enjoy real-time collaboration or play "solo".
@@ -78,6 +79,10 @@ Penpot offers integration into the development toolchain, thanks to its support
 ### What’s great for design ###
 With Penpot you can design libraries to share and reuse; turn design elements into components and tokens to allow reusability and scalability; and build realistic user flows and interactions.
 
+### Design Tokens ###
+With Penpot’s standardized [design tokens](https://penpot.dev/collaboration/design-tokens) format, you can easily reuse and sync tokens across different platforms, workflows, and disciplines.
+
+
 <br />
 
 <p align="center">
@@ -125,13 +130,13 @@ You will find the following categories:
 
 ## Contributing ##
 
-Any contribution will make a difference to improve Penpot. How can you get involved? 
+Any contribution will make a difference to improve Penpot. How can you get involved?
 
-Choose your way: 
+Choose your way:
 
 - Create and [share Libraries & Templates](https://penpot.app/libraries-templates.html) that will be helpful for the community
 - Invite your [team to join](https://design.penpot.app/#/auth/register)
-- Star this repo and follow us on Social Media: [Mastodon](https://fosstodon.org/@penpot/), [Youtube](https://www.youtube.com/c/Penpot), [Instagram](https://instagram.com/penpot.app), [Linkedin](https://www.linkedin.com/company/penpotdesign),  [Peertube](https://peertube.kaleidos.net/a/penpot_app) and [X](https://twitter.com/penpotapp).
+- Give this repo a star and follow us on Social Media: [Mastodon](https://fosstodon.org/@penpot/), [Youtube](https://www.youtube.com/c/Penpot), [Instagram](https://instagram.com/penpot.app), [Linkedin](https://www.linkedin.com/company/penpotdesign),  [Peertube](https://peertube.kaleidos.net/a/penpot_app), [X](https://twitter.com/penpotapp) and [BlueSky](https://bsky.app/profile/penpot.app)
 - Participate in the [Community](https://community.penpot.app/) space by asking and answering questions; reacting to others’ articles;  opening your own conversations and following along on decisions affecting the project.
 - Report bugs with our easy [guide for bugs hunting](https://help.penpot.app/contributing-guide/reporting-bugs/) or [GitHub issues](https://github.com/penpot/penpot/issues)
 - Become a [translator](https://help.penpot.app/contributing-guide/translations)

backend/scripts/repl

@@ -31,7 +31,8 @@ export PENPOT_FLAGS="\
        enable-tiered-file-data-storage \
        enable-file-validation \
        enable-file-schema-validation \
-       enable-subscriptions-old";
+       enable-subscriptons \
+       enable-subscriptons-old";
 
 # Default deletion delay for devenv
 export PENPOT_DELETION_DELAY="24h"
@@ -71,15 +72,18 @@ export PENPOT_OBJECTS_STORAGE_S3_ENDPOINT=http://minio:9000
 export PENPOT_OBJECTS_STORAGE_S3_BUCKET=penpot
 export PENPOT_OBJECTS_STORAGE_FS_DIRECTORY="assets"
 
-export JAVA_OPTS="--enable-preview \
+export JAVA_OPTS="\
        -Djava.util.logging.manager=org.apache.logging.log4j.jul.LogManager \
        -Djdk.attach.allowAttachSelf \
        -Dlog4j2.configurationFile=log4j2-devenv-repl.xml \
        -Djdk.tracePinnedThreads=full \
        -XX:+EnableDynamicAgentLoading \
-       -XX:-OmitStackTraceInFastThrow \
+       -XX:-OmitStackTraceInFastThrow                    \
        -XX:+UnlockDiagnosticVMOptions \
-       -XX:+DebugNonSafepoints";
+       -XX:+DebugNonSafepoints \
+       --sun-misc-unsafe-memory-access=allow \
+       --enable-preview \
+       --enable-native-access=ALL-UNNAMED";
 
 export OPTIONS="-A:jmx-remote -A:dev"
 

backend/scripts/run.template.sh

@@ -18,7 +18,7 @@ if [ -f ./environ ]; then
     source ./environ
 fi
 
-export JVM_OPTS="-Djava.util.logging.manager=org.apache.logging.log4j.jul.LogManager -Dlog4j2.configurationFile=log4j2.xml -XX:-OmitStackTraceInFastThrow --enable-preview $JVM_OPTS"
+export JVM_OPTS="-Djava.util.logging.manager=org.apache.logging.log4j.jul.LogManager -Dlog4j2.configurationFile=log4j2.xml -XX:-OmitStackTraceInFastThrow --enable-native-access=ALL-UNNAMED --enable-preview $JVM_OPTS"
 
 ENTRYPOINT=${1:-app.main};
 

backend/scripts/start-dev

@@ -24,18 +24,8 @@ export PENPOT_FLAGS="\
        enable-tiered-file-data-storage \
        enable-file-validation \
        enable-file-schema-validation \
-       enable-subscriptions-old";
-
-export OPTIONS="
-       -A:jmx-remote -A:dev \
-       -J-Djava.util.logging.manager=org.apache.logging.log4j.jul.LogManager \
-       -J-Djdk.attach.allowAttachSelf \
-       -J-Dpolyglot.engine.WarnInterpreterOnly=false \
-       -J-Dlog4j2.configurationFile=log4j2-devenv.xml \
-       -J-XX:+EnableDynamicAgentLoading \
-       -J-XX:-OmitStackTraceInFastThrow \
-       -J-XX:+UnlockDiagnosticVMOptions \
-       -J-XX:+DebugNonSafepoints"
+       enable-subscriptons \
+       enable-subscriptons-old ";
 
 # Default deletion delay for devenv
 export PENPOT_DELETION_DELAY="24h"
@@ -66,6 +56,20 @@ export PENPOT_OBJECTS_STORAGE_S3_BUCKET=penpot
 
 entrypoint=${1:-app.main};
 
-set -ex
+export JAVA_OPTS="\
+       -Djava.util.logging.manager=org.apache.logging.log4j.jul.LogManager \
+       -Djdk.attach.allowAttachSelf \
+       -Dlog4j2.configurationFile=log4j2-devenv.xml \
+       -Djdk.tracePinnedThreads=full \
+       -XX:+EnableDynamicAgentLoading \
+       -XX:-OmitStackTraceInFastThrow                    \
+       -XX:+UnlockDiagnosticVMOptions \
+       -XX:+DebugNonSafepoints \
+       --sun-misc-unsafe-memory-access=allow \
+       --enable-preview \
+       --enable-native-access=ALL-UNNAMED";
 
-clojure $OPTIONS -A:dev -M -m $entrypoint;
+export OPTIONS="-A:jmx-remote -A:dev"
+
+set -ex
+clojure $OPTIONS -M -m $entrypoint;

backend/src/app/binfile/cleaner.clj

@@ -11,6 +11,25 @@
    [app.common.data :as d]
    [app.common.uuid :as uuid]))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; PRE DECODE
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn clean-shape-pre-decode
+  "Applies a pre-decode phase migration to the shape"
+  [shape]
+  (if (= "bool" (:type shape))
+    (if-let [content (get shape :bool-content)]
+      (-> shape
+          (assoc :content content)
+          (dissoc :bool-content))
+      shape)
+    shape))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; POST DECODE
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
 (defn- fix-shape-shadow-color
   "Some shapes can come with invalid `id` property on shadow colors
   caused by incorrect uuid parsing bug that should be already fixed;

backend/src/app/binfile/v3.clj

@@ -603,10 +603,20 @@
                            (reduce-kv (fn [objects id shape]
                                         (assoc objects id (bfl/clean-shape-post-decode shape)))
                                       objects
+                                      objects))))
+        clean-component-pre-decode
+        (fn [component]
+          (d/update-when component :objects
+                         (fn [objects]
+                           (reduce-kv (fn [objects id shape]
+                                        (assoc objects id (bfl/clean-shape-pre-decode shape)))
+                                      objects
                                       objects))))]
+
     (->> (keep (match-component-entry-fn file-id) entries)
          (reduce (fn [result {:keys [id entry]}]
                    (let [object (->> (read-entry input entry)
+                                     (clean-component-pre-decode)
                                      (decode-component)
                                      (clean-component-post-decode)
                                      (validate-component))]
@@ -641,10 +651,10 @@
   (->> (keep (match-shape-entry-fn file-id page-id) entries)
        (reduce (fn [result {:keys [id entry]}]
                  (let [object (->> (read-entry input entry)
+                                   (bfl/clean-shape-pre-decode)
                                    (decode-shape)
                                    (bfl/clean-shape-post-decode)
                                    (validate-shape))]
-
                    (if (= id (:id object))
                      (assoc result id object)
                      result)))
@@ -755,7 +765,6 @@
                    ;; only the applied
                    (vary-meta dissoc ::fmg/migrated))]
 
-
       (bfm/register-pending-migrations! cfg file)
       (bfc/save-file! cfg file ::db/return-keys false)
 

backend/src/app/features/components_v2.clj

@@ -1462,8 +1462,6 @@
                                     (:objects page)
                                     (:id page)
                                     file-id
-                                    true
-                                    nil
                                     cfsh/prepare-create-artboard-from-selection)]
 
     (shape-cb shape)

backend/src/app/loggers/audit.clj

@@ -108,6 +108,7 @@
    [::ip-addr {:optional true} ::sm/text]
    [::props {:optional true} [:map-of :keyword :any]]
    [::context {:optional true} [:map-of :keyword :any]]
+   [::tracked-at {:optional true} ::sm/inst]
    [::webhooks/event? {:optional true} ::sm/boolean]
    [::webhooks/batch-timeout {:optional true} ::dt/duration]
    [::webhooks/batch-key {:optional true}
@@ -118,12 +119,12 @@
 
 (defn prepare-event
   [cfg mdata params result]
-  (let [resultm    (meta result)
-        request    (-> params meta ::http/request)
-        profile-id (or (::profile-id resultm)
-                       (:profile-id result)
-                       (::rpc/profile-id params)
-                       uuid/zero)
+  (let [resultm      (meta result)
+        request      (-> params meta ::http/request)
+        profile-id   (or (::profile-id resultm)
+                         (:profile-id result)
+                         (::rpc/profile-id params)
+                         uuid/zero)
 
         session-id   (get params ::rpc/external-session-id)
         event-origin (get params ::rpc/external-event-origin)
@@ -135,14 +136,14 @@
 
                          (clean-props))
 
-        token-id  (::actoken/id request)
-        context   (-> (::context resultm)
-                      (assoc :external-session-id session-id)
-                      (assoc :external-event-origin event-origin)
-                      (assoc :access-token-id (some-> token-id str))
-                      (d/without-nils))
+        token-id     (::actoken/id request)
+        context      (-> (::context resultm)
+                         (assoc :external-session-id session-id)
+                         (assoc :external-event-origin event-origin)
+                         (assoc :access-token-id (some-> token-id str))
+                         (d/without-nils))
 
-        ip-addr   (inet/parse-request request)]
+        ip-addr      (inet/parse-request request)]
 
     {::type (or (::type resultm)
                 (::rpc/type cfg))

backend/src/app/loggers/webhooks.clj

@@ -15,6 +15,7 @@
    [app.config :as cf]
    [app.db :as db]
    [app.http.client :as http]
+   [app.loggers.audit :as audit]
    [app.util.time :as dt]
    [app.worker :as wrk]
    [clojure.data.json :as json]
@@ -67,18 +68,27 @@
 (defmethod ig/init-key ::process-event-handler
   [_ cfg]
   (fn [{:keys [props] :as task}]
-    (l/dbg :hint "process webhook event" :name (:name props))
 
-    (when-let [items (lookup-webhooks cfg props)]
-      (l/trc :hint "webhooks found for event" :total (count items))
-      (db/tx-run! cfg (fn [cfg]
-                        (doseq [item items]
-                          (wrk/submit! (-> cfg
-                                           (assoc ::wrk/task :run-webhook)
-                                           (assoc ::wrk/queue :webhooks)
-                                           (assoc ::wrk/max-retries 3)
-                                           (assoc ::wrk/params {:event props
-                                                                :config item})))))))))
+    (let [items (lookup-webhooks cfg props)
+          event {::audit/profile-id (:profile-id props)
+                 ::audit/name "webhook"
+                 ::audit/type "trigger"
+                 ::audit/props {:name (get props :name)
+                                :event-id (get props :id)
+                                :total-affected (count items)}}]
+
+      (audit/insert! cfg event)
+
+      (when items
+        (l/trc :hint "webhooks found for event" :total (count items))
+        (db/tx-run! cfg (fn [cfg]
+                          (doseq [item items]
+                            (wrk/submit! (-> cfg
+                                             (assoc ::wrk/task :run-webhook)
+                                             (assoc ::wrk/queue :webhooks)
+                                             (assoc ::wrk/max-retries 3)
+                                             (assoc ::wrk/params {:event props
+                                                                  :config item}))))))))))
 ;; --- RUN
 
 (declare interpret-exception)

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

@@ -208,7 +208,7 @@
    [:project-id {:optional true} ::sm/uuid]])
 
 (defn- migrate-file
-  [{:keys [::db/conn] :as cfg} {:keys [id] :as file}]
+  [{:keys [::db/conn] :as cfg} {:keys [id] :as file} {:keys [read-only?]}]
   (binding [pmap/*load-fn* (partial feat.fdata/load-pointer cfg id)
             pmap/*tracked* (pmap/create-tracked)]
     (let [;; For avoid unnecesary overhead of creating multiple pointers and
@@ -219,43 +219,45 @@
           file (-> file
                    (update :data feat.fdata/process-pointers deref)
                    (update :data feat.fdata/process-objects (partial into {}))
-                   (fmg/migrate-file))
+                   (fmg/migrate-file))]
 
-          ;; When file is migrated, we break the rule of no perform
-          ;; mutations on get operations and update the file with all
-          ;; migrations applied
-          ;;
-          ;; WARN: he following code will not work on read-only mode,
-          ;; it is a known issue; we keep is not implemented until we
-          ;; really need this.
-          file (if (contains? (:features file) "fdata/objects-map")
-                 (feat.fdata/enable-objects-map file)
-                 file)
-          file (if (contains? (:features file) "fdata/pointer-map")
-                 (feat.fdata/enable-pointer-map file)
-                 file)]
+      (if (or read-only? (db/read-only? conn))
+        file
+        (let [;; When file is migrated, we break the rule of no perform
+              ;; mutations on get operations and update the file with all
+              ;; migrations applied
+              file (if (contains? (:features file) "fdata/objects-map")
+                     (feat.fdata/enable-objects-map file)
+                     file)
+              file (if (contains? (:features file) "fdata/pointer-map")
+                     (feat.fdata/enable-pointer-map file)
+                     file)]
 
-      (db/update! conn :file
-                  {:data (blob/encode (:data file))
-                   :version (:version file)
-                   :features (db/create-array conn "text" (:features file))}
-                  {:id id})
+          (db/update! conn :file
+                      {:data (blob/encode (:data file))
+                       :version (:version file)
+                       :features (db/create-array conn "text" (:features file))}
+                      {:id id}
+                      {::db/return-keys false})
 
-      (when (contains? (:features file) "fdata/pointer-map")
-        (feat.fdata/persist-pointers! cfg id))
+          (when (contains? (:features file) "fdata/pointer-map")
+            (feat.fdata/persist-pointers! cfg id))
 
-      (feat.fmigr/upsert-migrations! conn file)
-      (feat.fmigr/resolve-applied-migrations cfg file))))
+          (feat.fmigr/upsert-migrations! conn file)
+          (feat.fmigr/resolve-applied-migrations cfg file))))))
 
 (defn get-file
   [{:keys [::db/conn ::wrk/executor] :as cfg} id
    & {:keys [project-id
              migrate?
              include-deleted?
-             lock-for-update?]
+             lock-for-update?
+             preload-pointers?]
       :or {include-deleted? false
            lock-for-update? false
-           migrate? true}}]
+           migrate? true
+           preload-pointers? false}
+      :as options}]
 
   (assert (db/connection? conn) "expected cfg with valid connection")
 
@@ -273,10 +275,16 @@
         ;; because it has heavy and synchronous operations for
         ;; decoding file body that are not very friendly with virtual
         ;; threads.
-        file   (px/invoke! executor #(decode-row file))]
+        file   (px/invoke! executor #(decode-row file))
+
+        file   (if (and migrate? (fmg/need-migration? file))
+                 (migrate-file cfg file options)
+                 file)]
+
+    (if preload-pointers?
+      (binding [pmap/*load-fn* (partial feat.fdata/load-pointer cfg id)]
+        (update file :data feat.fdata/process-pointers deref))
 
-    (if (and migrate? (fmg/need-migration? file))
-      (migrate-file cfg file)
       file)))
 
 (defn get-minimal-file
@@ -474,7 +482,7 @@
   (update page :objects update-vals #(dissoc % :thumbnail)))
 
 (defn get-page
-  [{:keys [::db/conn] :as cfg} {:keys [profile-id file-id page-id object-id] :as params}]
+  [{:keys [::db/conn] :as cfg} {:keys [profile-id file-id page-id object-id share-id] :as params}]
 
   (when (and (uuid? object-id)
              (not (uuid? page-id)))
@@ -482,22 +490,30 @@
               :code :params-validation
               :hint "page-id is required when object-id is provided"))
 
-  (let [team (teams/get-team conn
-                             :profile-id profile-id
-                             :file-id file-id)
+  (let [perms (get-permissions conn profile-id file-id share-id)
 
-        file (get-file cfg file-id)
+        file  (get-file cfg file-id :read-only? true)
 
-        _    (-> (cfeat/get-team-enabled-features cf/flags team)
-                 (cfeat/check-client-features! (:features params))
-                 (cfeat/check-file-features! (:features file)))
+        proj  (db/get conn :project {:id (:project-id file)})
 
-        page (binding [pmap/*load-fn* (partial feat.fdata/load-pointer cfg file-id)]
-               (let [page-id (or page-id (-> file :data :pages first))
-                     page    (dm/get-in file [:data :pages-index page-id])]
-                 (if (pmap/pointer-map? page)
-                   (deref page)
-                   page)))]
+        team  (-> (db/get conn :team {:id (:team-id proj)})
+                  (teams/decode-row))
+
+        _     (-> (cfeat/get-team-enabled-features cf/flags team)
+                  (cfeat/check-client-features! (:features params))
+                  (cfeat/check-file-features! (:features file)))
+
+        page  (binding [pmap/*load-fn* (partial feat.fdata/load-pointer cfg file-id)]
+                (let [page-id (or page-id (-> file :data :pages first))
+                      page    (dm/get-in file [:data :pages-index page-id])]
+                  (if (pmap/pointer-map? page)
+                    (deref page)
+                    page)))]
+
+    (when-not perms
+      (ex/raise :type :not-found
+                :code :object-not-found
+                :hint "object not found"))
 
     (cond-> (prune-thumbnails page)
       (some? object-id)
@@ -733,7 +749,9 @@
                              :project-id project-id
                              :file-id id)
 
-        file (get-file cfg id :project-id project-id)]
+        file (get-file cfg id
+                       :project-id project-id
+                       :read-only? true)]
 
     (-> (cfeat/get-team-enabled-features cf/flags team)
         (cfeat/check-client-features! (:features params))

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

@@ -10,7 +10,6 @@
    [app.common.data.macros :as dm]
    [app.common.features :as cfeat]
    [app.common.files.helpers :as cfh]
-   [app.common.files.migrations :as fmg]
    [app.common.geom.shapes :as gsh]
    [app.common.schema :as sm]
    [app.common.thumbnails :as thc]
@@ -18,7 +17,6 @@
    [app.config :as cf]
    [app.db :as db]
    [app.db.sql :as-alias sql]
-   [app.features.fdata :as feat.fdata]
    [app.loggers.audit :as-alias audit]
    [app.loggers.webhooks :as-alias webhooks]
    [app.media :as media]
@@ -200,14 +198,13 @@
   (db/run! cfg (fn [{:keys [::db/conn] :as cfg}]
                  (files/check-read-permissions! conn profile-id file-id)
 
-                 (let [team     (teams/get-team conn
-                                                :profile-id profile-id
-                                                :file-id file-id)
+                 (let [team (teams/get-team conn
+                                            :profile-id profile-id
+                                            :file-id file-id)
 
-                       file     (binding [pmap/*load-fn* (partial feat.fdata/load-pointer cfg file-id)]
-                                  (-> (files/get-file cfg file-id :migrate? false)
-                                      (update :data feat.fdata/process-pointers deref)
-                                      (fmg/migrate-file)))]
+                       file (files/get-file cfg file-id
+                                            :preload-pointers? true
+                                            :read-only? true)]
 
                    (-> (cfeat/get-team-enabled-features cf/flags team)
                        (cfeat/check-file-features! (:features file)))

backend/src/app/srepl/fixes.clj

@@ -179,7 +179,7 @@
                       component-child (first component-children)]
                   (if (or (nil? child) (nil? component-child))
                     container
-                    (let [container (if (and (not (ctk/is-main-of? component-child child true))
+                    (let [container (if (and (not (ctk/is-main-of? component-child child))
                                              (nil? (ctk/get-swap-slot child))
                                              (ctk/instance-head? child))
                                       (let [slot (guess-swap-slot component-child component-container)]

common/src/app/common/data/macros.cljc

@@ -6,7 +6,7 @@
 
 (ns app.common.data.macros
   "Data retrieval & manipulation specific macros."
-  (:refer-clojure :exclude [get-in select-keys str with-open min max])
+  (:refer-clojure :exclude [get-in select-keys str with-open max])
   #?(:cljs (:require-macros [app.common.data.macros]))
   (:require
    #?(:clj [clojure.core :as c]
@@ -144,3 +144,8 @@
                  (str "expr assert: " (pr-str expr)))]
      (when *assert*
        `(runtime-assert ~hint (fn [] ~expr))))))
+
+(defn truncate
+  "Truncates a string to a certain length"
+  [s max-length]
+  (subs s 0 (min max-length (count s))))

common/src/app/common/features.cljc

@@ -103,9 +103,7 @@
   "Translate a flag to a feature name"
   [flag]
   (case flag
-    :feature-components-v2 "components/v2"
     :feature-styles-v2 "styles/v2"
-    :feature-grid-layout "layout/grid"
     :feature-fdata-objects-map "fdata/objects-map"
     :feature-fdata-pointer-map "fdata/pointer-map"
     :feature-plugins "plugins/runtime"
@@ -216,6 +214,12 @@
 
     (check-supported-features! file-features)
 
+    ;; Components v1 is deprecated
+    (when-not (contains? file-features "components/v2")
+      (ex/raise :type :restriction
+                :code :file-in-components-v1
+                :hint "components v1 is deprecated"))
+
     (let [not-supported (-> file-features
                             (set/difference enabled-features)
                             (set/difference backend-only-features)

common/src/app/common/files/builder.cljc

@@ -11,7 +11,6 @@
    [app.common.exceptions :as ex]
    [app.common.files.changes :as ch]
    [app.common.geom.point :as gpt]
-   [app.common.geom.rect :as grc]
    [app.common.geom.shapes :as gsh]
    [app.common.pprint :as pp]
    [app.common.schema :as sm]
@@ -38,20 +37,12 @@
                         fail-on-spec?]
                  :or   {add-container? false
                         fail-on-spec? false}}]
-   (let [components-v2 (dm/get-in file [:data :options :components-v2])
-         component-id  (:current-component-id file)
-         change        (cond-> change
-                         (and add-container? (some? component-id) (not components-v2))
-                         (-> (assoc :component-id component-id)
-                             (cond-> (some? (:current-frame-id file))
-                               (assoc :frame-id (:current-frame-id file))))
-
-                         (and add-container? (or (nil? component-id) components-v2))
+   (let [change        (cond-> change
+                         add-container?
                          (assoc :page-id  (:current-page-id file)
                                 :frame-id (:current-frame-id file)))
 
-         valid? (or (and components-v2
-                         (nil? (:component-id change))
+         valid? (or (and (nil? (:component-id change))
                          (nil? (:page-id change)))
                     (ch/valid-change? change))]
 
@@ -66,11 +57,11 @@
 
      (cond-> file
        (and valid? (or (not add-container?) (some? (:component-id change)) (some? (:page-id change))))
-       (-> (update :changes conjv change)                      ;; In components-v2 we do not add shapes
-           (update :data ch/process-changes [change] false))   ;; inside a component
+       (-> (update :changes conjv change)
+           (update :data ch/process-changes [change] false))
 
        (not valid?)
-       (update :errors conjv change)))));)
+       (update :errors conjv change)))))
 
 (defn- lookup-objects
   ([file]
@@ -185,12 +176,10 @@
         (update :parent-stack conjv (:id obj)))))
 
 (defn close-artboard [file]
-  (let [components-v2 (dm/get-in file [:data :options :components-v2])
-        parent-id (-> file :parent-stack peek)
+  (let [parent-id (-> file :parent-stack peek)
         parent (lookup-shape file parent-id)
         current-frame-id (or (:frame-id parent)
-                             (when (or (nil? (:current-component-id file)) components-v2)
-                               root-id))]
+                             root-id)]
     (-> file
         (assoc :current-frame-id current-frame-id)
         (update :parent-stack pop))))
@@ -283,14 +272,14 @@
 
           :else
           (let [objects (lookup-objects file)
-                bool-content (gsh/calc-bool-content bool objects)
-                bool' (gsh/update-bool-selrect bool children objects)]
+                content (gsh/calc-bool-content bool objects)
+                bool'   (gsh/update-bool-selrect bool children objects)]
             (commit-change
              file
              {:type :mod-obj
               :id bool-id
               :operations
-              [{:type :set :attr :bool-content :val bool-content :ignore-touched true}
+              [{:type :set :attr :content :val content :ignore-touched true}
                {:type :set :attr :selrect :val (:selrect bool') :ignore-touched true}
                {:type :set :attr :points  :val (:points bool') :ignore-touched true}
                {:type :set :attr :x       :val (-> bool' :selrect :x) :ignore-touched true}
@@ -514,58 +503,29 @@
 
 (defn start-component
   ([file data]
-   (let [components-v2 (dm/get-in file [:data :options :components-v2])
-         root-type     (if components-v2 :frame :group)]
-     (start-component file data root-type)))
+   (start-component file data :frame))
 
   ([file data root-type]
-   ;; FIXME: data probably can be a shape instance, then we can use gsh/shape->rect
-   (let [components-v2 (dm/get-in file [:data :options :components-v2])
-         selrect (or (grc/make-rect (:x data) (:y data) (:width data) (:height data))
-                     grc/empty-rect)
-         name               (:name data)
+   (let [name               (:name data)
          path               (:path data)
          main-instance-id   (:main-instance-id data)
          main-instance-page (:main-instance-page data)
 
-         ;; In components v1 we must create the root shape and set it inside
-         ;; the :objects attribute of the component. When in components-v2,
-         ;; this will be ignored as the root shape has already been created
-         ;; in its page, by the normal page import.
-         attrs (-> data
-                   (assoc :type root-type)
-                   (assoc :x (:x selrect))
-                   (assoc :y (:y selrect))
-                   (assoc :width (:width selrect))
-                   (assoc :height (:height selrect))
-                   (assoc :selrect selrect)
-                   (dissoc :path)
-                   (dissoc :main-instance-id)
-                   (dissoc :main-instance-page)
-                   (dissoc :main-instance-x)
-                   (dissoc :main-instance-y))
-
-         obj   (-> (cts/setup-shape attrs)
-                   (check-name file root-type)
-                   ;; Components need to have nil values for frame and parent
-                   (assoc :frame-id nil)
-                   (assoc :parent-id nil))]
+         obj-id             (or (:id data) (uuid/next))]
 
      (-> file
          (commit-change
-          (cond-> {:type :add-component
-                   :id (:id obj)
-                   :name name
-                   :path path
-                   :main-instance-id main-instance-id
-                   :main-instance-page main-instance-page}
-            (not components-v2)
-            (assoc :shapes [obj])))
+          {:type :add-component
+           :id obj-id
+           :name name
+           :path path
+           :main-instance-id main-instance-id
+           :main-instance-page main-instance-page})
 
-         (assoc :last-id (:id obj))
-         (assoc :parent-stack [(:id obj)])
-         (assoc :current-component-id (:id obj))
-         (assoc :current-frame-id (if (= (:type obj) :frame) (:id obj) uuid/zero))))))
+         (assoc :last-id obj-id)
+         (assoc :parent-stack [obj-id])
+         (assoc :current-component-id obj-id)
+         (assoc :current-frame-id (if (= root-type :frame) obj-id uuid/zero))))))
 
 (defn start-deleted-component
   [file data]
@@ -600,8 +560,7 @@
 
         file
         (cond
-          ;; In components-v2 components haven't any shape inside them.
-          (and component-data (:main-instance-id component-data))
+          component-data
           (update file :data
                   (fn [data]
                     (ctkl/update-component data component-id dissoc :objects)))
@@ -677,17 +636,12 @@
         page             (ctpl/get-page (:data file) page-id)
         component        (ctkl/get-component (:data file) component-id)
 
-        components-v2    (dm/get-in file [:options :components-v2])
-
         [shape shapes]
         (ctn/make-component-instance page
                                      component
                                      (:id file)
                                      (gpt/point x
-                                                y)
-                                     components-v2
-                                     #_{:main-instance true
-                                        :force-id main-instance-id})]
+                                                y))]
 
     (as-> file $
       (reduce #(commit-change %1

common/src/app/common/files/changes.cljc

@@ -26,11 +26,10 @@
    [app.common.types.pages-list :as ctpl]
    [app.common.types.shape :as cts]
    [app.common.types.shape-tree :as ctst]
-   [app.common.types.token :as cto]
-   [app.common.types.token-theme :as ctot]
    [app.common.types.tokens-lib :as ctob]
    [app.common.types.typographies-list :as ctyl]
    [app.common.types.typography :as ctt]
+   [app.common.types.variant :as ctv]
    [app.common.uuid :as uuid]
    [clojure.set :as set]))
 
@@ -336,13 +335,17 @@
       [:type [:= :mod-component]]
       [:id ::sm/uuid]
       [:shapes {:optional true} [:vector {:gen/max 3} :any]]
-      [:name {:optional true} :string]]]
+      [:name {:optional true} :string]
+      [:variant-id {:optional true} ::sm/uuid]
+      [:variant-properties {:optional true} [:vector ::ctv/variant-property]]]]
 
     [:del-component
      [:map {:title "DelComponentChange"}
       [:type [:= :del-component]]
       [:id ::sm/uuid]
-      [:main-instance {:optional true} :any]
+      ;; when it is an undo of a cut-paste, we need to undo the movement
+      ;; of the shapes so we need to move them delta
+      [:delta {:optional true} ::gpt/point]
       [:skip-undelete? {:optional true} :boolean]]]
 
     [:restore-component
@@ -403,7 +406,7 @@
       [:type [:= :set-token-theme]]
       [:theme-name :string]
       [:group :string]
-      [:theme [:maybe ::ctot/token-theme]]]]
+      [:theme [:maybe ctob/schema:token-theme-attrs]]]]
 
     [:set-tokens-lib
      [:map {:title "SetTokensLib"}
@@ -415,14 +418,14 @@
       [:type [:= :set-token-set]]
       [:set-name :string]
       [:group? :boolean]
-      [:token-set [:maybe ::ctot/token-set]]]]
+      [:token-set [:maybe ctob/schema:token-set-attrs]]]]
 
     [:set-token
      [:map {:title "SetTokenChange"}
       [:type [:= :set-token]]
       [:set-name :string]
       [:token-name :string]
-      [:token [:maybe ::cto/token]]]]]])
+      [:token [:maybe ctob/schema:token-attrs]]]]]])
 
 (def schema:changes
   [:sequential {:gen/max 5 :gen/min 1} schema:change])
@@ -956,8 +959,8 @@
   (ctkl/mod-component data params))
 
 (defmethod process-change :del-component
-  [data {:keys [id skip-undelete? main-instance]}]
-  (ctf/delete-component data id skip-undelete? main-instance))
+  [data {:keys [id skip-undelete? delta]}]
+  (ctf/delete-component data id skip-undelete? delta))
 
 (defmethod process-change :restore-component
   [data {:keys [id page-id]}]

common/src/app/common/files/changes_builder.cljc

@@ -921,11 +921,11 @@
         (apply-changes-local))))
 
 (defn add-component
-  ([changes id path name new-shapes updated-shapes main-instance-id main-instance-page]
-   (add-component changes id path name new-shapes updated-shapes main-instance-id main-instance-page nil nil nil))
-  ([changes id path name new-shapes updated-shapes main-instance-id main-instance-page annotation]
-   (add-component changes id path name new-shapes updated-shapes main-instance-id main-instance-page annotation nil nil))
-  ([changes id path name new-shapes updated-shapes main-instance-id main-instance-page annotation variant-id variant-properties & {:keys [apply-changes-local-library?]}]
+  ([changes id path name updated-shapes main-instance-id main-instance-page]
+   (add-component changes id path name updated-shapes main-instance-id main-instance-page nil nil nil))
+  ([changes id path name updated-shapes main-instance-id main-instance-page annotation]
+   (add-component changes id path name updated-shapes main-instance-id main-instance-page annotation nil nil))
+  ([changes id path name updated-shapes main-instance-id main-instance-page annotation variant-id variant-properties & {:keys [apply-changes-local-library?]}]
    (assert-page-id! changes)
    (assert-objects! changes)
    (let [page-id (::page-id (meta changes))
@@ -964,11 +964,11 @@
                                       :name name
                                       :main-instance-id main-instance-id
                                       :main-instance-page main-instance-page
-                                      :annotation annotation
-                                      :variant-id variant-id
-                                      :variant-properties variant-properties}
-                               (some? new-shapes)  ;; this will be null in components-v2
-                               (assoc :shapes (vec new-shapes))))
+                                      :annotation annotation}
+                               (some? variant-id)
+                               (assoc :variant-id variant-id)
+                               (seq variant-properties)
+                               (assoc :variant-properties variant-properties)))
                        (into (map mk-change) updated-shapes))))
          (update :undo-changes
                  (fn [undo-changes]
@@ -991,27 +991,39 @@
         new-component  (update-fn prev-component)]
     (if prev-component
       (-> changes
-          (update :redo-changes conj {:type :mod-component
-                                      :id id
-                                      :name (:name new-component)
-                                      :path (:path new-component)
-                                      :main-instance-id (:main-instance-id new-component)
-                                      :main-instance-page (:main-instance-page new-component)
-                                      :annotation (:annotation new-component)
-                                      :variant-id (:variant-id new-component)
-                                      :variant-properties (:variant-properties new-component)
-                                      :objects (:objects new-component) ;; this won't exist in components-v2 (except for deleted components)
-                                      :modified-at (:modified-at new-component)})
-          (update :undo-changes conj {:type :mod-component
-                                      :id id
-                                      :name (:name prev-component)
-                                      :path (:path prev-component)
-                                      :main-instance-id (:main-instance-id prev-component)
-                                      :main-instance-page (:main-instance-page prev-component)
-                                      :annotation (:annotation prev-component)
-                                      :variant-id (:variant-id prev-component)
-                                      :variant-properties (:variant-properties prev-component)
-                                      :objects (:objects prev-component)})
+          (update :redo-changes conj (cond-> {:type :mod-component
+                                              :id id
+                                              :name (:name new-component)
+                                              :path (:path new-component)
+                                              :main-instance-id (:main-instance-id new-component)
+                                              :main-instance-page (:main-instance-page new-component)
+                                              :annotation (:annotation new-component)
+                                              :objects (:objects new-component) ;; for deleted components
+                                              :modified-at (:modified-at new-component)}
+                                       (some? (:variant-id new-component))
+                                       (assoc :variant-id (:variant-id new-component))
+                                       (nil? (:variant-id new-component))
+                                       (dissoc :variant-id)
+                                       (seq (:variant-properties new-component))
+                                       (assoc :variant-properties (:variant-properties new-component))
+                                       (not (seq (:variant-properties new-component)))
+                                       (dissoc :variant-properties)))
+          (update :undo-changes conj (cond-> {:type :mod-component
+                                              :id id
+                                              :name (:name prev-component)
+                                              :path (:path prev-component)
+                                              :main-instance-id (:main-instance-id prev-component)
+                                              :main-instance-page (:main-instance-page prev-component)
+                                              :annotation (:annotation prev-component)
+                                              :objects (:objects prev-component)}
+                                       (some? (:variant-id prev-component))
+                                       (assoc :variant-id (:variant-id prev-component))
+                                       (nil? (:variant-id prev-component))
+                                       (dissoc :variant-id)
+                                       (seq (:variant-properties prev-component))
+                                       (assoc :variant-properties (:variant-properties prev-component))
+                                       (not (seq (:variant-properties prev-component)))
+                                       (dissoc :variant-properties)))
           (cond-> apply-changes-local-library?
             (apply-changes-local {:apply-to-library? true})))
       changes)))
@@ -1027,7 +1039,7 @@
                                   :page-id page-id})))
 
 (defn restore-component
-  [changes id page-id main-instance]
+  [changes id page-id delta]
   (assert-library! changes)
   (-> changes
       (update :redo-changes conj {:type :restore-component
@@ -1035,7 +1047,34 @@
                                   :page-id page-id})
       (update :undo-changes conj {:type :del-component
                                   :id id
-                                  :main-instance main-instance})))
+                                  :delta delta})))
+
+(defn reorder-children
+  [changes id children]
+  (assert-page-id! changes)
+  (assert-objects! changes)
+
+  (let [page-id (::page-id (meta changes))
+        objects (lookup-objects changes)
+        shape (get objects id)
+        old-children (:shapes shape)
+
+        redo-change
+        {:type :reorder-children
+         :parent-id (:id shape)
+         :page-id page-id
+         :shapes children}
+
+        undo-change
+        {:type :reorder-children
+         :parent-id (:id shape)
+         :page-id page-id
+         :shapes old-children}]
+
+    (-> changes
+        (update :redo-changes conj redo-change)
+        (update :undo-changes conj undo-change)
+        (apply-changes-local))))
 
 (defn reorder-grid-children
   [changes ids]
@@ -1083,3 +1122,11 @@
 (defn get-objects
   [changes]
   (dm/get-in (::file-data (meta changes)) [:pages-index uuid/zero :objects]))
+
+(defn get-page
+  [changes]
+  (::page (meta changes)))
+
+(defn get-page-id
+  [changes]
+  (::page-id (meta changes)))

common/src/app/common/files/helpers.cljc

@@ -427,11 +427,6 @@
         (map #(str/concat base-name (suffix-fn %))
              (iterate inc 1))))
 
-(defn ^:private get-suffix
-  "Default suffix impelemtation"
-  [copy-count]
-  (str/concat " " copy-count))
-
 (defn generate-unique-name
   "Generates a unique name by selecting the first available name from a generated sequence.
    The sequence consists of `base-name` and its variants, avoiding conflicts with `existing-names`.
@@ -445,8 +440,7 @@
 
    Returns:
    - A unique name not present in `existing-names`."
-  [base-name existing-names & {:keys [suffix-fn immediate-suffix?]
-                               :or {suffix-fn get-suffix}}]
+  [base-name existing-names & {:keys [suffix-fn immediate-suffix? suffix]}]
   (dm/assert!
    "expected a set of strings"
    (coll? existing-names))
@@ -454,9 +448,21 @@
   (dm/assert!
    "expected a string for `basename`."
    (string? base-name))
-  (let [existing-name-set (cond-> (set existing-names)
+  (let [suffix-fn (if suffix-fn
+                    suffix-fn
+                    (if suffix
+                      (fn [copy-count]
+                        (str/concat "-"
+                                    suffix
+                                    (when (> copy-count 1)
+                                      (str "-" copy-count))))
+                      (fn [copy-count]
+                        (str/concat " " copy-count))))
+
+        existing-name-set (cond-> (set existing-names)
                             immediate-suffix? (conj base-name))
         names (name-seq base-name suffix-fn)]
+
     (->> names
          (remove #(contains? existing-name-set %))
          first)))

common/src/app/common/files/migrations.cljc

@@ -1264,6 +1264,26 @@
         (update :pages-index d/update-vals update-container)
         (d/update-when :components d/update-vals update-container))))
 
+(defmethod migrate-data "0002-normalize-bool-content"
+  [data _]
+  (letfn [(update-object [object]
+            ;; NOTE: we still preserve the previous value for possible
+            ;; rollback, we still need to perform an other migration
+            ;; for properly delete the bool-content prop from shapes
+            ;; once the know the migration was OK
+            (if (cfh/bool-shape? object)
+              (if-let [content (:bool-content object)]
+                (assoc object :content content)
+                object)
+              (dissoc object :bool-content :bool-type)))
+
+          (update-container [container]
+            (d/update-when container :objects update-vals update-object))]
+
+    (-> data
+        (update :pages-index update-vals update-container)
+        (update :components update-vals update-container))))
+
 (defmethod migrate-data "0003-fix-root-shape"
   [data _]
   (letfn [(update-object [shape]
@@ -1341,5 +1361,6 @@
          "legacy-66"
          "legacy-67"
          "0001-remove-tokens-from-groups"
+         "0002-normalize-bool-content"
          "0002-clean-shape-interactions"
          "0003-fix-root-shape"]))

common/src/app/common/files/repair.cljc

@@ -572,6 +572,51 @@
         (pcb/with-file-data file-data)
         (pcb/update-shapes [(:id shape)] repair-shape))))
 
+(defmethod repair-error :not-a-variant
+  [_ error file _]
+  (log/error :hint "Variant error code, we don't want to auto repair it for now" :code (:code error))
+  file)
+
+(defmethod repair-error :invalid-variant-id
+  [_ error file _]
+  (log/error :hint "Variant error code, we don't want to auto repair it for now" :code (:code error))
+  file)
+
+(defmethod repair-error :invalid-variant-properties
+  [_ error file _]
+  (log/error :hint "Variant error code, we don't want to auto repair it for now" :code (:code error))
+  file)
+
+(defmethod repair-error :variant-not-main
+  [_ error file _]
+  (log/error :hint "Variant error code, we don't want to auto repair it for now" :code (:code error))
+  file)
+
+(defmethod repair-error :parent-not-variant
+  [_ error file _]
+  (log/error :hint "Variant error code, we don't want to auto repair it for now" :code (:code error))
+  file)
+
+(defmethod repair-error :variant-bad-name
+  [_ error file _]
+  (log/error :hint "Variant error code, we don't want to auto repair it for now" :code (:code error))
+  file)
+
+(defmethod repair-error :variant-no-properties
+  [_ error file _]
+  (log/error :hint "Variant error code, we don't want to auto repair it for now" :code (:code error))
+  file)
+
+(defmethod repair-error :variant-bad-variant-name
+  [_ error file _]
+  (log/error :hint "Variant error code, we don't want to auto repair it for now" :code (:code error))
+  file)
+
+(defmethod repair-error :variant-component-bad-name
+  [_ error file _]
+  (log/error :hint "Variant error code, we don't want to auto repair it for now" :code (:code error))
+  file)
+
 (defmethod repair-error :default
   [_ error file _]
   (log/error :hint "Unknown error code, don't know how to repair" :code (:code error))

common/src/app/common/files/shapes_helpers.cljc

@@ -62,6 +62,10 @@
     changes id parent-id objects selected index frame-name without-fill? nil))
 
   ([changes id parent-id objects selected index frame-name without-fill? target-cell-id]
+   (prepare-create-artboard-from-selection
+    changes id parent-id objects selected index frame-name without-fill? target-cell-id nil))
+
+  ([changes id parent-id objects selected index frame-name without-fill? target-cell-id delta]
    (when-let [selected-objs (->> selected
                                  (map (d/getf objects))
                                  (not-empty))]
@@ -99,10 +103,11 @@
                     :id))
              target-cell-id)
 
+
            attrs
            {:type :frame
-            :x (:x srect)
-            :y (:y srect)
+            :x (cond-> (:x srect) delta (+ (:x delta)))
+            :y (cond-> (:y srect) delta (+ (:y delta)))
             :width (:width srect)
             :height (:height srect)}
 

common/src/app/common/files/tokens.cljc

@@ -1,8 +1,13 @@
-(ns app.main.ui.workspace.tokens.token
+;; 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.common.files.tokens
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
-   [app.main.ui.workspace.tokens.tinycolor :as tinycolor]
    [clojure.set :as set]
    [cuerdas.core :as str]))
 
@@ -128,18 +133,6 @@
 (defn color-token? [token]
   (= (:type token) :color))
 
-
 ;; FIXME: this should be precalculated ?
 (defn is-reference? [token]
   (str/includes? (:value token) "{"))
-
-(defn color-bullet-color [token-color-value]
-  (when-let [tc (tinycolor/valid-color token-color-value)]
-    (if (tinycolor/alpha tc)
-      {:color (tinycolor/->hex-string tc)
-       :opacity (tinycolor/alpha tc)}
-      (tinycolor/->hex-string tc))))
-
-(defn resolved-token-bullet-color [{:keys [resolved-value] :as token}]
-  (when (and resolved-value (color-token? token))
-    (color-bullet-color resolved-value)))

common/src/app/common/files/validate.cljc

@@ -10,12 +10,15 @@
    [app.common.data.macros :as dm]
    [app.common.exceptions :as ex]
    [app.common.files.helpers :as cfh]
+   [app.common.files.variant :as cfv]
    [app.common.schema :as sm]
    [app.common.types.component :as ctk]
+   [app.common.types.components-list :as ctkl]
    [app.common.types.container :as ctn]
    [app.common.types.file :as ctf]
    [app.common.types.pages-list :as ctpl]
    [app.common.types.shape-tree :as ctst]
+   [app.common.types.variant :as ctv]
    [app.common.uuid :as uuid]
    [cuerdas.core :as str]))
 
@@ -56,7 +59,17 @@
     :instance-head-not-frame
     :misplaced-slot
     :missing-slot
-    :shape-ref-cycle})
+    :shape-ref-cycle
+    :not-a-variant
+    :invalid-variant-id
+    :invalid-variant-properties
+    :variant-not-main
+    :parent-not-variant
+    :variant-bad-name
+    :variant-bad-variant-name
+    :variant-component-bad-name
+    :variant-no-properties
+    :variant-component-bad-id})
 
 (def ^:private schema:error
   [:map {:title "ValidationError"}
@@ -401,6 +414,68 @@
   (check-empty-swap-slot shape file page)
   (run! #(check-shape % file page libraries :context :not-component) (:shapes shape)))
 
+(defn- check-variant-container
+  "Shape is a variant container, so:
+     -all its children should be variants with variant-id equals to the shape-id
+     -all the components should have the same properties
+   "
+  [shape file page]
+  (let [shape-id   (:id shape)
+        shapes     (:shapes shape)
+        children   (map #(ctst/get-shape page %) shapes)
+        prop-names (cfv/extract-properties-names (first children) (:data file))]
+    (doseq [child children]
+      (if (not (ctk/is-variant? child))
+        (report-error :not-a-variant
+                      (str/ffmt "Shape % should be a variant" (:id child))
+                      child file page)
+        (do
+          (when (not= (:variant-id child) shape-id)
+            (report-error :invalid-variant-id
+                          (str/ffmt "Variant % has invalid variant-id %" (:id child) (:variant-id child))
+                          child file page))
+          (when (not= prop-names (cfv/extract-properties-names child (:data file)))
+            (report-error :invalid-variant-properties
+                          (str/ffmt "Variant % has invalid properties %" (:id child) (vec prop-names))
+                          child file page)))))))
+
+(defn- check-variant
+  "Shape is a variant, so
+     -it should be a main component
+     -its parent should be a variant-container
+     -its variant-name is derived from the properties
+     -its name should be tha same as its parent's
+   "
+  [shape file page]
+  (let [parent    (ctst/get-shape page (:parent-id shape))
+        component (ctkl/get-component (:data file) (:component-id shape) true)
+        name      (ctv/properties-to-name (:variant-properties component))]
+    (when-not (ctk/main-instance? shape)
+      (report-error :variant-not-main
+                    (str/ffmt "Variant % is not a main instance" (:id shape))
+                    shape file page))
+    (when-not (ctk/is-variant-container? parent)
+      (report-error :parent-not-variant
+                    (str/ffmt "Variant % has an invalid parent" (:id shape))
+                    shape file page))
+
+    (when-not (= name (:variant-name shape))
+      (report-error :variant-bad-variant-name
+                    (str/ffmt "Variant % has an invalid variant-name" (:id shape))
+                    shape file page))
+    (when-not (= (:name parent) (:name shape))
+      (report-error :variant-bad-name
+                    (str/ffmt "Variant % has an invalid name" (:id shape))
+                    shape file page))
+    (when-not (= (:name parent) (cfh/merge-path-item (:path component) (:name component)))
+      (report-error :variant-component-bad-name
+                    (str/ffmt "Component % has an invalid name" (:id shape))
+                    shape file page))
+    (when-not (= (:variant-id component) (:variant-id shape))
+      (report-error :variant-component-bad-id
+                    (str/ffmt "Variant % has adifferent variant-id than its component" (:id shape))
+                    shape file page))))
+
 (defn- check-shape
   "Validate referential integrity and semantic coherence of
   a shape and all its children. Report all errors found.
@@ -421,6 +496,12 @@
       (check-parent-children shape file page)
       (check-frame shape file page)
 
+      (when (ctk/is-variant-container? shape)
+        (check-variant-container shape file page))
+
+      (when (ctk/is-variant? shape)
+        (check-variant shape file page))
+
       (if (ctk/instance-head? shape)
         (if (not= :frame (:type shape))
           (report-error :instance-head-not-frame
@@ -496,6 +577,24 @@
                     "This deleted component has shapes with shape-ref pointing to self"
                     component file nil :cycles-ids cycles-ids))))
 
+(defn- check-variant-component
+  "Component is a variant, so:
+     -Its main should be a variant
+     -It should have at least one variant property"
+  [component file]
+  (let [component-page (ctf/get-component-page (:data file) component)
+        main-component (if (:deleted component)
+                         (dm/get-in component [:objects (:main-instance-id component)])
+                         (ctst/get-shape component-page (:main-instance-id component)))]
+    (when-not (ctk/is-variant? main-component)
+      (report-error :not-a-variant
+                    (str/ffmt "Shape % should be a variant" (:id main-component))
+                    main-component file component-page))
+    (when (< (count (:variant-properties component)) 1)
+      (report-error :variant-no-properties
+                    (str/ffmt "Component variant % should have properties" (:id main-component))
+                    main-component file nil))))
+
 (defn- check-component
   "Validate semantic coherence of a component. Report all errors found."
   [component file]
@@ -505,7 +604,10 @@
                   component file nil))
   (when (:deleted component)
     (check-component-duplicate-swap-slot component file)
-    (check-ref-cycles component file)))
+    (check-ref-cycles component file))
+
+  (when (ctk/is-variant? component)
+    (check-variant-component component file)))
 
 (defn- get-orphan-shapes
   [{:keys [objects] :as page}]

common/src/app/common/files/variant.cljc

@@ -0,0 +1,84 @@
+;; 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.common.files.variant
+  (:require
+   [app.common.data.macros :as dm]
+   [app.common.types.component :as ctc]
+   [app.common.types.components-list :as ctcl]
+   [app.common.types.variant :as ctv]
+   [cuerdas.core :as str]))
+
+
+(defn find-variant-components
+  "Find a list of the components thet belongs to this variant-id"
+  [data objects variant-id]
+  ;; We can't simply filter components, because we need to maintain the order
+  (->> (dm/get-in objects [variant-id :shapes])
+       (map #(dm/get-in objects [% :component-id]))
+       (map #(ctcl/get-component data % true))
+       reverse))
+
+(defn- dashes-to-end
+  [property-values]
+  (let [dashes (if (some #(= % "--") property-values) ["--"] [])]
+    (concat (remove #(= % "--") property-values) dashes)))
+
+
+(defn extract-properties-names
+  [shape data]
+  (->> shape
+       (#(ctcl/get-component data (:component-id %) true))
+       :variant-properties
+       (map :name)))
+
+
+(defn extract-properties-values
+  [data objects variant-id]
+  (->> (find-variant-components data objects variant-id)
+       (mapcat :variant-properties)
+       (group-by :name)
+       (map (fn [[k v]]
+              {:name k
+               :value (->> v
+                           (map #(if (str/empty? (:value %)) "--" (:value %)))
+                           distinct
+                           dashes-to-end)}))))
+
+(defn get-variant-mains
+  [component data]
+  (assert (ctv/valid-variant-component? component) "expected valid component variant")
+  (when-let [variant-id (:variant-id component)]
+    (let [page-id (:main-instance-page component)
+          objects (-> (dm/get-in data [:pages-index page-id])
+                      (get :objects))]
+      (dm/get-in objects [variant-id :shapes]))))
+
+
+(defn is-secondary-variant?
+  [component data]
+  (let [shapes  (get-variant-mains component data)]
+    (and (seq shapes)
+         (not= (:main-instance-id component) (last shapes)))))
+
+(defn get-primary-variant
+  [data component]
+  (let [page-id    (:main-instance-page component)
+        objects    (-> (dm/get-in data [:pages-index page-id])
+                       (get :objects))
+        variant-id (:variant-id component)]
+    (->> (dm/get-in objects [variant-id :shapes])
+         peek
+         (get objects))))
+
+(defn get-primary-component
+  [data component-id]
+  (when-let [component (ctcl/get-component data component-id)]
+    (if (ctc/is-variant? component)
+      (->> component
+           (get-primary-variant data)
+           :component-id
+           (ctcl/get-component data))
+      component)))

common/src/app/common/flags.cljc

@@ -79,7 +79,7 @@
     :file-schema-validation
     ;; Reports the schema validation errors internally.
     :soft-file-schema-validation
-    ;; Activates the referential integrity validation during update file; related to components-v2.
+    ;; Activates the referential integrity validation during update file.
     :file-validation
     ;; Reports the referential integrity validation errors internally.
     :soft-file-validation
@@ -125,6 +125,7 @@
     :export-file-v3
     :render-wasm-dpr
     :hide-release-modal
+    :subscriptions
     :subscriptions-old})
 
 (def all-flags

common/src/app/common/geom/shapes/grid_layout/layout_data.cljc

@@ -39,7 +39,7 @@
 ;;
 ;;   5. If any track still has an infinite growth limit set its growth limit to its base size.
 
-;;   - Distribute extra space accross spaned tracks
+;; - Distribute extra space accross spaned tracks
 ;; - Maximize tracks
 ;;
 ;; - Expand flexible tracks
@@ -198,7 +198,7 @@
 
     track-list))
 
-(defn add-auto-size
+(defn stretch-tracks
   [track-list add-size]
   (->> track-list
        (mapv (fn [{:keys [type size max-size] :as track}]
@@ -357,7 +357,8 @@
                       to-idx (+ (dec (get cell prop)) (get cell prop-span))
                       indexed-tracks (subvec (d/enumerate track-list) from-idx to-idx)
 
-                      to-allocate (size-to-allocate type parent (get children-map shape-id) cell bounds objects)
+                      to-allocate
+                      (size-to-allocate type parent (get children-map shape-id) cell bounds objects)
 
                       ;; Remove the size and the tracks that are not allocated
                       [to-allocate total-frs indexed-tracks]
@@ -493,11 +494,11 @@
 
          column-tracks (cond-> column-tracks
                          (= :stretch (:layout-justify-content parent))
-                         (add-auto-size column-add-auto))
+                         (stretch-tracks column-add-auto))
 
          row-tracks    (cond-> row-tracks
                          (= :stretch (:layout-align-content parent))
-                         (add-auto-size row-add-auto))
+                         (stretch-tracks row-add-auto))
 
          column-total-size (tracks-total-size column-tracks)
          row-total-size    (tracks-total-size row-tracks)

common/src/app/common/geom/shapes/path.cljc

@@ -347,7 +347,11 @@
                move-p nil
                content (seq content)]
           (if content
-            (let [command (first content)
+            (let [last-p (last content)
+                  content (if (= :move-to (:command last-p))
+                            (butlast content)
+                            content)
+                  command (first content)
                   to-p    (command->point command)
 
                   [from-p move-p command-pts]

common/src/app/common/geom/shapes/transforms.cljc

@@ -95,8 +95,8 @@
         (d/update-when :x d/safe+ dx)
         (d/update-when :y d/safe+ dy)
         (d/update-when :position-data move-position-data mvec)
-        (cond-> (= :bool type) (update :bool-content gpa/move-content mvec))
-        (cond-> (= :path type) (update :content gpa/move-content mvec)))))
+        (cond-> (or (= :bool type) (= :path type))
+          (update :content gpa/move-content mvec)))))
 
 ;; --- Absolute Movement
 
@@ -317,13 +317,10 @@
         points  (gco/transform-points  (dm/get-prop shape :points) transform-mtx)
         selrect (gco/transform-selrect (dm/get-prop shape :selrect) transform-mtx)
 
-        shape   (if (= type :bool)
-                  (update shape :bool-content gpa/transform-content transform-mtx)
-                  shape)
         shape   (if (= type :text)
                   (update shape :position-data transform-position-data transform-mtx)
                   shape)
-        shape   (if (= type :path)
+        shape   (if (or (= type :path) (= type :bool))
                   (update shape :content gpa/transform-content transform-mtx)
                   (assoc shape
                          :x (dm/get-prop selrect :x)
@@ -355,11 +352,8 @@
             rotation (mod (+ (d/nilv (:rotation shape) 0)
                              (d/nilv (dm/get-in shape [:modifiers :rotation]) 0))
                           360)
-            shape    (if (= type :bool)
-                       (update shape :bool-content gpa/transform-content transform-mtx)
-                       shape)
 
-            shape    (if (= type :path)
+            shape    (if (or (= type :path) (= type :bool))
                        (update shape :content gpa/transform-content transform-mtx)
                        (assoc shape
                               :x (dm/get-prop selrect :x)
@@ -454,9 +448,14 @@
   "Calculates the selrect+points for the boolean shape"
   [shape children objects]
 
-  (let [bool-content     (gshb/calc-bool-content shape objects)
-        shape            (assoc shape :bool-content bool-content)
-        [points selrect] (gpa/content->points+selrect shape bool-content)]
+  (let [content
+        (gshb/calc-bool-content shape objects)
+
+        shape
+        (assoc shape :content content)
+
+        [points selrect]
+        (gpa/content->points+selrect shape content)]
 
     (if (and (some? selrect) (d/not-empty? points))
       (-> shape

common/src/app/common/logic/shapes.cljc

@@ -10,14 +10,14 @@
    [app.common.files.changes-builder :as pcb]
    [app.common.files.helpers :as cfh]
    [app.common.geom.shapes :as gsh]
-   [app.common.logic.variants :as clv]
+   [app.common.logic.variant-properties :as clvp]
    [app.common.types.component :as ctk]
    [app.common.types.container :as ctn]
+   [app.common.types.pages-list :as ctpl]
    [app.common.types.shape.interactions :as ctsi]
    [app.common.types.shape.layout :as ctl]
    [app.common.types.token :as cto]
-   [app.common.uuid :as uuid]
-   [cuerdas.core :as str]))
+   [app.common.uuid :as uuid]))
 
 (defn- generate-unapply-tokens
   "When updating attributes that have a token applied, we must unapply it, because the value
@@ -81,163 +81,167 @@
         (pcb/update-shapes ids update-fn {:attrs #{:blocked :hidden}}))))
 
 (defn generate-delete-shapes
-  [changes file page objects ids {:keys [components-v2 ignore-touched component-swap]}]
-  (let [ids           (cfh/clean-loops objects ids)
+  ([changes file page objects ids options]
+   (generate-delete-shapes (-> changes
+                               (pcb/with-page page)
+                               (pcb/with-objects objects)
+                               (pcb/with-library-data file))
+                           ids
+                           options))
+  ([changes ids {:keys [ignore-touched component-swap]}]
+   (let [objects (pcb/get-objects changes)
+         data    (pcb/get-library-data changes)
+         page-id (pcb/get-page-id changes)
+         page    (or (pcb/get-page changes)
+                     (ctpl/get-page data page-id))
 
-        in-component-copy?
-        (fn [shape-id]
+         ids     (cfh/clean-loops objects ids)
+         in-component-copy?
+         (fn [shape-id]
           ;; Look for shapes that are inside a component copy, but are
           ;; not the root. In this case, they must not be deleted,
           ;; but hidden (to be able to recover them more easily).
           ;; Unless we are doing a component swap, in which case we want
           ;; to delete the old shape
-          (let [shape           (get objects shape-id)]
-            (and (ctn/has-any-copy-parent? objects shape)
-                 (not component-swap))))
+           (let [shape           (get objects shape-id)]
+             (and (ctn/has-any-copy-parent? objects shape)
+                  (not component-swap))))
 
-        [ids-to-delete ids-to-hide]
-        (if components-v2
-          (loop [ids-seq       (seq ids)
-                 ids-to-delete []
-                 ids-to-hide   []]
-            (let [id (first ids-seq)]
-              (if (nil? id)
-                [ids-to-delete ids-to-hide]
-                (if (in-component-copy? id)
-                  (recur (rest ids-seq)
-                         ids-to-delete
-                         (conj ids-to-hide id))
-                  (recur (rest ids-seq)
-                         (conj ids-to-delete id)
-                         ids-to-hide)))))
-          [ids []])
+         [ids-to-delete ids-to-hide]
+         (loop [ids-seq       (seq ids)
+                ids-to-delete []
+                ids-to-hide   []]
+           (let [id (first ids-seq)]
+             (if (nil? id)
+               [ids-to-delete ids-to-hide]
+               (if (in-component-copy? id)
+                 (recur (rest ids-seq)
+                        ids-to-delete
+                        (conj ids-to-hide id))
+                 (recur (rest ids-seq)
+                        (conj ids-to-delete id)
+                        ids-to-hide)))))
 
-        changes (-> changes
-                    (pcb/with-page page)
-                    (pcb/with-objects objects)
-                    (pcb/with-library-data file))
+         lookup  (d/getf objects)
 
-        lookup  (d/getf objects)
-
-        groups-to-unmask
-        (reduce (fn [group-ids id]
+         groups-to-unmask
+         (reduce (fn [group-ids id]
                   ;; When the shape to delete is the mask of a masked group,
                   ;; the mask condition must be removed, and it must be
                   ;; converted to a normal group.
-                  (let [obj    (lookup id)
-                        parent (lookup (:parent-id obj))]
-                    (if (and (:masked-group parent)
-                             (= id (first (:shapes parent))))
-                      (conj group-ids (:id parent))
-                      group-ids)))
-                #{}
-                ids-to-delete)
+                   (let [obj    (lookup id)
+                         parent (lookup (:parent-id obj))]
+                     (if (and (:masked-group parent)
+                              (= id (first (:shapes parent))))
+                       (conj group-ids (:id parent))
+                       group-ids)))
+                 #{}
+                 ids-to-delete)
 
-        interacting-shapes
-        (filter (fn [shape]
+         interacting-shapes
+         (filter (fn [shape]
                   ;; If any of the deleted shapes is the destination of
                   ;; some interaction, this must be deleted, too.
-                  (let [interactions (:interactions shape)]
-                    (some #(and (ctsi/has-destination %)
-                                (contains? ids-to-delete (:destination %)))
-                          interactions)))
-                (vals objects))
+                   (let [interactions (:interactions shape)]
+                     (some #(and (ctsi/has-destination %)
+                                 (contains? ids-to-delete (:destination %)))
+                           interactions)))
+                 (vals objects))
 
-        changes
-        (reduce (fn [changes {:keys [id] :as flow}]
-                  (if (contains? ids-to-delete (:starting-frame flow))
-                    (pcb/set-flow changes id nil)
-                    changes))
-                changes
-                (:flows page))
+         changes
+         (reduce (fn [changes {:keys [id] :as flow}]
+                   (if (contains? ids-to-delete (:starting-frame flow))
+                     (pcb/set-flow changes id nil)
+                     changes))
+                 changes
+                 (:flows page))
 
 
-        all-parents
-        (reduce (fn [res id]
+         all-parents
+         (reduce (fn [res id]
                   ;; All parents of any deleted shape must be resized.
-                  (into res (cfh/get-parent-ids objects id)))
-                (d/ordered-set)
-                (concat ids-to-delete ids-to-hide))
+                   (into res (cfh/get-parent-ids objects id)))
+                 (d/ordered-set)
+                 (concat ids-to-delete ids-to-hide))
 
-        all-children
-        (->> ids-to-delete ;; Children of deleted shapes must be also deleted.
-             (reduce (fn [res id]
-                       (into res (cfh/get-children-ids objects id)))
-                     [])
-             (reverse)
-             (into (d/ordered-set)))
+         all-children
+         (->> ids-to-delete ;; Children of deleted shapes must be also deleted.
+              (reduce (fn [res id]
+                        (into res (cfh/get-children-ids objects id)))
+                      [])
+              (reverse)
+              (into (d/ordered-set)))
 
-        find-all-empty-parents
-        (fn recursive-find-empty-parents [empty-parents]
-          (let [all-ids   (into empty-parents ids-to-delete)
-                contains? (partial contains? all-ids)
-                xform     (comp (map lookup)
-                                (filter #(or (cfh/group-shape? %) (cfh/bool-shape? %)))
-                                (remove #(->> (:shapes %) (remove contains?) seq))
-                                (map :id))
-                parents   (into #{} xform all-parents)]
-            (if (= empty-parents parents)
-              empty-parents
-              (recursive-find-empty-parents parents))))
+         find-all-empty-parents
+         (fn recursive-find-empty-parents [empty-parents]
+           (let [all-ids   (into empty-parents ids-to-delete)
+                 contains? (partial contains? all-ids)
+                 xform     (comp (map lookup)
+                                 (filter #(or (cfh/group-shape? %) (cfh/bool-shape? %) (ctk/is-variant-container? %)))
+                                 (remove #(->> (:shapes %) (remove contains?) seq))
+                                 (map :id))
+                 parents   (into #{} xform all-parents)]
+             (if (= empty-parents parents)
+               empty-parents
+               (recursive-find-empty-parents parents))))
 
-        empty-parents
+         empty-parents
         ;; Any parent whose children are all deleted, must be deleted too.
         ;; Unless we are during a component swap: in this case we are replacing a shape by
         ;; other one, so must not delete empty parents.
-        (if-not component-swap
-          (into (d/ordered-set) (find-all-empty-parents #{}))
-          #{})
+         (if-not component-swap
+           (into (d/ordered-set) (find-all-empty-parents #{}))
+           #{})
 
-        components-to-delete
-        (if components-v2
-          (reduce (fn [components id]
-                    (let [shape (get objects id)]
-                      (if (and (= (:component-file shape) (:id file)) ;; Main instances should exist only in local file
-                               (:main-instance shape))                ;; but check anyway
-                        (conj components (:component-id shape))
-                        components)))
-                  []
-                  (into ids-to-delete all-children))
-          [])
+         components-to-delete
+         (reduce (fn [components id]
+                   (let [shape (get objects id)]
+                     (if (and (= (:component-file shape) (:id data)) ;; Main instances should exist only in local file
+                              (:main-instance shape))                ;; but check anyway
+                       (conj components (:component-id shape))
+                       components)))
+                 []
+                 (into ids-to-delete all-children))
 
-        ids-set (set ids-to-delete)
 
-        guides-to-delete
-        (->> (:guides page)
-             (vals)
-             (filter #(contains? ids-set (:frame-id %)))
-             (map :id))
+         ids-set (set ids-to-delete)
 
-        changes (reduce (fn [changes guide-id]
-                          (pcb/set-flow changes guide-id nil))
-                        changes
-                        guides-to-delete)
+         guides-to-delete
+         (->> (:guides page)
+              (vals)
+              (filter #(contains? ids-set (:frame-id %)))
+              (map :id))
 
-        changes (reduce (fn [changes component-id]
+         changes (reduce (fn [changes guide-id]
+                           (pcb/set-flow changes guide-id nil))
+                         changes
+                         guides-to-delete)
+
+         changes (reduce (fn [changes component-id]
                           ;; It's important to delete the component before the main instance, because we
                           ;; need to store the instance position if we want to restore it later.
-                          (pcb/delete-component changes component-id (:id page)))
-                        changes
-                        components-to-delete)
+                           (pcb/delete-component changes component-id (:id page)))
+                         changes
+                         components-to-delete)
 
-        changes (-> changes
-                    (generate-update-shape-flags ids-to-hide objects {:hidden true})
-                    (pcb/remove-objects all-children {:ignore-touched true})
-                    (pcb/remove-objects ids-to-delete {:ignore-touched ignore-touched})
-                    (pcb/remove-objects empty-parents)
-                    (pcb/resize-parents all-parents)
-                    (pcb/update-shapes groups-to-unmask
-                                       (fn [shape]
-                                         (assoc shape :masked-group false)))
-                    (pcb/update-shapes (map :id interacting-shapes)
-                                       (fn [shape]
-                                         (d/update-when shape :interactions
-                                                        (fn [interactions]
-                                                          (into []
-                                                                (remove #(and (ctsi/has-destination %)
-                                                                              (contains? ids-to-delete (:destination %))))
-                                                                interactions))))))]
-    [all-parents changes]))
+         changes (-> changes
+                     (generate-update-shape-flags ids-to-hide objects {:hidden true})
+                     (pcb/remove-objects all-children {:ignore-touched true})
+                     (pcb/remove-objects ids-to-delete {:ignore-touched ignore-touched})
+                     (pcb/remove-objects empty-parents)
+                     (pcb/resize-parents all-parents)
+                     (pcb/update-shapes groups-to-unmask
+                                        (fn [shape]
+                                          (assoc shape :masked-group false)))
+                     (pcb/update-shapes (map :id interacting-shapes)
+                                        (fn [shape]
+                                          (d/update-when shape :interactions
+                                                         (fn [interactions]
+                                                           (into []
+                                                                 (remove #(and (ctsi/has-destination %)
+                                                                               (contains? ids-to-delete (:destination %))))
+                                                                 interactions))))))]
+     [all-parents changes])))
 
 
 (defn generate-relocate
@@ -255,7 +259,7 @@
 
         child-heads-ids (map :id child-heads)
 
-        variant-heads (filter ctk/is-variant? child-heads)
+        variant-shapes (filter ctk/is-variant? shapes)
 
         component-main-parent
         (ctn/find-component-main objects parent false)
@@ -339,7 +343,19 @@
                      (map :id)))
 
         index-cell-data  (when to-index (ctl/get-cell-by-index parent to-index))
-        cell (or cell (and index-cell-data [(:row index-cell-data) (:column index-cell-data)]))]
+        cell (or cell (and index-cell-data [(:row index-cell-data) (:column index-cell-data)]))
+
+
+        ;; Parents that are a variant-container that becomes empty
+        empty-variant-cont (reduce
+                            (fn [to-delete parent-id]
+                              (let [parent (get objects parent-id)]
+                                (if (and (ctk/is-variant-container? parent)
+                                         (empty? (remove (set ids) (:shapes parent))))
+                                  (conj to-delete (:id parent))
+                                  to-delete)))
+                            #{}
+                            (remove #(= % parent-id) all-parents))]
 
     (-> changes
         ;; Remove layout-item properties when moving a shape outside a layout
@@ -368,82 +384,11 @@
 
         ;; Remove variant info and rename when moving outside a variant-container
         (cond-> (not (ctk/is-variant-container? parent))
-          ((fn [changes]
-             (reduce
-              (fn [changes shape]
-                (let [new-name (str/replace (:variant-name shape) #", " " / ")
-                      [cpath cname] (cfh/parse-path-name new-name)]
-                  (-> changes
-                      (pcb/update-component (:component-id shape)
-                                            #(-> (dissoc % :variant-id :variant-properties)
-                                                 (assoc :name cname
-                                                        :path cpath))
-                                            {:apply-changes-local-library? true})
-                      (pcb/update-shapes [(:id shape)]
-                                         #(-> (dissoc % :variant-id :variant-name)
-                                              (assoc :name new-name))))))
-              changes
-              variant-heads))))
+          (clvp/generate-make-shapes-no-variant variant-shapes))
 
         ;; Add variant info and rename when moving into a different variant-container
         (cond-> (ctk/is-variant-container? parent)
-          ((fn [changes]
-             (let [get-base-name      #(if (some? (:variant-name %))
-                                         (str/replace (:variant-name %) #", " " / ")
-                                         (:name %))
-
-                   calc-num-props     #(-> %
-                                           get-base-name
-                                           cfh/split-path
-                                           count)
-
-                   max-path-items     (apply max (map calc-num-props child-heads))
-
-                   first-comp-id      (->> parent
-                                           :shapes
-                                           first
-                                           (get objects)
-                                           :component-id)
-
-                   data               (pcb/get-library-data changes)
-                   variant-properties (get-in data [:components first-comp-id :variant-properties])
-                   num-props          (count variant-properties)
-                   num-new-props      (if (< max-path-items num-props)
-                                        0
-                                        (- max-path-items num-props))
-
-                   changes            (nth
-                                       (iterate #(clv/generate-add-new-property % (:id parent)) changes)
-                                       num-new-props)]
-               (reduce
-                (fn [changes shape]
-                  (if (= (:id parent) (:variant-id shape))
-                    changes ;; do nothing if we aren't changing the parent
-                    (let [base-name           (get-base-name shape)
-
-                          ;; we need to get the updated library data to have access to the current properties
-                          data                (pcb/get-library-data changes)
-
-                          props               (clv/path-to-properties
-                                               base-name
-                                               (get-in data [:components first-comp-id :variant-properties]))
-
-                          variant-name        (clv/properties-to-name props)
-                          [cpath cname]       (cfh/parse-path-name (:name parent))]
-
-                      (-> (pcb/update-component changes
-                                                (:component-id shape)
-                                                #(assoc % :variant-id (:id parent)
-                                                        :variant-properties props
-                                                        :name cname
-                                                        :path cpath)
-                                                {:apply-changes-local-library? true})
-                          (pcb/update-shapes [(:id shape)]
-                                             #(assoc % :variant-id (:id parent)
-                                                     :variant-name variant-name
-                                                     :name (:name parent)))))))
-                changes
-                child-heads)))))
+          (clvp/generate-make-shapes-variant child-heads parent))
 
         ;; Move the shapes
         (pcb/change-parent parent-id
@@ -518,7 +463,11 @@
           (pcb/update-shapes ids #(assoc % :blocked true)))
 
         ;; Resize parent containers that need to
-        (pcb/resize-parents parents))))
+        (pcb/resize-parents parents)
+
+        ;; Remove parents when are a variant-container that becomes empty
+        (cond-> (seq empty-variant-cont)
+          (#(second (generate-delete-shapes % empty-variant-cont {})))))))
 
 (defn change-show-in-viewer
   [shape hide?]

common/src/app/common/logic/variant_properties.cljc

@@ -0,0 +1,198 @@
+;; 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.common.logic.variant-properties
+  (:require
+   [app.common.data :as d]
+   [app.common.files.changes-builder :as pcb]
+   [app.common.files.helpers :as cfh]
+   [app.common.files.variant :as cfv]
+   [app.common.types.component :as ctk]
+   [app.common.types.components-list :as ctcl]
+   [app.common.types.variant :as ctv]
+   [cuerdas.core :as str]))
+
+(defn generate-update-property-name
+  [changes variant-id pos new-name]
+  (let [data               (pcb/get-library-data changes)
+        objects            (pcb/get-objects changes)
+        related-components (cfv/find-variant-components data objects variant-id)]
+    (reduce (fn [changes component]
+              (pcb/update-component
+               changes (:id component)
+               #(assoc-in % [:variant-properties pos :name] new-name)
+               {:apply-changes-local-library? true}))
+            changes
+            related-components)))
+
+
+(defn generate-remove-property
+  [changes variant-id pos]
+  (let [data               (pcb/get-library-data changes)
+        objects            (pcb/get-objects changes)
+        related-components (cfv/find-variant-components data objects variant-id)]
+    (reduce (fn [changes component]
+              (let [props   (:variant-properties component)
+                    props   (d/remove-at-index props pos)
+                    main-id (:main-instance-id component)
+                    name    (ctv/properties-to-name props)]
+                (-> changes
+                    (pcb/update-component (:id component) #(assoc % :variant-properties props)
+                                          {:apply-changes-local-library? true})
+                    (pcb/update-shapes [main-id] #(assoc % :variant-name name)))))
+            changes
+            related-components)))
+
+
+(defn generate-update-property-value
+  [changes component-id pos value]
+  (let [data      (pcb/get-library-data changes)
+        component (ctcl/get-component data component-id true)
+        main-id   (:main-instance-id component)
+        name      (-> (:variant-properties component)
+                      (update pos assoc :value value)
+                      ctv/properties-to-name)]
+    (-> changes
+        (pcb/update-component component-id #(assoc-in % [:variant-properties pos :value] value)
+                              {:apply-changes-local-library? true})
+        (pcb/update-shapes [main-id] #(assoc % :variant-name name)))))
+
+
+(defn generate-add-new-property
+  [changes variant-id & {:keys [fill-values? property-name]}]
+  (let [data               (pcb/get-library-data changes)
+        objects            (pcb/get-objects changes)
+        related-components (cfv/find-variant-components data objects variant-id)
+
+        props              (-> related-components last :variant-properties)
+        next-prop-num      (ctv/next-property-number props)
+        property-name      (or property-name (str ctv/property-prefix next-prop-num))
+
+        [_ changes]
+        (reduce (fn [[num changes] component]
+                  (let [main-id      (:main-instance-id component)
+
+                        update-props #(-> (d/nilv % [])
+                                          (conj {:name property-name
+                                                 :value (if fill-values? (str ctv/value-prefix num) "")}))
+
+                        update-name #(if fill-values?
+                                       (if (str/empty? %)
+                                         (str ctv/value-prefix num)
+                                         (str % ", " ctv/value-prefix num))
+                                       %)]
+                    [(inc num)
+                     (-> changes
+                         (pcb/update-component (:id component)
+                                               #(update % :variant-properties update-props)
+                                               {:apply-changes-local-library? true})
+                         (pcb/update-shapes [main-id] #(update % :variant-name update-name)))]))
+                [1 changes]
+                related-components)]
+    changes))
+
+(defn- generate-make-shape-no-variant
+  [changes shape]
+  (let [new-name      (ctv/variant-name-to-name shape)
+        [cpath cname] (cfh/parse-path-name new-name)]
+    (-> changes
+        (pcb/update-component (:component-id shape)
+                              #(-> (dissoc % :variant-id :variant-properties)
+                                   (assoc :name cname
+                                          :path cpath))
+                              {:apply-changes-local-library? true})
+        (pcb/update-shapes [(:id shape)]
+                           #(-> (dissoc % :variant-id :variant-name)
+                                (assoc :name new-name))))))
+
+(defn generate-make-shapes-no-variant
+  [changes shapes]
+  (reduce generate-make-shape-no-variant changes shapes))
+
+
+(defn- generate-new-properties-from-variant
+  [shape min-props data container-name base-properties]
+  (let [component (ctcl/get-component data (:component-id shape) true)
+        add-name? (not= (:name component) container-name)
+        props     (ctv/merge-properties base-properties
+                                        (:variant-properties component))
+        new-props (- min-props
+                     (+ (count props)
+                        (if add-name? 1 0)))
+        props     (ctv/add-new-props props (repeat new-props ""))]
+
+    (if add-name?
+      (ctv/add-new-prop props (:name component))
+      props)))
+
+(defn- generate-new-properties-from-non-variant
+  [shape min-props container-name base-properties]
+  (let [;; Remove container name from shape name if present
+        shape-name (ctv/remove-prefix (:name shape) container-name)]
+    (ctv/path-to-properties shape-name base-properties min-props)))
+
+
+(defn generate-make-shapes-variant
+  [changes shapes variant-container]
+  (let [data           (pcb/get-library-data changes)
+        objects        (pcb/get-objects changes)
+        variant-id     (:id variant-container)
+
+        ;; If we are cut-pasting a variant-container, this will be null
+        ;; because it hasn't any shapes yet
+        first-comp-id  (->> variant-container
+                            :shapes
+                            first
+                            (get objects)
+                            :component-id)
+
+        base-props     (->> (get-in data [:components first-comp-id :variant-properties])
+                            (map #(assoc % :value "")))
+        num-base-props (count base-props)
+
+        [cpath cname]  (cfh/parse-path-name (:name variant-container))
+        container-name (:name variant-container)
+
+        generate-new-properties
+        (fn [shape min-props]
+          (if (ctk/is-variant? shape)
+            (generate-new-properties-from-variant shape min-props data container-name base-props)
+            (generate-new-properties-from-non-variant shape min-props container-name base-props)))
+
+        total-props    (reduce (fn [m shape]
+                                 (max m (count (generate-new-properties shape num-base-props))))
+                               0
+                               shapes)
+
+        num-new-props  (if (or (zero? num-base-props)
+                               (< total-props num-base-props))
+                         0
+                         (- total-props num-base-props))
+
+        changes        (nth
+                        (iterate #(generate-add-new-property % variant-id) changes)
+                        num-new-props)
+
+        changes        (pcb/update-shapes changes (map :id shapes)
+                                          #(assoc % :variant-id variant-id
+                                                  :name (:name variant-container)))]
+    (reduce
+     (fn [changes shape]
+       (if (or (zero? num-base-props)
+               (= variant-id (:variant-id shape)))
+         changes ;; do nothing more if we aren't changing the parent or there are no base props
+         (let [props               (generate-new-properties shape total-props)
+               variant-name        (ctv/properties-to-name props)]
+           (-> (pcb/update-component changes
+                                     (:component-id shape)
+                                     #(assoc % :variant-id variant-id
+                                             :variant-properties props
+                                             :name cname
+                                             :path cpath)
+                                     {:apply-changes-local-library? true})
+               (pcb/update-shapes [(:id shape)]
+                                  #(assoc % :variant-name variant-name))))))
+     changes
+     shapes)))

common/src/app/common/logic/variants.cljc

@@ -1,160 +1,30 @@
-;; 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.common.logic.variants
   (:require
-   [app.common.data :as d]
-   [app.common.data.macros :as dm]
    [app.common.files.changes-builder :as pcb]
-   [app.common.files.helpers :as cfh]
-   [app.common.types.components-list :as ctcl]
-   [cuerdas.core :as str]))
+   [app.common.files.variant :as cfv]
+   [app.common.logic.libraries :as cll]
+   [app.common.logic.variant-properties :as clvp]
+   [app.common.types.variant :as ctv]))
 
 
+(defn generate-add-new-variant
+  [changes shape variant-id new-component-id new-shape-id prop-num]
+  (let [data                (pcb/get-library-data changes)
+        objects             (pcb/get-objects changes)
+        component-id        (:component-id shape)
+        value               (str ctv/value-prefix
+                                 (-> (cfv/extract-properties-values data objects variant-id)
+                                     last
+                                     :value
+                                     count
+                                     inc))
 
-(def property-prefix "Property")
-(def property-regex (re-pattern (str property-prefix "(\\d+)")))
-(def value-prefix "Value")
-
-(defn find-related-components
-  "Find a list of the components thet belongs to this variant-id"
-  [data objects variant-id]
-  (->> (dm/get-in objects [variant-id :shapes])
-       (map #(dm/get-in objects [% :component-id]))
-       (map #(ctcl/get-component data % true))
-       reverse))
-
-
-(defn properties-to-name
-  "Transform the properties into a name, with the values separated by comma"
-  [properties]
-  (->> properties
-       (map :value)
-       (remove str/empty?)
-       (str/join ", ")))
-
-
-(defn next-property-number
-  "Returns the next property number, to avoid duplicates on the property names"
-  [properties]
-  (let [numbers (keep
-                 #(some->> (:name %) (re-find property-regex) second d/parse-integer)
-                 properties)
-        max-num (if (seq numbers)
-                  (apply max numbers)
-                  0)]
-    (inc (max max-num (count properties)))))
-
-
-(defn path-to-properties
-  "From a list of properties and a name with path, assign each token of the
-   path as value of a different property"
-  [path properties]
-  (let [next-prop-num  (next-property-number properties)
-        cpath          (cfh/split-path path)
-        assigned       (mapv #(assoc % :value (nth cpath %2 "")) properties (range))
-        remaining      (drop (count properties) cpath)
-        new-properties (map-indexed (fn [i v] {:name (str property-prefix (+ next-prop-num i))
-                                               :value v}) remaining)]
-    (into assigned new-properties)))
-
-(defn- dashes-to-end
-  [property-values]
-  (let [dashes (if (some #(= % "--") property-values) ["--"] [])]
-    (concat (remove #(= % "--") property-values) dashes)))
-
-
-(defn extract-properties-values
-  [data objects variant-id]
-  (->> (find-related-components data objects variant-id)
-       (mapcat :variant-properties)
-       (group-by :name)
-       (map (fn [[k v]]
-              {:name k
-               :value (->> v
-                           (map #(if (str/empty? (:value %)) "--" (:value %)))
-                           distinct
-                           dashes-to-end)}))))
-
-
-(defn generate-update-property-name
-  [changes variant-id pos new-name]
-  (let [data               (pcb/get-library-data changes)
-        objects            (pcb/get-objects changes)
-        related-components (find-related-components data objects variant-id)]
-    (reduce (fn [changes component]
-              (pcb/update-component
-               changes (:id component)
-               #(assoc-in % [:variant-properties pos :name] new-name)
-               {:apply-changes-local-library? true}))
-            changes
-            related-components)))
-
-
-(defn generate-remove-property
-  [changes variant-id pos]
-  (let [data               (pcb/get-library-data changes)
-        objects            (pcb/get-objects changes)
-        related-components (find-related-components data objects variant-id)]
-    (reduce (fn [changes component]
-              (let [props   (:variant-properties component)
-                    props   (d/remove-at-index props pos)
-                    main-id (:main-instance-id component)
-                    name    (properties-to-name props)]
-                (-> changes
-                    (pcb/update-component (:id component) #(assoc % :variant-properties props)
-                                          {:apply-changes-local-library? true})
-                    (pcb/update-shapes [main-id] #(assoc % :variant-name name)))))
-            changes
-            related-components)))
-
-
-(defn generate-update-property-value
-  [changes component-id pos value]
-  (let [data      (pcb/get-library-data changes)
-        component (ctcl/get-component data component-id true)
-        main-id   (:main-instance-id component)
-        name      (-> (:variant-properties component)
-                      (update pos assoc :value value)
-                      properties-to-name)]
+        [new-shape changes] (-> changes
+                                (cll/generate-duplicate-component
+                                 {:data data}
+                                 component-id
+                                 new-component-id
+                                 {:new-shape-id new-shape-id :apply-changes-local-library? true}))]
     (-> changes
-        (pcb/update-component component-id #(assoc-in % [:variant-properties pos :value] value)
-                              {:apply-changes-local-library? true})
-        (pcb/update-shapes [main-id] #(assoc % :variant-name name)))))
-
-
-(defn generate-add-new-property
-  [changes variant-id & {:keys [fill-values?]}]
-  (let [data               (pcb/get-library-data changes)
-        objects            (pcb/get-objects changes)
-        related-components (find-related-components data objects variant-id)
-
-        props              (-> related-components first :variant-properties)
-        next-prop-num      (next-property-number props)
-        property-name      (str property-prefix next-prop-num)
-
-        [_ changes]
-        (reduce (fn [[num changes] component]
-                  (let [main-id      (:main-instance-id component)
-
-                        update-props #(-> (d/nilv % [])
-                                          (conj {:name property-name
-                                                 :value (if fill-values? (str value-prefix num) "")}))
-
-                        update-name #(if fill-values?
-                                       (if (str/empty? %)
-                                         (str value-prefix num)
-                                         (str % ", " value-prefix num))
-                                       %)]
-                    [(inc num)
-                     (-> changes
-                         (pcb/update-component (:id component)
-                                               #(update % :variant-properties update-props)
-                                               {:apply-changes-local-library? true})
-                         (pcb/update-shapes [main-id] #(update % :variant-name update-name)))]))
-                [1 changes]
-                related-components)]
-    changes))
-
+        (clvp/generate-update-property-value new-component-id prop-num value)
+        (pcb/change-parent (:parent-id shape) [new-shape] 0))))

common/src/app/common/schema.cljc

@@ -113,6 +113,10 @@
   [schema]
   (mu/optional-keys schema default-options))
 
+(defn required-keys
+  [schema]
+  (mu/required-keys schema default-options))
+
 (defn transformer
   [& transformers]
   (apply mt/transformer transformers))
@@ -145,11 +149,30 @@
 ;;     :else
 ;;     o))
 
+(defn -transform-map-keys
+  ([f]
+   (let [xform (map (fn [[k v]] [(f k) v]))]
+     #(cond->> % (map? %) (into (empty %) xform))))
+  ([ks f]
+   (let [xform (map (fn [[k v]] [(cond-> k (contains? ks k) f) v]))]
+     #(cond->> % (map? %) (into (empty %) xform)))))
+
 (defn json-transformer
   []
-  (mt/transformer
-   (mt/json-transformer)
-   (mt/collection-transformer)))
+  (let [map-of-key-decoders (mt/-string-decoders)]
+    (mt/transformer
+     {:name :json
+      :decoders (-> (mt/-json-decoders)
+                    (assoc :map-of {:compile (fn [schema _]
+                                               (let [key-schema (some-> schema (m/children) (first))]
+                                                 (or (some-> key-schema (m/type) map-of-key-decoders
+                                                             (mt/-interceptor schema {}) (m/-intercepting)
+                                                             (m/-comp m/-keyword->string)
+                                                             (mt/-transform-if-valid key-schema)
+                                                             (-transform-map-keys))
+                                                     (-transform-map-keys m/-keyword->string))))}))
+      :encoders (mt/-json-encoders)}
+     (mt/collection-transformer))))
 
 (defn string-transformer
   []
@@ -874,7 +897,7 @@
   {:title "inst"
    :description "Satisfies Inst protocol"
    :error/message "should be an instant"
-   :gen/gen (->> (sg/small-int)
+   :gen/gen (->> (sg/small-int :min 0 :max 100000)
                  (sg/fmap (fn [v] (tm/parse-instant v))))
 
    :decode/string tm/parse-instant

common/src/app/common/svg/path.cljc

@@ -40,76 +40,3 @@
              (map (fn [segment]
                     (.toPersistentMap ^js segment)))
              (parser/parse path-str)))))
-
-#?(:cljs
-   (defn content->buffer
-     "Converts the path content into binary format."
-     [content]
-     (let [total  (count content)
-           ssize  28
-           buffer (new js/ArrayBuffer (* total ssize))
-           dview  (new js/DataView buffer)]
-       (loop [index 0]
-         (when (< index total)
-           (let [segment (nth content index)
-                 offset  (* index ssize)]
-             (case (:command segment)
-               :move-to
-               (let [{:keys [x y]} (:params segment)]
-                 (.setInt16 dview   (+ offset 0) 1)
-                 (.setFloat32 dview (+ offset 20) x)
-                 (.setFloat32 dview (+ offset 24) y))
-               :line-to
-               (let [{:keys [x y]} (:params segment)]
-                 (.setInt16 dview   (+ offset 0) 2)
-                 (.setFloat32 dview (+ offset 20) x)
-                 (.setFloat32 dview (+ offset 24) y))
-               :curve-to
-               (let [{:keys [c1x c1y c2x c2y x y]} (:params segment)]
-                 (.setInt16 dview   (+ offset 0) 3)
-                 (.setFloat32 dview (+ offset 4) c1x)
-                 (.setFloat32 dview (+ offset 8) c1y)
-                 (.setFloat32 dview (+ offset 12) c2x)
-                 (.setFloat32 dview (+ offset 16) c2y)
-                 (.setFloat32 dview (+ offset 20) x)
-                 (.setFloat32 dview (+ offset 24) y))
-
-               :close-path
-               (.setInt16 dview (+ offset 0) 4))
-             (recur (inc index)))))
-       buffer)))
-
-#?(:cljs
-   (defn buffer->content
-     "Converts the a buffer to a path content vector"
-     [buffer]
-     (assert (instance? js/ArrayBuffer buffer) "expected ArrayBuffer instance")
-     (let [ssize  28
-           total  (/ (.-byteLength buffer) ssize)
-           dview  (new js/DataView buffer)]
-       (loop [index  0
-              result []]
-         (if (< index total)
-           (let [offset  (* index ssize)
-                 type    (.getInt16 dview (+ offset 0))
-                 command (case type
-                           1 :move-to
-                           2 :line-to
-                           3 :curve-to
-                           4 :close-path)
-                 params  (case type
-                           1 {:x (.getFloat32 dview (+ offset 20))
-                              :y (.getFloat32 dview (+ offset 24))}
-                           2 {:x (.getFloat32 dview (+ offset 20))
-                              :y (.getFloat32 dview (+ offset 24))}
-                           3 {:c1x (.getFloat32 dview (+ offset 4))
-                              :c1y (.getFloat32 dview (+ offset 8))
-                              :c2x (.getFloat32 dview (+ offset 12))
-                              :c2y (.getFloat32 dview (+ offset 16))
-                              :x   (.getFloat32 dview (+ offset 20))
-                              :y   (.getFloat32 dview (+ offset 24))}
-                           4 {})]
-             (recur (inc index)
-                    (conj result {:command command
-                                  :params params})))
-           result)))))

common/src/app/common/svg/path/bool.cljc

@@ -10,6 +10,7 @@
    [app.common.geom.point :as gpt]
    [app.common.geom.rect :as grc]
    [app.common.geom.shapes.path :as gsp]
+   [app.common.math :as mth]
    [app.common.svg.path.command :as upc]
    [app.common.svg.path.subpath :as ups]))
 
@@ -233,6 +234,45 @@
                (gsp/command->point current)
                (conj result (dissoc current :prev)))))))
 
+(defn remove-duplicated-segments
+  "Remove from the content segments"
+  [content]
+  (letfn [;; This is a comparator for float points with a precission
+          ;; used to remove already existing segments
+          (comparator [[fx1 fy1 tx1 ty1 :as v1] [fx2 fy2 tx2 ty2 :as v2]]
+            (if (and (mth/close? tx1 tx2)
+                     (mth/close? ty1 ty2)
+                     (mth/close? fx1 fx2)
+                     (mth/close? fy1 fy2))
+              0 ;; equal
+              (compare v1 v2)))]
+
+    (loop [current (first content)
+           content (rest content)
+           segments (sorted-set-by comparator)
+           result []]
+
+      (if (nil? current)
+        result
+
+        (let [fx (-> current :prev :x)
+              fy (-> current :prev :y)
+              tx (-> current :params :x)
+              ty (-> current :params :y)
+
+              result
+              (cond-> result
+                (and (not (contains? segments [fx fy tx ty]))
+                     (not (contains? segments [tx ty fx fy])))
+                (conj current))
+
+              segments (conj segments [fx fy tx ty])]
+
+          (recur (first content)
+                 (rest content)
+                 segments
+                 result))))))
+
 (defn create-union [content-a content-a-split content-b content-b-split sr-a sr-b]
   ;; Pick all segments in content-a that are not inside content-b
   ;; Pick all segments in content-b that are not inside content-a
@@ -312,15 +352,17 @@
         content-a-split (->> content-a-split add-previous (filter is-segment?))
         content-b-split (->> content-b-split add-previous (filter is-segment?))
 
-        bool-content
+        content
         (case bool-type
           :union        (create-union        content-a content-a-split content-b content-b-split sr-a sr-b)
           :difference   (create-difference   content-a content-a-split content-b content-b-split sr-a sr-b)
           :intersection (create-intersection content-a content-a-split content-b content-b-split sr-a sr-b)
           :exclude      (create-exclusion    content-a-split content-b-split))]
 
-    (->> (fix-move-to bool-content)
-         (ups/close-subpaths))))
+    (-> content
+        remove-duplicated-segments
+        fix-move-to
+        ups/close-subpaths)))
 
 (defn content-bool
   [bool-type contents]
@@ -331,4 +373,3 @@
          (reduce (partial content-bool-pair bool-type))
          (into []))
     []))
-

common/src/app/common/svg/path/subpath.cljc

@@ -126,7 +126,7 @@
   (pt= (:from subpath) (:to subpath)))
 
 (defn close-subpaths
-  "Searches a path for possible supaths that can create closed loops and merge them"
+  "Searches a path for possible subpaths that can create closed loops and merge them"
   [content]
   (let [subpaths (get-subpaths content)
         closed-subpaths

common/src/app/common/svg/shapes_builder.cljc

@@ -435,16 +435,12 @@
 
         attrs
         (-> attrs
-            (cond-> linecap
-              (dissoc :strokeLinecap))
             (cond-> (some? color)
               (dissoc :stroke :strokeWidth :strokeOpacity))
             (update
              :style
              (fn [style]
                (-> style
-                   (cond-> linecap
-                     (dissoc :strokeLinecap))
                    (cond-> (some? color)
                      (dissoc :stroke :strokeWidth :strokeOpacity)))))
             (d/without-nils))]
@@ -461,12 +457,14 @@
 
       (and (some? linecap) (cfh/path-shape? shape)
            (or (= linecap :round) (= linecap :square)))
+
       (assoc :stroke-cap-start linecap
-             :stroke-cap-end linecap)
+             :stroke-cap-end linecap
+             :stroke-linecap linecap)
 
       (d/any-key? (dm/get-in shape [:strokes 0])
                   :strokeColor :strokeOpacity :strokeWidth
-                  :strokeCapStart :strokeCapEnd)
+                  :strokeLinecap :strokeCapStart :strokeCapEnd)
       (assoc-in [:strokes 0 :stroke-style] :svg))))
 
 (defn setup-opacity [shape]

common/src/app/common/test_helpers/components.cljc

@@ -31,7 +31,7 @@
      "Need that root is already a frame"
      (cfh/frame-shape? root))
 
-    (let [[_new-root _new-shapes updated-shapes]
+    (let [[_new-root updated-shapes]
           (ctn/convert-shape-in-component root (:objects page) (:id file))
 
           updated-root (first updated-shapes) ; Can't use new-root because it has a new id
@@ -54,8 +54,7 @@
                                         :name name
                                         :path path
                                         :main-instance-id (:id updated-root)
-                                        :main-instance-page (:id page)
-                                        :shapes updated-shapes))))))))
+                                        :main-instance-page (:id page)))))))))
 
 (defn update-component
   [file component-label & {:keys [] :as params}]
@@ -98,7 +97,6 @@
                                      component
                                      (:data library)
                                      (gpt/point 100 100)
-                                     true
                                      {:force-id (thi/new-id! copy-root-label)
                                       :force-frame-id frame-id})
 

common/src/app/common/test_helpers/compositions.cljc

@@ -85,7 +85,7 @@
    & {:keys [component-params root-params child-params]}]
   ;; Generated shape tree:
   ;; {:root-label} [:name Frame1]    # [Component :component-label]
-  ;;     :child-label [:name Rect1]  
+  ;;     :child-label [:name Rect1]
   (-> file
       (add-frame-with-child root-label child-label :frame-params root-params :child-params child-params)
       (thc/make-component component-label root-label component-params)))
@@ -95,7 +95,7 @@
    & {:keys [component-params main-root-params main-child-params copy-root-params]}]
   ;; Generated shape tree:
   ;; {:main-root-label} [:name Frame1]       # [Component :component-label]
-  ;;     :main-child-label [:name Rect1]     
+  ;;     :main-child-label [:name Rect1]
   ;;
   ;; :copy-root-label [:name Frame1]         #--> [Component :component-label] :main-root-label
   ;;     <no-label> [:name Rect1]            ---> :main-child-label
@@ -113,9 +113,9 @@
    & {:keys [component-params root-params child-params-list]}]
   ;; Generated shape tree:
   ;; {:root-label} [:name Frame1]            # [Component :component-label]
-  ;;     :child1-label [:name Rect1]         
-  ;;     :child2-label [:name Rect2]         
-  ;;     :child3-label [:name Rect3]         
+  ;;     :child1-label [:name Rect1]
+  ;;     :child2-label [:name Rect2]
+  ;;     :child3-label [:name Rect3]
   (as-> file $
     (add-frame $ root-label root-params)
     (reduce (fn [file [index [label params]]]
@@ -134,9 +134,9 @@
    & {:keys [component-params main-root-params main-child-params-list copy-root-params]}]
   ;; Generated shape tree:
   ;;  {:root-label} [:name Frame1]            # [Component :component-label]
-  ;;      :child1-label [:name Rect1]         
-  ;;      :child2-label [:name Rect2]         
-  ;;      :child3-label [:name Rect3]         
+  ;;      :child1-label [:name Rect1]
+  ;;      :child2-label [:name Rect2]
+  ;;      :child3-label [:name Rect3]
   ;;
   ;;  :copy-root-label [:name Frame1]         #--> [Component :component-label] :root-label
   ;;      <no-label> [:name Rect1]            ---> :child1-label
@@ -156,7 +156,7 @@
    & {:keys [component1-params root1-params main1-child-params component2-params main2-root-params nested-head-params]}]
   ;; Generated shape tree:
   ;; {:main1-root-label} [:name Frame1]      # [Component :component1-label]
-  ;;     :main1-child-label [:name Rect1]    
+  ;;     :main1-child-label [:name Rect1]
   ;;
   ;; {:main2-root-label} [:name Frame2]      # [Component :component2-label]
   ;;     :nested-head-label [:name Frame1]   @--> [Component :component1-label] :main1-root-label
@@ -183,7 +183,7 @@
    & {:keys [component1-params root1-params main1-child-params component2-params main2-root-params nested-head-params copy2-root-params]}]
   ;; Generated shape tree:
   ;; {:main1-root-label} [:name Frame1]      # [Component :component1-label]
-  ;;     :main1-child-label [:name Rect1]    
+  ;;     :main1-child-label [:name Rect1]
   ;;
   ;; {:main2-root-label} [:name Frame2]      # [Component :component2-label]
   ;;     :nested-head-label [:name Frame1]   @--> [Component :component1-label] :main1-root-label
@@ -336,8 +336,7 @@
                        file
                        {file-id file}
                        (ctn/make-container container :page)
-                       (:id shape)
-                       true))
+                       (:id shape)))
         file' (thf/apply-changes file changes)]
     (if propagate-fn
       (propagate-fn file')
@@ -361,7 +360,7 @@
                                                 (:objects page)
                                                 #{(-> (ths/get-shape file shape-tag :page-label page-label)
                                                       :id)}
-                                                {:components-v2 true})
+                                                {})
         file' (thf/apply-changes file changes)]
     (if propagate-fn
       (propagate-fn file')
@@ -380,7 +379,7 @@
                                             (gpt/point 0 0)         ;; delta
                                             {(:id  file) file}      ;; libraries
                                             (:data file)            ;; library-data
-                                            (:id file))             ;; file-id 
+                                            (:id file))             ;; file-id
             (cll/generate-duplicate-changes-update-indices (:objects page)  ;; objects
                                                            #{(:id shape)}))
         file' (thf/apply-changes file changes)]

common/src/app/common/test_helpers/variants.cljc

@@ -22,4 +22,18 @@
         (thc/make-component component1-label root1-label)
         (thc/update-component component1-label {:variant-id variant-id :variant-properties [{:name "Property1" :value "Value1"}]})
         (thc/make-component component2-label root2-label)
-        (thc/update-component component2-label {:variant-id variant-id :variant-properties [{:name "Property1" :value "Value1"}]}))))
+        (thc/update-component component2-label {:variant-id variant-id :variant-properties [{:name "Property1" :value "Value2"}]}))))
+
+(defn add-variant-two-properties
+  [file variant-label component1-label root1-label component2-label root2-label
+   & {:keys []}]
+  (let [file (ths/add-sample-shape file variant-label :type :frame :is-variant-container true)
+        variant-id (thi/id variant-label)]
+
+    (-> file
+        (ths/add-sample-shape root2-label :type :frame :parent-label variant-label :variant-id variant-id :variant-name "p1v2, p2v2")
+        (ths/add-sample-shape root1-label :type :frame :parent-label variant-label :variant-id variant-id :variant-name "p1v1, p2v1")
+        (thc/make-component component1-label root1-label)
+        (thc/update-component component1-label {:variant-id variant-id :variant-properties [{:name "Property1" :value "p1v1"} {:name "Property2" :value "p2v1"}]})
+        (thc/make-component component2-label root2-label)
+        (thc/update-component component2-label {:variant-id variant-id :variant-properties [{:name "Property1" :value "p1v2"} {:name "Property2" :value "p2v2"}]}))))

common/src/app/common/types/component.cljc

@@ -10,6 +10,7 @@
    [app.common.schema :as sm]
    [app.common.types.page :as ctp]
    [app.common.types.plugins :as ctpg]
+   [app.common.types.variant :as ctv]
    [cuerdas.core :as str]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -17,15 +18,17 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (def schema:component
-  [:map
-   [:id ::sm/uuid]
-   [:name :string]
-   [:path {:optional true} [:maybe :string]]
-   [:modified-at {:optional true} ::sm/inst]
-   [:objects {:gen/max 10 :optional true} ::ctp/objects]
-   [:main-instance-id ::sm/uuid]
-   [:main-instance-page ::sm/uuid]
-   [:plugin-data {:optional true} ::ctpg/plugin-data]])
+  [:merge
+   [:map
+    [:id ::sm/uuid]
+    [:name :string]
+    [:path {:optional true} [:maybe :string]]
+    [:modified-at {:optional true} ::sm/inst]
+    [:objects {:gen/max 10 :optional true} ::ctp/objects]
+    [:main-instance-id ::sm/uuid]
+    [:main-instance-page ::sm/uuid]
+    [:plugin-data {:optional true} ::ctpg/plugin-data]]
+   ::ctv/variant-component])
 
 (sm/register! ::component schema:component)
 
@@ -90,8 +93,8 @@
    :constraints-h           :constraints-group
    :constraints-v           :constraints-group
    :fixed-scroll            :constraints-group
-   :bool-type               :bool-group
-   :bool-content            :bool-group
+   :bool-type               :content-group
+   :bool-content            :content-group
    :exports                 :exports-group
    :grids                   :grids-group
 
@@ -179,10 +182,8 @@
        (= (:component-file shape) file-id)))
 
 (defn is-main-of?
-  [shape-main shape-inst components-v2]
-  (or (= (:shape-ref shape-inst) (:id shape-main))
-      (and (= (:shape-ref shape-inst) (:shape-ref shape-main))
-           (not components-v2))))
+  [shape-main shape-inst]
+  (= (:shape-ref shape-inst) (:id shape-main)))
 
 (defn main-instance?
   "Check if this shape is the root of the main instance of some
@@ -333,8 +334,6 @@
   (let [parent (get objects (:parent-id shape))]
     ;; We don't want to change the structure of component copies
     (and (not (in-component-copy-not-head? shape))
-         ;; We don't want to duplicate variants
-         (not (is-variant? shape))
          ;; Non instance, non copy. We allow
          (or (not (instance-head? shape))
              (not (in-component-copy? parent))))))

common/src/app/common/types/components_list.cljc

@@ -34,20 +34,12 @@
   (assoc component :modified-at (dt/now)))
 
 (defn add-component
-  [fdata {:keys [id name path main-instance-id main-instance-page shapes annotation variant-id variant-properties]}]
-  (let [components-v2  (dm/get-in fdata [:options :components-v2])
-        fdata          (update fdata :components assoc id (touch {:id id :name name :path path}))]
-    (if components-v2
-      (cond-> (update-in fdata [:components id] assoc :main-instance-id main-instance-id :main-instance-page main-instance-page)
-        annotation (update-in [:components id] assoc :annotation annotation)
-        variant-id (update-in [:components id] assoc :variant-id variant-id)
-        variant-properties (update-in [:components id] assoc :variant-properties variant-properties))
-
-      (let [wrap-object-fn cfeat/*wrap-with-objects-map-fn*]
-        (assoc-in fdata [:components id :objects]
-                  (->> shapes
-                       (d/index-by :id)
-                       (wrap-object-fn)))))))
+  [fdata {:keys [id name path main-instance-id main-instance-page annotation variant-id variant-properties]}]
+  (let [fdata          (update fdata :components assoc id (touch {:id id :name name :path path}))]
+    (cond-> (update-in fdata [:components id] assoc :main-instance-id main-instance-id :main-instance-page main-instance-page)
+      annotation (update-in [:components id] assoc :annotation annotation)
+      variant-id (update-in [:components id] assoc :variant-id variant-id)
+      variant-properties (update-in [:components id] assoc :variant-properties variant-properties))))
 
 (defn mod-component
   [file-data {:keys [id name path main-instance-id main-instance-page objects annotation variant-id variant-properties modified-at]}]
@@ -119,7 +111,6 @@
   [file-data component-id f & args]
   (d/update-in-when file-data [:components component-id] #(-> (apply f % args)
                                                               (touch))))
-
 (defn set-component-modified
   [file-data component-id]
   (update-component file-data component-id identity))

common/src/app/common/types/container.cljc

@@ -267,67 +267,8 @@
         new-children       (->> (cfh/get-children objects (:id root))
                                 (map #(dissoc % :component-root)))]
     [(assoc new-root :id new-id)
-     nil
      (into [new-root] new-children)]))
 
-(defn make-component-shape ;; Only used for components v1
-  "Clone the shape and all children. Generate new ids and detach
-  from parent and frame. Update the original shapes to have links
-  to the new ones."
-  [shape objects file-id components-v2]
-  (assert (nil? (:component-id shape)))
-  (assert (nil? (:component-file shape)))
-  (assert (nil? (:shape-ref shape)))
-  (let [frame-ids-map (volatile! {})
-
-        ;; Ensure that the component root is not an instance
-        update-new-shape (fn [new-shape original-shape]
-                           (when (= (:type original-shape) :frame)
-                             (vswap! frame-ids-map assoc (:id original-shape) (:id new-shape)))
-
-                           (cond-> new-shape
-                             true
-                             (dissoc :component-root)
-
-                             (nil? (:parent-id new-shape))
-                             (dissoc :component-id
-                                     :component-file
-                                     :shape-ref)))
-
-        ;; Make the original shape an instance of the new component.
-        ;; If one of the original shape children already was a component
-        ;; instance, maintain this instanceness untouched.
-        update-original-shape (fn [original-shape new-shape]
-                                (cond-> original-shape
-                                  (nil? (:shape-ref original-shape))
-                                  (-> (assoc :shape-ref (:id new-shape))
-                                      (dissoc :touched))
-
-                                  (nil? (:parent-id new-shape))
-                                  (assoc :component-id (:id new-shape)
-                                         :component-file file-id
-                                         :component-root true)
-
-                                  (and (nil? (:parent-id new-shape)) components-v2)
-                                  (assoc :main-instance true)
-
-                                  (some? (:parent-id new-shape))
-                                  (dissoc :component-root)))
-
-        [new-root-shape new-shapes updated-shapes]
-        (ctst/clone-shape shape
-                          nil
-                          objects
-                          :update-new-shape update-new-shape
-                          :update-original-shape update-original-shape)
-
-        ;; If frame-id points to a shape inside the component, remap it to the
-        ;; corresponding new frame shape. If not, set it to nil.
-        remap-frame-id (fn [shape]
-                         (update shape :frame-id #(get @frame-ids-map % nil)))]
-
-    [new-root-shape (map remap-frame-id new-shapes) updated-shapes]))
-
 (defn remove-swap-keep-attrs
   "Remove flex children properties except the fit-content for flex layouts. These are properties
   that we don't have to propagate to copies but will be respected when swapping components"
@@ -352,20 +293,18 @@
   WARNING: This process does not remap media references (on fills, strokes, ...); that is
   delegated to an async process on the backend side that checks unreferenced shapes and
   automatically creates correct references."
-  ([page component library-data position components-v2]
-   (make-component-instance page component library-data position components-v2 {}))
-  ([page component library-data position components-v2
+  ([page component library-data position]
+   (make-component-instance page component library-data position {}))
+  ([page component library-data position
     {:keys [main-instance? force-id force-frame-id keep-ids?]
      :or {main-instance? false force-id nil force-frame-id nil keep-ids? false}}]
-   (let [component-page  (when components-v2
-                           (ctpl/get-page library-data (:main-instance-page component)))
+   (let [component-page  (ctpl/get-page library-data (:main-instance-page component))
+
+         component-shape (-> (get-shape component-page (:main-instance-id component))
+                             (assoc :parent-id nil) ;; On v2 we force parent-id to nil in order to behave like v1
+                             (assoc :frame-id uuid/zero)
+                             (remove-swap-keep-attrs))
 
-         component-shape (if components-v2
-                           (-> (get-shape component-page (:main-instance-id component))
-                               (assoc :parent-id nil) ;; On v2 we force parent-id to nil in order to behave like v1
-                               (assoc :frame-id uuid/zero)
-                               (remove-swap-keep-attrs))
-                           (get-shape component (:id component)))
 
          orig-pos        (gpt/point (:x component-shape) (:y component-shape))
          delta           (gpt/subtract position orig-pos)
@@ -395,8 +334,7 @@
          update-new-shape
          (fn [new-shape original-shape]
            (let [new-name (:name new-shape)
-                 root?    (or (ctk/instance-root? original-shape)   ; If shape is inside a component (not components-v2)
-                              (nil? (:parent-id original-shape)))]  ; we detect it by having no parent)
+                 root?    (ctk/instance-root? original-shape)]
 
              (when root?
                (vswap! unames conj new-name))
@@ -417,10 +355,8 @@
                main-instance?
                (dissoc :shape-ref)
 
-               (and (not main-instance?)
-                    (or components-v2                        ; In v1, shape-ref points to the remote instance
-                        (nil? (:shape-ref original-shape)))) ; in v2, shape-ref points to the near instance
-               (assoc :shape-ref (:id original-shape))
+               (not main-instance?)
+               (assoc :shape-ref (:id original-shape)) ; shape-ref points to the near instance
 
                (nil? (:parent-id original-shape))
                (assoc :component-id (:id component)
@@ -428,14 +364,14 @@
                       :component-root true
                       :name new-name)
 
-               (or (some? (:parent-id original-shape)) ; On v2 we have removed the parent-id for component roots (see above)
+               (or (some? (:parent-id original-shape)) ; On v2 we have removed the parent-id for component roots
                    (some? component-frame))
                (dissoc :component-root))))
 
          [new-shape new-shapes _]
          (ctst/clone-shape component-shape
                            frame-id
-                           (if components-v2 (:objects component-page) (:objects component))
+                           (:objects component-page)
                            :update-new-shape update-new-shape
                            :force-id force-id
                            :keep-ids? keep-ids?
@@ -545,21 +481,39 @@
            no-changes?
            (and (every? #(= parent-id (:parent-id %)) children)
                 (not pasting?))
+
+           ;; When pasting frames, children have the frames and their children
+           ;; We need to check only the top shapes
+           children-ids (set (map :id children))
+           top-children (remove #(contains? children-ids (:parent-id %)) children)
+
+           ;; Are all the top-children a main-instance of a component?
            all-main?
-           (every? ctk/main-instance? children)
+           (every? ctk/main-instance? top-children)
 
            any-main-descendant
            (some
             (fn [shape]
               (some ctk/main-instance? (cfh/get-children-with-self objects (:id shape))))
-            children)]
+            children)
 
+           ;; Are all the top-children a main-instance of a cutted component?
+           all-comp-cut?
+           (when all-main?
+             (->> top-children
+                  (map #(ctkl/get-component (dm/get-in libraries [(:component-file %) :data])
+                                            (:component-id %)
+                                            true))
+                  (every? :deleted)))]
        (if (or no-changes?
                (and (not (invalid-structure-for-component? objects parent children pasting? libraries))
-                    ;; If we are moving into a variant-container, all the items should be main
-                    (or all-main? (not (ctk/is-variant-container? parent)))
                     ;; If we are moving into a main component, no descendant can be main
-                    (or (nil? any-main-descendant) (not (ctk/main-instance? parent)))))
+                    (or (nil? any-main-descendant) (not (ctk/main-instance? parent)))
+                    ;; If we are moving into a variant-container, all the items should be main
+                    ;; so if we are pasting, only allow main instances that are cut-and-pasted
+                    (or (not (ctk/is-variant-container? parent))
+                        (and (not pasting?) all-main?)
+                        all-comp-cut?)))
          [parent-id (get-frame parent-id)]
          (recur (:parent-id parent) objects children pasting? libraries))))))
 
@@ -602,8 +556,7 @@
 
         ;; TODO: the check of :width and :height probably may be
         ;; removed after the check added in
-        ;; data/workspace/modifiers/check-delta function. Better check
-        ;; it and test toroughly when activating components-v2 mode.
+        ;; data/workspace/modifiers/check-delta function.
         in-copy?
         (ctk/in-component-copy? shape)
 

common/src/app/common/types/file.cljc

@@ -130,7 +130,7 @@
        (some? page-id)
        (ctpl/add-page page)
 
-       (contains? cfeat/*current* "components/v2")
+       :always
        (assoc-in [:options :components-v2] true)))))
 
 (defn make-file
@@ -221,48 +221,45 @@
   (ctpl/get-page file-data (:main-instance-page component)))
 
 (defn get-component-container
-  "Retrieve the container that holds the component shapes (the page in components-v2
-   or the component itself in v1 or deleted component)."
+  "Retrieve the container that holds the component shapes (the page
+   or the component itself on deleted component)."
   [file-data component]
-  (let [components-v2 (dm/get-in file-data [:options :components-v2])]
-    (if (and components-v2 (not (:deleted component)))
-      (let [component-page (get-component-page file-data component)]
-        (cfh/make-container component-page :page))
-      (cfh/make-container component :component))))
+  (if (not (:deleted component))
+    (let [component-page (get-component-page file-data component)]
+      (cfh/make-container component-page :page))
+    (cfh/make-container component :component)))
 
 (defn get-component-root
   "Retrieve the root shape of the component."
   [file-data component]
-  (let [components-v2 (dm/get-in file-data [:options :components-v2])]
-    (if (and components-v2 (not (:deleted component)))
-      (-> file-data
-          (get-component-page component)
-          (ctn/get-shape (:main-instance-id component)))
-      (ctk/get-component-root component))))
+  (if (not (:deleted component))
+    (-> file-data
+        (get-component-page component)
+        (ctn/get-shape (:main-instance-id component)))
+    (ctk/get-component-root component)))
 
 (defn get-component-shape
   "Retrieve one shape in the component by id. If with-context? is true, add the
    file and container where the shape resides in its metadata."
   [file-data component shape-id & {:keys [with-context?] :or {with-context? false}}]
-  (let [components-v2 (dm/get-in file-data [:options :components-v2])]
-    (if (and components-v2 (not (:deleted component)))
-      (let [component-page (get-component-page file-data component)]
-        (when component-page
-          (let [child (cfh/get-child (:objects component-page)
-                                     (:main-instance-id component)
-                                     shape-id)]
-            (cond-> child
-              (and child with-context?)
-              (with-meta {:file {:id (:id file-data)
-                                 :data file-data}
-                          :container (ctn/make-container component-page :page)})))))
+  (if (not (:deleted component))
+    (let [component-page (get-component-page file-data component)]
+      (when component-page
+        (let [child (cfh/get-child (:objects component-page)
+                                   (:main-instance-id component)
+                                   shape-id)]
+          (cond-> child
+            (and child with-context?)
+            (with-meta {:file {:id (:id file-data)
+                               :data file-data}
+                        :container (ctn/make-container component-page :page)})))))
 
-      (let [shape (dm/get-in component [:objects shape-id])]
-        (cond-> shape
-          (and shape with-context?)
-          (with-meta {:file {:id (:id file-data)
-                             :data file-data}
-                      :container (ctn/make-container component :component)}))))))
+    (let [shape (dm/get-in component [:objects shape-id])]
+      (cond-> shape
+        (and shape with-context?)
+        (with-meta {:file {:id (:id file-data)
+                           :data file-data}
+                    :container (ctn/make-container component :component)})))))
 
 (defn get-ref-shape
   "Retrieve the shape in the component that is referenced by the instance shape."
@@ -384,12 +381,11 @@
 (defn get-component-shapes
   "Retrieve all shapes of the component"
   [file-data component]
-  (let [components-v2 (dm/get-in file-data [:options :components-v2])]
-    (if (and components-v2
-             (not (:deleted component))) ;; the deleted components have its children in the :objects property
-      (let [instance-page (get-component-page file-data component)]
-        (cfh/get-children-with-self (:objects instance-page) (:main-instance-id component)))
-      (vals (:objects component)))))
+
+  (if (not (:deleted component)) ;; the deleted components have its children in the :objects property
+    (let [instance-page (get-component-page file-data component)]
+      (cfh/get-children-with-self (:objects instance-page) (:main-instance-id component)))
+    (vals (:objects component))))
 
 ;; Return true if the object is a component that exists on the file or its libraries (even a deleted one)
 (defn is-main-of-known-component?
@@ -403,44 +399,52 @@
 
 (defn load-component-objects
   "Add an :objects property to the component, with only the shapes that belong to it"
-  [file-data component]
-  (let [components-v2 (dm/get-in file-data [:options :components-v2])]
-    (if (and components-v2 component (empty? (:objects component))) ;; This operation may be called twice, e.g. in an idempotent change
-      (let [component-page (get-component-page file-data component)
-            page-objects   (:objects component-page)
-            objects        (->> (cons (:main-instance-id component)
-                                      (cfh/get-children-ids page-objects (:main-instance-id component)))
-                                (map #(get page-objects %))
-                                (d/index-by :id))]
-        (assoc component :objects objects))
-      component)))
+  ([file-data component]
+   (load-component-objects file-data component (gpt/point 0 0)))
+  ([file-data component delta]
+   (if (and component (empty? (:objects component))) ;; This operation may be called twice, e.g. in an idempotent change
+     (let [component-page (get-component-page file-data component)
+           page-objects   (:objects component-page)
+           objects        (->> (cons (:main-instance-id component)
+                                     (cfh/get-children-ids page-objects (:main-instance-id component)))
+                               (map #(get page-objects %))
+                               ;; when it is an undo of a cut-paste, we need to undo the movement
+                               ;; of the shapes so we need to move them delta
+                               (map #(gsh/move % delta))
+                               (d/index-by :id))]
+       (assoc component :objects objects))
+     component)))
 
 (defn delete-component
   "Mark a component as deleted and store the main instance shapes iside it, to
   be able to be recovered later."
-  [file-data component-id skip-undelete? main-instance]
-  (let [components-v2 (dm/get-in file-data [:options :components-v2])]
-    (if (or (not components-v2) skip-undelete?)
+  [file-data component-id skip-undelete? delta]
+  (let [delta         (or delta (gpt/point 0 0))]
+    (if skip-undelete?
       (ctkl/delete-component file-data component-id)
-      (let [set-main-instance ;; If there is a saved main-instance, restore it. This happens on the restore-component action
-            #(if main-instance
-               (assoc-in % [:objects (:main-instance-id %)] main-instance)
-               %)]
-        (-> file-data
-            (ctkl/update-component component-id (partial load-component-objects file-data))
-            (ctkl/update-component component-id set-main-instance)
-            (ctkl/mark-component-deleted component-id))))))
+      (-> file-data
+          (ctkl/update-component component-id #(load-component-objects file-data % delta))
+          (ctkl/mark-component-deleted component-id)))))
 
 (defn restore-component
   "Recover a deleted component and all its shapes and put all this again in place."
   [file-data component-id page-id]
-  (let [components-v2 (dm/get-in file-data [:options :components-v2])
-        update-page? (and components-v2 (not (nil? page-id)))]
-    (-> file-data
-        (ctkl/update-component component-id #(dissoc % :objects))
-        (ctkl/mark-component-undeleted component-id)
-        (cond-> update-page?
-          (ctkl/update-component component-id #(assoc % :main-instance-page page-id))))))
+  (let [update-page?       (not (nil? page-id))
+        component          (ctkl/get-component file-data component-id true)
+        main-instance-page (or page-id (:main-instance-page component))
+        main-instance      (dm/get-in file-data [:pages-index main-instance-page
+                                                 :objects (:main-instance-id component)])]
+    (cond-> file-data
+      :always
+      (->
+       (ctkl/update-component component-id #(dissoc % :objects))
+       (ctkl/mark-component-undeleted component-id))
+
+      update-page?
+      (ctkl/update-component component-id #(assoc % :main-instance-page page-id))
+
+      (ctk/is-variant? component)
+      (ctkl/update-component component-id #(assoc % :variant-id (:variant-id main-instance))))))
 
 (defn purge-component
   "Remove permanently a component."
@@ -557,7 +561,6 @@
                                              component
                                              library-data
                                              position
-                                             (dm/get-in file-data [:options :components-v2])
                                              {:main-instance? true
                                               :keep-ids? true})
 
@@ -589,8 +592,7 @@
                                        :name (:name component)
                                        :path (:path component)
                                        :main-instance-id (:id main-instance-shape)
-                                       :main-instance-page page-id
-                                       :shapes (get-component-shapes library-data component)}))
+                                       :main-instance-page page-id}))
 
                 ; Change all existing instances to point to the local file
                 remap-instances

common/src/app/common/types/shape.cljc

@@ -32,6 +32,7 @@
    [app.common.types.shape.shadow :as ctss]
    [app.common.types.shape.text :as ctsx]
    [app.common.types.token :as cto]
+   [app.common.types.variant :as ctv]
    [app.common.uuid :as uuid]
    [clojure.set :as set]))
 
@@ -233,7 +234,7 @@
   [:map {:title "BoolAttrs"}
    [:shapes [:vector {:gen/max 10 :gen/min 1} ::sm/uuid]]
    [:bool-type [::sm/one-of bool-types]]
-   [:bool-content ::ctsp/content]])
+   [:content ::ctsp/content]])
 
 (def ^:private schema:rect-attrs
   [:map {:title "RectAttrs"}])
@@ -317,7 +318,9 @@
       schema:frame-attrs
       schema:shape-attrs
       schema:shape-geom-attrs
-      schema:shape-base-attrs]]
+      schema:shape-base-attrs
+      ::ctv/variant-shape
+      ::ctv/variant-container]]
 
     [:bool
      [:merge {:title "BoolShape"}

common/src/app/common/types/shape/path.cljc

@@ -6,7 +6,16 @@
 
 (ns app.common.types.shape.path
   (:require
-   [app.common.schema :as sm]))
+   [app.common.schema :as sm])
+  (:import
+   #?(:cljs [goog.string StringBuffer]
+      :clj  [java.nio ByteBuffer])))
+
+#?(:clj (set! *warn-on-reflection* true))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; SCHEMA: PLAIN FORMAT
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (def schema:line-to-segment
   [:map
@@ -52,5 +61,371 @@
 (def schema:path-content
   [:vector schema:path-segment])
 
+(def check-path-content
+  (sm/check-fn schema:path-content))
+
 (sm/register! ::segment schema:path-segment)
 (sm/register! ::content schema:path-content)
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; TYPE: PATH-DATA
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:const SEGMENT-BYTE-SIZE 28)
+
+(defprotocol IPathData
+  (-write-to [_ buffer offset] "write the content to the specified buffer"))
+
+(defrecord PathSegment [command params])
+
+(defn- get-path-string
+  "Format the path data structure to string"
+  [buffer size]
+  (let [builder #?(:clj (java.lang.StringBuilder. (int (* size 4)))
+                   :cljs (StringBuffer.))]
+    (loop [index 0]
+      (when (< index size)
+        (let [offset (* index SEGMENT-BYTE-SIZE)
+              type   #?(:clj  (.getShort ^ByteBuffer buffer offset)
+                        :cljs (.getInt16 buffer offset))]
+          (case (long type)
+            1 (let [x #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 20))
+                         :cljs (.getFloat32 buffer (+ offset 20)))
+                    y #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 24))
+                         :cljs (.getFloat32 buffer (+ offset 24)))]
+                (doto builder
+                  (.append "M")
+                  (.append x)
+                  (.append ",")
+                  (.append y)))
+            2 (let [x #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 20))
+                         :cljs (.getFloat32 buffer (+ offset 20)))
+                    y #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 24))
+                         :cljs (.getFloat32 buffer (+ offset 24)))]
+                (doto builder
+                  (.append "L")
+                  (.append x)
+                  (.append ",")
+                  (.append y)))
+
+            3 (let [c1x #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 4))
+                           :cljs (.getFloat32 buffer (+ offset 4)))
+                    c1y #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 8))
+                           :cljs (.getFloat32 buffer (+ offset 8)))
+                    c2x #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 12))
+                           :cljs (.getFloat32 buffer (+ offset 12)))
+                    c2y #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 16))
+                           :cljs (.getFloat32 buffer (+ offset 16)))
+                    x   #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 20))
+                           :cljs (.getFloat32 buffer (+ offset 20)))
+                    y   #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 24))
+                           :cljs (.getFloat32 buffer (+ offset 24)))]
+                (doto builder
+                  (.append "C")
+                  (.append c1x)
+                  (.append ",")
+                  (.append c1y)
+                  (.append ",")
+                  (.append c2x)
+                  (.append ",")
+                  (.append c2y)
+                  (.append ",")
+                  (.append x)
+                  (.append ",")
+                  (.append y)))
+            4 (doto builder
+                (.append "Z")))
+          (recur (inc index)))))
+
+    (.toString builder)))
+
+(defn- read-segment
+  [buffer index]
+  (let [offset (* index SEGMENT-BYTE-SIZE)
+        type   #?(:clj  (.getShort ^ByteBuffer buffer offset)
+                  :cljs (.getInt16 buffer offset))]
+    (case (long type)
+      1 (let [x #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 20))
+                   :cljs (.getFloat32 buffer (+ offset 20)))
+              y #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 24))
+                   :cljs (.getFloat32 buffer (+ offset 24)))]
+          (->PathSegment :move-to {:x x :y y}))
+
+      2 (let [x #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 20))
+                   :cljs (.getFloat32 buffer (+ offset 20)))
+              y #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 24))
+                   :cljs (.getFloat32 buffer (+ offset 24)))]
+          (->PathSegment :line-to {:x x :y y}))
+
+      3 (let [c1x #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 4))
+                     :cljs (.getFloat32 buffer (+ offset 4)))
+              c1y #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 8))
+                     :cljs (.getFloat32 buffer (+ offset 8)))
+              c2x #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 12))
+                     :cljs (.getFloat32 buffer (+ offset 12)))
+              c2y #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 16))
+                     :cljs (.getFloat32 buffer (+ offset 16)))
+              x   #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 20))
+                     :cljs (.getFloat32 buffer (+ offset 20)))
+              y   #?(:clj  (.getFloat ^ByteBuffer buffer (+ offset 24))
+                     :cljs (.getFloat32 buffer (+ offset 24)))]
+
+          (->PathSegment :curve-to {:x x :y y :c1x c1x :c1y c1y :c2x c2x :c2y c2y}))
+
+      4 (->PathSegment :close-path {}))))
+
+(defn- in-range?
+  [size i]
+  (and (< i size) (>= i 0)))
+
+#?(:clj
+   (deftype PathData [size buffer]
+     Object
+     (toString [_]
+       (get-path-string buffer size))
+
+     clojure.lang.Sequential
+     clojure.lang.IPersistentCollection
+
+     (empty [_]
+       (throw (ex-info "not implemented" {})))
+     (equiv [_ other]
+       (if (instance? PathData other)
+         (.equals ^ByteBuffer buffer (.-buffer ^PathData other))
+         false))
+
+     (seq [this]
+       (when (pos? size)
+         (->> (range size)
+              (map (fn [i] (nth this i))))))
+
+     (cons [_ _val]
+       (throw (ex-info "not implemented" {})))
+
+     clojure.lang.IReduceInit
+     (reduce [_ f start]
+       (loop [index  0
+              result start]
+         (if (< index size)
+           (let [result (f result (read-segment buffer index))]
+             (if (reduced? result)
+               @result
+               (recur (inc index) result)))
+           result)))
+
+     clojure.lang.Indexed
+     (nth [_ i]
+       (if (in-range? size i)
+         (read-segment buffer i)
+         nil))
+
+     (nth [_ i default]
+       (if (in-range? size i)
+         (read-segment buffer i)
+         default))
+
+     clojure.lang.Counted
+     (count [_] size))
+
+   :cljs
+   (deftype PathData [size buffer dview]
+     Object
+     (toString [_]
+       (get-path-string dview size))
+
+     IPathData
+     (-write-to [_ into-buffer offset]
+       (assert (instance? js/ArrayBuffer into-buffer) "expected an instance of Uint32Array")
+       (let [size (.-byteLength buffer)
+             mem  (js/Uint32Array. into-buffer offset size)]
+         (.set mem (js/Uint32Array. buffer))))
+
+     cljs.core/ISequential
+     cljs.core/IEquiv
+     (-equiv [_ other]
+       (if (instance? PathData other)
+         (let [obuffer (.-buffer other)
+               osize   (.-byteLength obuffer)
+               csize   (.-byteLength buffer)]
+           (if (= osize csize)
+             (let [cb (js/Uint32Array. buffer)
+                   ob (js/Uint32Array. obuffer)]
+               (loop [i 0]
+                 (if (< i osize)
+                   (if (= (aget ob i)
+                          (aget cb i))
+                     (recur (inc i))
+                     false)
+                   true)))
+             false))
+         false))
+
+     cljs.core/IReduce
+     (-reduce [_ f]
+       (loop [index  1
+              result (if (pos? size)
+                       (read-segment dview 0)
+                       nil)]
+         (if (< index size)
+           (let [result (f result (read-segment dview index))]
+             (if (reduced? result)
+               @result
+               (recur (inc index) result)))
+           result)))
+
+     (-reduce [_ f start]
+       (loop [index  0
+              result start]
+         (if (< index size)
+           (let [result (f result (read-segment dview index))]
+             (if (reduced? result)
+               @result
+               (recur (inc index) result)))
+           result)))
+
+     cljs.core/IHash
+     (-hash [_]
+       (throw (ex-info "not-implemented" {})))
+
+     cljs.core/ICounted
+     (-count [_] size)
+
+     cljs.core/IIndexed
+     (-nth [_ i]
+       (if (in-range? size i)
+         (read-segment dview i)
+         nil))
+
+     (-nth [_ i default]
+       (if (in-range? i size)
+         (read-segment dview i)
+         default))
+
+     cljs.core/ISeqable
+     (-seq [this]
+       (when (pos? size)
+         (->> (range size)
+              (map (fn [i] (cljs.core/-nth this i))))))))
+
+(defn- from-bytes
+  [buffer]
+  #?(:clj
+     (cond
+       (instance? ByteBuffer buffer)
+       (let [size  (.capacity ^ByteBuffer buffer)
+             count (long (/ size SEGMENT-BYTE-SIZE))]
+         (PathData. count buffer))
+
+       (bytes? buffer)
+       (let [size  (alength ^bytes buffer)
+             count (long (/ size SEGMENT-BYTE-SIZE))]
+         (PathData. count
+                    (ByteBuffer/wrap buffer)))
+
+       :else
+       (throw (java.lang.IllegalArgumentException. "invalid data provided")))
+
+     :cljs
+     (cond
+       (instance? js/ArrayBuffer buffer)
+       (let [size  (.-byteLength buffer)
+             count (long (/ size SEGMENT-BYTE-SIZE))]
+         (PathData. count
+                    buffer
+                    (js/DataView. buffer)))
+
+       (instance? js/DataView buffer)
+       (let [dview  buffer
+             buffer (.-buffer dview)
+             size  (.-byteLength buffer)
+             count (long (/ size SEGMENT-BYTE-SIZE))]
+         (PathData. count buffer dview))
+
+       :else
+       (throw (js/Error. "invalid data provided")))))
+
+;; FIXME: consider implementing with reduce
+;; FIXME: consider ensure fixed precision for avoid doing it on formatting
+
+(defn- from-plain
+  "Create a PathData instance from plain data structures"
+  [content]
+  (assert (check-path-content content))
+
+  (let [content (vec content)
+        total   (count content)
+        #?@(:cljs [buffer (new js/ArrayBuffer (* total SEGMENT-BYTE-SIZE))
+                   dview  (new js/DataView buffer)]
+            :clj  [buffer (ByteBuffer/allocate (* total SEGMENT-BYTE-SIZE))])]
+    (loop [index 0]
+      (when (< index total)
+        (let [segment (nth content index)
+              offset  (* index SEGMENT-BYTE-SIZE)]
+          (case (get segment :command)
+            :move-to
+            (let [params (get segment :params)
+                  x      (float (get params :x))
+                  y      (float (get params :y))]
+              #?(:clj  (.putShort buffer (int offset) (short 1))
+                 :cljs (.setInt16 dview offset 1))
+              #?(:clj  (.putFloat buffer (+ offset 20) x)
+                 :cljs (.setFloat32 dview (+ offset 20) x))
+              #?(:clj  (.putFloat buffer (+ offset 24) y)
+                 :cljs (.setFloat32 dview (+ offset 24) y)))
+
+            :line-to
+            (let [params (get segment :params)
+                  x      (float (get params :x))
+                  y      (float (get params :y))]
+              #?(:clj  (.putShort buffer (int offset) (short 2))
+                 :cljs (.setInt16 dview offset 2))
+              #?(:clj  (.putFloat buffer (+ offset 20) x)
+                 :cljs (.setFloat32 dview (+ offset 20) x))
+              #?(:clj  (.putFloat buffer (+ offset 24) y)
+                 :cljs (.setFloat32 dview (+ offset 24) y)))
+
+            :curve-to
+            (let [params (get segment :params)
+                  x      (float (get params :x))
+                  y      (float (get params :y))
+                  c1x    (float (get params :c1x x))
+                  c1y    (float (get params :c1y y))
+                  c2x    (float (get params :c2x x))
+                  c2y    (float (get params :c2y y))]
+
+              #?(:clj  (.putShort buffer (int offset) (short 3))
+                 :cljs (.setInt16 dview offset 3))
+              #?(:clj  (.putFloat buffer (+ offset 4) c1x)
+                 :cljs (.setFloat32 dview (+ offset 4) c1x))
+              #?(:clj  (.putFloat buffer (+ offset 8) c1y)
+                 :cljs (.setFloat32 dview (+ offset 8) c1y))
+              #?(:clj  (.putFloat buffer (+ offset 12) c2x)
+                 :cljs (.setFloat32 dview (+ offset 12) c2x))
+              #?(:clj  (.putFloat buffer (+ offset 16) c2y)
+                 :cljs (.setFloat32 dview (+ offset 16) c2y))
+              #?(:clj  (.putFloat buffer (+ offset 20) x)
+                 :cljs (.setFloat32 dview (+ offset 20) x))
+              #?(:clj  (.putFloat buffer (+ offset 24) y)
+                 :cljs (.setFloat32 dview (+ offset 24) y)))
+
+            :close-path
+            #?(:clj  (.putShort buffer (int offset) (short 4))
+               :cljs (.setInt16 dview offset 4)))
+          (recur (inc index)))))
+
+    #?(:cljs (from-bytes dview)
+       :clj  (from-bytes buffer))))
+
+(defn path-data
+  "Create an instance of PathData, returns itself if it is already
+  PathData instance"
+  [data]
+  (cond
+    (instance? PathData data)
+    data
+
+    (sequential? data)
+    (from-plain data)
+
+    :else
+    (from-bytes data)))

common/src/app/common/types/token.cljc

@@ -66,16 +66,6 @@
   [n]
   (string? n))
 
-;; TODO Move this to tokens-lib
-(sm/register!
- ^{::sm/type ::token}
- [:map {:title "Token"}
-  [:name token-name-ref]
-  [:type [::sm/one-of token-types]]
-  [:value :any]
-  [:description {:optional true} [:maybe :string]]
-  [:modified-at {:optional true} ::sm/inst]])
-
 (sm/register!
  ^{::sm/type ::color}
  [:map

common/src/app/common/types/token_theme.cljc

@@ -1,28 +0,0 @@
-;; 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.common.types.token-theme
-  (:require
-   [app.common.schema :as sm]))
-
-(sm/register!
- ^{::sm/type ::token-theme}
- [:map {:title "TokenTheme"}
-  [:name :string]
-  [:group :string]
-  [:description [:maybe :string]]
-  [:is-source :boolean]
-  [:id :string]
-  [:modified-at {:optional true} ::sm/inst]
-  [:sets :any]])
-
-(sm/register!
- ^{::sm/type ::token-set}
- [:map {:title "TokenSet"}
-  [:name :string]
-  [:description {:optional true} [:maybe :string]]
-  [:modified-at {:optional true} ::sm/inst]
-  [:tokens {:optional true} :any]])

common/src/app/common/types/tokens_lib.cljc

@@ -9,7 +9,9 @@
    #?(:clj [app.common.fressian :as fres])
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.files.helpers :as cfh]
    [app.common.schema :as sm]
+   [app.common.schema.generators :as sg]
    [app.common.time :as dt]
    [app.common.transit :as t]
    [app.common.types.token :as cto]
@@ -117,12 +119,15 @@
    [:name cto/token-name-ref]
    [:type [::sm/one-of cto/token-types]]
    [:value :any]
-   [:description [:maybe :string]]
-   [:modified-at ::sm/inst]])
+   [:description {:optional true} :string]
+   [:modified-at {:optional true} ::sm/inst]])
+
+(declare make-token)
 
 (def schema:token
-  [:and
-   schema:token-attrs
+  [:and {:gen/gen (->> (sg/generator schema:token-attrs)
+                       (sg/fmap #(make-token %)))}
+   (sm/required-keys schema:token-attrs)
    [:fn token?]])
 
 (def check-token
@@ -321,6 +326,7 @@
            (assoc-in [:ids temp-id] token))))
    {:tokens-tree {} :ids {}} tokens))
 
+
 (defprotocol ITokenSet
   (update-name [_ set-name] "change a token set name while keeping the path")
   (add-token [_ token] "add a token at the end of the list")
@@ -380,15 +386,32 @@
 (def schema:token-set-attrs
   [:map {:title "TokenSet"}
    [:name :string]
-   [:description [:maybe :string]]
-   [:modified-at ::sm/inst]
-   [:tokens [:and
-             [:map-of {:gen/max 5} :string schema:token]
-             [:fn d/ordered-map?]]]])
+   [:description {:optional true} :string]
+   [:modified-at {:optional true} ::sm/inst]
+   [:tokens {:optional true
+             :gen/gen (->> (sg/generator [:map-of ::sm/text schema:token])
+                           (sg/fmap #(into (d/ordered-map) %)))}
+    [:and
+     [:map-of {:gen/max 5
+               :decode/json (fn [v]
+                              (cond
+                                (d/ordered-map? v)
+                                v
+
+                                (map? v)
+                                (into (d/ordered-map) v)
+
+                                :else
+                                v))}
+      :string schema:token]
+     [:fn d/ordered-map?]]]])
+
+(declare make-token-set)
 
 (def schema:token-set
-  [:and
-   schema:token-set-attrs
+  [:and {:gen/gen (->> (sg/generator schema:token-set-attrs)
+                       (sg/fmap #(make-token-set %)))}
+   (sm/required-keys schema:token-set-attrs)
    [:fn token-set?]])
 
 (sm/register! ::token-set schema:token-set)
@@ -552,16 +575,16 @@
 (def schema:token-theme-attrs
   [:map {:title "TokenTheme"}
    [:name :string]
-   [:group :string]
-   [:description [:maybe :string]]
-   [:is-source [:maybe :boolean]]
-   [:id :string]
-   [:modified-at ::sm/inst]
-   [:sets [:set {:gen/max 5} :string]]])
+   [:group {:optional true} :string]
+   [:description {:optional true} :string]
+   [:is-source {:optional true} :boolean]
+   [:id {:optional true} :string]
+   [:modified-at {:optional true} ::sm/inst]
+   [:sets {:optional true} [:set {:gen/max 5} :string]]])
 
 (def schema:token-theme
   [:and
-   schema:token-theme-attrs
+   (sm/required-keys schema:token-theme-attrs)
    [:fn token-theme?]])
 
 (sm/register! ::token-theme schema:token-theme)
@@ -803,7 +826,7 @@
          (map-indexed (fn [index item]
                         (assoc item :index index))))))
 
-(defn- flatten-nested-tokens-json
+(defn flatten-nested-tokens-json
   "Recursively flatten the dtcg token structure, joining keys with '.'."
   [tokens token-path]
   (reduce-kv
@@ -830,7 +853,7 @@
 
 (declare make-tokens-lib)
 
-(defn- legacy-nodes->dtcg-nodes [sets-data]
+(defn legacy-nodes->dtcg-nodes [sets-data]
   (walk/postwalk
    (fn [node]
      (cond-> node
@@ -866,8 +889,6 @@ Will return a value that matches this schema:
   (get-active-themes-set-tokens [_] "set of set names that are active in the the active themes")
   (encode-dtcg [_] "Encodes library to a dtcg compatible json string")
   (decode-dtcg-json [_ parsed-json] "Decodes parsed json containing tokens and converts to library")
-  (decode-single-set-json [_ set-name tokens] "Decodes parsed json containing single token set and converts to library")
-  (decode-single-set-legacy-json [_ set-name tokens] "Decodes parsed legacy json containing single token set and converts to library")
   (decode-legacy-json [_ parsed-json] "Decodes parsed legacy json containing tokens and converts to library")
   (get-all-tokens [_] "all tokens in the lib")
   (validate [_]))
@@ -922,6 +943,7 @@ Will return a value that matches this schema:
         this)))
 
 
+
   (delete-set [_ set-name]
     (let [prefixed-path (set-name->prefixed-full-path set-name)]
       (TokensLib. (d/dissoc-in sets prefixed-path)
@@ -1311,17 +1333,6 @@ Will return a value that matches this schema:
           (assoc-in ["$metadata" "activeThemes"] active-themes-clear)
           (assoc-in ["$metadata" "activeSets"] active-sets))))
 
-  (decode-single-set-json [this set-name tokens]
-    (assert (map? tokens) "expected a map data structure for `data`")
-
-    (add-set this (make-token-set :name (normalize-set-name set-name)
-                                  :tokens (flatten-nested-tokens-json tokens ""))))
-
-
-  (decode-single-set-legacy-json [this set-name tokens]
-    (assert (map? tokens) "expected a map data structure for `data`")
-    (decode-single-set-json this set-name (legacy-nodes->dtcg-nodes tokens)))
-
   (decode-dtcg-json [_ data]
     (assert (map? data) "expected a map data structure for `data`")
 
@@ -1481,6 +1492,14 @@ Will return a value that matches this schema:
    {:encode/json encode-dtcg
     :decode/json decode-dtcg}})
 
+(defn duplicate-set [set-name lib & {:keys [suffix]}]
+  (let [sets (get-sets lib)
+        unames (map :name sets)
+        copy-name (cfh/generate-unique-name set-name unames :suffix suffix)]
+    (some-> (get-set lib set-name)
+            (assoc :name copy-name)
+            (assoc :modified-at (dt/now)))))
+
 (sm/register! type:tokens-lib)
 
 ;; === Serialization handlers for RPC API (transit) and database (fressian)

common/src/app/common/types/variant.cljc

@@ -0,0 +1,281 @@
+;; 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.common.types.variant
+  (:require
+   [app.common.data :as d]
+   [app.common.files.helpers :as cfh]
+   [app.common.math :as math]
+   [app.common.schema :as sm]
+   [cuerdas.core :as str]))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; SCHEMA
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def schema:variant-property
+  [:map
+   [:name :string]
+   [:value :string]])
+
+(def schema:variant-component
+  ;; A component that is part of a variant set.
+  [:map
+   [:variant-id {:optional true} ::sm/uuid]
+   [:variant-properties {:optional true} [:vector schema:variant-property]]])
+
+(def schema:variant-shape
+  ;; The root shape of the main instance of a variant component.
+  [:map
+   [:variant-id {:optional true} ::sm/uuid]
+   [:variant-name {:optional true} :string]])
+
+(def schema:variant-container
+  ;; is a board that contains all variant components of a variant set,
+  ;; for grouping them visually in the workspace.
+  [:map
+   [:is-variant-container {:optional true} :boolean]])
+
+(sm/register! ::variant-property schema:variant-property)
+(sm/register! ::variant-component schema:variant-component)
+(sm/register! ::variant-shape schema:variant-shape)
+(sm/register! ::variant-container schema:variant-container)
+
+(def valid-variant-component?
+  (sm/check-fn schema:variant-component))
+
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def property-prefix "Property")
+(def property-regex (re-pattern (str property-prefix "(\\d+)")))
+(def value-prefix "Value ")
+
+
+(defn properties-to-name
+  "Transform the properties into a name, with the values separated by comma"
+  [properties]
+  (->> properties
+       (map :value)
+       (remove str/empty?)
+       (str/join ", ")))
+
+
+(defn next-property-number
+  "Returns the next property number, to avoid duplicates on the property names"
+  [properties]
+  (let [numbers (keep
+                 #(some->> (:name %) (re-find property-regex) second d/parse-integer)
+                 properties)
+        max-num (if (seq numbers)
+                  (apply max numbers)
+                  0)]
+    (inc (max max-num (count properties)))))
+
+(defn add-new-prop
+  "Adds a new property with generated name and provided value to the existing props list."
+  [props value]
+  (conj props {:name (str property-prefix (next-property-number props))
+               :value value}))
+
+(defn add-new-props
+  "Adds new properties with generated names and provided values to the existing props list."
+  [props values]
+  (let [next-prop-num (next-property-number props)
+        xf (map-indexed (fn [i v]
+                          {:name (str property-prefix (+ next-prop-num i))
+                           :value v}))]
+    (into props xf values)))
+
+(defn path-to-properties
+  "From a list of properties and a name with path, assign each token of the
+   path as value of a different property"
+  ([path properties]
+   (path-to-properties path properties 0))
+  ([path properties min-props]
+   (let [cpath          (cfh/split-path path)
+         total-props    (max (count cpath) min-props)
+         assigned       (mapv #(assoc % :value (nth cpath %2 "")) properties (range))
+         ;; Add empty strings to the end of cpath to reach the minimum number of properties
+         cpath          (take total-props (concat cpath (repeat "")))
+         remaining      (drop (count properties) cpath)]
+     (add-new-props assigned remaining))))
+
+
+(defn properties-map-to-string
+  "Transforms a map of properties to a string of properties omitting the empty ones"
+  [properties]
+  (->> properties
+       (keep (fn [{:keys [name value]}]
+               (when (not (str/blank? value))
+                 (str name "=" value))))
+       (str/join ", ")))
+
+
+(defn properties-string-to-map
+  "Transforms a string of properties to a map of properties"
+  [s]
+  (->> (str/split s ",")
+       (mapv #(str/split % "="))
+       (mapv (fn [[k v]]
+               {:name (str/trim k)
+                :value (str/trim v)}))))
+
+
+(defn valid-properties-string?
+  "Checks if a string of properties has a processable format or not"
+  [s]
+  (let [pattern #"^([a-zA-Z0-9\s]+=[a-zA-Z0-9\s]+)(,\s*[a-zA-Z0-9\s]+=[a-zA-Z0-9\s]+)*$"]
+    (not (nil? (re-matches pattern s)))))
+
+
+(defn find-properties-to-remove
+  "Compares two property maps to find which properties should be removed"
+  [prev-props upd-props]
+  (let [upd-names (set (map :name upd-props))]
+    (filterv #(not (contains? upd-names (:name %))) prev-props)))
+
+
+(defn find-properties-to-update
+  "Compares two property maps to find which properties should be updated"
+  [prev-props upd-props]
+  (filterv #(some (fn [prop] (and (= (:name %) (:name prop))
+                                  (not= (:value %) (:value prop)))) prev-props) upd-props))
+
+
+(defn find-properties-to-add
+  "Compares two property maps to find which properties should be added"
+  [prev-props upd-props]
+  (let [prev-names (set (map :name prev-props))]
+    (filterv #(not (contains? prev-names (:name %))) upd-props)))
+
+
+(defn find-index-for-property-name
+  "Finds the index of a name in a property map"
+  [props name]
+  (some (fn [[idx prop]]
+          (when (= (:name prop) name)
+            idx))
+        (map-indexed vector props)))
+
+(defn remove-prefix
+  "Removes the given prefix (with or without a trailing ' / ') from the beginning of the name"
+  [name prefix]
+  (let [long-name (str prefix " / ")]
+    (cond
+      (str/starts-with? name long-name)
+      (subs name (count long-name))
+
+      (str/starts-with? name prefix)
+      (subs name (count prefix))
+
+      :else
+      name)))
+
+(def ^:private xf:map-name
+  (map :name))
+
+(defn- matching-indices
+  [props1 props2]
+  (let [names-in-p2 (into #{} xf:map-name props2)
+        xform (comp
+               (map-indexed (fn [index {:keys [name]}]
+                              (when (contains? names-in-p2 name)
+                                index)))
+               (filter some?))]
+    (into #{} xform props1)))
+
+(defn- find-index-by-name
+  "Returns the index of the first item in props with the given name, or nil if not found."
+  [name props]
+  (some (fn [[idx item]]
+          (when (= (:name item) name)
+            idx))
+        (map-indexed vector props)))
+
+(defn- next-valid-position
+  "Returns the first non-negative integer not present in the used-pos set."
+  [used-pos]
+  (loop [p 0]
+    (if (contains? used-pos p)
+      (recur (inc p))
+      p)))
+
+(defn- find-position
+  "Returns the index of the property with the given name in `props`,
+  or the next available index not in `used-pos` if not found."
+  [name props used-pos]
+  (or (find-index-by-name name props)
+      (next-valid-position used-pos)))
+
+(defn merge-properties
+  "Merges props2 into props1 with the following rules:
+    - For each property p2 in props2:
+      - Skip it if its value is empty.
+      - If props1 contains a property with the same name, update its value with that of p2.
+      - Otherwise, assign p2's value to the first unused property in props1. A property is considered used if:
+        - Its name exists in both props1 and props2, or
+        - Its value has already been updated during the merge.
+      - If no unused properties are available in props1, append a new property with a default name and p2's value."
+  [props1 props2]
+  (let [props2 (remove #(str/empty? (:value %)) props2)]
+    (-> (reduce
+         (fn [{:keys [props used-pos]} prop]
+           (let [pos (find-position (:name prop) props used-pos)
+                 used-pos (conj used-pos pos)]
+             (if (< pos (count props))
+               {:props (assoc-in (vec props) [pos :value] (:value prop)) :used-pos used-pos}
+               {:props (add-new-prop props (:value prop)) :used-pos used-pos})))
+         {:props (vec props1) :used-pos (matching-indices props1 props2)}
+         props2)
+        :props)))
+
+(defn compare-properties
+  "Compares vectors of properties keeping the value if it is the same for all
+   or setting a custom value where their values do not coincide"
+  ([props-list]
+   (compare-properties props-list nil))
+
+  ([props-list distinct-mark]
+   (let [grouped (group-by :name (apply concat props-list))
+         check-values (fn [values]
+                        (let [vals (map :value values)]
+                          (if (apply = vals)
+                            (first vals)
+                            distinct-mark)))]
+     (mapv (fn [[name values]]
+             {:name name :value (check-values values)})
+           grouped))))
+
+(defn same-variant?
+  "Determines if all elements belong to the same variant"
+  [components]
+  (let [variant-ids (distinct (map :variant-id components))
+        not-blank?  (complement str/blank?)]
+    (and
+     (= 1 (count variant-ids))
+     (not-blank? (first variant-ids)))))
+
+(defn distance
+  "Computes a weighted distance between two property lists `props1` and `props2`.
+   Latter properties weight less that previous ones"
+  [props1 props2]
+  (let [total-num-props (count props1)
+        xform           (map-indexed
+                         (fn [idx [p1 p2]]
+                           (if (not= p1 p2)
+                             (math/pow 2 (- total-num-props idx))
+                             0)))]
+    (transduce
+     xform
+     +
+     (map vector props1 props2))))
+
+(defn variant-name-to-name
+  "Transforms a variant-name (its properties values) into a standard name:
+   the real name of the shape joined by the properties values separated by '/'"
+  [variant]
+  (cfh/merge-path-item (:name variant) (str/replace (:variant-name variant) #", " " / ")))

common/test/common_tests/files/tokens_test.cljc

@@ -4,36 +4,36 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns frontend-tests.tokens.token-test
+(ns common-tests.files.tokens-test
   (:require
-   [app.main.ui.workspace.tokens.token :as wtt]
-   [cljs.test :as t :include-macros true]))
+   [app.common.files.tokens :as cft]
+   [clojure.test :as t]))
 
 (t/deftest test-parse-token-value
   (t/testing "parses double from a token value"
-    (t/is (= {:value 100.1 :unit nil} (wtt/parse-token-value "100.1")))
-    (t/is (= {:value -9 :unit nil} (wtt/parse-token-value "-9"))))
+    (t/is (= {:value 100.1 :unit nil} (cft/parse-token-value "100.1")))
+    (t/is (= {:value -9.0 :unit nil} (cft/parse-token-value "-9"))))
   (t/testing "trims white-space"
-    (t/is (= {:value -1.3 :unit nil} (wtt/parse-token-value "     -1.3   "))))
+    (t/is (= {:value -1.3 :unit nil} (cft/parse-token-value "     -1.3   "))))
   (t/testing "parses unit: px"
-    (t/is (= {:value 70.3 :unit "px"} (wtt/parse-token-value "     70.3px   "))))
+    (t/is (= {:value 70.3 :unit "px"} (cft/parse-token-value "     70.3px   "))))
   (t/testing "parses unit: %"
-    (t/is (= {:value -10 :unit "%"} (wtt/parse-token-value "-10%"))))
+    (t/is (= {:value -10.0 :unit "%"} (cft/parse-token-value "-10%"))))
   (t/testing "parses unit: px")
   (t/testing "returns nil for any invalid characters"
-    (t/is (nil? (wtt/parse-token-value "     -1.3a   "))))
+    (t/is (nil? (cft/parse-token-value "     -1.3a   "))))
   (t/testing "doesnt accept invalid double"
-    (t/is (nil? (wtt/parse-token-value ".3")))))
+    (t/is (nil? (cft/parse-token-value ".3")))))
 
 (t/deftest token-applied-test
   (t/testing "matches passed token with `:token-attributes`"
-    (t/is (true? (wtt/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:x}))))
+    (t/is (true? (cft/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:x}))))
   (t/testing "doesn't match empty token"
-    (t/is (nil? (wtt/token-applied? {} {:applied-tokens {:x "a"}} #{:x}))))
+    (t/is (nil? (cft/token-applied? {} {:applied-tokens {:x "a"}} #{:x}))))
   (t/testing "does't match passed token `:id`"
-    (t/is (nil? (wtt/token-applied? {:name "b"} {:applied-tokens {:x "a"}} #{:x}))))
+    (t/is (nil? (cft/token-applied? {:name "b"} {:applied-tokens {:x "a"}} #{:x}))))
   (t/testing "doesn't match passed `:token-attributes`"
-    (t/is (nil? (wtt/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:y})))))
+    (t/is (nil? (cft/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:y})))))
 
 (t/deftest shapes-ids-by-applied-attributes
   (t/testing "Returns set of matched attributes that fit the applied token"
@@ -54,7 +54,7 @@
                   shape-applied-x-y
                   shape-applied-all
                   shape-applied-none]
-          expected (wtt/shapes-ids-by-applied-attributes {:name "1"} shapes attributes)]
+          expected (cft/shapes-ids-by-applied-attributes {:name "1"} shapes attributes)]
       (t/is (= (:x expected) (shape-ids shape-applied-x
                                         shape-applied-x-y
                                         shape-applied-all)))
@@ -62,34 +62,34 @@
                                         shape-applied-x-y
                                         shape-applied-all)))
       (t/is (= (:z expected) (shape-ids shape-applied-all)))
-      (t/is (true? (wtt/shapes-applied-all? expected (shape-ids shape-applied-all) attributes)))
-      (t/is (false? (wtt/shapes-applied-all? expected (apply shape-ids shapes) attributes)))
+      (t/is (true? (cft/shapes-applied-all? expected (shape-ids shape-applied-all) attributes)))
+      (t/is (false? (cft/shapes-applied-all? expected (apply shape-ids shapes) attributes)))
       (shape-ids shape-applied-x
                  shape-applied-x-y
                  shape-applied-all))))
 
 (t/deftest tokens-applied-test
   (t/testing "is true when single shape matches the token and attributes"
-    (t/is (true? (wtt/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
+    (t/is (true? (cft/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
                                                          {:applied-tokens {:x "b"}}]
                                             #{:x}))))
   (t/testing "is false when no shape matches the token or attributes"
-    (t/is (nil? (wtt/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "b"}}
+    (t/is (nil? (cft/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "b"}}
                                                         {:applied-tokens {:x "b"}}]
                                            #{:x})))
-    (t/is (nil? (wtt/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
+    (t/is (nil? (cft/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
                                                         {:applied-tokens {:x "a"}}]
                                            #{:y})))))
 
 (t/deftest name->path-test
-  (t/is (= ["foo" "bar" "baz"] (wtt/token-name->path "foo.bar.baz")))
-  (t/is (= ["foo" "bar" "baz"] (wtt/token-name->path "foo..bar.baz")))
-  (t/is (= ["foo" "bar" "baz"] (wtt/token-name->path "foo..bar.baz...."))))
+  (t/is (= ["foo" "bar" "baz"] (cft/token-name->path "foo.bar.baz")))
+  (t/is (= ["foo" "bar" "baz"] (cft/token-name->path "foo..bar.baz")))
+  (t/is (= ["foo" "bar" "baz"] (cft/token-name->path "foo..bar.baz...."))))
 
 (t/deftest token-name-path-exists?-test
-  (t/is (true? (wtt/token-name-path-exists? "border-radius" {"border-radius" {"sm" {:name "sm"}}})))
-  (t/is (true? (wtt/token-name-path-exists? "border-radius" {"border-radius" {:name "sm"}})))
-  (t/is (true? (wtt/token-name-path-exists? "border-radius.sm" {"border-radius" {:name "sm"}})))
-  (t/is (true? (wtt/token-name-path-exists? "border-radius.sm.x" {"border-radius" {:name "sm"}})))
-  (t/is (false? (wtt/token-name-path-exists? "other" {"border-radius" {:name "sm"}})))
-  (t/is (false? (wtt/token-name-path-exists? "dark.border-radius.md" {"dark" {"border-radius" {"sm" {:name "sm"}}}}))))
+  (t/is (true? (cft/token-name-path-exists? "border-radius" {"border-radius" {"sm" {:name "sm"}}})))
+  (t/is (true? (cft/token-name-path-exists? "border-radius" {"border-radius" {:name "sm"}})))
+  (t/is (true? (cft/token-name-path-exists? "border-radius.sm" {"border-radius" {:name "sm"}})))
+  (t/is (true? (cft/token-name-path-exists? "border-radius.sm.x" {"border-radius" {:name "sm"}})))
+  (t/is (false? (cft/token-name-path-exists? "other" {"border-radius" {:name "sm"}})))
+  (t/is (false? (cft/token-name-path-exists? "dark.border-radius.md" {"dark" {"border-radius" {"sm" {:name "sm"}}}}))))

common/test/common_tests/logic/comp_creation_test.cljc

@@ -40,8 +40,6 @@
                                     (:objects page)
                                     (:id page)
                                     (:id file)
-                                    true
-                                    nil
                                     nil)
 
         file' (thf/apply-changes file changes)
@@ -74,8 +72,6 @@
                                     (:objects page)
                                     (:id page)
                                     (:id file)
-                                    true
-                                    nil
                                     cfsh/prepare-create-artboard-from-selection)
 
         file' (thf/apply-changes file changes)
@@ -111,8 +107,6 @@
                                     (:objects page)
                                     (:id page)
                                     (:id file)
-                                    true
-                                    nil
                                     cfsh/prepare-create-artboard-from-selection)
 
         file' (thf/apply-changes file changes)
@@ -151,8 +145,6 @@
                                     (:objects page)
                                     (:id page)
                                     (:id file)
-                                    true
-                                    nil
                                     cfsh/prepare-create-artboard-from-selection)
 
         file' (thf/apply-changes file changes)
@@ -191,8 +183,6 @@
                                     (:objects page)
                                     (:id page)
                                     (:id file)
-                                    true
-                                    nil
                                     nil)
 
         file' (thf/apply-changes file changes)
@@ -232,8 +222,6 @@
                                     (:objects page)
                                     (:id page)
                                     (:id file)
-                                    true
-                                    nil
                                     cfsh/prepare-create-artboard-from-selection)
 
         file' (thf/apply-changes file changes)
@@ -265,8 +253,7 @@
         changes   (cll/generate-rename-component (pcb/empty-changes)
                                                  (:id component)
                                                  "Test component after"
-                                                 (:data file)
-                                                 true)
+                                                 (:data file))
 
         file' (thf/apply-changes file changes)
 
@@ -445,8 +432,8 @@
     (t/is (some? copy1-child'))
     (t/is (ctk/instance-root? copy1-root'))
     (t/is (ctk/instance-of? copy1-root' (:id file') (:id component')))
-    (t/is (ctk/is-main-of? main1-root' copy1-root' true))
-    (t/is (ctk/is-main-of? main1-child' copy1-child' true))
+    (t/is (ctk/is-main-of? main1-root' copy1-root'))
+    (t/is (ctk/is-main-of? main1-child' copy1-child'))
     (t/is (ctst/parent-of? copy1-root' copy1-child'))))
 
 (t/deftest test-instantiate-component-from-lib
@@ -489,8 +476,8 @@
     (t/is (some? copy1-child'))
     (t/is (ctk/instance-root? copy1-root'))
     (t/is (ctk/instance-of? copy1-root' (:id library) (:id component')))
-    (t/is (ctk/is-main-of? main1-root' copy1-root' true))
-    (t/is (ctk/is-main-of? main1-child' copy1-child' true))
+    (t/is (ctk/is-main-of? main1-root' copy1-root'))
+    (t/is (ctk/is-main-of? main1-child' copy1-child'))
     (t/is (ctst/parent-of? copy1-root' copy1-child'))))
 
 (t/deftest test-instantiate-nested-component
@@ -533,8 +520,8 @@
     (t/is (some? copy1-child'))
     (t/is (ctk/instance-root? copy1-root'))
     (t/is (ctk/instance-of? copy1-root' (:id file') (:id component')))
-    (t/is (ctk/is-main-of? main1-root' copy1-root' true))
-    (t/is (ctk/is-main-of? main1-child' copy1-child' true))
+    (t/is (ctk/is-main-of? main1-root' copy1-root'))
+    (t/is (ctk/is-main-of? main1-child' copy1-child'))
     (t/is (ctst/parent-of? copy1-root' copy1-child'))))
 
 (t/deftest test-instantiate-nested-component-from-lib
@@ -580,8 +567,8 @@
     (t/is (some? copy1-child'))
     (t/is (ctk/instance-root? copy1-root'))
     (t/is (ctk/instance-of? copy1-root' (:id library) (:id component')))
-    (t/is (ctk/is-main-of? main1-root' copy1-root' true))
-    (t/is (ctk/is-main-of? main1-child' copy1-child' true))
+    (t/is (ctk/is-main-of? main1-root' copy1-root'))
+    (t/is (ctk/is-main-of? main1-child' copy1-child'))
     (t/is (ctst/parent-of? copy1-root' copy1-child'))))
 
 (t/deftest test-detach-copy

common/test/common_tests/logic/comp_reset_test.cljc

@@ -47,8 +47,7 @@
                                                 file-mdf
                                                 {(:id file-mdf) file-mdf}
                                                 page-mdf
-                                                (:id copy-root)
-                                                true)
+                                                (:id copy-root))
 
         file'     (thf/apply-changes file changes)
 
@@ -99,8 +98,7 @@
                                                 {(:id file-mdf) file-mdf
                                                  (:id library) library}
                                                 page-mdf
-                                                (:id copy-root)
-                                                true)
+                                                (:id copy-root))
 
         file'     (thf/apply-changes file changes)
 
@@ -151,8 +149,7 @@
                                                 file-mdf
                                                 {(:id file-mdf) file-mdf}
                                                 page-mdf
-                                                (:id copy-root)
-                                                true)
+                                                (:id copy-root))
 
         file'   (thf/apply-changes file changes)
 
@@ -198,8 +195,7 @@
                                                 file-mdf
                                                 {(:id file-mdf) file-mdf}
                                                 page-mdf
-                                                (:id copy-root)
-                                                true)
+                                                (:id copy-root))
 
         file'   (thf/apply-changes file changes)
 
@@ -246,8 +242,7 @@
                                                 file-mdf
                                                 {(:id file-mdf) file-mdf}
                                                 page-mdf
-                                                (:id copy-root)
-                                                true)
+                                                (:id copy-root))
 
         file'   (thf/apply-changes file changes)
 
@@ -291,8 +286,7 @@
                                                 file-mdf
                                                 {(:id file-mdf) file-mdf}
                                                 page-mdf
-                                                (:id copy2-root)
-                                                true)
+                                                (:id copy2-root))
 
         file'     (thf/apply-changes file changes)
 
@@ -338,8 +332,7 @@
                                                 file-mdf
                                                 {(:id file-mdf) file-mdf}
                                                 page-mdf
-                                                (:id copy2-root)
-                                                true)
+                                                (:id copy2-root))
 
         file'     (thf/apply-changes file changes)
 

common/test/common_tests/logic/comp_sync_test.cljc

@@ -227,7 +227,7 @@
     (t/is (= (:touched copy-root') nil))
     (t/is (= (:touched copy-new-child') nil))
     (t/is (ctst/parent-of? copy-root' copy-new-child'))
-    (t/is (ctk/is-main-of? main-free-shape' copy-new-child' true))))
+    (t/is (ctk/is-main-of? main-free-shape' copy-new-child'))))
 
 (t/deftest test-sync-when-deleting-shape
   (let [;; ==== Setup

common/test/common_tests/logic/token_test.cljc

@@ -1,3 +1,9 @@
+;; 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 common-tests.logic.token-test
   (:require
    [app.common.files.changes-builder :as pcb]

common/test/common_tests/logic/variants_test.cljc

@@ -7,7 +7,10 @@
 (ns common-tests.logic.variants-test
   (:require
    [app.common.files.changes-builder :as pcb]
-   [app.common.logic.variants :as clv]
+   [app.common.geom.point :as gpt]
+   [app.common.logic.libraries :as cll]
+   [app.common.logic.shapes :as cls]
+   [app.common.logic.variant-properties :as clvp]
    [app.common.test-helpers.components :as thc]
    [app.common.test-helpers.files :as thf]
    [app.common.test-helpers.ids-map :as thi]
@@ -20,7 +23,7 @@
 (t/deftest test-update-property-name
   (let [;; ==== Setup
         file    (-> (thf/sample-file :file1)
-                    (thv/add-variant :v01 :c01 :m01 :c02 :m02))
+                    (thv/add-variant-two-properties :v01 :c01 :m01 :c02 :m02))
         v-id    (-> (ths/get-shape file :v01) :id)
         page    (thf/current-page file)
 
@@ -29,8 +32,8 @@
                     (pcb/with-page-id (:id page))
                     (pcb/with-library-data (:data file))
                     (pcb/with-objects (:objects page))
-                    (clv/generate-update-property-name v-id 0 "NewName1")
-                    (clv/generate-update-property-name v-id 1 "NewName2"))
+                    (clvp/generate-update-property-name v-id 0 "NewName1")
+                    (clvp/generate-update-property-name v-id 1 "NewName2"))
 
 
         file'   (thf/apply-changes file changes)
@@ -65,7 +68,7 @@
                     (pcb/with-page-id (:id page))
                     (pcb/with-library-data (:data file))
                     (pcb/with-objects (:objects page))
-                    (clv/generate-add-new-property v-id))
+                    (clvp/generate-add-new-property v-id))
 
 
         file'   (thf/apply-changes file changes)
@@ -101,7 +104,7 @@
                     (pcb/with-page-id (:id page))
                     (pcb/with-library-data (:data file))
                     (pcb/with-objects (:objects page))
-                    (clv/generate-add-new-property v-id {:fill-values? true}))
+                    (clvp/generate-add-new-property v-id {:fill-values? true}))
 
 
         file'   (thf/apply-changes file changes)
@@ -117,7 +120,7 @@
     (t/is (= (count (:variant-properties comp01')) 2))
     (t/is (= (count (:variant-properties comp02)) 1))
     (t/is (= (count (:variant-properties comp02')) 2))
-    (t/is (= (-> comp01' :variant-properties last :value) "Value1"))))
+    (t/is (= (-> comp01' :variant-properties last :value) "Value 1"))))
 
 
 
@@ -132,7 +135,7 @@
                     (pcb/with-page-id (:id page))
                     (pcb/with-library-data (:data file))
                     (pcb/with-objects (:objects page))
-                    (clv/generate-add-new-property v-id))
+                    (clvp/generate-add-new-property v-id))
 
 
         file    (thf/apply-changes file changes)
@@ -147,7 +150,7 @@
                     (pcb/with-page-id (:id page))
                     (pcb/with-library-data (:data file))
                     (pcb/with-objects (:objects page))
-                    (clv/generate-remove-property v-id 0))
+                    (clvp/generate-remove-property v-id 0))
 
 
         file'   (thf/apply-changes file changes)
@@ -180,8 +183,8 @@
                     (pcb/with-page-id (:id page))
                     (pcb/with-library-data (:data file))
                     (pcb/with-objects (:objects page))
-                    (clv/generate-update-property-value (:id comp01) 0 "NewValue1")
-                    (clv/generate-update-property-value (:id comp02) 0 "NewValue2"))
+                    (clvp/generate-update-property-value (:id comp01) 0 "NewValue1")
+                    (clvp/generate-update-property-value (:id comp02) 0 "NewValue2"))
 
         file'   (thf/apply-changes file changes)
 
@@ -192,3 +195,73 @@
     ;; ==== Check
     (t/is (= (-> comp01' :variant-properties first :value) "NewValue1"))
     (t/is (= (-> comp02' :variant-properties first :value) "NewValue2"))))
+
+
+(t/deftest test-duplicate-variant-container
+  (let [;; ==== Setup
+        file    (-> (thf/sample-file :file1)
+                    (thv/add-variant :v01 :c01 :m01 :c02 :m02))
+        data    (:data file)
+        page    (thf/current-page file)
+        objects (:objects page)
+
+        variant-container (ths/get-shape file :v01)
+
+
+
+
+        ;; ==== Action
+        changes (-> (pcb/empty-changes nil)
+                    (pcb/with-page-id (:id page))
+                    (pcb/with-library-data (:data file))
+                    (pcb/with-objects (:objects page))
+                    (cll/generate-duplicate-changes objects                    ;; objects
+                                                    page                       ;; page
+                                                    #{(:id variant-container)} ;; ids
+                                                    (gpt/point 0 0)            ;; delta
+                                                    {(:id  file) file}         ;; libraries
+                                                    (:data file)               ;; library-data
+                                                    (:id file)))               ;; file-id
+
+        ;; ==== Get
+        file'   (thf/apply-changes file changes)
+        data'   (:data file')
+        page'   (thf/current-page file')
+        objects' (:objects page')]
+
+     ;; ==== Check
+    (thf/validate-file! file')
+    (t/is (= (count (:components data)) 2))
+    (t/is (= (count (:components data')) 4))
+    (t/is (= (count objects) 4))
+    (t/is (= (count objects') 7))))
+
+
+(t/deftest test-delete-variant
+  ;; When a variant container becomes empty, it id automatically deleted
+  (let [;; ==== Setup
+        file      (-> (thf/sample-file :file1)
+                      (thv/add-variant-two-properties :v01 :c01 :m01 :c02 :m02))
+        container (ths/get-shape file :v01)
+        m01-id    (-> (ths/get-shape file :m01) :id)
+        m02-id    (-> (ths/get-shape file :m02) :id)
+
+        page    (thf/current-page file)
+
+        ;; ==== Action
+        changes (-> (pcb/empty-changes nil)
+                    (pcb/with-page-id (:id page))
+                    (pcb/with-library-data (:data file))
+                    (pcb/with-objects (:objects page))
+                    (#(second (cls/generate-delete-shapes % #{m01-id m02-id} {}))))
+
+        file'   (thf/apply-changes file changes)
+
+        ;; ==== Get
+        container' (ths/get-shape file' :v01)]
+
+    ;; ==== Check
+    ;; The variant containew was not nil before the deletion
+    (t/is (not (nil? container)))
+    ;; The variant containew is nil after the deletion
+    (t/is (nil? container'))))

common/test/common_tests/runner.cljc

@@ -41,6 +41,7 @@
    [common-tests.types.modifiers-test]
    [common-tests.types.shape-decode-encode-test]
    [common-tests.types.shape-interactions-test]
+   [common-tests.types.shape-path-data-test]
    [common-tests.types.tokens-lib-test]
    [common-tests.uuid-test]))
 
@@ -90,4 +91,5 @@
    'common-tests.types.tokens-lib-test
    'common-tests.types.components-test
    'common-tests.types.absorb-assets-test
+   'common-tests.types.shape-path-data-test
    'common-tests.uuid-test))

common/test/common_tests/svg_path_test.cljc

@@ -547,4 +547,3 @@
 
 ;; FOR POSSIBLE FUTURE TEST CASES
 ;; (str "M259.958 89.134c-6.88-.354-10.484-1.241-12.44-3.064-1.871-1.743-6.937-3.098-15.793-4.226-7.171-.913-17.179-2.279-22.24-3.034-5.06-.755-15.252-2.016-22.648-2.8-18.685-1.985-35.63-4.223-38.572-5.096-3.655-1.084-3.016-3.548.708-2.726 1.751.387 13.376 1.701 25.833 2.922 12.456 1.22 29.018 3.114 36.803 4.208 29.94 4.206 29.433 4.204 34.267.136 3.787-3.186 5.669-3.669 14.303-3.669 14.338 0 17.18 1.681 12.182 7.205-2.053 2.268-1.994 2.719.707 5.42 3.828 3.827 3.74 5.846-.238 5.5-1.752-.153-7.544-.502-12.872-.776zm7.563-3.194c0-.778-1.751-1.352-3.892-1.274l-3.893.141 3.539 1.133c1.946.624 3.698 1.197 3.893 1.275.194.077.354-.496.354-1.275zm-15.899-8.493c1.43-2.29 1.414-2.83-.084-2.83-2.05 0-5.25 2.76-5.25 4.529 0 2.226 3.599 1.08 5.334-1.699zm8.114 0c2.486-2.746 2.473-2.83-.438-2.83-1.65 0-3.683 1.273-4.516 2.83-1.175 2.196-1.077 2.831.438 2.831 1.075 0 3.107-1.274 4.516-2.83zm7.814.674c2.858-3.444.476-4.085-3.033-.816-2.451 2.284-2.677 2.973-.975 2.973 1.22 0 3.023-.97 4.008-2.157zm-49.571-4.509c-1.168-.43-3.294-1.802-4.725-3.051-2.112-1.843-9.304-2.595-38.219-3.994-46.474-2.25-63-4.077-60.27-6.665.324-.308 9.507.261 20.406 1.264 10.9 1.003 31.16 2.258 45.024 2.789l25.207.964 4.625-3.527c4.313-3.29 5.41-3.474 16.24-2.732 6.389.438 11.981 1.388 12.428 2.111.447.723-.517 2.73-2.141 4.46l-2.954 3.144c1.607 1.697 3.308 3.289 5.049 4.845 3.248 2.189-5.438 1.289-8.678 1.284-5.428-.061-10.825-.463-11.992-.892zm12.74-3.242c-1.123-.694-2.36-.943-2.75-.554-.389.39.21 1.275 1.334 1.97 1.122.693 2.36.942 2.749.553.389-.39-.21-1.275-1.334-1.97zm-5.663 0a1.42 1.42 0 00-1.415-1.416 1.42 1.42 0 00-1.416 1.416 1.42 1.42 0 001.416 1.415 1.42 1.42 0 001.415-1.415zm-8.464-6.404c.984-1.187 1.35-2.598.813-3.135-1.181-1.18-5.408 1.297-6.184 3.624-.806 2.42 3.265 2.048 5.37-.49zm6.863.258c.867-1.045 1.163-2.313.658-2.819-1.063-1.062-4.719 1.631-4.719 3.476 0 1.864 2.274 1.496 4.061-.657zm8.792-.36c1.637-1.972 1.448-2.197-1.486-1.77-1.848.27-3.622 1.287-3.943 2.26-.838 2.547 3.212 2.181 5.429-.49zm32.443-4.11c-6.156-2.228-67.1-6.138-119.124-7.642-39.208-1.134-72.072-.928-94.618.593-6.617.446-19.681 1.16-29.03 1.587-15.798.72-17.183.573-19.588-2.085-4.498-4.97-2.544-7.857 6.39-9.44 4.394-.778 9.164-2.436 10.6-3.685 5.44-4.729 20.332-14.06 31.14-19.509C65.717 11.88 78.955 7.79 103.837 3.08 121.686-.3 125.552-.642 129.318.82c2.44.948 12.4 1.948 22.132 2.221 15.37.432 20.004 1.18 35.294 5.698 22.36 6.606 39.732 15.1 56.55 27.653 7.307 5.452 14.086 9.913 15.066 9.913.98 0 2.148.956 2.596 2.124.55 1.432 2.798 2.123 6.914 2.123 6.213 0 12.4 3.046 12.38 6.096-.012 1.75-6.502 5.353-9.118 5.063-.818-.09-3.717-.972-6.442-1.958zm-16.986-7.436c0-1.575-33.326-18.118-43.173-21.43-23.008-7.739-54.084-12.922-77.136-12.866-16.863.041-37.877 3.628-52.465 8.956-18.062 6.596-26.563 10.384-29.181 13.002-1.205 1.205-5.306 3.769-9.112 5.698-7.754 3.929-8.841 5.482-3.029 4.325 13.494-2.685 66.794-3.773 110.913-2.264 38.005 1.3 96.812 4.435 102.122 5.443.584.111 1.061-.277 1.061-.864zm-236.39-3.18c0-.78-1.592-1.416-3.539-1.416-1.946 0-3.538.637-3.538 1.415 0 .779 1.592 1.416 3.538 1.416 1.947 0 3.54-.637 3.54-1.416zm7.078-1.416c0-.779-.956-1.416-2.124-1.416-1.167 0-2.123.637-2.123 1.416 0 .778.956 1.415 2.123 1.415 1.168 0 2.124-.637 2.124-1.415zm11.734-4.437c3.278-1.661 6.278-3.483 6.667-4.048 1.366-1.98 20.645-11.231 32.557-15.622 11.862-4.372 36.546-9.865 44.327-9.865 3.485 0 3.867-.404 3.012-3.185-.538-1.752-1.177-3.41-1.42-3.685-.907-1.026-36.72 7.16-45.065 10.302-17.226 6.484-47.566 24.27-47.566 27.886 0 1.786.845 1.585 7.488-1.783zm206.254-5.577c-12.298-10.518-53.842-27.166-70.896-28.41-5.526-.404-6.3-.097-6.695 2.655-.33 2.307.402 3.275 2.831 3.742 32.436 6.237 52.205 12.315 66.975 20.594 11.904 6.673 14.477 7.141 7.785 1.419zM150.1 11.04c-1.949-3.64-7.568-4.078-6.886-.538.256 1.329 2.054 2.817 3.997 3.309 4.498 1.137 4.816.832 2.888-2.771zm6.756.94c-.248-1.752-1.026-3.185-1.727-3.185-.7 0-1.493 1.433-1.76 3.185-.328 2.152.232 3.185 1.727 3.185 1.485 0 2.064-1.047 1.76-3.185zm-30.178-2.458c0-2.303-.908-3.694-2.627-4.025-3.6-.694-5.23 1.301-4.22 5.166 1.216 4.647 6.847 3.709 6.847-1.14zm12.544 2.104c-.448-1.168-1.224-2.132-1.725-2.142-.5-.013-2.343-.404-4.095-.873-2.569-.689-3.185-.274-3.185 2.142 0 2.476.854 2.996 4.91 2.996 3.783 0 4.723-.487 4.095-2.123z")
-

common/test/common_tests/types/absorb_assets_test.cljc

@@ -54,7 +54,7 @@
     (t/is (= (count components') 1))
 
     (t/is (ctk/instance-of? copy-root' (:id file') (:id component')))
-    (t/is (ctk/is-main-of? main-root' copy-root' true))
+    (t/is (ctk/is-main-of? main-root' copy-root'))
     (t/is (ctk/main-instance-of? (:id main-root') (:id (second pages')) component'))))
 
 (t/deftest absorb-colors

common/test/common_tests/types/data/legacy-single-set.json

@@ -1,6 +0,0 @@
-{"color":
- {"red":
-  {"100":
-   {"value":"red",
-    "type":"color",
-    "description":""}}}}

common/test/common_tests/types/data/single-set.json

@@ -1,6 +0,0 @@
-{"color":
- {"red":
-  {"100":
-   {"$value":"red",
-    "$type":"color",
-    "$description":""}}}}

common/test/common_tests/types/shape_path_data_test.cljc

@@ -0,0 +1,59 @@
+;; 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 common-tests.types.shape-path-data-test
+  (:require
+   [app.common.data :as d]
+   [app.common.math :as mth]
+   [app.common.pprint :as pp]
+   [app.common.types.shape.path :as path]
+   [clojure.test :as t]))
+
+(def sample-content
+  [{:command :move-to, :params {:x 480.0, :y 839.0}}
+   {:command :line-to, :params {:x 439.0, :y 802.0}}
+   {:command :curve-to, :params {:c1x 368.0, :c1y 737.0, :c2x 310.0, :c2y 681.0, :x 264.0, :y 634.0}}
+   {:command :close-path :params {}}])
+
+(def sample-bytes
+  [0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 67 -16 0 0 68 81 -64 0
+   0 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 67 -37 -128 0 68 72 -128 0
+   0 3 0 0 67 -72 0 0 68 56 64 0 67 -101 0 0 68 42 64 0 67 -124 0 0 68 30 -128 0
+   0 4 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0])
+
+;; This means it implements IReduceInit/IReduce protocols
+(t/deftest path-data-to-vector
+  (let [pdata  (path/path-data sample-content)
+        result (vec pdata)]
+    (t/is (= 4 (count result)))
+    (t/is (= (get-in sample-content [0 :command])
+             (get-in result [0 :command])))
+    (t/is (= (get-in sample-content [1 :command])
+             (get-in result [1 :command])))
+    (t/is (= (get-in sample-content [2 :command])
+             (get-in result [2 :command])))
+    (t/is (= (get-in sample-content [3 :command])
+             (get-in result [3 :command])))
+
+    (t/is (= (get-in sample-content [0 :params])
+             (get-in result [0 :params])))
+    (t/is (= (get-in sample-content [1 :params])
+             (get-in result [1 :params])))
+    (t/is (= (get-in sample-content [2 :params])
+             (get-in result [2 :params])))
+    (t/is (= (get-in sample-content [3 :params])
+             (get-in result [3 :params])))))
+
+(t/deftest path-data-plain-to-binary
+  (let [pdata (path/path-data sample-content)]
+    (t/is (= sample-bytes
+             (vec
+              #?(:cljs (js/Int8Array. (.-buffer pdata))
+                 :clj  (.array (.-buffer pdata))))))
+    (t/is (= (->> sample-content
+                  (mapv path/map->PathSegment))
+             (vec pdata)))))
+

common/test/common_tests/types/tokens_lib_test.cljc

@@ -120,7 +120,6 @@
       (t/is (= ["Foo/Foo" "Foo/Baz" "Foo/Bar"] (move ["Foo"] ["Foo" "Foo"] ["Foo" "Baz"] false)))
       (t/is (= ["Foo/Baz" "Foo/Bar" "Foo/Foo"] (move ["Foo"] ["Foo" "Foo"] nil false))))))
 
-
 (t/deftest move-token-set-nested-2
   (let [tokens-lib (-> (ctob/make-tokens-lib)
                        (ctob/add-set (ctob/make-token-set :name "a/b"))
@@ -220,7 +219,6 @@
     (t/is (thrown-with-msg? #?(:cljs js/Error :clj Exception) #"expected valid params for token-theme"
                             (ctob/make-token-theme params)))))
 
-
 (t/deftest make-tokens-lib
   (let [tokens-lib (ctob/make-tokens-lib)]
     (t/is (= (ctob/set-count tokens-lib) 0))))
@@ -315,6 +313,58 @@
     (t/is (= (:sets token-theme') #{}))
     (t/is (nil? token-set'))))
 
+(t/deftest duplicate-token-set
+  (let [tokens-lib  (-> (ctob/make-tokens-lib)
+                        (ctob/add-set (ctob/make-token-set :name "test-token-set"
+                                                           :tokens {"test-token"
+                                                                    (ctob/make-token :name "test-token"
+                                                                                     :type :boolean
+                                                                                     :value true)})))
+        token-set-copy (ctob/duplicate-set "test-token-set" tokens-lib {:suffix "copy"})
+        token (get-in token-set-copy [:tokens "test-token"])]
+
+    (t/is (some? token-set-copy))
+    (t/is (= (:name token-set-copy) "test-token-set-copy"))
+    (t/is (= (count (:tokens token-set-copy)) 1))
+    (t/is (= (:name token) "test-token"))))
+
+(t/deftest duplicate-token-set-twice
+  (let [tokens-lib  (-> (ctob/make-tokens-lib)
+                        (ctob/add-set (ctob/make-token-set :name "test-token-set"
+                                                           :tokens {"test-token"
+                                                                    (ctob/make-token :name "test-token"
+                                                                                     :type :boolean
+                                                                                     :value true)})))
+
+        tokens-lib (ctob/add-set tokens-lib (ctob/duplicate-set "test-token-set" tokens-lib {:suffix "copy"}))
+
+        token-set-copy (ctob/duplicate-set "test-token-set" tokens-lib {:suffix "copy"})
+        token (get-in token-set-copy [:tokens "test-token"])]
+
+    (t/is (some? token-set-copy))
+    (t/is (= (:name token-set-copy) "test-token-set-copy-2"))
+    (t/is (= (count (:tokens token-set-copy)) 1))
+    (t/is (= (:name token) "test-token"))))
+
+(t/deftest duplicate-empty-token-set
+  (let [tokens-lib      (-> (ctob/make-tokens-lib)
+                            (ctob/add-set (ctob/make-token-set :name "test-token-set")))
+
+        token-set-copy (ctob/duplicate-set "test-token-set" tokens-lib {:suffix "copy"})
+        tokens         (get token-set-copy :tokens)]
+
+    (t/is (some? token-set-copy))
+    (t/is (= (:name token-set-copy) "test-token-set-copy"))
+    (t/is (= (count (:tokens token-set-copy)) 0))
+    (t/is (= (count tokens) 0))))
+
+(t/deftest duplicate-not-existing-token-set
+  (let [tokens-lib      (ctob/make-tokens-lib)
+
+        token-set-copy (ctob/duplicate-set "test-token-set" tokens-lib {:suffix "copy"})]
+
+    (t/is (nil? token-set-copy))))
+
 (t/deftest active-themes-set-names
   (let [tokens-lib  (-> (ctob/make-tokens-lib)
                         (ctob/add-set (ctob/make-token-set :name "test-token-set")))
@@ -918,7 +968,6 @@
     (t/is (dt/is-after? (:modified-at token-set') (:modified-at token-set)))
     (t/is (dt/is-after? (:modified-at token') (:modified-at token)))))
 
-
 (t/deftest update-token-in-sets-rename
   (let [tokens-lib  (-> (ctob/make-tokens-lib)
                         (ctob/add-set (ctob/make-token-set :name "test-token-set"))
@@ -1371,30 +1420,6 @@
        (t/testing "invalid tokens got discarded"
          (t/is (nil? (get-set-token "typography" "H1.Bold")))))))
 
-#?(:clj
-   (t/deftest single-set-legacy-json-decoding
-     (let [json (-> (slurp "test/common_tests/types/data/legacy-single-set.json")
-                    (tr/decode-str))
-           lib (ctob/decode-single-set-legacy-json (ctob/ensure-tokens-lib nil) "single_set" json)
-           get-set-token (fn [set-name token-name]
-                           (some-> (ctob/get-set lib set-name)
-                                   (ctob/get-token token-name)))]
-       (t/is (= '("single_set") (ctob/get-ordered-set-names lib)))
-       (t/testing "token added"
-         (t/is (some? (get-set-token "single_set" "color.red.100")))))))
-
-#?(:clj
-   (t/deftest single-set-dtcg-json-decoding
-     (let [json (-> (slurp "test/common_tests/types/data/single-set.json")
-                    (tr/decode-str))
-           lib (ctob/decode-single-set-json (ctob/ensure-tokens-lib nil) "single_set" json)
-           get-set-token (fn [set-name token-name]
-                           (some-> (ctob/get-set lib set-name)
-                                   (ctob/get-token token-name)))]
-       (t/is (= '("single_set") (ctob/get-ordered-set-names lib)))
-       (t/testing "token added"
-         (t/is (some? (get-set-token "single_set" "color.red.100")))))))
-
 #?(:clj
    (t/deftest dtcg-encoding-decoding-json
      (let [json (-> (slurp "test/common_tests/types/data/tokens-multi-set-example.json")

common/test/common_tests/types/variant_test.cljc

@@ -0,0 +1,112 @@
+;; 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 common-tests.types.variant-test
+  (:require
+   [app.common.types.variant :as ctv]
+   [clojure.test :as t]))
+
+
+(t/deftest variant-distance01
+  ;;c1: primary, default, rounded, blue, dark
+  ;;c2: primary, hover, squared, blue, dark
+  ;;c3: primary, default, squared, blue, light
+
+  ;; I have a copy of c1, and I change from rounded to squared
+  ;; c2: 1 difference in pos 2
+  ;; c3: 1 differences in pos 5
+  ;; The min distance should be c3
+
+  (let [target [{:name "type" :value "primary"}
+                {:name "status" :value "default"}
+                {:name "borders" :value "squared"}
+                {:name "color" :value "blue"}
+                {:name "theme" :value "dark"}]
+        props2 [{:name "type" :value "primary"}
+                {:name "status" :value "hover"}
+                {:name "borders" :value "rounded"}
+                {:name "color" :value "blue"}
+                {:name "theme" :value "dark"}]
+        props3 [{:name "type" :value "primary"}
+                {:name "status" :value "default"}
+                {:name "borders" :value "rounded"}
+                {:name "color" :value "blue"}
+                {:name "theme" :value "light"}]
+        dist2 (ctv/distance target props2)
+        dist3 (ctv/distance target props3)]
+    (t/is (< dist3 dist2))))
+
+
+(t/deftest variant-distance02
+  ;;c1: primary, default, rounded, blue, dark
+  ;;c2: primary, hover, squared, red, dark
+  ;;c3: secondary, hover, rounded, blue, dark
+
+  ;; I have a copy of c1, and I change from default to hover
+  ;; c2: 2 differences in pos 3 and 4
+  ;; c3: 1 differences in pos 1
+  ;; The min distance should be c2
+
+  (let [target [{:name "type" :value "primary"}
+                {:name "status" :value "hover"}
+                {:name "borders" :value "rounded"}
+                {:name "color" :value "blue"}
+                {:name "theme" :value "dark"}]
+        props2 [{:name "type" :value "primary"}
+                {:name "status" :value "hover"}
+                {:name "borders" :value "squared"}
+                {:name "color" :value "red"}
+                {:name "theme" :value "dark"}]
+        props3 [{:name "type" :value "secondary"}
+                {:name "status" :value "hover"}
+                {:name "borders" :value "rounded"}
+                {:name "color" :value "blue"}
+                {:name "theme" :value "dark"}]
+        dist2 (ctv/distance target props2)
+        dist3 (ctv/distance target props3)]
+    (t/is (< dist2 dist3))))
+
+(t/deftest variant-distance03
+  ;;c1: primary, default, rounded, blue, dark
+  ;;c2: secondary, default, rounded, blue, light
+  ;;c3: secondary, hover, squared, blue, dark
+  ;;c4: secondary, hover, rounded, blue, dark
+
+  ;; I have a copy of c1, and I change from primary to secondary
+  ;; c2: 1 difference in pos 4
+  ;; c3: 2 differences in pos 1 and 2
+  ;; c4: 1 difference in pos 1
+  ;; The distances should be c2 < c4 < c3
+
+  (let [target [{:name "type" :value "secondary"}
+                {:name "status" :value "default"}
+                {:name "borders" :value "rounded"}
+                {:name "color" :value "blue"}
+                {:name "theme" :value "dark"}]
+        props2 [{:name "type" :value "secondary"}
+                {:name "status" :value "default"}
+                {:name "borders" :value "rounded"}
+                {:name "color" :value "blue"}
+                {:name "theme" :value "light"}]
+        props3 [{:name "type" :value "secondary"}
+                {:name "status" :value "hover"}
+                {:name "borders" :value "squared"}
+                {:name "color" :value "blue"}
+                {:name "theme" :value "dark"}]
+        props4 [{:name "type" :value "secondary"}
+                {:name "status" :value "hover"}
+                {:name "borders" :value "rounded"}
+                {:name "color" :value "blue"}
+                {:name "theme" :value "dark"}]
+        dist2 (ctv/distance target props2)
+        dist3 (ctv/distance target props3)
+        dist4 (ctv/distance target props4)]
+    (t/is (< dist2 dist4))
+    (t/is (< dist4 dist3))))
+
+
+
+

common/test/common_tests/variant_test.cljc

@@ -0,0 +1,108 @@
+;; 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 common-tests.variant-test
+  (:require
+   [app.common.types.variant :as ctv]
+   [clojure.test :as t]))
+
+(t/deftest convert-between-variant-properties-maps-and-strings
+  (let [map-with-two-props           [{:name "border" :value "yes"} {:name "color" :value "gray"}]
+        map-with-two-props-one-blank [{:name "border" :value "no"} {:name "color" :value ""}]
+        map-with-one-prop            [{:name "border" :value "no"}]
+        map-with-spaces              [{:name "border 1" :value "of course"} {:name "color 2" :value "dark gray"}]
+
+        string-valid-with-two-props  "border=yes, color=gray"
+        string-valid-with-one-prop   "border=no"
+        string-valid-with-spaces     "border 1=of course, color 2=dark gray"
+        string-invalid               "border=yes, color="]
+
+    (t/testing "convert map to string"
+      (t/is (= (ctv/properties-map-to-string map-with-two-props) string-valid-with-two-props))
+      (t/is (= (ctv/properties-map-to-string map-with-two-props-one-blank) string-valid-with-one-prop))
+      (t/is (= (ctv/properties-map-to-string map-with-spaces) string-valid-with-spaces)))
+
+    (t/testing "convert string to map"
+      (t/is (= (ctv/properties-string-to-map string-valid-with-two-props) map-with-two-props))
+      (t/is (= (ctv/properties-string-to-map string-valid-with-one-prop) map-with-one-prop))
+      (t/is (= (ctv/properties-string-to-map string-valid-with-spaces) map-with-spaces)))
+
+    (t/testing "check if a string is valid"
+      (t/is (= (ctv/valid-properties-string? string-valid-with-two-props) true))
+      (t/is (= (ctv/valid-properties-string? string-valid-with-one-prop) true))
+      (t/is (= (ctv/valid-properties-string? string-valid-with-spaces) true))
+      (t/is (= (ctv/valid-properties-string? string-invalid) false)))))
+
+
+(t/deftest find-properties
+  (let [prev-props  [{:name "border" :value "yes"} {:name "color" :value "gray"}]
+        upd-props-1 [{:name "border" :value "yes"}]
+        upd-props-2 [{:name "border" :value "yes"} {:name "color" :value "blue"}]
+        upd-props-3 [{:name "border" :value "yes"} {:name "color" :value "gray"} {:name "shadow" :value "large"}]
+        upd-props-4 [{:name "color" :value "yellow"} {:name "shadow" :value "large"}]]
+
+    (t/testing "a property to remove"
+      (t/is (= (ctv/find-properties-to-remove prev-props upd-props-1)
+               [{:name "color" :value "gray"}]))
+      (t/is (= (ctv/find-properties-to-update prev-props upd-props-1)
+               []))
+      (t/is (= (ctv/find-properties-to-add prev-props upd-props-1)
+               [])))
+
+    (t/testing "a property to update"
+      (t/is (= (ctv/find-properties-to-remove prev-props upd-props-2)
+               []))
+      (t/is (= (ctv/find-properties-to-update prev-props upd-props-2)
+               [{:name "color" :value "blue"}]))
+      (t/is (= (ctv/find-properties-to-add prev-props upd-props-2)
+               [])))
+
+    (t/testing "a property to add"
+      (t/is (= (ctv/find-properties-to-remove prev-props upd-props-3)
+               []))
+      (t/is (= (ctv/find-properties-to-update prev-props upd-props-3)
+               []))
+      (t/is (= (ctv/find-properties-to-add prev-props upd-props-3)
+               [{:name "shadow" :value "large"}])))
+
+    (t/testing "properties to remove, update & add"
+      (t/is (= (ctv/find-properties-to-remove prev-props upd-props-4)
+               [{:name "border" :value "yes"}]))
+      (t/is (= (ctv/find-properties-to-update prev-props upd-props-4)
+               [{:name "color" :value "yellow"}]))
+      (t/is (= (ctv/find-properties-to-add prev-props upd-props-4)
+               [{:name "shadow" :value "large"}])))
+
+    (t/testing "find property index"
+      (t/is (= (ctv/find-index-for-property-name prev-props "border") 0))
+      (t/is (= (ctv/find-index-for-property-name prev-props "color") 1)))))
+
+
+(t/deftest compare-properties
+  (let [props-1  [{:name "border" :value "yes"} {:name "color" :value "gray"}]
+        props-2  [{:name "border" :value "yes"} {:name "color" :value "red"}]
+        props-3  [{:name "border" :value "no"} {:name "color" :value "gray"}]]
+
+    (t/testing "compare properties"
+      (t/is (= (ctv/compare-properties [props-1 props-2])
+               [{:name "border" :value "yes"} {:name "color" :value nil}]))
+      (t/is (= (ctv/compare-properties [props-1 props-2 props-3])
+               [{:name "border" :value nil} {:name "color" :value nil}]))
+      (t/is (= (ctv/compare-properties [props-1 props-2 props-3] "&")
+               [{:name "border" :value "&"} {:name "color" :value "&"}])))))
+
+
+(t/deftest check-belong-same-variant
+  (let [components-1 [{:variant-id "a variant"} {:variant-id "a variant"}]
+        components-2 [{:variant-id "a variant"} {:variant-id "another variant"}]
+        components-3 [{:variant-id "a variant"} {}]
+        components-4 [{} {}]]
+
+    (t/testing "check-belong-same-variant"
+      (t/is (= (ctv/same-variant? components-1) true))
+      (t/is (= (ctv/same-variant? components-2) false))
+      (t/is (= (ctv/same-variant? components-3) false))
+      (t/is (= (ctv/same-variant? components-4) false)))))

docker/devenv/Dockerfile

@@ -1,15 +1,16 @@
-FROM debian:bookworm
+FROM ubuntu:24.04
 LABEL maintainer="Penpot <docker@penpot.app>"
 
 ARG DEBIAN_FRONTEND=noninteractive
 
-ENV NODE_VERSION=v22.13.1 \
+ENV NODE_VERSION=v22.14.0 \
     CLOJURE_VERSION=1.12.0.1501 \
     CLJKONDO_VERSION=2025.01.16 \
     BABASHKA_VERSION=1.12.196 \
     CLJFMT_VERSION=0.13.0 \
     RUSTUP_VERSION=1.27.1 \
     RUST_VERSION=1.85.0 \
+    EMSCRIPTEN_VERSION=4.0.6 \
     LANG=en_US.UTF-8 \
     LC_ALL=en_US.UTF-8
 
@@ -45,7 +46,7 @@ RUN set -ex; \
     rm -rf /var/lib/apt/lists/*;
 
 RUN set -ex; \
-    useradd -m -g users -s /bin/bash penpot; \
+    usermod -l penpot -d /home/penpot -G users -s /bin/bash ubuntu; \
     passwd penpot -d; \
     echo "penpot ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers
 
@@ -63,8 +64,6 @@ RUN set -ex; \
         woff-tools \
         woff2 \
         fontforge \
-        gconf-service \
-        libasound2 \
         libatk1.0-0 \
         libatk-bridge2.0-0 \
         libcairo2 \
@@ -73,7 +72,6 @@ RUN set -ex; \
         libexpat1 \
         libfontconfig1 \
         libgcc1 \
-        libgconf-2-4 \
         libgdk-pixbuf2.0-0 \
         libglib2.0-0 \
         libgtk-3-0 \
@@ -95,7 +93,6 @@ RUN set -ex; \
         libxss1 \
         libxtst6 \
         fonts-liberation \
-        libappindicator1 \
         libnss3 \
         libgbm1 \
         xvfb \
@@ -107,12 +104,12 @@ RUN set -eux; \
     ARCH="$(dpkg --print-architecture)"; \
     case "${ARCH}" in \
        aarch64|arm64) \
-         ESUM='fb43ae1202402842559cb6223886ec1663b90ffbec48479abbcb92c92c9012eb'; \
-         BINARY_URL='https://github.com/adoptium/temurin23-binaries/releases/download/jdk-23.0.2%2B7/OpenJDK23U-jdk_aarch64_linux_hotspot_23.0.2_7.tar.gz'; \
+         ESUM='18071047526ab4b53131f9bb323e8703485ae37fcb2f2c5ef0f1b7bab66d1b94'; \
+         BINARY_URL='https://github.com/adoptium/temurin24-binaries/releases/download/jdk-24%2B36/OpenJDK24U-jdk_aarch64_linux_hotspot_24_36.tar.gz'; \
          ;; \
        amd64|x86_64) \
-         ESUM='870ac8c05c6fe563e7a3878a47d0234b83c050e83651d2c47e8b822ec74512dd'; \
-         BINARY_URL='https://github.com/adoptium/temurin23-binaries/releases/download/jdk-23.0.2%2B7/OpenJDK23U-jdk_x64_linux_hotspot_23.0.2_7.tar.gz'; \
+         ESUM='c340dee97b6aa215d248bc196dcac5b56e7be9b5c5d45e691344d40d5d0b171d'; \
+         BINARY_URL='https://github.com/adoptium/temurin24-binaries/releases/download/jdk-24%2B36/OpenJDK24U-jdk_x64_linux_hotspot_24_36.tar.gz'; \
          ;; \
        *) \
          echo "Unsupported arch: ${ARCH}"; \
@@ -137,7 +134,7 @@ RUN set -ex; \
 RUN set -ex; \
     install -d /usr/share/postgresql-common/pgdg; \
     curl -o /usr/share/postgresql-common/pgdg/apt.postgresql.org.asc --fail https://www.postgresql.org/media/keys/ACCC4CF8.asc; \
-    echo "deb [signed-by=/usr/share/postgresql-common/pgdg/apt.postgresql.org.asc] https://apt.postgresql.org/pub/repos/apt bookworm-pgdg main" >> /etc/apt/sources.list.d/postgresql.list; \
+    echo "deb [signed-by=/usr/share/postgresql-common/pgdg/apt.postgresql.org.asc] https://apt.postgresql.org/pub/repos/apt noble-pgdg main" >> /etc/apt/sources.list.d/postgresql.list; \
     apt-get -qq update; \
     apt-get -qqy install postgresql-client-16; \
     rm -rf /var/lib/apt/lists/*;
@@ -273,8 +270,8 @@ WORKDIR /usr/local
 RUN set -eux; \
   git clone https://github.com/emscripten-core/emsdk.git; \
   cd emsdk; \
-  ./emsdk install latest; \
-  ./emsdk activate latest; \
+  ./emsdk install $EMSCRIPTEN_VERSION; \
+  ./emsdk activate $EMSCRIPTEN_VERSION; \
   rustup target add wasm32-unknown-emscripten;
 
 WORKDIR /home

docker/devenv/docker-compose.yaml

@@ -68,7 +68,7 @@ services:
       - PENPOT_LDAP_ATTRS_PHOTO=jpegPhoto
 
   minio:
-    image: "minio/minio:RELEASE.2023-11-11T08-14-41Z"
+    image: "minio/minio:RELEASE.2025-04-03T14-56-28Z"
     command: minio server /mnt/data --console-address ":9001"
 
     volumes:
@@ -83,7 +83,7 @@ services:
       - 9001:9001
 
   postgres:
-    image: postgres:16
+    image: postgres:16.8
     command: postgres -c config_file=/etc/postgresql.conf
     restart: always
     stop_signal: SIGINT

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

@@ -1,13 +1,11 @@
 ---
-title: 1.1 Recommended Settings
+title: 1.1 Recommended storage
 ---
 
-# Recommended settings
+# Recommended storage
 
-To self-host Penpot, you’ll need a server with the following specifications:
+Disk requirements depend on your usage, with the primary factors being database storage and user-uploaded files.
 
-* **CPU:** 1-2 CPUs
-* **RAM:** 4 GiB of RAM
-* **Disk Space:** Disk requirements depend on your usage. Disk usage primarily involves the database and any files uploaded by users.
+As a rule of thumb, start with a **minimum** database size of **50GB** to **100GB** with elastic sizing capability — this configuration should adequately support up to 10 editors. For environments with **more than 10 users**, we recommend adding approximately **5GB** of capacity per additional editor.
 
-This setup should be sufficient for a smooth experience with typical usage (your mileage may vary).
+Keep in mind that database size doesn't grow strictly proportionally with user count, as it depends heavily on how Penpot is used and the complexity of files created. Most organizations begin with this baseline and elastic sizing approach, then monitor usage patterns monthly until resource requirements stabilize.

exporter/package.json

@@ -18,7 +18,7 @@
     "luxon": "^3.5.0",
     "playwright": "^1.50.0",
     "raw-body": "^3.0.0",
-    "svgo": "penpot/svgo#v3",
+    "svgo": "penpot/svgo#v3.1",
     "xml-js": "^1.6.11",
     "xregexp": "^5.1.1"
   },

exporter/yarn.lock

@@ -620,13 +620,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-tree@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "css-tree@npm:3.0.0"
+"css-tree@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "css-tree@npm:3.1.0"
   dependencies:
-    mdn-data: "npm:2.10.0"
+    mdn-data: "npm:2.12.2"
     source-map-js: "npm:^1.0.1"
-  checksum: 10c0/43d44fdf7004ae91d73d486f17894fef77efa33747a6752b9241cf0f5fb47fabc16ec34a96a993651d9014dfdeee803d7c5fcd3548214252ee19f4e5c98999b2
+  checksum: 10c0/b5715852c2f397c715ca00d56ec53fc83ea596295ae112eb1ba6a1bda3b31086380e596b1d8c4b980fe6da09e7d0fc99c64d5bb7313030dd0fba9c1415f30979
   languageName: node
   linkType: hard
 
@@ -898,7 +898,7 @@ __metadata:
     raw-body: "npm:^3.0.0"
     shadow-cljs: "npm:2.28.20"
     source-map-support: "npm:^0.5.21"
-    svgo: "penpot/svgo#v3"
+    svgo: "penpot/svgo#v3.1"
     xml-js: "npm:^1.6.11"
     xregexp: "npm:^5.1.1"
   languageName: unknown
@@ -1383,10 +1383,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdn-data@npm:2.10.0":
-  version: 2.10.0
-  resolution: "mdn-data@npm:2.10.0"
-  checksum: 10c0/f6f1a6a6eb092bab250d06f6f6c7cb1733a77a17e7119aac829ad67d4322bbf6a30df3c6d88686e71942e66bd49274b2ddfede22a1d3df0d6c49a56fbd09eb7c
+"mdn-data@npm:2.12.2":
+  version: 2.12.2
+  resolution: "mdn-data@npm:2.12.2"
+  checksum: 10c0/b22443b71d70f72ccc3c6ba1608035431a8fc18c3c8fc53523f06d20e05c2ac10f9b53092759a2ca85cf02f0d37036f310b581ce03e7b99ac74d388ef8152ade
   languageName: node
   linkType: hard
 
@@ -2286,16 +2286,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svgo@penpot/svgo#v3":
+"svgo@penpot/svgo#v3.1":
   version: 4.0.0
-  resolution: "svgo@https://github.com/penpot/svgo.git#commit=71c0db44c3c2665f2ffc0c4c5383acaebd5c524f"
+  resolution: "svgo@https://github.com/penpot/svgo.git#commit=a46262c12c0d967708395972c374eb2adead4180"
   dependencies:
     "@trysound/sax": "npm:0.2.0"
     css-select: "npm:^5.1.0"
-    css-tree: "npm:^3.0.0"
+    css-tree: "npm:^3.1.0"
     csso: "npm:^5.0.5"
     lodash: "npm:^4.17.21"
-  checksum: 10c0/642c583372a610e484382cbf8a8fe28256dd354598d2e65ade2a3a63bf841b4d3dab4106f929f183ae3610007db2fc1413e82acc23793fe1a2e882bc923acc72
+  checksum: 10c0/87a51a0cd1168a31c07ddfa9ffa544d0cad1412b3549dc20146143a179c66e36420a88ae40221cdb23146775876d684b47972663b08b3f62335eb4f98773677e
   languageName: node
   linkType: hard
 

frontend/deps.edn

@@ -49,6 +49,6 @@
     cider/cider-nrepl {:mvn/version "0.48.0"}}}
 
   :shadow-cljs
-  {:main-opts ["-m" "shadow.cljs.devtools.cli"]}
-
+  {:main-opts ["-m" "shadow.cljs.devtools.cli"]
+   :jvm-opts ["--sun-misc-unsafe-memory-access=allow" "-Dpenpot.wasm.profile-marks=true"]}
   }}

frontend/package.json

@@ -103,9 +103,9 @@
     "@penpot/draft-js": "portal:./vendor/draft-js",
     "@penpot/hljs": "portal:./vendor/hljs",
     "@penpot/mousetrap": "portal:./vendor/mousetrap",
-    "@penpot/svgo": "penpot/svgo#c6fba7a4dcfbc27b643e7fc0c94fc98cf680b77b",
+    "@penpot/svgo": "penpot/svgo#v3.1",
     "@penpot/text-editor": "portal:./text-editor",
-    "@tokens-studio/sd-transforms": "^0.16.1",
+    "@tokens-studio/sd-transforms": "1.2.11",
     "compression": "^1.7.5",
     "date-fns": "^4.1.0",
     "eventsource-parser": "^3.0.0",
@@ -124,7 +124,7 @@
     "rxjs": "8.0.0-alpha.14",
     "sax": "^1.4.1",
     "source-map-support": "^0.5.21",
-    "style-dictionary": "4.0.0-prerelease.36",
+    "style-dictionary": "5.0.0-rc.1",
     "tdigest": "^0.1.2",
     "tinycolor2": "^1.6.0",
     "ua-parser-js": "2.0.0",

frontend/playwright/data/get-teams-render-wasm.json

@@ -0,0 +1,26 @@
+[
+  {
+    "~:features": {
+      "~#set": [
+        "render-wasm",
+        "layout/grid",
+        "styles/v2",
+        "fdata/pointer-map",
+        "fdata/objects-map",
+        "components/v2",
+        "fdata/shape-data-type"
+      ]
+    },
+    "~:permissions": {
+      "~:type": "~:membership",
+      "~:is-owner": true,
+      "~:is-admin": true,
+      "~:can-edit": true
+    },
+    "~:name": "Default",
+    "~:modified-at": "~m1713533116375",
+    "~:id": "~uc7ce0794-0992-8105-8004-38e630f7920a",
+    "~:created-at": "~m1713533116375",
+    "~:is-default": true
+  }
+]

frontend/playwright/data/get-teams-variants.json

@@ -0,0 +1,26 @@
+[
+  {
+    "~:features": {
+      "~#set": [
+        "variants/v1",
+        "layout/grid",
+        "styles/v2",
+        "fdata/pointer-map",
+        "fdata/objects-map",
+        "components/v2",
+        "fdata/shape-data-type"
+      ]
+    },
+    "~:permissions": {
+      "~:type": "~:membership",
+      "~:is-owner": true,
+      "~:is-admin": true,
+      "~:can-edit": true
+    },
+    "~:name": "Default",
+    "~:modified-at": "~m1713533116375",
+    "~:id": "~uc7ce0794-0992-8105-8004-38e630f7920a",
+    "~:created-at": "~m1713533116375",
+    "~:is-default": true
+  }
+]

frontend/playwright/data/workspace/get-team-variants.json

@@ -0,0 +1,24 @@
+{
+  "~:features": {
+    "~#set": [
+      "variants/v1",
+      "layout/grid",
+      "styles/v2",
+      "fdata/pointer-map",
+      "fdata/objects-map",
+      "components/v2",
+      "fdata/shape-data-type"
+    ]
+  },
+  "~:permissions": {
+    "~:type": "~:membership",
+    "~:is-owner": true,
+    "~:is-admin": true,
+    "~:can-edit": true
+  },
+  "~:name": "Default",
+  "~:modified-at": "~m1713533116375",
+  "~:id": "~uc7ce0794-0992-8105-8004-38e630f40f6d",
+  "~:created-at": "~m1713533116375",
+  "~:is-default": true
+}

frontend/playwright/ui/pages/WorkspacePage.js

@@ -70,6 +70,7 @@ export class WorkspacePage extends BaseWebSocketPage {
     );
     this.toolbarOptions = page.getByTestId("toolbar-options");
     this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
+    this.ellipseShapeButton = page.getByRole("button", { name: "Ellipse (E)" });
     this.moveButton = page.getByRole("button", { name: "Move (V)" });
     this.boardButton = page.getByRole("button", { name: "Board (B)" });
     this.toggleToolbarButton = page.getByRole("button", {
@@ -198,6 +199,13 @@ export class WorkspacePage extends BaseWebSocketPage {
     await this.page.mouse.up();
   }
 
+  async clickAt(x, y) {
+    await this.page.waitForTimeout(100);
+    await this.viewport.hover({ position: { x, y } });
+    await this.page.mouse.down();
+    await this.page.mouse.up();
+  }
+
   async panOnViewportAt(x, y, width, height) {
     await this.page.waitForTimeout(100);
     await this.viewport.hover({ position: { x, y } });

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

@@ -0,0 +1,23 @@
+import { test, expect } from "@playwright/test";
+import { WorkspacePage } from "../pages/WorkspacePage";
+import { BaseWebSocketPage } from "../pages/BaseWebSocketPage";
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+  await BaseWebSocketPage.mockRPC(
+    page,
+    "get-teams",
+    "get-teams-render-wasm.json",
+  );
+});
+
+test("BUG 10867 - Crash when loading comments", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+  await workspacePage.goToWorkspace();
+
+  await workspacePage.showComments();
+  await expect(
+    workspacePage.rightSidebar.getByText("Show all comments"),
+  ).toBeVisible();
+});

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

@@ -371,6 +371,59 @@ test.describe("Tokens: Tokens Tab", () => {
     await expect(tokensTabPanel.getByLabel("color.dark.primary")).toBeEnabled();
   });
 
+  test("User changes color token color while keeping custom color space", async ({
+    page,
+  }) => {
+    const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
+      await setupEmptyTokensFile(page);
+
+    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+    await tokensTabPanel.getByTitle("Add token: Color").click();
+
+    await expect(tokensUpdateCreateModal).toBeVisible();
+    const nameField = tokensUpdateCreateModal.getByLabel("Name");
+    const valueField = tokensUpdateCreateModal.getByLabel("Value");
+
+    await valueField.click();
+    await valueField.fill("hsv(1,1,1)");
+    await expect(
+      tokensUpdateCreateModal.getByText("Resolved value: #ff0400"),
+    ).toBeVisible();
+
+    const colorBullet = tokensUpdateCreateModal.getByTestId(
+      "token-form-color-bullet",
+    );
+    await colorBullet.click();
+
+    const valueSaturationSelector = tokensUpdateCreateModal.getByTestId(
+      "value-saturation-selector",
+    );
+    await expect(valueSaturationSelector).toBeVisible();
+
+    // Check if color space doesnt get overwritten when changing color via the picker
+    // Not testing for exact value to avoid flakiness of px click
+    await valueSaturationSelector.click({ position: { x: 100, y: 100 } });
+    await expect(valueField).not.toHaveValue("hsv(1,1,1)");
+    await expect(valueField).toHaveValue(/^hsv.*$/);
+
+    // Clearing the input field should pick hex
+    await valueField.fill("");
+    await expect(
+      tokensUpdateCreateModal.getByText("Resolved value: -"),
+    ).toBeVisible();
+    await valueSaturationSelector.click({ position: { x: 50, y: 50 } });
+    await expect(valueField).toHaveValue(/^#[A-Fa-f\d]+$/);
+
+    // Changing opacity for hex values converts to rgba
+    const sliderOpacity = tokensUpdateCreateModal.getByTestId("slider-opacity");
+    await sliderOpacity.click({ position: { x: 50, y: 0 } });
+    await expect(valueField).toHaveValue(/^rgba(.*)$/);
+
+    // Changing color now will stay in rgba
+    await valueSaturationSelector.click({ position: { x: 0, y: 0 } });
+    await expect(valueField).toHaveValue(/^rgba(.*)$/);
+  });
+
   test("User duplicate color token", async ({ page }) => {
     const { tokensSidebar, tokenContextMenuForToken } =
       await setupTokensFile(page);
@@ -511,7 +564,9 @@ test.describe("Tokens: Sets Tab", () => {
     // Creates nesting by renaming set with double click
     await tokenThemesSetsSidebar
       .getByRole("button", { name: "light-renamed" })
-      .dblclick();
+      .click({ button: "right" });
+    await expect(tokenContextMenuForSet).toBeVisible();
+    await tokenContextMenuForSet.getByText("Rename").click();
     await changeSetInput(tokenThemesSetsSidebar, "nested/light");
 
     await assertSetsList(tokenThemesSetsSidebar, [

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

@@ -0,0 +1,428 @@
+import { test, expect } from "@playwright/test";
+import { WorkspacePage } from "../pages/WorkspacePage";
+import { BaseWebSocketPage } from "../pages/BaseWebSocketPage";
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+  await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-variants.json");
+});
+
+const setupVariantsFile = async (workspacePage) => {
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockRPC(
+    "get-team?id=*",
+    "workspace/get-team-variants.json",
+  );
+
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockRPC(
+    /get\-file\?/,
+    "workspace/get-file-not-empty.json",
+  );
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-create-rect.json",
+  );
+
+  await workspacePage.goToWorkspace({
+    fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374",
+    pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375",
+  });
+};
+
+const setupVariantsFileWithVariant = async (workspacePage) => {
+  await setupVariantsFile(workspacePage);
+
+  await workspacePage.clickLeafLayer("Rectangle");
+  await workspacePage.page.keyboard.press("Control+k");
+  await workspacePage.page.keyboard.press("Control+k");
+};
+
+const findVariant = async (workspacePage, num_variant) => {
+  const container = await workspacePage.layers
+    .getByTestId("layer-row")
+    .filter({ has: workspacePage.page.getByText("Rectangle") })
+    .filter({ has: workspacePage.page.locator(".icon-component") })
+    .nth(num_variant);
+
+  const variant1 = await workspacePage.layers
+    .getByTestId("layer-row")
+    .filter({ has: workspacePage.page.getByText("Value 1") })
+    .filter({ has: workspacePage.page.locator(".icon-variant") })
+    .nth(num_variant);
+
+  const variant2 = await workspacePage.layers
+    .getByTestId("layer-row")
+    .filter({ has: workspacePage.page.getByText("Value 2") })
+    .filter({ has: workspacePage.page.locator(".icon-variant") })
+    .nth(num_variant);
+
+  return {
+    container: container,
+    variant1: variant1,
+    variant2: variant2,
+  };
+};
+
+const validateVariant = async (variant) => {
+  //The variant container exists and is visible
+  await expect(variant.container).toBeVisible();
+
+  //The variants exists and are visible
+  await expect(variant.variant1).toBeVisible();
+  await expect(variant.variant2).toBeVisible();
+
+  // variant1 and variant2 are items inside the childs of variant_container
+  const parent_id = "children-" + (await variant.container.getAttribute("id"));
+  await expect(variant.variant1.locator("xpath=..")).toHaveAttribute(
+    "data-testid",
+    parent_id,
+  );
+  await expect(variant.variant2.locator("xpath=..")).toHaveAttribute(
+    "data-testid",
+    parent_id,
+  );
+};
+
+test("User creates a variant", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await setupVariantsFileWithVariant(workspacePage);
+
+  await workspacePage.clickLeafLayer("Rectangle");
+
+  const variant = await findVariant(workspacePage, 0);
+  // The variant is valid
+  await validateVariant(variant);
+
+  // Extra validators
+  await variant.container.click();
+
+  const variants = await workspacePage.layers
+    .getByTestId("layer-row")
+    .filter({ has: workspacePage.page.locator(".icon-variant") })
+    .all();
+
+  // There are exactly two variants
+  expect(variants.length).toBe(2);
+
+  // The design tab shows the variant properties
+  await expect(
+    workspacePage.page.getByTitle("Property1: Value 1, Value 2"),
+  ).toBeVisible();
+});
+
+test("User duplicates a variant container", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await setupVariantsFileWithVariant(workspacePage);
+
+  const variant = await findVariant(workspacePage, 0);
+
+  // Select the variant container
+  await variant.container.click();
+
+  //Duplicate the variant container
+  await workspacePage.page.keyboard.press("Control+d");
+
+  const variant_original = await findVariant(workspacePage, 1); // On duplicate, the new item is the first
+  const variant_duplicate = await findVariant(workspacePage, 0);
+
+  // Expand the layers
+  await variant_duplicate.container.getByRole("button").first().click();
+
+  // The variants are valid
+  await validateVariant(variant_original);
+  await validateVariant(variant_duplicate);
+});
+
+test("User copy paste a variant container", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await setupVariantsFileWithVariant(workspacePage);
+
+  const variant = await findVariant(workspacePage, 0);
+
+  // Select the variant container
+  await variant.container.click();
+
+  //Copy the variant container
+  await workspacePage.page.keyboard.press("Control+c");
+
+  //Paste the variant container
+  await workspacePage.clickAt(500, 500);
+  await workspacePage.page.keyboard.press("Control+v");
+
+  const variant_original = await findVariant(workspacePage, 0);
+  const variant_duplicate = await findVariant(workspacePage, 1);
+
+  // Expand the layers
+  await variant_duplicate.container.getByRole("button").first().click();
+
+  // The variants are valid
+  await validateVariant(variant_original);
+  await validateVariant(variant_duplicate);
+});
+
+test("User cut paste a variant container", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await setupVariantsFileWithVariant(workspacePage);
+
+  const variant = await findVariant(workspacePage, 0);
+
+  // Select the variant container
+  await variant.container.click();
+
+  //Cut the variant container
+  await workspacePage.page.keyboard.press("Control+x");
+
+  //Paste the variant container
+  await workspacePage.clickAt(500, 500);
+  await workspacePage.page.keyboard.press("Control+v");
+
+  const variant_pasted = await findVariant(workspacePage, 0);
+
+  // Expand the layers
+  await variant_pasted.container.getByRole("button").first().click();
+
+  // The variants are valid
+  await validateVariant(variant_pasted);
+});
+
+test("[Bugfixing] User cut paste a variant container into a board, and undo twice", async ({
+  page,
+}) => {
+  const workspacePage = new WorkspacePage(page);
+  await setupVariantsFileWithVariant(workspacePage);
+
+  const variant = await findVariant(workspacePage, 0);
+
+  //Create a board
+  await workspacePage.boardButton.click();
+  await workspacePage.clickWithDragViewportAt(500, 500, 200, 200);
+  await workspacePage.clickAt(495, 495);
+  const board = await workspacePage.rootShape.locator("Board");
+
+  // Select the variant container
+  await variant.container.click();
+
+  //Cut the variant container
+  await workspacePage.page.keyboard.press("Control+x");
+
+  //Select the board
+  await workspacePage.clickLeafLayer("Board");
+
+  //Paste the variant container inside the board
+  await workspacePage.page.keyboard.press("Control+v");
+
+  //Undo twice
+  await workspacePage.page.keyboard.press("Control+z");
+  await workspacePage.page.keyboard.press("Control+z");
+
+  const variant_after_undo = await findVariant(workspacePage, 0);
+
+  // The variants are valid
+  await validateVariant(variant_after_undo);
+});
+
+test("User copy paste a variant", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await setupVariantsFileWithVariant(workspacePage);
+
+  const variant = await findVariant(workspacePage, 0);
+
+  // Select the variant1
+  await variant.variant1.click();
+
+  //Cut the variant
+  await workspacePage.page.keyboard.press("Control+c");
+
+  //Paste the variant
+  await workspacePage.clickAt(500, 500);
+  await workspacePage.page.keyboard.press("Control+v");
+
+  const copy = await workspacePage.layers
+    .getByTestId("layer-row")
+    .filter({ has: workspacePage.page.getByText("Rectangle") })
+    .filter({ has: workspacePage.page.locator(".icon-component-copy") });
+
+  //The copy exists and is visible
+  await expect(copy).toBeVisible();
+});
+
+test("User cut paste a variant outside the container", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await setupVariantsFileWithVariant(workspacePage);
+
+  const variant = await findVariant(workspacePage, 0);
+
+  // Select the variant1
+  await variant.variant1.click();
+
+  //Cut the variant
+  await workspacePage.page.keyboard.press("Control+x");
+
+  //Paste the variant
+  await workspacePage.clickAt(500, 500);
+  await workspacePage.page.keyboard.press("Control+v");
+
+  const component = await workspacePage.layers
+    .getByTestId("layer-row")
+    .filter({ has: workspacePage.page.getByText("Rectangle / Value 1") })
+    .filter({ has: workspacePage.page.locator(".icon-component") });
+
+  //The component exists and is visible
+  await expect(component).toBeVisible();
+});
+
+test("User drag and drop a variant outside the container", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await setupVariantsFileWithVariant(workspacePage);
+
+  const variant = await findVariant(workspacePage, 0);
+
+  // Drag and drop the variant
+  await workspacePage.clickWithDragViewportAt(350, 400, 0, 200);
+
+  const component = await workspacePage.layers
+    .getByTestId("layer-row")
+    .filter({ has: workspacePage.page.getByText("Rectangle / Value 1") })
+    .filter({ has: workspacePage.page.locator(".icon-component") });
+
+  //The component exists and is visible
+  await expect(component).toBeVisible();
+});
+
+test("User cut paste a component inside a variant", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await setupVariantsFileWithVariant(workspacePage);
+
+  const variant = await findVariant(workspacePage, 0);
+
+  //Create a component
+  await workspacePage.ellipseShapeButton.click();
+  await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
+  await workspacePage.clickLeafLayer("Ellipse");
+  await workspacePage.page.keyboard.press("Control+k");
+
+  //Cut the component
+  await workspacePage.page.keyboard.press("Control+x");
+
+  //Paste the component inside the variant
+  await variant.container.click();
+  await workspacePage.page.keyboard.press("Control+v");
+
+  const variant3 = await workspacePage.layers
+    .getByTestId("layer-row")
+    .filter({ has: workspacePage.page.getByText("Ellipse") })
+    .filter({ has: workspacePage.page.locator(".icon-variant") })
+    .first();
+
+  //The new variant exists and is visible
+  await expect(variant3).toBeVisible();
+});
+
+test("User cut paste a component with path inside a variant", async ({
+  page,
+}) => {
+  const workspacePage = new WorkspacePage(page);
+  await setupVariantsFileWithVariant(workspacePage);
+
+  const variant = await findVariant(workspacePage, 0);
+
+  //Create a component
+  await workspacePage.ellipseShapeButton.click();
+  await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
+  await workspacePage.clickLeafLayer("Ellipse");
+  await workspacePage.page.keyboard.press("Control+k");
+
+  //Rename the component
+  await workspacePage.layers.getByText("Ellipse").dblclick();
+  await workspacePage.page
+    .getByTestId("layer-item")
+    .getByRole("textbox")
+    .pressSequentially("button / hover");
+  await workspacePage.page.keyboard.press("Enter");
+
+  //Cut the component
+  await workspacePage.page.keyboard.press("Control+x");
+
+  //Paste the component inside the variant
+  await variant.container.click();
+  await workspacePage.page.keyboard.press("Control+v");
+
+  const variant3 = await workspacePage.layers
+    .getByTestId("layer-row")
+    .filter({ has: workspacePage.page.getByText("button, hover") })
+    .filter({ has: workspacePage.page.locator(".icon-variant") })
+    .first();
+
+  //The new variant exists and is visible
+  await expect(variant3).toBeVisible();
+});
+
+test("User drag and drop a component with path inside a variant", async ({
+  page,
+}) => {
+  const workspacePage = new WorkspacePage(page);
+  await setupVariantsFileWithVariant(workspacePage);
+
+  const variant = await findVariant(workspacePage, 0);
+
+  //Create a component
+  await workspacePage.ellipseShapeButton.click();
+  await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
+  await workspacePage.clickLeafLayer("Ellipse");
+  await workspacePage.page.keyboard.press("Control+k");
+
+  //Rename the component
+  await workspacePage.layers.getByText("Ellipse").dblclick();
+  await workspacePage.page
+    .getByTestId("layer-item")
+    .getByRole("textbox")
+    .pressSequentially("button / hover");
+  await workspacePage.page.keyboard.press("Enter");
+
+  //Drag and drop the component the component
+  await workspacePage.clickWithDragViewportAt(510, 510, 0, -200);
+
+  const variant3 = await workspacePage.layers
+    .getByTestId("layer-row")
+    .filter({ has: workspacePage.page.getByText("button, hover") })
+    .filter({ has: workspacePage.page.locator(".icon-variant") })
+    .first();
+
+  //The new variant exists and is visible
+  await expect(variant3).toBeVisible();
+});
+
+test("User cut paste a variant into another container", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await setupVariantsFileWithVariant(workspacePage);
+
+  // Create anothe variant
+  await workspacePage.ellipseShapeButton.click();
+  await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
+  await workspacePage.clickLeafLayer("Ellipse");
+  await workspacePage.page.keyboard.press("Control+k");
+  await workspacePage.page.keyboard.press("Control+k");
+
+  const variant_origin = await findVariant(workspacePage, 1);
+  const variant_target = await findVariant(workspacePage, 0);
+
+  // Select the variant1
+  await variant_origin.variant1.click();
+
+  //Cut the variant
+  await workspacePage.page.keyboard.press("Control+x");
+
+  //Paste the variant
+  await workspacePage.layers.getByText("Ellipse").first().click();
+  await workspacePage.page.keyboard.press("Control+v");
+
+  const variant3 = await workspacePage.layers
+    .getByTestId("layer-row")
+    .filter({ has: workspacePage.page.getByText("Value 1, rectangle") })
+    .filter({ has: workspacePage.page.locator(".icon-variant") })
+    .first();
+
+  //The new variant exists and is visible
+  await expect(variant3).toBeVisible();
+});

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

@@ -4,11 +4,13 @@ import { presenceFixture } from "../../data/workspace/ws-notifications";
 
 test.beforeEach(async ({ page }) => {
   await WorkspacePage.init(page);
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.setupEmptyFile(page);
 });
 
 test("Save and restore version", async ({ page }) => {
   const workspacePage = new WorkspacePage(page);
-  await workspacePage.setupEmptyFile(page);
+
   await workspacePage.mockRPC(/get\-file\?/, "workspace/versions-init.json");
   await workspacePage.mockRPC(
     "get-file-fragment?file-id=*&fragment-id=406b7b01-d3e2-80e4-8005-3138b7cc5f0b",
@@ -87,3 +89,20 @@ test("Save and restore version", async ({ page }) => {
   // check that the history panel is closed after restore
   await expect(page.getByRole("tab", { name: "design" })).toBeVisible();
 });
+
+test("BUG 11006 - Fix history panel shortcut", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.mockRPC(/get\-file\?/, "workspace/versions-init.json");
+  await workspacePage.mockRPC(
+    "get-file-snapshots?file-id=*",
+    "workspace/versions-snapshot-1.json",
+  );
+
+  await workspacePage.goToWorkspace();
+
+  await page.keyboard.press("Control+Alt+h");
+
+  await expect(
+    workspacePage.rightSidebar.getByText("There are no versions yet"),
+  ).toBeVisible();
+});

frontend/resources/images/icons/crown.svg

@@ -0,0 +1,4 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 16 16">
+  <path d="M8 1.8a.35.35 0 0 0-.3.18l-2.08 3.9a.7.7 0 0 1-1.06.21l-3-2.55a.35.35 0 0 0-.55.36l1.98 7.15a.7.7 0 0 0 .67.5h8.68a.7.7 0 0 0 .67-.5l1.98-7.15a.35.35 0 0 0-.56-.36l-3 2.55a.7.7 0 0 1-1.06-.2L8.31 1.98A.35.35 0 0 0 8 1.8ZM3.1 14.35h9.8z"/>
+</svg>

frontend/resources/images/icons/eye-off.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 16 16">
+  <path d="M7.411 4.104c.237-.028.475-.042.714-.041 2.623 0 4.725 1.632 5.625 3.937a6.502 6.502 0 0 1-.875 1.568M5.043 4.917C3.895 5.617 3.006 6.702 2.5 8c.9 2.305 3.001 3.938 5.625 3.938a5.874 5.874 0 0 0 3.082-.856M6.932 6.807a1.69 1.69 0 0 0 .757 2.824 1.686 1.686 0 0 0 1.63-.437M3.625 3.5l9 9"/>
+</svg>

frontend/src/app/main/constants.cljs

@@ -25,6 +25,36 @@
 
 (def size-presets
   [{:name "APPLE"}
+   {:name "iPhone 16"
+    :width 393
+    :height 852}
+   {:name "iPhone 16 Pro"
+    :width 402
+    :height 874}
+   {:name "iPhone 16 Pro Max"
+    :width 440
+    :height 956}
+   {:name "iPhone 16 Plus"
+    :width 430
+    :height 932}
+   {:name "14/15 Pro Max"
+    :width 430
+    :height 932}
+   {:name "iPhone 15/15 Pro"
+    :width 393
+    :height 852}
+   {:name "iPhone 13/14 "
+    :width 390
+    :height 844}
+   {:name "iPhone 14 Plus"
+    :width 428
+    :height 926}
+   {:name "iPhone 13 Mini"
+    :width 375
+    :height 812}
+   {:name "iPhone SE"
+    :width 320
+    :height 568}
    {:name "iPhone 12/12 Pro"
     :width 390
     :height 844}
@@ -40,47 +70,86 @@
    {:name "iPhone XS Max/XR/11"
     :width 414
     :height 896}
-   {:name "iPhone 6/7/8 Plus"
-    :width 414
-    :height 736}
-   {:name "iPhone 6/7/8/SE2"
-    :width 375
-    :height 667}
-   {:name "iPhone 5/SE"
-    :width 320
-    :height 568}
    {:name "iPad"
     :width 768
     :height 1024}
+   {:name "iPad Mini 8.3in"
+    :width 744
+    :height 1133}
    {:name "iPad Pro 10.5in"
     :width 834
     :height 1112}
+   {:name "iPad Pro 11in"
+    :width 834
+    :height 1194}
    {:name "iPad Pro 12.9in"
-    :width 1024
+    :width 1027
     :height 1366}
+   {:name "Watch Series 10"
+    :width 416
+    :height 496}
+   {:name "Watch 45mm"
+    :width 396
+    :height 484}
    {:name "Watch 44mm"
     :width 368
     :height 448}
    {:name "Watch 42mm"
     :width 312
     :height 390}
+   {:name "Watch 41mm"
+    :width 352
+    :height 430}
    {:name "Watch 40mm"
     :width 324
     :height 394}
    {:name "Watch 38mm"
     :width 272
     :height 340}
+   {:name "MacBook Air"
+    :width 1280
+    :height 832}
+   {:name "MacBook Pro 14in"
+    :width 1512
+    :height 982}
+   {:name "MacBook Pro 16in"
+    :width 1728
+    :height 1117}
 
    {:name "ANDROID"}
+   {:name "Expanded"
+    :width 1280
+    :height 800}
+   {:name "Compact"
+    :width 412
+    :height 917}
+   {:name "Large"
+    :width 360
+    :height 800}
+   {:name "Medium"
+    :width 700
+    :height 840}
+   {:name "Small"
+    :width 360
+    :height 640}
    {:name "Mobile"
     :width 360
     :height 640}
    {:name "Tablet"
     :width 768
     :height 1024}
+   {:name "Google Pixel 7 Pro"
+    :width 1440
+    :height 3120}
+   {:name "Google Pixel 6a/6"
+    :width 1080
+    :height 2400}
    {:name "Google Pixel 4a/5"
     :width 393
     :height 851}
+   {:name "Samsung Galaxy S22"
+    :width 1080
+    :height 2340}
    {:name "Samsung Galaxy S20+"
     :width 384
     :height 854}
@@ -95,11 +164,17 @@
    {:name "Surface Pro 4/5/6/7"
     :width 1368
     :height 912}
+   {:name "Surface Pro 8"
+    :width 140
+    :height 960}
 
    {:name "ReMarkable"}
    {:name "Remarkable 2"
-    :width 840
-    :height 1120}
+    :width 1404
+    :height 1872}
+   {:name "Remarkable Pro"
+    :width 1620
+    :height 2160}
 
    {:name "WEB"}
    {:name "Web 1280"
@@ -115,6 +190,20 @@
     :width 1920
     :height 1080}
 
+   {:name "MIXED"}
+   {:name "Desktop/Wireframe"
+    :width 1440
+    :height 1024}
+   {:name "TV"
+    :width 1280
+    :height 720}
+   {:name "Slide 16:9"
+    :width 1920
+    :height 1080}
+   {:name "Slide 4:3"
+    :width 1027
+    :height 768}
+
    {:name "PRINT (96dpi)"}
    {:name "A0"
     :width 3179
@@ -150,7 +239,7 @@
     :height 320}
    {:name "Instagram post"
     :width 1080
-    :height 1080}
+    :height 1350}
    {:name "Instagram story"
     :width 1080
     :height 1920}
@@ -170,15 +259,24 @@
     :width 1584
     :height 396}
    {:name "LinkedIn post"
-    :width 1200
-    :height 627}
-   {:name "Twitter profile"
+    :width 520
+    :height 320}
+   {:name "Bluesky profile"
     :width 400
     :height 400}
-   {:name "Twitter header"
+   {:name "Bluesky cover"
+    :width 3000
+    :height 1000}
+   {:name "Bluesky post"
+    :width 1080
+    :height 1350}
+   {:name "X profile"
+    :width 400
+    :height 400}
+   {:name "X header"
     :width 1500
     :height 500}
-   {:name "Twitter post"
+   {:name "X post"
     :width 1024
     :height 512}
    {:name "YouTube profile"
@@ -187,6 +285,9 @@
    {:name "YouTube banner"
     :width 2560
     :height 1440}
+   {:name "YouTube cover"
+    :width 2048
+    :height 1152}
    {:name "YouTube thumb"
     :width 1280
     :height 720}])

frontend/src/app/main/data/style_dictionary.cljs

@@ -1,16 +1,21 @@
-(ns app.main.ui.workspace.tokens.style-dictionary
+;; 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.main.data.style-dictionary
   (:require
    ["@tokens-studio/sd-transforms" :as sd-transforms]
    ["style-dictionary$default" :as sd]
+   [app.common.files.tokens :as cft]
    [app.common.logging :as l]
    [app.common.schema :as sm]
    [app.common.transit :as t]
    [app.common.types.tokens-lib :as ctob]
-   [app.main.ui.workspace.tokens.errors :as wte]
-   [app.main.ui.workspace.tokens.tinycolor :as tinycolor]
-   [app.main.ui.workspace.tokens.token :as wtt]
-   [app.main.ui.workspace.tokens.warnings :as wtw]
-   [app.util.i18n :refer [tr]]
+   [app.main.data.tinycolor :as tinycolor]
+   [app.main.data.workspace.tokens.errors :as wte]
+   [app.main.data.workspace.tokens.warnings :as wtw]
    [app.util.time :as dt]
    [beicon.v2.core :as rx]
    [cuerdas.core :as str]
@@ -25,7 +30,7 @@
   "Initiates the StyleDictionary instance.
   Setup transforms from tokens-studio used to parse and resolved token values."
   (do
-    (sd-transforms/registerTransforms sd)
+    (sd-transforms/register sd)
     (.registerFormat sd #js {:name "custom/json"
                              :format (fn [^js res]
                                        (.-tokens (.-dictionary res)))})
@@ -55,7 +60,7 @@
   "Parses `value` of a numeric `sd-token` into a map like `{:value 1 :unit \"px\"}`.
   If the `value` is not parseable and/or has missing references returns a map with `:errors`."
   [value]
-  (let [parsed-value  (wtt/parse-token-value value)
+  (let [parsed-value  (cft/parse-token-value value)
         out-of-bounds (or (>= (:value parsed-value) sm/max-safe-int)
                           (<= (:value parsed-value) sm/min-safe-int))]
     (if (and parsed-value (not out-of-bounds))
@@ -73,7 +78,7 @@
   If the `value` is parseable but is out of range returns a map with `warnings`."
   [value has-references?]
 
-  (let [parsed-value (wtt/parse-token-value value)
+  (let [parsed-value (cft/parse-token-value value)
         out-of-scope (not (<= 0 (:value parsed-value) 1))
         references (seq (ctob/find-token-value-references value))]
     (cond
@@ -99,7 +104,7 @@
   If the `value` is parseable but is out of range returns a map with `warnings`."
   [value has-references?]
 
-  (let [parsed-value (wtt/parse-token-value value)
+  (let [parsed-value (cft/parse-token-value value)
         out-of-scope (< (:value parsed-value) 0)
         references (seq (ctob/find-token-value-references value))]
     (cond
@@ -192,9 +197,11 @@
     config)
 
   (build-dictionary [_]
-    (let [config' (clj->js config)]
+    (let [platform "json"
+          config' (clj->js config)]
       (-> (sd. config')
-          (.buildAllPlatforms "json")
+          (.buildAllPlatforms platform)
+          (p/then #(.getPlatformTokens ^js % platform))
           (p/then #(.-allTokens ^js %))))))
 
 (defn resolve-tokens-tree+
@@ -240,7 +247,21 @@
 
 ;; === Import
 
-(defn reference-errors
+(defn- decode-single-set-json
+  "Decodes parsed json containing single token set and converts to library"
+  [this set-name tokens]
+  (assert (map? tokens) "expected a map data structure for `data`")
+
+  (ctob/add-set this (ctob/make-token-set :name (ctob/normalize-set-name set-name)
+                                          :tokens (ctob/flatten-nested-tokens-json tokens ""))))
+
+(defn- decode-single-set-legacy-json
+  "Decodes parsed legacy json containing single token set and converts to library"
+  [this set-name tokens]
+  (assert (map? tokens) "expected a map data structure for `data`")
+  (decode-single-set-json this set-name (ctob/legacy-nodes->dtcg-nodes tokens)))
+
+(defn- reference-errors
   "Extracts reference errors from StyleDictionary."
   [err]
   (let [[header-1 header-2 & errors] (str/split err "\n")]
@@ -249,6 +270,16 @@
            (= header-2 "Reference Errors:"))
       errors)))
 
+(defn name-error
+  "Extracts name error out of malli schema error during import."
+  [err]
+  (let [schema-error (some-> (ex-data err)
+                             (get-in [:app.common.schema/explain :errors])
+                             (first))
+        name-error? (= (:in schema-error) [:name])]
+    (when name-error?
+      (wte/error-ex-info :error.import/invalid-token-name (:value schema-error) err))))
+
 (defn process-json-stream
   ([data-stream]
    (process-json-stream nil data-stream))
@@ -267,11 +298,11 @@
                         (cond
                           (and single-set?
                                (= :json-format/legacy json-format))
-                          (ctob/decode-single-set-legacy-json (ctob/ensure-tokens-lib nil) file-name json-data)
+                          (decode-single-set-legacy-json (ctob/ensure-tokens-lib nil) file-name json-data)
 
                           (and single-set?
                                (= :json-format/dtcg json-format))
-                          (ctob/decode-single-set-json (ctob/ensure-tokens-lib nil) file-name json-data)
+                          (decode-single-set-json (ctob/ensure-tokens-lib nil) file-name json-data)
 
                           (= :json-format/legacy json-format)
                           (ctob/decode-legacy-json (ctob/ensure-tokens-lib nil) json-data)
@@ -280,7 +311,9 @@
                           (ctob/decode-dtcg-json (ctob/ensure-tokens-lib nil) json-data))
 
                         (catch js/Error e
-                          (throw (wte/error-ex-info :error.import/invalid-json-data json-data e)))))))
+                          (let [err (or (name-error e)
+                                        (wte/error-ex-info :error.import/invalid-json-data json-data e))]
+                            (throw err)))))))
           (rx/mapcat (fn [tokens-lib]
                        (try
                          (-> (ctob/get-all-tokens tokens-lib)
@@ -295,17 +328,6 @@
                          (catch js/Error e
                            (p/rejected (wte/error-ex-info :error.import/style-dictionary-unknown-error "" e))))))))))
 
-;; === Errors
-
-(defn humanize-errors [{:keys [errors] :as token}]
-  (->> (map (fn [err]
-              (case (:error/code err)
-                ;; TODO: This needs translations
-                :error.style-dictionary/missing-reference (tr "workspace.token.token-not-resolved" (:error/value err))
-                nil))
-            errors)
-       (str/join "\n")))
-
 ;; === Hooks
 
 (defonce !tokens-cache (atom nil))

frontend/src/app/main/data/tinycolor.cljs

@@ -1,4 +1,10 @@
-(ns app.main.ui.workspace.tokens.tinycolor
+;; 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.main.data.tinycolor
   "Bindings for tinycolor2 which supports a wide range of css compatible colors.
 
   This library was chosen as it is already used by StyleDictionary,
@@ -32,17 +38,24 @@
     (let [tc (tinycolor color-str)]
       (str/starts-with? (.getFormat tc) "hex"))))
 
-(defn ->string [^js tc]
-  (.toString tc))
+(defn ->string
+  "Stringify `tc` to `format`, uses `hex` as per default."
+  [^js tc format]
+  (let [format' (case format
+                  ;; Tinycolor `.toString` doesnt support the `a` suffix it gives you via `.getFormat`
+                  "rgba" "rgb"
+                  "hsva" "hsv"
+                  ;; Keep these formats
+                  "rgb"  "rgb"
+                  "hsv"  "hsv"
+                  ;; Fall back to hex as the default
+                  "hex")]
+    (.toString tc format')))
 
 (defn ->hex-string [^js tc]
   (assert (tinycolor? tc))
   (.toHexString tc))
 
-(defn ->rgba-string [^js tc]
-  (assert (tinycolor? tc))
-  (.toRgbString tc))
-
 (defn color-format [^js tc]
   (assert (tinycolor? tc))
   (.getFormat tc))

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

@@ -13,6 +13,7 @@
    [app.common.features :as cfeat]
    [app.common.files.changes-builder :as pcb]
    [app.common.files.helpers :as cfh]
+   [app.common.files.variant :as cfv]
    [app.common.geom.align :as gal]
    [app.common.geom.point :as gpt]
    [app.common.geom.proportions :as gpp]
@@ -25,7 +26,7 @@
    [app.common.schema :as sm]
    [app.common.text :as txt]
    [app.common.transit :as t]
-   [app.common.types.component :as ctk]
+   [app.common.types.component :as ctc]
    [app.common.types.components-list :as ctkl]
    [app.common.types.container :as ctn]
    [app.common.types.file :as ctf]
@@ -75,6 +76,7 @@
    [app.main.data.workspace.thumbnails :as dwth]
    [app.main.data.workspace.transforms :as dwt]
    [app.main.data.workspace.undo :as dwu]
+   [app.main.data.workspace.variants :as dwva]
    [app.main.data.workspace.viewport :as dwv]
    [app.main.data.workspace.zoom :as dwz]
    [app.main.errors]
@@ -85,6 +87,7 @@
    [app.main.streams :as ms]
    [app.main.worker :as uw]
    [app.render-wasm :as wasm]
+   [app.render-wasm.api :as api]
    [app.util.code-gen.style-css :as css]
    [app.util.dom :as dom]
    [app.util.globals :as ug]
@@ -393,6 +396,13 @@
                    (rx/filter dch/commit?)
                    (rx/map deref)
                    (rx/mapcat (fn [{:keys [save-undo? undo-changes redo-changes undo-group tags stack-undo?]}]
+                                (when render-wasm?
+                                  (let [added (->> redo-changes
+                                                   (filter #(= (:type %) :add-obj))
+                                                   (map :obj))]
+                                    (doseq [shape added]
+                                      (api/process-object shape))))
+
                                 (if (and save-undo? (seq undo-changes))
                                   (let [entry {:undo-changes undo-changes
                                                :redo-changes redo-changes
@@ -571,7 +581,7 @@
             name               (cfh/generate-unique-name base-name unames :suffix-fn suffix-fn)
             objects            (update-vals (:objects page) #(dissoc % :use-for-thumbnail))
 
-            main-instances-ids (set (keep #(when (ctk/main-instance? (val %)) (key %)) objects))
+            main-instances-ids (set (keep #(when (ctc/main-instance? (val %)) (key %)) objects))
             ids-to-remove      (set (apply concat (map #(cfh/get-children-ids objects %) main-instances-ids)))
 
             add-component-copy
@@ -582,7 +592,6 @@
                                                  component
                                                  fdata
                                                  (gpt/point (:x shape) (:y shape))
-                                                 true
                                                  {:keep-ids? true :force-frame-id (:frame-id shape)})
                     children (into {} (map (fn [shape] [(:id shape) shape]) new-shapes))
                     objs (assoc objs id new-shape)]
@@ -698,7 +707,7 @@
 (defn rename-file
   [id name]
   {:pre [(uuid? id) (string? name)]}
-  (let [name (str/prune name 200)]
+  (let [name (dm/truncate name 200)]
     (ptk/reify ::rename-file
       IDeref
       (-deref [_]
@@ -788,27 +797,36 @@
   ([] (end-rename-shape nil nil))
   ([shape-id name]
    (ptk/reify ::end-rename-shape
+     ptk/UpdateEvent
+     (update [_ state]
+       ;; Remove rename state from workspace local state
+       (update state :workspace-local dissoc :shape-for-rename))
      ptk/WatchEvent
      (watch [_ state _]
        (when-let [shape-id (d/nilv shape-id (dm/get-in state [:workspace-local :shape-for-rename]))]
-         (let [shape (dsh/lookup-shape state shape-id)
-               name        (str/trim name)
-               clean-name  (cfh/clean-path name)
-               valid?      (and (not (str/ends-with? name "/"))
-                                (string? clean-name)
-                                (not (str/blank? clean-name)))]
-           (rx/concat
-            ;; Remove rename state from workspace local state
-            (rx/of #(update % :workspace-local dissoc :shape-for-rename))
+         (let [shape        (dsh/lookup-shape state shape-id)
+               name         (str/trim name)
+               clean-name   (cfh/clean-path name)
+               valid?       (and (not (str/ends-with? name "/"))
+                                 (string? clean-name)
+                                 (not (str/blank? clean-name)))
+               component-id (:component-id shape)
+               undo-id (js/Symbol)]
 
-            ;; Rename the shape if string is not empty/blank
-            (when valid?
-              (rx/of (update-shape shape-id {:name clean-name})))
 
-            ;; Update the component in case if shape is a main instance
-            (when (and valid? (:main-instance shape))
-              (when-let [component-id (:component-id shape)]
-                (rx/of (dwl/rename-component component-id clean-name)))))))))))
+           (when valid?
+             (if (ctc/is-variant-container? shape)
+               ;; Rename the full variant when it is a variant container
+               (rx/of (dwva/rename-variant shape-id clean-name))
+               (rx/of
+                (dwu/start-undo-transaction undo-id)
+                ;; Rename the shape if string is not empty/blank
+                (update-shape shape-id {:name clean-name})
+
+                ;; Update the component in case shape is a main instance
+                (when (and (some? component-id) (ctc/main-instance? shape))
+                  (dwl/rename-component component-id clean-name))
+                (dwu/commit-undo-transaction undo-id))))))))))
 
 ;; --- Update Selected Shapes attrs
 
@@ -1200,22 +1218,26 @@
   (ptk/reify ::show-component-in-assets
     ptk/WatchEvent
     (watch [_ state _]
-      (let [file-id (:current-file-id state)
-            fdata   (dsh/lookup-file-data state file-id)
-            cpath   (dm/get-in fdata [:components component-id :path])
-            cpath   (cfh/split-path cpath)
-            paths   (map (fn [i] (cfh/join-path (take (inc i) cpath)))
-                         (range (count cpath)))]
+      (let [file-id   (:current-file-id state)
+            fdata     (dsh/lookup-file-data state file-id)
+            component (cfv/get-primary-component fdata component-id)
+            cpath     (:path component)
+            cpath     (cfh/split-path cpath)
+            paths     (map (fn [i] (cfh/join-path (take (inc i) cpath)))
+                           (range (count cpath)))]
         (rx/concat
          (rx/from (map #(set-assets-group-open file-id :components % true) paths))
          (rx/of (dcm/go-to-workspace :layout :assets)
                 (set-assets-section-open file-id :library true)
                 (set-assets-section-open file-id :components true)
-                (select-single-asset file-id component-id :components)))))
+                (select-single-asset file-id (:id component) :components)))))
 
     ptk/EffectEvent
-    (effect [_ _ _]
-      (let [wrapper-id (str "component-shape-id-" component-id)]
+    (effect [_ state _]
+      (let [file-id   (:current-file-id state)
+            fdata     (dsh/lookup-file-data state file-id)
+            component (cfv/get-primary-component fdata component-id)
+            wrapper-id (str "component-shape-id-" (:id component))]
         (tm/schedule-on-idle #(dom/scroll-into-view-if-needed! (dom/get-element wrapper-id)))))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -1352,15 +1374,31 @@
                                (assoc obj ::images images))))
                 (rx/of obj))))
 
+          (collect-variants [state shape]
+            (let [page-id (:current-page-id state)
+                  data    (dsh/lookup-file-data state)
+                  objects (-> (dsh/get-page data page-id)
+                              (get :objects))
+
+                  components (cfv/find-variant-components data objects (:id shape))]
+              (into {} (map (juxt :id :variant-properties) components))))
+
+
           ;; Collects all the items together and split images into a
           ;; separated data structure for a more easy paste process.
-          (collect-data [result {:keys [id ::images] :as item}]
+          ;; Also collects the variant properties of the copied variants
+          (collect-data [state result {:keys [id ::images] :as item}]
             (cond-> result
               :always
               (update :objects assoc id (dissoc item ::images))
 
               (some? images)
-              (update :images into images)))
+              (update :images into images)
+
+              (ctc/is-variant-container? item)
+              (update :variant-properties merge (collect-variants state item))))
+
+
 
           (maybe-translate [shape objects parent-frame-id]
             (if (= parent-frame-id uuid/zero)
@@ -1382,7 +1420,7 @@
                                heads))))
 
           (advance-copy [file libraries page objects shape]
-            (if (and (ctk/instance-head? shape) (not (ctk/main-instance? shape)))
+            (if (and (ctc/instance-head? shape) (not (ctc/main-instance? shape)))
               (let [level-delta (ctn/get-nesting-level-delta (:objects page) shape uuid/zero)]
                 (if (pos? level-delta)
                   (reduce (partial advance-shape file libraries page level-delta)
@@ -1445,7 +1483,7 @@
                        (fn [resolve reject]
                          (->> (rx/from shapes)
                               (rx/merge-map (partial prepare-object objects frame-id))
-                              (rx/reduce collect-data initial)
+                              (rx/reduce (partial collect-data state) initial)
                               (rx/map (partial sort-selected state))
                               (rx/map (partial advance-copies state selected))
                               (rx/map #(t/encode-str % {:type :json-verbose}))
@@ -1460,7 +1498,7 @@
                 ;; https://caniuse.com/?search=ClipboardItem
                 (->> (rx/from shapes)
                      (rx/merge-map (partial prepare-object objects frame-id))
-                     (rx/reduce collect-data initial)
+                     (rx/reduce (partial collect-data state) initial)
                      (rx/map (partial sort-selected state))
                      (rx/map (partial advance-copies state selected))
                      (rx/map #(t/encode-str % {:type :json-verbose}))
@@ -2048,6 +2086,9 @@
 
               objects      (:objects pdata)
 
+              variant-props (:variant-properties pdata)
+
+
               position     (deref ms/mouse-position)
 
               ;; Calculate position for the pasted elements
@@ -2060,12 +2101,8 @@
               libraries    (dsh/lookup-libraries state)
               ldata        (dsh/lookup-file-data state file-id)
 
-              ;; full-libs    (assoc-in libraries [(:id ldata) :data] ldata)
-
-              full-libs    libraries
-
               [parent-id
-               frame-id]   (ctn/find-valid-parent-and-frame-ids candidate-parent-id page-objects (vals objects) true full-libs)
+               frame-id]   (ctn/find-valid-parent-and-frame-ids candidate-parent-id page-objects (vals objects) true libraries)
 
               index        (if (= candidate-parent-id parent-id)
                              index
@@ -2079,12 +2116,12 @@
 
               all-objects  (merge page-objects objects)
 
-
               drop-cell    (when (ctl/grid-layout? all-objects parent-id)
                              (gslg/get-drop-cell frame-id all-objects position))
 
               changes      (-> (pcb/empty-changes it)
-                               (cll/generate-duplicate-changes all-objects page selected delta libraries ldata file-id)
+                               (cll/generate-duplicate-changes all-objects page selected delta
+                                                               libraries ldata file-id {:variant-props variant-props})
                                (pcb/amend-changes (partial process-rchange media-idx))
                                (pcb/amend-changes (partial change-add-obj-index objects selected index)))
 
@@ -2113,7 +2150,7 @@
               undo-id      (js/Symbol)]
 
           (rx/concat
-           (->> (filter ctk/instance-head? orig-shapes)
+           (->> (filter ctc/instance-head? orig-shapes)
                 (map (fn [{:keys [component-file]}]
                        (ptk/event ::ev/event
                                   {::ev/name "use-library-component"
@@ -2428,7 +2465,7 @@
       (let [objects (dsh/lookup-page-objects state)
             copies  (->> objects
                          vals
-                         (filter #(and (ctk/instance-head? %) (not (ctk/main-instance? %)))))
+                         (filter #(and (ctc/instance-head? %) (not (ctc/main-instance? %)))))
 
             copies-no-ref (filter #(not (:shape-ref %)) copies)
             find-childs-no-ref (fn [acc-map item]

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

@@ -42,7 +42,6 @@
    [app.main.data.workspace.transforms :as dwtr]
    [app.main.data.workspace.undo :as dwu]
    [app.main.data.workspace.zoom :as dwz]
-   [app.main.features :as features]
    [app.main.features.pointer-map :as fpmap]
    [app.main.refs :as refs]
    [app.main.repo :as rp]
@@ -395,9 +394,9 @@
 
 (defn- add-component2
   "This is the second step of the component creation."
-  ([selected components-v2]
-   (add-component2 nil selected components-v2))
-  ([id-ref selected components-v2]
+  ([selected]
+   (add-component2 nil selected))
+  ([id-ref selected]
    (ptk/reify ::add-component2
      ev/Event
      (-data [_]
@@ -413,8 +412,7 @@
              parents  (into #{} (map :parent-id) shapes)]
          (when-not (empty? shapes)
            (let [[root component-id changes]
-                 (cll/generate-add-component (pcb/empty-changes it) shapes objects page-id file-id components-v2
-                                             dwg/prepare-create-group
+                 (cll/generate-add-component (pcb/empty-changes it) shapes objects page-id file-id
                                              cfsh/prepare-create-artboard-from-selection)]
              (when id-ref
                (reset! id-ref component-id))
@@ -439,12 +437,11 @@
              selected           (->> (d/nilv ids (dsh/lookup-selected state))
                                      (cfh/clean-loops objects))
              selected-objects   (map #(get objects %) selected)
-             components-v2      (features/active-feature? state "components/v2")
              ;; We don't want to change the structure of component copies
              can-make-component (every? true? (map #(ctn/valid-shape-for-component? objects %) selected-objects))]
 
          (when can-make-component
-           (rx/of (add-component2 id-ref selected components-v2))))))))
+           (rx/of (add-component2 id-ref selected))))))))
 
 (defn add-multiple-components
   "Add several new components to current file library, from the currently selected shapes."
@@ -452,15 +449,14 @@
   (ptk/reify ::add-multiple-components
     ptk/WatchEvent
     (watch [_ state _]
-      (let [components-v2      (features/active-feature? state "components/v2")
-            objects            (dsh/lookup-page-objects state)
+      (let [objects            (dsh/lookup-page-objects state)
             selected           (->> (dsh/lookup-selected state)
                                     (cfh/clean-loops objects))
             selected-objects   (map #(get objects %) selected)
             ;; We don't want to change the structure of component copies
             can-make-component (every? true? (map #(ctn/valid-shape-for-component? objects %) selected-objects))
             added-components   (map (fn [id]
-                                      (with-meta (add-component2 [id] components-v2)
+                                      (with-meta (add-component2 [id])
                                         {:multiple true}))
                                     selected)
             undo-id (js/Symbol)]
@@ -489,7 +485,7 @@
           (rx/empty)
           (let [data    (dsh/lookup-file-data state)
                 changes (-> (pcb/empty-changes it)
-                            (cll/generate-rename-component id new-name data true))]
+                            (cll/generate-rename-component id new-name data))]
             (rx/of (dch/commit-changes changes))))))))
 
 (defn rename-component-and-main-instance
@@ -512,7 +508,6 @@
             (rx/concat
              (rx/of (rename-component component-id clean-name))
 
-             ;; NOTE: only when components-v2 is enabled
              (when (and shape-id page-id)
                (rx/of (dwsh/update-shapes [shape-id] #(assoc % :name clean-name) {:page-id page-id :stack-undo? true}))))))))))
 
@@ -526,11 +521,10 @@
      (watch [it state _]
        (let [libraries          (dsh/lookup-libraries state)
              library            (get libraries library-id)
-             components-v2      (features/active-feature? state "components/v2")
 
              [main-instance changes]
              (-> (pcb/empty-changes it nil)
-                 (cll/generate-duplicate-component library component-id new-component-id components-v2))]
+                 (cll/generate-duplicate-component library component-id new-component-id))]
          (rx/of
           (ptk/data-event :layout/update {:ids [(:id main-instance)]})
           (dch/commit-changes changes)))))))
@@ -560,8 +554,7 @@
             [all-parents changes]
             (-> (pcb/empty-changes it page-id)
                 ;; Deleting main root triggers component delete
-                (cls/generate-delete-shapes fdata page objects #{root-id} {:components-v2 true
-                                                                           :undo-group undo-group
+                (cls/generate-delete-shapes fdata page objects #{root-id} {:undo-group undo-group
                                                                            :undo-id undo-id}))]
         (rx/of
          (dwu/start-undo-transaction undo-id)
@@ -588,11 +581,14 @@
             changes (-> (pcb/empty-changes it)
                         (cll/generate-restore-component ldata component-id library-id page objects))
 
+            page-id
+            (->> changes :redo-changes (keep :page-id) first)
+
             frames
             (->> changes :redo-changes (keep :frame-id))]
 
         (rx/of (dch/commit-changes changes)
-               (ptk/data-event :layout/update {:ids frames}))))))
+               (ptk/data-event :layout/update {:page-id page-id :ids frames}))))))
 
 
 (defn restore-components
@@ -832,7 +828,7 @@
 
             changes
             (-> (pcb/empty-changes it)
-                (cll/generate-reset-component file libraries container id true))]
+                (cll/generate-reset-component file libraries container id))]
 
         (log/debug :msg "RESET-COMPONENT finished" :js/rchanges (log-changes
                                                                  (:redo-changes changes)
@@ -884,7 +880,7 @@
                  (-> (pcb/empty-changes it)
                      (pcb/set-undo-group undo-group)
                      (pcb/with-container container)
-                     (cll/generate-sync-shape-inverse fdata libraries container id true))
+                     (cll/generate-sync-shape-inverse fdata libraries container id))
 
                  ldata     (->> (:component-file shape)
                                 (dsh/lookup-file-data state))
@@ -1274,10 +1270,8 @@
   []
   (ptk/reify ::watch-component-changes
     ptk/WatchEvent
-    (watch [_ state stream]
-      (let [components-v2? (features/active-feature? state "components/v2")
-
-            stopper-s
+    (watch [_ _ stream]
+      (let [stopper-s
             (->> stream
                  (rx/filter #(or (= ::dw/finalize-page (ptk/type %))
                                  (= ::watch-component-changes (ptk/type %)))))
@@ -1340,7 +1334,7 @@
                  (rx/debounce 5000)
                  (rx/tap #(log/trc :hint "buffer initialized")))]
 
-        (when (and components-v2? (contains? cf/flags :component-thumbnails))
+        (when (contains? cf/flags :component-thumbnails)
           (->> (rx/merge
                 changes-s
 

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

@@ -24,7 +24,6 @@
    [app.main.data.helpers :as dsh]
    [app.main.data.media :as dmm]
    [app.main.data.notifications :as ntf]
-   [app.main.data.workspace.libraries :as dwl]
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.data.workspace.svg-upload :as svg]
    [app.main.repo :as rp]
@@ -235,16 +234,6 @@
             (rx/catch #(handle-media-error % on-error))
             (rx/finalize #(st/emit! (ntf/hide :tag :media-loading))))))))
 
-;; Deprecated in components-v2
-(defn upload-media-asset
-  [params]
-  (let [params (assoc params
-                      :force-media true
-                      :local? false
-                      :on-image #(st/emit! (dwl/add-media %))
-                      :on-svg #(st/emit! (dwl/add-media %)))]
-    (process-media-objects params)))
-
 (defn upload-media-workspace
   [{:keys [position file-id] :as params}]
   (let [params (assoc params
@@ -378,7 +367,7 @@
 
 (defn- add-shapes-and-component
   [it file-data page name [shape children]]
-  (let [[component-shape component-shapes updated-shapes]
+  (let [[component-shape updated-shapes]
         (ctn/convert-shape-in-component shape children (:id file-data))
 
         changes (-> (pcb/empty-changes it)
@@ -389,7 +378,6 @@
                     (pcb/add-component (:id component-shape)
                                        ""
                                        name
-                                       component-shapes
                                        updated-shapes
                                        (:id shape)
                                        (:id page)))]

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

@@ -30,6 +30,7 @@
    [app.main.data.workspace.undo :as dwu]
    [app.main.features :as features]
    [app.render-wasm.api :as wasm.api]
+   [app.render-wasm.shape :as wasm.shape]
    [beicon.v2.core :as rx]
    [potok.v2.core :as ptk]))
 
@@ -162,17 +163,46 @@
       change-to-fixed?
       (assoc :grow-type :fixed))))
 
+(defn- set-wasm-props!
+  [objects prev-wasm-props wasm-props]
+  (let [;; Set old value for previous properties
+        clean-props
+        (->> prev-wasm-props
+             (map (fn [[id {:keys [property] :as change}]]
+                    (let [shape (get objects id)]
+                      [id (assoc change :value (get shape property))]))))
+
+        wasm-props
+        (concat clean-props wasm-props)
+
+        wasm-props
+        (-> (group-by first wasm-props)
+            (update-vals #(map second %)))]
+
+    ;; Props are grouped by id and then assoc to the shape the new value
+    (doseq [[id properties] wasm-props]
+      (let [shape
+            (->> properties
+                 (reduce
+                  (fn [shape {:keys [property value]}]
+                    (assoc shape property value))
+                  (get objects id)))]
+
+        ;; With the new values to the shape change multi props
+        (wasm.shape/set-wasm-multi-attrs! shape (->> properties (map :property)))))))
+
 (defn clear-local-transform []
   (ptk/reify ::clear-local-transform
     ptk/EffectEvent
     (effect [_ state _]
       (when (features/active-feature? state "render-wasm/v1")
-        (wasm.api/set-modifiers nil)))
+        (wasm.api/clean-modifiers)
+        (set-wasm-props! (dsh/lookup-page-objects state) (:wasm-props state) [])))
 
     ptk/UpdateEvent
     (update [_ state]
       (-> state
-          (dissoc :workspace-modifiers)
+          (dissoc :workspace-modifiers :wasm-props :prev-wasm-props)
           (dissoc :app.main.data.workspace.transforms/current-move-selected)))))
 
 (defn create-modif-tree
@@ -417,6 +447,57 @@
              modifiers (calculate-modifiers state ignore-constraints ignore-snap-pixel modif-tree page-id params)]
          (assoc state :workspace-modifiers modifiers))))))
 
+(defn- parse-structure-modifiers
+  [modif-tree]
+  (into
+   []
+   (mapcat
+    (fn [[parent-id data]]
+      (when (ctm/has-structure? (:modifiers data))
+        (->> data
+             :modifiers
+             :structure-parent
+             (mapcat
+              (fn [modifier]
+                (case (:type modifier)
+                  :remove-children
+                  (->> (:value modifier)
+                       (map (fn [child-id]
+                              {:type :remove-children
+                               :parent parent-id
+                               :id child-id
+                               :index 0})))
+
+                  :add-children
+                  (->> (:value modifier)
+                       (map (fn [child-id]
+                              {:type :add-children
+                               :parent parent-id
+                               :id child-id
+                               :index (:index modifier)})))
+                  nil)))))))
+   modif-tree))
+
+(defn- parse-geometry-modifiers
+  [modif-tree]
+  (into
+   []
+   (keep
+    (fn [[id data]]
+      (when (ctm/has-geometry? (:modifiers data))
+        {:id id
+         :transform (ctm/modifiers->transform (:modifiers data))})))
+   modif-tree))
+
+(defn- extract-property-changes
+  [modif-tree]
+  (->> modif-tree
+       (mapcat (fn [[id {:keys [modifiers]}]]
+                 (->> (:structure-parent modifiers)
+                      (map #(vector id %)))))
+       (filter (fn [[_ {:keys [type]}]]
+                 (= type :change-property)))))
+
 (defn set-wasm-modifiers
   ([modif-tree]
    (set-wasm-modifiers modif-tree false))
@@ -429,17 +510,31 @@
 
   ([modif-tree _ignore-constraints _ignore-snap-pixel _params]
    (ptk/reify ::set-wasm-modifiers
-     ptk/EffectEvent
-     (effect [_ _ _]
-       (let [entries
-             (->> modif-tree
-                  (mapv (fn [[id data]]
-                          {:id id
-                           :transform (ctm/modifiers->transform (:modifiers data))})))
+     ptk/UpdateEvent
+     (update [_ state]
+       (let [property-changes
+             (extract-property-changes modif-tree)]
 
-             modifiers-new
-             (wasm.api/propagate-modifiers entries)]
-         (wasm.api/set-modifiers modifiers-new))))))
+         (-> state
+             (assoc :prev-wasm-props (:wasm-props state))
+             (assoc :wasm-props property-changes))))
+
+     ptk/EffectEvent
+     (effect [_ state _]
+       (wasm.api/clean-modifiers)
+
+       (let [prev-wasm-props (:prev-wasm-props state)
+             wasm-props (:wasm-props state)
+             objects (dsh/lookup-page-objects state)]
+
+         (set-wasm-props! objects prev-wasm-props wasm-props)
+
+         (let [structure-entries (parse-structure-modifiers modif-tree)]
+           (wasm.api/set-structure-modifiers structure-entries)
+           (let [geometry-entries (parse-geometry-modifiers modif-tree)
+                 modifiers-new
+                 (wasm.api/propagate-modifiers geometry-entries)]
+             (wasm.api/set-modifiers modifiers-new))))))))
 
 (defn set-selrect-transform
   [modifiers]
@@ -654,4 +749,3 @@
           (if undo-transation?
             (rx/of (dwu/commit-undo-transaction undo-id))
             (rx/empty))))))))
-

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

@@ -97,15 +97,17 @@
 ;; Never call this directly but through the data-event `:layout/update`
 ;; Otherwise a lot of cycle dependencies could be generated
 (defn- update-layout-positions
-  [{:keys [ids undo-group]}]
+  [{:keys [page-id ids undo-group]}]
   (ptk/reify ::update-layout-positions
     ptk/WatchEvent
     (watch [_ state _]
-      (let [objects (dsh/lookup-page-objects state)
+      (let [page-id (or page-id (:current-page-id state))
+            objects (dsh/lookup-page-objects state page-id)
             ids (->> ids (filter #(contains? objects %)))]
         (if (d/not-empty? ids)
           (let [modif-tree (dwm/create-modif-tree ids (ctm/reflow-modifiers))]
-            (rx/of (dwm/apply-modifiers {:modifiers modif-tree
+            (rx/of (dwm/apply-modifiers {:page-id page-id
+                                         :modifiers modif-tree
                                          :stack-undo? true
                                          :undo-group undo-group})))
           (rx/empty))))))
@@ -127,8 +129,9 @@
              (rx/filter #(d/not-empty? %))
              (rx/map
               (fn [data]
-                (let [ids (reduce #(into %1 (:ids %2)) #{} data)]
-                  (update-layout-positions {:ids ids}))))
+                (let [page-id (->> data (keep :page-id) first)
+                      ids (reduce #(into %1 (:ids %2)) #{} data)]
+                  (update-layout-positions {:page-id page-id :ids ids}))))
              (rx/take-until stopper))))))
 
 (defn finalize-shape-layout
@@ -242,12 +245,13 @@
             selected-shapes  (map (d/getf objects) selected)
             single?          (= (count selected-shapes) 1)
             is-frame?        (= :frame (:type (first selected-shapes)))
-            is-variant-cont? (ctc/is-variant-container? (first selected-shapes))
+            has-layout?      (ctl/any-layout? (first selected-shapes))
+
             undo-id          (js/Symbol)]
 
         (rx/of
          (dwu/start-undo-transaction undo-id)
-         (if (and single? is-frame? (not is-variant-cont?))
+         (if (and single? is-frame? (not has-layout?))
            (create-layout-from-id (first selected) type :from-frame? true)
            (create-layout-from-selection type))
          (dwu/commit-undo-transaction undo-id))))))

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

@@ -24,7 +24,6 @@
    [app.main.data.workspace.edition :as dwe]
    [app.main.data.workspace.selection :as dws]
    [app.main.data.workspace.undo :as dwu]
-   [app.main.features :as features]
    [beicon.v2.core :as rx]
    [potok.v2.core :as ptk]))
 
@@ -171,12 +170,10 @@
              page          (dsh/get-page fdata page-id)
              objects       (:objects page)
 
-             components-v2 (features/active-feature? state "components/v2")
              undo-id (or (:undo-id options) (js/Symbol))
              [all-parents changes] (-> (pcb/empty-changes it (:id page))
                                        (cls/generate-delete-shapes fdata page objects ids
-                                                                   {:components-v2 components-v2
-                                                                    :ignore-touched (:component-swap options)
+                                                                   {:ignore-touched (:component-swap options)
                                                                     :undo-group (:undo-group options)
                                                                     :undo-id undo-id}))]
 
@@ -237,6 +234,8 @@
   ([id parent-id index]
    (create-artboard-from-selection id parent-id index nil))
   ([id parent-id index name]
+   (create-artboard-from-selection id parent-id index name nil))
+  ([id parent-id index name delta]
    (ptk/reify ::create-artboard-from-selection
      ptk/WatchEvent
      (watch [it state _]
@@ -260,7 +259,9 @@
                                                           selected
                                                           index
                                                           name
-                                                          false)
+                                                          false
+                                                          nil
+                                                          delta)
 
              undo-id  (js/Symbol)]
 

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

@@ -464,11 +464,11 @@
                           :subsections [:panels]
                           :fn #(st/emit! (dcm/go-to-workspace :layout :assets))}
 
-   :toggle-history       {:tooltip (ds/alt "H")
-                          :command (ds/a-mod "h")
+   :toggle-history       {:tooltip (ds/meta-alt "H")
+                          :command (ds/ca-mod "h")
                           :subsections [:panels]
                           :fn #(emit-when-no-readonly
-                                (dcm/go-to-workspace :layout :document-history))}
+                                (dw/toggle-layout-flag :document-history))}
 
    :toggle-colorpalette  {:tooltip (ds/alt "P")
                           :command (ds/a-mod "p")

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

@@ -10,6 +10,7 @@
    [app.common.files.helpers :as cfh]
    [app.common.logging :as l]
    [app.common.thumbnails :as thc]
+   [app.common.types.component :as ctc]
    [app.common.uuid :as uuid]
    [app.main.data.changes :as dch]
    [app.main.data.helpers :as dsh]
@@ -184,11 +185,11 @@
                      (rx/filter (ptk/type? ::clear-thumbnail))
                      (rx/filter #(= (deref %) object-id))))))))))
 
-(defn- extract-root-frame-changes
+(defn- extract-frame-changes
   "Process a changes set in a commit to extract the frames that are changing"
   [page-id [event [old-data new-data]]]
-  (let [changes (:changes event)
 
+  (let [changes (:changes event)
         lookup-data-objects
         (fn [data page-id]
           (dm/get-in data [:pages-index page-id :objects]))
@@ -205,21 +206,28 @@
 
         get-frame-ids
         (fn get-frame-ids [id]
-          (let [old-objects  (lookup-data-objects old-data page-id)
-                new-objects  (lookup-data-objects new-data page-id)
+          (let [old-objects     (lookup-data-objects old-data page-id)
+                new-objects     (lookup-data-objects new-data page-id)
 
-                new-shape    (get new-objects id)
-                old-shape    (get old-objects id)
+                new-shape       (get new-objects id)
+                old-shape       (get old-objects id)
 
-                old-frame-id (if (cfh/frame-shape? old-shape) id (:frame-id old-shape))
-                new-frame-id (if (cfh/frame-shape? new-shape) id (:frame-id new-shape))]
+                old-frame-id    (if (cfh/frame-shape? old-shape) id (:frame-id old-shape))
+                new-frame-id    (if (cfh/frame-shape? new-shape) id (:frame-id new-shape))
+
+                root-frame-old? (cfh/root-frame? old-objects old-frame-id)
+                root-frame-new? (cfh/root-frame? new-objects new-frame-id)
+                instance-root?  (ctc/instance-root? new-shape)]
 
             (cond-> #{}
-              (cfh/root-frame? old-objects old-frame-id)
-              (conj old-frame-id)
+              root-frame-old?
+              (conj ["frame" old-frame-id])
 
-              (cfh/root-frame? new-objects new-frame-id)
-              (conj new-frame-id)
+              root-frame-new?
+              (conj ["frame" new-frame-id])
+
+              instance-root?
+              (conj ["component" id])
 
               (and (uuid? (:frame-id old-shape))
                    (not= uuid/zero (:frame-id old-shape)))
@@ -266,7 +274,7 @@
                  (rx/map deref)
                  (rx/observe-on :async)
                  (rx/with-latest-from workspace-data-s)
-                 (rx/merge-map (partial extract-root-frame-changes page-id))
+                 (rx/merge-map (partial extract-frame-changes page-id))
                  (rx/tap #(l/trc :hint "inconming change" :origin "all" :frame-id (dm/str %)))
                  (rx/share))
 
@@ -281,15 +289,15 @@
               ;; and interrupt any ongoing update-thumbnail process
               ;; related to current frame-id
               (->> all-commits-s
-                   (rx/mapcat (fn [frame-id]
-                                (rx/of (clear-thumbnail file-id page-id frame-id "frame")
-                                       (clear-thumbnail file-id page-id frame-id "component")))))
+                   (rx/mapcat (fn [[tag frame-id]]
+                                (rx/of (clear-thumbnail file-id page-id frame-id tag)))))
 
               ;; Generate thumbnails in batches, once user becomes
               ;; inactive for some instant.
               (->> all-commits-s
                    (rx/buffer-until notifier-s)
                    (rx/mapcat #(into #{} %))
-                   (rx/map #(update-thumbnail file-id page-id % "frame" "watch-state-changes"))))
+                   (rx/map (fn [[tag frame-id]]
+                             (update-thumbnail file-id page-id frame-id tag "watch-state-changes")))))
 
              (rx/take-until stopper-s))))))

frontend/src/app/main/data/workspace/tokens/application.cljs

@@ -4,16 +4,19 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.workspace.tokens.changes
+(ns app.main.data.workspace.tokens.application
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.files.tokens :as cft]
    [app.common.types.shape.layout :as ctsl]
    [app.common.types.shape.radius :as ctsr]
    [app.common.types.token :as ctt]
    [app.common.types.tokens-lib :as ctob]
    [app.main.data.event :as ev]
    [app.main.data.helpers :as dsh]
+   [app.main.data.style-dictionary :as sd]
+   [app.main.data.tinycolor :as tinycolor]
    [app.main.data.workspace :as udw]
    [app.main.data.workspace.colors :as wdc]
    [app.main.data.workspace.shape-layout :as dwsl]
@@ -21,16 +24,13 @@
    [app.main.data.workspace.transforms :as dwt]
    [app.main.data.workspace.undo :as dwu]
    [app.main.store :as st]
-   [app.main.ui.workspace.tokens.style-dictionary :as sd]
-   [app.main.ui.workspace.tokens.tinycolor :as tinycolor]
-   [app.main.ui.workspace.tokens.token :as wtt]
    [beicon.v2.core :as rx]
    [clojure.set :as set]
    [potok.v2.core :as ptk]))
 
 (declare token-properties)
 
-;; Token Updates ---------------------------------------------------------------
+;; Events to apply / unapply tokens to shapes ------------------------------------------------------------
 
 (defn apply-token
   "Apply `attributes` that match `token` for `shape-ids`.
@@ -56,8 +56,8 @@
                                          (keys))
                                     [])
 
-                      resolved-value (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value])
-                      tokenized-attributes (wtt/attributes-map attributes token)]
+                      resolved-value (get-in resolved-tokens [(cft/token-identifier token) :resolved-value])
+                      tokenized-attributes (cft/attributes-map attributes token)]
                   (rx/of
                    (st/emit! (ptk/event ::ev/event {::ev/name "apply-tokens"}))
                    (dwu/start-undo-transaction undo-id)
@@ -80,7 +80,7 @@
     ptk/WatchEvent
     (watch [_ _ _]
       (rx/of
-       (let [remove-token #(when % (wtt/remove-attributes-for-token attributes token %))]
+       (let [remove-token #(when % (cft/remove-attributes-for-token attributes token %))]
          (dwsh/update-shapes
           shape-ids
           (fn [shape]
@@ -95,7 +95,7 @@
             (get token-properties (:type token))
 
             unapply-tokens?
-            (wtt/shapes-token-applied? token shapes (or all-attributes attributes))
+            (cft/shapes-token-applied? token shapes (or all-attributes attributes))
 
             shape-ids (map :id shapes)]
         (if unapply-tokens?
@@ -109,7 +109,9 @@
                          :shape-ids shape-ids
                          :on-update-shape on-update-shape})))))))
 
-;; Shape Updates ---------------------------------------------------------------
+;; Events to update the value of attributes with applied tokens ---------------------------------------------------------
+
+;; (note that dwsh/update-shapes function returns an event)
 
 (defn update-shape-radius-all
   ([value shape-ids attributes] (update-shape-radius-all value shape-ids attributes nil))
@@ -326,7 +328,7 @@
             (dwsl/update-layout-child shape-ids props {:ignore-touched true
                                                        :page-id page-id}))))))))
 
-;; Token Types -----------------------------------------------------------------
+;; Map token types to different properties used along the cokde ---------------------------------------------------------
 
 ;; FIXME: the values should be lazy evaluated, probably a function,
 ;; becasue on future we will need to translate that labels and that