:constructor: Migrate to pnpm

All they only needed for build process.

.github/workflows/tests.yml

@@ -159,7 +159,17 @@ jobs:
       - name: Build Bundle
         working-directory: ./frontend
         run: |
-          ./scripts/build 0.0.0
+          corepack enable;
+          corepack install;
+          yarn install
+          yarn run build:app:assets
+          yarn run build:app
+          yarn run build:app:libs
+
+      - name: Build WASM
+        working-directory: "./render-wasm"
+        run: |
+          ./build release
 
       - name: Store Bundle Cache
         uses: actions/cache@v4
@@ -167,7 +177,6 @@ jobs:
           key: "integration-bundle-${{ github.sha }}"
           path: frontend/resources/public
 
-
   test-integration-1:
     name: "Integration Tests 1/4"
     runs-on: ubuntu-24.04

.gitignore

@@ -80,4 +80,4 @@ node_modules
 /playwright/.cache/
 /render-wasm/target/
 /**/.yarn/*
-/.pnpm-store
+/.pnpm-store

CHANGES.md

@@ -103,7 +103,6 @@ example. It's still usable as before, we just removed the example.
 - Fix problem with plugins generating code for pages different than current one [Taiga #12312](https://tree.taiga.io/project/penpot/issue/12312)
 - Fix input confirmation behavior is not uniform [Taiga #12294](https://tree.taiga.io/project/penpot/issue/12294)
 - Fix copy/pasting application/transit+json [Taiga #12721](https://tree.taiga.io/project/penpot/issue/12721)
-- Fix problem with plugins content attribute [Plugins #209](https://github.com/penpot/penpot-plugins/issues/209)
 
 ## 2.11.1
 

common/deps.edn

@@ -29,7 +29,6 @@
   java-http-clj/java-http-clj {:mvn/version "0.4.3"}
   integrant/integrant {:mvn/version "1.0.0"}
 
-  funcool/tubax {:mvn/version "2021.05.20-0"}
   funcool/cuerdas {:mvn/version "2025.06.16-414"}
   funcool/promesa
   {:git/sha "46048fc0d4bf5466a2a4121f5d52aefa6337f2e8"

common/package.json

@@ -4,7 +4,7 @@
   "license": "MPL-2.0",
   "author": "Kaleidos INC",
   "private": true,
-  "packageManager": "yarn@4.9.2+sha512.1fc009bc09d13cfd0e19efa44cbfc2b9cf6ca61482725eb35bbc5e257e093ebf4130db6dfe15d604ff4b79efd8e1e8e99b25fa7d0a6197c9f9826358d4d65c3c",
+  "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a",
   "type": "module",
   "repository": {
     "type": "git",
@@ -14,18 +14,12 @@
     "concurrently": "^9.1.2",
     "nodemon": "^3.1.10",
     "source-map-support": "^0.5.21",
-    "ws": "^8.18.2"
-  },
-  "dependencies": {
+    "ws": "^8.18.2",
     "date-fns": "^4.1.0"
   },
   "scripts": {
-    "fmt:clj:check": "cljfmt check --parallel=false src/ test/",
-    "fmt:clj": "cljfmt fix --parallel=true src/ test/",
-    "lint:clj": "clj-kondo --parallel=true --lint src/",
-    "lint": "yarn run lint:clj",
     "watch:test": "concurrently \"clojure -M:dev:shadow-cljs watch test\" \"nodemon -C -d 2 -w target/tests/ --exec 'node target/tests/test.js'\"",
     "build:test": "clojure -M:dev:shadow-cljs compile test",
-    "test": "yarn run build:test && node target/tests/test.js"
+    "test": "pnpm run build:test && node target/tests/test.js"
   }
 }

common/pnpm-lock.yaml

@@ -0,0 +1,488 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      concurrently:
+        specifier: ^9.1.2
+        version: 9.2.1
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
+      nodemon:
+        specifier: ^3.1.10
+        version: 3.1.11
+      source-map-support:
+        specifier: ^0.5.21
+        version: 0.5.21
+      ws:
+        specifier: ^8.18.2
+        version: 8.18.3
+
+packages:
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  concurrently@9.2.1:
+    resolution: {integrity: sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  ignore-by-default@1.0.1:
+    resolution: {integrity: sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  nodemon@3.1.11:
+    resolution: {integrity: sha512-is96t8F/1//UHAjNPHpbsNY46ELPpftGUoSVNXwUfMk/qdjSylYrWSu1XavVTBOn526kFiOR733ATgNBCQyH0g==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  pstree.remy@1.1.8:
+    resolution: {integrity: sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  shell-quote@1.8.3:
+    resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
+    engines: {node: '>= 0.4'}
+
+  simple-update-notifier@2.0.0:
+    resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
+    engines: {node: '>=10'}
+
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  touch@3.1.1:
+    resolution: {integrity: sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==}
+    hasBin: true
+
+  tree-kill@1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  undefsafe@2.0.5:
+    resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  ws@8.18.3:
+    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+snapshots:
+
+  ansi-regex@5.0.1: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  balanced-match@1.0.2: {}
+
+  binary-extensions@2.3.0: {}
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  buffer-from@1.1.2: {}
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  concat-map@0.0.1: {}
+
+  concurrently@9.2.1:
+    dependencies:
+      chalk: 4.1.2
+      rxjs: 7.8.2
+      shell-quote: 1.8.3
+      supports-color: 8.1.1
+      tree-kill: 1.2.2
+      yargs: 17.7.2
+
+  date-fns@4.1.0: {}
+
+  debug@4.4.3(supports-color@5.5.0):
+    dependencies:
+      ms: 2.1.3
+    optionalDependencies:
+      supports-color: 5.5.0
+
+  emoji-regex@8.0.0: {}
+
+  escalade@3.2.0: {}
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  fsevents@2.3.3:
+    optional: true
+
+  get-caller-file@2.0.5: {}
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  has-flag@3.0.0: {}
+
+  has-flag@4.0.0: {}
+
+  ignore-by-default@1.0.1: {}
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-number@7.0.0: {}
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  ms@2.1.3: {}
+
+  nodemon@3.1.11:
+    dependencies:
+      chokidar: 3.6.0
+      debug: 4.4.3(supports-color@5.5.0)
+      ignore-by-default: 1.0.1
+      minimatch: 3.1.2
+      pstree.remy: 1.1.8
+      semver: 7.7.3
+      simple-update-notifier: 2.0.0
+      supports-color: 5.5.0
+      touch: 3.1.1
+      undefsafe: 2.0.5
+
+  normalize-path@3.0.0: {}
+
+  picomatch@2.3.1: {}
+
+  pstree.remy@1.1.8: {}
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
+  require-directory@2.1.1: {}
+
+  rxjs@7.8.2:
+    dependencies:
+      tslib: 2.8.1
+
+  semver@7.7.3: {}
+
+  shell-quote@1.8.3: {}
+
+  simple-update-notifier@2.0.0:
+    dependencies:
+      semver: 7.7.3
+
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map@0.6.1: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  supports-color@5.5.0:
+    dependencies:
+      has-flag: 3.0.0
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  touch@3.1.1: {}
+
+  tree-kill@1.2.2: {}
+
+  tslib@2.8.1: {}
+
+  undefsafe@2.0.5: {}
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  ws@8.18.3: {}
+
+  y18n@5.0.8: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1

common/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+recursiveInstall: true
+
+shamefullyHoist: true

common/scripts/test

@@ -3,5 +3,5 @@
 set -ex
 corepack enable;
 corepack install;
-yarn install;
-yarn run test;
+pnpm install;
+pnpm run test;

common/src/app/common/exceptions.cljc

@@ -14,7 +14,8 @@
    [app.common.schema :as sm]
    [clojure.core :as c]
    [clojure.spec.alpha :as s]
-   [cuerdas.core :as str])
+   [cuerdas.core :as str]
+   [expound.alpha :as expound])
   #?(:clj
      (:import
       clojure.lang.IPersistentMap)))
@@ -109,6 +110,13 @@
          (contains? data :explain))
     (explain (:explain data) opts)
 
+    (and (contains? data ::s/problems)
+         (contains? data ::s/value)
+         (contains? data ::s/spec))
+    (binding [s/*explain-out* expound/printer]
+      (with-out-str
+        (s/explain-out (update data ::s/problems #(take (:length opts 10) %)))))
+
     (contains? data ::sm/explain)
     (sm/humanize-explain (::sm/explain data) opts)))
 

common/src/app/common/logging.cljc

@@ -43,6 +43,8 @@
   "
   #?(:cljs (:require-macros [app.common.logging :as l]))
   (:require
+   #?(:clj  [clojure.edn :as edn]
+      :cljs [cljs.reader :as edn])
    [app.common.data :as d]
    [app.common.exceptions :as ex]
    [app.common.pprint :as pp]

common/src/app/common/logic/libraries.cljc

@@ -18,6 +18,7 @@
    [app.common.logic.shapes :as cls]
    [app.common.logic.variant-properties :as clvp]
    [app.common.path-names :as cpn]
+   [app.common.spec :as us]
    [app.common.types.component :as ctk]
    [app.common.types.components-list :as ctkl]
    [app.common.types.container :as ctn]
@@ -34,7 +35,8 @@
    [app.common.types.typography :as cty]
    [app.common.types.variant :as ctv]
    [app.common.uuid :as uuid]
-   [clojure.set :as set]))
+   [clojure.set :as set]
+   [clojure.spec.alpha :as s]))
 
 ;; Change this to :info :debug or :trace to debug this module, or :warn to reset to default
 (log/set-level! :warn)
@@ -471,10 +473,10 @@
   If an asset id is given, only shapes linked to this particular asset will
   be synchronized."
   [changes file-id asset-type asset-id library-id libraries current-file-id]
-  (assert (contains? #{:colors :components :typographies} asset-type))
-  (assert (or (nil? asset-id) (uuid? asset-id)))
-  (assert (uuid? file-id))
-  (assert (uuid? library-id))
+  (s/assert #{:colors :components :typographies} asset-type)
+  (s/assert (s/nilable ::us/uuid) asset-id)
+  (s/assert ::us/uuid file-id)
+  (s/assert ::us/uuid library-id)
 
   (container-log :info asset-id
                  :msg "Sync file with library"
@@ -508,10 +510,10 @@
   If an asset id is given, only shapes linked to this particular asset will
   be synchronized."
   [changes file-id asset-type asset-id library-id libraries current-file-id]
-  (assert (contains? #{:colors :components :typographies} asset-type))
-  (assert (or (nil? asset-id) (uuid? asset-id)))
-  (assert (uuid? file-id))
-  (assert (uuid? library-id))
+  (s/assert #{:colors :components :typographies} asset-type)
+  (s/assert (s/nilable ::us/uuid) asset-id)
+  (s/assert ::us/uuid file-id)
+  (s/assert ::us/uuid library-id)
 
   (container-log :info asset-id
                  :msg "Sync local components with library"

common/src/app/common/schema.cljc

@@ -8,8 +8,6 @@
   (:refer-clojure :exclude [deref merge parse-uuid parse-long parse-double parse-boolean type keys])
   #?(:cljs (:require-macros [app.common.schema :refer [ignoring]]))
   (:require
-   #?(:clj [malli.dev.pretty :as mdp])
-   #?(:clj [malli.dev.virhe :as v])
    [app.common.data :as d]
    [app.common.math :as mth]
    [app.common.pprint :as pp]
@@ -21,6 +19,8 @@
    [clojure.core :as c]
    [cuerdas.core :as str]
    [malli.core :as m]
+   [malli.dev.pretty :as mdp]
+   [malli.dev.virhe :as v]
    [malli.error :as me]
    [malli.generator :as mg]
    [malli.registry :as mr]
@@ -245,30 +245,27 @@
                                      :level (d/nilv level 8)
                                      :length (d/nilv length 12)})))))
 
-#?(:clj
-   (defmethod v/-format ::schemaless-explain
-     [_ explanation printer]
-     {:body [:group
-             (v/-block "Value" (v/-visit (me/error-value explanation printer) printer) printer) :break :break
-             (v/-block "Errors" (v/-visit (me/humanize (me/with-spell-checking explanation)) printer) printer)]}))
+(defmethod v/-format ::schemaless-explain
+  [_ explanation printer]
+  {:body [:group
+          (v/-block "Value" (v/-visit (me/error-value explanation printer) printer) printer) :break :break
+          (v/-block "Errors" (v/-visit (me/humanize (me/with-spell-checking explanation)) printer) printer)]})
 
-#?(:clj
-   (defmethod v/-format ::explain
-     [_ {:keys [schema] :as explanation} printer]
-     {:body [:group
-             (v/-block "Value" (v/-visit (me/error-value explanation printer) printer) printer) :break :break
-             (v/-block "Errors" (v/-visit (me/humanize (me/with-spell-checking explanation)) printer) printer) :break :break
-             (v/-block "Schema" (v/-visit schema printer) printer)]}))
+(defmethod v/-format ::explain
+  [_ {:keys [schema] :as explanation} printer]
+  {:body [:group
+          (v/-block "Value" (v/-visit (me/error-value explanation printer) printer) printer) :break :break
+          (v/-block "Errors" (v/-visit (me/humanize (me/with-spell-checking explanation)) printer) printer) :break :break
+          (v/-block "Schema" (v/-visit schema printer) printer)]})
 
-#?(:clj
-   (defn pretty-explain
-     "A helper that allows print a console-friendly output for the explain;
-  should not be used for other purposes"
-     [explain & {:keys [variant message]
-                 :or {variant ::explain
-                      message "Validation Error"}}]
-     (let [explain (fn [] (me/with-error-messages explain))]
-       ((mdp/prettifier variant message explain default-options)))))
+(defn pretty-explain
+  "A helper that allows print a console-friendly output for the
+  explain; should not be used for other purposes"
+  [explain & {:keys [variant message]
+              :or {variant ::explain
+                   message "Validation Error"}}]
+  (let [explain (fn [] (me/with-error-messages explain))]
+    ((mdp/prettifier variant message explain default-options))))
 
 (defmacro ignoring
   [expr]
@@ -302,13 +299,6 @@
                                   ::explain explain}))))
         value))))
 
-(defn coercer
-  [schema & {:as opts}]
-  (let [decode-fn (decoder schema json-transformer)
-        check-fn  (check-fn schema opts)]
-    (fn [data]
-      (-> data decode-fn check-fn))))
-
 (defn check
   "A helper intended to be used on assertions for validate/check the
   schema over provided data. Raises an assertion exception.
@@ -1003,9 +993,6 @@
 (def valid-safe-number?
   (lazy-validator ::safe-number))
 
-(def valid-safe-int?
-  (lazy-validator ::safe-int))
-
 (def valid-text?
   (validator ::text))
 

common/src/app/common/types/path.cljc

@@ -267,4 +267,3 @@
    (-> (stp/convert-to-path shape objects)
        (update :content impl/path-data))))
 
-(dm/export impl/decode-segments)

common/src/app/common/types/path/impl.cljc

@@ -565,9 +565,6 @@
 (def check-content
   (sm/check-fn schema:content))
 
-(def decode-segments
-  (sm/lazy-decoder schema:segments sm/json-transformer))
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; CONSTRUCTORS & PREDICATES
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

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

@@ -1575,10 +1575,10 @@ Will return a value that matches this schema:
                          (if (map? shadow)
                            (let [legacy-shadow-type (get "type" shadow)]
                              (-> shadow
-                                 (set/rename-keys {"x" :offset-x
-                                                   "offsetX" :offset-x
-                                                   "y" :offset-y
-                                                   "offsetY" :offset-y
+                                 (set/rename-keys {"x" :offsetX
+                                                   "offsetX" :offsetX
+                                                   "y" :offsetY
+                                                   "offsetY" :offsetY
                                                    "blur" :blur
                                                    "spread" :spread
                                                    "color" :color
@@ -1589,7 +1589,7 @@ Will return a value that matches this schema:
                                                    (= "false" %) false
                                                    (= legacy-shadow-type "innerShadow") true
                                                    :else false))
-                                 (select-keys [:offset-x :offset-y :blur :spread :color :inset])))
+                                 (select-keys [:offsetX :offsetY :blur :spread :color :inset])))
                            shadow))]
     (cond
       ;; Reference value - keep as string
@@ -1860,8 +1860,8 @@ Will return a value that matches this schema:
     (mapv (fn [shadow]
             (if (map? shadow)
               (-> shadow
-                  (set/rename-keys {:offset-x "offsetX"
-                                    :offset-y "offsetY"
+                  (set/rename-keys {:offsetX "offsetX"
+                                    :offsetY "offsetY"
                                     :blur "blur"
                                     :spread "spread"
                                     :color "color"

common/test/common_tests/types/tokens_lib_test.cljc

@@ -1897,15 +1897,15 @@
          (let [token (ctob/get-token-by-name lib "shadow-test" "test.shadow-single")]
            (t/is (some? token))
            (t/is (= :shadow (:type token)))
-           (t/is (= [{:offset-x "0", :offset-y "2px", :blur "4px", :spread "0", :color "#000", :inset false}]
+           (t/is (= [{:offsetX "0", :offsetY "2px", :blur "4px", :spread "0", :color "#000", :inset false}]
                     (:value token)))))
 
        (t/testing "multiple shadow token"
          (let [token (ctob/get-token-by-name lib "shadow-test" "test.shadow-multiple")]
            (t/is (some? token))
            (t/is (= :shadow (:type token)))
-           (t/is (= [{:offset-x "0", :offset-y "2px", :blur "4px", :spread "0", :color "#000", :inset true}
-                     {:offset-x "0", :offset-y "8px", :blur "16px", :spread "0", :color "#000", :inset true}]
+           (t/is (= [{:offsetX "0", :offsetY "2px", :blur "4px", :spread "0", :color "#000", :inset true}
+                     {:offsetX "0", :offsetY "8px", :blur "16px", :spread "0", :color "#000", :inset true}]
                     (:value token)))))
 
        (t/testing "shadow token with reference"
@@ -1918,7 +1918,7 @@
          (let [token (ctob/get-token-by-name lib "shadow-test" "test.shadow-with-type")]
            (t/is (some? token))
            (t/is (= :shadow (:type token)))
-           (t/is (= [{:offset-x "0", :offset-y "4px", :blur "8px", :spread "0", :color "rgba(0,0,0,0.2)", :inset false}]
+           (t/is (= [{:offsetX "0", :offsetY "4px", :blur "8px", :spread "0", :color "rgba(0,0,0,0.2)", :inset false}]
                     (:value token)))))
 
        (t/testing "shadow token with description"
@@ -1937,14 +1937,14 @@
                                      (ctob/make-token
                                       {:name "shadow.single"
                                        :type :shadow
-                                       :value [{:offset-x "0" :offset-y "2px" :blur "4px" :spread "0" :color "#0000001A"}]
+                                       :value [{:offsetX "0" :offsetY "2px" :blur "4px" :spread "0" :color "#0000001A"}]
                                        :description "A single shadow"})
                                      "shadow.multiple"
                                      (ctob/make-token
                                       {:name "shadow.multiple"
                                        :type :shadow
-                                       :value [{:offset-x "0" :offset-y "2px" :blur "4px" :spread "0" :color "#0000001A"}
-                                               {:offset-x "0" :offset-y "8px" :blur "16px" :spread "0" :color "#0000001A"}]})
+                                       :value [{:offsetX "0" :offsetY "2px" :blur "4px" :spread "0" :color "#0000001A"}
+                                               {:offsetX "0" :offsetY "8px" :blur "16px" :spread "0" :color "#0000001A"}]})
                                      "shadow.ref"
                                      (ctob/make-token
                                       {:name "shadow.ref"
@@ -1991,7 +1991,7 @@
                                        (ctob/make-token
                                         {:name "shadow.test"
                                          :type :shadow
-                                         :value [{:offset-x "1" :offset-y "1" :blur "1" :spread "1" :color "red" :inset true}]
+                                         :value [{:offsetX "1" :offsetY "1" :blur "1" :spread "1" :color "red" :inset true}]
                                          :description "Round trip test"})
                                        "shadow.ref"
                                        (ctob/make-token

docker/devenv/Dockerfile

@@ -59,38 +59,6 @@ RUN set -eux; \
     corepack enable; \
     rm -rf /tmp/nodejs.tar.gz;
 
-
-################################################################################
-## CADDYSERVER SETUP
-################################################################################
-
-FROM base AS setup-caddy
-
-ENV CADDY_VERSION=2.10.2
-
-RUN set -eux; \
-    ARCH="$(dpkg --print-architecture)"; \
-    case "${ARCH}" in \
-       aarch64|arm64) \
-         BINARY_URL="https://github.com/caddyserver/caddy/releases/download/v${CADDY_VERSION}/caddy_${CADDY_VERSION}_linux_arm64.tar.gz"; \
-         ;; \
-       amd64|x86_64) \
-         BINARY_URL="https://github.com/caddyserver/caddy/releases/download/v${CADDY_VERSION}/caddy_${CADDY_VERSION}_linux_amd64.tar.gz"; \
-         ;; \
-       *) \
-         echo "Unsupported arch: ${ARCH}"; \
-         exit 1; \
-         ;; \
-    esac; \
-    curl -LfsSo /tmp/caddy.tar.gz ${BINARY_URL}; \
-    mkdir -p /tmp/caddy; \
-    cd /tmp/caddy; \
-    tar -xf /tmp/caddy.tar.gz; \
-    chown -R root /tmp/caddy; \
-    mv /tmp/caddy/caddy /usr/bin/; \
-    rm -rf /tmp/caddy.tar.gz; \
-    rm -rf /tmp/caddy;
-
 ################################################################################
 ## JVM SETUP
 ################################################################################
@@ -383,7 +351,6 @@ COPY --from=setup-utils /opt/utils /opt/utils
 COPY --from=setup-rust /opt/cargo /opt/cargo
 COPY --from=setup-rust /opt/rustup /opt/rustup
 COPY --from=setup-rust /opt/emsdk /opt/emsdk
-COPY --from=setup-caddy /usr/bin/caddy /usr/bin/caddy
 
 COPY files/nginx.conf /etc/nginx/nginx.conf
 COPY files/nginx-mime.types /etc/nginx/mime.types
@@ -394,7 +361,6 @@ COPY files/vimrc          /root/.vimrc
 COPY files/tmux.conf      /root/.tmux.conf
 COPY files/sudoers        /etc/sudoers
 
-COPY files/Caddyfile           /home/
 COPY files/start-tmux.sh       /home/start-tmux.sh
 COPY files/start-tmux-back.sh  /home/start-tmux-back.sh
 COPY files/entrypoint.sh       /home/entrypoint.sh

docker/devenv/files/Caddyfile

@@ -1,4 +0,0 @@
-localhost:3449 {
-    tls internal
-    reverse_proxy localhost:4449
-}

docker/devenv/files/init.sh

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
 
 set -e
-nginx;
-caddy run -c /home/Caddyfile;
+nginx
+tail -f /dev/null

docker/devenv/files/nginx.conf

@@ -12,7 +12,7 @@ http {
     sendfile on;
     tcp_nopush on;
     tcp_nodelay on;
-    keepalive_timeout 100;
+    keepalive_timeout 0;
     types_hash_max_size 2048;
     server_tokens off;
 
@@ -55,7 +55,7 @@ http {
     proxy_cache_key "$host$request_uri";
 
     server {
-        listen 4449 default_server;
+        listen 3449 default_server;
         server_name _;
 
         client_max_body_size 300M;
@@ -231,6 +231,7 @@ http {
             }
 
             add_header Cache-Control "no-store";
+            add_header Connection close always;
             # This header is what we need to use on prod
             # add_header Cache-Control "public, must-revalidate, max-age=0";
             try_files $uri /index.html$is_args$args /index.html =404;

exporter/package.json

@@ -4,7 +4,7 @@
   "license": "MPL-2.0",
   "author": "Kaleidos INC",
   "private": true,
-  "packageManager": "yarn@4.10.3+sha512.c38cafb5c7bb273f3926d04e55e1d8c9dfa7d9c3ea1f36a4868fa028b9e5f72298f0b7f401ad5eb921749eb012eb1c3bb74bf7503df3ee43fd600d14a018266f",
+  "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a",
   "repository": {
     "type": "git",
     "url": "https://github.com/penpot/penpot"
@@ -16,9 +16,9 @@
     "date-fns": "^4.1.0",
     "generic-pool": "^3.9.0",
     "inflation": "^2.1.0",
-    "ioredis": "^5.8.1",
-    "playwright": "^1.55.1",
-    "raw-body": "^3.0.1",
+    "ioredis": "^5.8.2",
+    "playwright": "^1.57.0",
+    "raw-body": "^3.0.2",
     "source-map-support": "^0.5.21",
     "svgo": "penpot/svgo#v3.1",
     "xml-js": "^1.6.11",
@@ -30,9 +30,9 @@
   "scripts": {
     "clear:shadow-cache": "rm -rf .shadow-cljs && rm -rf target",
     "watch:app": "clojure -M:dev:shadow-cljs watch main",
-    "watch": "yarn run clear:shadow-cache && yarn run watch:app",
+    "watch": "pnpm run clear:shadow-cache && pnpm run watch:app",
     "build:app": "clojure -M:dev:shadow-cljs release main",
-    "build": "yarn run clear:shadow-cache && yarn run build:app",
+    "build": "pnpm run clear:shadow-cache && pnpm run build:app",
     "fmt:clj:check": "cljfmt check --parallel=false src/",
     "fmt:clj": "cljfmt fix --parallel=true src/",
     "lint:clj": "clj-kondo --parallel --lint src/"

exporter/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+recursiveInstall: true
+
+shamefullyHoist: true

exporter/scripts/build

@@ -5,28 +5,16 @@ set -ex
 export CURRENT_VERSION=$1;
 export NODE_ENV=production;
 
-corepack enable;
-corepack install || exit 1;
-yarn install || exit 1;
-rm -rf target
+rm -rf target;
 
-# Build the application
-yarn run build;
-
-# Copy package*.json files
-cp ../.yarnrc.yml target/;
-cp yarn.lock target/;
-cp package.json target/;
-
-cat <<EOF | tee target/setup
-#/usr/bin/env bash
-set -e;
 corepack enable;
 corepack install;
-yarn install
-yarn run playwright install chromium;
-EOF
 
-chmod +x target/setup;
+pnpm install;
+pnpm run build;
+
+cp pnpm-lock.yaml target/;
+cp pnpm-workspace.yaml target/;
+cp package.json target/;
 
 sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/app.js;

exporter/yarn.lock

@@ -243,7 +243,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bytes@npm:3.1.2":
+"bytes@npm:~3.1.2":
   version: 3.1.2
   resolution: "bytes@npm:3.1.2"
   checksum: 10c0/76d1c43cbd602794ad8ad2ae94095cddeb1de78c5dddaa7005c51af10b0176c69971a6d88e805a90c2b6550d76636e43c40d8427a808b8645ede885de4a0358e
@@ -442,7 +442,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"depd@npm:2.0.0, depd@npm:~2.0.0":
+"depd@npm:~2.0.0":
   version: 2.0.0
   resolution: "depd@npm:2.0.0"
   checksum: 10c0/58bd06ec20e19529b06f7ad07ddab60e504d9e0faca4bd23079fac2d279c3594334d736508dc350e06e510aba5e22e4594483b3a6562ce7c17dd797f4cc4ad2c
@@ -577,9 +577,9 @@ __metadata:
     date-fns: "npm:^4.1.0"
     generic-pool: "npm:^3.9.0"
     inflation: "npm:^2.1.0"
-    ioredis: "npm:^5.8.1"
-    playwright: "npm:^1.55.1"
-    raw-body: "npm:^3.0.1"
+    ioredis: "npm:^5.8.2"
+    playwright: "npm:^1.57.0"
+    raw-body: "npm:^3.0.2"
     source-map-support: "npm:^0.5.21"
     svgo: "penpot/svgo#v3.1"
     ws: "npm:^8.18.3"
@@ -682,16 +682,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-errors@npm:2.0.0":
-  version: 2.0.0
-  resolution: "http-errors@npm:2.0.0"
+"http-errors@npm:~2.0.1":
+  version: 2.0.1
+  resolution: "http-errors@npm:2.0.1"
   dependencies:
-    depd: "npm:2.0.0"
-    inherits: "npm:2.0.4"
-    setprototypeof: "npm:1.2.0"
-    statuses: "npm:2.0.1"
-    toidentifier: "npm:1.0.1"
-  checksum: 10c0/fc6f2715fe188d091274b5ffc8b3657bd85c63e969daa68ccb77afb05b071a4b62841acb7a21e417b5539014dff2ebf9550f0b14a9ff126f2734a7c1387f8e19
+    depd: "npm:~2.0.0"
+    inherits: "npm:~2.0.4"
+    setprototypeof: "npm:~1.2.0"
+    statuses: "npm:~2.0.2"
+    toidentifier: "npm:~1.0.1"
+  checksum: 10c0/fb38906cef4f5c83952d97661fe14dc156cb59fe54812a42cd448fa57b5c5dfcb38a40a916957737bd6b87aab257c0648d63eb5b6a9ca9f548e105b6072712d4
   languageName: node
   linkType: hard
 
@@ -715,15 +715,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:0.7.0":
-  version: 0.7.0
-  resolution: "iconv-lite@npm:0.7.0"
-  dependencies:
-    safer-buffer: "npm:>= 2.1.2 < 3.0.0"
-  checksum: 10c0/2382400469071c55b6746c531eed5fa4d033e5db6690b7331fb2a5f59a30d7a9782932e92253db26df33c1cf46fa200a3fbe524a2a7c62037c762283f188ec2f
-  languageName: node
-  linkType: hard
-
 "iconv-lite@npm:^0.6.2":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"
@@ -733,6 +724,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"iconv-lite@npm:~0.7.0":
+  version: 0.7.0
+  resolution: "iconv-lite@npm:0.7.0"
+  dependencies:
+    safer-buffer: "npm:>= 2.1.2 < 3.0.0"
+  checksum: 10c0/2382400469071c55b6746c531eed5fa4d033e5db6690b7331fb2a5f59a30d7a9782932e92253db26df33c1cf46fa200a3fbe524a2a7c62037c762283f188ec2f
+  languageName: node
+  linkType: hard
+
 "ieee754@npm:^1.2.1":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"
@@ -754,16 +754,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2.0.4, inherits@npm:~2.0.3":
+"inherits@npm:~2.0.3, inherits@npm:~2.0.4":
   version: 2.0.4
   resolution: "inherits@npm:2.0.4"
   checksum: 10c0/4e531f648b29039fb7426fb94075e6545faa1eb9fe83c29f0b6d9e7263aceb4289d2d4557db0d428188eeb449cc7c5e77b0a0b2c4e248ff2a65933a0dee49ef2
   languageName: node
   linkType: hard
 
-"ioredis@npm:^5.8.1":
-  version: 5.8.1
-  resolution: "ioredis@npm:5.8.1"
+"ioredis@npm:^5.8.2":
+  version: 5.8.2
+  resolution: "ioredis@npm:5.8.2"
   dependencies:
     "@ioredis/commands": "npm:1.4.0"
     cluster-key-slot: "npm:^1.1.0"
@@ -774,7 +774,7 @@ __metadata:
     redis-errors: "npm:^1.2.0"
     redis-parser: "npm:^3.0.0"
     standard-as-callback: "npm:^2.1.0"
-  checksum: 10c0/4ed66444017150da027bce940a24bf726994691e2a7b3aa11d52f8aeb37f258068cc171af4d9c61247acafc28eb086fa8a7c79420b8e8d2907d2f74f39584465
+  checksum: 10c0/305e385f811d49908899e32c2de69616cd059f909afd9e0a53e54f596b1a5835ee3449bfc6a3c49afbc5a2fd27990059e316cc78f449c94024957bd34c826d88
   languageName: node
   linkType: hard
 
@@ -1105,27 +1105,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.55.1":
-  version: 1.55.1
-  resolution: "playwright-core@npm:1.55.1"
+"playwright-core@npm:1.57.0":
+  version: 1.57.0
+  resolution: "playwright-core@npm:1.57.0"
   bin:
     playwright-core: cli.js
-  checksum: 10c0/39837a8c1232ec27486eac8c3fcacc0b090acc64310f7f9004b06715370fc426f944e3610fe8c29f17cd3d68280ed72c75f660c02aa5b5cf0eb34bab0031308f
+  checksum: 10c0/798e35d83bf48419a8c73de20bb94d68be5dde68de23f95d80a0ebe401e3b83e29e3e84aea7894d67fa6c79d2d3d40cc5bcde3e166f657ce50987aaa2421b6a9
   languageName: node
   linkType: hard
 
-"playwright@npm:^1.55.1":
-  version: 1.55.1
-  resolution: "playwright@npm:1.55.1"
+"playwright@npm:^1.57.0":
+  version: 1.57.0
+  resolution: "playwright@npm:1.57.0"
   dependencies:
     fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.55.1"
+    playwright-core: "npm:1.57.0"
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: 10c0/b84a97b0d764403df512f5bbb10c7343974e151a28202cc06f90883a13e8a45f4491a0597f0ae5fb03a026746cbc0d200f0f32195bfaa381aee5ca5770626771
+  checksum: 10c0/ab03c99a67b835bdea9059f516ad3b6e42c21025f9adaa161a4ef6bc7ca716dcba476d287140bb240d06126eb23f889a8933b8f5f1f1a56b80659d92d1358899
   languageName: node
   linkType: hard
 
@@ -1160,15 +1160,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"raw-body@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "raw-body@npm:3.0.1"
+"raw-body@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "raw-body@npm:3.0.2"
   dependencies:
-    bytes: "npm:3.1.2"
-    http-errors: "npm:2.0.0"
-    iconv-lite: "npm:0.7.0"
-    unpipe: "npm:1.0.0"
-  checksum: 10c0/892f4fbd21ecab7e2fed0f045f7af9e16df7e8050879639d4e482784a2f4640aaaa33d916a0e98013f23acb82e09c2e3c57f84ab97104449f728d22f65a7d79a
+    bytes: "npm:~3.1.2"
+    http-errors: "npm:~2.0.1"
+    iconv-lite: "npm:~0.7.0"
+    unpipe: "npm:~1.0.0"
+  checksum: 10c0/d266678d08e1e7abea62c0ce5864344e980fa81c64f6b481e9842c5beaed2cdcf975f658a3ccd67ad35fc919c1f6664ccc106067801850286a6cbe101de89f29
   languageName: node
   linkType: hard
 
@@ -1269,7 +1269,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"setprototypeof@npm:1.2.0":
+"setprototypeof@npm:~1.2.0":
   version: 1.2.0
   resolution: "setprototypeof@npm:1.2.0"
   checksum: 10c0/68733173026766fa0d9ecaeb07f0483f4c2dc70ca376b3b7c40b7cda909f94b0918f6c5ad5ce27a9160bdfb475efaa9d5e705a11d8eaae18f9835d20976028bc
@@ -1367,10 +1367,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"statuses@npm:2.0.1":
-  version: 2.0.1
-  resolution: "statuses@npm:2.0.1"
-  checksum: 10c0/34378b207a1620a24804ce8b5d230fea0c279f00b18a7209646d5d47e419d1cc23e7cbf33a25a1e51ac38973dc2ac2e1e9c647a8e481ef365f77668d72becfd0
+"statuses@npm:~2.0.2":
+  version: 2.0.2
+  resolution: "statuses@npm:2.0.2"
+  checksum: 10c0/a9947d98ad60d01f6b26727570f3bcceb6c8fa789da64fe6889908fe2e294d57503b14bf2b5af7605c2d36647259e856635cd4c49eab41667658ec9d0080ec3f
   languageName: node
   linkType: hard
 
@@ -1499,7 +1499,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"toidentifier@npm:1.0.1":
+"toidentifier@npm:~1.0.1":
   version: 1.0.1
   resolution: "toidentifier@npm:1.0.1"
   checksum: 10c0/93937279934bd66cc3270016dd8d0afec14fb7c94a05c72dc57321f8bd1fa97e5bea6d1f7c89e728d077ca31ea125b78320a616a6c6cd0e6b9cb94cb864381c1
@@ -1531,7 +1531,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unpipe@npm:1.0.0":
+"unpipe@npm:~1.0.0":
   version: 1.0.0
   resolution: "unpipe@npm:1.0.0"
   checksum: 10c0/193400255bd48968e5c5383730344fbb4fa114cdedfab26e329e50dd2d81b134244bb8a72c6ac1b10ab0281a58b363d06405632c9d49ca9dfd5e90cbd7d0f32c

frontend/deps.edn

@@ -8,6 +8,11 @@
   metosin/reitit-core {:mvn/version "0.9.1"}
   funcool/okulary {:mvn/version "2022.04.11-16"}
 
+  funcool/tubax
+  {:git/tag "v2025.11.28"
+   :git/sha "2d9a986"
+   :git/url "https://github.com/funcool/tubax.git"}
+
   funcool/potok2
   {:git/tag "v2.2"
    :git/sha "0f7e15a"
@@ -20,8 +25,8 @@
    :git/url "https://github.com/funcool/beicon.git"}
 
   funcool/rumext
-  {:git/tag "v2.25"
-   :git/sha "27e5a1a"
+  {:git/tag "v2.24"
+   :git/sha "17a0c94"
    :git/url "https://github.com/funcool/rumext.git"}
 
   instaparse/instaparse {:mvn/version "1.5.0"}
@@ -42,7 +47,7 @@
   :dev
   {:extra-paths ["dev"]
    :extra-deps
-   {thheller/shadow-cljs {:mvn/version "3.2.2"}
+   {thheller/shadow-cljs {:mvn/version "3.2.0"}
     com.bhauman/rebel-readline {:mvn/version "RELEASE"}
     org.clojure/tools.namespace {:mvn/version "RELEASE"}
     criterium/criterium {:mvn/version "RELEASE"}

frontend/package.json

@@ -4,7 +4,7 @@
   "license": "MPL-2.0",
   "author": "Kaleidos INC",
   "private": true,
-  "packageManager": "yarn@4.10.3+sha512.c38cafb5c7bb273f3926d04e55e1d8c9dfa7d9c3ea1f36a4868fa028b9e5f72298f0b7f401ad5eb921749eb012eb1c3bb74bf7503df3ee43fd600d14a018266f",
+  "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a",
   "browserslist": [
     "defaults"
   ],
@@ -14,122 +14,112 @@
     "url": "https://github.com/penpot/penpot"
   },
   "resolutions": {
-    "@zip.js/zip.js@npm:^2.7.44": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",
     "@vitejs/plugin-react": "^4.2.0",
     "playwright": "1.52.0",
     "playwright-core": "1.52.0"
   },
   "scripts": {
     "build:app:assets": "node ./scripts/build-app-assets.js",
-    "build:storybook": "yarn run build:storybook:assets && yarn run build:storybook:cljs && storybook build",
+    "build:storybook": "pnpm run build:storybook:assets && pnpm run build:storybook:cljs && storybook build",
     "build:storybook:assets": "node ./scripts/build-storybook-assets.js",
     "build:wasm": "../render-wasm/build",
     "build:storybook:cljs": "clojure -M:dev:shadow-cljs compile storybook",
     "build:app:libs": "node ./scripts/build-libs.js",
     "build:app:main": "clojure -M:dev:shadow-cljs release main worker",
     "build:app:worker": "clojure -M:dev:shadow-cljs release worker",
-    "build:app": "yarn run clear:shadow-cache && yarn run build:app:main && yarn run build:app:libs",
+    "build:app": "pnpm run clear:shadow-cache && pnpm run build:app:main && pnpm run build:app:libs",
     "e2e:server": "node ./scripts/e2e-server.js",
     "fmt:clj": "cljfmt fix --parallel=true src/ test/",
     "fmt:clj:check": "cljfmt check --parallel=false src/ test/",
-    "fmt:js": "yarn run prettier -c src/**/*.stories.jsx -c playwright/**/*.js -c scripts/**/*.js -w",
-    "fmt:js:check": "yarn run prettier -c src/**/*.stories.jsx -c playwright/**/*.js -c scripts/**/*.js",
+    "fmt:js": "pnpm run prettier -c src/**/*.stories.jsx -c playwright/**/*.js -c scripts/**/*.js -w",
+    "fmt:js:check": "pnpm run prettier -c src/**/*.stories.jsx -c playwright/**/*.js -c scripts/**/*.js",
     "lint:clj": "clj-kondo --parallel --lint src/",
-    "lint:scss": "yarn run prettier -c resources/styles -c src/**/*.scss",
-    "lint:scss:fix": "yarn run prettier -c resources/styles -c src/**/*.scss -w",
+    "lint:scss": "pnpm run prettier -c resources/styles -c src/**/*.scss",
+    "lint:scss:fix": "pnpm run prettier -c resources/styles -c src/**/*.scss -w",
     "build:test": "clojure -M:dev:shadow-cljs compile test",
-    "test": "yarn run build:test && node target/tests/test.js",
+    "test": "pnpm run build:test && node target/tests/test.js",
     "test:storybook": "vitest run --project=storybook",
     "watch:test": "mkdir -p target/tests && concurrently \"clojure -M:dev:shadow-cljs watch test\" \"nodemon -C -d 2 -w target/tests --exec 'node target/tests/test.js'\"",
     "test:e2e": "playwright test --project default",
     "translations": "node ./scripts/translations.js",
     "watch:app:assets": "node ./scripts/watch.js",
     "watch:app:libs": "node ./scripts/build-libs.js --watch",
-    "watch:app:main": "clojure -M:dev:shadow-cljs watch main worker storybook",
+    "watch:app:main": "clojure -M:dev:shadow-cljs watch main storybook",
     "clear:shadow-cache": "rm -rf .shadow-cljs",
-    "watch:app": "yarn run clear:shadow-cache && concurrently \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
-    "watch": "yarn run watch:app:assets",
-    "watch:storybook": "yarn run build:storybook:assets && concurrently \"storybook dev -p 6006 --no-open\" \"yarn run watch:storybook:assets\"",
+    "watch:app": "pnpm run clear:shadow-cache && pnpm run build:app:worker && concurrently \"pnpm run watch:app:main\" \"pnpm run watch:app:libs\"",
+    "watch": "pnpm run watch:app:assets",
+    "watch:storybook": "pnpm run build:storybook:assets && concurrently \"storybook dev -p 6006 --no-open\" \"pnpm run watch:storybook:assets\"",
     "watch:storybook:assets": "node ./scripts/watch-storybook.js"
   },
   "devDependencies": {
+    "@penpot/draft-js": "workspace:./packages/draft-js",
+    "@penpot/mousetrap": "workspace:./packages/mousetrap",
+    "@penpot/plugins-runtime": "1.3.2",
+    "@penpot/svgo": "penpot/svgo#v3.1",
+    "@penpot/text-editor": "workspace:./text-editor",
     "@playwright/test": "1.52.0",
     "@storybook/addon-docs": "10.0.4",
     "@storybook/addon-themes": "10.0.4",
     "@storybook/addon-vitest": "10.0.4",
     "@storybook/react-vite": "10.0.4",
+    "@tokens-studio/sd-transforms": "1.2.11",
     "@types/node": "^22.15.21",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
+    "@zip.js/zip.js": "^2.8.11",
     "autoprefixer": "^10.4.21",
+    "compression": "^1.8.1",
     "concurrently": "^9.2.1",
+    "date-fns": "^4.1.0",
     "esbuild": "^0.25.9",
+    "eventsource-parser": "^3.0.6",
     "express": "^5.1.0",
     "fancy-log": "^2.0.0",
     "getopts": "^2.3.0",
     "gettext-parser": "^8.0.0",
-    "gulp-concat": "^2.6.1",
-    "gulp-gzip": "^1.4.2",
-    "gulp-mustache": "^5.0.0",
-    "gulp-postcss": "^10.0.0",
-    "gulp-rename": "^2.0.0",
-    "gulp-sourcemaps": "^3.0.0",
-    "gulp-svg-sprite": "^2.0.3",
+    "highlight.js": "^11.10.0",
+    "js-beautify": "^1.15.4",
     "jsdom": "^27.0.0",
+    "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
     "map-stream": "0.0.7",
     "marked": "^15.0.12",
     "mkdirp": "^3.0.1",
     "mustache": "^4.2.0",
     "nodemon": "^3.1.10",
     "npm-run-all": "^4.1.5",
+    "opentype.js": "^1.3.4",
     "p-limit": "^6.2.0",
     "playwright": "1.56.1",
     "postcss": "^8.5.4",
     "postcss-clean": "^1.2.2",
+    "postcss-modules": "^6.0.1",
     "prettier": "3.5.3",
     "pretty-time": "^1.1.0",
     "prop-types": "^15.8.1",
-    "rimraf": "^6.0.1",
-    "sass": "^1.89.0",
-    "sass-embedded": "^1.89.0",
-    "storybook": "10.0.4",
-    "svg-sprite": "^2.0.4",
-    "typescript": "^5.9.2",
-    "vite": "^6.3.5",
-    "vitest": "^3.2.0",
-    "wasm-pack": "^0.13.1",
-    "watcher": "^2.3.1",
-    "workerpool": "^9.3.2"
-  },
-  "dependencies": {
-    "@penpot/draft-js": "portal:./vendor/draft-js",
-    "@penpot/hljs": "portal:./vendor/hljs",
-    "@penpot/mousetrap": "portal:./vendor/mousetrap",
-    "@penpot/plugins-runtime": "1.3.2",
-    "@penpot/svgo": "penpot/svgo#v3.1",
-    "@penpot/text-editor": "portal:./text-editor",
-    "@tokens-studio/sd-transforms": "1.2.11",
-    "@zip.js/zip.js": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",
-    "compression": "^1.8.1",
-    "date-fns": "^4.1.0",
-    "eventsource-parser": "^3.0.6",
-    "js-beautify": "^1.15.4",
-    "lodash": "^4.17.21",
-    "lodash.debounce": "^4.0.8",
-    "opentype.js": "^1.3.4",
-    "postcss-modules": "^6.0.1",
     "randomcolor": "^0.6.2",
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "react-error-boundary": "^6.0.0",
     "react-virtualized": "^9.22.6",
+    "rimraf": "^6.0.1",
     "rxjs": "8.0.0-alpha.14",
+    "sass": "^1.89.0",
+    "sass-embedded": "^1.89.0",
     "sax": "^1.4.1",
     "source-map-support": "^0.5.21",
+    "storybook": "10.0.4",
     "style-dictionary": "5.0.0-rc.1",
+    "svg-sprite": "^2.0.4",
     "tdigest": "^0.1.2",
     "tinycolor2": "^1.6.0",
+    "typescript": "^5.9.2",
     "ua-parser-js": "2.0.5",
+    "vite": "^6.3.5",
+    "vitest": "^3.2.0",
+    "wasm-pack": "^0.13.1",
+    "watcher": "^2.3.1",
+    "workerpool": "^9.3.2",
     "xregexp": "^5.1.2"
   }
 }

frontend/packages/draft-js/index.js

@@ -16,7 +16,9 @@ export const {
   RichTextEditorUtil,
   SelectionState,
   convertFromRaw,
-  convertToRaw
+  convertToRaw,
+  EditorBlock,
+  Editor
 } = pkg;
 
 import DraftPasteProcessor from 'draft-js/lib/DraftPasteProcessor.js';

frontend/packages/draft-js/package.json

@@ -4,11 +4,12 @@
   "description": "Penpot Draft-JS Wrapper",
   "main": "index.js",
   "type": "module",
-  "packageManager": "yarn@4.3.1",
+  "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a",
   "author": "Andrey Antukh",
   "license": "MPL-2.0",
   "dependencies": {
-    "draft-js": "penpot/draft-js.git#4a99b2a6020b2af97f6dc5fa1b4275ec16b559a0"
+    "draft-js": "penpot/draft-js.git#4a99b2a6020b2af97f6dc5fa1b4275ec16b559a0",
+    "immutable": "^5.1.4"
   },
   "peerDependencies": {
     "react": ">=0.17.0",

frontend/packages/draft-js/yarn.lock

@@ -173,12 +173,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@penpot/draft-js-wrapper@workspace:.":
+"@penpot/draft-js@workspace:.":
   version: 0.0.0-use.local
-  resolution: "@penpot/draft-js-wrapper@workspace:."
+  resolution: "@penpot/draft-js@workspace:."
   dependencies:
     draft-js: "penpot/draft-js.git#4a99b2a6020b2af97f6dc5fa1b4275ec16b559a0"
     esbuild: "npm:^0.24.0"
+    immutable: "npm:^5.1.4"
   peerDependencies:
     react: ">=0.17.0"
     react-dom: ">=0.17.0"
@@ -320,6 +321,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^5.1.4":
+  version: 5.1.4
+  resolution: "immutable@npm:5.1.4"
+  checksum: 10c0/f1c98382e4cde14a0b218be3b9b2f8441888da8df3b8c064aa756071da55fbed6ad696e5959982508456332419be9fdeaf29b2e58d0eadc45483cc16963c0446
+  languageName: node
+  linkType: hard
+
 "immutable@npm:~3.7.4":
   version: 3.7.6
   resolution: "immutable@npm:3.7.6"

frontend/patches/@zip.js__zip.js.patch

@@ -0,0 +1,17 @@
+diff --git a/lib/zip-core-base.js b/lib/zip-core-base.js
+index 142155c8c3ab1a6caa7c370e8a2931a954556ca9..61b0fe6efb91312f437750e0002218f218afad8b 100644
+--- a/lib/zip-core-base.js
++++ b/lib/zip-core-base.js
+@@ -28,12 +28,6 @@
+ 
+ import { configure } from "./core/configuration.js";
+ 
+-try {
+-	configure({ baseURI: import.meta.url });
+-} catch {
+-	// ignored
+-}
+-
+ export * from "./zip-core-reader.js";
+ export * from "./zip-core-writer.js";
+ export {

frontend/playwright/data/workspace/get-file-inspect-tab.json

@@ -5947,8 +5947,8 @@
                                 "~:spread": "10",
                                 "~:color": "rgb(160, 73, 73)",
                                 "~:inset": true,
-                                "~:offset-x": "10",
-                                "~:offset-y": "10"
+                                "~:offsetX": "10",
+                                "~:offsetY": "10"
                               }
                             ],
                             "~:description": "",

frontend/playwright/ui/pages/BasePage.js

@@ -73,7 +73,7 @@ export class BasePage {
   }
 
   static async mockConfigFlags(page, flags) {
-    const url = "**/js/config.js";
+    const url = "**/js/config.js?ts=*";
     return await page.route(url, (route) =>
       route.fulfill({
         status: 200,

frontend/playwright/ui/specs/tokens.spec.js

@@ -303,7 +303,7 @@ test.describe("Tokens: Tokens Tab", () => {
     const nameField = tokensUpdateCreateModal.getByLabel("Name");
     await nameField.pressSequentially(".changed");
 
-    await tokensUpdateCreateModal.getByRole("button", { name: "Save" }).click();
+    await tokensUpdateCreateModal.getByRole("button", {name: "Save"}).click();
 
     await expect(tokensUpdateCreateModal).not.toBeVisible();
 
@@ -1070,7 +1070,6 @@ test.describe("Tokens: Apply token", () => {
 
     // Fill in values for all fields and verify they persist when switching tabs
     await fontSizeField.fill("16");
-    await expect(saveButton).toBeEnabled();
 
     const fontWeightField = tokensUpdateCreateModal.getByLabel(/Font Weight/i);
     const letterSpacingField =
@@ -1239,12 +1238,8 @@ test.describe("Tokens: Apply token", () => {
       // Fill in the shadow values
       const offsetXInput = firstShadowFields.getByLabel("X");
       const offsetYInput = firstShadowFields.getByLabel("Y");
-      const blurInput = firstShadowFields.getByRole("textbox", {
-        name: "Blur",
-      });
-      const spreadInput = firstShadowFields.getByRole("textbox", {
-        name: "Spread",
-      });
+      const blurInput = firstShadowFields.getByLabel("Blur");
+      const spreadInput = firstShadowFields.getByLabel("Spread");
 
       await offsetXInput.fill("2");
       await offsetYInput.fill("2");
@@ -1265,10 +1260,9 @@ test.describe("Tokens: Apply token", () => {
       await valueSaturationSelector.click({ position: { x: 50, y: 50 } });
 
       // Verify that a color value was set
-      const colorInput = firstShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
-      await expect(colorInput).toHaveValue(/^rgb(.*)$/);
+      const colorInput = firstShadowFields.getByLabel("Color");
+      const firstColorValue = await colorInput.inputValue();
+      await expect(firstColorValue).toMatch(/^rgb(.*)$/);
 
       // Wait for validation to complete
       await expect(
@@ -1286,15 +1280,11 @@ test.describe("Tokens: Apply token", () => {
       const firstShadowFields = tokensUpdateCreateModal.getByTestId(
         "shadow-input-fields-0",
       );
-      const colorInput = firstShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
+      const colorInput = firstShadowFields.getByLabel("Color");
       const firstColorValue = await colorInput.inputValue();
 
       // User adds a second shadow
-      const addButton = tokensUpdateCreateModal.getByRole("button", {
-        name: "Add Shadow",
-      });
+      const addButton = firstShadowFields.getByTestId("shadow-add-button-0");
       await addButton.click();
 
       const secondShadowFields = tokensUpdateCreateModal.getByTestId(
@@ -1303,7 +1293,8 @@ test.describe("Tokens: Apply token", () => {
       await expect(secondShadowFields).toBeVisible();
 
       // User adds a third shadow
-      await addButton.click();
+      const addButton2 = secondShadowFields.getByTestId("shadow-add-button-1");
+      await addButton2.click();
 
       const thirdShadowFields = tokensUpdateCreateModal.getByTestId(
         "shadow-input-fields-2",
@@ -1313,15 +1304,9 @@ test.describe("Tokens: Apply token", () => {
       // User adds values for the third shadow
       const thirdOffsetXInput = thirdShadowFields.getByLabel("X");
       const thirdOffsetYInput = thirdShadowFields.getByLabel("Y");
-      const thirdBlurInput = thirdShadowFields.getByRole("textbox", {
-        name: "Blur",
-      });
-      const thirdSpreadInput = thirdShadowFields.getByRole("textbox", {
-        name: "Spread",
-      });
-      const thirdColorInput = thirdShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
+      const thirdBlurInput = thirdShadowFields.getByLabel("Blur");
+      const thirdSpreadInput = thirdShadowFields.getByLabel("Spread");
+      const thirdColorInput = thirdShadowFields.getByLabel("Color");
 
       await thirdOffsetXInput.fill("10");
       await thirdOffsetYInput.fill("10");
@@ -1330,13 +1315,15 @@ test.describe("Tokens: Apply token", () => {
       await thirdColorInput.fill("#FF0000");
 
       // User removes the 2nd shadow
-      const removeButton2 = secondShadowFields.getByRole("button", {
-        name: "Remove Shadow",
-      });
+      const removeButton2 = secondShadowFields.getByTestId(
+        "shadow-remove-button-1",
+      );
       await removeButton2.click();
 
-      // Verify that we have only two shadow fields
-      await expect(thirdShadowFields).not.toBeVisible();
+      // Verify second shadow is removed
+      await expect(
+        secondShadowFields.getByTestId("shadow-add-button-3"),
+      ).not.toBeVisible();
 
       // Verify that the first shadow kept its values
       const firstOffsetXValue = await firstShadowFields
@@ -1346,13 +1333,13 @@ test.describe("Tokens: Apply token", () => {
         .getByLabel("Y")
         .inputValue();
       const firstBlurValue = await firstShadowFields
-        .getByRole("textbox", { name: "Blur" })
+        .getByLabel("Blur")
         .inputValue();
       const firstSpreadValue = await firstShadowFields
-        .getByRole("textbox", { name: "Spread" })
+        .getByLabel("Spread")
         .inputValue();
       const firstColorValueAfter = await firstShadowFields
-        .getByRole("textbox", { name: "Color" })
+        .getByLabel("Color")
         .inputValue();
 
       await expect(firstOffsetXValue).toBe("2");
@@ -1361,7 +1348,7 @@ test.describe("Tokens: Apply token", () => {
       await expect(firstSpreadValue).toBe("0");
       await expect(firstColorValueAfter).toBe(firstColorValue);
 
-      // Verify that the second kept its values (after shadow 3)
+      // Verify that the third shadow (now second) kept its values
       // After removing index 1, the third shadow becomes the second shadow at index 1
       const newSecondShadowFields = tokensUpdateCreateModal.getByTestId(
         "shadow-input-fields-1",
@@ -1375,13 +1362,13 @@ test.describe("Tokens: Apply token", () => {
         .getByLabel("Y")
         .inputValue();
       const secondBlurValue = await newSecondShadowFields
-        .getByRole("textbox", { name: "Blur" })
+        .getByLabel("Blur")
         .inputValue();
       const secondSpreadValue = await newSecondShadowFields
-        .getByRole("textbox", { name: "Spread" })
+        .getByLabel("Spread")
         .inputValue();
       const secondColorValue = await newSecondShadowFields
-        .getByRole("textbox", { name: "Color" })
+        .getByLabel("Color")
         .inputValue();
 
       await expect(secondOffsetXValue).toBe("10");
@@ -1398,9 +1385,7 @@ test.describe("Tokens: Apply token", () => {
       const newSecondShadowFields = tokensUpdateCreateModal.getByTestId(
         "shadow-input-fields-1",
       );
-      const colorInput = firstShadowFields.getByRole("textbox", {
-        name: "Color",
-      });
+      const colorInput = firstShadowFields.getByLabel("Color");
       const firstColorValue = await colorInput.inputValue();
 
       // Switch to reference tab
@@ -1428,13 +1413,13 @@ test.describe("Tokens: Apply token", () => {
         .getByLabel("Y")
         .inputValue();
       const restoredFirstBlur = await firstShadowFields
-        .getByRole("textbox", { name: "Blur" })
+        .getByLabel("Blur")
         .inputValue();
       const restoredFirstSpread = await firstShadowFields
-        .getByRole("textbox", { name: "Spread" })
+        .getByLabel("Spread")
         .inputValue();
       const restoredFirstColor = await firstShadowFields
-        .getByRole("textbox", { name: "Color" })
+        .getByLabel("Color")
         .inputValue();
 
       await expect(restoredFirstOffsetX).toBe("2");
@@ -1451,13 +1436,13 @@ test.describe("Tokens: Apply token", () => {
         .getByLabel("Y")
         .inputValue();
       const restoredSecondBlur = await newSecondShadowFields
-        .getByRole("textbox", { name: "Blur" })
+        .getByLabel("Blur")
         .inputValue();
       const restoredSecondSpread = await newSecondShadowFields
-        .getByRole("textbox", { name: "Spread" })
+        .getByLabel("Spread")
         .inputValue();
       const restoredSecondColor = await newSecondShadowFields
-        .getByRole("textbox", { name: "Color" })
+        .getByLabel("Color")
         .inputValue();
 
       await expect(restoredSecondOffsetX).toBe("10");

frontend/pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+patchedDependencies:
+  '@zip.js/zip.js': patches/@zip.js__zip.js.patch
+
+recursiveInstall: true
+
+shamefullyHoist: true

frontend/resources/templates/index.mustache

@@ -25,14 +25,14 @@
     <link rel="icon" href="images/favicon.png" />
     {{# manifest}}
     <script>window.penpotWorkerURI="{{& worker_main}}"</script>
-    <script src="{{& config}}"></script>
-    <script src="{{& polyfills}}"></script>
+    <script defer src="{{& config}}"></script>
+    <script defer src="{{& polyfills}}"></script>
     {{/manifest}}
 
-    <script type="module">
-      globalThis.penpotTranslations = JSON.parse({{& translations}});
-      globalThis.penpotVersion = "%version%";
-      globalThis.penpotBuildDate = "%buildDate%";
+    <script>
+      window.penpotTranslations = JSON.parse({{& translations}});
+      window.penpotVersion = "%version%";
+      window.penpotBuildDate = "%buildDate%";
     </script>
     <!--cookie-consent-->
   </head>
@@ -44,11 +44,9 @@
     <section id="modal"></section>
 
     {{# manifest}}
-    <script type="module" src="{{& libs}}"></script>
-    <script type="module">
-      import { init } from "{{& main}}";
-      init();
-    </script>
+    <script defer src="js/libs.js?ts={{& ts}}"></script>
+    <script defer src="{{& shared}}"></script>
+    <script defer src="{{& main}}"></script>
     {{/manifest}}
   </body>
 </html>

frontend/resources/templates/rasterizer.mustache

@@ -19,11 +19,9 @@
   </head>
   <body>
     {{# manifest}}
-    <script type="module" src="{{& libs}}"></script>
-    <script type="module">
-      import { init } from "{{& rasterizer}}";
-      init();
-    </script>
+    <script src="js/libs.js?ts={{& ts}}"></script>
+    <script src="{{& shared}}"></script>
+    <script src="{{& rasterizer}}"></script>
     {{/manifest}}
   </body>
 </html>

frontend/resources/templates/render.mustache

@@ -18,11 +18,9 @@
   <body>
     <div id="app"></div>
     {{# manifest}}
-    <script type="module" src="{{& libs}}"></script>
-    <script type="module">
-      import { init } from "{{& render}}";
-      init();
-    </script>
+    <script src="js/libs.js?ts={{& ts}}"></script>
+    <script src="{{& shared}}"></script>
+    <script src="{{& render}}"></script>
     {{/manifest}}
   </body>
 </html>

frontend/scripts/_helpers.js

@@ -193,30 +193,26 @@ async function readShadowManifest() {
 
     const index = {
       ts: ts,
-      config: "./js/config.js",
-      polyfills: "./js/polyfills.js",
-      worker_main: "./js/worker/main.js",
-      libs: "./js/libs.js",
+      config: "js/config.js?ts=" + ts,
+      polyfills: "js/polyfills.js?ts=" + ts,
+      worker_main: "js/worker/main.js?ts=" + ts,
     };
 
     for (let item of content) {
-      index[item.name] = "./js/" + item["output-name"] + "";
+      index[item.name] = "js/" + item["output-name"];
     }
 
     return index;
   } catch (cause) {
-    const index = {
+    return {
       ts: ts,
-      config: "./js/config.js",
-      polyfills: "./js/polyfills.js",
-      main: "./js/main.js",
-      shared: "./js/shared.js",
-      worker_main: "./js/worker/main.js",
-      rasterizer: "./js/rasterizer.js",
-      libs: "./js/libs.js",
+      config: "js/config.js?ts=" + ts,
+      polyfills: "js/polyfills.js?ts=" + ts,
+      main: "js/main.js?ts=" + ts,
+      shared: "js/shared.js?ts=" + ts,
+      worker_main: "js/worker/main.js?ts=" + ts,
+      rasterizer: "js/rasterizer.js?ts=" + ts,
     };
-
-    return index;
   }
 }
 

frontend/scripts/build

@@ -21,37 +21,35 @@ set -ex
 
 corepack enable;
 corepack install || exit 1;
-yarn install || exit 1;
+pnpm install || exit 1;
 
 rm -rf resources/public;
 rm -rf target/dist;
 
-mkdir -p resources/public;
+pnpm run build:app:main --config-merge "{:release-version \"${CURRENT_HASH}-${TS}\"}" $EXTRA_PARAMS || exit 1
+
+if [ "$INCLUDE_WASM" = "yes" ];  then
+    pnpm run build:wasm || exit 1;
+fi
+
+pnpm run build:app:libs || exit 1;
+pnpm run build:app:assets || exit 1;
+
 mkdir -p target/dist;
+rsync -avr resources/public/ target/dist/
 
-yarn run build:app:main $EXTRA_PARAMS || exit 1
+sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./target/dist/index.html;
+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;
 
 if [ "$INCLUDE_WASM" = "yes" ];  then
-    yarn run build:wasm || exit 1;
+    sed -i "s/version=develop/version=$CURRENT_VERSION/g" ./target/dist/js/render_wasm.js;
 fi
 
-yarn run build:app:libs || exit 1;
-yarn run build:app:assets || exit 1;
-
-sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./resources/public/index.html;
-sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./resources/public/render.html;
-sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./resources/public/rasterizer.html;
-sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./resources/public/index.html;
-sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./resources/public/rasterizer.html;
-
-if [ "$INCLUDE_WASM" = "yes" ];  then
-    sed -i "s/version=develop/version=$CURRENT_VERSION/g" ./resources/public/js/render_wasm.js;
-fi
-
-rsync -avr resources/public/ target/dist/;
-
 if [ "$INCLUDE_STORYBOOK" = "yes" ];  then
     # build storybook
-    yarn run build:storybook || exit 1;
+    pnpm run build:storybook || exit 1;
     rsync -avr storybook-static/ target/dist/storybook-static;
 fi

frontend/scripts/build-libs.js

@@ -31,9 +31,9 @@ const rebuildNotify = {
 const config = {
   entryPoints: ["target/index.js"],
   bundle: true,
-  format: "esm",
+  format: "iife",
   banner: {
-    js: '"use strict";\nvar global = globalThis;',
+    js: '"use strict"; var global = globalThis;',
   },
   outfile: "resources/public/js/libs.js",
   plugins: [fixReactVirtualized, rebuildNotify],

frontend/scripts/build-storybook

@@ -15,7 +15,6 @@ echo $PATH
 set -ex
 
 corepack enable;
-corepack install || exit 1;
-yarn install || exit 1;
-
-yarn run build:storybook || exit 1;
+corepack install;
+pnpm install;
+pnpm run build:storybook;

frontend/scripts/test

@@ -3,7 +3,6 @@
 set -ex
 corepack enable;
 corepack install;
-yarn install;
-
-yarn run lint:scss;
-yarn run test;
+pnpm install;
+pnpm run lint:scss;
+pnpm run test;

frontend/scripts/test-components

@@ -3,11 +3,11 @@
 set -ex
 corepack enable;
 corepack install;
-yarn install;
 
-yarn run playwright install chromium --with-deps;
-yarn run build:storybook
+pnpm install;
+pnpm run playwright install chromium --with-deps;
+pnpm run build:storybook
 
-exec npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-    "npx http-server storybook-static --port 6006 --silent" \
-    "npx wait-on tcp:6006 && yarn test:storybook"
+exec pnpx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+    "pnpx http-server storybook-static --port 6006 --silent" \
+    "pnpx wait-on tcp:6006 && pnpm test:storybook"

frontend/scripts/test-e2e

@@ -3,6 +3,6 @@
 set -ex
 corepack enable;
 corepack install;
-yarn install;
-yarn run playwright install chromium --with-deps;
-yarn run test:e2e -x --workers=2 --reporter=list "$@";
+pnpm install;
+pnpm run playwright install chromium --with-deps;
+pnpm run test:e2e -x --workers=2 --reporter=list "$@";

frontend/shadow-cljs.edn

@@ -6,12 +6,13 @@
 
  :builds
  {:main
-  {:target :esm
+  {:target :browser
    :output-dir "resources/public/js/"
    :asset-path "/js"
    :devtools {:watch-dir "resources/public"
               :reload-strategy :full}
    :build-options {:manifest-name "manifest.json"}
+   :module-loader true
    :modules
    {:shared
     {:entries []}
@@ -19,7 +20,7 @@
     :main
     {:entries [app.main app.plugins.api]
      :depends-on #{:shared}
-     :exports {init app.main/init}}
+     :init-fn app.main/init}
 
     :util-highlight
     {:entries [app.util.code-highlight]
@@ -49,12 +50,12 @@
     :render
     {:entries [app.render]
      :depends-on #{:shared}
-     :exports {init app.render/init}}
+     :init-fn app.render/init}
 
     :rasterizer
     {:entries [app.rasterizer]
      :depends-on #{:shared}
-     :exports {init app.rasterizer/init}}}
+     :init-fn app.rasterizer/init}}
 
    :js-options
    {:entry-keys ["module" "browser" "main"]
@@ -74,10 +75,11 @@
     :compiler-options
     {:fn-invoke-direct true
      :optimizations #shadow/env ["PENPOT_BUILD_OPTIMIZATIONS" :as :keyword :default :advanced]
+     :output-wrapper true
+     :rename-prefix-namespace "PENPOT"
      :source-map true
      :elide-asserts true
      :anon-fn-naming-policy :off
-     :cross-chunk-method-motion false
      :source-map-detail-level :all}}}
 
   :worker

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

@@ -8,6 +8,7 @@
   (:require
    [app.common.data :as d]
    [app.common.schema :as sm]
+   [app.common.spec :as us]
    [app.common.types.profile :refer [schema:profile]]
    [app.common.uuid :as uuid]
    [app.config :as cf]
@@ -483,7 +484,7 @@
 
 (defn delete-access-token
   [{:keys [id] :as params}]
-  (assert (uuid? id))
+  (us/assert! ::us/uuid id)
   (ptk/reify ::delete-access-token
     ptk/WatchEvent
     (watch [_ _ _]

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

@@ -368,8 +368,8 @@
   (let [add-keyed-errors (fn [shadow-result k errors]
                            (update shadow-result :errors concat
                                    (map #(assoc % :shadow-key k :shadow-index shadow-index) errors)))
-        parsers {:offset-x parse-sd-token-general-value
-                 :offset-y parse-sd-token-general-value
+        parsers {:offsetX parse-sd-token-general-value
+                 :offsetY parse-sd-token-general-value
                  :blur parse-sd-token-shadow-blur
                  :spread parse-sd-token-shadow-spread
                  :color parse-sd-token-color-value
@@ -389,42 +389,35 @@
 (defn- parse-sd-token-shadow-value
   "Parses shadow value and validates it."
   [value]
-  (let [missing-references
-        (when (string? value)
-          (seq (cto/find-token-value-references value)))]
-    (cond
-      missing-references
-      {:errors [(wte/error-with-value :error.style-dictionary/missing-reference missing-references)]
-       :references missing-references}
-
-      (string? value)
-      {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value-shadow value)]}
+  (cond
+    ;; Reference value (string)
+    (string? value) {:value value}
 
     ;; Empty value
-      (nil? value) {:errors [(wte/get-error-code :error.token/empty-input)]}
+    (nil? value) {:errors [(wte/get-error-code :error.token/empty-input)]}
 
     ;; Invalid value
-      (not (js/Array.isArray value)) {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]}
+    (not (js/Array.isArray value)) {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]}
 
     ;; Array of shadows
-      :else
-      (let [converted (js->clj value :keywordize-keys true)
+    :else
+    (let [converted (js->clj value :keywordize-keys true)
           ;; Parse each shadow with its index
-            parsed-shadows (map-indexed
-                            (fn [idx shadow-map]
-                              (parse-single-shadow shadow-map idx))
-                            converted)
+          parsed-shadows (map-indexed
+                          (fn [idx shadow-map]
+                            (parse-single-shadow shadow-map idx))
+                          converted)
 
           ;; Collect all errors from all shadows
-            all-errors (mapcat :errors parsed-shadows)
+          all-errors (mapcat :errors parsed-shadows)
 
           ;; Collect all values from shadows that have values
-            all-values (into [] (keep :value parsed-shadows))]
+          all-values (into [] (keep :value parsed-shadows))]
 
-        (if (seq all-errors)
-          {:errors all-errors
-           :value all-values}
-          {:value all-values})))))
+      (if (seq all-errors)
+        {:errors all-errors
+         :value all-values}
+        {:value all-values}))))
 
 (defn collect-shadow-errors [token shadow-index]
   (group-by :shadow-key

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

@@ -119,6 +119,21 @@
       (let [page (dsh/lookup-page state)]
         (rx/of (update-flow (:id page) flow-id #(assoc % :name name)))))))
 
+(defn start-rename-flow
+  [id]
+  (dm/assert! (uuid? id))
+  (ptk/reify ::start-rename-flow
+    ptk/UpdateEvent
+    (update [_ state]
+      (assoc-in state [:workspace-local :flow-for-rename] id))))
+
+(defn end-rename-flow
+  []
+  (ptk/reify ::end-rename-flow
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :workspace-local dissoc :flow-for-rename))))
+
 ;; --- Interactions
 
 (defn- connected-frame?

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

@@ -153,11 +153,11 @@
 (defn value->shadow
   "Transform a token shadow value into penpot shadow data structure"
   [value]
-  (mapv (fn [{:keys [offset-x offset-y blur spread color inset]}]
+  (mapv (fn [{:keys [offsetX offsetY blur spread color inset]}]
           {:id (random-uuid)
            :hidden false
-           :offset-x offset-x
-           :offset-y offset-y
+           :offset-x offsetX
+           :offset-y offsetY
            :blur blur
            :color (value->color color)
            :spread spread

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

@@ -108,10 +108,6 @@
    {:error/code :error.style-dictionary/invalid-token-value-shadow-spread
     :error/fn #(tr "workspace.tokens.shadow-spread-range")}
 
-   :error.style-dictionary/invalid-token-value-shadow
-   {:error/code :error.style-dictionary/invalid-token-value-shadow
-    :error/fn #(tr "workspace.tokens.invalid-token-value-shadow" %)}
-
    :error/unknown
    {:error/code :error/unknown
     :error/fn #(tr "labels.unknown-error")}})

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

@@ -16,8 +16,8 @@
    :letter-spacing "Letter Spacing"
    :text-case "Text Case"
    :text-decoration "Text Decoration"
-   :offset-x "X"
-   :offset-y "Y"
+   :offsetX "X"
+   :offsetY "Y"
    :blur "Blur"
    :spread "Spread"
    :color "Color"

frontend/src/app/main/ui.cljs

@@ -31,28 +31,27 @@
    [app.main.ui.static :as static]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
-   [app.util.modules :as mod]
    [app.util.theme :as theme]
    [beicon.v2.core :as rx]
    [rumext.v2 :as mf]))
 
 (def auth-page
-  (mf/lazy #(mod/load 'app.main.ui.auth/auth-page*)))
+  (mf/lazy-component app.main.ui.auth/auth))
 
-(def verify-token-page*
-  (mf/lazy #(mod/load 'app.main.ui.auth.verify-token/verify-token-page*)))
+(def verify-token-page
+  (mf/lazy-component app.main.ui.auth.verify-token/verify-token))
 
 (def viewer-page*
-  (mf/lazy #(mod/load 'app.main.ui.viewer/viewer-page*)))
+  (mf/lazy-component app.main.ui.viewer/viewer*))
 
 (def dashboard-page*
-  (mf/lazy #(mod/load 'app.main.ui.dashboard/dashboard-page*)))
+  (mf/lazy-component app.main.ui.dashboard/dashboard*))
 
 (def settings-page*
-  (mf/lazy #(mod/load 'app.main.ui.settings/settings-page*)))
+  (mf/lazy-component app.main.ui.settings/settings*))
 
 (def workspace-page*
-  (mf/lazy #(mod/load 'app.main.ui.workspace/workspace-page*)))
+  (mf/lazy-component app.main.ui.workspace/workspace*))
 
 (mf/defc workspace-legacy-redirect*
   {::mf/props :obj
@@ -190,7 +189,7 @@
        [:? [:& auth-page {:route route}]]
 
        :auth-verify-token
-       [:? [:& verify-token-page* {:route route}]]
+       [:? [:& verify-token-page {:route route}]]
 
        (:settings-profile
         :settings-password

frontend/src/app/main/ui/auth.cljs

@@ -19,7 +19,8 @@
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
-(mf/defc auth*
+(mf/defc auth
+  {::mf/props :obj}
   [{:keys [route]}]
   (let [section (dm/get-in route [:data :name])
         is-register (or
@@ -68,9 +69,3 @@
 
       (when (= section :auth-register)
         [:& terms-register])]]))
-
-
-(mf/defc auth-page*
-  {::mf/lazy-load true}
-  [props]
-  [:> auth* props])

frontend/src/app/main/ui/auth/verify_token.cljs

@@ -61,9 +61,9 @@
    (rt/nav :auth-login)
    (ntf/warn (tr "errors.unexpected-token"))))
 
-(mf/defc verify-token*
-  [{:keys [route]}]
-  (let [token     (get-in route [:query-params :token])
+(mf/defc verify-token
+  [{:keys [route] :as props}]
+  (let [token (get-in route [:query-params :token])
         bad-token (mf/use-state false)]
 
     (mf/with-effect []
@@ -99,8 +99,3 @@
       [:> static/invalid-token {}]
       [:> loader*  {:title (tr "labels.loading")
                     :overlay true}])))
-
-(mf/defc verify-token-page*
-  {::mf/lazy-load true}
-  [props]
-  [:> verify-token* props])

frontend/src/app/main/ui/components/code_block.cljs

@@ -8,28 +8,24 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
-   [app.util.modules :as modules]
    [cuerdas.core :as str]
    [promesa.core :as p]
-   [rumext.v2 :as mf]))
+   [rumext.v2 :as mf]
+   [shadow.lazy :as lazy]))
 
 (def highlight-fn
-  (delay (modules/load-fn 'app.util.code-highlight/highlight!)))
+  (lazy/loadable app.util.code-highlight/highlight!))
 
 (mf/defc code-block
   {::mf/wrap-props false}
   [{:keys [code type]}]
   (let [block-ref (mf/use-ref)
-        code      (str/trim code)]
+        code (str/trim code)]
 
     (mf/with-effect [code type]
       (when-let [node (mf/ref-val block-ref)]
-        (->> @highlight-fn
-             (p/fmap (fn [f] (f)))
-             (p/fnly (fn [f cause]
-                       (if cause
-                         (js/console.error cause)
-                         (f node)))))))
+        (p/let [highlight-fn (lazy/load highlight-fn)]
+          (highlight-fn node))))
 
     [:pre {:class (dm/str type " " (stl/css :code-display)) :ref block-ref} code]))
 

frontend/src/app/main/ui/components/radio_buttons.cljs

@@ -9,7 +9,6 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
-   [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
    [app.main.ui.formats :as fmt]
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
@@ -47,7 +46,7 @@
                      :disabled disabled)}
 
      (if (some? icon)
-       [:> icon* {:icon-id icon :class icon-class :aria-hidden true}]
+       [:span {:class icon-class} icon]
        [:span {:class (stl/css :title-name)} value])
 
      [:input {:id id

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

@@ -247,6 +247,7 @@
           (swap! storage/session dissoc :template))))))
 
 (mf/defc dashboard*
+  {::mf/props :obj}
   [{:keys [profile project-id team-id search-term plugin-url template section]}]
   (let [team            (mf/deref refs/team)
         projects        (mf/deref refs/projects)
@@ -312,8 +313,3 @@
         :section section
         :search-term search-term
         :team team}]]]))
-
-(mf/defc dashboard-page*
-  {::mf/lazy-load true}
-  [props]
-  [:> dashboard* props])

frontend/src/app/main/ui/ds.cljs

@@ -9,7 +9,6 @@
    [app.config :as cf]
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.controls.checkbox :refer [checkbox*]]
    [app.main.ui.ds.controls.combobox :refer [combobox*]]
    [app.main.ui.ds.controls.input :refer [input*]]
    [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
@@ -63,7 +62,6 @@
     :RawSvg raw-svg*
     :Select select*
     :Switch switch*
-    :Checkbox checkbox*
     :Combobox combobox*
     :Text text*
     :TabSwitcher tab-switcher*

frontend/src/app/main/ui/ds/buttons/_buttons.scss

@@ -11,18 +11,12 @@
 %base-button {
   --button-bg-color: initial;
   --button-fg-color: initial;
-
   --button-hover-bg-color: initial;
   --button-hover-fg-color: initial;
-
   --button-active-bg-color: initial;
-  --button-active-fg-color: initial;
-
   --button-disabled-bg-color: initial;
   --button-disabled-fg-color: initial;
-
   --button-border-color: var(--button-bg-color);
-
   --button-focus-inner-ring-color: initial;
   --button-focus-outer-ring-color: initial;
 
@@ -44,10 +38,8 @@
     --button-fg-color: var(--button-hover-fg-color);
   }
 
-  &:active,
-  &[aria-pressed="true"] {
+  &:active {
     --button-bg-color: var(--button-active-bg-color);
-    --button-fg-color: var(--button-active-fg-color);
   }
 
   &:focus-visible {
@@ -71,7 +63,6 @@
   --button-hover-fg-color: var(--color-background-secondary);
 
   --button-active-bg-color: var(--color-accent-tertiary);
-  --button-active-fg-color: var(--color-background-secondary);
 
   --button-disabled-bg-color: var(--color-accent-primary-muted);
   --button-disabled-fg-color: var(--color-background-secondary);
@@ -81,8 +72,7 @@
   --button-focus-inner-ring-color: var(--color-background-secondary);
   --button-focus-outer-ring-color: var(--color-accent-primary);
 
-  &:active,
-  &[aria-pressed="true"] {
+  &:active {
     box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgba(0, 0, 0, 0.2);
   }
 }
@@ -95,7 +85,6 @@
   --button-hover-fg-color: var(--color-accent-primary);
 
   --button-active-bg-color: var(--color-background-quaternary);
-  --button-active-fg-color: var(--color-accent-primary);
 
   --button-disabled-bg-color: transparent;
   --button-disabled-fg-color: var(--color-foreground-secondary);
@@ -114,7 +103,6 @@
   --button-hover-fg-color: var(--color-accent-primary);
 
   --button-active-bg-color: var(--color-background-quaternary);
-  --button-active-fg-color: var(--color-accent-primary);
 
   --button-disabled-bg-color: transparent;
   --button-disabled-fg-color: var(--color-accent-primary-muted);
@@ -133,7 +121,6 @@
   --button-hover-fg-color: var(--color-foreground-primary);
 
   --button-active-bg-color: var(--color-accent-error);
-  --button-active-fg-color: var(--color-foreground-primary);
 
   --button-disabled-bg-color: var(--color-background-error);
   --button-disabled-fg-color: var(--color-accent-error);
@@ -143,8 +130,7 @@
   --button-focus-inner-ring-color: var(--color-background-primary);
   --button-focus-outer-ring-color: var(--color-accent-primary);
 
-  &:active,
-  &[aria-pressed="true"] {
+  &:active {
     box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgba(0, 0, 0, 0.2);
   }
 }

frontend/src/app/main/ui/ds/controls/checkbox.cljs

@@ -1,45 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.ds.controls.checkbox
-  (:require-macros
-   [app.main.style :as stl])
-  (:require
-   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
-   [rumext.v2 :as mf]))
-
-(def ^:private schema:checkbox
-  [:map
-   [:id {:optional true} :string]
-   [:label {:optional true} :string]
-   [:checked {:optional true} :boolean]
-   [:on-change {:optional true} fn?]
-   [:disabled {:optional true} :boolean]])
-
-(mf/defc checkbox*
-  {::mf/schema schema:checkbox}
-  [{:keys [id class label checked on-change disabled] :rest props}]
-  (let [props
-        (mf/spread-props props {:type "checkbox"
-                                :class (stl/css :checkbox-input)
-                                :id id
-                                :checked checked
-                                :on-change on-change
-                                :disabled disabled})]
-
-    [:div {:class [class (stl/css :checkbox)]}
-     [:label {:for id
-              :class (stl/css :checkbox-label)}
-      [:div {:class (stl/css-case :checkbox-box true
-                                  :checked checked
-                                  :disabled disabled)}
-       (when checked
-         [:> icon* {:icon-id i/tick
-                    :size "s"}])]
-
-      [:div {:class (stl/css :checkbox-text)} label]
-
-      [:> :input props]]]))

frontend/src/app/main/ui/ds/controls/checkbox.mdx

@@ -1,40 +0,0 @@
-{ /* This Source Code Form is subject to the terms of the Mozilla Public
-  License, v. 2.0. If a copy of the MPL was not distributed with this
-  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
-  Copyright (c) KALEIDOS INC */ }
-
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-import * as Checkbox from "./checkbox.stories";
-
-<Meta title="Controls/Checkbox" />
-
-# Checkbox
-
-The `checkbox*` component is a toggle control. It allows users to switch between boolean states (`false` or `true`).
-
-<Canvas of={Checkbox.Default} />
-
-<Canvas of={Checkbox.Checked} />
-
-## Anatomy
-
-The checkbox component consists of three main parts:
-
-- **Label** (optional): the text that describes what the checkbox controls. Clicking on this text also works for toggling.
-- **Box**: the box which shows the current state. Contains a check if the state is `true`.
-- **Native element**: the native HTML element which holds the state. It remains hidden to the user.
-
-## Usage Guidelines
-
-### When to Use
-
-- For boolean settings that take effect immediately.
-- In preference panels and configuration screens.
-
-### When Not to Use
-
-- For actions that require confirmation (use buttons instead).
-- For multiple choice selections (use radio buttons or select).
-- For temporary states that need explicit "Apply" action.
-- For ternary states.

frontend/src/app/main/ui/ds/controls/checkbox.scss

@@ -1,86 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-@use "ds/_borders.scss" as *;
-@use "ds/_sizes.scss" as *;
-@use "ds/typography.scss" as *;
-
-.checkbox {
-  --input-checkbox-border-color: var(--color-foreground-secondary);
-  --input-checkbox-border-color-focus: var(--color-accent-primary);
-  --input-checkbox-border-color-hover: var(--color-accent-primary-muted);
-  --input-checkbox-foreground-color: var(--color-foreground-primary);
-  --input-checkbox-background-color: var(--color-background-quaternary);
-
-  --input-checkbox-border-color-checked: var(--color-background-quaternary);
-  --input-checkbox-foreground-color-checked: var(--color-background-primary);
-  --input-checkbox-background-color-checked: var(--color-accent-primary);
-
-  --input-checkbox-foreground-color-disabled: var(--color-background-primary);
-  --input-checkbox-background-color-disabled: var(--color-foreground-secondary);
-
-  --input-checkbox-text-color: var(--color-foreground-secondary);
-}
-
-.checkbox-label {
-  display: grid;
-  grid-template-columns: var(--sp-l) 1fr 0;
-  align-items: center;
-
-  &:hover {
-    .checkbox-box {
-      border-color: var(--input-checkbox-border-color-hover);
-    }
-  }
-
-  &:focus,
-  &:focus-within {
-    .checkbox-box {
-      border-color: var(--input-checkbox-border-color-focus);
-    }
-  }
-}
-
-.checkbox-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: $sz-16;
-  block-size: $sz-16;
-  border-radius: $br-4;
-  border: $b-1 solid var(--input-checkbox-border-color);
-  color: var(--input-checkbox-foreground-color);
-  background-color: var(--input-checkbox-background-color);
-
-  &.disabled {
-    border: 0;
-  }
-
-  &.checked {
-    --input-checkbox-border-color: var(--input-checkbox-border-color-checked);
-    --input-checkbox-foreground-color: var(--input-checkbox-foreground-color-checked);
-    --input-checkbox-background-color: var(--input-checkbox-background-color-checked);
-
-    &.disabled {
-      --input-checkbox-foreground-color: var(--input-checkbox-foreground-color-disabled);
-      --input-checkbox-background-color: var(--input-checkbox-background-color-disabled);
-    }
-  }
-}
-
-.checkbox-text {
-  @include use-typography("body-small");
-  padding-inline-start: var(--sp-s);
-  color: var(--input-checkbox-text-color);
-}
-
-.checkbox-input {
-  &:focus {
-    outline: 0;
-    inline-size: 0;
-    block-size: 0;
-  }
-}

frontend/src/app/main/ui/ds/controls/checkbox.stories.jsx

@@ -1,76 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-import * as React from "react";
-import Components from "@target/components";
-
-const { Checkbox } = Components;
-
-export default {
-  title: "Controls/Checkbox",
-  component: Checkbox,
-  argTypes: {
-    label: {
-      control: { type: "text" },
-      description: "Label text displayed next to the checkbox",
-    },
-    checked: {
-      control: { type: "boolean" },
-      description: "Whether the checkbox is checked",
-    },
-    disabled: {
-      control: { type: "boolean" },
-      description: "Whether the checkbox is disabled",
-    },
-  },
-  args: {
-    checked: false,
-    disabled: false,
-  },
-  parameters: {
-    controls: {
-      exclude: ["id", "on-change"],
-    },
-  },
-  render: ({ ...args }) => <Checkbox {...args} />,
-};
-
-export const Default = {
-  args: {
-    label: "Toggle something",
-    disabled: false,
-  },
-  render: ({ ...args }) => <Checkbox {...args} />,
-};
-
-export const Checked = {
-  args: {
-    label: "Toggle something",
-    checked: true,
-    disabled: false,
-  },
-  render: ({ ...args }) => <Checkbox {...args} />,
-};
-
-export const WithoutLabel = {
-  args: {
-    disabled: false,
-  },
-  render: ({ ...args }) => <Checkbox {...args} />,
-};
-
-export const WithLongLabel = {
-  args: {
-    label:
-      "This is a very long label that demonstrates how the checkbox component handles text wrapping and layout when the label content is extensive",
-    disabled: false,
-  },
-  render: ({ ...args }) => (
-    <div style={{ maxWidth: "300px" }}>
-      <Checkbox {...args} />
-    </div>
-  ),
-};

frontend/src/app/main/ui/ds/controls/input.cljs

@@ -26,19 +26,14 @@
    [:max-length {:optional true} :int]
    [:variant {:optional true} [:maybe [:enum "seamless" "dense" "comfortable"]]]
    [:hint-message {:optional true} [:maybe :string]]
-   [:hint-type {:optional true} [:maybe [:enum "hint" "error" "warning"]]]
-   [:hint-formated {:optional true} :boolean]])
+   [:hint-type {:optional true} [:maybe [:enum "hint" "error" "warning"]]]])
 
 (mf/defc input*
   {::mf/forward-ref true
    ::mf/schema schema:input}
-  [{:keys [id class label is-optional type max-length variant hint-message hint-type hint-formated] :rest props} ref]
+  [{:keys [id class label is-optional type max-length variant hint-message hint-type] :rest props} ref]
   (let [id (or id (mf/use-id))
         variant (d/nilv variant "dense")
-        hint-class (if (and (not= "error" hint-type)
-                            hint-formated)
-                     (stl/css :hint-formated)
-                     "")
         is-optional (d/nilv is-optional false)
         type (d/nilv type "text")
         max-length (d/nilv max-length max-input-length)
@@ -61,7 +56,6 @@
      [:> input-field* props]
      (when has-hint
        [:> hint-message* {:id id
-                          :class hint-class
                           :message hint-message
                           :type hint-type}])]))
 

frontend/src/app/main/ui/ds/controls/input.scss

@@ -12,7 +12,3 @@
   gap: var(--sp-xs);
   inline-size: 100%;
 }
-
-.hint-formated {
-  white-space: pre;
-}

frontend/src/app/main/ui/ds/controls/select.cljs

@@ -118,7 +118,6 @@
         (mf/use-fn
          (mf/deps disabled)
          (fn [event]
-           (dom/prevent-default event)
            (dom/stop-propagation event)
            (when-not disabled
              (swap! is-open* not))))

frontend/src/app/main/ui/ds/controls/utilities/input_field.cljs

@@ -53,15 +53,10 @@
                                                 "true")
                                 :aria-describedby (when has-hint
                                                     (str id "-hint"))
+                                :aria-labelledby tooltip-id
                                 :type (d/nilv type "text")
                                 :id id
                                 :max-length (d/nilv max-length max-input-length)})
-
-        props (if (and aria-label (not (some? icon)))
-                (mf/spread-props props
-                                 {:aria-label aria-label})
-                (mf/spread-props props
-                                 {:aria-labelledby tooltip-id}))
         inside-class (stl/css-case :input-wrapper true
                                    :has-hint has-hint
                                    :hint-type-hint (= hint-type "hint")

frontend/src/app/main/ui/ds/foundations/assets/icon.cljs

@@ -300,7 +300,6 @@
   "A collection of all icons"
   (collect-icons))
 
-(def ^:private ^:const icon-size-l 32)
 (def ^:private ^:const icon-size-m 16)
 (def ^:private ^:const icon-size-s 12)
 
@@ -309,7 +308,7 @@
    [:class {:optional true} [:maybe :string]]
    [:icon-id [:and :string [:fn #(contains? icon-list %)]]]
    [:size  {:optional true}
-    [:maybe [:enum "s" "m" "l"]]]])
+    [:maybe [:enum "s" "m"]]]])
 
 (mf/defc icon*
   {::mf/schema schema:icon}
@@ -318,14 +317,10 @@
                                  {:class [class (stl/css :icon)]
                                   :width icon-size-m
                                   :height icon-size-m})
-
-        size-px (cond (= size "l") icon-size-l
-                      (= size "s") icon-size-s
-                      :else        icon-size-m)
-
-        offset  (if (or (= size "s") (= size "m"))
-                  (/ (- icon-size-m size-px) 2)
-                  0)]
+        size-px (if (= size "s")
+                  icon-size-s
+                  icon-size-m)
+        offset  (/ (- icon-size-m size-px) 2)]
 
     [:> :svg props
      [:use {:href (dm/str "#icon-" icon-id)

frontend/src/app/main/ui/ds/utilities/swatch.scss

@@ -15,7 +15,7 @@
 }
 
 .swatch {
-  --border-color: var(--color-accent-primary-muted);
+  --border-color: var(--color-background-quaternary);
   --border-radius: #{$br-4};
   --border-color-active: var(--color-foreground-primary);
   --border-color-active-inset: var(--color-background-primary);

frontend/src/app/main/ui/forms.cljs

@@ -34,9 +34,10 @@
            (let [value (-> event dom/get-target dom/get-input-value)]
              (fm/on-input-change form input-name value true))))
 
+
         props
         (mf/spread-props props {:on-change on-change
-                                :value value})
+                                :default-value value})
 
         props
         (if (and error touched?)

frontend/src/app/main/ui/inspect/code.scss

@@ -14,6 +14,7 @@
   padding-bottom: deprecated.$s-16;
   overflow-y: auto;
   overflow-x: hidden;
+  scrollbar-gutter: stable;
   padding-inline: var(--sp-m);
 }
 

frontend/src/app/main/ui/inspect/right_sidebar.scss

@@ -30,8 +30,8 @@
 
 .tool-windows {
   block-size: 100%;
-  display: grid;
-  grid-template-rows: auto 1fr;
+  display: flex;
+  flex-direction: column;
   gap: var(--sp-s);
 }
 
@@ -124,7 +124,8 @@
 .inspect-tab-switcher-label {
   @include use-typography("body-medium");
   color: var(--color-foreground-primary);
-  flex: 0 1 40%;
+  flex: 0;
+  min-inline-size: fit-content;
 }
 
 .inspect-tab-switcher-controls {
@@ -150,6 +151,7 @@
 }
 
 .inspect-content {
+  flex: 1;
   overflow: hidden;
 }
 
@@ -157,5 +159,6 @@
   --tabs-nav-padding-inline-start: 0;
   --tabs-nav-padding-inline-end: var(--sp-m);
 
+  block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
   overflow: auto;
 }

frontend/src/app/main/ui/inspect/styles.scss

@@ -1,11 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-@use "ds/_utils.scss" as *;
-
-.styles-tab {
-  block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
-}

frontend/src/app/main/ui/settings.cljs

@@ -78,9 +78,3 @@
 
           :settings-notifications
           [:& notifications-page* {:profile profile}])]]]]))
-
-(mf/defc settings-page*
-  {::mf/lazy-load true}
-  [props]
-  [:> settings* props])
-

frontend/src/app/main/ui/viewer.cljs

@@ -624,6 +624,7 @@
 ;; --- Component: Viewer
 
 (mf/defc viewer*
+  {::mf/props :obj}
   [{:keys [file-id share-id page-id] :as props}]
   (mf/with-effect [file-id page-id share-id]
     (let [params {:file-id file-id
@@ -642,8 +643,3 @@
     [:> loader*  {:title (tr "labels.loading")
                   :overlay true}]))
 
-
-(mf/defc viewer-page*
-  {::mf/lazy-load true}
-  [props]
-  [:> viewer* props])

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

@@ -165,7 +165,7 @@
                    (dsh/lookup-page state file-id page-id))))
              st/state))
 
-(mf/defc workspace-inner*
+(mf/defc workspace-page*
   {::mf/private true}
   [{:keys [page-id file-id file layout wglobal]}]
   (let [page-ref (mf/with-memo [file-id page-id]
@@ -252,16 +252,10 @@
                             :touch-action "none"}}
           [:> context-menu*]
           (if (and file-loaded? page-id)
-            [:> workspace-inner*
+            [:> workspace-page*
              {:page-id page-id
               :file-id file-id
               :file file
               :wglobal wglobal
               :layout layout}]
             [:> workspace-loader*])]]]]]]))
-
-(mf/defc workspace-page*
-  {::mf/lazy-load true}
-  [props]
-  [:> workspace* props])
-

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

@@ -418,11 +418,11 @@
           [:& radio-buttons {:selected color-style
                              :on-change toggle-token-color
                              :name "color-style"}
-           [:& radio-button {:icon i/swatches
+           [:& radio-button {:icon deprecated-icon/swatches
                              :value :direct-color
                              :title (tr "labels.color")
                              :id "opt-color"}]
-           [:& radio-button {:icon i/tokens
+           [:& radio-button {:icon deprecated-icon/tokens
                              :value :token-color
                              :title (tr "workspace.colorpicker.color-tokens")
                              :id "opt-token-color"}]])]

frontend/src/app/main/ui/workspace/shapes/text/editor.cljs

@@ -6,7 +6,7 @@
 
 (ns app.main.ui.workspace.shapes.text.editor
   (:require
-   ["draft-js" :as draft]
+   ["@penpot/draft-js" :as draft]
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]

frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs

@@ -11,6 +11,7 @@
    [app.common.data.macros :as dm]
    [app.common.files.helpers :as cfh]
    [app.common.path-names :as cpn]
+   [app.common.spec :as us]
    [app.common.thumbnails :as thc]
    [app.common.types.component :as ctk]
    [app.common.types.container :as ctn]
@@ -37,6 +38,7 @@
    [app.util.i18n :as i18n :refer [c tr]]
    [app.util.strings :refer [matches-search]]
    [app.util.timers :as ts]
+   [cljs.spec.alpha :as s]
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
@@ -95,6 +97,10 @@
       (str (str/slice (:path asset) (count path)))
       (cpn/merge-path-item (:name asset))))
 
+(s/def ::asset-name ::us/not-empty-string)
+(s/def ::name-group-form
+  (s/keys :req-un [::asset-name]))
+
 (def initial-context-menu-state
   {:open? false :top nil :left nil})
 

frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs

@@ -28,6 +28,7 @@
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.hooks :as h]
+   [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.sidebar.assets.groups :as grp]
    [app.util.dom :as dom]
@@ -566,11 +567,11 @@
          [:& radio-buttons {:selected (if is-listing-thumbs "grid" "list")
                             :on-change toggle-list-style
                             :name "listing-style"}
-          [:& radio-button {:icon i/view-as-list
+          [:& radio-button {:icon deprecated-icon/view-as-list
                             :value "list"
                             :title (tr "workspace.assets.list-view")
                             :id "opt-list"}]
-          [:& radio-button {:icon i/flex-grid
+          [:& radio-button {:icon deprecated-icon/flex-grid
                             :value "grid"
                             :title (tr "workspace.assets.grid-view")
                             :id "opt-grid"}]]])

frontend/src/app/main/ui/workspace/sidebar/options.cljs

@@ -25,7 +25,7 @@
    [app.main.ui.workspace.sidebar.options.menus.bool :refer [bool-options*]]
    [app.main.ui.workspace.sidebar.options.menus.component :refer [component-menu*]]
    [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
-   [app.main.ui.workspace.sidebar.options.menus.interactions :refer [interactions-menu*]]
+   [app.main.ui.workspace.sidebar.options.menus.interactions :refer [interactions-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layout-container :as layout-container]
    [app.main.ui.workspace.sidebar.options.page :as page]
    [app.main.ui.workspace.sidebar.options.shapes.bool :as bool]
@@ -215,7 +215,7 @@
         (case options-mode
           :prototype
           [:div {:class (stl/css :element-options :interaction-options)}
-           [:> interactions-menu* {:shape (first shapes)}]]
+           [:& interactions-menu {:shape (first shapes)}]]
 
           :inspect
           [:div {:class (stl/css :element-options :inspect-options)}

frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.cljs

@@ -13,7 +13,6 @@
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -100,10 +99,10 @@
                         :name "frame-orientation"
                         :wide true
                         :class (stl/css :radio-buttons)}
-      [:& radio-button {:icon i/size-vertical
+      [:& radio-button {:icon deprecated-icon/size-vertical
                         :value "vertical"
                         :id "size-vertical"}]
-      [:& radio-button {:icon i/size-horizontal
+      [:& radio-button {:icon deprecated-icon/size-horizontal
                         :value "horizontal"
                         :id "size-horizontal"}]]]))
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs

@@ -16,7 +16,6 @@
    [app.main.features :as features]
    [app.main.store :as st]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -79,22 +78,22 @@
                            :class (stl/css :boolean-radio-btn)
                            :on-change on-change
                            :name "bool-options"}
-         [:& radio-button {:icon i/boolean-union
+         [:& radio-button {:icon deprecated-icon/boolean-union
                            :value "union"
                            :disabled disabled-bool-btns
                            :title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")")
                            :id "bool-opt-union"}]
-         [:& radio-button {:icon i/boolean-difference
+         [:& radio-button {:icon deprecated-icon/boolean-difference
                            :value "difference"
                            :disabled disabled-bool-btns
                            :title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")")
                            :id "bool-opt-differente"}]
-         [:& radio-button {:icon i/boolean-intersection
+         [:& radio-button {:icon deprecated-icon/boolean-intersection
                            :value "intersection"
                            :disabled disabled-bool-btns
                            :title (str (tr "workspace.shape.menu.intersection") " (" (sc/get-tooltip :bool-intersection) ")")
                            :id "bool-opt-intersection"}]
-         [:& radio-button {:icon i/boolean-exclude
+         [:& radio-button {:icon deprecated-icon/boolean-exclude
                            :value "exclude"
                            :disabled disabled-bool-btns
                            :title (str (tr "workspace.shape.menu.exclude") " (" (sc/get-tooltip :bool-exclude) ")")

frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs

@@ -42,6 +42,7 @@
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.ds.product.input-with-meta :refer [input-with-meta*]]
    [app.main.ui.hooks :as h]
+   [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.sidebar.options.menus.variants-help-modal]
    [app.util.debug :as dbg]
@@ -797,10 +798,10 @@
         [:& radio-buttons {:selected (if (:listing-thumbs? filters) "grid" "list")
                            :on-change toggle-list-style
                            :name "swap-listing-style"}
-         [:& radio-button {:icon i/view-as-list
+         [:& radio-button {:icon deprecated-icon/view-as-list
                            :value "list"
                            :id "swap-opt-list"}]
-         [:& radio-button {:icon i/flex-grid
+         [:& radio-button {:icon deprecated-icon/flex-grid
                            :value "grid"
                            :id "swap-opt-grid"}]]]
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs

@@ -206,7 +206,7 @@
                       :data-value "bottom"
                       :on-click on-constraint-button-clicked}
              [:span {:class (stl/css :resalted-area)}]]]]
-          [:div {:class (stl/css :constraints-selects)}
+          [:div {:class (stl/css :contraints-selects)}
            [:div {:class (stl/css :horizontal-select) :data-testid "constraint-h-select"}
             [:& select
              {:default-value (if (not= constraints-h :multiple) (d/nilv (d/name constraints-h) "scale") "")

frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss

@@ -120,9 +120,7 @@
 }
 
 .constraints-selects {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+  @include deprecated.flexColumn;
 }
 
 .horizontal-select,

frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs

@@ -18,7 +18,6 @@
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
@@ -53,29 +52,29 @@
                         :name (dm/str "flex-align-items-" type)}
       [:& radio-button {:value "start"
                         :icon  (if is-col?
-                                 i/align-self-row-left
-                                 i/align-self-column-top)
+                                 deprecated-icon/align-self-row-left
+                                 deprecated-icon/align-self-column-top)
                         :title "Align self start"
                         :id     (dm/str "align-self-start-" type)}]
 
       [:& radio-button {:value "center"
                         :icon  (if is-col?
-                                 i/align-self-row-center
-                                 i/align-self-column-center)
+                                 deprecated-icon/align-self-row-center
+                                 deprecated-icon/align-self-column-center)
                         :title "Align self center"
                         :id     (dm/str "align-self-center-" type)}]
 
       [:& radio-button {:value "end"
                         :icon  (if is-col?
-                                 i/align-self-row-right
-                                 i/align-self-column-bottom)
+                                 deprecated-icon/align-self-row-right
+                                 deprecated-icon/align-self-column-bottom)
                         :title "Align self end"
                         :id     (dm/str "align-self-end-" type)}]
 
       [:& radio-button {:value "stretch"
                         :icon  (if is-col?
-                                 i/align-self-row-stretch
-                                 i/align-self-column-stretch)
+                                 deprecated-icon/align-self-row-stretch
+                                 deprecated-icon/align-self-column-stretch)
                         :title "Align self stretch"
                         :id     (dm/str "align-self-stretch-" type)}]]]))
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss

@@ -4,51 +4,22 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "ds/_borders.scss" as *;
-@use "ds/_sizes.scss" as *;
-@use "ds/_utils.scss" as *;
-@use "ds/mixins.scss" as *;
-@use "ds/typography.scss" as t;
-@use "../../../sidebar/common/sidebar.scss" as sidebar;
+@use "refactor/common-refactor.scss" as deprecated;
 
-.wrapper {
+.interactions-content {
   display: flex;
   flex-direction: column;
-  gap: var(--sp-s);
-  padding-inline-start: var(--sp-m);
+  gap: deprecated.$s-8;
+  padding-left: var(--sp-m);
 }
 
-.section {
-  @include sidebar.option-grid-structure;
+.interaction-options {
+  @include deprecated.flexColumn;
 }
 
-.title {
-  grid-column: span 8;
-}
-
-.title-bar {
-  padding-inline-start: var(--sp-xxs);
-}
-
-.content {
-  grid-column: span 8;
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-xs);
-  margin-block-start: var(--sp-xs);
-}
-
-.content-interactions {
-  gap: var(--sp-l);
-}
-
-.help {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-xxxl);
-  inline-size: $sz-200;
-  padding: var(--sp-xxxl) 0;
+.help-content {
+  padding: deprecated.$s-32 0;
+  width: deprecated.$s-200;
   margin: 0 auto;
 }
 
@@ -56,168 +27,130 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--sp-m);
+  margin-bottom: deprecated.$s-40;
+  gap: deprecated.$s-12;
 }
 
-.help-text {
-  @include t.use-typography("body-small");
+.interactions-help-icon {
+  @include deprecated.flexCenter;
+  width: deprecated.$s-48;
+  height: deprecated.$s-48;
+  border-radius: deprecated.$br-circle;
+  background-color: var(--pill-background-color);
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+    height: deprecated.$s-32;
+    width: deprecated.$s-32;
+  }
+}
+
+.after {
+  @include deprecated.bodySmallTypography;
+  margin-top: deprecated.$s-1;
+}
+
+.interactions-help {
+  @include deprecated.bodySmallTypography;
   text-align: center;
-  color: var(--color-foreground-secondary);
+  color: var(--title-foreground-color);
 }
 
-.help-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  inline-size: $sz-48;
-  block-size: $sz-48;
+.element-set {
+  @include deprecated.flexColumn;
 }
 
-.help-icon-inner {
-  color: var(--color-foreground-secondary);
-  inline-size: $sz-32;
-  block-size: $sz-32;
-}
-
-.interaction-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-xs);
-}
-
-.prototype-pill {
-  display: flex;
-  align-items: center;
-  gap: px2rem(1);
-  border-radius: $br-8;
-  padding: var(--sp-s) var(--sp-m);
-  block-size: $sz-32;
-  padding: 0;
-
-  &.double {
-    block-size: $sz-48;
-    .prototype-pill-button {
-      block-size: $sz-48;
-    }
-  }
-
-  &:has(.prototype-pill-input:focus) {
-    outline: $b-1 solid var(--color-accent-primary);
-  }
-}
-
-.prototype-pill-button {
-  &.left {
-    border-end-end-radius: 0;
-    border-start-end-radius: 0;
-  }
-
-  &.right {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-}
-
-.prototype-pill-main {
-  display: flex;
+.interactions-info {
   flex-grow: 1;
-  block-size: 100%;
-  inline-size: 100%;
+  display: grid;
 }
 
-.prototype-pill-center {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  block-size: 100%;
-  padding: 0 var(--sp-s);
-  background-color: var(--color-background-tertiary);
+.trigger-name {
   color: var(--color-foreground-primary);
 }
 
-.prototype-pill-info {
-  display: grid;
-  inline-size: 100%;
+.action-summary {
+  color: var(--color-foreground-secondary);
+  @include deprecated.textEllipsis;
 }
 
-.prototype-pill-input {
-  @include t.use-typography("body-small");
-  border: none;
-  background: none;
-  outline: none;
-  block-size: 100%;
-  inline-size: 100%;
-  flex-grow: 1;
-  margin: var(--sp-xxs) 0;
-  padding: 0 0 0 var(--sp-s);
+.groups {
+  @include deprecated.flexColumn(deprecated.$s-12);
+}
+
+.element-set-options-group-open {
+  @include deprecated.flexColumn;
+}
+
+.extended-options {
+  @include deprecated.flexColumn;
+}
+
+.property-list {
+  list-style: none;
   margin: 0;
-  background-color: var(--color-background-tertiary);
-  color: var(--color-foreground-primary);
   display: grid;
-  inline-size: 100%;
+  row-gap: deprecated.$s-16;
+  margin-block: calc(#{deprecated.$s-16} - #{deprecated.$s-4});
+}
 
-  &:hover {
-    background-color: var(--color-background-quaternary);
-    &:active {
-      background-color: var(--color-background-quaternary);
+.property-row {
+  @extend .attr-row;
+  height: auto;
+  &.big-row {
+    height: 100%;
+  }
+  .interaction-name {
+    @include deprecated.twoLineTextEllipsis;
+    @include deprecated.bodySmallTypography;
+    padding-left: deprecated.$s-4;
+    width: deprecated.$s-92;
+    margin: auto 0;
+    grid-area: name;
+    color: var(--title-foreground-color);
+  }
+  .select-wrapper {
+    display: flex;
+    align-items: center;
+    grid-area: content;
+    .easing-select {
+      width: deprecated.$s-156;
+      padding: 0 deprecated.$s-8;
+      .dropdown-upwards {
+        bottom: deprecated.$s-36;
+        width: deprecated.$s-156;
+        top: unset;
+      }
     }
   }
-
-  &:focus {
-    background-color: var(--color-background-tertiary);
+  .input-element-wrapper {
+    @extend .input-element;
+    @include deprecated.bodySmallTypography;
+    grid-area: content;
+  }
+  .buttons-wrapper {
+    grid-area: content;
+    .right svg {
+      transform: rotate(-90deg);
+    }
+    .left svg {
+      transform: rotate(90deg);
+    }
+    .up svg {
+      transform: rotate(180deg);
+    }
+  }
+  .inputs-wrapper {
+    grid-area: content;
+    @include deprecated.flexRow;
+    .radio-btn {
+      @extend .input-checkbox;
+    }
   }
 }
 
-.prototype-pill-name {
-  @include t.use-typography("body-small");
-  @include textEllipsis;
-  color: var(--color-foreground-primary);
-}
-
-.prototype-pill-description {
-  @include t.use-typography("body-small");
-  @include textEllipsis;
-  color: var(--color-foreground-secondary);
-}
-
-.interaction-row {
-  @include sidebar.option-grid-structure;
-}
-
-.interaction-row-label {
-  grid-column: span 3;
-  display: flex;
-  align-items: center;
-  color: var(--color-foreground-secondary);
-}
-
-.interaction-row-name {
-  @include twoLineTextEllipsis;
-  @include t.use-typography("body-small");
-  color: var(--color-foreground-secondary);
-}
-
-.interaction-row-select {
-  grid-column: span 5;
-}
-
-.interaction-row-checkbox {
-  grid-column: 4 / span 5;
-  min-block-size: $sz-32;
-  display: flex;
-  align-items: center;
-}
-
-.interaction-row-input {
-  grid-column: span 5;
-}
-
-.interaction-row-radio {
-  grid-column: 4 / span 5;
-}
-
-.interaction-row-position {
-  grid-column: 4 / span 5;
+.position-btns-wrapper {
+  grid-area: content;
   display: grid;
   grid-template-areas:
     "topleft top topright"
@@ -225,30 +158,191 @@
     "bottomleft bottom bottomright";
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
-  inline-size: calc($sz-32 * 3);
-  block-size: calc($sz-32 * 3);
-  border-radius: $br-8;
+  width: deprecated.$s-84;
+  height: deprecated.$s-84;
+  border-radius: deprecated.$br-8;
   background-color: var(--color-background-tertiary);
-
-  .center {
+  .center-btn {
     grid-area: center;
   }
-  .top-left {
+  .top-left-btn {
     grid-area: topleft;
   }
-  .top-center {
-    grid-area: top;
-  }
-  .top-right {
+  .top-right-btn {
     grid-area: topright;
   }
-  .bottom-left {
+  .top-center-btn {
+    grid-area: top;
+  }
+  .bottom-left-btn {
     grid-area: bottomleft;
   }
-  .bottom-center {
-    grid-area: bottom;
-  }
-  .bottom-right {
+  .bottom-right-btn {
     grid-area: bottomright;
   }
+  .bottom-center-btn {
+    grid-area: bottom;
+  }
+}
+
+.direction-btn {
+  @extend .button-tertiary;
+  height: deprecated.$s-28;
+  width: deprecated.$s-28;
+
+  &.active {
+    @extend .button-icon-selected;
+  }
+}
+
+.checkbox-option {
+  @extend .input-checkbox;
+  grid-area: content;
+  line-height: 1.2;
+  label {
+    align-items: start;
+  }
+}
+
+.interactions-summary {
+  @extend .asset-element;
+  height: deprecated.$s-44;
+  padding: 0;
+  gap: deprecated.$s-8;
+
+  .remove-btn {
+    @extend .button-tertiary;
+    height: deprecated.$s-32;
+    width: deprecated.$s-28;
+    svg {
+      @extend .button-icon-small;
+    }
+  }
+}
+
+.extend-btn {
+  @extend .button-tertiary;
+  --button-tertiary-border-width: var(--expand-button-icon-border-width);
+  height: 100%;
+  width: deprecated.$s-28;
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+  padding: 0;
+  svg {
+    @extend .button-icon;
+  }
+  position: relative;
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-inline-end: deprecated.$s-1 solid var(--panel-background-color);
+  }
+  &.extended {
+    @extend .button-icon-selected;
+    --button-tertiary-border-width: var(--expand-button-icon-border-width-selected);
+  }
+}
+
+.corner-icon {
+  fill: none;
+  stroke: currentColor;
+  width: deprecated.$s-12;
+  height: deprecated.$s-12;
+}
+
+.flow-element {
+  @include deprecated.flexRow;
+}
+
+.flow-info {
+  display: flex;
+  align-items: center;
+  gap: deprecated.$s-2;
+  border-radius: deprecated.$s-8;
+  background-color: var(--input-details-color);
+  height: deprecated.$s-32;
+  width: 100%;
+  flex-grow: 1;
+}
+
+.flow-name-wrapper {
+  @include deprecated.bodySmallTypography;
+  @include deprecated.focusInput;
+  display: flex;
+  align-items: center;
+  gap: deprecated.$s-4;
+  flex-grow: 1;
+  height: deprecated.$s-32;
+  width: 100%;
+  border-radius: deprecated.$br-8;
+  padding: 0;
+  margin-right: 0;
+  background-color: var(--input-background-color);
+  border: deprecated.$s-1 solid var(--input-border-color);
+  color: var(--input-foreground-color);
+  .start-flow-btn {
+    @include deprecated.buttonStyle;
+    height: deprecated.$s-32;
+    width: deprecated.$s-28;
+    padding: 0 deprecated.$s-2 0 deprecated.$s-8;
+    border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+    background-color: transparent;
+    svg {
+      @extend .button-icon;
+      stroke: var(--icon-foreground);
+      &:hover {
+        stroke: var(--input-foreground-color-active);
+      }
+    }
+  }
+
+  .flow-input {
+    @extend .input-base;
+    @include deprecated.bodySmallTypography;
+    background-color: transparent;
+    height: deprecated.$s-28;
+  }
+
+  .flow-input-wrapper {
+    @include deprecated.bodySmallTypography;
+    display: flex;
+    align-items: center;
+    height: deprecated.$s-28;
+    padding: 0;
+    width: 100%;
+    margin: 0;
+    flex-grow: 1;
+    background-color: transparent;
+    color: var(--input-foreground-color);
+    border-radius: deprecated.$br-8;
+  }
+
+  &:hover {
+    background-color: var(--input-background-color-hover);
+    border: deprecated.$s-1 solid var(--input-border-color-hover);
+    &:active {
+      background-color: var(--input-background-color-hover);
+      .flow-input-wrapper {
+        background-color: var(--input-background-color-hover);
+      }
+    }
+  }
+
+  &:focus,
+  &:focus-within {
+    background-color: var(--input-background-color-focus);
+    border: deprecated.$s-1 solid var(--input-border-color-focus);
+    &:hover {
+      border: deprecated.$s-1 solid var(--input-border-color-focus);
+    }
+  }
+
+  &.editing {
+    background-color: var(--input-background-color-active);
+    border: deprecated.$s-1 solid var(--input-border-color-active);
+  }
 }

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs

@@ -42,10 +42,10 @@
 (defn- dir-icons-refactor
   [val]
   (case val
-    :row            i/grid-row
-    :row-reverse    i/row-reverse
-    :column         i/column
-    :column-reverse i/column-reverse))
+    :row            deprecated-icon/grid-row
+    :row-reverse    deprecated-icon/row-reverse
+    :column         deprecated-icon/column
+    :column-reverse deprecated-icon/column-reverse))
 
 
 (mf/defc numeric-input-wrapper*
@@ -111,63 +111,63 @@
     :align-items
     (if column?
       (case val
-        :start    i/align-items-column-start
-        :end      i/align-items-column-end
-        :center   i/align-items-column-center)
+        :start    deprecated-icon/align-items-column-start
+        :end      deprecated-icon/align-items-column-end
+        :center   deprecated-icon/align-items-column-center)
       (case val
-        :start    i/align-items-row-start
-        :end      i/align-items-row-end
-        :center   i/align-items-row-center))
+        :start    deprecated-icon/align-items-row-start
+        :end      deprecated-icon/align-items-row-end
+        :center   deprecated-icon/align-items-row-center))
 
     :justify-content
     (if column?
       (case val
-        :start         i/justify-content-column-start
-        :end           i/justify-content-column-end
-        :center        i/justify-content-column-center
-        :space-around  i/justify-content-column-around
-        :space-evenly  i/justify-content-column-evenly
-        :space-between i/justify-content-column-between)
+        :start         deprecated-icon/justify-content-column-start
+        :end           deprecated-icon/justify-content-column-end
+        :center        deprecated-icon/justify-content-column-center
+        :space-around  deprecated-icon/justify-content-column-around
+        :space-evenly  deprecated-icon/justify-content-column-evenly
+        :space-between deprecated-icon/justify-content-column-between)
       (case val
-        :start         i/justify-content-row-start
-        :end           i/justify-content-row-end
-        :center        i/justify-content-row-center
-        :space-around  i/justify-content-row-around
-        :space-evenly  i/justify-content-row-evenly
-        :space-between i/justify-content-row-between))
+        :start         deprecated-icon/justify-content-row-start
+        :end           deprecated-icon/justify-content-row-end
+        :center        deprecated-icon/justify-content-row-center
+        :space-around  deprecated-icon/justify-content-row-around
+        :space-evenly  deprecated-icon/justify-content-row-evenly
+        :space-between deprecated-icon/justify-content-row-between))
 
     :align-content
     (if column?
       (case val
-        :start         i/align-content-column-start
-        :end           i/align-content-column-end
-        :center        i/align-content-column-center
-        :space-around  i/align-content-column-around
-        :space-evenly  i/align-content-column-evenly
-        :space-between i/align-content-column-between
+        :start         deprecated-icon/align-content-column-start
+        :end           deprecated-icon/align-content-column-end
+        :center        deprecated-icon/align-content-column-center
+        :space-around  deprecated-icon/align-content-column-around
+        :space-evenly  deprecated-icon/align-content-column-evenly
+        :space-between deprecated-icon/align-content-column-between
         :stretch nil)
 
       (case val
-        :start         i/align-content-row-start
-        :end           i/align-content-row-end
-        :center        i/align-content-row-center
-        :space-around  i/align-content-row-around
-        :space-evenly  i/align-content-row-evenly
-        :space-between i/align-content-row-between
+        :start         deprecated-icon/align-content-row-start
+        :end           deprecated-icon/align-content-row-end
+        :center        deprecated-icon/align-content-row-center
+        :space-around  deprecated-icon/align-content-row-around
+        :space-evenly  deprecated-icon/align-content-row-evenly
+        :space-between deprecated-icon/align-content-row-between
         :stretch nil))
 
     :align-self
     (if column?
       (case val
-        :auto     i/remove
-        :start    i/align-self-row-left
-        :end      i/align-self-row-right
-        :center   i/align-self-row-center)
+        :auto     deprecated-icon/remove-icon
+        :start    deprecated-icon/align-self-row-left
+        :end      deprecated-icon/align-self-row-right
+        :center   deprecated-icon/align-self-row-center)
       (case val
-        :auto     i/remove
-        :start    i/align-self-column-top
-        :end      i/align-self-column-bottom
-        :center   i/align-self-column-center))))
+        :auto     deprecated-icon/remove-icon
+        :start    deprecated-icon/align-self-column-top
+        :end      deprecated-icon/align-self-column-bottom
+        :center   deprecated-icon/align-self-column-center))))
 
 (defn get-layout-grid-icon
   [type val ^boolean column?]
@@ -175,32 +175,32 @@
     :align-items
     (if column?
       (case val
-        :auto     i/remove
-        :start    i/align-self-row-left
-        :end      i/align-self-row-right
-        :center   i/align-self-row-center)
+        :auto     deprecated-icon/remove-icon
+        :start    deprecated-icon/align-self-row-left
+        :end      deprecated-icon/align-self-row-right
+        :center   deprecated-icon/align-self-row-center)
       (case val
-        :auto     i/remove
-        :start    i/align-self-column-top
-        :end      i/align-self-column-bottom
-        :center   i/align-self-column-center))
+        :auto     deprecated-icon/remove-icon
+        :start    deprecated-icon/align-self-column-top
+        :end      deprecated-icon/align-self-column-bottom
+        :center   deprecated-icon/align-self-column-center))
 
     :justify-items
     (if (not column?)
       (case val
-        :start         i/align-content-column-start
-        :center        i/align-content-column-center
-        :end           i/align-content-column-end
-        :space-around  i/align-content-column-around
-        :space-between i/align-content-column-between
-        :stretch       i/align-content-column-stretch)
+        :start         deprecated-icon/align-content-column-start
+        :center        deprecated-icon/align-content-column-center
+        :end           deprecated-icon/align-content-column-end
+        :space-around  deprecated-icon/align-content-column-around
+        :space-between deprecated-icon/align-content-column-between
+        :stretch       deprecated-icon/align-content-column-stretch)
       (case val
-        :start         i/align-content-row-start
-        :center        i/align-content-row-center
-        :end           i/align-content-row-end
-        :space-around  i/align-content-row-around
-        :space-between i/align-content-row-between
-        :stretch       i/align-content-row-stretch))))
+        :start         deprecated-icon/align-content-row-start
+        :center        deprecated-icon/align-content-row-center
+        :end           deprecated-icon/align-content-row-end
+        :space-around  deprecated-icon/align-content-row-around
+        :space-between deprecated-icon/align-content-row-between
+        :stretch       deprecated-icon/align-content-row-stretch))))
 
 (mf/defc direction-row-flex
   {::mf/props :obj

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs

@@ -455,10 +455,10 @@
                            :name "frame-orientation"
                            :wide true
                            :class (stl/css :radio-buttons)}
-         [:& radio-button {:icon i/size-vertical
+         [:& radio-button {:icon deprecated-icon/size-vertical
                            :value "vert"
                            :id "size-vertical"}]
-         [:& radio-button {:icon i/size-horizontal
+         [:& radio-button {:icon deprecated-icon/size-horizontal
                            :value "horiz"
                            :id "size-horizontal"}]]
         [:> icon-button*

frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs

@@ -53,19 +53,19 @@
       [:& radio-button {:value "left"
                         :id "text-align-left"
                         :title (tr "workspace.options.text-options.text-align-left")
-                        :icon i/text-align-left}]
+                        :icon deprecated-icon/text-align-left}]
       [:& radio-button {:value "center"
                         :id "text-align-center"
                         :title (tr "workspace.options.text-options.text-align-center")
-                        :icon i/text-align-center}]
+                        :icon deprecated-icon/text-align-center}]
       [:& radio-button {:value "right"
                         :id "text-align-right"
                         :title (tr "workspace.options.text-options.text-align-right")
-                        :icon i/text-align-right}]
+                        :icon deprecated-icon/text-align-right}]
       [:& radio-button {:value "justify"
                         :id "text-align-justify"
                         :title (tr "workspace.options.text-options.text-align-justify")
-                        :icon i/text-justify}]]]))
+                        :icon deprecated-icon/text-justify}]]]))
 
 (mf/defc text-direction-options
   [{:keys [values on-change on-blur] :as props}]
@@ -88,12 +88,12 @@
                         :type "checkbox"
                         :id "ltr-text-direction"
                         :title (tr "workspace.options.text-options.direction-ltr")
-                        :icon i/text-ltr}]
+                        :icon deprecated-icon/text-ltr}]
       [:& radio-button {:value "rtl"
                         :type "checkbox"
                         :id "rtl-text-direction"
                         :title (tr "workspace.options.text-options.direction-rtl")
-                        :icon i/text-rtl}]]]))
+                        :icon deprecated-icon/text-rtl}]]]))
 
 (mf/defc vertical-align
   [{:keys [values on-change on-blur] :as props}]
@@ -113,15 +113,15 @@
       [:& radio-button {:value "top"
                         :id "vertical-text-align-top"
                         :title (tr "workspace.options.text-options.align-top")
-                        :icon i/text-top}]
+                        :icon deprecated-icon/text-top}]
       [:& radio-button {:value "center"
                         :id "vertical-text-align-center"
                         :title (tr "workspace.options.text-options.align-middle")
-                        :icon i/text-middle}]
+                        :icon deprecated-icon/text-middle}]
       [:& radio-button {:value "bottom"
                         :id "vertical-text-align-bottom"
                         :title (tr "workspace.options.text-options.align-bottom")
-                        :icon i/text-bottom}]]]))
+                        :icon deprecated-icon/text-bottom}]]]))
 
 (mf/defc grow-options
   [{:keys [ids values on-blur] :as props}]
@@ -150,15 +150,15 @@
       [:& radio-button {:value "fixed"
                         :id "text-fixed-grow"
                         :title (tr "workspace.options.text-options.grow-fixed")
-                        :icon i/text-fixed}]
+                        :icon deprecated-icon/text-fixed}]
       [:& radio-button {:value "auto-width"
                         :id "text-auto-width-grow"
                         :title (tr "workspace.options.text-options.grow-auto-width")
-                        :icon i/text-auto-width}]
+                        :icon deprecated-icon/text-auto-width}]
       [:& radio-button {:value "auto-height"
                         :id "text-auto-height-grow"
                         :title (tr "workspace.options.text-options.grow-auto-height")
-                        :icon i/text-auto-height}]]]))
+                        :icon deprecated-icon/text-auto-height}]]]))
 
 (mf/defc text-decoration-options
   [{:keys [values on-change on-blur] :as props}]
@@ -180,12 +180,12 @@
                         :type "checkbox"
                         :id "underline-text-decoration"
                         :title (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline))
-                        :icon i/text-underlined}]
+                        :icon deprecated-icon/text-underlined}]
       [:& radio-button {:value "line-through"
                         :type "checkbox"
                         :id "line-through-text-decoration"
                         :title (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through))
-                        :icon i/text-stroked}]]]))
+                        :icon deprecated-icon/text-stroked}]]]))
 
 (mf/defc text-menu
   {::mf/wrap [mf/memo]}

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -26,7 +26,6 @@
    [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.context :as ctx]
-   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -419,17 +418,17 @@
      [:& radio-buttons {:selected text-transform
                         :on-change handle-change
                         :name "text-transform"}
-      [:& radio-button {:icon i/text-uppercase
+      [:& radio-button {:icon deprecated-icon/text-uppercase
                         :type "checkbox"
                         :title (tr "inspect.attributes.typography.text-transform.uppercase")
                         :value "uppercase"
                         :id "text-transform-uppercase"}]
-      [:& radio-button {:icon i/text-mixed
+      [:& radio-button {:icon deprecated-icon/text-mixed
                         :type "checkbox"
                         :value "capitalize"
                         :title (tr "inspect.attributes.typography.text-transform.capitalize")
                         :id "text-transform-capitalize"}]
-      [:& radio-button {:icon i/text-lowercase
+      [:& radio-button {:icon deprecated-icon/text-lowercase
                         :type "checkbox"
                         :title (tr "inspect.attributes.typography.text-transform.lowercase")
                         :value "lowercase"