🐛 Fix unhandled exception tokens creation dialog

Merge pull request #8134 from penpot/alotor-fix-plugins-export
🐛 Fix problem with export in plugins
2026-01-20 12:20:16 -05:00 · 2026-01-20 16:16:08 +01:00 · 2026-01-20 15:03:04 +01:00 · 2026-01-20 13:25:55 +01:00 · 2026-01-20 12:26:55 +01:00 · 2026-01-20 12:26:39 +01:00
20 changed files with 109 additions and 87 deletions
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -29,7 +29,7 @@
 - Fix missing text color token from selected shapes in selected colors list [Taiga #12956](https://tree.taiga.io/project/penpot/issue/12956)
 - Fix dropdown option width in Guides columns dropdown [Taiga #12959](https://tree.taiga.io/project/penpot/issue/12959)
 - Fix typos on download modal [Taiga #12865](https://tree.taiga.io/project/penpot/issue/12865)
-
+- Fix unhandled exception tokens creation dialog [Github #8110](https://github.com/penpot/penpot/issues/8110)

 ## 2.12.1

--- a/docker/images/docker-compose.yaml
+++ b/docker/images/docker-compose.yaml
@@ -152,9 +152,9 @@ services:

      # AWS_ACCESS_KEY_ID: <KEY_ID>
      # AWS_SECRET_ACCESS_KEY: <ACCESS_KEY>
-      # PENPOT_ASSETS_STORAGE_BACKEND: assets-s3
-      # PENPOT_STORAGE_ASSETS_S3_ENDPOINT: <ENDPOINT>
-      # PENPOT_STORAGE_ASSETS_S3_BUCKET: <BUKET_NAME>
+      # PENPOT_OBJECTS_STORAGE_BACKEND: s3
+      # PENPOT_OBJECTS_STORAGE_S3_ENDPOINT: <ENDPOINT>
+      # PENPOT_OBJECTS_STORAGE_S3_BUCKET: <BUKET_NAME>

      ## Telemetry. When enabled, a periodical process will send anonymous data about this
      ## instance. Telemetry data will enable us to learn how the application is used,
--- a/frontend/resources/templates/index.mustache
+++ b/frontend/resources/templates/index.mustache
@@ -17,17 +17,18 @@
    <meta name="twitter:site" content="@penpotapp">
    <meta name="twitter:creator" content="@penpotapp">
    <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
-    <link id="theme" href="css/main.css?version={{& version}}" rel="stylesheet" type="text/css" />
+    <link id="theme" href="css/main.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
    {{#isDebug}}
-    <link href="css/debug.css?version={{& version}}" rel="stylesheet" type="text/css" />
+    <link href="css/debug.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
    {{/isDebug}}

-    <link rel="icon" href="images/favicon.png" />
+    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />

    <script type="importmap">{{& manifest.importmap }}</script>

    <script type="module">
      globalThis.penpotVersion = "{{& version}}";
+      globalThis.penpotVersionTag = "{{& version_tag}}";
      globalThis.penpotBuildDate = "{{& build_date}}";
      globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
    </script>
--- a/frontend/resources/templates/rasterizer.mustache
+++ b/frontend/resources/templates/rasterizer.mustache
@@ -3,10 +3,11 @@
  <head>
    <meta charset="utf-8" />
    <title>Penpot - Rasterizer</title>
-    <link rel="icon" href="images/favicon.png" />
+    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />

    <script>
      globalThis.penpotVersion = "{{& version}}";
+      globalThis.penpotVersionTag = "{{& version_tag}}";
      globalThis.penpotBuildDate = "{{& build_date}}";
      globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
    </script>
--- a/frontend/resources/templates/render.mustache
+++ b/frontend/resources/templates/render.mustache
@@ -4,10 +4,12 @@
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Penpot - Render</title>
-    <link rel="icon" href="images/favicon.png" />
+
+    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />

    <script>
      globalThis.penpotVersion = "{{& version}}";
+      globalThis.penpotVersionTag = "{{& version_tag}}";
      globalThis.penpotBuildDate = "{{& build_date}}";
    </script>

--- a/frontend/scripts/_helpers.js
+++ b/frontend/scripts/_helpers.js
@@ -27,9 +27,11 @@ export function startWorker() {
  });
 }

-export const isDebug = process.env.NODE_ENV !== "production";
-export const CURRENT_VERSION = process.env.CURRENT_VERSION || "develop";
-export const BUILD_DATE = process.env.BUILD_DATE || "" + new Date();
+export const IS_DEBUG = process.env.NODE_ENV !== "production";
+export const BUILD_DATE = process.env.BUILD_DATE || (new Date().toString()) ;
+export const BUILD_TS = process.env.BUILD_TS || Date.now();
+export const VERSION = process.env.VERSION || "develop";
+export const VERSION_TAG = process.env.VERSION_TAG || VERSION;

 async function findFiles(basePath, predicate, options = {}) {
  predicate =
@@ -193,25 +195,25 @@ async function generateManifest() {
    render_main: "./js/render.js",
    rasterizer_main: "./js/rasterizer.js",

-    config: "./js/config.js?version=" + CURRENT_VERSION,
-    polyfills: "./js/polyfills.js?version=" + CURRENT_VERSION,
-    libs: "./js/libs.js?version=" + CURRENT_VERSION,
-    worker_main: "./js/worker/main.js?version=" + CURRENT_VERSION,
-    default_translations: "./js/translation.en.js?version=" + CURRENT_VERSION,
+    config: "./js/config.js?version=" + VERSION_TAG,
+    polyfills: "./js/polyfills.js?version=" + VERSION_TAG,
+    libs: "./js/libs.js?version=" + VERSION_TAG,
+    worker_main: "./js/worker/main.js?version=" + VERSION_TAG,
+    default_translations: "./js/translation.en.js?version=" + VERSION_TAG,

    importmap: JSON.stringify({
      "imports": {
-        "./js/shared.js": "./js/shared.js?version=" + CURRENT_VERSION,
-        "./js/main.js": "./js/main.js?version=" + CURRENT_VERSION,
-        "./js/render.js": "./js/render.js?version=" + CURRENT_VERSION,
-        "./js/render-wasm.js": "./js/render-wasm.js?version=" + CURRENT_VERSION,
-        "./js/rasterizer.js": "./js/rasterizer.js?version=" + CURRENT_VERSION,
-        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + CURRENT_VERSION,
-        "./js/main-auth.js": "./js/main-auth.js?version=" + CURRENT_VERSION,
-        "./js/main-viewer.js": "./js/main-viewer.js?version=" + CURRENT_VERSION,
-        "./js/main-settings.js": "./js/main-settings.js?version=" + CURRENT_VERSION,
-        "./js/main-workspace.js": "./js/main-workspace.js?version=" + CURRENT_VERSION,
-        "./js/util-highlight.js": "./js/util-highlight.js?version=" + CURRENT_VERSION
+        "./js/shared.js": "./js/shared.js?version=" + VERSION_TAG,
+        "./js/main.js": "./js/main.js?version=" + VERSION_TAG,
+        "./js/render.js": "./js/render.js?version=" + VERSION_TAG,
+        "./js/render-wasm.js": "./js/render-wasm.js?version=" + VERSION_TAG,
+        "./js/rasterizer.js": "./js/rasterizer.js?version=" + VERSION_TAG,
+        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + VERSION_TAG,
+        "./js/main-auth.js": "./js/main-auth.js?version=" + VERSION_TAG,
+        "./js/main-viewer.js": "./js/main-viewer.js?version=" + VERSION_TAG,
+        "./js/main-settings.js": "./js/main-settings.js?version=" + VERSION_TAG,
+        "./js/main-workspace.js": "./js/main-workspace.js?version=" + VERSION_TAG,
+        "./js/util-highlight.js": "./js/util-highlight.js?version=" + VERSION_TAG
      }
    })
  };
@@ -222,11 +224,12 @@ async function generateManifest() {
 async function renderTemplate(path, context = {}, partials = {}) {
  const content = await fs.readFile(path, { encoding: "utf-8" });

-  const ts = Math.floor(new Date());
-
  context = Object.assign({}, context, {
-    ts: ts,
-    isDebug,
+    isDebug: IS_DEBUG,
+    version: VERSION,
+    version_tag: VERSION_TAG,
+    build_date: BUILD_DATE,
+    build_ts: BUILD_TS,
  });

  return mustache.render(content, context, partials);
@@ -390,7 +393,6 @@ async function generateSvgSprites() {
 }

 async function generateTemplates() {
-  const isDebug = process.env.NODE_ENV !== "production";
  await fs.mkdir("./resources/public/", { recursive: true });

  const manifest = await generateManifest();
@@ -415,10 +417,7 @@ async function generateTemplates() {
  };

  const context = {
-    manifest: manifest,
-    version: CURRENT_VERSION,
-    build_date: BUILD_DATE,
-    isDebug,
+    manifest: manifest
  };

  content = await renderTemplate(
@@ -487,7 +486,7 @@ export async function compileStyles() {
  await fs.mkdir("./resources/public/css", { recursive: true });
  await fs.writeFile("./resources/public/css/main.css", result);

-  if (isDebug) {
+  if (IS_DEBUG) {
    let debugCSS = await compileSassDebug(worker);
    await fs.writeFile("./resources/public/css/debug.css", debugCSS);
  }
--- a/frontend/scripts/build
+++ b/frontend/scripts/build
@@ -2,26 +2,26 @@
 # NOTE: this script should be called from the parent directory to
 # properly work.

+set -ex
+
 export INCLUDE_STORYBOOK=${BUILD_STORYBOOK:-no};
 export INCLUDE_WASM=${BUILD_WASM:-yes};
-export CURRENT_VERSION=$1;
-export BUILD_DATE=$(date -R);
-export CURRENT_HASH=${CURRENT_HASH:-$(git rev-parse --short HEAD)};
 export EXTRA_PARAMS=$SHADOWCLJS_EXTRA_PARAMS;
-export TS=$(date +%s);
+
+export BUILD_DATE=$(date -R);
+export BUILD_TS=$(date +%s);
+
+export VERSION=${1:-develop};
+export VERSION_TAG="${VERSION}-${BUILD_TS}";

 # Some cljs reacts on this environment variable for define more
 # performant code on macros (example: rumext)
 export NODE_ENV=production;

-echo "Current path:"
-echo $PATH
-
-set -ex

 corepack enable;
 corepack install;
-yarn install || exit 1;
+yarn install;

 rm -rf target/dist;
 rm -rf resources/public;
@@ -37,7 +37,7 @@ yarn run build:app:main $EXTRA_PARAMS;
 yarn run build:app:libs;
 yarn run build:app:assets;

-sed -i "s/\.\/render.js/.\/render.js?version=$CURRENT_VERSION/g" resources/public/js/worker/main*.js
+sed -i "s/\.\/render.js/.\/render.js?version=$VERSION_TAG/g" resources/public/js/worker/main*.js

 rsync -avr resources/public/ target/dist/

--- a/frontend/scripts/build-storybook
+++ b/frontend/scripts/build-storybook
@@ -2,18 +2,16 @@
 # NOTE: this script should be called from the parent directory to
 # properly work.

-export CURRENT_VERSION=$1;
+set -ex
+
+export BUILD_TS=$(date +%s);
 export BUILD_DATE=$(date -R);
-export CURRENT_HASH=${CURRENT_HASH:-$(git rev-parse --short HEAD)};
-export TS=$(date +%s);
+
+export VERSION=${1:-develop};
+export VERSION_TAG="${VERSION}-${BUILD_TS}";

 export NODE_ENV=production;

-echo "Current path:"
-echo $PATH
-
-set -ex
-
 corepack enable;
 corepack install || exit 1;
 yarn install || exit 1;
--- a/frontend/shadow-cljs.edn
+++ b/frontend/shadow-cljs.edn
@@ -75,6 +75,7 @@
    {:fn-invoke-direct true
     :optimizations #shadow/env ["PENPOT_BUILD_OPTIMIZATIONS" :as :keyword :default :advanced]
     :source-map true
+     :pseudo-names true
     :elide-asserts true
     :anon-fn-naming-policy :off
     :cross-chunk-method-motion false
--- a/frontend/src/app/config.cljs
+++ b/frontend/src/app/config.cljs
@@ -95,6 +95,7 @@
 (def browser              (parse-browser))
 (def platform             (parse-platform))

+(def version-tag          (obj/get global "penpotVersionTag"))
 (def terms-of-service-uri (obj/get global "penpotTermsOfServiceURI"))
 (def privacy-policy-uri   (obj/get global "penpotPrivacyPolicyURI"))
 (def flex-help-uri        (obj/get global "penpotGridHelpURI" "https://help.penpot.app/user-guide/flexible-layouts/"))
@@ -190,9 +191,8 @@

 (defn resolve-href
  [resource]
-  (let [version (get version :full)
-        href    (-> public-uri
-                    (u/ensure-path-slash)
-                    (u/join resource)
-                    (get :path))]
-    (str href "?version=" version)))
+  (let [href (-> public-uri
+                 (u/ensure-path-slash)
+                 (u/join resource)
+                 (get :path))]
+    (str href "?version=" version-tag)))
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -480,6 +480,9 @@
 (def workspace-token-sets-tree
  (l/derived (d/nilf ctob/get-set-tree) tokens-lib))

+(def workspace-all-tokens-map
+  (l/derived (d/nilf ctob/get-all-tokens) tokens-lib))
+
 (def workspace-active-theme-paths
  (l/derived (d/nilf ctob/get-active-theme-paths) tokens-lib))

--- a/frontend/src/app/main/ui/forms.cljs
+++ b/frontend/src/app/main/ui/forms.cljs
@@ -52,7 +52,8 @@
  (let [form      (mf/use-ctx context)
        disabled? (or (and (some? form)
                           (or (not (:valid @form))
-                               (seq (:external-errors @form))))
+                               (seq (:async-errors @form))
+                               (seq (:extra-errors @form))))
                      (true? disabled))
        handle-key-down-save
        (mf/use-fn
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/color_input.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/color_input.cljs
@@ -140,6 +140,9 @@
        error
        (get-in @form [:errors input-name])

+        extra-error
+        (get-in @form [:extra-errors input-name])
+
        value
        (get-in @form [:data input-name] "")

@@ -247,9 +250,14 @@
                                  :hint-type (:type hint)})

        props
-        (if (and error touched?)
+        (cond
+          (and error touched?)
          (mf/spread-props props {:hint-type "error"
                                  :hint-message (:message error)})
+          (and extra-error touched?)
+          (mf/spread-props props {:hint-type "error"
+                                  :hint-message (:message extra-error)})
+          :else
          props)]

    (mf/with-effect [resolve-stream tokens token input-name]
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs
@@ -332,6 +332,7 @@
                                 message (tr "workspace.tokens.resolved-value" (or resolved-value value))]
                             (swap! form update :errors dissoc :value)
                             (swap! form update :extra-errors dissoc :value)
+                             (swap! form update :async-errors dissoc :reference)
                             (if (= input-value (str resolved-value))
                               (reset! hint* {})
                               (reset! hint* {:message message :type "hint"})))))))]
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/form_container.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/form_container.cljs
@@ -23,20 +23,19 @@
  (let [token-type
        (or (:type token) token-type)

-        tokens-in-selected-set
-        (mf/deref refs/workspace-all-tokens-in-selected-set)
-
        token-path
        (mf/with-memo [token]
          (cft/token-name->path (:name token)))

-        tokens-tree-in-selected-set
-        (mf/with-memo [token-path tokens-in-selected-set]
-          (-> (ctob/tokens-tree tokens-in-selected-set)
+        all-tokens (mf/deref refs/workspace-all-tokens-map)
+
+        all-tokens
+        (mf/with-memo [token-path all-tokens]
+          (-> (ctob/tokens-tree all-tokens)
              (d/dissoc-in token-path)))
        props
        (mf/spread-props props {:token-type token-type
-                                :tokens-tree-in-selected-set tokens-tree-in-selected-set
+                                :all-token-tree all-tokens
                                :token token})
        text-case-props (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-case-value-enter")})
        text-decoration-props (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-decoration-value-enter")})
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
@@ -14,6 +14,7 @@
   [app.main.constants :refer [max-input-length]]
   [app.main.data.modal :as modal]
   [app.main.data.workspace.tokens.application :as dwta]
+   [app.main.data.workspace.tokens.errors :as wte]
   [app.main.data.workspace.tokens.library-edit :as dwtl]
   [app.main.data.workspace.tokens.propagation :as dwtp]
   [app.main.refs :as refs]
@@ -85,7 +86,7 @@
           action
           is-create
           selected-token-set-id
-           tokens-tree-in-selected-set
+           all-token-tree
           token-type
           make-schema
           input-component
@@ -101,13 +102,6 @@
        active-tab* (mf/use-state #(if (cft/is-reference? token) :reference :composite))
        active-tab (deref active-tab*)

-        on-toggle-tab
-        (mf/use-fn
-         (mf/deps)
-         (fn [new-tab]
-           (let [new-tab (keyword new-tab)]
-             (reset! active-tab* new-tab))))
-
        token
        (mf/with-memo [token]
          (or token {:type token-type}))
@@ -130,8 +124,8 @@
            (assoc (:name token) token)))

        schema
-        (mf/with-memo [tokens-tree-in-selected-set active-tab]
-          (make-schema tokens-tree-in-selected-set active-tab))
+        (mf/with-memo [all-token-tree active-tab]
+          (make-schema all-token-tree active-tab))

        initial
        (mf/with-memo [token]
@@ -144,6 +138,17 @@
        (fm/use-form :schema schema
                     :initial initial)

+        on-toggle-tab
+        (mf/use-fn
+         (mf/deps form)
+         (fn [new-tab]
+           (let [new-tab (keyword new-tab)]
+             (if (= new-tab :reference)
+               (swap! form assoc-in [:async-errors :reference]
+                      {:message "Need valid reference"})
+               (swap! form update :async-errors dissoc :reference))
+             (reset! active-tab* new-tab))))
+
        warning-name-change?
        (not= (get-in @form [:data :name])
              (:name initial))
@@ -203,7 +208,11 @@
                                            :value (:value valid-token)
                                            :description description}))
                      (dwtp/propagate-workspace-tokens)
-                      (modal/hide))))))))]
+                      (modal/hide)))))
+             (fn [{:keys [errors]}]
+               (let [error-messages (wte/humanize-errors errors)
+                     error-message (first error-messages)]
+                 (swap! form assoc-in [:extra-errors :value] {:message error-message}))))))]

    [:> fc/form* {:class (stl/css :form-wrapper)
                  :form form
--- a/frontend/src/app/plugins/shape.cljs
+++ b/frontend/src/app/plugins/shape.cljs
@@ -1185,7 +1185,6 @@
                       {:cmd :export-shapes
                        :profile-id (:profile-id @st/state)
                        :wait true
-                        :skip-children (:skip-children value false)
                        :exports [{:file-id   file-id
                                   :page-id   page-id
                                   :object-id id
--- a/frontend/src/app/util/i18n.cljs
+++ b/frontend/src/app/util/i18n.cljs
@@ -114,7 +114,7 @@

 (defn- load
  [locale]
-  (let [path (str "./translation." locale ".js?version=" (:full cf/version))]
+  (let [path (str "./translation." locale ".js?version=" cf/version-tag)]
    (->> (mod/import path)
         (p/fmap (fn [result] (unchecked-get result "default")))
         (p/fnly (fn [data cause]
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -7757,7 +7757,7 @@ msgstr "Line height (multiplicador, px o %) o {alias}"

 #: src/app/main/data/workspace/tokens/errors.cljs:57
 msgid "workspace.tokens.missing-references"
-msgstr "Referéncias de tokens no encontradas:"
+msgstr "Referencias de tokens no encontradas: "

 #: src/app/main/ui/workspace/tokens/management/token_pill.cljs:123
 msgid "workspace.tokens.more-options"
--- a/render-wasm/_build_env
+++ b/render-wasm/_build_env
@@ -1,6 +1,6 @@
 #!/usr/bin/env bash

-export CURRENT_VERSION=${CURRENT_VERSION:-develop};
+export VERSION_TAG=${VERSION:-develop};

 if [ "$NODE_ENV" = "production" ];  then
    export BUILD_MODE="release";
@@ -81,7 +81,7 @@ function copy_artifacts {
    cp target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js $DEST/$BUILD_NAME.js;
    cp target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.wasm $DEST/$BUILD_NAME.wasm;

-    sed -i "s/render_wasm.wasm/$BUILD_NAME.wasm?version=$CURRENT_VERSION/g" $DEST/$BUILD_NAME.js;
+    sed -i "s/render_wasm.wasm/$BUILD_NAME.wasm?version=$VERSION_TAG/g" $DEST/$BUILD_NAME.js;

    yarn esbuild target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js \
        --log-level=error \
Author	SHA1	Message	Date
Eva Marco	d3a1a9cd74	🐛 Fix unhandled exception tokens creation dialog	2026-01-20 16:16:08 +01:00
Alonso Torres	47775a9e2c	Merge pull request #8134 from penpot/alotor-fix-plugins-export 🐛 Fix problem with export in plugins	2026-01-20 15:03:04 +01:00
Andrey Antukh	8191d04114	✨ Use non-legacy config example on docker compose file	2026-01-20 13:25:55 +01:00
Andrey Antukh	88f0f75174	Merge pull request #8129 from penpot/niwinz-staging-bugfix-1 ✨ Several improvements for build process	2026-01-20 12:26:55 +01:00
Andrey Antukh	1ffa956251	✨ Include timestamp on version tag	2026-01-20 12:26:39 +01:00
Andrey Antukh	31054099ff	✨ Use pseudo-names on release builds of frontend (#8105 )	2026-01-20 12:26:39 +01:00
Eva Marco	983487d73c	🐛 Fix shadow token reference validation (#8128 )	2026-01-20 10:56:27 +01:00