📚 Update changelog

on managing values with select

.github/workflows/release.yml

@@ -37,36 +37,43 @@ jobs:
           ref: ${{ steps.vars.outputs.gh_ref }}
 
       # --- Publicly release the docker images ---
-      - name: Login to private registry
-        uses: docker/login-action@v3
+      - name: Configure ECR credentials
+        uses: aws-actions/configure-aws-credentials@v4
         with:
-          registry: ${{ secrets.DOCKER_REGISTRY }}
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
+          aws-access-key-id: ${{ secrets.DOCKER_USERNAME }}
+          aws-secret-access-key: ${{ secrets.DOCKER_PASSWORD }}
+          aws-region: ${{ secrets.AWS_REGION }}
 
-      - name: Login to DockerHub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.PUB_DOCKER_USERNAME }}
-          password: ${{ secrets.PUB_DOCKER_PASSWORD }}
-
-      - name: Publish docker images to DockerHub
-        env:
-          TAG: ${{ steps.vars.outputs.gh_ref }}
-          REGISTRY: ${{ secrets.DOCKER_REGISTRY }}
-          HUB: ${{ secrets.PUB_DOCKER_HUB }}
+      - name: Install Skopeo
         run: |
-          IMAGES=("frontend" "backend" "exporter")
-          EXTRA_TAGS=("main" "latest")
+          sudo apt-get update -y
+          sudo apt-get install -y skopeo
+
+      - name: Copy images from AWS ECR to Docker Hub
+        env:
+          AWS_REGION: ${{ secrets.AWS_REGION }}
+          DOCKER_REGISTRY: ${{ secrets.DOCKER_REGISTRY }}
+          PUB_DOCKER_USERNAME: ${{ secrets.PUB_DOCKER_USERNAME }}
+          PUB_DOCKER_PASSWORD: ${{ secrets.PUB_DOCKER_PASSWORD }}
+          TAG: ${{ steps.vars.outputs.gh_ref }}
+        run: |
+          aws ecr get-login-password --region $AWS_REGION | \
+            skopeo login --username AWS --password-stdin \
+            $DOCKER_REGISTRY
+
+          echo "$PUB_DOCKER_PASSWORD" | skopeo login --username "$PUB_DOCKER_USERNAME" --password-stdin docker.io
+
+          IMAGES=("frontend" "backend" "exporter" "storybook")
 
           for image in "${IMAGES[@]}"; do
-            docker pull "$REGISTRY/penpotapp/$image:$TAG"
-            docker tag "$REGISTRY/penpotapp/$image:$TAG" "penpotapp/$image:$TAG"
-            docker push "penpotapp/$image:$TAG"
+            skopeo copy --all \
+              docker://$DOCKER_REGISTRY/$image:$TAG \
+              docker://docker.io/$PUB_DOCKER_USERNAME/$image:$TAG
 
-            for tag in "${EXTRA_TAGS[@]}"; do
-              docker tag "$REGISTRY/penpotapp/$image:$TAG" "penpotapp/$image:$tag"
-              docker push "penpotapp/$image:$tag"
+            for alias in main latest; do
+              skopeo copy --all \
+                docker://$DOCKER_REGISTRY/$image:$TAG \
+                docker://docker.io/$PUB_DOCKER_USERNAME/$image:$alias
             done
           done
 
@@ -93,3 +100,15 @@ jobs:
           tag_name: ${{ steps.vars.outputs.gh_ref }}
           name: ${{ steps.vars.outputs.gh_ref }}
           body: ${{ steps.extract_release_notes.outputs.release_notes }}
+
+      - name: Notify Mattermost
+        if: failure()
+        uses: mattermost/action-mattermost-notify@master
+        with:
+          MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK }}
+          MATTERMOST_CHANNEL: bot-alerts-cicd
+          TEXT: |
+            ❌ 🚀 *[PENPOT] Error releasing penpot.*
+            📄 Triggered from ref: `${{ steps.vars.outputs.gh_ref }}`
+            🔗 Run: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
+            @infra

CHANGES.md

@@ -1,6 +1,10 @@
 # CHANGELOG
 
-## 2.11.0 (Unreleased)
+## 2.11.1
+
+- Fix WEBP shape export on docker images [Taiga #3838](https://tree.taiga.io/project/penpot/issue/3838)
+
+## 2.11.0
 
 ### :boom: Breaking changes & Deprecations
 
@@ -28,10 +32,6 @@
   services which use netty internally (redis connection, S3 SDK client). This
   configuration is not very commonly used so don't expected real impact on any user.
 
-### :rocket: Epics and highlights
-
-### :heart: Community contributions (Thank you!)
-
 ### :sparkles: New features & Enhancements
 
 - New composite token: Typography [Taiga #10200](https://tree.taiga.io/project/penpot/us/10200)
@@ -76,6 +76,9 @@
 - Fix options button does not work for comments created in the lower part of the screen [Taiga #12422](https://tree.taiga.io/project/penpot/issue/12422)
 - Fix problem when checking usage with removed teams [Taiga #12442](https://tree.taiga.io/project/penpot/issue/12442)
 - Fix focus mode persisting across page/file navigation [Taiga #12469](https://tree.taiga.io/project/penpot/issue/12469)
+- Fix shadow color validation [Github #7705](https://github.com/penpot/penpot/pull/7705)
+- Fix exception on selection blend-mode using keyboard [Github #7710](https://github.com/penpot/penpot/pull/7710)
+- Fix crash when using decimal (floating-point) values for X/Y or width/height [Taiga #12543](https://tree.taiga.io/project/penpot/issue/12543)
 
 ## 2.10.1
 

backend/src/app/tasks/file_gc.clj

@@ -218,6 +218,9 @@
     (when (or (nil? revn) (= revn (:revn file)))
       file)))
 
+;; FIXME: we should skip files that does not match the revn on the
+;; props and add proper schema for this task props
+
 (defn- process-file!
   [cfg {:keys [file-id] :as props}]
   (if-let [file (get-file cfg props)]

backend/src/app/tasks/file_gc_scheduler.clj

@@ -8,6 +8,7 @@
   "A maintenance task that is responsible of properly scheduling the
   file-gc task for all files that matches the eligibility threshold."
   (:require
+   [app.common.logging :as l]
    [app.common.time :as ct]
    [app.config :as cf]
    [app.db :as db]
@@ -21,25 +22,24 @@
           f.modified_at
      FROM file AS f
     WHERE f.has_media_trimmed IS false
-      AND f.modified_at < now() - ?::interval
+      AND f.modified_at < ?
       AND f.deleted_at IS NULL
     ORDER BY f.modified_at DESC
       FOR UPDATE OF f
      SKIP LOCKED")
 
-(defn- get-candidates
-  [{:keys [::db/conn ::min-age] :as cfg}]
-  (let [min-age (db/interval min-age)]
-    (db/plan conn [sql:get-candidates min-age] {:fetch-size 10})))
-
 (defn- schedule!
-  [cfg]
+  [{:keys [::db/conn] :as cfg} threshold]
   (let [total (reduce (fn [total {:keys [id modified-at revn]}]
-                        (let [params {:file-id id :modified-at modified-at :revn revn}]
+                        (let [params {:file-id id :revn revn}]
+                          (l/trc :hint "schedule"
+                                 :file-id (str id)
+                                 :revn revn
+                                 :modified-at (ct/format-inst modified-at))
                           (wrk/submit! (assoc cfg ::wrk/params params))
                           (inc total)))
                       0
-                      (get-candidates cfg))]
+                      (db/plan conn [sql:get-candidates threshold] {:fetch-size 10}))]
     {:processed total}))
 
 (defmethod ig/assert-key ::handler
@@ -53,12 +53,12 @@
 (defmethod ig/init-key ::handler
   [_ cfg]
   (fn [{:keys [props] :as task}]
-    (let [min-age (ct/duration (or (:min-age props) (::min-age cfg)))]
+    (let [threshold (-> (ct/duration (or (:min-age props) (::min-age cfg)))
+                        (ct/in-past))]
       (-> cfg
           (assoc ::db/rollback (:rollback? props))
-          (assoc ::min-age min-age)
           (assoc ::wrk/task :file-gc)
           (assoc ::wrk/priority 10)
           (assoc ::wrk/mark-retries 0)
-          (assoc ::wrk/delay 1000)
-          (db/tx-run! schedule!)))))
+          (assoc ::wrk/delay 10000)
+          (db/tx-run! schedule! threshold)))))

backend/src/app/worker.clj

@@ -77,8 +77,8 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (def ^:private sql:insert-new-task
-  "insert into task (id, name, props, queue, label, priority, max_retries, scheduled_at)
-   values (?, ?, ?, ?, ?, ?, ?, now() + ?)
+  "insert into task (id, name, props, queue, label, priority, max_retries, created_at, modified_at, scheduled_at)
+   values (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
    returning id")
 
 (def ^:private
@@ -88,7 +88,7 @@
       AND queue=?
       AND label=?
       AND status = 'new'
-      AND scheduled_at > now()")
+      AND scheduled_at > ?")
 
 (def ^:private schema:options
   [:map {:title "submit-options"}
@@ -111,17 +111,19 @@
 
   (check-options! options)
 
-  (let [duration  (ct/duration delay)
-        interval  (db/interval duration)
-        props     (db/tjson params)
-        id        (uuid/next)
-        tenant    (cf/get :tenant)
-        task      (d/name task)
-        queue     (str/ffmt "%:%" tenant (d/name queue))
-        conn      (db/get-connectable options)
-        deleted   (when dedupe
-                    (-> (db/exec-one! conn [sql:remove-not-started-tasks task queue label])
-                        :next.jdbc/update-count))]
+  (let [delay        (ct/duration delay)
+        now          (ct/now)
+        scheduled-at (-> (ct/plus now delay)
+                         (ct/truncate :millisecond))
+        props        (db/tjson params)
+        id           (uuid/next)
+        tenant       (cf/get :tenant)
+        task         (d/name task)
+        queue        (str/ffmt "%:%" tenant (d/name queue))
+        conn         (db/get-connectable options)
+        deleted      (when dedupe
+                       (-> (db/exec-one! conn [sql:remove-not-started-tasks task queue label now])
+                           (db/get-update-count)))]
 
     (l/trc :hint "submit task"
            :name task
@@ -129,11 +131,13 @@
            :queue queue
            :label label
            :dedupe (boolean dedupe)
-           :delay (ct/format-duration duration)
+           :delay (ct/format-duration delay)
            :replace (or deleted 0))
 
     (db/exec-one! conn [sql:insert-new-task id task props queue
-                        label priority max-retries interval])
+                        label priority max-retries
+                        now now scheduled-at])
+
     id))
 
 (defn invoke!

backend/src/app/worker/runner.clj

@@ -158,7 +158,9 @@
             (inst-ms (:scheduled-at task)))
       (l/wrn :hint "skiping task, rescheduled"
              :task-id task-id
-             :runner-id id)
+             :runner-id id
+             :scheduled-at (ct/format-inst (:scheduled-at task))
+             :expected-scheduled-at (ct/format-inst scheduled-at))
 
       :else
       (let [result (run-task cfg task)]
@@ -179,7 +181,8 @@
                           {:error explain
                            :status "retry"
                            :modified-at now
-                           :scheduled-at (ct/plus now delay)
+                           :scheduled-at (-> (ct/plus now delay)
+                                             (ct/truncate :millisecond))
                            :retry-num nretry}
                           {:id (:id task)})
               nil))

backend/test/backend_tests/helpers.clj

@@ -549,6 +549,44 @@
       (io/copy r sw)
       (.toString sw))))
 
+(defn parse-sse
+  [content]
+  (let [state
+        (reduce (fn [{:keys [events data event id] :as state} line]
+                  (cond
+                    ;; empty line → dispatch event if we have data
+                    (str/blank? line)
+                    (if (seq data)
+                      (-> state
+                          (update :events conj {:event (or event "message")
+                                                :data (-> (str/join "\n" data))})
+                          (assoc :data [] :event nil))
+                      state)
+
+                    ;; comment line (starts with :)
+                    (str/starts-with? line ":")
+                    state
+
+                    :else
+                    (let [[field raw-value] (str/split line #":" 2)
+                          value (some-> raw-value (str/replace #"^ " ""))]
+                      (case field
+                        "data"  (update state :data conj (or value ""))
+                        "event" (assoc state :event value)
+                        ;; ignore retry and unknown fields
+                        state))))
+                {:events [] :data [] :event nil}
+                (str/split content #"\r?\n"))
+
+        ;; handle unterminated last event (no trailing blank line)
+        state (if (seq (:data state))
+                (update state :events conj
+                        {:event (or (:event state) "message")
+                         :data (str/join "\n" (:data state))})
+                state)]
+
+    (:events state)))
+
 (defn consume-sse
   [callback]
   (let [{:keys [::yres/status ::yres/body ::yres/headers] :as response} (callback {})
@@ -558,12 +596,9 @@
     (try
       (px/exec! :virtual #(rcp/write-body-to-stream body nil output))
       (into []
-            (map (fn [event]
-                   (let [[item1 item2] (re-seq #"(.*): (.*)\n?" event)]
-
-                     [(keyword (nth item1 2))
-                      (tr/decode-str (nth item2 2))])))
-            (-> (slurp' input)
-                (str/split "\n\n")))
+            (map (fn [{:keys [event data]}]
+                   [(keyword event)
+                    (tr/decode-str data)]))
+            (parse-sse (slurp' input)))
       (finally
         (.close input)))))

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

@@ -1357,38 +1357,6 @@
         (update :pages-index d/update-vals update-container)
         (d/update-when :components d/update-vals update-container))))
 
-(defmethod migrate-data "0004-clean-shadow-color"
-  [data _]
-  (let [decode-color (sm/decoder types.color/schema:color sm/json-transformer)
-
-        clean-shadow-color
-        (fn [color]
-          (let [ref-id   (get color :id)
-                ref-file (get color :file-id)]
-            (-> (d/without-qualified color)
-                (select-keys [:opacity :color :gradient :image :ref-id :ref-file])
-                (cond-> ref-id
-                  (assoc :ref-id ref-id))
-                (cond-> ref-file
-                  (assoc :ref-file ref-file))
-                (decode-color))))
-
-        clean-shadow
-        (fn [shadow]
-          (update shadow :color clean-shadow-color))
-
-        update-object
-        (fn [object]
-          (d/update-when object :shadow #(mapv clean-shadow %)))
-
-        update-container
-        (fn [container]
-          (d/update-when container :objects d/update-vals update-object))]
-
-    (-> data
-        (update :pages-index d/update-vals update-container)
-        (d/update-when :components d/update-vals update-container))))
-
 (defmethod migrate-data "0005-deprecate-image-type"
   [data _]
   (letfn [(update-object [object]
@@ -1630,6 +1598,45 @@
   ;; as value; this migration fixes it.
   (d/update-when data :components d/update-vals d/without-nils))
 
+(defmethod migrate-data "0015-clean-shadow-color"
+  [data _]
+  (let [decode-shadow-color
+        (sm/decoder ctss/schema:color sm/json-transformer)
+
+        clean-shadow-color
+        (fn [color]
+          (let [ref-id   (get color :id)
+                ref-file (get color :file-id)]
+            (-> (d/without-qualified color)
+                (select-keys ctss/color-attrs)
+                (cond-> ref-id
+                  (assoc :ref-id ref-id))
+                (cond-> ref-file
+                  (assoc :ref-file ref-file))
+                (decode-shadow-color)
+                (d/without-nils))))
+
+        clean-shadow
+        (fn [shadow]
+          (update shadow :color clean-shadow-color))
+
+        clean-xform
+        (comp
+         (keep clean-shadow)
+         (filter ctss/valid-shadow?))
+
+        update-object
+        (fn [object]
+          (d/update-when object :shadow #(into [] clean-xform %)))
+
+        update-container
+        (fn [container]
+          (d/update-when container :objects d/update-vals update-object))]
+
+    (-> data
+        (update :pages-index d/update-vals update-container)
+        (d/update-when :components d/update-vals update-container))))
+
 (def available-migrations
   (into (d/ordered-set)
         ["legacy-2"
@@ -1689,7 +1696,6 @@
          "0002-clean-shape-interactions"
          "0003-fix-root-shape"
          "0003-convert-path-content-v2"
-         "0004-clean-shadow-color"
          "0005-deprecate-image-type"
          "0006-fix-old-texts-fills"
          "0008-fix-library-colors-v4"
@@ -1701,4 +1707,5 @@
          "0013-fix-component-path"
          "0013-clear-invalid-strokes-and-fills"
          "0014-fix-tokens-lib-duplicate-ids"
-         "0014-clear-components-nil-objects"]))
+         "0014-clear-components-nil-objects"
+         "0015-clean-shadow-color"]))

common/src/app/common/schema.cljc

@@ -36,7 +36,7 @@
 
 (defn type
   [s]
-  (m/-type s))
+  (m/type s default-options))
 
 (defn properties
   [s]
@@ -46,6 +46,10 @@
   [s]
   (m/type-properties s))
 
+(defn children
+  [s]
+  (m/children s default-options))
+
 (defn schema
   [s]
   (if (schema? s)
@@ -127,9 +131,19 @@
 
 (defn keys
   "Given a map schema, return all keys as set"
-  [schema]
-  (->> (entries schema)
-       (into #{} xf:map-key)))
+  [schema']
+  (let [schema' (m/schema schema' default-options)]
+    (case (m/type schema')
+      :map
+      (->> (entries schema')
+           (into #{} xf:map-key))
+
+      :merge
+      (->> (m/children schema')
+           (mapcat m/entries)
+           (into #{} xf:map-key))
+
+      (throw (ex-info "not supported schema type" {:type (m/type schema')})))))
 
 (defn update-properties
   [s f & args]

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

@@ -498,10 +498,10 @@
     [:map
      [:x schema:safe-number]
      [:y schema:safe-number]
-     [:c1x schema:safe-number]
-     [:c1y schema:safe-number]
-     [:c2x schema:safe-number]
-     [:c2y schema:safe-number]]]])
+     [:c1x {:optional true} schema:safe-number]
+     [:c1y {:optional true} schema:safe-number]
+     [:c2x {:optional true} schema:safe-number]
+     [:c2y {:optional true} schema:safe-number]]]])
 
 (def ^:private schema:segment
   [:multi {:title "PathSegment"

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

@@ -11,6 +11,14 @@
 
 (def styles #{:drop-shadow :inner-shadow})
 
+(def schema:color
+  [:merge {:title "ShadowColor"}
+   ctc/schema:color-attrs
+   ctc/schema:plain-color])
+
+(def color-attrs
+  (sm/keys schema:color))
+
 (def schema:shadow
   [:map {:title "Shadow"}
    [:id [:maybe ::sm/uuid]]
@@ -20,7 +28,7 @@
    [:blur ::sm/safe-number]
    [:spread ::sm/safe-number]
    [:hidden :boolean]
-   [:color ctc/schema:color]])
+   [:color schema:color]])
 
 (def check-shadow
   (sm/check-fn schema:shadow))

common/test/common_tests/types/path_data_test.cljc

@@ -116,6 +116,27 @@
     (t/is (= sample-content
              (vec pdata)))))
 
+
+;; Test the specific case where cuve-to commands comes without the
+;; optional attrs
+(t/deftest path-data-plain-to-binary-2
+  (let [plain-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 {:x 264.0 :y 634.0}}
+         {:command :curve-to :params {:x 154.0 :y 508.0}}]
+
+        binary-content
+        (path/content plain-content)]
+
+    #?(:clj
+       (t/is (= "M480.0,839.0L439.0,802.0C264.0,634.0,264.0,634.0,264.0,634.0C154.0,508.0,154.0,508.0,154.0,508.0"
+                (str binary-content)))
+
+       :cljs
+       (t/is (= "M480,839L439,802C264,634,264,634,264,634C154,508,154,508,154,508"
+                (str binary-content))))))
+
 (t/deftest path-data-from-binary
   (let [barray #?(:clj (byte-array sample-bytes)
                   :cljs (js/Int8Array.from sample-bytes))

docker/images/Dockerfile.exporter

@@ -5,7 +5,7 @@ ENV LANG=en_US.UTF-8 \
     LC_ALL=en_US.UTF-8 \
     NODE_VERSION=v22.21.1 \
     DEBIAN_FRONTEND=noninteractive \
-    PATH=/opt/node/bin:$PATH
+    PATH=/opt/node/bin:/opt/imagick/bin:$PATH
 
 RUN set -ex; \
     useradd -U -M -u 1001 -s /bin/false -d /opt/penpot penpot; \
@@ -62,6 +62,22 @@ RUN set -ex; \
       libxfixes3 \
       libxkbcommon0 \
       libxrandr2 \
+      \
+      libgomp1 \
+      libheif1 \
+      libjpeg-turbo8 \
+      liblcms2-2 \
+      libopenexr-3-1-30 \
+      libopenjp2-7 \
+      libpng16-16 \
+      librsvg2-2 \
+      libtiff6 \
+      libwebp7 \
+      libwebpdemux2 \
+      libwebpmux3 \
+      libxml2 \
+      libzip4t64 \
+      libzstd1 \
     ; \
     rm -rf /var/lib/apt/lists/*;
 
@@ -90,7 +106,8 @@ RUN set -eux; \
     chown -R penpot:penpot /opt/penpot;
 
 ARG BUNDLE_PATH="./bundle-exporter/"
-ADD --chown=penpot:penpot $BUNDLE_PATH /opt/penpot/exporter/
+COPY --chown=penpot:penpot $BUNDLE_PATH /opt/penpot/exporter/
+COPY --from=penpotapp/imagemagick:7.1.2-0 /opt/imagick /opt/imagick
 
 WORKDIR /opt/penpot/exporter
 USER penpot:penpot

frontend/src/app/main/ui/components/select.cljs

@@ -89,14 +89,14 @@
                  (let [value (rotate-option-backward options index length)]
                    (swap! state* assoc :current-value value)
                    (when (fn? on-change)
-                     (on-change (dm/str value))))
+                     (on-change value)))
 
                  (or (kbd/right-arrow? e)
                      (kbd/down-arrow? e))
                  (let [value (rotate-option-forward options index)]
                    (swap! state* assoc :current-value value)
                    (when (fn? on-change)
-                     (on-change (dm/str value))))
+                     (on-change value)))
 
                  (or (kbd/enter? e)
                      (kbd/space? e))

frontend/src/app/main/ui/static.cljs

@@ -11,6 +11,7 @@
    [app.common.data :as d]
    [app.common.pprint :as pp]
    [app.common.uri :as u]
+   [app.config :as cf]
    [app.main.data.auth :refer [is-authenticated?]]
    [app.main.data.common :as dcm]
    [app.main.data.event :as ev]
@@ -311,9 +312,10 @@
           trace      (:app.main.errors/trace data)
           instance   (:app.main.errors/instance data)]
       (with-out-str
-        (println "Hint:   " (or (:hint data) (ex-message instance) "--"))
-        (println "Prof ID:" (str (or profile-id "--")))
-        (println "Team ID:" (str (or team-id "--")))
+        (println "Hint:    " (or (:hint data) (ex-message instance) "--"))
+        (println "Prof ID: " (str (or profile-id "--")))
+        (println "Team ID: " (str (or team-id "--")))
+        (println "URI:     " cf/public-uri)
 
         (when-let [file-id (:file-id data)]
           (println "File ID:" (str file-id)))

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

@@ -303,7 +303,7 @@
         (mf/use-fn
          (mf/deps ids)
          (fn [value attr]
-           (if (or (string? value) (int? value))
+           (if (or (string? value) (number? value))
              (do
                (st/emit! (udw/trigger-bounding-box-cloaking ids))
                (binding [cts/*wasm-sync* true]
@@ -334,7 +334,7 @@
         (mf/use-fn
          (mf/deps ids)
          (fn [value attr]
-           (if (or (string? value) (int? value))
+           (if (or (string? value) (number? value))
              (do
                (st/emit! (udw/trigger-bounding-box-cloaking ids))
                (binding [cts/*wasm-sync* true]
@@ -359,7 +359,7 @@
         (mf/use-fn
          (mf/deps ids)
          (fn [value]
-           (if (or (string? value) (int? value))
+           (if (or (string? value) (number? value))
              (do
                (st/emit! (udw/trigger-bounding-box-cloaking ids))
                (binding [cts/*wasm-sync* true]

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -157,11 +157,11 @@
         color-name       (dm/get-in src-colors [color-id :name])
 
         has-multiple-colors (uc/multiple? color)
-        library-color?   (and (or (:id color) (:ref-id color)) color-name (not has-multiple-colors))
-        gradient-color?  (and (not has-multiple-colors)
+        library-color?   (and (or (:id color) (:ref-id color)) color-name (not ^boolean has-multiple-colors))
+        gradient-color?  (and (not ^boolean has-multiple-colors)
                               (:gradient color)
                               (dm/get-in color [:gradient :type]))
-        image-color?     (and (not has-multiple-colors)
+        image-color?     (and (not ^boolean has-multiple-colors)
                               (:image color))
 
         editing-text*    (mf/use-state false)
@@ -236,7 +236,7 @@
          (mf/deps disable-gradient disable-opacity disable-image disable-picker on-change on-close on-open tokens)
          (fn [color pos tab]
            (let [color (cond
-                         has-multiple-colors
+                         ^boolean has-multiple-colors
                          {:color default-color
                           :opacity 1}
 
@@ -355,6 +355,7 @@
        [:> color-info-wrapper* {:class (stl/css-case :color-name-wrapper true
                                                      :library-name-wrapper true)
                                 :handle-click-color handle-click-color
+                                :opacity false
                                 :color color}
         [:*
          [:div {:class (stl/css :color-name)
@@ -369,11 +370,11 @@
 
        gradient-color?
        [:> color-info-wrapper* {:class (stl/css-case :color-name-wrapper true
-                                                     :no-opacity disable-opacity
+                                                     :no-opacity ^boolean disable-opacity
                                                      :gradient-name-wrapper true)
                                 :handle-click-color handle-click-color
                                 :color color
-                                :opacity true
+                                :opacity (not ^boolean disable-opacity)
                                 :select-on-focus select-on-focus
                                 :on-focus on-focus'
                                 :on-blur on-blur'
@@ -383,10 +384,10 @@
 
        image-color?
        [:> color-info-wrapper* {:class (stl/css-case :color-name-wrapper true
-                                                     :no-opacity disable-opacity)
+                                                     :no-opacity ^boolean disable-opacity)
                                 :handle-click-color handle-click-color
                                 :color color
-                                :opacity true
+                                :opacity (not ^boolean disable-opacity)
                                 :select-on-focus select-on-focus
                                 :on-focus on-focus'
                                 :on-blur on-blur'
@@ -396,19 +397,20 @@
 
        :else
        [:> color-info-wrapper* {:class (stl/css-case :color-name-wrapper true
-                                                     :no-opacity (or disable-opacity
-                                                                     has-multiple-colors)
+                                                     :no-opacity (or ^boolean disable-opacity
+                                                                     ^boolean has-multiple-colors)
                                                      :editing is-editing-text)
                                 :handle-click-color handle-click-color
                                 :color color
-                                :opacity true
+                                :opacity (not (or ^boolean disable-opacity
+                                                  ^boolean has-multiple-colors))
                                 :select-on-focus select-on-focus
                                 :on-focus on-focus'
                                 :on-blur on-blur'
                                 :on-opacity-change on-opacity-change}
 
         [:span {:class (stl/css :color-input-wrapper)}
-         [:> color-input* {:value (if has-multiple-colors
+         [:> color-input* {:value (if ^boolean has-multiple-colors
                                     ""
                                     color-without-hash)
                            :placeholder (tr "settings.multiple")

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss

@@ -186,6 +186,7 @@
   align-items: center;
   block-size: $sz-32;
   inline-size: px2rem(60);
+  padding-inline-start: var(--sp-xs);
   border-radius: 0 $br-8 $br-8 0;
   border: $b-1 solid var(--opacity-input-boder-color);
   background-color: var(--opacity-input-background-color);