🐛 Fix validation error when turning a component into a variant

transform-in-variant (Ctrl+K on a component) runs a chain of events,
each one committing its own changes. It set the variant-id on the main
instance before setting it on the component, so the shape validation
of that step saw them out of sync and rejected the change.

Set the variant-id on the component first, and give the main instance
an empty variant-name, which is what the validator expects while the
variant has no properties yet.

Add a test that runs transform-in-variant through a test store.

AI-assisted-by: claude-opus-5-5

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

@@ -440,8 +440,10 @@
              cont-props   (if flex?
                             (into base-props flex-props)
                             base-props)
+             ;; The variant has no properties yet, so its variant-name is empty
              main-props   {:name name
-                           :variant-id variant-id}
+                           :variant-id variant-id
+                           :variant-name ""}
 
              stroke-props {:stroke-alignment :inner
                            :stroke-style :solid
@@ -474,9 +476,11 @@
            (cl/remove-all-fills variant-vec {:color clr/black :opacity 1})
            (when flex? (dwsl/create-layout-from-id variant-id :flex))
            (dwsh/update-shapes variant-vec #(merge % cont-props))
+           ;; Set the variant-id on the component before the main shape, so the
+           ;; shape validation after updating the main sees both in sync
+           (set-variant-id component-id variant-id)
            (dwsh/update-shapes [main-instance-id] #(merge % main-props))
-           (cl/add-stroke variant-vec stroke-props)
-           (set-variant-id component-id variant-id))
+           (cl/add-stroke variant-vec stroke-props))
 
           ;; Add the necessary number of new properties, with default values
           (rx/from

frontend/test/frontend_tests/logic/transform_in_variant_test.cljs

@@ -0,0 +1,50 @@
+;; 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 SUBSIDIARY SL
+
+(ns frontend-tests.logic.transform-in-variant-test
+  (:require
+   [app.common.test-helpers.components :as cthc]
+   [app.common.test-helpers.compositions :as ctho]
+   [app.common.test-helpers.files :as cthf]
+   [app.common.test-helpers.shapes :as cths]
+   [app.common.types.component :as ctk]
+   [app.main.data.workspace.variants :as dwv]
+   [cljs.test :as t :include-macros true]
+   [frontend-tests.helpers.pages :as thp]
+   [frontend-tests.helpers.state :as ths]))
+
+(t/use-fixtures :each
+  {:before thp/reset-idmap!})
+
+(t/deftest transform-component-in-variant
+  "Ctrl+K on a component main turns it into a variant. Each step of the event
+  chain is validated, so a validation error here fails the test through the
+  store error handler."
+  (t/async
+    done
+    (let [;; ==== Setup
+          file   (-> (cthf/sample-file :file1)
+                     (ctho/add-simple-component :c01 :m01 :r01))
+          store  (ths/setup-store file)
+          main   (cths/get-shape file :m01)
+
+          ;; ==== Action
+          events [(dwv/transform-in-variant (:id main))]]
+
+      (ths/run-store
+       store done events
+       (fn [new-state]
+         (let [;; ==== Get
+               file'      (ths/get-file-from-state new-state)
+               main'      (cths/get-shape file' :m01)
+               container' (cths/get-shape-by-id file' (:parent-id main'))
+               comp'      (cthc/get-component file' :c01)]
+
+           ;; ==== Check
+           (t/is (ctk/is-variant-container? container'))
+           (t/is (= (:id container') (:variant-id main')))
+           (t/is (= (:id container') (:variant-id comp')))
+           (t/is (= 1 (count (:variant-properties comp'))))))))))

frontend/test/frontend_tests/runner.cljs

@@ -63,6 +63,7 @@
    [frontend-tests.logic.path-lifecycle-test]
    [frontend-tests.logic.path-tools-test]
    [frontend-tests.logic.sidebar-transform-coalescing-test]
+   [frontend-tests.logic.transform-in-variant-test]
    [frontend-tests.logic.update-position-test]
    [frontend-tests.logic.wasm-modifiers-nil-id-test]
    [frontend-tests.logic.wasm-pixel-snap-test]
@@ -230,6 +231,7 @@
    'frontend-tests.logic.path-lifecycle-test
    'frontend-tests.logic.path-tools-test
    'frontend-tests.logic.pasting-in-containers-test
+   'frontend-tests.logic.transform-in-variant-test
    'frontend-tests.main.refs-test
    'frontend-tests.main-errors-test
    'frontend-tests.logic.sidebar-transform-coalescing-test