🔧 Disable observability for plugin docs and packages

This reverts commit a4f2641cc9.

.github/workflows/plugins-deploy-package.yml

@@ -80,7 +80,7 @@ jobs:
       - name: "Build package for ${{ inputs.plugin_name }}-plugin"
         working-directory: plugins
         shell: bash
-        run: npx nx build ${{ inputs.plugin_name }}-plugin
+        run: pnpm --filter ${{ inputs.plugin_name }}-plugin build
 
       - name: Select Worker name
         run: |

backend/src/app/http/middleware.clj

@@ -213,14 +213,14 @@
       (assoc "access-control-allow-origin" origin)
       (assoc "access-control-allow-methods" "GET,POST,DELETE,OPTIONS,PUT,HEAD,PATCH")
       (assoc "access-control-allow-credentials" "true")
-      (assoc "access-control-expose-headers" "x-requested-with, content-type, cookie")
-      (assoc "access-control-allow-headers" "x-frontend-version, content-type, accept, x-requested-width")))
+      (assoc "access-control-expose-headers" "content-type, set-cookie")
+      (assoc "access-control-allow-headers" "x-frontend-version, x-client, x-requested-width, content-type, accept, cookie")))
 
 (defn wrap-cors
   [handler]
   (fn [request]
     (let [response (if (= (yreq/method request) :options)
-                     {::yres/status 200}
+                     {::yres/status 204}
                      (handler request))
           origin   (yreq/get-header request "origin")]
       (update response ::yres/headers with-cors-headers origin))))

backend/src/app/storage/s3.clj

@@ -33,6 +33,7 @@
    java.util.Optional
    java.util.concurrent.atomic.AtomicLong
    org.reactivestreams.Subscriber
+   software.amazon.awssdk.auth.credentials.DefaultCredentialsProvider
    software.amazon.awssdk.core.ResponseBytes
    software.amazon.awssdk.core.async.AsyncRequestBody
    software.amazon.awssdk.core.async.AsyncResponseTransformer
@@ -199,7 +200,8 @@
 
 (defn- build-s3-client
   [{:keys [::region ::endpoint ::wrk/netty-io-executor]}]
-  (let [aconfig  (-> (ClientAsyncConfiguration/builder)
+  (let [creds-provider (DefaultCredentialsProvider/create)
+        aconfig  (-> (ClientAsyncConfiguration/builder)
                      (.build))
 
         sconfig  (-> (S3Configuration/builder)
@@ -221,6 +223,7 @@
                        builder (.asyncConfiguration ^S3AsyncClientBuilder builder ^ClientAsyncConfiguration aconfig)
                        builder (.httpClient ^S3AsyncClientBuilder builder ^NettyNioAsyncHttpClient hclient)
                        builder (.region ^S3AsyncClientBuilder builder (lookup-region region))
+                       builder (.credentialsProvider ^S3AsyncClientBuilder builder creds-provider)
                        builder (cond-> ^S3AsyncClientBuilder builder
                                  (some? endpoint)
                                  (.endpointOverride (URI. (str endpoint))))]
@@ -237,7 +240,8 @@
 
 (defn- build-s3-presigner
   [{:keys [::region ::endpoint]}]
-  (let [config (-> (S3Configuration/builder)
+  (let [creds-provider (DefaultCredentialsProvider/create)
+        config (-> (S3Configuration/builder)
                    (cond-> (some? endpoint) (.pathStyleAccessEnabled true))
                    (.build))]
 
@@ -245,6 +249,7 @@
         (cond-> (some? endpoint) (.endpointOverride (URI. (str endpoint))))
         (.region (lookup-region region))
         (.serviceConfiguration ^S3Configuration config)
+        (.credentialsProvider creds-provider)
         (.build))))
 
 (defn- write-input-stream

common/src/app/common/files/tokens.cljc

@@ -35,7 +35,7 @@
   [::sm/text {:error/fn token-value-empty-fn}])
 
 (def schema:token-value-font-family
-  [:vector :string])
+  [:vector ::sm/text])
 
 (def schema:token-value-typography-map
   [:map

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

@@ -43,9 +43,13 @@
       (> dy dx)
       (assoc :x (- (:x point) (* sx (- dy dx)))))))
 
-(defn resize-shape [{:keys [x y width height] :as shape} initial point lock? mod?]
+(defn resize-shape [{:keys [x y width height] :as shape} initial point lock? mod? snap-pixel?]
   (if (and (some? x) (some? y) (some? width) (some? height))
-    (let [draw-rect  (grc/make-rect initial (cond-> point lock? (adjust-ratio initial)))
+    (let [draw-rect (cond-> (grc/make-rect initial (cond-> point lock? (adjust-ratio initial)))
+                      snap-pixel?
+                      (-> (update :width max 1)
+                          (update :height max 1)))
+
           shape-rect (grc/make-rect x y width height)
 
           scalev     (gpt/point (/ (:width draw-rect)
@@ -64,8 +68,8 @@
                                    (ctm/move movev)))))
     shape))
 
-(defn update-drawing [state initial point lock? mod?]
-  (update-in state [:workspace-drawing :object] resize-shape initial point lock? mod?))
+(defn- update-drawing [state initial point lock? mod? snap-pixel?]
+  (update-in state [:workspace-drawing :object] resize-shape initial point lock? mod? snap-pixel?))
 
 (defn move-drawing
   [{:keys [x y]}]
@@ -120,7 +124,7 @@
                     (rx/map move-drawing))
 
                (->> ms/mouse-position
-                    (rx/filter #(> (gpt/distance % initial) (/ 2 zoom)))
+                    (rx/filter #(> (* (gpt/distance % initial) zoom) 10))
                     ;; Take until before the snap calculation otherwise we could cancel the snap in the worker
                     ;; and its a problem for fast moving drawing
                     (rx/take-until stopper)
@@ -131,7 +135,7 @@
                             (rx/map (partial array/conj current)))))
                     (rx/map
                      (fn [[_ shift? mod? point]]
-                       #(update-drawing % initial (cond-> point snap-pixel? (gpt/round-step 1)) shift? mod?))))))
+                       #(update-drawing % initial (cond-> point snap-pixel? (gpt/round-step 1)) shift? mod? snap-pixel?))))))
 
          (->> (rx/of (common/handle-finish-drawing))
               (rx/delay 100)))))))

frontend/src/app/main/ui/dashboard/sidebar.cljs

@@ -33,9 +33,7 @@
                                                show-subscription-dashboard-banner?
                                                subscription-sidebar*]]
    [app.main.ui.dashboard.team-form]
-   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
-   [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.nitrate.nitrate-form]
    [app.util.dom :as dom]
@@ -76,8 +74,6 @@
 (def ^:private exit-icon
   (deprecated-icon/icon-xref :exit (stl/css :exit-icon)))
 
-(def ^:private ^:svg-id penpot-logo-icon "penpot-logo-icon")
-
 (mf/defc sidebar-project*
   {::mf/private true}
   [{:keys [item is-selected]}]
@@ -501,21 +497,18 @@
 
 (mf/defc sidebar-org-switch*
   [{:keys [team profile]}]
-  (let [orgs (->> (mf/deref refs/teams)
-                  vals
-                  (group-by :organization-id)
-                  (map (fn [[_group entries]] (first entries)))
-                  vec
-                  (d/index-by :id))
+  (let [teams (->> (mf/deref refs/teams)
+                   vals
+                   (group-by :organization-id)
+                   (map (fn [[_group entries]] (first entries)))
+                   vec
+                   (d/index-by :id))
 
-        orgs (update-vals orgs
-                          (fn [t]
-                            (assoc t :name (str "ORG: " (:organization-name t)))))
+        teams (update-vals teams
+                           (fn [t]
+                             (assoc t :name (str "ORG: " (:organization-name t)))))
 
-        empty? (= (count orgs) 1)
-
-
-        current-org (assoc team :name (str "ORG: " (:organization-name team)))
+        team (assoc team :name (str "ORG: " (:organization-name team)))
 
         show-teams-menu*
         (mf/use-state false)
@@ -539,51 +532,34 @@
              (some-> (dom/get-current-target event)
                      (dom/click!)))))
         close-teams-menu
-        (mf/use-fn #(reset! show-teams-menu* false))
+        (mf/use-fn #(reset! show-teams-menu* false))]
 
-        on-create-org-click
-        (mf/use-fn
-         (fn []
-           (if (:nitrate-licence profile)
-             ;; TODO update when org creation route is ready
-             (dom/open-new-window "/control-center/org/create")
-             (st/emit! (modal/show :nitrate-form {})))))]
-    (if empty?
-      [:div {:class (stl/css :nitrate-orgs-empty)}
-       [:span {:class (stl/css :nitrate-penpot-icon)}
-        [:> raw-svg* {:id penpot-logo-icon}]]
-       "Penpot"
-       [:> button* {:variant "ghost"
-                    :type "button"
-                    :class (stl/css :nitrate-create-org)
-                    :on-click on-create-org-click} (tr "dashboard.create-new-org")]]
+    [:div {:class (stl/css :sidebar-team-switch)}
+     [:div {:class (stl/css :switch-content)}
+      [:button {:class (stl/css :current-team)
+                :on-click on-show-teams-click
+                :on-key-down on-show-teams-keydown}
 
-      [:div {:class (stl/css :sidebar-team-switch)}
-       [:div {:class (stl/css :switch-content)}
-        [:button {:class (stl/css :current-team)
-                  :on-click on-show-teams-click
-                  :on-key-down on-show-teams-keydown}
+       [:div {:class (stl/css :team-name)}
+        [:img {:src (cf/resolve-team-photo-url team)
+               :class (stl/css :team-picture)
+               :alt (:name team)}]
+        [:span {:class (stl/css :team-text) :title (:name team)} (:name team)]]
 
-         [:div {:class (stl/css :team-name)}
-          [:img {:src (cf/resolve-team-photo-url current-org)
-                 :class (stl/css :team-picture)
-                 :alt (:name current-org)}]
-          [:span {:class (stl/css :team-text) :title (:name current-org)} (:name current-org)]]
+       arrow-icon]]
 
-         arrow-icon]]
+     ;; Teams Dropdown
 
-       ;; Teams Dropdown
-
-       [:> teams-selector-dropdown* {:show show-teams-menu?
-                                     :on-close close-teams-menu
-                                     :id "organizations-list"
-                                     :class (stl/css :dropdown :teams-dropdown)
-                                     :team current-org
-                                     :profile profile
-                                     :teams orgs
-                                     :show-default-team false
-                                     :allow-create-teams false
-                                     :allow-create-org true}]])))
+     [:> teams-selector-dropdown* {:show show-teams-menu?
+                                   :on-close close-teams-menu
+                                   :id "organizations-list"
+                                   :class (stl/css :dropdown :teams-dropdown)
+                                   :team team
+                                   :profile profile
+                                   :teams teams
+                                   :show-default-team false
+                                   :allow-create-teams false
+                                   :allow-create-org true}]]))
 
 (mf/defc sidebar-team-switch*
   [{:keys [team profile]}]
@@ -729,8 +705,6 @@
         overflow*   (mf/use-state false)
         overflow?   (deref overflow*)
 
-        nitrate?    (contains? cf/flags :nitrate)
-
         go-projects
         (mf/use-fn #(st/emit! (dcm/go-to-dashboard-recent)))
 
@@ -819,71 +793,70 @@
         (reset! overflow* (> scroll-height client-height))))
 
     [:*
-     [:div {:ref container}
-      (when nitrate?
-        [:div {:class (stl/css :nitrate-orgs-container)}
-         [:> sidebar-org-switch* {:team team :profile profile}]])
-      [:div {:class (stl/css-case :sidebar-content true :sidebar-content-nitrate nitrate?)}
-       [:> sidebar-team-switch* {:team team :profile profile}]
+     [:div {:class (stl/css-case :sidebar-content true)
+            :ref container}
+      (when (contains? cf/flags :nitrate)
+        [:> sidebar-org-switch* {:team team :profile profile}])
+      [:> sidebar-team-switch* {:team team :profile profile}]
 
-       [:> sidebar-search* {:search-term search-term
-                            :team-id (:id team)}]
+      [:> sidebar-search* {:search-term search-term
+                           :team-id (:id team)}]
 
-       [:div {:class (stl/css :sidebar-content-section)}
-        [:ul {:class (stl/css :sidebar-nav)}
-         [:li {:class (stl/css-case :recent-projects true
-                                    :sidebar-nav-item true
-                                    :current projects?)}
-          [:& link {:action go-projects
-                    :class (stl/css :sidebar-link)
-                    :keyboard-action go-projects-with-key}
-           [:span {:class (stl/css :element-title)} (tr "labels.projects")]]]
+      [:div {:class (stl/css :sidebar-content-section)}
+       [:ul {:class (stl/css :sidebar-nav)}
+        [:li {:class (stl/css-case :recent-projects true
+                                   :sidebar-nav-item true
+                                   :current projects?)}
+         [:& link {:action go-projects
+                   :class (stl/css :sidebar-link)
+                   :keyboard-action go-projects-with-key}
+          [:span {:class (stl/css :element-title)} (tr "labels.projects")]]]
 
-         [:li {:class (stl/css-case :current drafts?
-                                    :sidebar-nav-item true)}
-          [:& link {:action go-drafts
-                    :class (stl/css :sidebar-link)
-                    :keyboard-action go-drafts-with-key}
-           [:span {:class (stl/css :element-title)} (tr "labels.drafts")]]]]]
+        [:li {:class (stl/css-case :current drafts?
+                                   :sidebar-nav-item true)}
+         [:& link {:action go-drafts
+                   :class (stl/css :sidebar-link)
+                   :keyboard-action go-drafts-with-key}
+          [:span {:class (stl/css :element-title)} (tr "labels.drafts")]]]]]
 
 
-       [:div {:class (stl/css :sidebar-content-section)}
-        [:div {:class (stl/css :sidebar-section-title)}
-         (tr "labels.sources")]
-        [:ul {:class (stl/css :sidebar-nav)}
-         [:li {:class (stl/css-case :sidebar-nav-item true
-                                    :current fonts?)}
-          [:& link {:action go-fonts
-                    :class (stl/css :sidebar-link)
-                    :keyboard-action go-fonts-with-key
-                    :data-testid "fonts"}
-           [:span {:class (stl/css :element-title)} (tr "labels.fonts")]]]
-         [:li {:class (stl/css-case :current libs?
-                                    :sidebar-nav-item true)}
-          [:& link {:action go-libs
-                    :data-testid "libs-link-sidebar"
-                    :class (stl/css :sidebar-link)
-                    :keyboard-action go-libs-with-key}
-           [:span {:class (stl/css :element-title)} (tr "labels.shared-libraries")]]]]]
+      [:div {:class (stl/css :sidebar-content-section)}
+       [:div {:class (stl/css :sidebar-section-title)}
+        (tr "labels.sources")]
+       [:ul {:class (stl/css :sidebar-nav)}
+        [:li {:class (stl/css-case :sidebar-nav-item true
+                                   :current fonts?)}
+         [:& link {:action go-fonts
+                   :class (stl/css :sidebar-link)
+                   :keyboard-action go-fonts-with-key
+                   :data-testid "fonts"}
+          [:span {:class (stl/css :element-title)} (tr "labels.fonts")]]]
+        [:li {:class (stl/css-case :current libs?
+                                   :sidebar-nav-item true)}
+         [:& link {:action go-libs
+                   :data-testid "libs-link-sidebar"
+                   :class (stl/css :sidebar-link)
+                   :keyboard-action go-libs-with-key}
+          [:span {:class (stl/css :element-title)} (tr "labels.shared-libraries")]]]]]
 
 
-       [:div {:class (stl/css :sidebar-content-section)
-              :data-testid "pinned-projects"}
-        [:div {:class (stl/css :sidebar-section-title)}
-         (tr "labels.pinned-projects")]
-        (if (some? pinned-projects)
-          [:ul {:class (stl/css :sidebar-nav :pinned-projects)}
-           (for [item pinned-projects]
-             [:> sidebar-project*
-              {:item item
-               :key (dm/str (:id item))
-               :id (:id item)
-               :team-id (:id team)
-               :is-selected (= (:id item) (:id project))}])]
-          [:div {:class (stl/css :sidebar-empty-placeholder)}
-           pin-icon
-           [:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]]
-      [:div {:class (stl/css-case :separator true :overflow-separator overflow?)}]]]))
+      [:div {:class (stl/css :sidebar-content-section)
+             :data-testid "pinned-projects"}
+       [:div {:class (stl/css :sidebar-section-title)}
+        (tr "labels.pinned-projects")]
+       (if (some? pinned-projects)
+         [:ul {:class (stl/css :sidebar-nav :pinned-projects)}
+          (for [item pinned-projects]
+            [:> sidebar-project*
+             {:item item
+              :key (dm/str (:id item))
+              :id (:id item)
+              :team-id (:id team)
+              :is-selected (= (:id item) (:id project))}])]
+         [:div {:class (stl/css :sidebar-empty-placeholder)}
+          pin-icon
+          [:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]]
+     [:div {:class (stl/css-case :separator true :overflow-separator overflow?)}]]))
 
 (mf/defc help-learning-menu*
   {::mf/props :obj

frontend/src/app/main/ui/dashboard/sidebar.scss

@@ -40,11 +40,6 @@
   overflow-y: auto;
 }
 
-.sidebar-content-nitrate {
-  padding: var(--sp-m) 0 0 0;
-  border-block-start: $b-1 solid var(--color-background-quaternary);
-}
-
 .separator {
   height: var(--sp-xxs);
   width: 94%;
@@ -519,44 +514,3 @@
   @include t.use-typography("body-small");
   color: var(--color-accent-tertiary);
 }
-
-.nitrate-orgs-container {
-  align-items: center;
-  display: flex;
-  height: calc(2 * var(--sp-xxxl));
-  max-height: calc(2 * var(--sp-xxxl));
-  justify-content: space-between;
-  padding: var(--sp-xs) var(--sp-l) var(--sp-xs) var(--sp-s);
-  // border-block-end: $b-1 solid var(--color-background-quaternary);
-}
-
-.nitrate-orgs-empty {
-  @include t.use-typography("body-medium");
-  color: var(--color-foreground-primary);
-  width: 100%;
-  margin: var(--sp-xs) var(--sp-l);
-  display: flex;
-  align-items: center;
-  gap: var(--sp-s);
-}
-
-.nitrate-create-org {
-  margin-inline-start: auto;
-  text-transform: uppercase;
-}
-
-.nitrate-penpot-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  height: var(--sp-xxxl);
-  width: var(--sp-xxxl);
-  background-color: var(--color-foreground-primary);
-
-  svg {
-    fill: var(--icon-stroke-color);
-    width: var(--sp-xxl);
-    height: var(--sp-xxl);
-  }
-}

frontend/src/app/plugins/register.cljs

@@ -126,6 +126,6 @@
 
 (defn check-permission
   [plugin-id permission]
-  (or (= plugin-id "TEST")
+  (or (= plugin-id "00000000-0000-0000-0000-000000000000")
       (let [{:keys [permissions]} (dm/get-in @registry [:data plugin-id])]
         (contains? permissions permission))))

frontend/src/app/plugins/shape.cljs

@@ -11,6 +11,7 @@
    [app.common.files.helpers :as cfh]
    [app.common.geom.rect :as grc]
    [app.common.geom.shapes :as gsh]
+   [app.common.json :as json]
    [app.common.path-names :as cpn]
    [app.common.record :as crc]
    [app.common.schema :as sm]
@@ -1295,7 +1296,7 @@
                         (get :applied-tokens))]
                 (reduce
                  (fn [acc [prop name]]
-                   (obj/set! acc (d/name prop) name))
+                   (obj/set! acc (json/write-camel-key prop) name))
                  #js {}
                  tokens)))}
 

frontend/src/app/plugins/tokens.cljs

@@ -16,7 +16,7 @@
    [app.main.data.workspace.tokens.application :as dwta]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
    [app.main.store :as st]
-   [app.plugins.shape :as shape]
+   ;; [app.plugins.shape :as shape]
    [app.plugins.utils :as u]
    [app.util.object :as obj]
    [beicon.v2.core :as rx]
@@ -113,13 +113,17 @@
 
     :applyToShapes
     {:schema [:tuple
-              [:vector [:fn shape/shape-proxy?]]
-              [:maybe [:set ::sm/keyword]]]
+              ;; FIXME: the schema decoder is interpreting the array of shape-proxys and converting
+              ;;        them to plain maps. For now we adapt the schema to accept it, but the decoder
+              ;;        should be fixed to keep the original proxy objects coming from the plugin.
+              ;; [:vector [:fn shape/shape-proxy?]]
+              [:vector [:map [:id ::sm/uuid]]]
+              [:maybe [:set [:set [:and ::sm/keyword [:fn cto/token-attr?]]]]]]
      :fn (fn [shapes attrs]
            (apply-token-to-shapes file-id set-id id (map :id shapes) attrs))}
 
     :applyToSelected
-    {:schema [:tuple [:maybe [:set ::sm/keyword]]]
+    {:schema [:tuple [:maybe [:set [:and ::sm/keyword [:fn cto/token-attr?]]]]]
      :fn (fn [attrs]
            (let [selected (get-in @st/state [:workspace-local :selected])]
              (apply-token-to-shapes file-id set-id id selected attrs)))}))

frontend/test/frontend_tests/plugins/context_shapes_test.cljs

@@ -18,7 +18,7 @@
   (let [;; ==== Setup
         store   (ths/setup-store (cthf/sample-file :file1 :page-label :page1))
 
-        ^js context (api/create-context "TEST")
+        ^js context (api/create-context "00000000-0000-0000-0000-000000000000")
 
         _       (set! st/state store)
 

frontend/translations/en.po

@@ -434,7 +434,7 @@ msgid "dashboard.create-new-team"
 msgstr "Create new team"
 
 msgid "dashboard.create-new-org"
-msgstr "+ Create org"
+msgstr "Create new org"
 
 #: src/app/main/ui/workspace/main_menu.cljs:661
 msgid "dashboard.create-version-menu"

frontend/translations/es.po

@@ -443,7 +443,7 @@ msgid "dashboard.create-new-team"
 msgstr "Crear nuevo equipo"
 
 msgid "dashboard.create-new-org"
-msgstr "+ Crear org"
+msgstr "Crear nueva organización"
 
 #: src/app/main/ui/workspace/main_menu.cljs:661
 msgid "dashboard.create-version-menu"

plugins/apps/colors-to-tokens-plugin/wrangler.toml

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/colors-to-tokens-plugin/browser" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/contrast-plugin/wrangler.toml

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/contrast-plugin/browser" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/create-palette-plugin/wrangler.toml

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/create-palette-plugin" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/e2e/eslint.config.js

@@ -28,5 +28,5 @@ export default [
     files: ['**/*.js', '**/*.jsx'],
     rules: {},
   },
-  { ignores: ['vite.config.ts'] },
+  { ignores: ['vite.config.ts', 'vitest.setup.ts'] },
 ];

plugins/apps/e2e/src/plugins.spec.ts

@@ -29,6 +29,7 @@ describe('Plugins', () => {
 
   it('create grid layout', async () => {
     const agent = await Agent();
+
     const result = await agent.runCode(grid.toString(), {
       screenshot: 'create-gridlayout',
     });
@@ -83,9 +84,9 @@ describe('Plugins', () => {
 
   it('comments', async () => {
     const agent = await Agent();
+    console.log(comments.toString());
     const result = await agent.runCode(comments.toString(), {
       screenshot: 'create-comments',
-      avoidSavedStatus: true,
     });
     expect(result).toMatchSnapshot();
   });

plugins/apps/e2e/src/utils/agent.ts

@@ -1,4 +1,4 @@
-import puppeteer from 'puppeteer';
+import puppeteer, { ConsoleMessage } from 'puppeteer';
 import { PenpotApi } from './api';
 import { getFileUrl } from './get-file-url';
 import { idObjectToArray } from './clean-id';
@@ -56,10 +56,16 @@ export async function Agent() {
   console.log('File URL:', fileUrl);
 
   console.log('Launching browser...');
-  const browser = await puppeteer.launch({});
+  const browser = await puppeteer.launch({
+    headless: process.env['E2E_HEADLESS'] !== 'false',
+    args: ['--ignore-certificate-errors'],
+  });
   const page = await browser.newPage();
 
   await page.setViewport({ width: 1920, height: 1080 });
+  await page.setExtraHTTPHeaders({
+    'X-Client': 'plugins/e2e:puppeter',
+  });
 
   console.log('Setting authentication cookie...');
   page.setCookie({
@@ -85,8 +91,11 @@ export async function Agent() {
 
   const finish = async () => {
     console.log('Deleting file and closing browser...');
-    await penpotApi.deleteFile(file['~:id']);
-    await browser.close();
+    // TODO
+    // await penpotApi.deleteFile(file['~:id']);
+    if (process.env['E2E_CLOSE_BROWSER'] !== 'false') {
+      await browser.close();
+    }
     console.log('Clean up done.');
   };
 
@@ -96,11 +105,9 @@ export async function Agent() {
       options: {
         screenshot?: string;
         autoFinish?: boolean;
-        avoidSavedStatus?: boolean;
       } = {
         screenshot: '',
         autoFinish: true,
-        avoidSavedStatus: false,
       },
     ) {
       const autoFinish = options.autoFinish ?? true;
@@ -109,28 +116,27 @@ export async function Agent() {
       await page.evaluate((testingPlugin) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (globalThis as any).ɵloadPlugin({
-          pluginId: 'TEST',
+          pluginId: '00000000-0000-0000-0000-000000000000',
           name: 'Test',
           code: `
             (${testingPlugin})();
           `,
           icon: '',
           description: '',
-          permissions: ['content:read', 'content:write'],
+          permissions: [
+            'content:read',
+            'content:write',
+            'library:read',
+            'library:write',
+            'user:read',
+            'comment:read',
+            'comment:write',
+            'allow:downloads',
+            'allow:localstorage',
+          ],
         });
       }, code);
 
-      if (!options.avoidSavedStatus) {
-        console.log('Waiting for save status...');
-        await page.waitForSelector(
-          '.main_ui_workspace_right_header__saved-status',
-          {
-            timeout: 10000,
-          },
-        );
-        console.log('Save status found.');
-      }
-
       if (options.screenshot && screenshotsEnable) {
         console.log('Taking screenshot:', options.screenshot);
         await page.screenshot({
@@ -138,30 +144,55 @@ export async function Agent() {
         });
       }
 
-      return new Promise((resolve) => {
-        page.once('console', async (msg) => {
+      const result = await new Promise((resolve) => {
+        const handleConsole = async (msg: ConsoleMessage) => {
           const args = (await Promise.all(
             msg.args().map((arg) => arg.jsonValue()),
-          )) as Record<string, unknown>[];
+          )) as unknown[];
 
-          const result = Object.values(args[1]) as Shape[];
+          const type = args[0];
+          const data = args[1];
+
+          if (type !== 'objects' || !data || typeof data !== 'object') {
+            console.log('Invalid console message, waiting for valid one...');
+            page.once('console', handleConsole);
+            return;
+          }
+
+          const result = Object.values(data) as Shape[];
 
           replaceIds(result);
           console.log('IDs replaced in result.');
 
           resolve(result);
+        };
 
-          if (autoFinish) {
-            console.log('Auto finish enabled. Cleaning up...');
-            finish();
-          }
-        });
+        page.once('console', handleConsole);
 
         console.log('Evaluating debug.dump_objects...');
         page.evaluate(`
           debug.dump_objects();
         `);
       });
+
+      await page.waitForNetworkIdle({ idleTime: 2000 });
+
+      // Wait for the update-file API call to complete
+      if (process.env['E2E_WAIT_API_RESPONSE'] === 'true') {
+        await page.waitForResponse(
+          (response) =>
+            response.url().includes('api/main/methods/update-file') &&
+            response.status() === 200,
+          { timeout: 10000 },
+        );
+      }
+
+      if (autoFinish) {
+        console.log('Auto finish enabled. Cleaning up...');
+        await finish();
+      }
+
+      return result;
     },
     finish,
   };

plugins/apps/e2e/src/utils/api.ts

@@ -1,31 +1,34 @@
 import { FileRpc } from '../models/file-rpc.model';
-
-const apiUrl = 'http://localhost:3449';
+const apiUrl = 'https://localhost:3449';
 
 export async function PenpotApi() {
   if (!process.env['E2E_LOGIN_EMAIL']) {
     throw new Error('E2E_LOGIN_EMAIL not set');
   }
 
+  const body = JSON.stringify({
+    email: process.env['E2E_LOGIN_EMAIL'],
+    password: process.env['E2E_LOGIN_PASSWORD'],
+  });
+
   const resultLoginRequest = await fetch(
-    `${apiUrl}/api/rpc/command/login-with-password`,
+    `${apiUrl}/api/main/methods/login-with-password`,
     {
+      credentials: 'include',
       method: 'POST',
       headers: {
-        'Content-Type': 'application/transit+json',
+        'Content-Type': 'application/json',
       },
-      body: JSON.stringify({
-        '~:email': process.env['E2E_LOGIN_EMAIL'],
-        '~:password': process.env['E2E_LOGIN_PASSWORD'],
-      }),
+      body: body,
     },
   );
 
   const loginData = await resultLoginRequest.json();
+
   const authToken = resultLoginRequest.headers
-    .get('set-cookie')
-    ?.split(';')
-    .at(0);
+    .getSetCookie()
+    .find((cookie: string) => cookie.startsWith('auth-token='))
+    ?.split(';')[0];
 
   if (!authToken) {
     throw new Error('Login failed');
@@ -35,7 +38,7 @@ export async function PenpotApi() {
     getAuth: () => authToken,
     createFile: async () => {
       const createFileRequest = await fetch(
-        `${apiUrl}/api/rpc/command/create-file`,
+        `${apiUrl}/api/main/methods/create-file`,
         {
           method: 'POST',
           headers: {
@@ -51,6 +54,9 @@ export async function PenpotApi() {
                 'fdata/objects-map',
                 'fdata/pointer-map',
                 'fdata/shape-data-type',
+                'fdata/path-data',
+                'design-tokens/v1',
+                'variants/v1',
                 'components/v2',
                 'styles/v2',
                 'layout/grid',
@@ -61,11 +67,13 @@ export async function PenpotApi() {
         },
       );
 
-      return (await createFileRequest.json()) as FileRpc;
+      const fileData = (await createFileRequest.json()) as FileRpc;
+      console.log('File data received:', fileData);
+      return fileData;
     },
     deleteFile: async (fileId: string) => {
       const deleteFileRequest = await fetch(
-        `${apiUrl}/api/rpc/command/delete-file`,
+        `${apiUrl}/api/main/methods/delete-file`,
         {
           method: 'POST',
           headers: {

plugins/apps/e2e/src/utils/get-file-url.ts

@@ -6,5 +6,5 @@ export function getFileUrl(file: FileRpc) {
   const fileId = cleanId(file['~:id']);
   const pageId = cleanId(file['~:data']['~:pages'][0]);
 
-  return `http://localhost:3449/#/workspace/${projectId}/${fileId}?page-id=${pageId}`;
+  return `https://localhost:3449/#/workspace/${projectId}/${fileId}?page-id=${pageId}`;
 }

plugins/apps/e2e/vite.config.ts

@@ -7,13 +7,27 @@ export default defineConfig({
     testTimeout: 20000,
     watch: false,
     globals: true,
-    environment: 'happy-dom',
+    environment: 'node',
+    environmentOptions: {
+      happyDOM: {
+        settings: {
+          disableCSSFileLoading: true,
+          disableJavaScriptFileLoading: true,
+          disableJavaScriptEvaluation: true,
+          enableFileSystemHttpRequests: false,
+          navigator: {
+            userAgent:
+              'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
+          },
+        },
+      },
+    },
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],
     coverage: {
       reportsDirectory: '../coverage/e2e',
       provider: 'v8',
     },
-    setupFiles: ['dotenv/config'],
+    setupFiles: ['dotenv/config', 'vitest.setup.ts'],
   },
 });

plugins/apps/e2e/vitest.setup.ts

@@ -0,0 +1 @@
+process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';

plugins/apps/icons-plugin/wrangler.toml

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/icons-plugin/browser" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/lorem-ipsum-plugin/wrangler.toml

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/lorem-ipsum-plugin/browser" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/poc-tokens-plugin/src/plugin.ts

@@ -251,7 +251,14 @@ function applyToken(
     token.applyToSelected(properties);
   }
 
-  // Alternatve way
+  // Alternative way
+  //
+  // const selection = penpot.selection;
+  // if (token && selection) {
+  //   token.applyToShapes(selection, properties);
+  // }
+
+  // Other alternative way
   //
   // const selection = penpot.selection;
   // if (token && selection) {

plugins/apps/rename-layers-plugin/wrangler.toml

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/rename-layers-plugin/browser" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/apps/table-plugin/wrangler.toml

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "../../dist/apps/table-plugin/browser" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/docs/test-e2e.md

@@ -4,12 +4,15 @@
 
 1. **Configure Environment Variables**
 
-   Create and populate the `.env` file with a valid user mail & password:
+   Create and populate the `apps/e2e/.env` file with a valid user mail & password:
 
    ```env
    E2E_LOGIN_EMAIL="test@penpot.app"
    E2E_LOGIN_PASSWORD="123123123"
-   E2E_SCREENSHOTS= "true"
+   E2E_SCREENSHOTS="true"              # Enable/disable screenshots (default: false)
+   E2E_HEADLESS="false"                # Run browser in headless mode (default: true)
+   E2E_CLOSE_BROWSER="true"            # Close browser after tests (default: true)
+   E2E_WAIT_API_RESPONSE="false"       # Wait for update-file API response (default: false)
    ```
 
 2. **Run E2E Tests**
@@ -24,7 +27,7 @@
 
 1. **Adding Tests**
 
-   Place your test files in the `/apps/e2e/src/**/*.spec.ts` directory. Below is an example of a test file:
+   Place your test files in the `apps/e2e/src/**/*.spec.ts` directory. Below is an example of a test file:
 
    ```ts
    import testingPlugin from './plugins/create-board-text-rect';
@@ -77,5 +80,5 @@
    If you need to refresh all the snapshopts run the test with the update option:
 
    ```bash
-   pnpm run test:e2e -- --update
+   pnpm run test:e2e --update
    ```

plugins/libs/plugin-types/index.d.ts

@@ -3744,7 +3744,7 @@ export interface ShapeBase extends PluginData {
    * and the value set to the attributes will depend on which sets are active
    * (and will change if different sets or themes are activated later).
    */
-  readonly tokens: { [property: string]: string };
+  readonly tokens: { [property in TokenProperty]: string };
 
   /**
    * @return Returns true if the current shape is inside a component instance
@@ -5221,7 +5221,7 @@ type TokenDimensionProps =
   | 'y'
 
   // Stroke width
-  | 'stroke-width';
+  | 'strokeWidth';
 
 /**
  * The properties that a FontFamilies token can be applied to.

plugins/libs/plugins-runtime/src/index.ts

@@ -28,7 +28,9 @@ export const initPluginsRuntime = (contextBuilder: (id: string) => Context) => {
   try {
     console.log('%c[PLUGINS] Initialize runtime', 'color: #008d7c');
     setContextBuilder(contextBuilder);
-    globalThisAny$.ɵcontext = contextBuilder('TEST');
+    globalThisAny$.ɵcontext = contextBuilder(
+      '00000000-0000-0000-0000-000000000000',
+    );
     globalThis.ɵloadPlugin = ɵloadPlugin;
     globalThis.ɵloadPluginByUrl = ɵloadPluginByUrl;
     globalThis.ɵunloadPlugin = ɵunloadPlugin;

plugins/wrangler-penpot-plugins-api-doc.toml

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "dist/doc" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true

plugins/wrangler-penpot-plugins-styles-doc.toml

@@ -3,21 +3,6 @@ compatibility_date = "2025-01-01"
 
 assets = { directory = "dist/apps/example-styles" }
 
-[observability]
-enabled = true
-head_sampling_rate = 1
-
-[observability.logs]
-enabled = true
-head_sampling_rate = 1
-persist = true
-invocation_logs = true
-
-[observability.traces]
-enabled = false
-persist = true
-head_sampling_rate = 1
-
 [[routes]]
 pattern = "WORKER_URI"
 custom_domain = true