From 28484eabd7424d065104fb42a0b6aac5ec8aa89f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marius=20Lundga=CC=8Ard?= Date: Wed, 14 May 2025 22:24:55 +0200 Subject: [PATCH 1/2] tmp --- .eslintrc.cjs | 2 +- package.json | 16 +- pnpm-lock.yaml | 312 ++++++++++++++++-- src/core/GlobalStyle.ts | 4 +- src/core/RootClassNames.tsx | 39 +++ src/core/config/types.ts | 5 +- src/core/inspector/InspectorHeader.tsx | 2 +- src/core/inspector/WorkshopInspector.tsx | 2 +- src/core/mount.tsx | 11 +- src/core/mountFrame.tsx | 7 +- src/core/navigator/StoryTree.tsx | 4 +- src/core/navigator/WorkshopNavigator.tsx | 6 +- .../plugins/props/components/booleanProp.tsx | 2 +- .../plugins/props/components/numberProp.tsx | 2 +- .../plugins/props/components/selectProp.tsx | 2 +- .../plugins/props/components/stringProp.tsx | 2 +- .../plugins/props/components/textProp.tsx | 2 +- src/runtime/runtime/_writeHTML.ts | 2 +- 18 files changed, 366 insertions(+), 56 deletions(-) create mode 100644 src/core/RootClassNames.tsx diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 122adddf..621374b1 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -33,7 +33,7 @@ module.exports = { 'react/prop-types': 'off', 'react-hooks/exhaustive-deps': 'error', // Checks effect dependencies 'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks - 'react-hooks/react-compiler': 'error', + // 'react-hooks/react-compiler': 'error', 'react/no-unescaped-entities': 'off', 'simple-import-sort/exports': 'warn', 'simple-import-sort/imports': 'warn', diff --git a/package.json b/package.json index 1f672da5..1bf980fe 100644 --- a/package.json +++ b/package.json @@ -140,7 +140,7 @@ "@sanity/pkg-utils": "^6.13.4", "@sanity/prettier-config": "^1.0.3", "@sanity/semantic-release-preset": "^4.1.8", - "@sanity/ui": "^2.15.14", + "@sanity/ui": "^3.0.0", "@types/cpx": "^1.5.5", "@types/express": "^5.0.1", "@types/lodash": "^4.17.16", @@ -176,16 +176,20 @@ "vitest": "^2.1.9" }, "peerDependencies": { - "@sanity/icons": "^2 || ^3", - "@sanity/ui": "^1 || ^2", - "react": "^18 || ^19", - "react-dom": "^18 || ^19", - "styled-components": "^5.2 || ^6" + "@sanity/icons": "^3", + "@sanity/ui": "^3", + "react": "^19", + "react-dom": "^19" }, "packageManager": "pnpm@9.15.9", "publishConfig": { "access": "public" }, + "pnpm": { + "overrides": { + "@sanity/ui": "file:registry/sanity-ui-3.0.0-local.11.tgz" + } + }, "esm.sh": { "bundle": false } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4fa09a0f..3965d5a3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,9 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +overrides: + '@sanity/ui': file:registry/sanity-ui-3.0.0-local.11.tgz + importers: .: @@ -79,8 +82,8 @@ importers: specifier: ^4.1.8 version: 4.1.8(semantic-release@23.1.1(typescript@5.8.3)) '@sanity/ui': - specifier: ^2.15.14 - version: 2.15.14(@emotion/is-prop-valid@1.2.2)(react-dom@19.1.0(react@19.1.0))(react-is@19.1.0)(react@19.1.0)(styled-components@6.1.17(react-dom@19.1.0(react@19.1.0))(react@19.1.0)) + specifier: file:registry/sanity-ui-3.0.0-local.11.tgz + version: file:registry/sanity-ui-3.0.0-local.11.tgz(@emotion/is-prop-valid@1.2.2)(react-dom@19.1.0(react@19.1.0))(react-is@19.1.0)(react@19.1.0)(styled-components@6.1.17(react-dom@19.1.0(react@19.1.0))(react@19.1.0)) '@types/cpx': specifier: ^1.5.5 version: 1.5.5 @@ -430,6 +433,12 @@ packages: cpu: [ppc64] os: [aix] + '@esbuild/aix-ppc64@0.25.4': + resolution: {integrity: sha512-1VCICWypeQKhVbE9oW/sJaAmjLxhVqacdkvPLEjwlttjfwENRSClS8EjBz0KzRyFSCPDIkuXW34Je/vk7zdB7Q==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [aix] + '@esbuild/android-arm64@0.21.5': resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==} engines: {node: '>=12'} @@ -448,6 +457,12 @@ packages: cpu: [arm64] os: [android] + '@esbuild/android-arm64@0.25.4': + resolution: {integrity: sha512-bBy69pgfhMGtCnwpC/x5QhfxAz/cBgQ9enbtwjf6V9lnPI/hMyT9iWpR1arm0l3kttTr4L0KSLpKmLp/ilKS9A==} + engines: {node: '>=18'} + cpu: [arm64] + os: [android] + '@esbuild/android-arm@0.21.5': resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==} engines: {node: '>=12'} @@ -466,6 +481,12 @@ packages: cpu: [arm] os: [android] + '@esbuild/android-arm@0.25.4': + resolution: {integrity: sha512-QNdQEps7DfFwE3hXiU4BZeOV68HHzYwGd0Nthhd3uCkkEKK7/R6MTgM0P7H7FAs5pU/DIWsviMmEGxEoxIZ+ZQ==} + engines: {node: '>=18'} + cpu: [arm] + os: [android] + '@esbuild/android-x64@0.21.5': resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==} engines: {node: '>=12'} @@ -484,6 +505,12 @@ packages: cpu: [x64] os: [android] + '@esbuild/android-x64@0.25.4': + resolution: {integrity: sha512-TVhdVtQIFuVpIIR282btcGC2oGQoSfZfmBdTip2anCaVYcqWlZXGcdcKIUklfX2wj0JklNYgz39OBqh2cqXvcQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [android] + '@esbuild/darwin-arm64@0.21.5': resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==} engines: {node: '>=12'} @@ -502,6 +529,12 @@ packages: cpu: [arm64] os: [darwin] + '@esbuild/darwin-arm64@0.25.4': + resolution: {integrity: sha512-Y1giCfM4nlHDWEfSckMzeWNdQS31BQGs9/rouw6Ub91tkK79aIMTH3q9xHvzH8d0wDru5Ci0kWB8b3up/nl16g==} + engines: {node: '>=18'} + cpu: [arm64] + os: [darwin] + '@esbuild/darwin-x64@0.21.5': resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==} engines: {node: '>=12'} @@ -520,6 +553,12 @@ packages: cpu: [x64] os: [darwin] + '@esbuild/darwin-x64@0.25.4': + resolution: {integrity: sha512-CJsry8ZGM5VFVeyUYB3cdKpd/H69PYez4eJh1W/t38vzutdjEjtP7hB6eLKBoOdxcAlCtEYHzQ/PJ/oU9I4u0A==} + engines: {node: '>=18'} + cpu: [x64] + os: [darwin] + '@esbuild/freebsd-arm64@0.21.5': resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==} engines: {node: '>=12'} @@ -538,6 +577,12 @@ packages: cpu: [arm64] os: [freebsd] + '@esbuild/freebsd-arm64@0.25.4': + resolution: {integrity: sha512-yYq+39NlTRzU2XmoPW4l5Ifpl9fqSk0nAJYM/V/WUGPEFfek1epLHJIkTQM6bBs1swApjO5nWgvr843g6TjxuQ==} + engines: {node: '>=18'} + cpu: [arm64] + os: [freebsd] + '@esbuild/freebsd-x64@0.21.5': resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==} engines: {node: '>=12'} @@ -556,6 +601,12 @@ packages: cpu: [x64] os: [freebsd] + '@esbuild/freebsd-x64@0.25.4': + resolution: {integrity: sha512-0FgvOJ6UUMflsHSPLzdfDnnBBVoCDtBTVyn/MrWloUNvq/5SFmh13l3dvgRPkDihRxb77Y17MbqbCAa2strMQQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [freebsd] + '@esbuild/linux-arm64@0.21.5': resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==} engines: {node: '>=12'} @@ -574,6 +625,12 @@ packages: cpu: [arm64] os: [linux] + '@esbuild/linux-arm64@0.25.4': + resolution: {integrity: sha512-+89UsQTfXdmjIvZS6nUnOOLoXnkUTB9hR5QAeLrQdzOSWZvNSAXAtcRDHWtqAUtAmv7ZM1WPOOeSxDzzzMogiQ==} + engines: {node: '>=18'} + cpu: [arm64] + os: [linux] + '@esbuild/linux-arm@0.21.5': resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==} engines: {node: '>=12'} @@ -592,6 +649,12 @@ packages: cpu: [arm] os: [linux] + '@esbuild/linux-arm@0.25.4': + resolution: {integrity: sha512-kro4c0P85GMfFYqW4TWOpvmF8rFShbWGnrLqlzp4X1TNWjRY3JMYUfDCtOxPKOIY8B0WC8HN51hGP4I4hz4AaQ==} + engines: {node: '>=18'} + cpu: [arm] + os: [linux] + '@esbuild/linux-ia32@0.21.5': resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==} engines: {node: '>=12'} @@ -610,6 +673,12 @@ packages: cpu: [ia32] os: [linux] + '@esbuild/linux-ia32@0.25.4': + resolution: {integrity: sha512-yTEjoapy8UP3rv8dB0ip3AfMpRbyhSN3+hY8mo/i4QXFeDxmiYbEKp3ZRjBKcOP862Ua4b1PDfwlvbuwY7hIGQ==} + engines: {node: '>=18'} + cpu: [ia32] + os: [linux] + '@esbuild/linux-loong64@0.21.5': resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==} engines: {node: '>=12'} @@ -628,6 +697,12 @@ packages: cpu: [loong64] os: [linux] + '@esbuild/linux-loong64@0.25.4': + resolution: {integrity: sha512-NeqqYkrcGzFwi6CGRGNMOjWGGSYOpqwCjS9fvaUlX5s3zwOtn1qwg1s2iE2svBe4Q/YOG1q6875lcAoQK/F4VA==} + engines: {node: '>=18'} + cpu: [loong64] + os: [linux] + '@esbuild/linux-mips64el@0.21.5': resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==} engines: {node: '>=12'} @@ -646,6 +721,12 @@ packages: cpu: [mips64el] os: [linux] + '@esbuild/linux-mips64el@0.25.4': + resolution: {integrity: sha512-IcvTlF9dtLrfL/M8WgNI/qJYBENP3ekgsHbYUIzEzq5XJzzVEV/fXY9WFPfEEXmu3ck2qJP8LG/p3Q8f7Zc2Xg==} + engines: {node: '>=18'} + cpu: [mips64el] + os: [linux] + '@esbuild/linux-ppc64@0.21.5': resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==} engines: {node: '>=12'} @@ -664,6 +745,12 @@ packages: cpu: [ppc64] os: [linux] + '@esbuild/linux-ppc64@0.25.4': + resolution: {integrity: sha512-HOy0aLTJTVtoTeGZh4HSXaO6M95qu4k5lJcH4gxv56iaycfz1S8GO/5Jh6X4Y1YiI0h7cRyLi+HixMR+88swag==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [linux] + '@esbuild/linux-riscv64@0.21.5': resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==} engines: {node: '>=12'} @@ -682,6 +769,12 @@ packages: cpu: [riscv64] os: [linux] + '@esbuild/linux-riscv64@0.25.4': + resolution: {integrity: sha512-i8JUDAufpz9jOzo4yIShCTcXzS07vEgWzyX3NH2G7LEFVgrLEhjwL3ajFE4fZI3I4ZgiM7JH3GQ7ReObROvSUA==} + engines: {node: '>=18'} + cpu: [riscv64] + os: [linux] + '@esbuild/linux-s390x@0.21.5': resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==} engines: {node: '>=12'} @@ -700,6 +793,12 @@ packages: cpu: [s390x] os: [linux] + '@esbuild/linux-s390x@0.25.4': + resolution: {integrity: sha512-jFnu+6UbLlzIjPQpWCNh5QtrcNfMLjgIavnwPQAfoGx4q17ocOU9MsQ2QVvFxwQoWpZT8DvTLooTvmOQXkO51g==} + engines: {node: '>=18'} + cpu: [s390x] + os: [linux] + '@esbuild/linux-x64@0.21.5': resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==} engines: {node: '>=12'} @@ -718,6 +817,12 @@ packages: cpu: [x64] os: [linux] + '@esbuild/linux-x64@0.25.4': + resolution: {integrity: sha512-6e0cvXwzOnVWJHq+mskP8DNSrKBr1bULBvnFLpc1KY+d+irZSgZ02TGse5FsafKS5jg2e4pbvK6TPXaF/A6+CA==} + engines: {node: '>=18'} + cpu: [x64] + os: [linux] + '@esbuild/netbsd-arm64@0.24.2': resolution: {integrity: sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==} engines: {node: '>=18'} @@ -730,6 +835,12 @@ packages: cpu: [arm64] os: [netbsd] + '@esbuild/netbsd-arm64@0.25.4': + resolution: {integrity: sha512-vUnkBYxZW4hL/ie91hSqaSNjulOnYXE1VSLusnvHg2u3jewJBz3YzB9+oCw8DABeVqZGg94t9tyZFoHma8gWZQ==} + engines: {node: '>=18'} + cpu: [arm64] + os: [netbsd] + '@esbuild/netbsd-x64@0.21.5': resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==} engines: {node: '>=12'} @@ -748,6 +859,12 @@ packages: cpu: [x64] os: [netbsd] + '@esbuild/netbsd-x64@0.25.4': + resolution: {integrity: sha512-XAg8pIQn5CzhOB8odIcAm42QsOfa98SBeKUdo4xa8OvX8LbMZqEtgeWE9P/Wxt7MlG2QqvjGths+nq48TrUiKw==} + engines: {node: '>=18'} + cpu: [x64] + os: [netbsd] + '@esbuild/openbsd-arm64@0.24.2': resolution: {integrity: sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==} engines: {node: '>=18'} @@ -760,6 +877,12 @@ packages: cpu: [arm64] os: [openbsd] + '@esbuild/openbsd-arm64@0.25.4': + resolution: {integrity: sha512-Ct2WcFEANlFDtp1nVAXSNBPDxyU+j7+tId//iHXU2f/lN5AmO4zLyhDcpR5Cz1r08mVxzt3Jpyt4PmXQ1O6+7A==} + engines: {node: '>=18'} + cpu: [arm64] + os: [openbsd] + '@esbuild/openbsd-x64@0.21.5': resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==} engines: {node: '>=12'} @@ -778,6 +901,12 @@ packages: cpu: [x64] os: [openbsd] + '@esbuild/openbsd-x64@0.25.4': + resolution: {integrity: sha512-xAGGhyOQ9Otm1Xu8NT1ifGLnA6M3sJxZ6ixylb+vIUVzvvd6GOALpwQrYrtlPouMqd/vSbgehz6HaVk4+7Afhw==} + engines: {node: '>=18'} + cpu: [x64] + os: [openbsd] + '@esbuild/sunos-x64@0.21.5': resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==} engines: {node: '>=12'} @@ -796,6 +925,12 @@ packages: cpu: [x64] os: [sunos] + '@esbuild/sunos-x64@0.25.4': + resolution: {integrity: sha512-Mw+tzy4pp6wZEK0+Lwr76pWLjrtjmJyUB23tHKqEDP74R3q95luY/bXqXZeYl4NYlvwOqoRKlInQialgCKy67Q==} + engines: {node: '>=18'} + cpu: [x64] + os: [sunos] + '@esbuild/win32-arm64@0.21.5': resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==} engines: {node: '>=12'} @@ -814,6 +949,12 @@ packages: cpu: [arm64] os: [win32] + '@esbuild/win32-arm64@0.25.4': + resolution: {integrity: sha512-AVUP428VQTSddguz9dO9ngb+E5aScyg7nOeJDrF1HPYu555gmza3bDGMPhmVXL8svDSoqPCsCPjb265yG/kLKQ==} + engines: {node: '>=18'} + cpu: [arm64] + os: [win32] + '@esbuild/win32-ia32@0.21.5': resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==} engines: {node: '>=12'} @@ -832,6 +973,12 @@ packages: cpu: [ia32] os: [win32] + '@esbuild/win32-ia32@0.25.4': + resolution: {integrity: sha512-i1sW+1i+oWvQzSgfRcxxG2k4I9n3O9NRqy8U+uugaT2Dy7kLO9Y7wI72haOahxceMX8hZAzgGou1FhndRldxRg==} + engines: {node: '>=18'} + cpu: [ia32] + os: [win32] + '@esbuild/win32-x64@0.21.5': resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==} engines: {node: '>=12'} @@ -850,6 +997,12 @@ packages: cpu: [x64] os: [win32] + '@esbuild/win32-x64@0.25.4': + resolution: {integrity: sha512-nOT2vZNw6hJ+z43oP1SPea/G/6AbN6X+bGNhNuq8NtRHy4wsMhw765IKLNmnjek7GvjWBYQ8Q5VBoYTFg9y1UQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [win32] + '@eslint-community/eslint-utils@4.4.1': resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -1259,9 +1412,11 @@ packages: peerDependencies: semantic-release: ^22.0.12 || ^23.0.2 || ^24.0.0 - '@sanity/ui@2.15.14': - resolution: {integrity: sha512-n1Hn97A1W/ku6+hDhojlA601w03XjBBbeEH+e5n6nXBnLj81GjE5DsoJcZ+ZDQI47iGmGsvG1M8eAb6E2VPuuQ==} + '@sanity/ui@file:registry/sanity-ui-3.0.0-local.11.tgz': + resolution: {integrity: sha512-tdFIN8GU01vaW2AI7d6ZjvHE8iUvJF8k2RwKDq+5oOmsT0Wo06EvDspvA3lqs1IfnaodJLUUzJ6rXS4Uw25Bfw==, tarball: file:registry/sanity-ui-3.0.0-local.11.tgz} + version: 3.0.0-local.11 engines: {node: '>=14.0.0'} + hasBin: true peerDependencies: react: ^18 || >=19.0.0-0 react-dom: ^18 || >=19.0.0-0 @@ -2379,6 +2534,11 @@ packages: engines: {node: '>=18'} hasBin: true + esbuild@0.25.4: + resolution: {integrity: sha512-8pgjLUcUjcgDg+2Q4NYXnPbo/vncAY4UmyaCm0jZevERqCHZIaWwdJHkf8XQtu4AxSKCdvrUbT0XUr1IdZzI8Q==} + engines: {node: '>=18'} + hasBin: true + escalade@3.2.0: resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==} engines: {node: '>=6'} @@ -2732,8 +2892,8 @@ packages: resolution: {integrity: sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==} engines: {node: '>=0.10.0'} - framer-motion@12.9.2: - resolution: {integrity: sha512-R0O3Jdqbfwywpm45obP+8sTgafmdEcUoShQTAV+rB5pi+Y1Px/FYL5qLLRe5tPtBdN1J4jos7M+xN2VV2oEAbQ==} + framer-motion@12.11.3: + resolution: {integrity: sha512-ksUtDFBZtrbQFt4bEMFrFgo7camhmXcLeuylKQxEYSd9czkZ4tZmFROxWczWeu51WqC2m91ifpvgGCBLd0uviQ==} peerDependencies: '@emotion/is-prop-valid': '*' react: ^18.0.0 || ^19.0.0 @@ -3790,11 +3950,11 @@ packages: engines: {node: '>=10'} hasBin: true - motion-dom@12.9.1: - resolution: {integrity: sha512-xqXEwRLDYDTzOgXobSoWtytRtGlf7zdkRfFbrrdP7eojaGQZ5Go4OOKtgnx7uF8sAkfr1ZjMvbCJSCIT2h6fkQ==} + motion-dom@12.11.2: + resolution: {integrity: sha512-wZ396XNNTI9GOkyrr80wFSbZc1JbIHSHTbLdririSbkEgahWWKmsHzsxyxqBBvuBU/iaQWVu1YCjdpXYNfo2yQ==} - motion-utils@12.8.3: - resolution: {integrity: sha512-GYVauZEbca8/zOhEiYOY9/uJeedYQld6co/GJFKOy//0c/4lDqk0zB549sBYqqV2iMuX+uHrY1E5zd8A2L+1Lw==} + motion-utils@12.9.4: + resolution: {integrity: sha512-BW3I65zeM76CMsfh3kHid9ansEJk9Qvl+K5cu4DVHKGsI52n76OJ4z2CUJUV+Mn3uEP9k1JJA3tClG0ggSrRcg==} ms@2.0.0: resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} @@ -4373,11 +4533,6 @@ packages: resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==} hasBin: true - react-compiler-runtime@19.0.0-beta-e993439-20250405: - resolution: {integrity: sha512-uTvtVgJR21Xy7XAthYbC3R9V00V/U7xP3BWrwpSvcmHgtar8+TweghRIankQJLps/g7HIYxy+dnXCGBy0cKv5w==} - peerDependencies: - react: ^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental - react-compiler-runtime@19.1.0-rc.1: resolution: {integrity: sha512-wCt6g+cRh8g32QT18/9blfQHywGjYu+4FlEc3CW1mx3pPxYzZZl1y+VtqxRgnKKBCFLIGUYxog4j4rs5YS86hw==} peerDependencies: @@ -5830,6 +5985,9 @@ snapshots: '@esbuild/aix-ppc64@0.25.3': optional: true + '@esbuild/aix-ppc64@0.25.4': + optional: true + '@esbuild/android-arm64@0.21.5': optional: true @@ -5839,6 +5997,9 @@ snapshots: '@esbuild/android-arm64@0.25.3': optional: true + '@esbuild/android-arm64@0.25.4': + optional: true + '@esbuild/android-arm@0.21.5': optional: true @@ -5848,6 +6009,9 @@ snapshots: '@esbuild/android-arm@0.25.3': optional: true + '@esbuild/android-arm@0.25.4': + optional: true + '@esbuild/android-x64@0.21.5': optional: true @@ -5857,6 +6021,9 @@ snapshots: '@esbuild/android-x64@0.25.3': optional: true + '@esbuild/android-x64@0.25.4': + optional: true + '@esbuild/darwin-arm64@0.21.5': optional: true @@ -5866,6 +6033,9 @@ snapshots: '@esbuild/darwin-arm64@0.25.3': optional: true + '@esbuild/darwin-arm64@0.25.4': + optional: true + '@esbuild/darwin-x64@0.21.5': optional: true @@ -5875,6 +6045,9 @@ snapshots: '@esbuild/darwin-x64@0.25.3': optional: true + '@esbuild/darwin-x64@0.25.4': + optional: true + '@esbuild/freebsd-arm64@0.21.5': optional: true @@ -5884,6 +6057,9 @@ snapshots: '@esbuild/freebsd-arm64@0.25.3': optional: true + '@esbuild/freebsd-arm64@0.25.4': + optional: true + '@esbuild/freebsd-x64@0.21.5': optional: true @@ -5893,6 +6069,9 @@ snapshots: '@esbuild/freebsd-x64@0.25.3': optional: true + '@esbuild/freebsd-x64@0.25.4': + optional: true + '@esbuild/linux-arm64@0.21.5': optional: true @@ -5902,6 +6081,9 @@ snapshots: '@esbuild/linux-arm64@0.25.3': optional: true + '@esbuild/linux-arm64@0.25.4': + optional: true + '@esbuild/linux-arm@0.21.5': optional: true @@ -5911,6 +6093,9 @@ snapshots: '@esbuild/linux-arm@0.25.3': optional: true + '@esbuild/linux-arm@0.25.4': + optional: true + '@esbuild/linux-ia32@0.21.5': optional: true @@ -5920,6 +6105,9 @@ snapshots: '@esbuild/linux-ia32@0.25.3': optional: true + '@esbuild/linux-ia32@0.25.4': + optional: true + '@esbuild/linux-loong64@0.21.5': optional: true @@ -5929,6 +6117,9 @@ snapshots: '@esbuild/linux-loong64@0.25.3': optional: true + '@esbuild/linux-loong64@0.25.4': + optional: true + '@esbuild/linux-mips64el@0.21.5': optional: true @@ -5938,6 +6129,9 @@ snapshots: '@esbuild/linux-mips64el@0.25.3': optional: true + '@esbuild/linux-mips64el@0.25.4': + optional: true + '@esbuild/linux-ppc64@0.21.5': optional: true @@ -5947,6 +6141,9 @@ snapshots: '@esbuild/linux-ppc64@0.25.3': optional: true + '@esbuild/linux-ppc64@0.25.4': + optional: true + '@esbuild/linux-riscv64@0.21.5': optional: true @@ -5956,6 +6153,9 @@ snapshots: '@esbuild/linux-riscv64@0.25.3': optional: true + '@esbuild/linux-riscv64@0.25.4': + optional: true + '@esbuild/linux-s390x@0.21.5': optional: true @@ -5965,6 +6165,9 @@ snapshots: '@esbuild/linux-s390x@0.25.3': optional: true + '@esbuild/linux-s390x@0.25.4': + optional: true + '@esbuild/linux-x64@0.21.5': optional: true @@ -5974,12 +6177,18 @@ snapshots: '@esbuild/linux-x64@0.25.3': optional: true + '@esbuild/linux-x64@0.25.4': + optional: true + '@esbuild/netbsd-arm64@0.24.2': optional: true '@esbuild/netbsd-arm64@0.25.3': optional: true + '@esbuild/netbsd-arm64@0.25.4': + optional: true + '@esbuild/netbsd-x64@0.21.5': optional: true @@ -5989,12 +6198,18 @@ snapshots: '@esbuild/netbsd-x64@0.25.3': optional: true + '@esbuild/netbsd-x64@0.25.4': + optional: true + '@esbuild/openbsd-arm64@0.24.2': optional: true '@esbuild/openbsd-arm64@0.25.3': optional: true + '@esbuild/openbsd-arm64@0.25.4': + optional: true + '@esbuild/openbsd-x64@0.21.5': optional: true @@ -6004,6 +6219,9 @@ snapshots: '@esbuild/openbsd-x64@0.25.3': optional: true + '@esbuild/openbsd-x64@0.25.4': + optional: true + '@esbuild/sunos-x64@0.21.5': optional: true @@ -6013,6 +6231,9 @@ snapshots: '@esbuild/sunos-x64@0.25.3': optional: true + '@esbuild/sunos-x64@0.25.4': + optional: true + '@esbuild/win32-arm64@0.21.5': optional: true @@ -6022,6 +6243,9 @@ snapshots: '@esbuild/win32-arm64@0.25.3': optional: true + '@esbuild/win32-arm64@0.25.4': + optional: true + '@esbuild/win32-ia32@0.21.5': optional: true @@ -6031,6 +6255,9 @@ snapshots: '@esbuild/win32-ia32@0.25.3': optional: true + '@esbuild/win32-ia32@0.25.4': + optional: true + '@esbuild/win32-x64@0.21.5': optional: true @@ -6040,6 +6267,9 @@ snapshots: '@esbuild/win32-x64@0.25.3': optional: true + '@esbuild/win32-x64@0.25.4': + optional: true + '@eslint-community/eslint-utils@4.4.1(eslint@8.57.1)': dependencies: eslint: 8.57.1 @@ -6486,16 +6716,18 @@ snapshots: transitivePeerDependencies: - supports-color - '@sanity/ui@2.15.14(@emotion/is-prop-valid@1.2.2)(react-dom@19.1.0(react@19.1.0))(react-is@19.1.0)(react@19.1.0)(styled-components@6.1.17(react-dom@19.1.0(react@19.1.0))(react@19.1.0))': + '@sanity/ui@file:registry/sanity-ui-3.0.0-local.11.tgz(@emotion/is-prop-valid@1.2.2)(react-dom@19.1.0(react@19.1.0))(react-is@19.1.0)(react@19.1.0)(styled-components@6.1.17(react-dom@19.1.0(react@19.1.0))(react@19.1.0))': dependencies: '@floating-ui/react-dom': 2.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@juggle/resize-observer': 3.4.0 '@sanity/color': 3.0.6 '@sanity/icons': 3.7.0(react@19.1.0) csstype: 3.1.3 - framer-motion: 12.9.2(@emotion/is-prop-valid@1.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + dotenv-flow: 4.1.0 + esbuild: 0.25.4 + framer-motion: 12.11.3(@emotion/is-prop-valid@1.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) react: 19.1.0 - react-compiler-runtime: 19.0.0-beta-e993439-20250405(react@19.1.0) + react-compiler-runtime: 19.1.0-rc.1(react@19.1.0) react-dom: 19.1.0(react@19.1.0) react-is: 19.1.0 react-refractor: 2.2.0(react@19.1.0) @@ -7912,6 +8144,34 @@ snapshots: '@esbuild/win32-ia32': 0.25.3 '@esbuild/win32-x64': 0.25.3 + esbuild@0.25.4: + optionalDependencies: + '@esbuild/aix-ppc64': 0.25.4 + '@esbuild/android-arm': 0.25.4 + '@esbuild/android-arm64': 0.25.4 + '@esbuild/android-x64': 0.25.4 + '@esbuild/darwin-arm64': 0.25.4 + '@esbuild/darwin-x64': 0.25.4 + '@esbuild/freebsd-arm64': 0.25.4 + '@esbuild/freebsd-x64': 0.25.4 + '@esbuild/linux-arm': 0.25.4 + '@esbuild/linux-arm64': 0.25.4 + '@esbuild/linux-ia32': 0.25.4 + '@esbuild/linux-loong64': 0.25.4 + '@esbuild/linux-mips64el': 0.25.4 + '@esbuild/linux-ppc64': 0.25.4 + '@esbuild/linux-riscv64': 0.25.4 + '@esbuild/linux-s390x': 0.25.4 + '@esbuild/linux-x64': 0.25.4 + '@esbuild/netbsd-arm64': 0.25.4 + '@esbuild/netbsd-x64': 0.25.4 + '@esbuild/openbsd-arm64': 0.25.4 + '@esbuild/openbsd-x64': 0.25.4 + '@esbuild/sunos-x64': 0.25.4 + '@esbuild/win32-arm64': 0.25.4 + '@esbuild/win32-ia32': 0.25.4 + '@esbuild/win32-x64': 0.25.4 + escalade@3.2.0: {} escape-html@1.0.3: {} @@ -8403,10 +8663,10 @@ snapshots: dependencies: map-cache: 0.2.2 - framer-motion@12.9.2(@emotion/is-prop-valid@1.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0): + framer-motion@12.11.3(@emotion/is-prop-valid@1.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0): dependencies: - motion-dom: 12.9.1 - motion-utils: 12.8.3 + motion-dom: 12.11.2 + motion-utils: 12.9.4 tslib: 2.8.1 optionalDependencies: '@emotion/is-prop-valid': 1.2.2 @@ -9472,11 +9732,11 @@ snapshots: mkdirp@3.0.1: {} - motion-dom@12.9.1: + motion-dom@12.11.2: dependencies: - motion-utils: 12.8.3 + motion-utils: 12.9.4 - motion-utils@12.8.3: {} + motion-utils@12.9.4: {} ms@2.0.0: {} @@ -9978,10 +10238,6 @@ snapshots: minimist: 1.2.8 strip-json-comments: 2.0.1 - react-compiler-runtime@19.0.0-beta-e993439-20250405(react@19.1.0): - dependencies: - react: 19.1.0 - react-compiler-runtime@19.1.0-rc.1(react@19.1.0): dependencies: react: 19.1.0 diff --git a/src/core/GlobalStyle.ts b/src/core/GlobalStyle.ts index 2bd8c492..46333230 100644 --- a/src/core/GlobalStyle.ts +++ b/src/core/GlobalStyle.ts @@ -1,3 +1,4 @@ +import {vars} from '@sanity/ui/css' import {createGlobalStyle} from 'styled-components' export const GlobalStyle = createGlobalStyle` @@ -20,6 +21,7 @@ export const GlobalStyle = createGlobalStyle` } body { - background-color: ${({theme}) => theme.sanity.color.base.bg}; + background-color: ${vars.color.bg}; + overflow: hidden; } ` diff --git a/src/core/RootClassNames.tsx b/src/core/RootClassNames.tsx new file mode 100644 index 00000000..18c3cee4 --- /dev/null +++ b/src/core/RootClassNames.tsx @@ -0,0 +1,39 @@ +import {_raf2, useCard} from '@sanity/ui' +import {card, scopeClassName as _} from '@sanity/ui/css' +import {ReactNode, useEffect} from 'react' + +export function RootClassNames(props: {element: HTMLElement}): ReactNode { + const {element} = props + const {scheme, tone} = useCard() + + useEffect(() => { + const els = document.querySelectorAll( + [_('button'), _('card'), _('font')].map((n) => `.${n}`).join(', '), + ) + + // temporarily disable all transitions when the theme changes + for (const el of els) { + if (el instanceof HTMLElement) { + el.style.transition = 'none' + } + } + + _raf2(() => { + document.documentElement.className = card({scheme, tone}) ?? '' + + _raf2(() => { + for (const el of els) { + if (el instanceof HTMLElement) { + el.style.transition = '' + } + } + }) + }) + + return () => { + document.documentElement.className = '' + } + }, [element, scheme, tone]) + + return null +} diff --git a/src/core/config/types.ts b/src/core/config/types.ts index 12048cd6..85d6dff7 100644 --- a/src/core/config/types.ts +++ b/src/core/config/types.ts @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import {RootTheme} from '@sanity/ui' + +import {PartialTokens, Tokens} from '@sanity/ui/theme' import {ElementType, ReactNode} from 'react' /** @public */ @@ -32,7 +33,7 @@ export interface WorkshopConfig { frameUrl?: string plugins?: WorkshopPlugin[] scopes: WorkshopScope[] - theme?: RootTheme + theme?: PartialTokens title?: string } diff --git a/src/core/inspector/InspectorHeader.tsx b/src/core/inspector/InspectorHeader.tsx index a9b12131..453c9a63 100644 --- a/src/core/inspector/InspectorHeader.tsx +++ b/src/core/inspector/InspectorHeader.tsx @@ -9,7 +9,7 @@ const MemoTab = memo(Tab) const Root = styled(Card)` line-height: 0; - @media screen and (max-width: ${({theme}) => theme.sanity.media[1] - 1}px) { + @media screen and (max-width: 600px) { text-align: center; } ` diff --git a/src/core/inspector/WorkshopInspector.tsx b/src/core/inspector/WorkshopInspector.tsx index 44c37cf8..51085aee 100644 --- a/src/core/inspector/WorkshopInspector.tsx +++ b/src/core/inspector/WorkshopInspector.tsx @@ -11,7 +11,7 @@ import {InspectorTab} from './types' const Root = styled(Card)` overflow: hidden; - @media screen and (min-width: ${({theme}) => theme.sanity.media[1]}px) { + @media screen and (min-width: 600px) { border-left: 1px solid var(--card-border-color); min-width: 180px; max-width: 300px; diff --git a/src/core/mount.tsx b/src/core/mount.tsx index 1049cc27..6325dd2e 100644 --- a/src/core/mount.tsx +++ b/src/core/mount.tsx @@ -1,10 +1,12 @@ -import {studioTheme, ThemeColorSchemeKey, ThemeProvider, usePrefersDark} from '@sanity/ui' +import {CardProvider, StyleTags, usePrefersDark} from '@sanity/ui' +import {buildTheme_v3, ThemeColorSchemeKey} from '@sanity/ui/theme' import {StrictMode, useEffect, useMemo, useState} from 'react' import {createRoot} from 'react-dom/client' import {WorkshopConfig} from './config' import {GlobalStyle} from './GlobalStyle' import {createLocationStore} from './location' +import {RootClassNames} from './RootClassNames' import {Workshop} from './Workshop' /** @beta */ @@ -24,6 +26,7 @@ export function mount(options: {config: WorkshopConfig; element: HTMLElement | n function Root(props: {config: WorkshopConfig}) { const {config} = props + const theme = useMemo(() => buildTheme_v3({tokens: config.theme}), [config.theme]) const prefersDark = usePrefersDark() const [scheme, setScheme] = useState(prefersDark ? 'dark' : 'light') const locationStore = useMemo(() => createLocationStore(), []) @@ -33,7 +36,9 @@ function Root(props: {config: WorkshopConfig}) { }, [prefersDark]) return ( - + + + - + ) } diff --git a/src/core/mountFrame.tsx b/src/core/mountFrame.tsx index d5425e78..70aed22f 100644 --- a/src/core/mountFrame.tsx +++ b/src/core/mountFrame.tsx @@ -1,4 +1,5 @@ -import {studioTheme, ThemeColorSchemeKey, ThemeProvider, usePrefersDark} from '@sanity/ui' +import {CardProvider, usePrefersDark} from '@sanity/ui' +import {ThemeColorSchemeKey} from '@sanity/ui/theme' import {StrictMode, useState} from 'react' import {createRoot} from 'react-dom/client' @@ -27,9 +28,9 @@ function Root(props: {config: WorkshopConfig}) { const [scheme, setScheme] = useState(prefersDark ? 'dark' : 'light') return ( - + - + ) } diff --git a/src/core/navigator/StoryTree.tsx b/src/core/navigator/StoryTree.tsx index 346260d4..1fb6640f 100644 --- a/src/core/navigator/StoryTree.tsx +++ b/src/core/navigator/StoryTree.tsx @@ -67,7 +67,7 @@ const MenuItems = memo(function MenuItems(props: { fontSize={[2, 2, 1]} href={`/${item.name || ''}`} key={item.name} - onClick={handleStoryClick} + onClick={handleStoryClick as any} padding={2} selected={currentStory?.component === item.component} text={item.title} @@ -128,7 +128,7 @@ const MemoScope = memo(function MemoScope(props: { fontSize={[2, 2, 1]} href={`/${item.scope.name}/${story.name}`} key={story.name} - onClick={onStoryClick} + onClick={onStoryClick as any} padding={2} selected={currentStory === story} text={story.title} diff --git a/src/core/navigator/WorkshopNavigator.tsx b/src/core/navigator/WorkshopNavigator.tsx index f8c479dd..41041b39 100644 --- a/src/core/navigator/WorkshopNavigator.tsx +++ b/src/core/navigator/WorkshopNavigator.tsx @@ -1,5 +1,7 @@ import {SearchIcon} from '@sanity/icons' import {Box, BoxDisplay, Card, Flex, Layer, TextInput} from '@sanity/ui' +import {ResponsiveProp} from '@sanity/ui/css' +import {FontTextSize} from '@sanity/ui/theme' import {memo, useCallback, useMemo, useState} from 'react' import styled from 'styled-components' @@ -14,7 +16,7 @@ import {MenuCollection, MenuList, MenuScope} from './types' const Root = styled(Card)` overflow: hidden; - @media screen and (min-width: ${({theme}) => theme.sanity.media[1]}px) { + @media screen and (min-width: 600px) { border-right: 1px solid var(--card-border-color); min-width: 180px; max-width: 300px; @@ -24,7 +26,7 @@ const Root = styled(Card)` const flexNoneStyle: React.CSSProperties = {flex: 'none'} const lineHeightNoneStyle: React.CSSProperties = {lineHeight: 0} -const textInputFontSize = [2, 2, 1] +const textInputFontSize: ResponsiveProp = [2, 2, 1] /** @internal */ export const WorkshopNavigator = memo(function WorkshopNavigator(props: { diff --git a/src/core/plugins/props/components/booleanProp.tsx b/src/core/plugins/props/components/booleanProp.tsx index d4874b45..e9eb0a57 100644 --- a/src/core/plugins/props/components/booleanProp.tsx +++ b/src/core/plugins/props/components/booleanProp.tsx @@ -17,7 +17,7 @@ export const BooleanProp = memo(function BooleanProp(props: { setPropValue(schema.name, event.currentTarget.checked)} + onChange={(event: any) => setPropValue(schema.name, event.currentTarget.checked)} /> diff --git a/src/core/plugins/props/components/numberProp.tsx b/src/core/plugins/props/components/numberProp.tsx index 81310c66..fd14a7c0 100644 --- a/src/core/plugins/props/components/numberProp.tsx +++ b/src/core/plugins/props/components/numberProp.tsx @@ -20,7 +20,7 @@ export const NumberProp = memo(function NumberProp(props: { setPropValue(schema.name, Number(event.currentTarget.value))} + onChange={(event: any) => setPropValue(schema.name, Number(event.currentTarget.value))} padding={2} value={value} /> diff --git a/src/core/plugins/props/components/selectProp.tsx b/src/core/plugins/props/components/selectProp.tsx index 574451be..58076f3f 100644 --- a/src/core/plugins/props/components/selectProp.tsx +++ b/src/core/plugins/props/components/selectProp.tsx @@ -33,7 +33,7 @@ export const SelectProp = memo(function SelectProp(props: {