From 5e84bda404b7fe08b780631b7b5c9b6d5d971326 Mon Sep 17 00:00:00 2001
From: Xaviju <xavier.julian@kaleidos.net>
Date: Mon, 29 Sep 2025 09:53:15 +0200
Subject: [PATCH] :tada: Add SVG panel to inspect styles tab (#7373)

---
 frontend/src/app/main/ui/inspect/styles.cljs  | 23 ++++++-----
 .../main/ui/inspect/styles/panels/svg.cljs    | 38 +++++++++++++++++++
 2 files changed, 51 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/app/main/ui/inspect/styles/panels/svg.cljs

diff --git a/frontend/src/app/main/ui/inspect/styles.cljs b/frontend/src/app/main/ui/inspect/styles.cljs
index 98eed8281e..f5f7a4c3c3 100644
--- a/frontend/src/app/main/ui/inspect/styles.cljs
+++ b/frontend/src/app/main/ui/inspect/styles.cljs
@@ -19,6 +19,7 @@
    [app.main.ui.inspect.styles.panels.geometry :refer [geometry-panel*]]
    [app.main.ui.inspect.styles.panels.layout :refer [layout-panel*]]
    [app.main.ui.inspect.styles.panels.layout-element :refer [layout-element-panel*]]
+   [app.main.ui.inspect.styles.panels.svg :refer [svg-panel*]]
    [app.main.ui.inspect.styles.panels.tokens-panel :refer [tokens-panel*]]
    [app.main.ui.inspect.styles.panels.variants-panel :refer [variants-panel*]]
    [app.main.ui.inspect.styles.panels.visibility :refer [visibility-panel*]]
@@ -83,16 +84,11 @@
 
         tokens-lib         (mf/deref refs/tokens-lib)
         active-themes      (mf/deref refs/workspace-active-theme-paths-no-hidden)
-        active-sets
-        (mf/with-memo [tokens-lib]
-          (some-> tokens-lib (ctob/get-active-themes-set-names)))
-        active-tokens
-        (mf/with-memo [tokens-lib]
-          (if tokens-lib
-            (ctob/get-tokens-in-active-sets tokens-lib)
-            {}))
-        resolved-active-tokens
-        (sd/use-resolved-tokens* active-tokens)
+        active-sets        (mf/with-memo [tokens-lib]
+                             (some-> tokens-lib (ctob/get-active-themes-set-names)))
+        active-tokens      (mf/with-memo [tokens-lib]
+                             (some-> tokens-lib (ctob/get-tokens-in-active-sets)))
+        resolved-active-tokens (sd/use-resolved-tokens* active-tokens)
         has-visibility-props? (mf/use-fn
                                (fn [shape]
                                  (let [shape-type (:type shape)]
@@ -169,6 +165,13 @@
                [:> visibility-panel* {:shapes shapes
                                       :objects objects
                                       :resolved-tokens resolved-active-tokens}]]))
+          ;; SVG PANEL
+          :svg
+          (let [shape (first shapes)]
+            (when (seq (:svg-attrs shape))
+              [:> style-box* {:panel :svg}
+               [:> svg-panel* {:shape shape
+                               :objects objects}]]))
           ;; DEFAULT WIP
           [:> style-box* {:panel panel}
            [:div color-space]])])]))
diff --git a/frontend/src/app/main/ui/inspect/styles/panels/svg.cljs b/frontend/src/app/main/ui/inspect/styles/panels/svg.cljs
new file mode 100644
index 0000000000..79ab7d4a71
--- /dev/null
+++ b/frontend/src/app/main/ui/inspect/styles/panels/svg.cljs
@@ -0,0 +1,38 @@
+;; 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.ui.inspect.styles.panels.svg
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data :as d]
+   [app.common.data.macros :as dm]
+   [app.main.ui.inspect.styles.rows.properties-row :refer [properties-row*]]
+   [cuerdas.core :as str]
+   [rumext.v2 :as mf]))
+
+(defn- map->css [attr]
+  (->> attr
+       (map (fn [[attr-key attr-value]] (str (d/name attr-key) ":" attr-value)))
+       (str/join "; ")))
+
+(mf/defc svg-panel*
+  [{:keys [shape _objects]}]
+  [:div {:class (stl/css :svg-panel)}
+   [:div {:key (:id shape) :class (stl/css :svg-shape)}
+    (for [[attr-key attr-value] (:svg-attrs shape)]
+      (if (map? attr-value)
+        (for [[sub-attr-key sub-attr-value] attr-value]
+          (let [property-value (map->css sub-attr-value)]
+            [:> properties-row* {:key (dm/str "svg-property-" (d/name sub-attr-key))
+                                 :term (d/name sub-attr-key)
+                                 :detail (dm/str sub-attr-value)
+                                 :property property-value
+                                 :copiable false}]))
+        [:> properties-row* {:key (dm/str "svg-property-" (d/name attr-key))
+                             :term (d/name attr-key)
+                             :detail (dm/str attr-value)
+                             :property (dm/str attr-key ": " attr-value ";")
+                             :copiable false}]))]])