@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

package/package.json

@@ -1,224 +1,95 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-v4.1",
+  "version": "5.0.0-alpha.2",
+  "description": "Sanity UI Library",
   "keywords": [
-    "react",
-    "ui",
-    "kit",
-    "library",
-    "primitives",
     "components",
-    "utils"
+    "design-system",
+    "primitives",
+    "react",
+    "sanity",
+    "ui"
   ],
-  "homepage": "https://www.sanity.io/",
+  "homepage": "https://github.com/sanity-io/ui#readme",
   "bugs": {
     "url": "https://github.com/sanity-io/ui/issues"
   },
+  "license": "ISC",
+  "author": "Sanity",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sanity-io/ui.git"
   },
-  "license": "MIT",
-  "author": "Sanity.io <hello@sanity.io>",
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "type": "module",
-  "exports": {
-    ".": {
-      "source": "./exports/index.ts",
-      "default": "./dist/index.js"
-    },
-    "./css": {
-      "source": "./exports/css.ts",
-      "default": "./dist/css/index.js"
-    },
-    "./css/index.css": "./dist/css/index.css",
-    "./package.json": "./package.json",
-    "./theme": {
-      "source": "./exports/theme.ts",
-      "default": "./dist/theme.js"
-    }
-  },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "css": [
-        "./dist/css.d.ts"
-      ],
-      "theme": [
-        "./dist/theme.d.ts"
-      ]
-    }
+  "bin": {
+    "sanity-ui": "./bin/sanity-ui.js"
   },
   "files": [
+    "bin",
     "dist",
-    "exports",
     "src"
   ],
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check",
-    "clean": "rimraf dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "dev": "run-p workshop:dev storybook:dev",
-    "figma:build": "pnpm run --filter 'figma-plugin-sanity-ui' build",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint .",
-    "prepack": "pnpm build",
-    "pkg:build": "mkdirp dist/css && touch dist/css/index.css && NODE_ENV=production pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "pkg:watch": "mkdirp dist/css && touch dist/css/index.css && NODE_ENV=production pkg watch --strict",
-    "prepare": "husky install",
-    "release": "semantic-release",
-    "storybook:build": "pnpm run --filter 'sanity-ui-storybook' build",
-    "storybook:dev": "pnpm run --filter 'sanity-ui-storybook' dev",
-    "test": "vitest run",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:preview' http://localhost:1337 'run-s cypress:run'",
-    "typecheck": "tsc --build",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:clean": "rimraf .workshop",
-    "workshop:dev": "run-s workshop:clean && workshop dev",
-    "workshop:preview": "workshop preview"
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "lint-staged": {
-    "*": [
-      "prettier --write --cache --ignore-unknown"
-    ]
-  },
-  "browserslist": "extends @sanity/browserslist-config",
-  "release": {
-    "branches": [
-      {
-        "name": "v2",
-        "range": "2.x",
-        "channel": "v2"
-      },
-      "main",
-      {
-        "name": "v4",
-        "channel": "static",
-        "prerelease": true
-      }
-    ],
-    "extends": "@sanity/semantic-release-preset"
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json",
+    "./styles.css": {
+      "types": "./src/styles.css.d.ts",
+      "browser": "./dist/styles.css",
+      "style": "./dist/styles.css",
+      "node": "./src/styles.css.node.js",
+      "default": "./src/styles.css.node.js"
+    }
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.6",
-    "@juggle/resize-observer": "^3.4.0",
-    "@sanity/color": "^3.0.6",
+    "@sanity-labs/design-tokens": "0.0.2-alpha.4",
     "@sanity/icons": "^3.7.4",
-    "@vanilla-extract/dynamic": "^2.1.5",
-    "csstype": "^3.1.3",
-    "framer-motion": "^12.23.12",
-    "react-refractor": "^4.0.0",
-    "use-effect-event": "^2.0.3"
+    "clsx": "^2.1.1",
+    "comment-json": "^5.0.0",
+    "react-refractor": "^4.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.3",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
-    "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/js": "^9.34.0",
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/pkg-utils": "^8.1.1",
-    "@sanity/prettier-config": "^2.0.1",
-    "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "4.0.0-static.11",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.3.0",
-    "@types/react": "^19.1.11",
-    "@types/react-dom": "^19.1.8",
-    "@types/react-is": "^19.0.0",
-    "@vanilla-extract/css": "^1.17.4",
-    "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vitejs/plugin-react": "^5.0.1",
-    "@vitest/browser": "^3.2.4",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
-    "browserslist-config-baseline": "^0.5.0",
-    "cac": "^6.7.14",
-    "commitizen": "^4.3.1",
-    "cypress": "^13.17.0",
-    "cypress-real-events": "^1.14.0",
-    "cz-conventional-changelog": "^3.3.0",
-    "dotenv-flow": "^4.1.0",
-    "eslint": "^9.34.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-formatter-compact": "^8.40.0",
-    "eslint-plugin-boundaries": "^5.0.1",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-compiler": "19.1.0-rc.2",
-    "eslint-plugin-react-hooks": "0.0.0-experimental-66f09bd0-20250806",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^9.1.3",
-    "globals": "^16.3.0",
-    "husky": "^8.0.3",
-    "jsdom": "^26.1.0",
-    "lint-staged": "^14.0.1",
-    "mkdirp": "^3.0.1",
-    "npm-run-all2": "^8.0.4",
-    "prettier": "^3.6.2",
-    "prettier-plugin-packagejson": "^2.5.19",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-is": "^19.1.1",
-    "refractor": "^5.0.0",
-    "rimraf": "^5.0.10",
-    "semantic-release": "24.2.7",
-    "start-server-and-test": "^2.0.13",
-    "styled-components": "^6.1.19",
-    "tsconfig-paths": "^4.2.0",
-    "typescript": "5.9.2",
-    "typescript-eslint": "^8.41.0",
-    "vite": "^7.1.3",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.4",
-    "vitest-axe": "1.0.0-pre.5"
+    "@sanity/pkg-utils": "^10.8.2",
+    "@sanity/tsconfig": "^1.0.0",
+    "@types/node": "^25.5.2",
+    "@types/postcss-import": "^14.0.3",
+    "@types/postcss-prefix-selector": "^1.16.3",
+    "@types/react": "^19.2.17",
+    "autoprefixer": "^10.4.27",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "concurrently": "^9.2.1",
+    "cssnano": "^8.0.0",
+    "postcss": "^8.5.14",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
+    "postcss-prefix-selector": "^2.1.1",
+    "postcss-selector-parser": "^7.1.1",
+    "rimraf": "^6.1.3",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.1"
   },
   "peerDependencies": {
-    "react": "^19",
-    "react-dom": "^19",
-    "react-is": "^19"
+    "react": "^19.2",
+    "react-dom": "^19.2"
   },
-  "packageManager": "pnpm@10.14.0",
   "engines": {
     "node": ">=20.19 <22 || >=22.12"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "cypress"
-    ],
-    "overrides": {
-      "@types/react": "$@types/react",
-      "@types/react-dom": "$@types/react-dom",
-      "@types/react-is": "$@types/react-is",
-      "conventional-changelog-conventionalcommits": ">= 8.0.0",
-      "react": "$react",
-      "react-dom": "$react-dom",
-      "react-is": "$react-is"
-    }
-  },
-  "esm.sh": {
-    "bundle": false
+  "scripts": {
+    "build": "pnpm run sync-version && pnpm run clean && pnpm run build:css && pnpm run build:js && pnpm run build:cli",
+    "build:cli": "tsc -p tsconfig.cli.json",
+    "build:css": "NODE_ENV=production postcss src/index.css -o dist/styles.css",
+    "build:js": "pkg build --strict --check",
+    "clean": "rimraf dist",
+    "dev": "concurrently -n css,js \"pnpm run dev:css\" \"pnpm run dev:js\"",
+    "dev:css": "postcss src/index.css -o dist/styles.css --watch",
+    "dev:js": "pkg watch",
+    "sync-version": "node scripts/write-version.js",
+    "test": "vitest run",
+    "ts:check": "tsc --noEmit"
   }
-}
+}

package/src/cli/checks.test.ts

@@ -0,0 +1,38 @@
+import {mkdtempSync, rmSync, writeFileSync} from 'node:fs'
+import {tmpdir} from 'node:os'
+import {join} from 'node:path'
+
+import {afterEach, beforeEach, describe, expect, it} from 'vitest'
+
+import {collectChecks} from './checks.js'
+import {writeInstalledUiVersion} from './test-utils.js'
+
+describe('collectChecks tsconfig', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-checks-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('fails (not passes) when tsconfig.json cannot be parsed', () => {
+    // Genuinely unparseable (unterminated object), not just JSONC that
+    // comment-json would tolerate.
+    writeFileSync(join(dir, 'tsconfig.json'), '{ "compilerOptions": { "jsx": "react-jsx"')
+    const {checks} = collectChecks(dir)
+    const tsconfig = checks.find((c) => c.id === 'tsconfig')
+    expect(tsconfig?.status).toBe('fail')
+    expect(tsconfig?.detail).toMatch(/could not be parsed/)
+  })
+
+  it('fails the version check when @sanity/ui is pre-v5', () => {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({dependencies: {}}))
+    writeInstalledUiVersion(dir, '3.5.1')
+    const {checks} = collectChecks(dir)
+    expect(checks.find((c) => c.id === 'install')?.status).toBe('pass')
+    const version = checks.find((c) => c.id === 'version')
+    expect(version?.status).toBe('fail')
+    expect(version?.detail).toMatch(/pre-v5 \(expected v5\)/)
+  })
+})

package/src/cli/checks.ts

@@ -0,0 +1,200 @@
+import {existsSync, readFileSync} from 'node:fs'
+import {createRequire} from 'node:module'
+import {dirname, join} from 'node:path'
+import process from 'node:process'
+
+import {
+  detect,
+  isPackageInstalled,
+  isLegacyUiVersion,
+  PACKAGE_NAME,
+  readInstalledPackageVersion,
+} from './detect.js'
+import {inspectStylesheet, STYLES_SPECIFIER} from './styles.js'
+import {inspectTsconfig} from './tsconfig.js'
+import type {Check, CheckStatus, Detected} from './types.js'
+import {meetsNode, meetsReact, NODE_REQUIREMENT, REACT_MIN} from './versions.js'
+
+const ICONS = '@sanity/icons'
+
+/** Resolves the built stylesheet on disk (not the Node no-op shim). */
+function resolveStylesheet(cwd: string): string | null {
+  try {
+    const require = createRequire(join(cwd, 'noop.js'))
+    const pkgJsonPath = require.resolve(`${PACKAGE_NAME}/package.json`)
+    const path = join(dirname(pkgJsonPath), 'dist/styles.css')
+    return existsSync(path) ? path : null
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Without a browser, "a component renders with a computed background" is
+ * verified by confirming the resolved stylesheet ships the component class and
+ * a background declaration for it. If both are present and the import is wired,
+ * the component renders styled.
+ */
+function stylesheetHasComponentStyles(path: string): boolean {
+  try {
+    const css = readFileSync(path, 'utf8')
+    return /\.sui-Card\b/.test(css) && /background/.test(css)
+  } catch {
+    return false
+  }
+}
+
+interface CheckMeta {
+  title: string
+  detail?: string
+  fix?: string
+  status?: CheckStatus
+}
+
+function check(id: string, ok: boolean, meta: CheckMeta): Check {
+  return {
+    id,
+    title: meta.title,
+    ok,
+    status: meta.status ?? (ok ? 'pass' : 'fail'),
+    detail: meta.detail,
+    fix: meta.fix,
+  }
+}
+
+export interface CheckReport {
+  detected: Detected
+  checks: Check[]
+  stylesheetPath: string | null
+}
+
+/**
+ * Runs every verification and returns structured results. `doctor` prints them
+ * all; `init` reuses a subset on exit. Pure read-only.
+ */
+export function collectChecks(cwd: string): CheckReport {
+  const detected = detect(cwd)
+  const checks: Check[] = []
+
+  const installedVersion = readInstalledPackageVersion(cwd, PACKAGE_NAME)
+  checks.push(
+    check('install', Boolean(installedVersion), {
+      title: 'Package installed',
+      detail: installedVersion ? `${PACKAGE_NAME}@${installedVersion}` : 'not installed',
+      fix: `Run \`npx ${PACKAGE_NAME}@alpha init\` or install it with your package manager`,
+    }),
+  )
+
+  if (installedVersion) {
+    const legacyInstalled = isLegacyUiVersion(installedVersion)
+    checks.push(
+      check('version', !legacyInstalled, {
+        title: 'Package version',
+        detail: legacyInstalled
+          ? `${PACKAGE_NAME}@${installedVersion} is pre-v5 (expected v5)`
+          : `${PACKAGE_NAME}@${installedVersion}`,
+        fix: `Remove the existing @sanity/ui version, or install v5 with a package alias — see README "For apps using Sanity UI v3"`,
+      }),
+    )
+  }
+
+  const iconsInstalled = isPackageInstalled(cwd, ICONS)
+  checks.push(
+    check('icons', iconsInstalled, {
+      title: 'Icons installed',
+      detail: iconsInstalled ? `${ICONS} present` : `${ICONS} missing`,
+      fix: `Install it: add ${ICONS}`,
+    }),
+  )
+
+  const stylesheetPath = resolveStylesheet(cwd)
+  const stylesheetResolves = Boolean(stylesheetPath)
+  checks.push(
+    check('stylesheet-resolves', stylesheetResolves, {
+      title: 'Stylesheet resolves',
+      detail: stylesheetResolves ? `${PACKAGE_NAME}/styles.css` : 'cannot resolve styles.css',
+      fix: 'Reinstall the package, or build it if working inside this monorepo',
+    }),
+  )
+
+  const stylesheet = inspectStylesheet(cwd, detected.entry)
+  checks.push(
+    check('stylesheet-wired', stylesheet.imported, {
+      title: 'Stylesheet imported',
+      detail: stylesheet.imported
+        ? `imported in ${stylesheet.importedIn ?? detected.entry}`
+        : stylesheet.exists
+          ? `missing from ${detected.entry}`
+          : `entry file ${detected.entry} not found`,
+      fix: `Add \`import '${STYLES_SPECIFIER}'\` to ${detected.entry}`,
+    }),
+  )
+
+  if (detected.typescript) {
+    const tsconfig = inspectTsconfig(cwd)
+    const loadBearing = tsconfig.changes.filter((c) => c.load)
+    // An unreadable file has no changes to report, so guard against it explicitly
+    // rather than letting an empty change list read as "all good".
+    const ok = tsconfig.exists && !tsconfig.unreadable && loadBearing.length === 0
+    checks.push(
+      check('tsconfig', ok, {
+        title: 'tsconfig options',
+        detail: !tsconfig.exists
+          ? 'tsconfig.json not found'
+          : tsconfig.unreadable
+            ? 'tsconfig.json could not be parsed'
+            : loadBearing.length === 0
+              ? tsconfig.changes.length === 0
+                ? 'all required options set'
+                : 'required options set (some optional additions available)'
+              : `needs: ${loadBearing.map((c) => `${c.key}: ${String(c.to)}`).join(', ')}`,
+        fix: tsconfig.unreadable
+          ? 'Fix the JSON syntax in tsconfig.json'
+          : `Run \`npx ${PACKAGE_NAME}@alpha init\` to reconcile tsconfig.json`,
+      }),
+    )
+  }
+
+  const reactVersion = detected.react.version
+  const reactOk = reactVersion ? meetsReact(reactVersion) : false
+  checks.push(
+    check('react', reactOk, {
+      title: 'React version',
+      status: reactVersion ? (reactOk ? 'pass' : 'fail') : 'warn',
+      detail: reactVersion ? `react ${reactVersion}` : 'react not detected',
+      fix: `Upgrade React to >= ${REACT_MIN}`,
+    }),
+  )
+
+  const nodeVersion = process.versions.node
+  checks.push(
+    check('node', meetsNode(nodeVersion), {
+      title: 'Node version',
+      detail: `node ${nodeVersion} (requires ${NODE_REQUIREMENT})`,
+      fix: `Use Node ${NODE_REQUIREMENT}`,
+    }),
+  )
+
+  return {detected, checks, stylesheetPath}
+}
+
+/** The subset `init` verifies on exit, plus the render probe. */
+export function verifyAfterInit(cwd: string): Check[] {
+  const {checks, stylesheetPath} = collectChecks(cwd)
+  const ids = new Set(['stylesheet-resolves', 'stylesheet-wired', 'tsconfig'])
+  const subset = checks.filter((c) => ids.has(c.id))
+
+  const probeOk = stylesheetPath ? stylesheetHasComponentStyles(stylesheetPath) : false
+  subset.push({
+    id: 'probe',
+    title: 'Probe renders with background',
+    ok: probeOk,
+    status: probeOk ? 'pass' : 'fail',
+    detail: stylesheetPath
+      ? 'Card ships a background declaration'
+      : 'stylesheet not resolved, cannot probe',
+    fix: 'Ensure the package is installed and built',
+  })
+
+  return subset
+}

package/src/cli/config.ts

@@ -0,0 +1,44 @@
+import {existsSync, writeFileSync} from 'node:fs'
+import {join} from 'node:path'
+
+import type {Framework} from './types.js'
+
+export const CONFIG_FILE = 'sanity-ui.json'
+
+export interface SanityUiConfig {
+  $schema: string
+  framework: Framework
+  entry: string
+}
+
+/**
+ * Builds the sanity-ui.json contents: a small record of the detected setup
+ * (framework, entry) written to the project root for tooling to read.
+ */
+export function buildConfig({
+  framework,
+  entry,
+}: {
+  framework: Framework
+  entry: string
+}): SanityUiConfig {
+  return {
+    $schema: 'https://sanity-ui.sanity.dev/schema.json',
+    framework,
+    entry,
+  }
+}
+
+export function configExists(cwd: string): boolean {
+  return existsSync(join(cwd, CONFIG_FILE))
+}
+
+export function writeConfig(
+  cwd: string,
+  config: SanityUiConfig,
+  {dryRun = false} = {},
+): {file: string; wrote: boolean} {
+  const file = join(cwd, CONFIG_FILE)
+  if (!dryRun) writeFileSync(file, `${JSON.stringify(config, null, 2)}\n`)
+  return {file, wrote: !dryRun}
+}