🐛 Fix at icon (#6540)

* 💄 Add styles for Inkeep Chat at workspace

* 📎 Styles review

CHANGES.md

@@ -21,6 +21,7 @@
 
 ### :bug: Bugs fixed
 
+- Fix "at" icon to match all icons on app [Taiga #11136](https://tree.taiga.io/project/penpot/issue/11136)
 - Fix problem in viewer with the back button [Taiga #10907](https://tree.taiga.io/project/penpot/issue/10907)
 - Fix resize bar background on tokens panel [Taiga #10811](https://tree.taiga.io/project/penpot/issue/10811)
 - Fix shortcut for history version panel [Taiga #11006](https://tree.taiga.io/project/penpot/issue/11006)
@@ -48,6 +49,12 @@
 - Fix problem when duplicating grid layout [Github #6391](https://github.com/penpot/penpot/issues/6391)
 - Fix issue that makes workspace shortcuts stop working [Taiga #11062](https://tree.taiga.io/project/penpot/issue/11062)
 - Fix problem while syncing library colors and typographies [Taiga #11068](https://tree.taiga.io/project/penpot/issue/11068)
+- Fix problem with path edition of shapes [Taiga #9496](https://tree.taiga.io/project/penpot/issue/9496)
+- Fix exception on paste invalid html [Taiga #11047](https://tree.taiga.io/project/penpot/issue/11047)
+- Fix share button being displayed with no permissions [Taiga #11086](https://tree.taiga.io/project/penpot/issue/11086)
+- Fix inline styles in code tab [Taiga Issue #7583](https://tree.taiga.io/project/penpot/issue/7583)
+- Fix exception on returning openapi.json
+- Fix json encoding of TokensLib [Taiga #10994](https://tree.taiga.io/project/penpot/issue/10994)
 
 ## 2.6.2
 

backend/src/app/http/sse.clj

@@ -9,7 +9,6 @@
   (:refer-clojure :exclude [tap])
   (:require
    [app.common.data :as d]
-   [app.common.exceptions :as ex]
    [app.common.logging :as l]
    [app.common.transit :as t]
    [app.http.errors :as errors]
@@ -54,18 +53,20 @@
      ::yres/status 200
      ::yres/body (yres/stream-body
                   (fn [_ output]
-                    (binding [events/*channel* (sp/chan :buf buf :xf (keep encode))]
-                      (let [listener (events/start-listener
-                                      (partial write! output)
-                                      (partial pu/close! output))]
-                        (try
+                    (let [channel  (sp/chan :buf buf :xf (keep encode))
+                          listener (events/start-listener
+                                    channel
+                                    (partial write! output)
+                                    (partial pu/close! output))]
+                      (try
+                        (binding [events/*channel* channel]
                           (let [result (handler)]
-                            (events/tap :end result))
-                          (catch Throwable cause
-                            (events/tap :error (errors/handle' cause request))
-                            (when-not (ex/instance? java.io.EOFException cause)
-                              (binding [l/*context* (errors/request->context request)]
-                                (l/err :hint "unexpected error on processing sse response" :cause cause))))
-                          (finally
-                            (sp/close! events/*channel*)
-                            (px/await! listener)))))))}))
+                            (events/tap :end result)))
+
+                        (catch Throwable cause
+                          (let [result (errors/handle' cause request)]
+                            (events/tap channel :error result)))
+
+                        (finally
+                          (sp/close! channel)
+                          (px/await! listener))))))}))

backend/src/app/rpc/commands/audit.clj

@@ -92,9 +92,9 @@
      [:string {:max 250}]
      [::sm/one-of {:format "string"} valid-event-types]]]
    [:props
-    [:map-of :keyword :any]]
+    [:map-of :keyword ::sm/any]]
    [:context {:optional true}
-    [:map-of :keyword :any]]])
+    [:map-of :keyword ::sm/any]]])
 
 (def schema:push-audit-events
   [:map {:title "push-audit-events"}

backend/src/app/rpc/commands/binfile.clj

@@ -115,7 +115,8 @@
 
     (db/update! pool :project
                 {:modified-at (dt/now)}
-                {:id project-id})
+                {:id project-id}
+                {::db/return-keys false})
 
     result))
 

backend/src/app/rpc/commands/files.clj

@@ -189,7 +189,7 @@
    [:is-shared ::sm/boolean]
    [:project-id ::sm/uuid]
    [:created-at ::dt/instant]
-   [:data {:optional true} :any]])
+   [:data {:optional true} ::sm/any]])
 
 (def schema:permissions-mixin
   [:map {:title "PermissionsMixin"}

backend/src/app/rpc/commands/fonts.clj

@@ -80,9 +80,9 @@
 (def ^:private schema:create-font-variant
   [:map {:title "create-font-variant"}
    [:team-id ::sm/uuid]
-   [:data [:map-of :string :any]]
+   [:data [:map-of ::sm/text ::sm/any]]
    [:font-id ::sm/uuid]
-   [:font-family :string]
+   [:font-family ::sm/text]
    [:font-weight [::sm/one-of {:format "number"} valid-weight]]
    [:font-style [::sm/one-of {:format "string"} valid-style]]])
 

backend/src/app/rpc/doc.clj

@@ -9,6 +9,7 @@
   (:require
    [app.common.data :as d]
    [app.common.exceptions :as ex]
+   [app.common.json :as json]
    [app.common.pprint :as pp]
    [app.common.schema :as sm]
    [app.common.schema.desc-js-like :as smdj]
@@ -19,7 +20,6 @@
    [app.http.sse :as-alias sse]
    [app.loggers.webhooks :as-alias webhooks]
    [app.rpc :as-alias rpc]
-   [app.util.json :as json]
    [app.util.services :as sv]
    [app.util.template :as tmpl]
    [clojure.java.io :as io]
@@ -86,7 +86,7 @@
     (fn [request]
       (let [params  (:query-params request)
             pstyle  (:type params "js")
-            context (assoc context :param-style pstyle)]
+            context (assoc @context :param-style pstyle)]
 
         {::yres/status 200
          ::yres/body (-> (io/resource "app/templates/api-doc.tmpl")
@@ -178,8 +178,7 @@
     (fn [_]
       {::yres/status 200
        ::yres/headers {"content-type" "application/json; charset=utf-8"}
-       ::yres/body (json/encode context)})
-
+       ::yres/body (json/encode @context)})
     (fn [_]
       {::yres/status 404})))
 
@@ -209,7 +208,7 @@
 
 (defmethod ig/init-key ::routes
   [_ {:keys [::rpc/methods] :as cfg}]
-  [(let [context (prepare-doc-context methods)]
+  [(let [context (delay (prepare-doc-context methods))]
      [["/_doc"
        {:handler (doc-handler context)
         :allowed-methods #{:get}}]
@@ -217,7 +216,7 @@
        {:handler (doc-handler context)
         :allowed-methods #{:get}}]])
 
-   (let [context (prepare-openapi-context methods)]
+   (let [context (delay (prepare-openapi-context methods))]
      [["/openapi"
        {:handler (openapi-handler)
         :allowed-methods #{:get}}]

backend/src/app/util/events.clj

@@ -10,7 +10,6 @@
   to them. Mainly used in http.sse for progress reporting."
   (:refer-clojure :exclude [tap run!])
   (:require
-   [app.common.data.macros :as dm]
    [app.common.exceptions :as ex]
    [app.common.logging :as l]
    [promesa.exec :as px]
@@ -18,33 +17,30 @@
 
 (def ^:dynamic *channel* nil)
 
-(defn channel
-  []
-  (sp/chan :buf 32))
-
 (defn tap
-  [type data]
-  (when-let [channel *channel*]
-    (sp/put! channel [type data])
-    nil))
+  ([type data]
+   (when-let [channel *channel*]
+     (sp/put! channel [type data])
+     nil))
+  ([channel type data]
+   (when channel
+     (sp/put! channel [type data])
+     nil)))
 
 (defn start-listener
-  [on-event on-close]
-
-  (dm/assert!
-   "expected active events channel"
-   (sp/chan? *channel*))
+  [channel on-event on-close]
+  (assert (sp/chan? channel) "expected active events channel")
 
   (px/thread
     {:virtual true}
     (try
       (loop []
-        (when-let [event (sp/take! *channel*)]
+        (when-let [event (sp/take! channel)]
           (let [result (ex/try! (on-event event))]
             (if (ex/exception? result)
               (do
                 (l/wrn :hint "unexpected exception" :cause result)
-                (sp/close! *channel*))
+                (sp/close! channel))
               (recur)))))
       (finally
         (on-close)))))
@@ -55,7 +51,7 @@
   [f on-event]
 
   (binding [*channel* (sp/chan :buf 32)]
-    (let [listener (start-listener on-event (constantly nil))]
+    (let [listener (start-listener *channel* on-event (constantly nil))]
       (try
         (f)
         (finally

common/src/app/common/files/changes.cljc

@@ -47,14 +47,14 @@
      [:type [:= :assign]]
      ;; NOTE: the full decoding is happening on the handler because it
      ;; needs a proper context of the current shape and its type
-     [:value [:map-of :keyword :any]]
+     [:value [:map-of :keyword ::sm/any]]
      [:ignore-touched {:optional true} :boolean]
      [:ignore-geometry {:optional true} :boolean]]]
    [:set
     [:map {:title "SetOperation"}
      [:type [:= :set]]
      [:attr :keyword]
-     [:val :any]
+     [:val ::sm/any]
      [:ignore-touched {:optional true} :boolean]
      [:ignore-geometry {:optional true} :boolean]]]
    [:set-touched
@@ -238,9 +238,9 @@
       [:component-id {:optional true} ::sm/uuid]
       [:ignore-touched {:optional true} :boolean]
       [:parent-id ::sm/uuid]
-      [:shapes :any]
+      [:shapes ::sm/any]
       [:index {:optional true} [:maybe :int]]
-      [:after-shape {:optional true} :any]
+      [:after-shape {:optional true} ::sm/any]
       [:component-swap {:optional true} :boolean]]]
 
     [:reorder-children
@@ -250,14 +250,14 @@
       [:component-id {:optional true} ::sm/uuid]
       [:ignore-touched {:optional true} :boolean]
       [:parent-id ::sm/uuid]
-      [:shapes :any]]]
+      [:shapes ::sm/any]]]
 
     [:add-page
      [:map {:title "AddPageChange"}
       [:type [:= :add-page]]
       [:id {:optional true} ::sm/uuid]
       [:name {:optional true} :string]
-      [:page {:optional true} :any]]]
+      [:page {:optional true} ::sm/any]]]
 
     [:mod-page
      [:map {:title "ModPageChange"}
@@ -327,14 +327,14 @@
       [:type [:= :add-component]]
       [:id ::sm/uuid]
       [:name :string]
-      [:shapes {:optional true} [:vector {:gen/max 3} :any]]
+      [:shapes {:optional true} [:vector {:gen/max 3} ::sm/any]]
       [:path {:optional true} :string]]]
 
     [:mod-component
      [:map {:title "ModCompoenentChange"}
       [:type [:= :mod-component]]
       [:id ::sm/uuid]
-      [:shapes {:optional true} [:vector {:gen/max 3} :any]]
+      [:shapes {:optional true} [:vector {:gen/max 3} ::sm/any]]
       [:name {:optional true} :string]
       [:variant-id {:optional true} ::sm/uuid]
       [:variant-properties {:optional true} [:vector ::ctv/variant-property]]]]
@@ -411,7 +411,7 @@
     [:set-tokens-lib
      [:map {:title "SetTokensLib"}
       [:type [:= :set-tokens-lib]]
-      [:tokens-lib :any]]]
+      [:tokens-lib ::sm/any]]]
 
     [:set-token-set
      [:map {:title "SetTokenSetChange"}

common/src/app/common/files/changes_builder.cljc

@@ -25,18 +25,19 @@
 
 ;; Auxiliary functions to help create a set of changes (undo + redo)
 
-(sm/register!
- ^{::sm/type ::changes}
- [:map {:title "changes"}
-  [:redo-changes vector?]
-  [:undo-changes seq?]
-  [:origin {:optional true} any?]
-  [:save-undo? {:optional true} boolean?]
-  [:stack-undo? {:optional true} boolean?]
-  [:undo-group {:optional true} any?]])
+(def schema:changes
+  (sm/register!
+   ^{::sm/type ::changes}
+   [:map {:title "changes"}
+    [:redo-changes vector?]
+    [:undo-changes seq?]
+    [:origin {:optional true} ::sm/any]
+    [:save-undo? {:optional true} boolean?]
+    [:stack-undo? {:optional true} boolean?]
+    [:undo-group {:optional true} ::sm/any]]))
 
 (def check-changes!
-  (sm/check-fn ::changes))
+  (sm/check-fn schema:changes))
 
 (defn empty-changes
   ([origin page-id]

common/src/app/common/schema.cljc

@@ -214,8 +214,7 @@
 
 (defn lazy-validator
   [s]
-  (let [s   (schema s)
-        vfn (delay (validator s))]
+  (let [vfn (delay (validator s))]
     (fn [v] (@vfn v))))
 
 (defn lazy-explainer
@@ -318,11 +317,14 @@
   ([params]
    (cond
      (map? params)
-     (let [type (get params :type)]
+     (let [mdata (meta params)
+           type  (or (get mdata ::id)
+                     (get mdata ::type)
+                     (get params :type))]
        (assert (qualified-keyword? type) "expected qualified keyword for `type`")
        (let [s (m/-simple-schema params)]
          (swap! sr/registry assoc type s)
-         nil))
+         s))
 
      (vector? params)
      (let [mdata (meta params)
@@ -330,11 +332,12 @@
                      (get mdata ::type))]
        (assert (qualified-keyword? type) "expected qualified keyword to be on metadata")
        (swap! sr/registry assoc type params)
-       nil)
+       params)
 
      (m/into-schema? params)
      (let [type (m/-type params)]
-       (swap! sr/registry assoc type params))
+       (swap! sr/registry assoc type params)
+       params)
 
      :else
      (throw (ex-info "Invalid Arguments" {}))))
@@ -1042,6 +1045,8 @@
      {:title "agent"
       :description "instance of clojure agent"}}))
 
+(register! ::any (mu/update-properties :any assoc :gen/gen sg/any))
+
 ;; ---- PREDICATES
 
 (def valid-safe-number?

common/src/app/common/schema/desc_js_like.cljc

@@ -7,6 +7,7 @@
 (ns app.common.schema.desc-js-like
   (:require
    [app.common.data :as d]
+   [app.common.schema :as-alias sm]
    [cuerdas.core :as str]
    [malli.core :as m]
    [malli.util :as mu]))
@@ -90,7 +91,7 @@
 (defmethod visit :int [_ schema _ _] (str "integer" (-titled schema) (-min-max-suffix-number schema)))
 (defmethod visit :double [_ schema _ _] (str "double" (-titled schema) (-min-max-suffix-number schema)))
 (defmethod visit :select-keys [_ schema _ options] (describe* (m/deref schema) options))
-(defmethod visit :and [_ s children _] (str (str/join ", and " children) (-titled s)))
+(defmethod visit :and [_ s children _] (str (str/join " && " children) (-titled s)))
 (defmethod visit :enum [_ s children _options] (str "enum" (-titled s) " of " (str/join ", " children)))
 (defmethod visit :maybe [_ _ children _] (str (first children) " nullable"))
 (defmethod visit :tuple [_ _ children _] (str "(" (str/join ", " children) ")"))
@@ -106,7 +107,8 @@
 (defmethod visit :qualified-symbol [_ _ _ _] "qualified symbol")
 (defmethod visit :uuid [_ _ _ _] "uuid")
 (defmethod visit :boolean [_ _ _ _] "boolean")
-(defmethod visit :keyword [_ _ _ _] "keyword")
+(defmethod visit :keyword [_ _ _ _] "string")
+(defmethod visit :fn [_ _ _ _] "FN")
 
 (defmethod visit :vector [_ _ children _]
   (str "[" (last children) "]"))
@@ -123,10 +125,12 @@
 (defmethod visit :repeat [_ schema children _]
   (str "repeat " (-diamond (first children)) (-repeat-suffix schema)))
 
-
 (defmethod visit :set [_ schema children _]
   (str "set[" (first children) "]" (minmax-suffix schema)))
 
+(defmethod visit ::sm/set [_ schema children _]
+  (str "set[" (first children) "]" (minmax-suffix schema)))
+
 (defmethod visit ::m/val [_ schema children _]
   (let [suffix (minmax-suffix schema)]
     (cond-> (first children)
@@ -152,7 +156,6 @@
     (or (:title props)
         "*")))
 
-
 (defmethod visit :map
   [_ schema children {:keys [::level ::max-level] :as options}]
   (let [props   (m/properties schema)
@@ -172,13 +175,11 @@
                                       ": " s)))
                           (str/join ",\n"))
 
-            header   (cond-> (if (zero? level)
-                               (str "type " title)
-                               (str title))
+            header   (cond-> (str "type " title)
                        closed?       (str "!")
                        (some? title) (str " "))]
 
-        (str header "{\n" entries "\n" (pad "}" level))))))
+        (str (pad header level) "{\n" entries "\n" (pad "}\n" level))))))
 
 (defmethod visit :multi
   [_ s children {:keys [::level ::max-level] :as options}]
@@ -205,18 +206,18 @@
 
 (defmethod visit :merge
   [_ schema children _]
-  (let [entries (str/join " , " children)
+  (let [entries (str/join ",\n" children)
         props   (m/properties schema)
         title   (or (some-> (:title props) str/camel str/capital)
                     "<untitled>")]
-    (str "merge object " title " { " entries " }")))
+    (str "merge type " title " { \n" entries "\n}\n")))
 
-(defmethod visit :app.common.schema/one-of
-  [_ _  children _]
+(defmethod visit ::sm/one-of
+  [_ _ children _]
   (let [elems (last children)]
-    (str "OneOf[" (->> elems
-                       (map d/name)
-                       (str/join ",")) "]")))
+    (str "string oneOf (" (->> elems
+                               (map d/name)
+                               (str/join "|")) ")")))
 
 (defmethod visit :schema [_ schema children options]
   (visit ::m/schema schema children options))

common/src/app/common/schema/generators.cljc

@@ -5,7 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.common.schema.generators
-  (:refer-clojure :exclude [set subseq uuid filter map let boolean])
+  (:refer-clojure :exclude [set subseq uuid filter map let boolean vector keyword int double])
   #?(:cljs (:require-macros [app.common.schema.generators]))
   (:require
    [app.common.schema.registry :as sr]
@@ -38,10 +38,6 @@
   ([s opts]
    (mg/generator s (assoc opts :registry sr/default-registry))))
 
-(defn filter
-  [pred gen]
-  (tg/such-that pred gen 100))
-
 (defn small-double
   [& {:keys [min max] :or {min -100 max 100}}]
   (tg/double* {:min min, :max max, :infinite? false, :NaN? false}))
@@ -61,7 +57,7 @@
 (defn word-keyword
   []
   (->> (word-string)
-       (tg/fmap keyword)))
+       (tg/fmap c/keyword)))
 
 (defn email
   []
@@ -100,12 +96,11 @@
                           (c/map second))
                          (c/map list bools elements)))))))
 
-(def any tg/any)
-(def boolean tg/boolean)
-
-(defn set
-  [g]
-  (tg/set g))
+(defn map-of
+  ([kg vg]
+   (tg/map kg vg {:min-elements 1 :max-elements 3}))
+  ([kg vg opts]
+   (tg/map kg vg opts)))
 
 (defn elements
   [s]
@@ -119,6 +114,10 @@
   [f g]
   (tg/fmap f g))
 
+(defn filter
+  [pred gen]
+  (tg/such-that pred gen 100))
+
 (defn mcat
   [f g]
   (tg/bind g f))
@@ -126,3 +125,22 @@
 (defn tuple
   [& opts]
   (apply tg/tuple opts))
+
+(defn vector
+  [& opts]
+  (apply tg/vector opts))
+
+(defn set
+  [g]
+  (tg/set g))
+
+;; Static Generators
+
+(def boolean tg/boolean)
+(def text (word-string))
+(def double (small-double))
+(def int (small-int))
+(def keyword (word-keyword))
+
+(def any
+  (tg/one-of [text boolean double int keyword]))

common/src/app/common/schema/openapi.cljc

@@ -97,7 +97,8 @@
 (defmethod visit :enum [_ _ children options] (merge (some-> (m/-infer children) (transform* options)) {:enum children}))
 (defmethod visit :maybe [_ _ children _] {:oneOf (conj children {:type "null"})})
 (defmethod visit :tuple [_ _ children _] {:type "array", :items children, :additionalItems false})
-(defmethod visit :re [_ schema _ options] {:type "string", :pattern (first (m/children schema options))})
+(defmethod visit :re [_ schema _ options]
+  {:type "string", :pattern (str (first (m/children schema options)))})
 (defmethod visit :nil [_ _ _ _] {:type "null"})
 
 (defmethod visit :string [_ schema _ _]

common/src/app/common/types/color.cljc

@@ -35,7 +35,7 @@
                        (.. r (toString 16) (padStart 2 "0"))
                        (.. g (toString 16) (padStart 2 "0"))
                        (.. b (toString 16) (padStart 2 "0"))))))
-           sg/any))
+           sg/int))
 
 (defn rgb-color-string?
   [o]

common/src/app/common/types/container.cljc

@@ -41,7 +41,7 @@
    [:map-of {:gen/max 10} ::sm/uuid :map]]
   [:plugin-data {:optional true} ::ctpg/plugin-data]])
 
-(def check-container!
+(def check-container
   (sm/check-fn ::container))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -74,13 +74,9 @@
 (defn get-shape
   [container shape-id]
 
-  (dm/assert!
-   "expected valid container"
-   (check-container! container))
-
-  (dm/assert!
-   "expected valid uuid for `shape-id`"
-   (uuid? shape-id))
+  (assert (check-container container))
+  (assert (uuid? shape-id)
+          "expected valid uuid for `shape-id`")
 
   (-> container
       (get :objects)

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

@@ -16,54 +16,56 @@
 
 (def node-types #{"root" "paragraph-set" "paragraph"})
 
-(sm/register!
- ^{::sm/type ::content}
- [:map
-  [:type [:= "root"]]
-  [:key {:optional true} :string]
-  [:children
-   {:optional true}
-   [:maybe
-    [:vector {:min 1 :gen/max 2 :gen/min 1}
-     [:map
-      [:type [:= "paragraph-set"]]
-      [:key {:optional true} :string]
-      [:children
-       [:vector {:min 1 :gen/max 2 :gen/min 1}
-        [:map
-         [:type [:= "paragraph"]]
-         [:key {:optional true} :string]
-         [:fills {:optional true}
-          [:maybe
-           [:vector {:gen/max 2} ::shape/fill]]]
-         [:font-family {:optional true} :string]
-         [:font-size {:optional true} :string]
-         [:font-style {:optional true} :string]
-         [:font-weight {:optional true} :string]
-         [:direction {:optional true} :string]
-         [:text-decoration {:optional true} :string]
-         [:text-transform {:optional true} :string]
-         [:typography-ref-id {:optional true} [:maybe ::sm/uuid]]
-         [:typography-ref-file {:optional true} [:maybe ::sm/uuid]]
-         [:children
-          [:vector {:min 1 :gen/max 2 :gen/min 1}
-           [:map
-            [:text :string]
-            [:key {:optional true} :string]
-            [:fills {:optional true}
-             [:maybe
-              [:vector {:gen/max 2} ::shape/fill]]]
-            [:font-family {:optional true} :string]
-            [:font-size {:optional true} :string]
-            [:font-style {:optional true} :string]
-            [:font-weight {:optional true} :string]
-            [:direction {:optional true} :string]
-            [:text-decoration {:optional true} :string]
-            [:text-transform {:optional true} :string]
-            [:typography-ref-id {:optional true} [:maybe ::sm/uuid]]
-            [:typography-ref-file {:optional true} [:maybe ::sm/uuid]]]]]]]]]]]]])
+(def schema:content
+  [:map
+   [:type [:= "root"]]
+   [:key {:optional true} :string]
+   [:children
+    {:optional true}
+    [:maybe
+     [:vector {:min 1 :gen/max 2 :gen/min 1}
+      [:map
+       [:type [:= "paragraph-set"]]
+       [:key {:optional true} :string]
+       [:children
+        [:vector {:min 1 :gen/max 2 :gen/min 1}
+         [:map
+          [:type [:= "paragraph"]]
+          [:key {:optional true} :string]
+          [:fills {:optional true}
+           [:maybe
+            [:vector {:gen/max 2} ::shape/fill]]]
+          [:font-family {:optional true} :string]
+          [:font-size {:optional true} :string]
+          [:font-style {:optional true} :string]
+          [:font-weight {:optional true} :string]
+          [:direction {:optional true} :string]
+          [:text-decoration {:optional true} :string]
+          [:text-transform {:optional true} :string]
+          [:typography-ref-id {:optional true} [:maybe ::sm/uuid]]
+          [:typography-ref-file {:optional true} [:maybe ::sm/uuid]]
+          [:children
+           [:vector {:min 1 :gen/max 2 :gen/min 1}
+            [:map
+             [:text :string]
+             [:key {:optional true} :string]
+             [:fills {:optional true}
+              [:maybe
+               [:vector {:gen/max 2} ::shape/fill]]]
+             [:font-family {:optional true} :string]
+             [:font-size {:optional true} :string]
+             [:font-style {:optional true} :string]
+             [:font-weight {:optional true} :string]
+             [:direction {:optional true} :string]
+             [:text-decoration {:optional true} :string]
+             [:text-transform {:optional true} :string]
+             [:typography-ref-id {:optional true} [:maybe ::sm/uuid]]
+             [:typography-ref-file {:optional true} [:maybe ::sm/uuid]]]]]]]]]]]]])
 
+(sm/register! ::content schema:content)
 
+(def valid-content?
+  (sm/lazy-validator schema:content))
 
 (sm/register!
  ^{::sm/type ::position-data}

common/src/app/common/types/tokens_lib.cljc

@@ -7,6 +7,7 @@
 (ns app.common.types.tokens-lib
   (:require
    #?(:clj [app.common.fressian :as fres])
+   #?(:clj [clojure.data.json :as json])
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.files.helpers :as cfh]
@@ -118,7 +119,7 @@
   [:map {:title "Token"}
    [:name cto/token-name-ref]
    [:type [::sm/one-of cto/token-types]]
-   [:value :any]
+   [:value ::sm/any]
    [:description {:optional true} :string]
    [:modified-at {:optional true} ::sm/inst]])
 
@@ -389,7 +390,8 @@
    [:description {:optional true} :string]
    [:modified-at {:optional true} ::sm/inst]
    [:tokens {:optional true
-             :gen/gen (->> (sg/generator [:map-of ::sm/text schema:token])
+             :gen/gen (->> (sg/map-of (sg/generator ::sm/text)
+                                      (sg/generator schema:token))
                            (sg/fmap #(into (d/ordered-map) %)))}
     [:and
      [:map-of {:gen/max 5
@@ -910,6 +912,12 @@ Will return a value that matches this schema:
                                    "themes" (clj->js themes)
                                    "active-themes" (clj->js active-themes)))])
 
+
+  #?@(:clj
+      [json/JSONWriter
+       (-write [this writter options] (json/-write (encode-dtcg this) writter options))])
+
+
   ITokenSets
   (add-set [_ token-set]
     (let [path      (get-token-set-prefixed-path token-set)

docs/technical-guide/developer/abstraction-levels.md

@@ -0,0 +1,359 @@
+---
+title: 3.07. Abstraction levels
+---
+
+# Code organization in abstraction levels
+
+Initially, Penpot data model implementation was organized in a different way.
+We are currently in a process of reorganization. The objective is to have data
+manipulation code structured in abstraction layers, with well-defined
+boundaries, and a hierarchical structure (each level may only use same or
+lower levels, but not higher).
+
+![Abstraction levels](/img/abstraction-levels/abstraction-levels.png)
+
+At this moment the namespace structure is already organized as described here,
+but there is much code that does not comply with these rules, and needs to be
+moved or refactored. We expect to be refactoring existing modules incrementally,
+each time we do an important functionality change.
+
+## Basic data
+
+```text
+▾ common/
+  ▾ src/app/common/
+      data.cljc
+      ▾ src/app/data/
+          macros.cljc
+```
+
+A level for generic data structures or operations, that are not specifically part
+of the domain model (e.g. trees, strings, maps, iterators, etc.). Also may belong
+here some functions in <code>app.common.geom/</code> and <code>app.common.files.helpers.cljc</code>.
+
+We need to create a new directory for this and move there all functions in this
+leve.
+
+
+## Abstract data types
+
+```text
+▾ common/
+  ▾ src/app/common/
+    ▾ types/
+        file.cljc
+        page.cljc
+        shape.cljc
+        color.cljc
+        component.cljc
+        tokens_lib.cljc
+        ...
+```
+
+Namespaces here represent a single data entity of the domain model, or a
+fragment of one, as an [Abstract Data Type](https://www.geeksforgeeks.org/abstract-data-types/).
+An ADT is a data component that is defined through a series of properties and
+operations, and that abstracts out the details of how it's implemented and what
+is the internal structure. This allows to simplify the logic of the client
+code, and also to make future changes in the ADT without affecting callers (if
+the abstract interface does not change).
+
+Each structure in this module has:
+
+* A **schema spec** that defines the structure of the type and its values:
+
+     ```clojure
+     (def schema:fill
+       [:map {:title "Fill"}
+        [:fill-color {:optional true} ::ctc/rgb-color]
+        [:fill-opacity {:optional true} ::sm/safe-number]
+        ...)
+
+     (def schema:shape-base-attrs
+       [:map {:title "ShapeMinimalRecord"}
+        [:id ::sm/uuid]
+        [:name :string]
+        [:type [::sm/one-of shape-types]]
+        [:selrect ::grc/rect]
+        [:points schema:points]
+        ...)
+
+      (def schema:token-set-attrs
+        [:map {:title "TokenSet"}
+         [:name :string]
+         [:description {:optional true} :string]
+         [:modified-at {:optional true} ::sm/inst]
+         [:tokens {:optional true} [:and
+                                     [:map-of {:gen/max 5}
+                                              :string
+                                              schema:token]
+                                     [:fn d/ordered-map?]]]])
+     ```
+
+* A **protocol** that define the external interface to be used for this entity.
+
+    (NOTE: this is currently only implemented in some subsystems like Design Tokens
+     and new path handling).
+
+    ```clojure
+    (defprotocol ITokenSet
+      (update-name [_ set-name] "change a token set name while keeping the path")
+      (add-token [_ token] "add a token at the end of the list")
+      (update-token [_ token-name f] "update a token in the list")
+      (delete-token [_ token-name] "delete a token from the list")
+      (get-token [_ token-name] "return token by token-name")
+      (get-tokens [_] "return an ordered sequence of all tokens in the set"))
+    ```
+
+* A **custom data type** that implements this protocol. __Functions here are the only
+  ones allowed to modify the internal structure of the type__.
+
+    Clojure allows us two kinds of custom data types:
+     * [**`deftype`**](https://funcool.github.io/clojurescript-unraveled/#deftype). We'll
+       use it when we want the internal structure to be completely opaque and
+       data accessed through protocol functions. Clojure allows access to the
+       attributes with the <code class="language-clojure">(.-attr)</code>
+       syntax, but we prefer not to use it.
+     * [**`defrecord`**](https://funcool.github.io/clojurescript-unraveled/#defrecord).
+       We'll use it when we want the structure to be exposed as a plain clojure
+       map, and thus allowing to read attributes with <code
+       class="language-clojure">(:attr t)</code>, to use <code
+       class="language-clojure">get</code>, <code
+       class="language-clojure">keys</code>, <code
+       class="language-clojure">vals</code>, etc. Note that this also allows
+       modifying the object with <code class="language-clojure">assoc</code>,
+       <code class="language-clojure">update</code>, etc. But in general we
+       prefer to do all modification via protocol methods, because this way
+       it's easier to track down where the failure is if an invalid structure
+       is detected in a validation check, and add business logic like "update
+       <code class="language-clojure">modified-at</code> whenever any other
+       attribute is changed".
+
+    ```clojure
+    (defrecord TokenSet [name description modified-at tokens]
+      ITokenSet
+      (add-token [_ token]
+        (let [token (check-token token)]
+          (TokenSet. name
+                     description
+                     (dt/now)
+                     (assoc tokens (:name token) token))))
+    ```
+
+
+* **Additional helper functions** the protocol should be made as small and compact
+  as possible. If we need functions for business logic or complex queries that
+  do not need to directly access the internal structure, but can be implemented by
+  only calling the abstract procotol, they should be created as standalone functions.
+  At this level, they must be functions that operate only on instances of the given
+  domain model entity. They must always ensure the internal integrity of the data.
+
+    ```clojure
+    (defn sets-tree-seq
+      "Get tokens sets tree as a flat list"
+      [token-sets]
+      ...)
+
+> IMPORTANT SUMMARY
+>  * Code in this level only knows about one domain model entity.
+>  * All functions ensure the internal integrity of the data.
+>  * For this, the schema is used, and the functions must check parameters
+>    and output values as needed.
+>  * No outside code should get any knowledge of the internal structure, so it
+>    can be changed in the future without breaking cliente code.
+>  * All modifications of the data should be done via protocol methods (even in
+>    <code class="language-clojure">defrecords</code>). This allows a) more
+>    control of the internal data dependencies, b) easier bug tracking of
+>    corrupted data, and c) easier refactoring when the structure is modified.
+
+Currently most of Penpot code does not follow those requirements, but it
+should do in new code or in any refactor.
+
+## File operations
+
+```text
+▾ common/
+  ▾ src/app/common/
+    ▾ files/
+        helpers.cljc
+        shapes_helpers.cljc
+        ...
+```
+
+Functions that modify a file object (or a part of it) in place, returning the
+file object changed. They ensure the referential integrity within the file, or
+between a file and its libraries.
+
+**These functions are used when we need to manipulate objects of different
+domain entities inside a file.**
+
+```clojure
+(defn resolve-component
+  "Retrieve the referenced component, from the local file or from a library"
+  [shape file libraries & {:keys [include-deleted?] :or {include-deleted? False}}]
+  (if (= (:component-file shape) (:id file))
+        (ctkl/get-component (:data file) (:component-id shape) include-deleted?)
+        (get-component libraries
+                      (:component-file shape)
+                      (:component-id shape)
+                      :include-deleted? include-deleted?)))
+
+(defn delete-component
+  "Mark a component as deleted and store the main instance shapes iside it, to
+  be able to be recovered later."
+  [file-data component-id skip-undelete? delta]
+  (let [delta (or delta (gpt/point 0 0))]
+    (if skip-undelete?
+      (ctkl/delete-component file-data component-id)
+      (-> file-data
+          (ctkl/update-component component-id #(load-component-objects file-data % delta))
+          (ctkl/mark-component-deleted component-id)))))
+```
+
+> This module is still needing an important refactor. Mainly to take functions
+> from common.types and move them here.
+
+### File validation and repair
+
+There is a function in <code class="language-clojure">app.common.files.validate</code> that checks a file for
+referential and semantic integrity. It's called automatically when file changes
+are sent to backend, but may be invoked manually whenever it's needed.
+
+## File changes objects
+
+```text
+▾ common/
+  ▾ src/app/common/
+    ▾ files/
+        changes_builder.cljc
+        changes.cljc
+        ...
+```
+
+This layer is how we adopt the [Event sourcing pattern](https://www.geeksforgeeks.org/event-sourcing-pattern/).
+Instead of directly modifying files, we create <code class="language-clojure">changes</code>
+objects, that represent one modification, and that can be serialized, stored,
+send to backend, logged, etc. Then it can be *materialized* by a **processing
+function**, that takes a file and a change, and returns the updated file.
+
+This also allows an important feature: undoing changes.
+
+Processing functions should not contain business logic or algorithms. Just
+adapt the change interface to the operations in **File** or **Abstract Data
+Types** levels.
+
+There exists a <code class="language-clojure">changes-builder</code> module
+with helper functions to conveniently build changes objects, and to
+automatically calculate the reverse undo change.
+
+> IMPORTANT RULES
+>
+> All changes must satisfy two properties:
+> * **[Idempotence](https://en.wikipedia.org/wiki/Idempotence)**. The event
+>   sourcing architecture and multiuser capability may cause that the same
+>   change may be applied more than once to a file. So changes must not, for
+>   example, be like *increment counter* but rather *set counter to value x*.
+> * **Minimal scope**. To reduce conflicts, changes should only modify the
+>   relevant part of the domain entity. This way, if a concurrent change on
+>   the same entity arrives, from another user, and it modifies a different
+>   part of the data, they may ve processed without overriding.
+
+## Business logic
+
+```text
+▾ common/
+  ▾ src/app/common/
+    ▾ logic/
+        shapes.cljc
+        libraries.cljc
+```
+
+At this level there are functions that implement high level user actions, in an
+abstract way (independent of UI). Here may be complex business logic (eg. to
+create a component copy we must clone all shapes, assign new ids, relink
+parents, change the head structure to be a copy and link each shape in the copy
+with the corresponding one in the main).
+
+They don't directly modify files, but generate changes objects, that may be
+executed in frontend or sent to backend.
+
+Those functions may also be composed in even higher level actions. For example
+a "update shape attr" action may use "unapply token" actions when the attribute
+has an applied token.
+
+```clojure
+(defn generate-instantiate-component
+  "Generate changes to create a new instance from a component."
+  ([changes objects file-id component-id position page libraries]
+   (generate-instantiate-component changes objects file-id component-id position page libraries nil nil nil {}))
+  ([changes objects file-id component-id position page libraries old-id parent-id frame-id
+    {:keys [force-frame?]
+     :or {force-frame? false}}]
+   (let [component     (ctf/get-component libraries file-id component-id)
+         library       (get libraries file-id)
+         parent        (when parent-id (get objects parent-id))
+
+         [...]
+
+         [new-shape new-shapes]
+         (ctn/make-component-instance page
+                                      component
+                                      (:data library)
+                                      position
+                                      (cond-> {}
+                                        force-frame?
+                                        (assoc :force-frame-id frame-id)))
+
+         [...]
+
+         changes
+         (reduce #(pcb/add-object %1 %2 {:ignore-touched true})
+                 changes
+                 (rest new-shapes))]
+
+     [new-shape changes])))
+```
+
+## Data events
+
+```text
+▾ frontend/
+  ▾ src/app/main/data/
+    ▾ dashboard/
+    ▾ viewer/
+    ▾ workspace/
+```
+
+This is the intersection of the logic and the presentation in Penpot. Data
+events belong to the presentation interface and they manage the global state of
+the application. But they may also work on loaded files by using **File** or
+**Abstract Data Types** operations to query the data, and by creating and
+commiting **changes** via the **Business logic** generate functions.
+
+**IMPORTANT: data events must not contain business logic theirselves**, or
+directly manipulate data structures. They only may modify or query the global
+state, and delegate all logic to lower level functions.
+
+In current Penpot code, there is some quantity of business logic in data events,
+that should be progressively moved elsewhere as we keep refactoring.
+
+```clojure
+(defn detach-component
+  "Remove all references to components in the shape with the given id,
+  and all its children, at the current page."
+  [id]
+  (dm/assert! (uuid? id))
+  (ptk/reify ::detach-component
+    ptk/WatchEvent
+    (watch [it state _]
+      (let [page-id   (:current-page-id state)
+            file-id   (:current-file-id state)
+
+            fdata     (dsh/lookup-file-data state file-id)
+            libraries (dsh/lookup-libraries state)
+
+            changes   (-> (pcb/empty-changes it)
+                          (cll/generate-detach-component id fdata page-id libraries))]
+
+        (rx/of (dch/commit-changes changes))))))
+```

docs/technical-guide/developer/architecture/index.md

@@ -1,5 +1,5 @@
 ---
-title: 3.1. Architecture
+title: 3.01. Architecture
 desc: Dive into architecture, backend, frontend, data models, and development environments. Contribute and self-host for free! See Penpot's technical guide.
 ---
 

docs/technical-guide/developer/backend.md

@@ -1,5 +1,5 @@
 ---
-title: 3.6. Backend Guide
+title: 3.06. Backend Guide
 ---
 
 # Backend guide #

docs/technical-guide/developer/common.md

@@ -1,5 +1,5 @@
 ---
-title: 3.4. Common Guide
+title: 3.04. Common Guide
 desc: "View Penpot's technical guide: self-hosting, configuration, developer insights, architecture, data model, integration, and troubleshooting."
 ---
 

docs/technical-guide/developer/data-guide.md

@@ -1,5 +1,5 @@
 ---
-title: 3.7. Data Guide
+title: 3.08. Data Guide
 desc: Learn about data structures, code organization, file operations, migrations, shape editing, and component syncing. See Penpot's technical guide. Try it free!
 ---
 
@@ -30,217 +30,6 @@ all of this is important in general.
   Clojure (for example ending it with ? for boolean values), because this may
   cause problems when exporting.
 
-## Code organization in abstraction levels
-
-Initially, Penpot data model implementation was organized in a different way.
-We are currently in a process of reorganization. The objective is to have data
-manipulation code structured in abstraction layers, with well-defined
-boundaries.
-
-At this moment the namespace structure is already organized as described here,
-but there is much code that does not comply with these rules, and needs to be
-moved or refactored. We expect to be refactoring existing modules incrementally,
-each time we do an important functionality change.
-
-### Abstract data types
-
-```text
-▾ common/
-  ▾ src/app/common/
-    ▾ types/
-        file.cljc
-        page.cljc
-        shape.cljc
-        color.cljc
-        component.cljc
-        ...
-```
-
-Namespaces here represent a single data structure, or a fragment of one, as an
-abstract data type. Each structure has:
-
-* A **schema spec** that defines the structure of the type and its values:
-
-     ```clojure
-     (sm/define! ::fill
-       [:map {:title "Fill"}
-        [:fill-color {:optional true} ::ctc/rgb-color]
-        [:fill-opacity {:optional true} ::sm/safe-number]
-        ...)
-
-     (sm/define! ::shape-attrs
-       [:map {:title "ShapeAttrs"}
-        [:name {:optional true} :string]
-        [:selrect {:optional true} ::grc/rect]
-        [:points {:optional true} ::points]
-        [:blocked {:optional true} :boolean]
-        [:fills {:optional true}
-         [:vector {:gen/max 2} ::fill]]
-        ...)
-     ```
-
-* **Helper functions** to create, query and manipulate the structure. Helpers
-    at this level only are allowed to see the internal attributes of a type.
- Updaters receive an object of the type, and return a new object modified,
-    also ensuring the internal integrity of the data after the change.
-
-    ```clojure
-    (defn setup-shape
-     "A function that initializes the geometric data of the shape. The props must
-     contain at least :x :y :width :height."
-     [{:keys [type] :as props}]
-     ...)
-
-    (defn has-direction?
-    [interaction]
-      (#{:slide :push} (-> interaction :animation :animation-type)))
-
-    (defn set-direction
-    [interaction direction]
-      (dm/assert!
-       "expected valid interaction map"
-       (check-interaction! interaction))
-      (dm/assert!
-       "expected valid direction"
-       (contains? direction-types direction))
-      (dm/assert!
-       "expected compatible interaction map"
-       (has-direction? interaction))
-      (update interaction :animation assoc :direction direction))
-    ```
-
-> IMPORTANT: we should always use helper functions to access and modify these data
-> structures. Avoid direct attribute read or using functions like <code class="language-clojure">assoc</code> or
-> <code class="language-clojure">update</code>, even if the information is contained in a single attribute. This way
-> it will be much simpler to add validation checks or to modify the internal
-> representation of a type, and will be easier to search for places in the code
-> where this data item is used.
->
-> Currently much of Penpot code does not follow this requirement, but it
-should do in new code or in any refactor.
-
-### File operations
-
-```text
-▾ common/
-  ▾ src/app/common/
-    ▾ files/
-        helpers.cljc
-        shapes_helpers.cljc
-        ...
-```
-
-Functions that modify a file object (or a part of it) in place, returning the
-file object changed. They ensure the referential integrity within the file, or
-between a file and its libraries.
-
-```clojure
-(defn resolve-component
-  "Retrieve the referenced component, from the local file or from a library"
-  [shape file libraries & {:keys [include-deleted?] :or {include-deleted? False}}]
-  (if (= (:component-file shape) (:id file))
-        (ctkl/get-component (:data file) (:component-id shape) include-deleted?)
-        (get-component libraries
-                      (:component-file shape)
-                      (:component-id shape)
-                      :include-deleted? include-deleted?)))
-
-(defn delete-component
-"Mark a component as deleted and store the main instance shapes inside it, to
-be able to be recovered later."
-[file-data component-id skip-undelete? Main-instance]
-(let [components-v2 (dm/get-in file-data [:options :components-v2])]
-  (if (or (not components-v2) skip-undelete?)
-        (ctkl/delete-component file-data component-id)
-        (let [set-main-instance ;; If there is a saved main-instance, restore it.
-               #(if main-instance
-                  (assoc-in % [:objects (:main-instance-id %)] main-instance)
-                  %)]
-        (-> file-data
-           (ctkl/update-component component-id load-component-objects)
-           (ctkl/update-component component-id set-main-instance)
-           (ctkl/mark-component-deleted component-id))))))
-```
-
-> This module is still needing an important refactor. Mainly to take functions
-> from common.types and move them here.
-
-#### File validation and repair
-
-There is a function in <code class="language-clojure">app.common.files.validate</code> that checks a file for
-referential and semantic integrity. It's called automatically when file changes
-are sent to backend, but may be invoked manually whenever it's needed.
-
-### File changes objects
-
-```text
-▾ common/
-  ▾ src/app/common/
-    ▾ files/
-        changes_builder.cljc
-        changes.cljc
-        ...
-```
-
-Wrap the update functions in file operations module into <code class="language-clojure">changes</code> objects, that
-may be serialized, stored, sent to backend and executed to actually modify a file
-object. They should not contain business logic or algorithms. Only adapt the
-interface to the file operations or types.
-
-```clojure
-(sm/define! ::changes
-  [:map {:title "changes"}
-   [:redo-changes vector?]
-   [:undo-changes seq?]
-   [:origin {:optional true} any?]
-   [:save-undo? {:optional true} boolean?]
-   [:stack-undo? {:optional true} boolean?]
-   [:undo-group {:optional true} any?]])
-
-(defmethod process-change :add-component
-  [file-data params]
-  (ctkl/add-component file-data params))
-```
-
-### Business logic
-
-```text
-▾ common/
-  ▾ src/app/common/
-    ▾ logic/
-        shapes.cljc
-        libraries.cljc
-```
-
-Functions that implement semantic user actions, in an abstract way (independent
-of UI). They don't directly modify files, but generate changes objects, that
-may be executed in frontend or sent to backend.
-
-```clojure
-(defn generate-instantiate-component
-"Generate changes to create a new instance from a component."
-[changes objects file-id component-id position page libraries old-id parent-id
-  frame-id {:keys [force-frame?] :or {force-frame? False}}]
- (let [component        (ctf/get-component libraries file-id component-id)
-        parent          (when parent-id (get objects parent-id))
-        library         (get libraries file-id)
-        components-v2 (dm/get-in library [:data :options :components-v2])
-        [new-shape new-shapes]º
-        (ctn/make-component-instance page
-                                        Component
-                                        (:data library)
-                                        Position
-                                        Components-v2
-                                        (cond-> {}
-                                   force-frame? (assoc :force-frame-id frame-id)))
-        changes (cond-> (pcb/add-object changes first-shape {:ignore-touched true})
-                 (some? old-id) (pcb/amend-last-change #(assoc % :old-id old-id)))
-        changes (reduce #(pcb/add-object %1 %2 {:ignore-touched true})
-                       changes
-                       (rest new-shapes))]
-[new-shape changes]))
-```
-
 ## Data migrations
 
 ```text

docs/technical-guide/developer/data-model/index.md

@@ -1,5 +1,5 @@
 ---
-title: 3.2. Data model
+title: 3.02. Data model
 desc: Learn about self-hosting, configuration, developer tools, data models, architecture, and integrations. View Penpot's technical guide. Free to use!
 ---
 

docs/technical-guide/developer/devenv.md

@@ -1,5 +1,5 @@
 ---
-title: 3.3. Dev environment
+title: 3.03. Dev environment
 desc: Dive into Penpot's development environment. Learn about self-hosting, configuration, developer tools, architecture, and more. See the Penpot Technical Guide!
 ---
 

docs/technical-guide/developer/frontend.md

@@ -1,5 +1,5 @@
 ---
-title: 3.5. Frontend Guide
+title: 3.05. Frontend Guide
 desc: "See Penpot's technical guide: self-hosting, configuration, developer insights (architecture, data model), frontend, backend, and integrations & more!"
 ---
 

docs/technical-guide/developer/subsystems/index.md

@@ -1,5 +1,5 @@
 ---
-title: 3.8. Penpot subsystems
+title: 3.09. Penpot subsystems
 desc: Learn about architecture, data models, and subsystems. View Penpot's technical guide for self-hosting, configuration, and development insights. Free!
 ---
 

docs/technical-guide/developer/ui.md

@@ -1,5 +1,5 @@
 ---
-title: 3.9. UI Guide
+title: 3.10. UI Guide
 desc: Learn UI development with React & Rumext, design system implementation, and performance considerations. See Penpot's technical guide. Free to use!
 ---
 

frontend/resources/images/icons/at.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14.499" height="14.507" viewBox="700.734 827.762 14.499 14.507"><path d="M707.948 827.762c-.193 0-.386.007-.578.022-2.311.181-4.574 1.452-5.839 3.982-1.686 3.372-.52 6.821 1.835 8.787 2.354 1.966 5.955 2.497 8.974.233a.566.566 0 1 0-.68-.906c-2.611 1.959-5.563 1.478-7.568-.196-2.004-1.675-3.005-4.495-1.546-7.412 1.458-2.917 4.314-3.808 6.856-3.208 2.543.599 4.698 2.672 4.698 5.936v.667c0 .525-.176.847-.435 1.076-.258.23-.624.357-.998.357s-.741-.127-.999-.357c-.258-.229-.435-.551-.435-1.076v-3.334a.567.567 0 0 0-1.133 0v.215a3.215 3.215 0 0 0-2.1-.781 3.241 3.241 0 0 0-3.233 3.233 3.241 3.241 0 0 0 3.233 3.233 3.23 3.23 0 0 0 2.482-1.168c.122.199.267.377.433.525a2.63 2.63 0 0 0 1.752.643c.626 0 1.259-.206 1.751-.643.492-.437.815-1.115.815-1.923V835c0-3.773-2.586-6.336-5.572-7.04a7.405 7.405 0 0 0-1.713-.198ZM708 832.9c1.167 0 2.1.933 2.1 2.1a2.09 2.09 0 0 1-2.1 2.1 2.09 2.09 0 0 1-2.1-2.1c0-1.167.933-2.1 2.1-2.1Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M10.667 5.333v3.334a2 2 0 1 0 4 0V8a6.667 6.667 0 1 0-2.614 5.293M10.667 8a2.667 2.667 0 1 1-5.334 0 2.667 2.667 0 0 1 5.334 0Z" />
+</svg>

frontend/scripts/build

@@ -5,6 +5,7 @@
 set -ex
 
 export INCLUDE_STORYBOOK=${BUILD_STORYBOOK:-no};
+export INCLUDE_WASM=${BUILD_WASM:-yes};
 
 export CURRENT_VERSION=$1;
 export BUILD_DATE=$(date -R);
@@ -17,14 +18,18 @@ export TS=$(date +%s);
 export NODE_ENV=production;
 
 corepack enable;
-corepack up || exit 1;
+corepack install || exit 1;
 yarn install || exit 1;
 
 rm -rf resources/public;
 rm -rf target/dist;
 
 yarn run build:app:main --config-merge "{:release-version \"${CURRENT_HASH}-${TS}\"}" $EXTRA_PARAMS || exit 1
-yarn run build:wasm || exit 1;
+
+if [ "$INCLUDE_WASM" = "yes" ];  then
+    yarn run build:wasm || exit 1;
+fi
+
 yarn run build:app:libs || exit 1;
 yarn run build:app:assets || exit 1;
 
@@ -36,7 +41,10 @@ sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/dist/render.html;
 sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/dist/rasterizer.html;
 sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./target/dist/index.html;
 sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./target/dist/rasterizer.html;
-sed -i "s/version=develop/version=$CURRENT_VERSION/g" ./target/dist/js/render_wasm.js;
+
+if [ "$INCLUDE_WASM" = "yes" ];  then
+    sed -i "s/version=develop/version=$CURRENT_VERSION/g" ./target/dist/js/render_wasm.js;
+fi
 
 if [ "$INCLUDE_STORYBOOK" = "yes" ];  then
     # build storybook

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

@@ -34,6 +34,7 @@
    [app.common.types.shape :as cts]
    [app.common.types.shape-tree :as ctst]
    [app.common.types.shape.layout :as ctl]
+   [app.common.types.shape.text :as types.text]
    [app.common.types.typography :as ctt]
    [app.common.uuid :as uuid]
    [app.config :as cf]
@@ -2192,27 +2193,27 @@
   (ptk/reify ::paste-html-text
     ptk/WatchEvent
     (watch [_ state  _]
-      (let [root (dwtxt/create-root-from-html html)
-            content (tc/dom->cljs root)
+      (let [root    (dwtxt/create-root-from-html html)
+            content (tc/dom->cljs root)]
+        (when (types.text/valid-content? content)
+          (let [id     (uuid/next)
+                width (max 8 (min (* 7 (count text)) 700))
+                height 16
+                {:keys [x y]} (calculate-paste-position state)
 
-            id (uuid/next)
-            width (max 8 (min (* 7 (count text)) 700))
-            height 16
-            {:keys [x y]} (calculate-paste-position state)
-
-            shape {:id id
-                   :type :text
-                   :name (txt/generate-shape-name text)
-                   :x x
-                   :y y
-                   :width width
-                   :height height
-                   :grow-type (if (> (count text) 100) :auto-height :auto-width)
-                   :content content}
-            undo-id (js/Symbol)]
-        (rx/of (dwu/start-undo-transaction undo-id)
-               (dwsh/create-and-add-shape :text x y shape)
-               (dwu/commit-undo-transaction undo-id))))))
+                shape {:id id
+                       :type :text
+                       :name (txt/generate-shape-name text)
+                       :x x
+                       :y y
+                       :width width
+                       :height height
+                       :grow-type (if (> (count text) 100) :auto-height :auto-width)
+                       :content content}
+                undo-id (js/Symbol)]
+            (rx/of (dwu/start-undo-transaction undo-id)
+                   (dwsh/create-and-add-shape :text x y shape)
+                   (dwu/commit-undo-transaction undo-id))))))))
 
 (defn- paste-text
   [text]

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

@@ -48,7 +48,7 @@
     ptk/UpdateEvent
     (update [_ state]
       (-> state
-          (update :workspace-local dissoc :edition)
+          (update :workspace-local dissoc :edition :edit-path)
           (update :workspace-drawing dissoc :tool :object :lock)
           (dissoc :workspace-grid-edition)))
 

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

@@ -22,6 +22,7 @@
    [app.main.data.helpers :as dsh]
    [app.main.data.modal :as md]
    [app.main.data.workspace.collapse :as dwc]
+   [app.main.data.workspace.edition :as dwe]
    [app.main.data.workspace.specialized-panel :as-alias dwsp]
    [app.main.data.workspace.undo :as dwu]
    [app.main.data.workspace.zoom :as dwz]
@@ -305,8 +306,9 @@
      (watch [_ state _]
        (let [params-without-board (-> (rt/get-params state)
                                       (dissoc :board-id))]
-         (rx/of ::dwsp/interrupt)
-         (rx/of (rt/nav :workspace params-without-board {::rt/replace true}))))
+         (rx/of ::dwsp/interrupt
+                (dwe/clear-edition-mode)
+                (rt/nav :workspace params-without-board {::rt/replace true}))))
 
      ptk/UpdateEvent
      (update [_ state]

frontend/src/app/main/ui/workspace/palette.cljs

@@ -147,6 +147,7 @@
         (swap! state* assoc :width width)))
 
     [:div {:class (stl/css :palette-wrapper)
+           :id "palette-wrapper"
            :style  (calculate-palette-padding rulers?)
            :data-testid "palette"}
      (when-not workspace-read-only?

frontend/src/app/main/ui/workspace/palette.scss

@@ -4,6 +4,10 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "../ds/spacing.scss" as *;
+@use "../ds/z-index.scss" as *;
+@use "../ds/_sizes.scss" as *;
+
 @import "refactor/common-refactor.scss";
 
 .palette-wrapper {
@@ -12,6 +16,12 @@
   left: 0;
   bottom: 0;
   padding-bottom: $s-4;
+
+  /** Aligns AI Chat button **/
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-s);
 }
 
 .palettes {
@@ -164,3 +174,27 @@
     padding-bottom: $s-8;
   }
 }
+
+/** AI Chat button styles **/
+.help-btn {
+  z-index: var(--z-index-panels);
+  flex-shrink: 0;
+  @extend .button-secondary;
+  inline-size: $sz-40;
+  block-size: $sz-40;
+  border-radius: $br-circle;
+  border: none;
+  &.selected {
+    @extend .button-icon-selected;
+  }
+  &:hover {
+    border: none;
+  }
+}
+
+.icon-help {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+  inline-size: var(--sp-xxl);
+  block-size: var(--sp-xxl);
+}

frontend/src/app/main/ui/workspace/right_header.cljs

@@ -129,6 +129,12 @@
         input-ref         (mf/use-ref nil)
 
         team              (mf/deref refs/team)
+        permissions       (get team :permissions)
+
+        display-share-button?
+        (and (not (:is-default team))
+             (or (:is-admin permissions)
+                 (:is-owner permissions)))
 
         nav-to-viewer
         (mf/use-fn
@@ -216,7 +222,7 @@
           :on-click toggle-history}
          i/history]])
 
-     (when  (not (:is-default team))
+     (when display-share-button?
        [:a {:class (stl/css :viewer-btn)
             :title (tr "workspace.header.share")
             :on-click open-share-dialog}

frontend/src/app/util/code_gen/markup_html.cljs

@@ -38,7 +38,8 @@
                        indent))
 
              (cfh/text-shape? shape)
-             (let [text-shape-html (rds/renderToStaticMarkup (mf/element text/text-shape #js {:shape shape :code? true}))]
+             (let [text-shape-html (rds/renderToStaticMarkup (mf/element text/text-shape #js {:shape shape :code? true}))
+                   text-shape-html (str/replace text-shape-html #"style\s*=\s*[\"'][^\"']*[\"']" "")]
                (dm/fmt "%<div class=\"%\">\n%\n%</div>"
                        indent
                        (dm/str "shape " (d/name (:type shape)) " "

frontend/text-editor/src/editor/content/dom/Content.js

@@ -83,7 +83,10 @@ export function mapContentFragmentFromDocument(document, root, styleDefaults) {
     currentNode = nodeIterator.nextNode();
   }
 
-  fragment.appendChild(currentParagraph);
+  if (currentParagraph) {
+    fragment.appendChild(currentParagraph);
+  }
+
   if (fragment.children.length === 1) {
     const isContentInline = isContentFragmentFromDocumentInline(document);
     if (isContentInline) {

manage.sh

@@ -115,6 +115,7 @@ function build {
            --mount source=`pwd`,type=bind,target=/home/penpot/penpot \
            -e EXTERNAL_UID=$CURRENT_USER_ID \
            -e BUILD_STORYBOOK=$BUILD_STORYBOOK \
+           -e BUILD_WASM=$BUILD_WASM \
            -e SHADOWCLJS_EXTRA_PARAMS=$SHADOWCLJS_EXTRA_PARAMS \
            -e JAVA_OPTS="$JAVA_OPTS" \
            -w /home/penpot/penpot/$1 \