   [props]
   [:> layer-item props])
 
-(def ^:private layers-objects
-  (letfn [(strip-data [obj]
-            (select-keys obj [:id :name :blocked :hidden :shapes :type]))
-          (selector [{:keys [objects] :as data}]
-            (persistent!
-             (reduce-kv (fn [res id obj]
-                          (assoc! res id (strip-data obj)))
-                        (transient {})
-                        objects)))]
-  (l/derived selector refs/workspace-data =)))
-
 (mf/defc layers-tree
-  {::mf/wrap [mf/memo]}
-  []
+  {::mf/wrap [#(mf/memo % =)]}
+  [{:keys [objects] :as props}]
   (let [selected (mf/deref refs/selected-shapes)
-        objects (mf/deref layers-objects)
         root (get objects uuid/zero)]
-    ;; [:& perf/profiler {:label "layers-tree" :enabled false}
     [:ul.element-list
      (for [[index id] (reverse (d/enumerate (:shapes root)))]
        (let [obj (get objects id)]

             :objects objects
             :key id}])))]))


;; --- Layers Toolbox

;; NOTE: we need to consider using something like react window for
;; only render visible items instead of all.

(mf/defc layers-toolbox
  {:wrap [mf/memo]}
  [{:keys [page] :as props}]
  (let [locale (i18n/use-locale)
        on-click #(st/emit! (dw/toggle-layout-flag :layers))]
    [:div#layers.tool-window
     [:div.tool-window-bar

      [:span (:name page)]
      #_[:div.tool-window-close {:on-click on-click} i/close]]
     [:div.tool-window-content
      [:& layers-tree-wrapper {:key (:id page)
                               :objects (:objects data)}]]]))
