From 46f3fa2a4488add9d7f10907d3906426b5357d8f Mon Sep 17 00:00:00 2001
From: Kyle MacDonald <kyle@clerk.dev>
Date: Wed, 27 May 2026 11:33:33 -0400
Subject: [PATCH 1/7] chore(js): add react-grab to clerk-js sandbox

Loads react-grab from unpkg in the sandbox template so component
locations can be inspected during local development. The sandbox has
no production build, so the script is intrinsically dev-only.
---
 .changeset/old-months-grow.md           |   2 +
 packages/clerk-js/package.json          |   1 +
 packages/clerk-js/sandbox/template.html |   5 +
 pnpm-lock.yaml                          | 145 +++++++++++++++++++++++-
 4 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/old-months-grow.md

diff --git a/.changeset/old-months-grow.md b/.changeset/old-months-grow.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/old-months-grow.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json
index 6f068bc7173..67243688542 100644
--- a/packages/clerk-js/package.json
+++ b/packages/clerk-js/package.json
@@ -114,6 +114,7 @@
     "bundlewatch": "^0.4.2",
     "jsdom": "26.1.0",
     "minimatch": "^10.2.5",
+    "react-grab": "^0.1.37",
     "webpack-merge": "^5.10.0"
   },
   "engines": {
diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
index 7e4f449be2b..30867025578 100644
--- a/packages/clerk-js/sandbox/template.html
+++ b/packages/clerk-js/sandbox/template.html
@@ -36,6 +36,11 @@
         }
       })();
     </script>
+    <!-- React Grab (development-only: this template is only used by `pnpm dev:sandbox`) -->
+    <script
+      src="//unpkg.com/react-grab/dist/index.global.js"
+      crossorigin="anonymous"
+    ></script>
     <script>
       class NavLink extends HTMLElement {
         connectedCallback() {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ce9136a8c0d..58c81aaa308 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -507,6 +507,9 @@ importers:
       minimatch:
         specifier: ^10.2.5
         version: 10.2.5
+      react-grab:
+        specifier: ^0.1.37
+        version: 0.1.37(react@18.3.1)
       webpack-merge:
         specifier: ^5.10.0
         version: 5.10.0
@@ -2727,7 +2730,7 @@ packages:
 
   '@expo/bunyan@4.0.1':
     resolution: {integrity: sha512-+Lla7nYSiHZirgK+U/uYzsLv/X+HaJienbD5AKX1UQZHYfWaP+9uuQluRB4GrEVWF0GZ7vEVp/jzaOT9k/SQlg==}
-    engines: {node: '>=0.10.0'}
+    engines: {'0': node >=0.10.0}
 
   '@expo/cli@0.22.28':
     resolution: {integrity: sha512-lvt72KNitGuixYD2l3SZmRKVu2G4zJpmg5V7WfUBNpmUU5oODBw/6qmiJ6kSLAlfDozscUk+BBGknBBzxUrwrA==}
@@ -4213,6 +4216,10 @@ packages:
   '@quansync/fs@0.1.5':
     resolution: {integrity: sha512-lNS9hL2aS2NZgNW7BBj+6EBl4rOf8l+tQ0eRY6JWCI8jI2kc53gSoqbjojU0OnAWhzoXiOjFyGsHcDGePB3lhA==}
 
+  '@react-grab/cli@0.1.37':
+    resolution: {integrity: sha512-1ln28VkVHUbd5qy+ccXG68voWc0mgZMhBnwG0umxfD+wbkXUcvRzVrLjSqao7N8hCrDqp+Pt5j9Tsqef+9yQQQ==}
+    hasBin: true
+
   '@react-native-async-storage/async-storage@1.24.0':
     resolution: {integrity: sha512-W4/vbwUOYOjco0x3toB8QCr7EjIP6nE9G7o8PMguvvjYT5Awg09lyV4enACRx4s++PPulBiBSjL0KTFx2u0Z/g==}
     peerDependencies:
@@ -6638,6 +6645,11 @@ packages:
   bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
+  bippy@0.5.41:
+    resolution: {integrity: sha512-jCP2pXXLhXqPrAN+iSEFZmLI4uUM4fjSqajh0K+TmM062VehfDT3ZJNkrTGyN701Z5XMejs9qAudSqkMGhSMKg==}
+    peerDependencies:
+      react: 18.3.1
+
   birpc@2.7.0:
     resolution: {integrity: sha512-tub/wFGH49vNCm0xraykcY3TcRgX/3JsALYq/Lwrtti+bTyFHkCUAWF5wgYoie8P41wYwig2mIKiqoocr1EkEQ==}
 
@@ -6982,6 +6994,10 @@ packages:
     resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
   cli-highlight@2.1.11:
     resolution: {integrity: sha512-9KDcoEVwyUXrjcJNvHD0NFc/hiwe/WPVYIleQh2O1N2Zro5gWJZ/K+3DGn8w8P/F6FxOgzyC5bxDyHIgCSPhGg==}
     engines: {node: '>=8.0.0', npm: '>=5.0.0'}
@@ -6991,6 +7007,10 @@ packages:
     resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
     engines: {node: '>=6'}
 
+  cli-spinners@3.4.0:
+    resolution: {integrity: sha512-bXfOC4QcT1tKXGorxL3wbJm6XJPDqEnij2gQ2m7ESQuE+/z9YFIWnl/5RpTiKWbMq3EVKR4fRLJGn6DVfu0mpw==}
+    engines: {node: '>=18.20'}
+
   cli-table3@0.6.1:
     resolution: {integrity: sha512-w0q/enDHhPLq44ovMGdQeeDLvwxwavsJX7oQGYt/LrBlYsyaxyDnp6z3QzFut/6kLLKnlcUVJLrpB7KBfgG/RA==}
     engines: {node: 10.* || >= 12.*}
@@ -8876,6 +8896,10 @@ packages:
     resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
     engines: {node: '>=18'}
 
+  get-east-asian-width@1.6.0:
+    resolution: {integrity: sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==}
+    engines: {node: '>=18'}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
@@ -9593,6 +9617,10 @@ packages:
     resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
     engines: {node: '>=8'}
 
+  is-interactive@2.0.0:
+    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
+    engines: {node: '>=12'}
+
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -9979,6 +10007,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jsonc-parser@3.3.1:
+    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
+
   jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
 
@@ -10346,6 +10377,10 @@ packages:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
     engines: {node: '>=10'}
 
+  log-symbols@7.0.1:
+    resolution: {integrity: sha512-ja1E3yCr9i/0hmBVaM0bfwDjnGy8I/s6PP4DFp+yP+a+mrHO4Rm7DtmnqROTUkHIkqffC84YY7AeqX6oFk0WFg==}
+    engines: {node: '>=18'}
+
   log-update@4.0.0:
     resolution: {integrity: sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==}
     engines: {node: '>=10'}
@@ -10830,6 +10865,10 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -11281,6 +11320,10 @@ packages:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
 
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
   oniguruma-parser@0.12.1:
     resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
 
@@ -11323,6 +11366,10 @@ packages:
     resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
     engines: {node: '>=10'}
 
+  ora@9.4.0:
+    resolution: {integrity: sha512-84cglkRILFxdtA8hAvLNdMrtBpPNBTrQ9/ulg0FA7xLMnD6mifv+enAIeRmvtv+WgdCE+LPGOfQmtJRrVaIVhQ==}
+    engines: {node: '>=20'}
+
   ospath@1.2.2:
     resolution: {integrity: sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==}
 
@@ -12215,6 +12262,15 @@ packages:
     peerDependencies:
       react: 18.3.1
 
+  react-grab@0.1.37:
+    resolution: {integrity: sha512-XVAc/qPyxsDT8Putu9UnP7iVHmAORMzvaN/3GDTOfbuLIRXWdOt7vebPOzM9RVTVUjucXv0135JI++kSVPSfYg==}
+    hasBin: true
+    peerDependencies:
+      react: 18.3.1
+    peerDependenciesMeta:
+      react:
+        optional: true
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -12487,6 +12543,10 @@ packages:
     resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
   ret@0.5.0:
     resolution: {integrity: sha512-I1XxrZSQ+oErkRR4jYbAyEEu2I0avBvvMM5JN+6EBprOGRCs63ENqZ3vjavq8fBw2+62G5LF5XelKwuJpcvcxw==}
     engines: {node: '>=10'}
@@ -12896,6 +12956,10 @@ packages:
     resolution: {integrity: sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==}
     engines: {node: '>= 18'}
 
+  smol-toml@1.6.1:
+    resolution: {integrity: sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==}
+    engines: {node: '>= 18'}
+
   snake-case@3.0.4:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
 
@@ -13046,6 +13110,10 @@ packages:
   std-env@4.1.0:
     resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
+  stdin-discarder@0.3.2:
+    resolution: {integrity: sha512-eCPu1qRxPVkl5605OTWF8Wz40b4Mf45NY5LQmVPQ599knfs5QhASUm9GbJ5BDMDOXgrnh0wyEdvzmL//YMlw0A==}
+    engines: {node: '>=18'}
+
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
@@ -13090,6 +13158,10 @@ packages:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
 
+  string-width@8.2.1:
+    resolution: {integrity: sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==}
+    engines: {node: '>=20'}
+
   string.prototype.includes@2.0.1:
     resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
     engines: {node: '>= 0.4'}
@@ -18518,6 +18590,18 @@ snapshots:
     dependencies:
       quansync: 0.2.11
 
+  '@react-grab/cli@0.1.37':
+    dependencies:
+      commander: 14.0.3
+      ignore: 7.0.5
+      jsonc-parser: 3.3.1
+      ora: 9.4.0
+      package-manager-detector: 1.6.0
+      picocolors: 1.1.1
+      prompts: 2.4.2
+      smol-toml: 1.6.1
+      tinyexec: 1.1.2
+
   '@react-native-async-storage/async-storage@1.24.0(react-native@0.85.2(@babel/core@7.29.0)(@react-native-community/cli@12.3.7(bufferutil@4.1.0)(utf-8-validate@5.0.10))(@types/react@18.3.28)(bufferutil@4.1.0)(react@18.3.1)(utf-8-validate@5.0.10))':
     dependencies:
       merge-options: 3.0.4
@@ -21744,6 +21828,10 @@ snapshots:
     dependencies:
       file-uri-to-path: 1.0.0
 
+  bippy@0.5.41(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   birpc@2.7.0: {}
 
   birpc@4.0.0: {}
@@ -22165,6 +22253,10 @@ snapshots:
     dependencies:
       restore-cursor: 4.0.0
 
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
   cli-highlight@2.1.11:
     dependencies:
       chalk: 4.1.2
@@ -22176,6 +22268,8 @@ snapshots:
 
   cli-spinners@2.9.2: {}
 
+  cli-spinners@3.4.0: {}
+
   cli-table3@0.6.1:
     dependencies:
       string-width: 4.2.3
@@ -24467,6 +24561,8 @@ snapshots:
 
   get-east-asian-width@1.4.0: {}
 
+  get-east-asian-width@1.6.0: {}
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -25256,6 +25352,8 @@ snapshots:
   is-interactive@1.0.0:
     optional: true
 
+  is-interactive@2.0.0: {}
+
   is-map@2.0.3: {}
 
   is-module@1.0.0: {}
@@ -25683,6 +25781,8 @@ snapshots:
 
   json5@2.2.3: {}
 
+  jsonc-parser@3.3.1: {}
+
   jsonfile@4.0.0:
     optionalDependencies:
       graceful-fs: 4.2.11
@@ -26032,6 +26132,11 @@ snapshots:
       chalk: 4.1.2
       is-unicode-supported: 0.1.0
 
+  log-symbols@7.0.1:
+    dependencies:
+      is-unicode-supported: 2.1.0
+      yoctocolors: 2.1.2
+
   log-update@4.0.0:
     dependencies:
       ansi-escapes: 4.3.2
@@ -26930,6 +27035,8 @@ snapshots:
 
   mimic-fn@4.0.0: {}
 
+  mimic-function@5.0.1: {}
+
   min-indent@1.0.1: {}
 
   minimalistic-assert@1.0.1: {}
@@ -27635,6 +27742,10 @@ snapshots:
     dependencies:
       mimic-fn: 4.0.0
 
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
   oniguruma-parser@0.12.1: {}
 
   oniguruma-to-es@4.3.4:
@@ -27708,6 +27819,17 @@ snapshots:
       wcwidth: 1.0.1
     optional: true
 
+  ora@9.4.0:
+    dependencies:
+      chalk: 5.6.2
+      cli-cursor: 5.0.0
+      cli-spinners: 3.4.0
+      is-interactive: 2.0.0
+      is-unicode-supported: 2.1.0
+      log-symbols: 7.0.1
+      stdin-discarder: 0.3.2
+      string-width: 8.2.1
+
   ospath@1.2.2: {}
 
   outdent@0.5.0: {}
@@ -28548,6 +28670,13 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-grab@0.1.37(react@18.3.1):
+    dependencies:
+      '@react-grab/cli': 0.1.37
+      bippy: 0.5.41(react@18.3.1)
+    optionalDependencies:
+      react: 18.3.1
+
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
@@ -28926,6 +29055,11 @@ snapshots:
       onetime: 5.1.2
       signal-exit: 3.0.7
 
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
   ret@0.5.0: {}
 
   retext-latin@4.0.0:
@@ -29491,6 +29625,8 @@ snapshots:
 
   smol-toml@1.6.0: {}
 
+  smol-toml@1.6.1: {}
+
   snake-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
@@ -29671,6 +29807,8 @@ snapshots:
 
   std-env@4.1.0: {}
 
+  stdin-discarder@0.3.2: {}
+
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -29719,6 +29857,11 @@ snapshots:
       get-east-asian-width: 1.4.0
       strip-ansi: 7.1.2
 
+  string-width@8.2.1:
+    dependencies:
+      get-east-asian-width: 1.6.0
+      strip-ansi: 7.1.2
+
   string.prototype.includes@2.0.1:
     dependencies:
       call-bind: 1.0.8

From 44e504c930cd3e34936c3c7641be3bb8ff85291c Mon Sep 17 00:00:00 2001
From: Kyle MacDonald <kyle@clerk.dev>
Date: Wed, 27 May 2026 11:37:43 -0400
Subject: [PATCH 2/7] chore(repo): dedupe lockfile after react-grab install

---
 pnpm-lock.yaml | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 58c81aaa308..aaa33b09699 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2730,7 +2730,7 @@ packages:
 
   '@expo/bunyan@4.0.1':
     resolution: {integrity: sha512-+Lla7nYSiHZirgK+U/uYzsLv/X+HaJienbD5AKX1UQZHYfWaP+9uuQluRB4GrEVWF0GZ7vEVp/jzaOT9k/SQlg==}
-    engines: {'0': node >=0.10.0}
+    engines: {node: '>=0.10.0'}
 
   '@expo/cli@0.22.28':
     resolution: {integrity: sha512-lvt72KNitGuixYD2l3SZmRKVu2G4zJpmg5V7WfUBNpmUU5oODBw/6qmiJ6kSLAlfDozscUk+BBGknBBzxUrwrA==}
@@ -8892,10 +8892,6 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
-  get-east-asian-width@1.4.0:
-    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
-    engines: {node: '>=18'}
-
   get-east-asian-width@1.6.0:
     resolution: {integrity: sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==}
     engines: {node: '>=18'}
@@ -12952,10 +12948,6 @@ packages:
   smob@1.5.0:
     resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
 
-  smol-toml@1.6.0:
-    resolution: {integrity: sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==}
-    engines: {node: '>= 18'}
-
   smol-toml@1.6.1:
     resolution: {integrity: sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==}
     engines: {node: '>= 18'}
@@ -14921,7 +14913,7 @@ snapshots:
       remark-smartypants: 3.0.2
       retext-smartypants: 6.2.0
       shiki: 4.0.2
-      smol-toml: 1.6.0
+      smol-toml: 1.6.1
       unified: 11.0.5
       unist-util-remove-position: 5.0.0
       unist-util-visit: 5.1.0
@@ -21545,7 +21537,7 @@ snapshots:
       rehype: 13.0.2
       semver: 7.7.4
       shiki: 4.0.2
-      smol-toml: 1.6.0
+      smol-toml: 1.6.1
       svgo: 4.0.1
       tinyclip: 0.1.12
       tinyexec: 1.1.2
@@ -24559,8 +24551,6 @@ snapshots:
 
   get-caller-file@2.0.5: {}
 
-  get-east-asian-width@1.4.0: {}
-
   get-east-asian-width@1.6.0: {}
 
   get-intrinsic@1.3.0:
@@ -29623,8 +29613,6 @@ snapshots:
 
   smob@1.5.0: {}
 
-  smol-toml@1.6.0: {}
-
   smol-toml@1.6.1: {}
 
   snake-case@3.0.4:
@@ -29854,7 +29842,7 @@ snapshots:
   string-width@7.2.0:
     dependencies:
       emoji-regex: 10.6.0
-      get-east-asian-width: 1.4.0
+      get-east-asian-width: 1.6.0
       strip-ansi: 7.1.2
 
   string-width@8.2.1:

From 3fcb844eb49fc3703c5025a3fd11a1b8d18549e8 Mon Sep 17 00:00:00 2001
From: Kyle MacDonald <kyle@clerk.dev>
Date: Wed, 27 May 2026 13:00:11 -0400
Subject: [PATCH 3/7] chore(js): drop react-grab devDep, load only via unpkg

The sandbox loads react-grab as a global script from unpkg in
template.html, so the npm package isn't imported anywhere. Removing
the devDependency also drops its transitive tree (bippy, ora, etc.)
from the lockfile.
---
 packages/clerk-js/package.json |   1 -
 pnpm-lock.yaml                 | 133 +--------------------------------
 2 files changed, 1 insertion(+), 133 deletions(-)

diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json
index 67243688542..6f068bc7173 100644
--- a/packages/clerk-js/package.json
+++ b/packages/clerk-js/package.json
@@ -114,7 +114,6 @@
     "bundlewatch": "^0.4.2",
     "jsdom": "26.1.0",
     "minimatch": "^10.2.5",
-    "react-grab": "^0.1.37",
     "webpack-merge": "^5.10.0"
   },
   "engines": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aaa33b09699..9efbb55b55f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -507,9 +507,6 @@ importers:
       minimatch:
         specifier: ^10.2.5
         version: 10.2.5
-      react-grab:
-        specifier: ^0.1.37
-        version: 0.1.37(react@18.3.1)
       webpack-merge:
         specifier: ^5.10.0
         version: 5.10.0
@@ -2730,7 +2727,7 @@ packages:
 
   '@expo/bunyan@4.0.1':
     resolution: {integrity: sha512-+Lla7nYSiHZirgK+U/uYzsLv/X+HaJienbD5AKX1UQZHYfWaP+9uuQluRB4GrEVWF0GZ7vEVp/jzaOT9k/SQlg==}
-    engines: {node: '>=0.10.0'}
+    engines: {'0': node >=0.10.0}
 
   '@expo/cli@0.22.28':
     resolution: {integrity: sha512-lvt72KNitGuixYD2l3SZmRKVu2G4zJpmg5V7WfUBNpmUU5oODBw/6qmiJ6kSLAlfDozscUk+BBGknBBzxUrwrA==}
@@ -4216,10 +4213,6 @@ packages:
   '@quansync/fs@0.1.5':
     resolution: {integrity: sha512-lNS9hL2aS2NZgNW7BBj+6EBl4rOf8l+tQ0eRY6JWCI8jI2kc53gSoqbjojU0OnAWhzoXiOjFyGsHcDGePB3lhA==}
 
-  '@react-grab/cli@0.1.37':
-    resolution: {integrity: sha512-1ln28VkVHUbd5qy+ccXG68voWc0mgZMhBnwG0umxfD+wbkXUcvRzVrLjSqao7N8hCrDqp+Pt5j9Tsqef+9yQQQ==}
-    hasBin: true
-
   '@react-native-async-storage/async-storage@1.24.0':
     resolution: {integrity: sha512-W4/vbwUOYOjco0x3toB8QCr7EjIP6nE9G7o8PMguvvjYT5Awg09lyV4enACRx4s++PPulBiBSjL0KTFx2u0Z/g==}
     peerDependencies:
@@ -6645,11 +6638,6 @@ packages:
   bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
-  bippy@0.5.41:
-    resolution: {integrity: sha512-jCP2pXXLhXqPrAN+iSEFZmLI4uUM4fjSqajh0K+TmM062VehfDT3ZJNkrTGyN701Z5XMejs9qAudSqkMGhSMKg==}
-    peerDependencies:
-      react: 18.3.1
-
   birpc@2.7.0:
     resolution: {integrity: sha512-tub/wFGH49vNCm0xraykcY3TcRgX/3JsALYq/Lwrtti+bTyFHkCUAWF5wgYoie8P41wYwig2mIKiqoocr1EkEQ==}
 
@@ -6994,10 +6982,6 @@ packages:
     resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  cli-cursor@5.0.0:
-    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
-    engines: {node: '>=18'}
-
   cli-highlight@2.1.11:
     resolution: {integrity: sha512-9KDcoEVwyUXrjcJNvHD0NFc/hiwe/WPVYIleQh2O1N2Zro5gWJZ/K+3DGn8w8P/F6FxOgzyC5bxDyHIgCSPhGg==}
     engines: {node: '>=8.0.0', npm: '>=5.0.0'}
@@ -7007,10 +6991,6 @@ packages:
     resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
     engines: {node: '>=6'}
 
-  cli-spinners@3.4.0:
-    resolution: {integrity: sha512-bXfOC4QcT1tKXGorxL3wbJm6XJPDqEnij2gQ2m7ESQuE+/z9YFIWnl/5RpTiKWbMq3EVKR4fRLJGn6DVfu0mpw==}
-    engines: {node: '>=18.20'}
-
   cli-table3@0.6.1:
     resolution: {integrity: sha512-w0q/enDHhPLq44ovMGdQeeDLvwxwavsJX7oQGYt/LrBlYsyaxyDnp6z3QzFut/6kLLKnlcUVJLrpB7KBfgG/RA==}
     engines: {node: 10.* || >= 12.*}
@@ -9613,10 +9593,6 @@ packages:
     resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
     engines: {node: '>=8'}
 
-  is-interactive@2.0.0:
-    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
-    engines: {node: '>=12'}
-
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -10003,9 +9979,6 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  jsonc-parser@3.3.1:
-    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
-
   jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
 
@@ -10373,10 +10346,6 @@ packages:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
     engines: {node: '>=10'}
 
-  log-symbols@7.0.1:
-    resolution: {integrity: sha512-ja1E3yCr9i/0hmBVaM0bfwDjnGy8I/s6PP4DFp+yP+a+mrHO4Rm7DtmnqROTUkHIkqffC84YY7AeqX6oFk0WFg==}
-    engines: {node: '>=18'}
-
   log-update@4.0.0:
     resolution: {integrity: sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==}
     engines: {node: '>=10'}
@@ -10861,10 +10830,6 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
-  mimic-function@5.0.1:
-    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
-    engines: {node: '>=18'}
-
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -11316,10 +11281,6 @@ packages:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
 
-  onetime@7.0.0:
-    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
-    engines: {node: '>=18'}
-
   oniguruma-parser@0.12.1:
     resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
 
@@ -11362,10 +11323,6 @@ packages:
     resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
     engines: {node: '>=10'}
 
-  ora@9.4.0:
-    resolution: {integrity: sha512-84cglkRILFxdtA8hAvLNdMrtBpPNBTrQ9/ulg0FA7xLMnD6mifv+enAIeRmvtv+WgdCE+LPGOfQmtJRrVaIVhQ==}
-    engines: {node: '>=20'}
-
   ospath@1.2.2:
     resolution: {integrity: sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==}
 
@@ -12258,15 +12215,6 @@ packages:
     peerDependencies:
       react: 18.3.1
 
-  react-grab@0.1.37:
-    resolution: {integrity: sha512-XVAc/qPyxsDT8Putu9UnP7iVHmAORMzvaN/3GDTOfbuLIRXWdOt7vebPOzM9RVTVUjucXv0135JI++kSVPSfYg==}
-    hasBin: true
-    peerDependencies:
-      react: 18.3.1
-    peerDependenciesMeta:
-      react:
-        optional: true
-
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -12539,10 +12487,6 @@ packages:
     resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  restore-cursor@5.1.0:
-    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
-    engines: {node: '>=18'}
-
   ret@0.5.0:
     resolution: {integrity: sha512-I1XxrZSQ+oErkRR4jYbAyEEu2I0avBvvMM5JN+6EBprOGRCs63ENqZ3vjavq8fBw2+62G5LF5XelKwuJpcvcxw==}
     engines: {node: '>=10'}
@@ -13102,10 +13046,6 @@ packages:
   std-env@4.1.0:
     resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
-  stdin-discarder@0.3.2:
-    resolution: {integrity: sha512-eCPu1qRxPVkl5605OTWF8Wz40b4Mf45NY5LQmVPQ599knfs5QhASUm9GbJ5BDMDOXgrnh0wyEdvzmL//YMlw0A==}
-    engines: {node: '>=18'}
-
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
@@ -13150,10 +13090,6 @@ packages:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
 
-  string-width@8.2.1:
-    resolution: {integrity: sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==}
-    engines: {node: '>=20'}
-
   string.prototype.includes@2.0.1:
     resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
     engines: {node: '>= 0.4'}
@@ -18582,18 +18518,6 @@ snapshots:
     dependencies:
       quansync: 0.2.11
 
-  '@react-grab/cli@0.1.37':
-    dependencies:
-      commander: 14.0.3
-      ignore: 7.0.5
-      jsonc-parser: 3.3.1
-      ora: 9.4.0
-      package-manager-detector: 1.6.0
-      picocolors: 1.1.1
-      prompts: 2.4.2
-      smol-toml: 1.6.1
-      tinyexec: 1.1.2
-
   '@react-native-async-storage/async-storage@1.24.0(react-native@0.85.2(@babel/core@7.29.0)(@react-native-community/cli@12.3.7(bufferutil@4.1.0)(utf-8-validate@5.0.10))(@types/react@18.3.28)(bufferutil@4.1.0)(react@18.3.1)(utf-8-validate@5.0.10))':
     dependencies:
       merge-options: 3.0.4
@@ -21820,10 +21744,6 @@ snapshots:
     dependencies:
       file-uri-to-path: 1.0.0
 
-  bippy@0.5.41(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-
   birpc@2.7.0: {}
 
   birpc@4.0.0: {}
@@ -22245,10 +22165,6 @@ snapshots:
     dependencies:
       restore-cursor: 4.0.0
 
-  cli-cursor@5.0.0:
-    dependencies:
-      restore-cursor: 5.1.0
-
   cli-highlight@2.1.11:
     dependencies:
       chalk: 4.1.2
@@ -22260,8 +22176,6 @@ snapshots:
 
   cli-spinners@2.9.2: {}
 
-  cli-spinners@3.4.0: {}
-
   cli-table3@0.6.1:
     dependencies:
       string-width: 4.2.3
@@ -25342,8 +25256,6 @@ snapshots:
   is-interactive@1.0.0:
     optional: true
 
-  is-interactive@2.0.0: {}
-
   is-map@2.0.3: {}
 
   is-module@1.0.0: {}
@@ -25771,8 +25683,6 @@ snapshots:
 
   json5@2.2.3: {}
 
-  jsonc-parser@3.3.1: {}
-
   jsonfile@4.0.0:
     optionalDependencies:
       graceful-fs: 4.2.11
@@ -26122,11 +26032,6 @@ snapshots:
       chalk: 4.1.2
       is-unicode-supported: 0.1.0
 
-  log-symbols@7.0.1:
-    dependencies:
-      is-unicode-supported: 2.1.0
-      yoctocolors: 2.1.2
-
   log-update@4.0.0:
     dependencies:
       ansi-escapes: 4.3.2
@@ -27025,8 +26930,6 @@ snapshots:
 
   mimic-fn@4.0.0: {}
 
-  mimic-function@5.0.1: {}
-
   min-indent@1.0.1: {}
 
   minimalistic-assert@1.0.1: {}
@@ -27732,10 +27635,6 @@ snapshots:
     dependencies:
       mimic-fn: 4.0.0
 
-  onetime@7.0.0:
-    dependencies:
-      mimic-function: 5.0.1
-
   oniguruma-parser@0.12.1: {}
 
   oniguruma-to-es@4.3.4:
@@ -27809,17 +27708,6 @@ snapshots:
       wcwidth: 1.0.1
     optional: true
 
-  ora@9.4.0:
-    dependencies:
-      chalk: 5.6.2
-      cli-cursor: 5.0.0
-      cli-spinners: 3.4.0
-      is-interactive: 2.0.0
-      is-unicode-supported: 2.1.0
-      log-symbols: 7.0.1
-      stdin-discarder: 0.3.2
-      string-width: 8.2.1
-
   ospath@1.2.2: {}
 
   outdent@0.5.0: {}
@@ -28660,13 +28548,6 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
-  react-grab@0.1.37(react@18.3.1):
-    dependencies:
-      '@react-grab/cli': 0.1.37
-      bippy: 0.5.41(react@18.3.1)
-    optionalDependencies:
-      react: 18.3.1
-
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
@@ -29045,11 +28926,6 @@ snapshots:
       onetime: 5.1.2
       signal-exit: 3.0.7
 
-  restore-cursor@5.1.0:
-    dependencies:
-      onetime: 7.0.0
-      signal-exit: 4.1.0
-
   ret@0.5.0: {}
 
   retext-latin@4.0.0:
@@ -29795,8 +29671,6 @@ snapshots:
 
   std-env@4.1.0: {}
 
-  stdin-discarder@0.3.2: {}
-
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -29845,11 +29719,6 @@ snapshots:
       get-east-asian-width: 1.6.0
       strip-ansi: 7.1.2
 
-  string-width@8.2.1:
-    dependencies:
-      get-east-asian-width: 1.6.0
-      strip-ansi: 7.1.2
-
   string.prototype.includes@2.0.1:
     dependencies:
       call-bind: 1.0.8

From 96e9fd35504c42cb4f9d4376cfd78101fe22e022 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Wed, 27 May 2026 13:24:47 -0400
Subject: [PATCH 4/7] revert pnpm-lock changes

---
 pnpm-lock.yaml | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9efbb55b55f..ce9136a8c0d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2727,7 +2727,7 @@ packages:
 
   '@expo/bunyan@4.0.1':
     resolution: {integrity: sha512-+Lla7nYSiHZirgK+U/uYzsLv/X+HaJienbD5AKX1UQZHYfWaP+9uuQluRB4GrEVWF0GZ7vEVp/jzaOT9k/SQlg==}
-    engines: {'0': node >=0.10.0}
+    engines: {node: '>=0.10.0'}
 
   '@expo/cli@0.22.28':
     resolution: {integrity: sha512-lvt72KNitGuixYD2l3SZmRKVu2G4zJpmg5V7WfUBNpmUU5oODBw/6qmiJ6kSLAlfDozscUk+BBGknBBzxUrwrA==}
@@ -8872,8 +8872,8 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
-  get-east-asian-width@1.6.0:
-    resolution: {integrity: sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==}
+  get-east-asian-width@1.4.0:
+    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
     engines: {node: '>=18'}
 
   get-intrinsic@1.3.0:
@@ -12892,8 +12892,8 @@ packages:
   smob@1.5.0:
     resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
 
-  smol-toml@1.6.1:
-    resolution: {integrity: sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==}
+  smol-toml@1.6.0:
+    resolution: {integrity: sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==}
     engines: {node: '>= 18'}
 
   snake-case@3.0.4:
@@ -14849,7 +14849,7 @@ snapshots:
       remark-smartypants: 3.0.2
       retext-smartypants: 6.2.0
       shiki: 4.0.2
-      smol-toml: 1.6.1
+      smol-toml: 1.6.0
       unified: 11.0.5
       unist-util-remove-position: 5.0.0
       unist-util-visit: 5.1.0
@@ -21461,7 +21461,7 @@ snapshots:
       rehype: 13.0.2
       semver: 7.7.4
       shiki: 4.0.2
-      smol-toml: 1.6.1
+      smol-toml: 1.6.0
       svgo: 4.0.1
       tinyclip: 0.1.12
       tinyexec: 1.1.2
@@ -24465,7 +24465,7 @@ snapshots:
 
   get-caller-file@2.0.5: {}
 
-  get-east-asian-width@1.6.0: {}
+  get-east-asian-width@1.4.0: {}
 
   get-intrinsic@1.3.0:
     dependencies:
@@ -29489,7 +29489,7 @@ snapshots:
 
   smob@1.5.0: {}
 
-  smol-toml@1.6.1: {}
+  smol-toml@1.6.0: {}
 
   snake-case@3.0.4:
     dependencies:
@@ -29716,7 +29716,7 @@ snapshots:
   string-width@7.2.0:
     dependencies:
       emoji-regex: 10.6.0
-      get-east-asian-width: 1.6.0
+      get-east-asian-width: 1.4.0
       strip-ansi: 7.1.2
 
   string.prototype.includes@2.0.1:

From 739f3cc775b7ede5501a80cf7d3afc5fdf896746 Mon Sep 17 00:00:00 2001
From: Kyle MacDonald <kylemac@users.noreply.github.com>
Date: Wed, 27 May 2026 13:30:26 -0400
Subject: [PATCH 5/7] chore(js): refresh sandbox sidebar layout with grouped
 nav and collapse (#8667)

---
 .changeset/sandbox-sidebar-refresh.md   |   2 +
 packages/clerk-js/sandbox/template.html | 350 ++++++++++++++++--------
 2 files changed, 239 insertions(+), 113 deletions(-)
 create mode 100644 .changeset/sandbox-sidebar-refresh.md

diff --git a/.changeset/sandbox-sidebar-refresh.md b/.changeset/sandbox-sidebar-refresh.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/sandbox-sidebar-refresh.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
index 30867025578..c76ccefc207 100644
--- a/packages/clerk-js/sandbox/template.html
+++ b/packages/clerk-js/sandbox/template.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="h-full">
+<html class="h-full antialiased font-sans">
   <head>
     <title>clerk-js Sandbox</title>
     <meta charset="utf-8" />
@@ -7,14 +7,30 @@
       name="viewport"
       content="width=device-width,initial-scale=1"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap"
+    />
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <style type="text/tailwindcss">
       @custom-variant dark (&:where(.dark, .dark *));
       @theme {
+        --font-sans:
+          'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
+          'Helvetica Neue', Arial, sans-serif;
+        --font-heading:
+          'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
+          'Helvetica Neue', Arial, sans-serif;
+        --font-mono:
+          'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         --color-sidebar: oklch(0.985 0 0);
         --color-sidebar-foreground: oklch(0.145 0 0);
         --color-sidebar-border: oklch(0.922 0 0);
         --color-sidebar-accent: oklch(0.97 0 0);
+        --color-sidebar-accent-strong: oklch(0.92 0 0);
         --color-sidebar-accent-foreground: oklch(0.145 0 0);
         --color-sidebar-muted-foreground: oklch(0.556 0 0);
       }
@@ -24,6 +40,7 @@
         --color-sidebar-foreground: oklch(0.985 0 0);
         --color-sidebar-border: oklch(0.274 0 0);
         --color-sidebar-accent: oklch(0.269 0 0);
+        --color-sidebar-accent-strong: oklch(0.34 0 0);
         --color-sidebar-accent-foreground: oklch(0.985 0 0);
         --color-sidebar-muted-foreground: oklch(0.708 0 0);
       }
@@ -35,7 +52,43 @@
           document.documentElement.classList.add('dark');
         }
       })();
+      (function () {
+        if (localStorage.getItem('clerk-js-sandbox-sidebar-collapsed') === '1') {
+          document.documentElement.setAttribute('data-sidebar-collapsed', '');
+        }
+      })();
     </script>
+    <style>
+      @media (min-width: 1024px) {
+        [data-sidebar] {
+          transition: transform 200ms ease;
+        }
+        body {
+          transition: padding-left 200ms ease;
+        }
+        #sidebarExpand {
+          display: flex;
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity 200ms ease;
+        }
+        html[data-sidebar-collapsed] [data-sidebar] {
+          transform: translateX(-100%);
+        }
+        html[data-sidebar-collapsed] body {
+          padding-left: 0 !important;
+        }
+        html[data-sidebar-collapsed] #sidebarExpand {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+      @media (max-width: 1023.98px) {
+        #sidebarExpand {
+          display: none !important;
+        }
+      }
+    </style>
     <!-- React Grab (development-only: this template is only used by `pnpm dev:sandbox`) -->
     <script
       src="//unpkg.com/react-grab/dist/index.global.js"
@@ -46,15 +99,67 @@
         connectedCallback() {
           var href = this.getAttribute('href');
           var label = this.getAttribute('label');
+          var component = this.getAttribute('component');
+          function escapeHtml(value) {
+            return String(value)
+              .replace(/&/g, '&amp;')
+              .replace(/</g, '&lt;')
+              .replace(/>/g, '&gt;')
+              .replace(/"/g, '&quot;');
+          }
+          var componentHtml = component
+            ? '<span title="' +
+              escapeHtml(component) +
+              '" class="max-w-[11rem] shrink truncate font-mono text-[9px]/none text-sidebar-muted-foreground group-aria-[current]:text-sidebar-accent-foreground/70" style="font-family: var(--font-mono);">' +
+              escapeHtml(component) +
+              '</span>'
+            : '';
           this.innerHTML =
-            '<li class="relative"><a class="relative isolate flex w-full rounded-md border border-transparent px-2 py-[0.4375rem] text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground aria-[current]:bg-sidebar-accent aria-[current]:text-sidebar-accent-foreground" href="' +
-            href +
-            '">' +
-            label +
-            '</a></li>';
+            '<a class="group relative isolate flex w-full items-center justify-between gap-2 rounded-md px-2 py-1 text-xs/relaxed text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground aria-[current]:bg-sidebar-accent-strong aria-[current]:font-medium aria-[current]:text-sidebar-accent-foreground" href="' +
+            escapeHtml(href) +
+            '"><span class="min-w-0 truncate">' +
+            escapeHtml(label) +
+            '</span>' +
+            componentHtml +
+            '</a>';
         }
       }
       customElements.define('nav-link', NavLink);
+
+      class NavGroup extends HTMLElement {
+        connectedCallback() {
+          queueMicrotask(() => this.setup());
+        }
+        setup() {
+          if (this.dataset.setupComplete) return;
+          this.dataset.setupComplete = 'true';
+
+          var label = this.getAttribute('label') || '';
+          var items = Array.from(this.childNodes);
+
+          var wrapper = document.createElement('div');
+          wrapper.className = 'flex flex-col gap-1';
+
+          var heading = document.createElement('div');
+          heading.className =
+            'px-1 text-[10px] font-medium uppercase tracking-wide text-sidebar-muted-foreground';
+          heading.textContent = label;
+
+          var inner = document.createElement('div');
+          inner.className = 'flex flex-col';
+
+          items.forEach(function (node) {
+            inner.appendChild(node);
+          });
+
+          wrapper.appendChild(heading);
+          wrapper.appendChild(inner);
+
+          this.innerHTML = '';
+          this.appendChild(wrapper);
+        }
+      }
+      customElements.define('nav-group', NavGroup);
     </script>
   </head>
   <body
@@ -62,130 +167,149 @@
   >
     <div
       data-sidebar
-      class="border-sidebar-border bg-sidebar text-sidebar-foreground fixed inset-y-0 left-0 z-40 w-72 overflow-y-auto border-r px-2 py-4 max-lg:hidden"
+      class="border-sidebar-border bg-sidebar text-sidebar-foreground fixed inset-y-0 left-0 z-40 w-72 overflow-y-auto border-r px-4 py-4 max-lg:hidden"
     >
-      <header class="border-sidebar-border mb-2 flex items-center justify-center gap-x-2 border-b pb-4">
+      <header class="border-sidebar-border mb-3 flex items-center justify-start gap-x-2 border-b pb-3">
         <svg
-          viewBox="0 0 62 18"
+          width="160"
+          height="160"
+          viewBox="0 0 160 160"
           fill="none"
+          xmlns="http://www.w3.org/2000/svg"
           aria-hidden="true"
-          class="text-sidebar-foreground h-[1.125rem]"
+          class="ml-2 size-5"
         >
-          <ellipse
-            cx="8.99999"
-            cy="9"
-            rx="2.81249"
-            ry="2.8125"
-            class="fill-current"
-          ></ellipse>
+          <rect width="160" height="160" rx="80" fill="#6C47FF" />
           <path
-            d="M14.0674 15.6591C14.3067 15.8984 14.2827 16.2945 14.0015 16.4829C12.571 17.4411 10.8504 17.9999 8.9993 17.9999C7.14818 17.9999 5.42758 17.4411 3.99704 16.4829C3.71589 16.2945 3.69186 15.8984 3.93115 15.6591L5.98648 13.6037C6.17225 13.418 6.46042 13.3886 6.69424 13.5084C7.3856 13.8626 8.16911 14.0624 8.9993 14.0624C9.82948 14.0624 10.613 13.8626 11.3044 13.5084C11.5382 13.3886 11.8263 13.418 12.0121 13.6037L14.0674 15.6591Z"
-            class="fill-current"
-          ></path>
+            d="M111.125 33.4395C112.875 34.6113 113.024 37.0763 111.535 38.5652L98.7464 51.3541C97.5905 52.5099 95.7974 52.6925 94.3426 51.9472C90.0408 49.7434 85.1656 48.5 80 48.5C62.603 48.5 48.5 62.603 48.5 80C48.5 85.1656 49.7434 90.0408 51.9472 94.3426C52.6925 95.7974 52.5099 97.5905 51.3541 98.7464L38.5652 111.535C37.0763 113.024 34.6113 112.875 33.4395 111.125C27.4773 102.224 24 91.5181 24 80C24 49.0721 49.0721 24 80 24C91.5181 24 102.224 27.4773 111.125 33.4395Z"
+            fill="white"
+            fill-opacity="0.4"
+          />
           <path
-            d="M14.0022 1.51706C14.2834 1.70539 14.3074 2.10155 14.0681 2.34084L12.0128 4.39619C11.827 4.58195 11.5388 4.61129 11.305 4.49151C10.6136 4.13733 9.83014 3.9375 8.99996 3.9375C6.20403 3.9375 3.93748 6.20406 3.93748 9C3.93748 9.83018 4.13731 10.6137 4.49149 11.3051C4.61127 11.5389 4.58193 11.827 4.39617 12.0128L2.34083 14.0682C2.10154 14.3074 1.70538 14.2834 1.51705 14.0023C0.558857 12.5717 0 10.8511 0 9C0 4.02944 4.02942 0 8.99996 0C10.8511 0 12.5717 0.55886 14.0022 1.51706Z"
-            fill-opacity="0.5"
-            class="fill-current"
-          ></path>
+            d="M97.5 80C97.5 89.665 89.665 97.5 80 97.5C70.335 97.5 62.5 89.665 62.5 80C62.5 70.335 70.335 62.5 80 62.5C89.665 62.5 97.5 70.335 97.5 80Z"
+            fill="white"
+          />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M29.3906 1.82813C29.3906 1.75046 29.4535 1.6875 29.5312 1.6875H31.6406C31.7182 1.6875 31.7812 1.75046 31.7812 1.82813V16.1719C31.7812 16.2495 31.7182 16.3125 31.6406 16.3125H29.5312C29.4535 16.3125 29.3906 16.2495 29.3906 16.1719V1.82813ZM26.4137 13.2701C26.3577 13.2217 26.2739 13.2253 26.2201 13.2761C25.8913 13.5864 25.5063 13.8347 25.0843 14.0078C24.6215 14.1979 24.1239 14.2936 23.622 14.2891C23.1982 14.3016 22.7762 14.2291 22.3821 14.076C21.988 13.9229 21.63 13.6925 21.3303 13.3989C20.7859 12.8431 20.4726 12.0496 20.4726 11.1037C20.4726 9.2101 21.7324 7.91491 23.622 7.91491C24.1289 7.90793 24.631 8.01058 25.0926 8.21543C25.5111 8.40122 25.8869 8.66683 26.1982 8.99629C26.2514 9.05264 26.3398 9.05916 26.3985 9.00842L27.8225 7.7762C27.8807 7.72586 27.8877 7.63797 27.8364 7.58065C26.7653 6.38368 25.0872 5.76563 23.4914 5.76563C20.2783 5.76563 18 7.93299 18 11.1217C18 12.6988 18.5662 14.0268 19.5211 14.9645C20.476 15.9023 21.8363 16.4531 23.4059 16.4531C25.3741 16.4531 26.9582 15.6984 27.8869 14.7302C27.9414 14.6734 27.9354 14.583 27.8758 14.5315L26.4137 13.2701ZM43.401 11.8056C43.3931 11.876 43.3332 11.9287 43.2623 11.9287H35.8731C35.7833 11.9287 35.7164 12.012 35.7398 12.0986C36.1074 13.4614 37.2035 14.286 38.6995 14.286C39.2038 14.2966 39.7037 14.1928 40.1605 13.9827C40.5862 13.787 40.9639 13.5038 41.2682 13.1528C41.305 13.1104 41.3691 13.1041 41.4122 13.1401L42.8978 14.4335C42.9547 14.483 42.9626 14.5687 42.9138 14.6262C42.0169 15.6843 40.5637 16.4531 38.5695 16.4531C35.5016 16.4531 33.1874 14.3286 33.1874 11.1009C33.1874 9.51732 33.7326 8.18944 34.6412 7.25179C35.1209 6.76963 35.6959 6.38911 36.3307 6.13368C36.9656 5.87826 37.6469 5.75332 38.3327 5.76658C41.4422 5.76658 43.453 7.95343 43.453 10.973C43.4491 11.2512 43.4317 11.5291 43.401 11.8056ZM35.7842 9.84589C35.7581 9.93268 35.8251 10.0172 35.9158 10.0172H40.829C40.9198 10.0172 40.9869 9.93217 40.9617 9.84491C40.6268 8.68592 39.7772 7.91244 38.4577 7.91244C38.0696 7.90013 37.6834 7.97039 37.3254 8.11832C36.9675 8.26633 36.6462 8.48856 36.3836 8.76977C36.1075 9.08283 35.9034 9.44988 35.7842 9.84589ZM50.7639 5.76717C50.8422 5.76632 50.9061 5.82952 50.9061 5.90779V8.26951C50.9061 8.35135 50.8365 8.41586 50.7548 8.40981C50.5269 8.39291 50.3114 8.37856 50.1701 8.37856C48.3301 8.37856 47.2499 9.67359 47.2499 11.3735V16.1719C47.2499 16.2495 47.1869 16.3125 47.1092 16.3125H44.9999C44.9222 16.3125 44.8592 16.2495 44.8592 16.1719V6.05379C44.8592 5.97613 44.9222 5.91317 44.9999 5.91317H47.1092C47.1869 5.91317 47.2499 5.97613 47.2499 6.05379V7.47394C47.2499 7.48196 47.2563 7.48845 47.2644 7.48845C47.2689 7.48845 47.2733 7.48627 47.276 7.48261C48.1006 6.38146 49.3176 5.76892 50.6033 5.76892L50.7639 5.76717ZM56.4778 11.9525C56.4864 11.9432 56.4985 11.938 56.5112 11.938C56.5269 11.938 56.5415 11.9461 56.5498 11.9595L59.217 16.2462C59.2426 16.2874 59.2878 16.3125 59.3364 16.3125L61.7342 16.3125C61.8445 16.3125 61.9118 16.1915 61.8538 16.0978L58.1947 10.1939C58.1616 10.1406 58.1679 10.0719 58.21 10.0254L61.7355 6.13573C61.8174 6.04534 61.7533 5.90066 61.6313 5.90066H59.1298C59.0904 5.90066 59.0528 5.91719 59.0261 5.94622L54.9472 10.3925C54.8605 10.487 54.7029 10.4257 54.7029 10.2974V1.82812C54.7029 1.75046 54.64 1.6875 54.5623 1.6875H52.453C52.3753 1.6875 52.3123 1.75046 52.3123 1.82812V16.1719C52.3123 16.2495 52.3753 16.3125 52.453 16.3125L54.5623 16.3125C54.64 16.3125 54.7029 16.2495 54.7029 16.1719V13.9147C54.7029 13.8792 54.7164 13.8449 54.7406 13.8189L56.4778 11.9525Z"
-            class="fill-current"
-          ></path>
+            d="M111.535 121.435C113.024 122.924 112.875 125.389 111.125 126.56C102.224 132.523 91.5181 136 80 136C68.4819 136 57.7759 132.523 48.8747 126.56C47.1253 125.389 46.9758 122.924 48.4647 121.435L61.2535 108.646C62.4094 107.49 64.2025 107.307 65.6573 108.053C69.9592 110.257 74.8344 111.5 80 111.5C85.1656 111.5 90.0408 110.257 94.3427 108.053C95.7975 107.307 97.5906 107.49 98.7465 108.646L111.535 121.435Z"
+            fill="white"
+          />
         </svg>
         <div
           class="bg-sidebar-accent text-sidebar-muted-foreground ring-sidebar-border mt-0.5 rounded-full px-2 py-1 text-[0.625rem]/3 font-medium ring-1 ring-inset"
         >
-          Sandbox
+          UI Component Sandbox
         </div>
+        <button
+          id="sidebarCollapse"
+          type="button"
+          aria-label="Collapse sidebar"
+          class="text-sidebar-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded-md transition-colors max-lg:hidden"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-3.5"
+            aria-hidden="true"
+          >
+            <path d="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
+            <path d="M9 4v16" />
+            <path d="M15 10l-2 2l2 2" />
+          </svg>
+        </button>
       </header>
-      <nav>
-        <ul role="list">
-          <nav-link
-            href="/"
-            label="Home"
-          ></nav-link>
-          <nav-link
-            href="/sign-in"
-            label="Sign In"
-          ></nav-link>
-          <nav-link
-            href="/sign-up"
-            label="Sign Up"
-          ></nav-link>
-          <nav-link
-            href="/user-avatar"
-            label="User Avatar"
-          ></nav-link>
-          <nav-link
-            href="/user-button"
-            label="User Button"
-          ></nav-link>
-          <nav-link
-            href="/user-profile"
-            label="User Profile"
-          ></nav-link>
-          <nav-link
-            href="/create-organization"
-            label="Create Organization"
-          ></nav-link>
-          <nav-link
-            href="/organization-list"
-            label="Organization List"
-          ></nav-link>
-          <nav-link
-            href="/organization-profile"
-            label="Organization Profile"
-          ></nav-link>
-          <nav-link
-            href="/organization-switcher"
-            label="Organization Switcher"
-          ></nav-link>
-          <nav-link
-            href="/waitlist"
-            label="Waitlist"
-          ></nav-link>
-          <nav-link
-            href="/keyless"
-            label="Keyless"
-          ></nav-link>
-          <nav-link
-            href="/pricing-table"
-            label="PricingTable"
-          ></nav-link>
-          <nav-link
-            href="/api-keys"
-            label="API Keys"
-          ></nav-link>
-          <nav-link
-            href="/configure-sso"
-            label="ConfigureSSO"
-          ></nav-link>
-          <nav-link
-            href="/oauth-consent"
-            label="OAuthConsent"
-          ></nav-link>
-          <nav-link
-            href="/task-choose-organization"
-            label="TaskChooseOrganization"
-          ></nav-link>
-          <nav-link
-            href="/task-setup-mfa"
-            label="TaskSetupMFA"
-          ></nav-link>
-          <nav-link
-            href="/open-sign-in"
-            label="Open sign in"
-          ></nav-link>
-          <nav-link
-            href="/open-sign-up"
-            label="Open sign up"
-          ></nav-link>
-        </ul>
+      <nav class="flex flex-col gap-4">
+        <nav-group label="Get Started">
+          <nav-link href="/" label="Home"></nav-link>
+        </nav-group>
+        <nav-group label="Auth">
+          <nav-link href="/sign-in" label="Sign In" component="<SignIn />"></nav-link>
+          <nav-link href="/sign-up" label="Sign Up" component="<SignUp />"></nav-link>
+          <nav-link href="/waitlist" label="Waitlist" component="<Waitlist />"></nav-link>
+          <nav-link href="/oauth-consent" label="OAuth Consent" component="<OAuthConsent />"></nav-link>
+          <nav-link href="/api-keys" label="API Keys" component="<APIKeys />"></nav-link>
+        </nav-group>
+        <nav-group label="User">
+          <nav-link href="/user-avatar" label="User Avatar" component="<UserAvatar />"></nav-link>
+          <nav-link href="/user-button" label="User Button" component="<UserButton />"></nav-link>
+          <nav-link href="/user-profile" label="User Profile" component="<UserProfile />"></nav-link>
+        </nav-group>
+        <nav-group label="Orgs">
+          <nav-link href="/create-organization" label="Create Org" component="<CreateOrganization />"></nav-link>
+          <nav-link href="/organization-list" label="Org List" component="<OrganizationList />"></nav-link>
+          <nav-link href="/organization-profile" label="Org Profile" component="<OrganizationProfile />"></nav-link>
+          <nav-link href="/organization-switcher" label="Org Switcher" component="<OrganizationSwitcher />"></nav-link>
+          <nav-link href="/configure-sso" label="Configure SSO" component="<ConfigureSSO />"></nav-link>
+        </nav-group>
+        <nav-group label="Tasks">
+          <nav-link href="/task-choose-organization" label="Choose Org" component="<TaskChooseOrganization />"></nav-link>
+          <nav-link href="/task-setup-mfa" label="Setup MFA" component="<TaskSetupMFA />"></nav-link>
+        </nav-group>
+        <nav-group label="Billing">
+          <nav-link href="/pricing-table" label="Pricing Table" component="<PricingTable />"></nav-link>
+        </nav-group>
+        <nav-group label="Other">
+          <nav-link href="/keyless" label="Keyless" component="<Keyless />"></nav-link>
+          <nav-link href="/open-sign-in" label="Open sign in"></nav-link>
+          <nav-link href="/open-sign-up" label="Open sign up"></nav-link>
+        </nav-group>
       </nav>
     </div>
 
+    <div
+      id="sidebarExpand"
+      class="border-sidebar-border bg-sidebar fixed inset-y-0 left-0 z-40 hidden h-full flex-col gap-1 border-r px-2 py-4 lg:flex"
+    >
+      <button
+        id="sidebarExpandBtn"
+        type="button"
+        aria-label="Expand sidebar"
+        class="text-sidebar-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground inline-flex size-6 items-center justify-center rounded-md transition-colors"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="size-4"
+          aria-hidden="true"
+        >
+          <path d="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
+          <path d="M9 4v16" />
+          <path d="M13 10l2 2l-2 2" />
+        </svg>
+      </button>
+    </div>
+
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        var html = document.documentElement;
+        var STORAGE_KEY = 'clerk-js-sandbox-sidebar-collapsed';
+        function setCollapsed(collapsed) {
+          if (collapsed) {
+            html.setAttribute('data-sidebar-collapsed', '');
+            localStorage.setItem(STORAGE_KEY, '1');
+          } else {
+            html.removeAttribute('data-sidebar-collapsed');
+            localStorage.removeItem(STORAGE_KEY);
+          }
+        }
+        document.getElementById('sidebarCollapse')?.addEventListener('click', function () {
+          setCollapsed(true);
+        });
+        document.getElementById('sidebarExpandBtn')?.addEventListener('click', function () {
+          setCollapsed(false);
+        });
+      });
+    </script>
+
     <button
       id="sidebarToggle"
       class="border-sidebar-border bg-sidebar text-sidebar-foreground fixed left-3 top-3 z-50 rounded-md border p-1.5 lg:hidden"

From 2466bd70cbec9d4cdddea6d35bf1f0c756b1a817 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Wed, 27 May 2026 13:35:41 -0400
Subject: [PATCH 6/7] format

---
 packages/clerk-js/sandbox/template.html | 150 +++++++++++++++++++-----
 1 file changed, 118 insertions(+), 32 deletions(-)

diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
index c76ccefc207..4a26ca93991 100644
--- a/packages/clerk-js/sandbox/template.html
+++ b/packages/clerk-js/sandbox/template.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="h-full antialiased font-sans">
+<html class="h-full font-sans antialiased">
   <head>
     <title>clerk-js Sandbox</title>
     <meta charset="utf-8" />
@@ -7,8 +7,15 @@
       name="viewport"
       content="width=device-width,initial-scale=1"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin
+    />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap"
@@ -18,14 +25,12 @@
       @custom-variant dark (&:where(.dark, .dark *));
       @theme {
         --font-sans:
-          'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
-          'Helvetica Neue', Arial, sans-serif;
+          'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
         --font-heading:
-          'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
-          'Helvetica Neue', Arial, sans-serif;
+          'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
         --font-mono:
-          'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-          'Liberation Mono', 'Courier New', monospace;
+          'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+          monospace;
         --color-sidebar: oklch(0.985 0 0);
         --color-sidebar-foreground: oklch(0.145 0 0);
         --color-sidebar-border: oklch(0.922 0 0);
@@ -141,8 +146,7 @@
           wrapper.className = 'flex flex-col gap-1';
 
           var heading = document.createElement('div');
-          heading.className =
-            'px-1 text-[10px] font-medium uppercase tracking-wide text-sidebar-muted-foreground';
+          heading.className = 'px-1 text-[10px] font-medium uppercase tracking-wide text-sidebar-muted-foreground';
           heading.textContent = label;
 
           var inner = document.createElement('div');
@@ -179,7 +183,12 @@
           aria-hidden="true"
           class="ml-2 size-5"
         >
-          <rect width="160" height="160" rx="80" fill="#6C47FF" />
+          <rect
+            width="160"
+            height="160"
+            rx="80"
+            fill="#6C47FF"
+          />
           <path
             d="M111.125 33.4395C112.875 34.6113 113.024 37.0763 111.535 38.5652L98.7464 51.3541C97.5905 52.5099 95.7974 52.6925 94.3426 51.9472C90.0408 49.7434 85.1656 48.5 80 48.5C62.603 48.5 48.5 62.603 48.5 80C48.5 85.1656 49.7434 90.0408 51.9472 94.3426C52.6925 95.7974 52.5099 97.5905 51.3541 98.7464L38.5652 111.535C37.0763 113.024 34.6113 112.875 33.4395 111.125C27.4773 102.224 24 91.5181 24 80C24 49.0721 49.0721 24 80 24C91.5181 24 102.224 27.4773 111.125 33.4395Z"
             fill="white"
@@ -224,38 +233,115 @@
       </header>
       <nav class="flex flex-col gap-4">
         <nav-group label="Get Started">
-          <nav-link href="/" label="Home"></nav-link>
+          <nav-link
+            href="/"
+            label="Home"
+          ></nav-link>
         </nav-group>
         <nav-group label="Auth">
-          <nav-link href="/sign-in" label="Sign In" component="<SignIn />"></nav-link>
-          <nav-link href="/sign-up" label="Sign Up" component="<SignUp />"></nav-link>
-          <nav-link href="/waitlist" label="Waitlist" component="<Waitlist />"></nav-link>
-          <nav-link href="/oauth-consent" label="OAuth Consent" component="<OAuthConsent />"></nav-link>
-          <nav-link href="/api-keys" label="API Keys" component="<APIKeys />"></nav-link>
+          <nav-link
+            href="/sign-in"
+            label="Sign In"
+            component="<SignIn />"
+          ></nav-link>
+          <nav-link
+            href="/sign-up"
+            label="Sign Up"
+            component="<SignUp />"
+          ></nav-link>
+          <nav-link
+            href="/waitlist"
+            label="Waitlist"
+            component="<Waitlist />"
+          ></nav-link>
+          <nav-link
+            href="/oauth-consent"
+            label="OAuth Consent"
+            component="<OAuthConsent />"
+          ></nav-link>
+          <nav-link
+            href="/api-keys"
+            label="API Keys"
+            component="<APIKeys />"
+          ></nav-link>
         </nav-group>
         <nav-group label="User">
-          <nav-link href="/user-avatar" label="User Avatar" component="<UserAvatar />"></nav-link>
-          <nav-link href="/user-button" label="User Button" component="<UserButton />"></nav-link>
-          <nav-link href="/user-profile" label="User Profile" component="<UserProfile />"></nav-link>
+          <nav-link
+            href="/user-avatar"
+            label="User Avatar"
+            component="<UserAvatar />"
+          ></nav-link>
+          <nav-link
+            href="/user-button"
+            label="User Button"
+            component="<UserButton />"
+          ></nav-link>
+          <nav-link
+            href="/user-profile"
+            label="User Profile"
+            component="<UserProfile />"
+          ></nav-link>
         </nav-group>
         <nav-group label="Orgs">
-          <nav-link href="/create-organization" label="Create Org" component="<CreateOrganization />"></nav-link>
-          <nav-link href="/organization-list" label="Org List" component="<OrganizationList />"></nav-link>
-          <nav-link href="/organization-profile" label="Org Profile" component="<OrganizationProfile />"></nav-link>
-          <nav-link href="/organization-switcher" label="Org Switcher" component="<OrganizationSwitcher />"></nav-link>
-          <nav-link href="/configure-sso" label="Configure SSO" component="<ConfigureSSO />"></nav-link>
+          <nav-link
+            href="/create-organization"
+            label="Create Org"
+            component="<CreateOrganization />"
+          ></nav-link>
+          <nav-link
+            href="/organization-list"
+            label="Org List"
+            component="<OrganizationList />"
+          ></nav-link>
+          <nav-link
+            href="/organization-profile"
+            label="Org Profile"
+            component="<OrganizationProfile />"
+          ></nav-link>
+          <nav-link
+            href="/organization-switcher"
+            label="Org Switcher"
+            component="<OrganizationSwitcher />"
+          ></nav-link>
+          <nav-link
+            href="/configure-sso"
+            label="Configure SSO"
+            component="<ConfigureSSO />"
+          ></nav-link>
         </nav-group>
         <nav-group label="Tasks">
-          <nav-link href="/task-choose-organization" label="Choose Org" component="<TaskChooseOrganization />"></nav-link>
-          <nav-link href="/task-setup-mfa" label="Setup MFA" component="<TaskSetupMFA />"></nav-link>
+          <nav-link
+            href="/task-choose-organization"
+            label="Choose Org"
+            component="<TaskChooseOrganization />"
+          ></nav-link>
+          <nav-link
+            href="/task-setup-mfa"
+            label="Setup MFA"
+            component="<TaskSetupMFA />"
+          ></nav-link>
         </nav-group>
         <nav-group label="Billing">
-          <nav-link href="/pricing-table" label="Pricing Table" component="<PricingTable />"></nav-link>
+          <nav-link
+            href="/pricing-table"
+            label="Pricing Table"
+            component="<PricingTable />"
+          ></nav-link>
         </nav-group>
         <nav-group label="Other">
-          <nav-link href="/keyless" label="Keyless" component="<Keyless />"></nav-link>
-          <nav-link href="/open-sign-in" label="Open sign in"></nav-link>
-          <nav-link href="/open-sign-up" label="Open sign up"></nav-link>
+          <nav-link
+            href="/keyless"
+            label="Keyless"
+            component="<Keyless />"
+          ></nav-link>
+          <nav-link
+            href="/open-sign-in"
+            label="Open sign in"
+          ></nav-link>
+          <nav-link
+            href="/open-sign-up"
+            label="Open sign up"
+          ></nav-link>
         </nav-group>
       </nav>
     </div>

From 2b8d4cbeda4d91d5ff1a184d73f43a1eca585c72 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Wed, 27 May 2026 14:01:29 -0400
Subject: [PATCH 7/7] fix(repo): Sandbox initial variables (#8668)

Co-authored-by: Kyle MacDonald <kyle@clerk.dev>
---
 .changeset/public-parts-jog.md   |  2 ++
 packages/clerk-js/sandbox/app.ts | 26 +++++++++++++++++++++-----
 2 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/public-parts-jog.md

diff --git a/.changeset/public-parts-jog.md b/.changeset/public-parts-jog.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/public-parts-jog.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts
index a17147343c4..3a94d2a6c2d 100644
--- a/packages/clerk-js/sandbox/app.ts
+++ b/packages/clerk-js/sandbox/app.ts
@@ -186,7 +186,7 @@ function assertClerkIsLoaded(c: ClerkType | undefined): asserts c is ClerkType {
 function mountIndex(element: HTMLDivElement) {
   assertClerkIsLoaded(Clerk);
   const user = Clerk.user;
-  element.innerHTML = `<pre class="text-left whitespace-pre overflow-x-auto bg-white p-4 border border-gray-100 rounded-md text-sm"><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
+  element.innerHTML = `<pre class="text-left whitespace-pre overflow-x-auto text-muted-foreground p-4 border border-[var(--color-sidebar-border)] rounded-md text-sm"><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
 }
 
 function mountOpenButton(element: HTMLDivElement, label: string, openFn: (props: any) => void, props: any) {
@@ -301,8 +301,17 @@ async function initControls() {
   varFolder.addBinding(PARAMS, 'borderRadius').on('change', applyVariables);
   varFolder.addButton({ title: 'Reset' }).on('click', () => {
     Object.assign(PARAMS, VARIABLE_DEFAULTS);
+    for (const key of Object.keys(VARIABLE_DEFAULTS)) {
+      sessionStorage.removeItem(key);
+    }
     pane.refresh();
-    applyVariables();
+    const currentAppearance = Clerk.__internal_getOption('appearance') ?? {};
+    void Clerk.__internal_updateProps({
+      appearance: {
+        ...currentAppearance,
+        variables: undefined,
+      },
+    });
   });
 
   // Options folder
@@ -467,8 +476,11 @@ void (async () => {
     }
 
     const initialVariables: Record<string, string> = {};
-    for (const [key, def] of Object.entries(VARIABLE_DEFAULTS)) {
-      initialVariables[key] = sessionStorage.getItem(key) ?? def;
+    for (const key of Object.keys(VARIABLE_DEFAULTS)) {
+      const stored = sessionStorage.getItem(key);
+      if (stored !== null) {
+        initialVariables[key] = stored;
+      }
     }
 
     const initialLocale = sessionStorage.getItem('localization') ?? 'enUS';
@@ -479,7 +491,11 @@ void (async () => {
       signUpUrl: '/sign-up',
       ui: { ClerkUI: window.__internal_ClerkUICtor },
       appearance: {
-        ...(initialTheme ? { theme: initialTheme } : { variables: initialVariables }),
+        ...(initialTheme
+          ? { theme: initialTheme }
+          : Object.keys(initialVariables).length > 0
+            ? { variables: initialVariables }
+            : {}),
         ...(Object.keys(initialAppearanceOptions).length ? { options: initialAppearanceOptions } : {}),
       },
       localization: l[initialLocale as keyof typeof l],