diff --git a/frontend/src/uxbox/main/refs.cljs b/frontend/src/uxbox/main/refs.cljs
index ea00dbc0a..97be5025c 100644
--- a/frontend/src/uxbox/main/refs.cljs
+++ b/frontend/src/uxbox/main/refs.cljs
@@ -65,6 +65,9 @@
          (get-in % [:workspace-data page-id]))
       (l/derived st/state)))
 
+(def workspace-objects
+  (l/derived :objects workspace-data))
+
 (defn object-by-id
   [id]
   (letfn [(selector [state]
@@ -84,15 +87,6 @@
                    (vec))))]
     (l/derived selector st/state =)))
 
-(def frames
-  (letfn [(selector [data]
-            (->> (get-in data [:objects uuid/zero])
-                 :shapes
-                 (map #(get-in data [:objects %]))
-                 (filter #(= (:type %) :frame))
-                 (sort-by :name)))]
-    (l/derived selector workspace-data)))
-
 (defn is-child-selected?
   [id]
   (letfn [(selector [state]
@@ -140,15 +134,8 @@
 
 ;; ---- Viewer refs
 
-(def viewer-data-ref
+(def viewer-data
   (l/derived :viewer-data st/state))
 
-(def viewer-local-ref
+(def viewer-local
   (l/derived :viewer-local st/state))
-
-(def interactions-mode
-  (l/derived :interactions-mode viewer-local-ref))
-
-(def show-interactions?
-  (l/derived :show-interactions? viewer-local-ref))
-
diff --git a/frontend/src/uxbox/main/ui/viewer.cljs b/frontend/src/uxbox/main/ui/viewer.cljs
index 077984905..00cd21334 100644
--- a/frontend/src/uxbox/main/ui/viewer.cljs
+++ b/frontend/src/uxbox/main/ui/viewer.cljs
@@ -32,8 +32,8 @@
   (:import goog.events.EventType))
 
 (mf/defc main-panel
-  [{:keys [data zoom index]}]
-  (let [locale  (i18n/use-locale)
+  [{:keys [data local index]}]
+  (let [locale  (mf/deref i18n/locale)
         frames  (:frames data [])
         objects (:objects data)
         frame   (get frames index)]
@@ -49,7 +49,8 @@
 
        :else
        [:& frame-svg {:frame frame
-                      :zoom zoom
+                      :show-interactions? (:show-interactions? local)
+                      :zoom (:zoom local)
                       :objects objects}])]))
 
 (mf/defc viewer-content
@@ -101,7 +102,7 @@
          [:& thumbnails-panel {:index index
                                :data data}])
        [:& main-panel {:data data
-                       :zoom (:zoom local)
+                       :local local
                        :index index}]]]]))
 
 
@@ -113,8 +114,8 @@
    (mf/deps page-id token)
    #(st/emit! (dv/initialize page-id token)))
 
-  (let [data (mf/deref refs/viewer-data-ref)
-        local (mf/deref refs/viewer-local-ref)]
+  (let [data (mf/deref refs/viewer-data)
+        local (mf/deref refs/viewer-local)]
     (when data
       [:& viewer-content {:index index
                           :local local
diff --git a/frontend/src/uxbox/main/ui/viewer/shapes.cljs b/frontend/src/uxbox/main/ui/viewer/shapes.cljs
index 64383d2cb..34368e663 100644
--- a/frontend/src/uxbox/main/ui/viewer/shapes.cljs
+++ b/frontend/src/uxbox/main/ui/viewer/shapes.cljs
@@ -23,16 +23,11 @@
    [uxbox.main.ui.shapes.path :as path]
    [uxbox.main.ui.shapes.rect :as rect]
    [uxbox.main.ui.shapes.text :as text]
+   [uxbox.util.object :as obj]
    [uxbox.util.geom.matrix :as gmt]
    [uxbox.util.geom.point :as gpt]
    [uxbox.util.geom.shapes :as geom]))
 
-;; TODO: reivisit show interactions ref
-;; TODO: revisit refs/frames
-
-
-;; --- Interaction actions (in viewer mode)
-
 (defn on-mouse-down
   [event {:keys [interactions] :as shape}]
   (let [interaction (first (filter #(= (:action-type % :click)) interactions))]
@@ -49,9 +44,14 @@
   (let [shape-wrapper (shape-wrapper-factory objects)
         frame-shape   (frame/frame-shape shape-wrapper)]
     (mf/fnc frame-wrapper
-      [{:keys [shape] :as props}]
-      (let [childs (mapv #(get objects %) (:shapes shape))
-            shape (geom/transform-shape shape)]
+      {::mf/wrap-props false}
+      [props]
+      (let [shape (unchecked-get props "shape")
+            childs (mapv #(get objects %) (:shapes shape))
+            shape  (geom/transform-shape shape)
+            props  (obj/merge! #js {} props
+                               #js {:shape shape
+                                    :childs childs})]
         [:& frame-shape {:shape shape :childs childs}]))))
 
 (defn group-wrapper-factory
@@ -59,11 +59,13 @@
   (let [shape-wrapper (shape-wrapper-factory objects)
         group-shape   (group/group-shape shape-wrapper)]
     (mf/fnc group-wrapper
-      [{:keys [shape frame] :as props}]
-      (let [children (mapv #(get objects %) (:shapes shape))]
-        [:& group-shape {:frame frame
-                         :shape shape
-                         :children children}]))))
+      {::mf/wrap-props false}
+      [props]
+      (let [shape  (unchecked-get props "shape")
+            childs (mapv #(get objects %) (:shapes shape))
+            props  (obj/merge! #js {} props #
+                               js {:childs childs})]
+        [:> group-shape props]))))
 
 (defn generic-wrapper-factory
   [component]
@@ -73,6 +75,7 @@
     (let [{:keys [x y width height]
            :as shape} (->> (unchecked-get props "shape")
                            (geom/selection-rect-shape))
+
           show-interactions? (unchecked-get props "show-interactions?")
           on-mouse-down (mf/use-callback
                          (mf/deps shape)
@@ -101,12 +104,16 @@
 (defn shape-wrapper-factory
   [objects]
   (mf/fnc shape-wrapper
-    [{:keys [frame shape] :as props}]
-    (let [group-wrapper (mf/use-memo (mf/deps objects)
-                                     #(group-wrapper-factory objects))]
+    {::mf/wrap-props false}
+    [props]
+    (let [group-wrapper (mf/use-memo (mf/deps objects) #(group-wrapper-factory objects))
+          shape (unchecked-get props "shape")
+          frame (unchecked-get props "frame")
+          show-interactions? (unchecked-get props "show-interactions?")]
       (when (and shape (not (:hidden shape)))
         (let [shape (geom/transform-shape frame shape)
-              opts #js {:shape shape}]
+              opts #js {:shape shape
+                        :show-interactions? show-interactions?}]
           (case (:type shape)
             :curve  [:> path-wrapper opts]
             :text   [:> text-wrapper opts]
@@ -115,12 +122,14 @@
             :path   [:> path-wrapper opts]
             :image  [:> image-wrapper opts]
             :circle [:> circle-wrapper opts]
-            :group  [:> group-wrapper {:shape shape :frame frame}]
-            nil))))))
+            :group  [:> group-wrapper
+                     {:shape shape
+                      :frame frame
+                      :show-interactions? show-interactions?}]))))))
 
 (mf/defc frame-svg
   {::mf/wrap [mf/memo]}
-  [{:keys [objects frame zoom] :or {zoom 1} :as props}]
+  [{:keys [objects frame zoom show-interactions?] :or {zoom 1} :as props}]
   (let [modifier (-> (gpt/point (:x frame) (:y frame))
                      (gpt/negate)
                      (gmt/translate-matrix))
@@ -145,5 +154,7 @@
            :version "1.1"
            :xmlnsXlink "http://www.w3.org/1999/xlink"
            :xmlns "http://www.w3.org/2000/svg"}
-     [:& wrapper {:shape frame :view-box vbox}]]))
+     [:& wrapper {:shape frame
+                  :show-interactions? show-interactions?
+                  :view-box vbox}]]))
 
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs
index 0ab02a809..33937badc 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs
@@ -2,558 +2,77 @@
 ;; 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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
-;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs SL
 
 (ns uxbox.main.ui.workspace.sidebar.options.interactions
   (:require
    [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
-   [uxbox.main.data.lightbox :as udl]
+   [uxbox.common.pages :as cp]
    [uxbox.main.data.workspace :as dw]
    [uxbox.main.refs :as refs]
    [uxbox.main.store :as st]
-   [uxbox.main.ui.colorpicker :as cp]
    [uxbox.main.ui.components.dropdown :refer [dropdown]]
-   [uxbox.util.data :refer [read-string]]
    [uxbox.util.dom :as dom]
-   [uxbox.util.i18n :refer [tr]]))
+   [uxbox.util.i18n :as i18n :refer [t]]))
 
 (mf/defc interactions-menu
   [{:keys [shape] :as props}]
-  (let [interaction (first (:interactions shape)) ;; TODO: in the future we may have several interactions in one shape
-        destination (first (deref (refs/objects-by-id [(:destination interaction)])))
-        frames (mf/deref refs/frames)
+  (let [locale      (mf/deref i18n/locale)
+        objects     (deref refs/workspace-objects)
+        interaction (first (:interactions shape))  ; TODO: in the
+                                                   ; future we may
+                                                   ; have several
+                                                   ; interactions in
+                                                   ; one shape
+
+        destination (get objects (:destination interaction))
+        frames      (mf/use-memo (mf/deps objects)
+                                 #(cp/select-frames objects))
+
         show-frames-dropdown? (mf/use-state false)
 
-        on-set-blur
-          #(reset! show-frames-dropdown? false)
+        on-set-blur #(reset! show-frames-dropdown? false)
+        on-navigate #(st/emit! (dw/select-shapes #{(:id destination)}))
 
         on-select-destination
-          #(if (nil? %)
+        (fn [dest]
+          (if (nil? dest)
             (st/emit! (dw/update-shape (:id shape) {:interactions []}))
             (st/emit! (dw/update-shape (:id shape) {:interactions [{:event-type :click
                                                                     :action-type :navigate
-                                                                    :destination %}]})))
+                                                                    :destination dest}]}))))]
 
-        on-navigate
-          #(st/emit! (dw/select-shapes #{(:id destination)}))]
-
-    (if (not shape) 
+    (if (not shape)
       [:*
        [:div.interactions-help-icon i/interaction]
-       [:div.interactions-help (tr "workspace.options.select-a-shape")]
+       [:div.interactions-help (t locale "workspace.options.select-a-shape")]
        [:div.interactions-help-icon i/play]
-       [:div.interactions-help (tr "workspace.options.use-play-button")]]
+       [:div.interactions-help (t locale "workspace.options.use-play-button")]]
 
      [:div.element-set {:on-blur on-set-blur}
        [:div.element-set-title
-        [:span (tr "workspace.options.navigate-to")]]
+        [:span (t locale "workspace.options.navigate-to")]]
        [:div.element-set-content
         [:div.row-flex
          [:div.custom-select.flex-grow {:on-click #(reset! show-frames-dropdown? true)}
           (if destination
             [:span (:name destination)]
-            [:span (tr "workspace.options.select-artboard")])
+            [:span (t locale "workspace.options.select-artboard")])
           [:span.dropdown-button i/arrow-down]
            [:& dropdown {:show @show-frames-dropdown?
                          :on-close #(reset! show-frames-dropdown? false)}
             [:ul.custom-select-dropdown
-             [:li.dropdown-separator {:key nil
-                                      :on-click #(on-select-destination nil)}
-              (tr "workspace.options.none")]
+             [:li.dropdown-separator
+              {:on-click #(on-select-destination nil)}
+              (t locale "workspace.options.none")]
+
              (for [frame frames]
                (when (not= (:id frame) (:id shape)) ; A frame cannot navigate to itself
                  [:li {:key (:id frame)
                        :on-click #(on-select-destination (:id frame))}
                   (:name frame)]))]]]
          [:span.navigate-icon {on-click on-navigate} i/navigate]]]])))
-
-;; --- Helpers
-
-;; (defn- on-change
-;;   ([form attr event]
-;;    (dom/prevent-default event)
-;;    (let [value (dom/event->value event)
-;;          value (read-string value)]
-;;      (swap! form assoc attr value)))
-;;   ([form attr keep event]
-;;    (let [data (select-keys @form keep)]
-;;      (reset! form data)
-;;      (on-change form attr event))))
-
-;; ;; --- Interactions List
-
-;; (defn- translate-trigger-name
-;;   [trigger]
-;;   (case trigger
-;;     :click "Click"
-;;     :doubleclick "Double Click"
-;;     :rightclick "Right Click"
-;;     :hover "Hover"
-;;     :mousein "Mouse In"
-;;     :mouseout "Mouse Out"
-;;     ;; :swiperight "Swipe Right"
-;;     ;; :swipeleft "Swipe Left"
-;;     ;; :swipedown "Swipe Down"
-;;     ;; :touchandhold "Touch and Hold"
-;;     ;; :holdrelease "Hold release"
-;;     (pr-str trigger)))
-
-;; (mf/defc interactions-list
-;;   [{:keys [shape form] :as props}]
-;;   (letfn [(on-edit [item event]
-;;             (dom/prevent-default event)
-;;             (reset! form item))
-;;           (delete [item]
-;;             (let [sid (:id shape)
-;;                   id (:id item)]
-;;               (st/emit! (dw/delete-interaction sid id))))
-;;           (on-delete [item event]
-;;             (dom/prevent-default event)
-;;             (let [delete (partial delete item)]
-;;               (udl/open! :confirm {:on-accept delete})))]
-;;     [:ul.element-list
-;;      (for [item (vals (:interactions shape))
-;;            :let [key (pr-str (:id item))]]
-;;        [:li {:key key}
-;;         [:div.list-icon i/action]
-;;         [:span (translate-trigger-name (:trigger item))]
-;;         [:div.list-actions
-;;          [:a {:on-click (partial on-edit item)} i/pencil]
-;;          [:a {:on-click (partial on-delete item)} i/trash]]])]))
-
-;; ;; --- Trigger Input
-
-;; (mf/defc trigger-input
-;;   [{:keys [form] :as props}]
-;;   ;; (mf/use-effect
-;;   ;;  {:init #(when-not (:trigger @form) (swap! form assoc :trigger :click))
-;;   ;;   :deps true})
-;;   [:div
-;;    [:span "Trigger"]
-;;    [:div.row-flex
-;;     [:select.input-select {:placeholder "Choose a trigger"
-;;                            :on-change (partial on-change form :trigger)
-;;                            :value (pr-str (:trigger @form))}
-;;      [:option {:value ":click"} "Click"]
-;;      [:option {:value ":doubleclick"} "Double-click"]
-;;      [:option {:value ":rightclick"} "Right-click"]
-;;      [:option {:value ":hover"} "Hover"]
-;;      [:option {:value ":mousein"} "Mouse in"]
-;;      [:option {:value ":mouseout"} "Mouse out"]
-;;      #_[:option {:value ":swiperight"} "Swipe right"]
-;;      #_[:option {:value ":swipeleft"} "Swipe left"]
-;;      #_[:option {:value ":swipedown"} "Swipe dpwn"]
-;;      #_[:option {:value ":touchandhold"} "Touch and hold"]
-;;      #_[:option {:value ":holdrelease"} "Hold release"]
-;;      #_[:option {:value ":keypress"} "Key press"]
-;;      #_[:option {:value ":pageisloaded"} "Page is loaded"]
-;;      #_[:option {:value ":windowscroll"} "Window is scrolled to"]]]])
-
-;; ;; --- URL Input
-
-;; (mf/defc url-input
-;;   [form]
-;;   [:div
-;;    [:span "Url"]
-;;    [:div.row-flex
-;;     [:input.input-text
-;;      {:placeholder "http://"
-;;       :on-change (partial on-change form :url)
-;;       :value (:url @form "")
-;;       :type "url"}]]])
-
-;; ;; --- Elements Input
-
-;; (defn- collect-shapes
-;;   [state page]
-;;   (let [shapes-by-id (:shapes state)
-;;         shapes (get-in state [:pages page :shapes])]
-;;     (letfn [(resolve-shape [acc id]
-;;               (let [shape (get shapes-by-id id)]
-;;                 (if (= (:type shape) :group)
-;;                   (reduce resolve-shape (conj acc shape) (:items shape))
-;;                   (conj acc shape))))]
-;;       (reduce resolve-shape [] shapes))))
-
-;; (mf/defc elements-input
-;;   [{:keys [page-id form] :as props}]
-;;   (let [shapes (collect-shapes @st/state page-id)]
-;;     [:div
-;;      [:span "Element"]
-;;      [:div.row-flex
-;;       [:select.input-select
-;;        {:placeholder "Choose an element"
-;;         :on-change (partial on-change form :element)
-;;         :value (pr-str (:element @form))}
-;;        [:option {:value "nil"} "---"]
-;;        (for [shape shapes
-;;              :let [key (pr-str (:id shape))]]
-;;          [:option {:key key :value key} (:name shape)])]]]))
-
-;; ;; --- Page Input
-
-;; (mf/defc pages-input
-;;   [form-ref path]
-;;   ;; FIXME: react on ref
-;;   #_(let [pages (mx/react refs/selected-project-pages)]
-;;     (when (and (not (:page @form-ref))
-;;                (pos? (count pages)))
-;;       (swap! form-ref assoc :page (:id (first pages))))
-;;     [:div
-;;      [:span "Page"]
-;;      [:div.row-flex
-;;       [:select.input-select {:placeholder "Choose a page"
-;;                              :on-change (partial on-change form-ref :page)
-;;                              :value (pr-str (:page @form-ref))}
-;;        (for [page pages
-;;              :let [key (pr-str (:id page))]]
-;;          [:option {:key key :value key} (:name page)])]]]))
-
-;; ;; --- Animation
-
-;; (mf/defc animation-input
-;;   [{:keys [form] :as props}]
-;;   (when-not (:action @form)
-;;     (swap! form assoc :animation :none))
-;;   [:div
-;;    [:span "Animation"]
-;;    [:div.row-flex
-;;     [:select.input-select
-;;      {:placeholder "Animation"
-;;       :on-change (partial on-change form :animation)
-;;       :value (pr-str (:animation @form))}
-;;      [:option {:value ":none"} "None"]
-;;      [:option {:value ":fade"} "Fade"]
-;;      [:option {:value ":slide"} "Slide"]]]])
-
-;; ;; --- MoveTo Input
-
-;; (mf/defc moveto-input
-;;   [{:keys [form] :as props}]
-;;   (when-not (:moveto-x @form)
-;;     (swap! form assoc :moveto-x 0))
-;;   (when-not (:moveto-y @form)
-;;     (swap! form assoc :moveto-y 0))
-;;   [:div
-;;    [:span "Move to position"]
-;;    [:div.row-flex
-;;     [:div.input-element.pixels
-;;      [:input.input-text
-;;       {:placeholder "X"
-;;        :on-change (partial on-change form :moveto-x)
-;;        :type "number"
-;;        :value (:moveto-x @form "")}]]
-;;     [:div.input-element.pixels
-;;      [:input.input-text
-;;       {:placeholder "Y"
-;;        :on-change (partial on-change form :moveto-y)
-;;        :type "number"
-;;        :value (:moveto-y @form "")}]]]])
-
-;; ;; --- MoveBy Input
-
-;; (mf/defc moveby-input
-;;   [{:keys [form] :as props}]
-;;   (when-not (:moveby-x @form)
-;;     (swap! form assoc :moveby-x 0))
-;;   (when-not (:moveby-y @form)
-;;     (swap! form assoc :moveby-y 0))
-;;   [:div
-;;    [:span "Move to position"]
-;;    [:div.row-flex
-;;     [:div.input-element.pixels
-;;      [:input.input-text
-;;       {:placeholder "X"
-;;        :on-change (partial on-change form :moveby-x)
-;;        :type "number"
-;;        :value (:moveby-x @form "")}]]
-;;     [:div.input-element.pixels
-;;      [:input.input-text
-;;       {:placeholder "Y"
-;;        :on-change (partial on-change form :moveby-y)
-;;        :type "number"
-;;        :value (:moveby-y @form "")}]]]])
-
-;; ;; --- Opacity Input
-
-;; (mf/defc opacity-input
-;;   [{:keys [form] :as props}]
-;;   (when-not (:opacity @form)
-;;     (swap! form assoc :opacity 100))
-;;   [:div
-;;    [:span "Opacity"]
-;;    [:div.row-flex
-;;     [:div.input-element.percentail
-;;      [:input.input-text
-;;       {:placeholder "%"
-;;        :on-change (partial on-change form :opacity)
-;;        :min "0"
-;;        :max "100"
-;;        :type "number"
-;;        :value (:opacity @form "")}]]]])
-
-;; ;; --- Rotate Input
-
-;; ;; (mx/defc rotate-input
-;; ;;   [form]
-;; ;;   [:div
-;; ;;    [:span "Rotate (dg)"]
-;; ;;    [:div.row-flex
-;; ;;     [:div.input-element.degrees
-;; ;;      [:input.input-text
-;; ;;       {:placeholder "dg"
-;; ;;        :on-change (partial on-change form :rotation)
-;; ;;        :type "number"
-;; ;;        :value (:rotation @form "")}]]]])
-
-;; ;; --- Resize Input
-
-;; (mf/defc resize-input
-;;   [{:keys [form] :as props}]
-;;   [:div
-;;    [:span "Resize"]
-;;    [:div.row-flex
-;;     [:div.input-element.pixels
-;;      [:input.input-text
-;;       {:placeholder "Width"
-;;        :on-change (partial on-change form :resize-width)
-;;        :type "number"
-;;        :value (:resize-width @form "")}]]
-;;     [:div.input-element.pixels
-;;      [:input.input-text
-;;       {:placeholder "Height"
-;;        :on-change (partial on-change form :resize-height)
-;;        :type "number"
-;;        :value (:resize-height @form "")}]]]])
-
-;; ;; --- Color Input
-
-;; (mf/defc colorpicker
-;;   [{:keys [x y on-change value]}]
-;;   (let [left (- x 260)
-;;         top (- y 50)]
-;;     [:div.colorpicker-tooltip
-;;      {:style {:left (str left "px")
-;;               :top (str top "px")}}
-
-;;      (cp/colorpicker
-;;       :theme :small
-;;       :value value
-;;       :on-change on-change)]))
-
-;; (defmethod lbx/render-lightbox :interactions/colorpicker
-;;   [params]
-;;   (colorpicker params))
-
-;; (mf/defc color-input
-;;   [{:keys [form] :as props}]
-;;   (when-not (:fill-color @form)
-;;     (swap! form assoc :fill-color "#000000"))
-;;   (when-not (:stroke-color @form)
-;;     (swap! form assoc :stroke-color "#000000"))
-;;   (letfn [(on-change [attr color]
-;;             (swap! form assoc attr color))
-;;           (on-change-fill-color [event]
-;;             (let [value (dom/event->value event)]
-;;               (when (color? value)
-;;                 (on-change :fill-color value))))
-;;           (on-change-stroke-color [event]
-;;             (let [value (dom/event->value event)]
-;;               (when (color? value)
-;;                 (on-change :stroke-color value))))
-;;           (show-picker [attr event]
-;;             (let [x (.-clientX event)
-;;                   y (.-clientY event)
-;;                   opts {:x x :y y
-;;                         :on-change (partial on-change attr)
-;;                         :value (get @form attr)
-;;                         :transparent? true}]
-;;               (udl/open! :interactions/colorpicker opts)))]
-;;     (let [stroke-color (:stroke-color @form)
-;;           fill-color (:fill-color @form)]
-;;       [:div
-;;        [:div.row-flex
-;;         [:div.column-half
-;;          [:span "Fill"]
-;;          [:div.color-data
-;;           [:span.color-th
-;;            {:style {:background-color fill-color}
-;;             :on-click (partial show-picker :fill-color)}]
-;;           [:div.color-info
-;;            [:input
-;;             {:on-change on-change-fill-color
-;;              :value fill-color}]]]]
-;;         [:div.column-half
-;;          [:span "Stroke"]
-;;          [:div.color-data
-;;           [:span.color-th
-;;            {:style {:background-color stroke-color}
-;;             :on-click (partial show-picker :stroke-color)}]
-;;           [:div.color-info
-;;            [:input
-;;             {:on-change on-change-stroke-color
-;;              :value stroke-color}]]]]]])))
-
-;; ;; --- Easing Input
-
-;; (mf/defc easing-input
-;;   [{:keys [form] :as props}]
-;;   (when-not (:easing @form)
-;;     (swap! form assoc :easing :linear))
-;;   [:div
-;;    [:span "Easing"]
-;;    [:div.row-flex
-;;     [:select.input-select
-;;      {:placeholder "Easing"
-;;       :on-change (partial on-change form :easing)
-;;       :value (pr-str (:easing @form))}
-;;      [:option {:value ":linear"} "Linear"]
-;;      [:option {:value ":easein"} "Ease in"]
-;;      [:option {:value ":easeout"} "Ease out"]
-;;      [:option {:value ":easeinout"} "Ease in out"]]]])
-
-;; ;; --- Duration Input
-
-;; (mf/defc duration-input
-;;   [{:keys [form] :as props}]
-;;   (when-not (:duration @form)
-;;     (swap! form assoc :duration 300))
-;;   (when-not (:delay @form)
-;;     (swap! form assoc :delay 0))
-;;   [:div
-;;    [:span "Duration  |  Delay"]
-;;    [:div.row-flex
-;;     [:div.input-element.miliseconds
-;;      [:input.input-text
-;;       {:placeholder "Duration"
-;;        :type "number"
-;;        :on-change (partial on-change form :duration)
-;;        :value (pr-str (:duration @form))}]]
-;;     [:div.input-element.miliseconds
-;;      [:input.input-text {:placeholder "Delay"
-;;                          :type "number"
-;;                          :on-change (partial on-change form :delay)
-;;                          :value (pr-str (:delay @form))}]]]])
-
-;; ;; --- Action Input
-
-;; (mf/defc action-input
-;;   [{:keys [shape form] :as props}]
-;;   ;; (when-not (:action @form)
-;;   ;;   (swap! form assoc :action :show))
-;;   (let [form-data (deref form)
-;;         simple? #{:gotourl :gotopage}
-;;         elements? (complement simple?)
-;;         animation? #{:show :hide :toggle}
-;;         only-easing? (complement animation?)]
-;;     [:div
-;;      [:span "Action"]
-;;      [:div.row-flex
-;;       [:select.input-select
-;;        {:placeholder "Choose an action"
-;;         :on-change (partial on-change form :action [:trigger])
-;;         :value (pr-str (:action form-data))}
-;;        [:option {:value ":show"} "Show"]
-;;        [:option {:value ":hide"} "Hide"]
-;;        [:option {:value ":toggle"} "Toggle"]
-;;        ;; [:option {:value ":moveto"} "Move to"]
-;;        [:option {:value ":moveby"} "Move by"]
-;;        [:option {:value ":opacity"} "Opacity"]
-;;        [:option {:value ":size"} "Size"]
-;;        [:option {:value ":color"} "Color"]
-;;        ;; [:option {:value ":rotate"} "Rotate"]
-;;        [:option {:value ":gotopage"} "Go to page"]
-;;        [:option {:value ":gotourl"} "Go to URL"]
-;;        #_[:option {:value ":goback"} "Go back"]
-;;        [:option {:value ":scrolltoelement"} "Scroll to element"]]]
-
-;;      (case (:action form-data)
-;;        :gotourl   [:& url-input {:form form}]
-;;        ;; :gotopage (pages-input form)
-;;        :color     [:& color-input {:form form}]
-;;        ;; :rotate (rotate-input form)
-;;        :size      [:& resize-input {:form form}]
-;;        :moveto    [:& moveto-input {:form form}]
-;;        :moveby    [:& moveby-input {:form form}]
-;;        :opacity   [:& opacity-input {:form form}]
-;;        nil)
-
-;;      (when (elements? (:action form-data))
-;;        [:& elements-input {:page-id (:page shape)
-;;                            :form form}])
-
-;;      (when (and (animation? (:action form-data))
-;;                 (:element form-data))
-;;        [:& animation-input {:form form}])
-
-;;      (when (or (not= (:animation form-data :none) :none)
-;;                (and (only-easing? (:action form-data))
-;;                     (:element form-data)))
-;;        [:*
-;;         [:& easing-input {:form form}]
-;;         [:& duration-input {:form form}]])]))
-
-
-;; ;; --- Form
-
-;; (mf/defc interactions-form
-;;   [{:keys [shape form] :as props}]
-;;   (letfn [(on-submit [event]
-;;             (dom/prevent-default event)
-;;             (let [sid (:id shape)
-;;                   data (deref form)]
-;;               (st/emit! (dw/update-interaction sid data))
-;;               (reset! form nil)))
-;;           (on-cancel [event]
-;;             (dom/prevent-default event)
-;;             (reset! form nil))]
-;;     [:form {:on-submit on-submit}
-;;      [:& trigger-input {:form form}]
-;;      [:& action-input {:shape shape :form form}]
-;;      [:div.row-flex
-;;       [:input.btn-primary.btn-small.save-btn
-;;         {:value "Save" :type "submit"}]
-;;       [:a.cancel-btn {:on-click on-cancel}
-;;        "Cancel"]]]))
-
-;; --- Interactions Menu
-
-;; (def +initial-form+
-;;   {:trigger :click
-;;    :action :show})
-;;
-;; (mf/defc interactions-menu
-;;   [{:keys [menu shape] :as props}]
-;;   #_(let [form (mf/use-state nil)
-;;         interactions (:interactions shape)]
-;;     [:div.element-set {:key (str (:id menu))}
-;;      [:div.element-set-title (:name menu)]
-;;      [:div.element-set-content
-;;       (if form
-;;         [:& interactions-form {:form form :shape shape}]
-;;         [:div
-;;          [:& interactions-list {:form form :shape shape}]
-;;          [:input.btn-primary.btn-small
-;;           {:value "New interaction"
-;;            :on-click #(reset! form +initial-form+)
-;;            :type "button"}]])]]))
-
-;; --- Not implemented stuff
-
-;;      [:span "Key"]
-;;      [:div.row-flex
-;;       [:select.input-select {:placeholder "Choose a key"
-;;                              :value ""}
-;;        [:option {:value ":1"} "key 1"]
-;;        [:option {:value ":2"} "key 2"]
-;;        [:option {:value ":3"} "key 3"]
-;;        [:option {:value ":4"} "key 4"]
-;;        [:option {:value ":5"} "key 5"]]]
-
-;;      [:span "Scrolled to (px)"]
-;;      [:div.row-flex
-;;       [:input.input-text {:placeholder "px"
-;;                           :type "number"
-;;                           :value ""}]]