🎉 Add 2.7 release slides (#6440)

🐛 Properly propagate export errors from worker to main thread

CHANGES.md

@@ -1,5 +1,49 @@
 # CHANGELOG
 
+## 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

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/libraries.cljc

@@ -15,6 +15,7 @@
    [app.common.geom.shapes :as gsh]
    [app.common.logging :as log]
    [app.common.logic.shapes :as cls]
+   [app.common.logic.variant-properties :as clvp]
    [app.common.spec :as us]
    [app.common.text :as txt]
    [app.common.types.color :as ctc]
@@ -29,6 +30,7 @@
    [app.common.types.shape.layout :as ctl]
    [app.common.types.token :as cto]
    [app.common.types.typography :as cty]
+   [app.common.types.variant :as ctv]
    [app.common.uuid :as uuid]
    [clojure.set :as set]
    [clojure.spec.alpha :as s]))
@@ -105,113 +107,99 @@
 (defn- duplicate-component
   "Clone the root shape of the component and all children. Generate new
   ids from all of them."
-  [component new-component-id library-data force-id]
-  (let [components-v2 (dm/get-in library-data [:options :components-v2])]
-    (if components-v2
-      (let [main-instance-page  (ctf/get-component-page library-data component)
-            main-instance-shape (ctf/get-component-root library-data component)
-            delta               (gpt/point (+ (:width main-instance-shape) 50) 0)
+  [component new-component-id library-data force-id delta variant-id]
+  (let [main-instance-page  (ctf/get-component-page library-data component)
+        main-instance-shape (ctf/get-component-root library-data component)
+        delta               (or delta (gpt/point (+ (:width main-instance-shape) 50) 0))
 
-            ids-map             (volatile! {})
-            inverted-ids-map    (volatile! {})
-            nested-main-heads   (volatile! #{})
+        ids-map             (volatile! {})
+        inverted-ids-map    (volatile! {})
+        nested-main-heads   (volatile! #{})
 
-            update-original-shape
-            (fn [original-shape new-shape]
+        update-original-shape
+        (fn [original-shape new-shape]
               ; Save some ids for later
-              (vswap! ids-map assoc (:id original-shape) (:id new-shape))
-              (vswap! inverted-ids-map assoc (:id new-shape) (:id original-shape))
-              (when (and (ctk/main-instance? original-shape)
-                         (not= (:component-id original-shape) (:id component)))
-                (vswap! nested-main-heads conj (:id original-shape)))
-              original-shape)
+          (vswap! ids-map assoc (:id original-shape) (:id new-shape))
+          (vswap! inverted-ids-map assoc (:id new-shape) (:id original-shape))
+          (when (and (ctk/main-instance? original-shape)
+                     (not= (:component-id original-shape) (:id component)))
+            (vswap! nested-main-heads conj (:id original-shape)))
+          original-shape)
 
-            update-new-shape
-            (fn [new-shape _]
-              (cond-> new-shape
-                ; Link the new main to the new component
-                (= (:component-id new-shape) (:id component))
-                (assoc :component-id new-component-id)
+        update-new-shape
+        (fn [new-shape _]
+          (cond-> new-shape
+            ; Link the new main to the new component
+            (= (:component-id new-shape) (:id component))
+            (assoc :component-id new-component-id)
 
-                :always
-                (gsh/move delta)))
+            ; If it is the instance root, add it the variant-id
+            (and (ctk/instance-root? new-shape) (some? variant-id))
+            (assoc :variant-id variant-id)
 
-            [new-instance-shape new-instance-shapes _]
-            (ctst/clone-shape main-instance-shape
-                              (:parent-id main-instance-shape)
-                              (:objects main-instance-page)
-                              :update-new-shape update-new-shape
-                              :update-original-shape update-original-shape
-                              :force-id force-id)
+            :always
+            (gsh/move delta)))
 
-            remap-frame
-            (fn [shape]
+        [new-instance-shape new-instance-shapes _]
+        (ctst/clone-shape main-instance-shape
+                          (:parent-id main-instance-shape)
+                          (:objects main-instance-page)
+                          :update-new-shape update-new-shape
+                          :update-original-shape update-original-shape
+                          :force-id force-id)
+        remap-frame
+        (fn [shape]
               ; Remap all frame-ids internal to the component to the new shapes
-              (update shape :frame-id
-                      #(get @ids-map % (:frame-id shape))))
+          (update shape :frame-id
+                  #(get @ids-map % (:frame-id shape))))
 
-            convert-nested-main
-            (fn [shape]
+        convert-nested-main
+        (fn [shape]
               ; If there is some nested main instance, convert it into a copy of
               ; main nested in the original component.
-              (let [origin-shape-id (get @inverted-ids-map (:id shape))
-                    objects         (:objects main-instance-page)
-                    parent-ids      (cfh/get-parent-ids-seq-with-self objects origin-shape-id)]
-                (cond-> shape
-                  (@nested-main-heads origin-shape-id)
-                  (dissoc :main-instance)
+          (let [origin-shape-id (get @inverted-ids-map (:id shape))
+                objects         (:objects main-instance-page)
+                parent-ids      (cfh/get-parent-ids-seq-with-self objects origin-shape-id)]
+            (cond-> shape
+              (@nested-main-heads origin-shape-id)
+              (dissoc :main-instance)
 
-                  (some @nested-main-heads parent-ids)
-                  (assoc :shape-ref origin-shape-id))))
+              (some @nested-main-heads parent-ids)
+              (assoc :shape-ref origin-shape-id))))
 
-            xf-shape (comp (map remap-frame)
-                           (map convert-nested-main))
+        xf-shape (comp (map remap-frame)
+                       (map convert-nested-main))
 
-            new-instance-shapes (into [] xf-shape new-instance-shapes)]
+        new-instance-shapes (into [] xf-shape new-instance-shapes)]
 
-        [nil nil new-instance-shape new-instance-shapes])
-
-      (let [component-root (d/seek #(nil? (:parent-id %)) (vals (:objects component)))
-
-            [new-component-shape new-component-shapes _]
-            (ctst/clone-shape component-root
-                              nil
-                              (get component :objects))]
-
-        [new-component-shape new-component-shapes nil nil]))))
+    [new-instance-shape new-instance-shapes]))
 
 (defn generate-duplicate-component
   "Create a new component copied from the one with the given id."
-  [changes library component-id new-component-id components-v2 & {:keys [new-shape-id apply-changes-local-library?]}]
+  [changes library component-id new-component-id & {:keys [new-shape-id apply-changes-local-library? delta new-variant-id page-id]}]
   (let [component          (ctkl/get-component (:data library) component-id)
         new-name           (:name component)
 
-        main-instance-page (when components-v2
-                             (ctf/get-component-page (:data library) component))
+        main-instance-page (ctf/get-component-page (:data library) component)
+        ;; Since variants, we can duplicate a component into another page
+        target-page-id     (or page-id (:id main-instance-page))
 
-        new-component-id   (when components-v2
-                             new-component-id)
-
-        [new-component-shape new-component-shapes  ; <- null in components-v2
-         new-main-instance-shape new-main-instance-shapes]
-        (duplicate-component component new-component-id (:data library) new-shape-id)]
+        [new-main-instance-shape new-main-instance-shapes]
+        (duplicate-component component new-component-id (:data library) new-shape-id delta new-variant-id)]
 
     [new-main-instance-shape
      (-> changes
-         (pcb/with-page main-instance-page)
+         (pcb/with-page-id target-page-id)
          (pcb/with-objects (:objects main-instance-page))
          (pcb/add-objects new-main-instance-shapes {:ignore-touched true})
-         (pcb/add-component (if components-v2
-                              new-component-id
-                              (:id new-component-shape))
+         (pcb/add-component new-component-id
                             (:path component)
                             new-name
-                            new-component-shapes
                             []
                             (:id new-main-instance-shape)
-                            (:id main-instance-page)
+                            target-page-id
                             (:annotation component)
-                            (:variant-id component)
+                            (or new-variant-id (:variant-id component))
                             (:variant-properties component)
                             {:apply-changes-local-library? apply-changes-local-library?})
          ;; Update grid layout if the new main instance is inside
@@ -228,23 +216,34 @@
   "Generate changes to create a new instance from a component."
   ([changes objects file-id component-id position page libraries]
    (generate-instantiate-component changes objects file-id component-id position page libraries nil nil nil {}))
-
-  ([changes objects file-id component-id position page libraries old-id parent-id frame-id
+  ([changes objects file-id component-id position page libraries old-id parent-id frame-id params]
+   (generate-instantiate-component changes objects file-id component-id position page libraries old-id parent-id frame-id {} params))
+  ([changes objects file-id component-id position page libraries old-id parent-id frame-id ids-map
     {:keys [force-frame?]
      :or {force-frame? false}}]
-   (let [component     (ctf/get-component libraries file-id component-id)
-         parent        (when parent-id (get objects parent-id))
-         library       (get libraries file-id)
 
-         components-v2 (dm/get-in library [:data :options :components-v2])
+   (let [component     (ctf/get-component libraries file-id component-id)
+         library       (get libraries file-id)
+         parent        (when parent-id (get objects parent-id))
+
+         ;; When we are intanciating a variant, it can't be on a variant-container
+         parent        (when parent
+                         (if (and (ctk/is-variant? component)
+                                  (ctk/is-variant-container? parent))
+                           (get objects (:parent-id parent))
+                           parent))
+         parent-id     (d/nilv (:id parent) parent-id)
+         frame-id      (d/nilv (:frame-id parent) frame-id)
 
          [new-shape new-shapes]
          (ctn/make-component-instance page
                                       component
                                       (:data library)
                                       position
-                                      components-v2
                                       (cond-> {}
+                                        (contains? ids-map old-id)
+                                        (assoc :force-id (get ids-map old-id))
+
                                         force-frame?
                                         (assoc :force-frame-id frame-id)))
 
@@ -266,8 +265,11 @@
          (cond-> (pcb/add-object changes first-shape {:ignore-touched true})
            (some? old-id) (pcb/amend-last-change #(assoc % :old-id old-id)))
 
+         duplicated-parent?
+         (->> ids-map vals (some #(= % (:parent-id first-shape))))
+
          changes
-         (if (ctl/grid-layout? objects (:parent-id first-shape))
+         (if (and (ctl/grid-layout? objects (:parent-id first-shape)) (not duplicated-parent?))
            (let [target-cell (-> position meta :cell)
 
                  [row column]
@@ -394,17 +396,28 @@
                           (when (some #(= (:id current-page) %) (:pages library-data)) ;; If the page doesn't belong to the library, it's not valid
                             current-page)
                           (ctpl/get-last-page library-data))]
-     (prepare-restore-component changes library-data component-id page (gpt/point 0 0) nil nil nil)))
+     (prepare-restore-component changes library-data component-id page nil nil nil nil)))
 
-  ([changes library-data component-id page delta old-id parent-id frame-id]
-   (let [component         (ctkl/get-deleted-component library-data component-id)
-         parent            (get-in page [:objects parent-id])
+  ([changes library-data component-id page position old-id parent-id frame-id]
+   (let [library-data      (or (pcb/get-library-data changes) library-data)
+         component         (ctkl/get-deleted-component library-data component-id)
+         objects           (or (pcb/get-objects changes) (:objects page))
+         parent            (get objects parent-id)
          main-inst         (get-in component [:objects (:main-instance-id component)])
          inside-component? (some? (ctn/get-instance-root (:objects page) parent))
          shapes            (cfh/get-children-with-self (:objects component) (:main-instance-id component))
-         shapes            (map #(gsh/move % delta) shapes)
 
-         first-shape       (cond-> (first shapes)
+         is-variant?       (ctk/is-variant? component)
+
+         orig-pos          (gpt/point (:x main-inst) (:y main-inst))
+         delta             (if position
+                             (gpt/subtract position orig-pos)
+                             (gpt/point 0 0))
+         minusdelta        (gpt/point (- (:x delta)) (- (:y delta)))
+
+         moved-shapes      (map #(gsh/move % delta) shapes)
+
+         first-shape       (cond-> (first moved-shapes)
                              (not (nil? parent-id))
                              (assoc :parent-id parent-id)
                              (not (nil? frame-id))
@@ -426,9 +439,16 @@
                              (some? old-id) (pcb/amend-last-change #(assoc % :old-id old-id))) ; on copy/paste old id is used later to reorder the paster layers
          changes           (reduce #(pcb/add-object %1 %2 {:ignore-touched true})
                                    changes
-                                   (rest shapes))]
-     {:changes (pcb/restore-component changes component-id (:id page) main-inst)
-      :shape (first shapes)})))
+                                   (rest moved-shapes))
+         changes           (cond-> changes
+                             ;; Remove variant info when restoring into a parent that is not a variant-container
+                             (and is-variant? parent (not (ctk/is-variant-container? parent)))
+                             (clvp/generate-make-shapes-no-variant [first-shape])
+                             ;; Add variant info and rename when restoring into a variant-container
+                             (ctk/is-variant-container? parent)
+                             (clvp/generate-make-shapes-variant [first-shape] parent))]
+     {:changes (pcb/restore-component changes component-id (:id page) minusdelta)
+      :shape (first moved-shapes)})))
 
 ;; ---- General library synchronization functions ----
 
@@ -451,8 +471,7 @@
                  :file (pretty-file file-id libraries current-file-id)
                  :library (pretty-file library-id libraries current-file-id))
 
-  (let [file          (get-in libraries [file-id :data])
-        components-v2 (get-in file [:options :components-v2])]
+  (let [file          (get-in libraries [file-id :data])]
     (loop [containers (ctf/object-containers-seq file)
            changes    changes]
       (if-let [container (first containers)]
@@ -465,7 +484,6 @@
                                            asset-id
                                            library-id
                                            container
-                                           components-v2
                                            libraries
                                            current-file-id))))
         changes))))
@@ -490,8 +508,7 @@
                  :file (pretty-file file-id libraries current-file-id)
                  :library (pretty-file library-id libraries current-file-id))
 
-  (let [file          (get-in libraries [file-id :data])
-        components-v2 (get-in file [:options :components-v2])]
+  (let [file          (get-in libraries [file-id :data])]
     (loop [local-components (ctkl/components-seq file)
            changes changes]
       (if-let [local-component (first local-components)]
@@ -503,7 +520,6 @@
                                           asset-id
                                           library-id
                                           (cfh/make-container local-component :component)
-                                          components-v2
                                           libraries
                                           current-file-id)))
         changes))))
@@ -511,7 +527,7 @@
 (defn- generate-sync-container
   "Generate changes to synchronize all shapes in a particular container (a page
   or a component) that use assets of the given type in the given library."
-  [changes asset-type asset-id library-id container components-v2 libraries current-file-id]
+  [changes asset-type asset-id library-id container libraries current-file-id]
 
   (if (cfh/page? container)
     (container-log :debug (:id container) :msg "Sync page in local file" :page-id (:id container))
@@ -530,7 +546,6 @@
                                     library-id
                                     container
                                     shape
-                                    components-v2
                                     libraries
                                     current-file-id))
         changes))))
@@ -560,13 +575,13 @@
 (defmulti generate-sync-shape
   "Generate changes to synchronize one shape from all assets of the given type
   that is using, in the given library."
-  (fn [asset-type _changes _library-id _container _shape _components-v2 _libraries _current-file-id] asset-type))
+  (fn [asset-type _changes _library-id _container _shape _libraries _current-file-id] asset-type))
 
 (defmethod generate-sync-shape :components
-  [_ changes _library-id container shape components-v2 libraries current-file-id]
+  [_ changes _library-id container shape libraries current-file-id]
   (let [shape-id  (:id shape)
         file      (get current-file-id libraries)]
-    (generate-sync-shape-direct changes file libraries container shape-id false components-v2)))
+    (generate-sync-shape-direct changes file libraries container shape-id false)))
 
 (defmethod generate-sync-shape :colors
   [_ changes library-id _ shape _ libraries _]
@@ -742,7 +757,7 @@
 (defn generate-sync-shape-direct
   "Generate changes to synchronize one shape that is the root of a component
   instance, and all its children, from the given component."
-  [changes file libraries container shape-id reset? components-v2]
+  [changes file libraries container shape-id reset?]
   (shape-log :debug shape-id container
              :msg "Sync shape direct" :shape-inst (str shape-id) :reset? reset?)
   (let [shape-inst (ctn/get-shape container shape-id)
@@ -753,12 +768,12 @@
       (let [redirect-shaperef (partial redirect-shaperef container libraries)
 
             shape-main (when component
-                         (if (and reset? components-v2)
+                         (if reset?
                            ;; the reset is against the ref-shape, not against the original shape of the component
                            (ctf/find-ref-shape file container libraries shape-inst)
                            (ctf/get-ref-shape library component shape-inst)))
 
-            shape-inst (if (and reset? components-v2)
+            shape-inst (if reset?
                          (redirect-shaperef shape-inst shape-main)
                          shape-inst)
 
@@ -780,13 +795,10 @@
                                                 root-main
                                                 reset?
                                                 initial-root?
-                                                redirect-shaperef
-                                                components-v2)
+                                                redirect-shaperef)
           ;; If the component is not found, because the master component has been
-          ;; deleted or the library unlinked, do nothing in v2 or detach in v1.
-          (if components-v2
-            changes
-            (generate-detach-instance changes libraries container shape-id))))
+          ;; deleted or the library unlinked, do nothing.
+          changes))
       changes)))
 
 (defn- find-main-container
@@ -807,7 +819,7 @@
             nil))))))
 
 (defn- generate-sync-shape-direct-recursive
-  [changes container shape-inst component library file libraries shape-main root-inst root-main reset? initial-root? redirect-shaperef components-v2]
+  [changes container shape-inst component library file libraries shape-main root-inst root-main reset? initial-root? redirect-shaperef]
   (shape-log :debug (:id shape-inst) container
              :msg "Sync shape direct recursive"
              :shape-inst (str (:name shape-inst) " " (pretty-uuid (:id shape-inst)))
@@ -815,9 +827,7 @@
 
   (if (nil? shape-main)
     ;; This should not occur, but protect against it in any case
-    (if components-v2
-      changes
-      (generate-detach-instance changes container {(:id library) library} (:id shape-inst)))
+    changes
     (let [omit-touched?        (not reset?)
           clear-remote-synced? (and initial-root? reset?)
           set-remote-synced?   (and (not initial-root?) reset?)
@@ -856,7 +866,7 @@
           children-inst       (vec (ctn/get-direct-children container shape-inst))
           children-main       (vec (ctn/get-direct-children component-container shape-main))
 
-          children-inst (if (and reset? components-v2)
+          children-inst (if reset?
                           (map #(redirect-shaperef %) children-inst) children-inst)
 
           only-inst (fn [changes child-inst]
@@ -888,8 +898,7 @@
                                                root-inst
                                                root-main
                                                omit-touched?
-                                               set-remote-synced?
-                                               components-v2)
+                                               set-remote-synced?)
                         changes))
 
           both (fn [changes child-inst child-main]
@@ -909,8 +918,7 @@
                                                        root-main
                                                        reset?
                                                        initial-root?
-                                                       redirect-shaperef
-                                                       components-v2))
+                                                       redirect-shaperef))
 
           swapped (fn [changes child-inst child-main]
                     (shape-log :trace (:id child-inst) container
@@ -948,8 +956,7 @@
                             swapped
                             moved
                             false
-                            reset?
-                            components-v2)
+                            reset?)
 
           changes
           (cond-> changes
@@ -965,41 +972,26 @@
 
 (defn generate-rename-component
   "Generate the changes for rename the component with the given id, in the current file library."
-  [changes id new-name library-data components-v2]
-  (let [[path name]   (cfh/parse-path-name new-name)
-        update-fn
-        (fn [component]
-          (cond-> component
-            :always
-            (assoc :path path
-                   :name name)
-
-            (not components-v2)
-            (update :objects
-           ;; Give the same name to the root shape
-                    #(assoc-in % [id :name] name))))]
+  [changes id new-name library-data]
+  (let [[path name]   (cfh/parse-path-name new-name)]
     (-> changes
         (pcb/with-library-data library-data)
-        (pcb/update-component id update-fn))))
+        (pcb/update-component id #(assoc % :path path :name name)))))
 
 (defn generate-sync-shape-inverse
   "Generate changes to update the component a shape is linked to, from
   the values in the shape and all its children."
-  [changes file libraries container shape-id components-v2]
+  [changes file libraries container shape-id]
   (shape-log :debug shape-id container :msg "Sync shape inverse" :shape (str shape-id))
   (let [redirect-shaperef (partial redirect-shaperef container libraries)
         shape-inst     (ctn/get-shape container shape-id)
         library        (dm/get-in libraries [(:component-file shape-inst) :data])
         component      (ctkl/get-component library (:component-id shape-inst))
 
-        shape-main (when component
-                     (if components-v2
-                       (ctf/find-remote-shape container libraries shape-inst)
-                       (ctf/get-ref-shape library component shape-inst)))
+        shape-main     (when component
+                         (ctf/find-remote-shape container libraries shape-inst))
 
-        shape-inst (if components-v2
-                     (redirect-shaperef shape-inst shape-main)
-                     shape-inst)
+        shape-inst     (redirect-shaperef shape-inst shape-main)
 
         initial-root?  (:component-root shape-inst)
 
@@ -1008,7 +1000,7 @@
 
         changes        (cond-> changes
                          (and component (contains? (:touched shape-inst) :name-group))
-                         (generate-rename-component (:component-id shape-inst) (:name shape-inst) library components-v2))]
+                         (generate-rename-component (:component-id shape-inst) (:name shape-inst) library))]
 
     (if component
       (generate-sync-shape-inverse-recursive changes
@@ -1022,12 +1014,11 @@
                                              root-inst
                                              root-main
                                              initial-root?
-                                             redirect-shaperef
-                                             components-v2)
+                                             redirect-shaperef)
       changes)))
 
 (defn- generate-sync-shape-inverse-recursive
-  [changes container shape-inst component library file libraries shape-main root-inst root-main initial-root? redirect-shaperef components-v2]
+  [changes container shape-inst component library file libraries shape-main root-inst root-main initial-root? redirect-shaperef]
   (shape-log :trace (:id shape-inst) container
              :msg "Sync shape inverse recursive"
              :shape (str (:name shape-inst))
@@ -1084,9 +1075,7 @@
           children-main   (mapv #(ctn/get-shape component-container %)
                                 (:shapes shape-main))
 
-          children-inst (if components-v2
-                          (map #(redirect-shaperef %) children-inst)
-                          children-inst)
+          children-inst (map #(redirect-shaperef %) children-inst)
 
           only-inst (fn [changes child-inst]
                       (add-shape-to-main changes
@@ -1097,8 +1086,7 @@
                                          component-container
                                          container
                                          root-inst
-                                         root-main
-                                         components-v2))
+                                         root-main))
 
           only-main (fn [changes child-main]
                       (remove-shape changes
@@ -1118,8 +1106,7 @@
                                                         root-inst
                                                         root-main
                                                         initial-root?
-                                                        redirect-shaperef
-                                                        components-v2))
+                                                        redirect-shaperef))
 
           swapped (fn [changes child-inst child-main]
                     (shape-log :trace (:id child-inst) container
@@ -1153,8 +1140,7 @@
                             swapped
                             moved
                             true
-                            true
-                            components-v2)
+                            true)
 
           ;; The inverse sync may be made on a component that is inside a
           ;; remote library. We need to separate changes that are from
@@ -1172,7 +1158,7 @@
 ;; ---- Operation generation helpers ----
 
 (defn- compare-children
-  [changes shape-inst children-inst children-main container-inst container-main file libraries only-inst-cb only-main-cb both-cb swapped-cb moved-cb inverse? reset? components-v2]
+  [changes shape-inst children-inst children-main container-inst container-main file libraries only-inst-cb only-main-cb both-cb swapped-cb moved-cb inverse? reset?]
   (shape-log :trace (:id shape-inst) container-inst :msg "Compare children")
   (loop [children-inst (seq (or children-inst []))
          children-main (seq (or children-main []))
@@ -1193,18 +1179,18 @@
         (reduce only-inst-cb changes children-inst)
 
         :else
-        (if (or (ctk/is-main-of? child-main child-inst components-v2)
+        (if (or (ctk/is-main-of? child-main child-inst)
                 (and (ctf/match-swap-slot? child-main child-inst container-inst container-main file libraries) (not reset?)))
           (recur (next children-inst)
                  (next children-main)
-                 (if (ctk/is-main-of? child-main child-inst components-v2)
+                 (if (ctk/is-main-of? child-main child-inst)
                    (both-cb changes child-inst child-main)
                    (swapped-cb changes child-inst child-main)))
 
-          (let [child-inst' (d/seek #(or (ctk/is-main-of? child-main % components-v2)
+          (let [child-inst' (d/seek #(or (ctk/is-main-of? child-main %)
                                          (and (ctf/match-swap-slot? child-main % container-inst container-main file libraries) (not reset?)))
                                     children-inst)
-                child-main' (d/seek #(or (ctk/is-main-of? % child-inst components-v2)
+                child-main' (d/seek #(or (ctk/is-main-of? % child-inst)
                                          (and (ctf/match-swap-slot? % child-inst container-inst container-main file libraries) (not reset?)))
                                     children-main)]
             (cond
@@ -1220,7 +1206,7 @@
 
               :else
               (if inverse?
-                (let [is-main? (ctk/is-main-of? child-inst child-main' components-v2)]
+                (let [is-main? (ctk/is-main-of? child-inst child-main')]
                   (recur (next children-inst)
                          (remove #(= (:id %) (:id child-main')) children-main)
                          (cond-> changes
@@ -1230,7 +1216,7 @@
                            (swapped-cb child-inst child-main')
                            :always
                            (moved-cb child-inst child-main'))))
-                (let [is-main? (ctk/is-main-of? child-inst' child-main components-v2)]
+                (let [is-main? (ctk/is-main-of? child-inst' child-main)]
                   (recur (remove #(= (:id %) (:id child-inst')) children-inst)
                          (next children-main)
                          (cond-> changes
@@ -1242,14 +1228,14 @@
                            (moved-cb child-inst' child-main))))))))))))
 
 (defn- add-shape-to-instance
-  [changes component-shape index component-page container root-instance root-main omit-touched? set-remote-synced? components-v2]
+  [changes component-shape index component-page container root-instance root-main omit-touched? set-remote-synced?]
   (shape-log :info (:id component-shape) component-page
              :msg (str "ADD [P " (pretty-uuid (:id container)) "] "
                        (:name component-shape)
                        " "
                        (pretty-uuid (:id component-shape))))
   (let [component-parent-shape (ctn/get-shape component-page (:parent-id component-shape))
-        parent-shape           (d/seek #(ctk/is-main-of? component-parent-shape % components-v2)
+        parent-shape           (d/seek #(ctk/is-main-of? component-parent-shape %)
                                        (cfh/get-children-with-self (:objects container)
                                                                    (:id root-instance)))
         all-parents            (into [(:id parent-shape)]
@@ -1318,14 +1304,14 @@
       changes')))
 
 (defn- add-shape-to-main
-  [changes shape index component component-container page root-instance root-main components-v2]
+  [changes shape index component component-container page root-instance root-main]
   (shape-log :info (:id shape) page
              :msg (str "ADD [C " (pretty-uuid (:id component-container)) "] "
                        (:name shape)
                        " "
                        (pretty-uuid (:id shape))))
   (let [parent-shape           (ctn/get-shape page (:parent-id shape))
-        component-parent-shape (d/seek #(ctk/is-main-of? % parent-shape components-v2)
+        component-parent-shape (d/seek #(ctk/is-main-of? % parent-shape)
                                        (cfh/get-children-with-self (:objects component-container)
                                                                    (:id root-main)))
         all-parents  (into [(:id component-parent-shape)]
@@ -1910,30 +1896,33 @@
     (assoc change :component-id (:id container))))
 
 (defn generate-add-component-changes
-  [changes root objects file-id page-id components-v2]
+  [changes root objects file-id page-id variant-props]
   (let [name (:name root)
+        variant-id  (when (ctk/is-variant? root) (:parent-id root))
+        props       (when (ctk/is-variant? root) (get variant-props (:component-id root)))
+
         [path name] (cfh/parse-path-name name)
 
-        [root-shape new-shapes updated-shapes]
-        (if-not components-v2
-          (ctn/make-component-shape root objects file-id components-v2)
-          (ctn/convert-shape-in-component root objects file-id))
+        [root-shape updated-shapes]
+        (ctn/convert-shape-in-component root objects file-id)
 
-        changes (-> changes
-                    (pcb/add-component (:id root-shape)
-                                       path
-                                       name
-                                       new-shapes
-                                       updated-shapes
-                                       (:id root)
-                                       page-id))]
+        changes     (-> changes
+                        (pcb/add-component (:id root-shape)
+                                           path
+                                           name
+                                           updated-shapes
+                                           (:id root)
+                                           page-id
+                                           nil
+                                           variant-id
+                                           props))]
     [root-shape changes]))
 
 (defn generate-add-component
-  "If there is exactly one id, and it's a frame (or a group in v1), and not already a component,
-  use it as root. Otherwise, create a frame (v2) or group (v1) that contains all ids. Then, make a
+  "If there is exactly one id, and it's a frame, and not already a component,
+  use it as root. Otherwise, create a frame that contains all ids. Then, make a
   component with it, and link all shapes to their corresponding one in the component."
-  [changes shapes objects page-id file-id components-v2 prepare-create-group prepare-create-board]
+  [changes shapes objects page-id file-id prepare-create-board]
 
   (let [changes      (pcb/with-page-id changes page-id)
         shapes-count (count shapes)
@@ -1945,9 +1934,7 @@
 
         [root changes old-root-ids]
         (if (and (= shapes-count 1)
-                 (or (and (cfh/group-shape? first-shape)
-                          (not components-v2))
-                     (cfh/frame-shape? first-shape))
+                 (cfh/frame-shape? first-shape)
                  (not (ctk/instance-head? first-shape)))
           [first-shape
            (-> changes
@@ -1962,21 +1949,14 @@
                 shape-ids (into (d/ordered-set) (map :id) shapes)
 
                 [root changes]
-                (if-not components-v2
-                  (prepare-create-group changes       ; These functions needs to be passed as argument
-                                        objects       ; to avoid a circular dependence
-                                        page-id
-                                        shapes
-                                        root-name
-                                        (not (ctk/instance-head? first-shape)))
-                  (prepare-create-board changes
-                                        (uuid/next)
-                                        (:parent-id first-shape)
-                                        objects
-                                        shape-ids
-                                        nil
-                                        root-name
-                                        true))]
+                (prepare-create-board changes
+                                      (uuid/next)
+                                      (:parent-id first-shape)
+                                      objects
+                                      shape-ids
+                                      nil
+                                      root-name
+                                      true)]
 
             [root changes shape-ids]))
 
@@ -1990,7 +1970,7 @@
 
         objects' (assoc objects (:id root) root)
 
-        [root-shape changes] (generate-add-component-changes changes root objects' file-id page-id components-v2)
+        [root-shape changes] (generate-add-component-changes changes root objects' file-id page-id nil)
 
         changes  (pcb/update-shapes changes
                                     old-root-ids
@@ -2004,17 +1984,26 @@
   [changes library-data component-id library-id current-page objects]
   (let [{:keys [changes shape]} (prepare-restore-component changes library-data component-id current-page)
         parent-id (:parent-id shape)
-        objects (cond-> (assoc objects (:id shape) shape)
-                  (not (nil? parent-id))
-                  (update-in [parent-id :shapes]
-                             #(conj % (:id shape))))
+
+        insert-before?
+        (and (ctl/flex-layout? objects parent-id)
+             (not (ctl/reverse? objects parent-id)))
+
+        objects
+        (-> objects
+            (assoc (:id shape) shape)
+            (cond-> (and (some? parent-id) insert-before?)
+              (update-in [parent-id :shapes] #(d/concat-vec [(:id shape)] %)))
+            (cond-> (and (some? parent-id) (not insert-before?))
+              (update-in [parent-id :shapes] conj (:id shape))))
 
         ;; Adds a resize-parents operation so the groups are updated. We add all the new objects
         new-objects-ids (->> changes :redo-changes (filter #(= (:type %) :add-obj)) (mapv :id))
         changes (-> changes
                     (pcb/with-objects objects)
-                    (pcb/resize-parents new-objects-ids))]
-
+                    (pcb/resize-parents new-objects-ids)
+                    ;; Fix the order of the children inside the parent
+                    (pcb/reorder-children parent-id (get-in objects [parent-id :shapes])))]
     (assoc changes :file-id library-id)))
 
 (defn generate-detach-component
@@ -2076,8 +2065,7 @@
   [changes objects shape file page libraries id-new-component index target-cell keep-props-values]
   (let [[all-parents changes]
         (-> changes
-            (cls/generate-delete-shapes file page objects (d/ordered-set (:id shape)) {:components-v2 true
-                                                                                       :component-swap true}))
+            (cls/generate-delete-shapes file page objects (d/ordered-set (:id shape)) {:component-swap true}))
         [new-shape changes]
         (-> changes
             (generate-new-shape-for-swap shape file page libraries id-new-component index target-cell keep-props-values))]
@@ -2108,7 +2096,7 @@
       (generate-sync-file file-id :typographies asset-id library-id libraries current-file-id))))
 
 (defn generate-sync-head
-  [changes file-full libraries container id components-v2 reset?]
+  [changes file-full libraries container id reset?]
   (let [shape-inst (ctn/get-shape container id)
         objects    (:objects container)
         parent     (get objects (:parent-id shape-inst))
@@ -2117,11 +2105,11 @@
         (-> changes
             (pcb/with-container container)
             (pcb/with-objects (:objects container))
-            (generate-sync-shape-direct file-full libraries container (:id head) reset? components-v2))]
+            (generate-sync-shape-direct file-full libraries container (:id head) reset?))]
     changes))
 
 (defn generate-reset-component
-  [changes file-full libraries container id components-v2]
+  [changes file-full libraries container id]
   (let [objects    (:objects container)
         swap-slot  (-> (ctn/get-shape container id)
                        (ctk/get-swap-slot))
@@ -2129,11 +2117,11 @@
         (-> changes
             (pcb/with-container container)
             (pcb/with-objects objects)
-            (generate-sync-shape-direct file-full libraries container id true components-v2))]
+            (generate-sync-shape-direct file-full libraries container id true))]
 
     (cond-> changes
       (some? swap-slot)
-      (generate-sync-head file-full libraries container id components-v2 true))))
+      (generate-sync-head file-full libraries container id true))))
 
 (defn generate-duplicate-flows
   [changes shapes page ids-map]
@@ -2187,52 +2175,90 @@
             (pcb/with-page changes page)
             frames)))
 
-(defn generate-duplicate-component-change
-  [changes objects page component-root parent-id frame-id delta libraries library-data]
-  (let [component-id (:component-id component-root)
-        file-id (:component-file component-root)
-        main-component    (ctf/get-component libraries file-id component-id)
-        moved-component   (gsh/move component-root delta)
-        pos               (gpt/point (:x moved-component) (:y moved-component))
-        origin-frame      (get-in page [:objects frame-id])
-        delta             (cond-> delta
-                            (some? origin-frame)
-                            (gpt/subtract (-> origin-frame :selrect gpt/point)))
+(defn- duplicate-variant
+  [changes library component base-pos parent-id page-id]
+  (let [component-page   (ctpl/get-page (:data library) (:main-instance-page component))
+        component-shape  (dm/get-in component-page [:objects (:main-instance-id component)])
+        orig-pos         (gpt/point (:x component-shape) (:y component-shape))
+        delta            (gpt/subtract base-pos orig-pos)
+        new-component-id (uuid/next)
+        [shape changes]  (generate-duplicate-component changes
+                                                       library
+                                                       (:id component)
+                                                       new-component-id
+                                                       {:apply-changes-local-library? true
+                                                        :delta delta
+                                                        :new-variant-id parent-id
+                                                        :page-id page-id})]
+    [shape
+     (-> changes
+         (pcb/change-parent parent-id [shape]))]))
+
+
+(defn generate-duplicate-component-change
+  [changes objects page main parent-id frame-id delta libraries library-data ids-map]
+  (let [main-id      (:id main)
+        component-id (:component-id main)
+        file-id      (:component-file main)
+        component    (ctf/get-component libraries file-id component-id)
+        pos          (as-> (gsh/move main delta) $
+                       (gpt/point (:x $) (:y $)))
+
+        ;; When we duplicate a variant alone, we will instanciate it
+        ;; When we duplicate a variant along with its variant-container, we will duplicate it
+        in-variant-container? (contains? ids-map (:variant-id main))
 
-        instantiate-component
-        #(generate-instantiate-component changes
-                                         objects
-                                         file-id
-                                         (:component-id component-root)
-                                         pos
-                                         page
-                                         libraries
-                                         (:id component-root)
-                                         parent-id
-                                         frame-id
-                                         {})
 
         restore-component
-        #(let [restore (prepare-restore-component changes library-data (:component-id component-root) page delta (:id component-root) parent-id frame-id)]
-           [(:shape restore) (:changes restore)])
+        #(let [{:keys [shape changes]}
+               (prepare-restore-component changes
+                                          library-data
+                                          component-id
+                                          page
+                                          pos
+                                          main-id
+                                          parent-id
+                                          frame-id)]
+           [shape changes])
 
         [_shape changes]
-        (if (nil? main-component)
+        (if (nil? component)
           (restore-component)
-          (instantiate-component))]
+          (if (and (ctk/is-variant? main) in-variant-container?)
+            (duplicate-variant changes
+                               (get libraries file-id)
+                               component
+                               pos
+                               parent-id
+                               (:id page))
+
+            (generate-instantiate-component changes
+                                            objects
+                                            file-id
+                                            component-id
+                                            pos
+                                            page
+                                            libraries
+                                            main-id
+                                            parent-id
+                                            frame-id
+                                            ids-map
+                                            {})))]
     changes))
 
 (defn generate-duplicate-shape-change
-  ([changes objects page unames update-unames! ids-map obj delta level-delta libraries library-data file-id]
-   (generate-duplicate-shape-change changes objects page unames update-unames! ids-map obj delta level-delta libraries library-data file-id (:frame-id obj) (:parent-id obj) false false true))
+  ([changes objects page unames update-unames! ids ids-map obj delta level-delta libraries library-data file-id]
+   (generate-duplicate-shape-change changes objects page unames update-unames! ids ids-map obj delta level-delta libraries library-data file-id (:frame-id obj) (:parent-id obj) false false true nil))
+  ([changes objects page unames update-unames! ids ids-map obj delta level-delta libraries library-data file-id variant-props]
+   (generate-duplicate-shape-change changes objects page unames update-unames! ids ids-map obj delta level-delta libraries library-data file-id (:frame-id obj) (:parent-id obj) false false true variant-props))
 
-  ([changes objects page unames update-unames! ids-map obj delta level-delta libraries library-data file-id frame-id parent-id duplicating-component? child? remove-swap-slot?]
+  ([changes objects page unames update-unames! ids ids-map obj delta level-delta libraries library-data file-id frame-id parent-id duplicating-component? child? remove-swap-slot? variant-props]
    (cond
      (nil? obj)
      changes
 
      (ctf/is-main-of-known-component? obj libraries)
-     (generate-duplicate-component-change changes objects page obj parent-id frame-id delta libraries library-data)
+     (generate-duplicate-component-change changes objects page obj parent-id frame-id delta libraries library-data ids-map)
 
      :else
      (let [frame?      (cfh/frame-shape? obj)
@@ -2262,8 +2288,7 @@
 
            regenerate-component
            (fn [changes shape]
-             (let [components-v2 (dm/get-in library-data [:options :components-v2])
-                   [_ changes] (generate-add-component-changes changes shape objects file-id (:id page) components-v2)]
+             (let [[_ changes] (generate-add-component-changes changes shape objects file-id (:id page) variant-props)]
                changes))
 
            new-obj
@@ -2302,7 +2327,14 @@
                (d/update-when :interactions #(ctsi/remap-interactions % ids-map objects))
 
                (cond-> (ctl/grid-layout? obj)
-                 (ctl/remap-grid-cells ids-map)))
+                 (ctl/remap-grid-cells ids-map))
+
+               (cond-> (ctk/is-variant-container? parent)
+                 (assoc :variant-id parent-id))
+
+               (cond-> (and (ctk/is-variant? obj) (not (ctk/is-variant-container? parent)))
+                 (-> (assoc :name (ctv/variant-name-to-name obj))
+                     (dissoc :variant-id))))
 
            new-obj (cond-> new-obj
                      (not duplicating-component?)
@@ -2334,6 +2366,7 @@
                                                   page
                                                   unames
                                                   update-unames!
+                                                  ids
                                                   ids-map
                                                   child
                                                   delta
@@ -2349,21 +2382,22 @@
                                                                ;; only remove swap slot of children when the current shape
                                                                ;; is not a subinstance head nor a instance root
                                                        (not subinstance-head?)
-                                                       (not instance-root?))))
+                                                       (not instance-root?))
+                                                  variant-props))
                changes
                (map (d/getf objects) (:shapes obj)))))))
 
 (defn generate-duplicate-changes
   "Prepare objects to duplicate: generate new id, give them unique names,
   move to the desired position, and recalculate parents and frames as needed."
-  [changes all-objects page ids delta libraries library-data file-id]
+  [changes all-objects page ids delta libraries library-data file-id & {:keys [variant-props]}]
   (let [shapes         (map (d/getf all-objects) ids)
         unames         (volatile! (cfh/get-used-names (:objects page)))
         update-unames! (fn [new-name] (vswap! unames conj new-name))
         all-ids        (reduce #(into %1 (cons %2 (cfh/get-children-ids all-objects %2))) (d/ordered-set) ids)
 
-         ;; We need ids-map for remapping the grid layout. But when duplicating the guides
-         ;; we calculate a new one because the components will have created new shapes.
+        ;; We need ids-map for remapping the grid layout. But when duplicating the guides
+        ;; we calculate a new one because the components will have created new shapes.
         ids-map        (into {} (map #(vector % (uuid/next))) all-ids)
 
         changes (-> changes
@@ -2376,13 +2410,15 @@
                                                        page
                                                        unames
                                                        update-unames!
+                                                       ids
                                                        ids-map
                                                        %2
                                                        delta
                                                        nil
                                                        libraries
                                                        library-data
-                                                       file-id)
+                                                       file-id
+                                                       variant-props)
                      changes))
 
          ;; We need to check the changes to get the ids-map

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

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

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

@@ -0,0 +1,21 @@
+;; 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.workspace.tokens.color
+  (:require
+   [app.common.files.tokens :as cft]
+   [app.main.data.tinycolor :as tinycolor]))
+
+(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 (cft/color-token? token))
+    (color-bullet-color resolved-value)))