feat: prepare for gradio 6.28 compatibility

.changeset/support-gradio-6-28.md

@@ -0,0 +1,10 @@
+---
+'@modelscope-studio/antd': minor
+'@modelscope-studio/antdx': minor
+'@modelscope-studio/base': minor
+'@modelscope-studio/pro': minor
+'@modelscope-studio/frontend': minor
+'modelscope_studio': minor
+---
+
+feat: support Gradio `6.28.0`

README-zh_CN.md

@@ -33,9 +33,7 @@
 
 ## 依赖
 
-- Gradio >= 6.0.0
-
-> 注意：您的 Gradio 版本必须`<=6.8.0`，[为什么？](https://github.com/gradio-app/gradio/issues/13131)
+- Gradio >= 6.28.0
 
 ## 安装
 

README.md

@@ -33,9 +33,7 @@ However, when your application needs Gradio to handle more built-in data on the
 
 ## Dependencies
 
-- Gradio >= 6.0.0
-
-> Note: Your Gradio version must`<=6.8.0`, [why?](https://github.com/gradio-app/gradio/issues/13131)
+- Gradio >= 6.28.0
 
 ## Installation
 

config/changelog/package.json

@@ -19,13 +19,13 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@changesets/get-github-info": "^1.0.0",
+    "@changesets/get-github-info": "^1.0.1",
     "@manypkg/get-packages": "^3.1.0",
     "detect-indent": "^7.0.2"
   },
   "devDependencies": {
     "@changesets/types": "^7.0.0",
-    "@types/node": "^26.2.0",
+    "@types/node": "^26.6.2",
     "tsup": "^8.5.1"
   }
 }

config/lint-config/package.json

@@ -16,29 +16,29 @@
     }
   },
   "dependencies": {
-    "@eslint/compat": "^2.1.0",
+    "@eslint/compat": "^2.1.1",
     "@eslint/js": "^10.0.1",
-    "@typescript-eslint/parser": "^8.67.0",
+    "@typescript-eslint/parser": "^8.70.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.5",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "5.5.6",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.4",
+    "eslint-plugin-react-refresh": "^0.5.7",
     "eslint-plugin-simple-import-sort": "^14.0.0",
     "eslint-plugin-svelte": "^3.23.0",
-    "globals": "^17.11.0",
-    "postcss": "^8.5.26",
+    "globals": "^17.12.0",
+    "postcss": "^8.5.28",
     "postcss-less": "^6.0.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^3.0.0",
     "stylelint-order": "^8.1.1",
     "stylelint-prettier": "^5.0.3",
-    "svelte-eslint-parser": "^1.8.0",
-    "typescript-eslint": "^8.67.0"
+    "svelte-eslint-parser": "^1.8.1",
+    "typescript-eslint": "^8.70.0"
   },
   "devDependencies": {
     "@types/eslint": "^9.6.1",

docs/README-zh_CN.md

@@ -27,9 +27,7 @@
 
 ## 依赖
 
-- Gradio >= 6.0.0
-
-> 注意：您的 Gradio 版本必须`<=6.8.0`，[为什么？](https://github.com/gradio-app/gradio/issues/13131)
+- Gradio >= 6.28.0
 
 ## 安装
 

docs/README.md

@@ -9,7 +9,7 @@ colorFrom: blue
 colorTo: gray
 short_description: A third-party component library based on Gradio.
 sdk: gradio
-sdk_version: 6.8.0
+sdk_version: 6.28.0
 pinned: false
 header: mini
 app_file: app.py
@@ -45,9 +45,7 @@ However, when your application needs Gradio to handle more built-in data on the
 
 ## Dependencies
 
-- Gradio >= 6.0.0
-
-> Note: Your Gradio version must`<=6.8.0`, [why?](https://github.com/gradio-app/gradio/issues/13131)
+- Gradio >= 6.28.0
 
 ## Installation
 

docs/helper/Site.py

@@ -250,8 +250,8 @@ def on_app_mount(e: gr.EventData):
                                         screen_width = e._data["screen"][
                                             "width"]
                                         return gr.update(
-                                            default_size=82 if screen_width <
-                                            576 else 213)
+                                            size=82 if screen_width <
+                                            576 else None)
 
                                     app.mount(on_app_mount,
                                               outputs=[sider_panel])

frontend/package.json

@@ -7,52 +7,52 @@
   "type": "module",
   "dependencies": {
     "@ant-design/cssinjs": "^2.1.2",
-    "@ant-design/icons": "^6.3.2",
+    "@ant-design/icons": "^6.3.4",
     "@ant-design/x": "^2.9.0",
-    "@babel/standalone": "^8.0.4",
-    "@gradio/client": "2.1.0",
+    "@babel/standalone": "^8.0.5",
+    "@gradio/client": "2.7.0",
     "@gradio/preview": "workspace:@modelscope-studio/gradio-preview@*",
-    "@gradio/statustracker": "^0.13.1",
-    "@gradio/utils": "0.11.3",
+    "@gradio/statustracker": "^0.15.3",
+    "@gradio/utils": "0.14.2",
     "@monaco-editor/react": "^4.7.0",
     "amuchina": "^1.0.12",
-    "antd": "^6.6.0",
+    "antd": "^6.6.5",
     "classnames": "^2.5.1",
-    "dayjs": "^1.11.21",
+    "dayjs": "^1.11.23",
     "dequal": "^2.0.2",
     "github-slugger": "^2.0.0",
-    "immer": "^11.1.16",
-    "katex": "^0.18.4",
+    "immer": "^11.1.18",
+    "katex": "^0.18.7",
     "lodash-es": "^4.18.1",
-    "marked": "^18.0.9",
+    "marked": "^18.0.13",
     "marked-gfm-heading-id": "^4.1.4",
     "marked-highlight": "^2.2.4",
-    "mermaid": "^11.16.1",
+    "mermaid": "^12.0.0",
     "monaco-editor": "^0.56.0",
     "path-browserify-esm": "^1.0.6",
     "prismjs": "^1.30.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "react-syntax-highlighter": "^16.1.1",
-    "svelte": "5.48.0",
+    "svelte": "5.57.1",
     "svelte-i18n": "^4.0.1",
-    "wavesurfer.js": "^7.12.11"
+    "wavesurfer.js": "^7.12.12"
   },
   "devDependencies": {
-    "@babel/core": "^8.0.1",
+    "@babel/core": "^8.0.6",
     "@types/babel__core": "^7.20.5",
     "@types/babel__standalone": "^7.1.9",
     "@types/katex": "^0.16.8",
     "@types/lodash-es": "^4.17.12",
     "@types/prismjs": "^1.26.6",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/sanitize-html": "^2.16.1",
-    "@vitejs/plugin-react": "^6.0.5",
-    "less": "^4.8.1",
+    "@vitejs/plugin-react": "^6.1.1",
+    "less": "^4.9.1",
     "typescript-json-schema": "^0.68.0",
-    "vite": "^8.2.1"
+    "vite": "^8.3.0"
   },
   "main_changeset": true
 }

frontend/pro/chatbot/chatbot-footer.tsx

@@ -236,10 +236,14 @@ const Action: React.FC<{
       },
     };
     return React.createElement(
-      actionOrActionObject.popconfirm ? Popconfirm : React.Fragment,
+      (actionOrActionObject.popconfirm
+        ? Popconfirm
+        : React.Fragment) as React.ElementType,
       actionOrActionObject.popconfirm ? popconfirmProps : undefined,
       React.createElement(
-        actionOrActionObject.tooltip ? Tooltip : React.Fragment,
+        (actionOrActionObject.tooltip
+          ? Tooltip
+          : React.Fragment) as React.ElementType,
         actionOrActionObject.tooltip
           ? typeof actionOrActionObject.tooltip === 'string'
             ? { title: actionOrActionObject.tooltip }

frontend/pro/web-sandbox/parser.ts

@@ -1,3 +1,4 @@
+import type { PluginObject } from '@babel/core';
 import { packages, transform } from '@babel/standalone';
 import path from 'path-browserify-esm';
 
@@ -62,8 +63,21 @@ export class WebSandboxParser {
         plugins: ['typescript', 'jsx'],
       });
 
-      // Traverse AST to find import declarations
-      packages.traverse.default(ast, {
+      // Traverse AST to find import declarations.
+      // `@babel/standalone` types `packages.traverse` as a type-only member,
+      // so cast to reach the runtime `.default`. `node` is kept loose because
+      // the parser and traverse types resolve slightly different `@babel/types`
+      // copies; the visitor still gets full typing from `PluginObject`.
+      (
+        packages as unknown as {
+          traverse: {
+            default: (
+              node: unknown,
+              visitor: NonNullable<PluginObject['visitor']>
+            ) => void;
+          };
+        }
+      ).traverse.default(ast, {
         ImportDeclaration: (nodePath) => {
           const importPath = nodePath.node.source.value;
 
@@ -192,7 +206,7 @@ export class WebSandboxParser {
         const result = transform(fileInfo.code, {
           presets: [['react', { runtime: 'automatic' }], 'typescript'],
           plugins: [
-            {
+            (): PluginObject => ({
               visitor: {
                 ImportDeclaration: (nodePath) => {
                   const source = nodePath.node.source;
@@ -230,7 +244,7 @@ export class WebSandboxParser {
                   }
                 },
               },
-            },
+            }),
           ],
           filename: filePath,
         });

frontend/svelte-preprocess-react/component/props.svelte.ts

@@ -388,7 +388,7 @@ export function getProps<
           as_item: gradio.props.as_item as string | undefined,
           _internal: props._internal || (gradio.props._internal as {}),
         },
-        ['i18n', 'api_url', 'name', 'additional_props']
+        ['i18n', 'api_url', 'name', 'additional_props', 'i18n_store']
       )
     );
   };

frontend/svelte-preprocess-react/internal/ReactWrapper.svelte

@@ -54,7 +54,6 @@
       return componentSlotValue?.value.subSlotIndex;
     },
   });
-
   setReactWrapperContext(node);
 
   onDestroy(() => {

package.json

@@ -31,32 +31,32 @@
     "@actions/core": "^3.0.1",
     "@actions/exec": "^3.0.0",
     "@actions/github": "^9.1.1",
-    "@changesets/cli": "^3.0.0",
-    "@commitlint/cli": "^21.2.1",
-    "@commitlint/config-conventional": "^21.2.0",
+    "@changesets/cli": "^3.0.3",
+    "@commitlint/cli": "^21.2.3",
+    "@commitlint/config-conventional": "^21.2.3",
     "@manypkg/get-packages": "^3.1.0",
     "@modelscope-studio/changelog": "workspace:*",
     "@modelscope-studio/lint-config": "workspace:*",
-    "@types/node": "^26.2.0",
-    "eslint": "^10.8.1",
+    "@types/node": "^26.6.2",
+    "eslint": "^10.11.0",
     "husky": "^9.1.7",
-    "lint-staged": "^17.3.0",
+    "lint-staged": "^17.5.1",
     "node-fetch": "^3.3.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.9.6",
+    "prettier": "^3.9.8",
     "prettier-plugin-packagejson": "^3.0.2",
     "prettier-plugin-svelte": "^4.1.1",
     "rimraf": "^6.1.3",
-    "stylelint": "^17.14.1",
-    "svelte": "5.48.0",
-    "svelte-check": "^4.7.5",
+    "stylelint": "^17.15.0",
+    "svelte": "5.57.1",
+    "svelte-check": "^4.7.6",
     "tslib": "^2.8.1",
-    "tsx": "^4.23.12",
+    "tsx": "^4.23.15",
     "typescript": "^6.0.3"
   },
   "pnpm": {
     "overrides": {
-      "svelte": "5.48.0",
+      "svelte": "5.56.9",
       "tsup>typescript": "^5.9.3"
     }
   },

patches/gradio-preview/README.md

@@ -10,24 +10,24 @@ bootstrap, the build entry composition, the Vite version it ships with).
 
 ## Why not just pin a stock `@gradio/preview`?
 
-- **`0.17.0` (Gradio 6.9+/6.23 era)** ships the right Vite (`vite ^8`,
+- **`0.17.1` (Gradio 6.9+/6.28 era)** ships the right Vite (`vite ^8`,
   `@sveltejs/vite-plugin-svelte ^7`) but has the dev-bootstrap bugs listed below.
 - **`0.15.2` (Gradio <= 6.8 era)** boots the shared-runtime app correctly but
   depends on `vite ^7` / `@sveltejs/vite-plugin-svelte ^6`, which is incompatible
   with this repo's `vite 8` (rolldown) toolchain — it fails with
   `Missing field 'moduleType'`.
 
-So this package takes the `0.17.0` source (for the `vite 8` deps + fixes) and
+So this package takes the `0.17.1` source (for the `vite 8` deps + fixes) and
 makes it work across both Gradio generations via `detect_generation`.
 
 ## Vendor baseline
 
 | | |
 | --- | --- |
 | Upstream | `gradio-app/gradio` `js/preview` |
-| Version | `0.17.0` |
-| Commit | `a9e8382c4` |
-| Deps | `vite ^8`, `@sveltejs/vite-plugin-svelte ^7` (kept from `0.17.0`) |
+| Version | `0.17.1` |
+| Commit | `81b7b77` |
+| Deps | `vite ^8`, `@sveltejs/vite-plugin-svelte ^7` (kept from `0.17.1`) |
 
 Re-syncing means diffing `src/` against that path upstream, taking their changes
 and re-applying the fixes below, then `pnpm -F @modelscope-studio/gradio-preview build`.
@@ -83,8 +83,9 @@ and `frontend/`:
   provides `register_component` via `shared_props` (`@gradio/utils` 0.14.x). The
   wrong one silently no-ops registration and the app hangs on its loading screen.
 
-Currently validated against **Gradio 6.8.0** (`shared`): `@gradio/utils@0.11.3`,
-`@gradio/client@2.1.0`, `@gradio/statustracker@^0.13.1`, `svelte@5.48.0`.
+Currently validated against **Gradio 6.28.0** (`bridge`): `@gradio/utils@0.14.2`,
+`@gradio/client@2.7.0`, `@gradio/statustracker@^0.15.3`, `svelte@5.56.9` (the
+version Gradio 6.28.0 bundles — a newer compiler breaks `$$restProps`).
 
 ## License
 

patches/gradio-preview/package.json

@@ -20,12 +20,12 @@
   },
   "dependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "rollup": "^4.59.0",
+    "rollup": "^4.63.4",
     "svelte-preprocess": "^6.0.3",
-    "vite": "^8.0.9"
+    "vite": "^8.3.0"
   },
   "devDependencies": {
-    "@types/node": "^26.2.0",
+    "@types/node": "^26.6.2",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   }

patches/gradio-preview/src/dev.ts

@@ -10,7 +10,12 @@ import { examine_module } from "./index";
 
 const vite_messages_to_ignore = [
 	"Default and named imports from CSS files are deprecated.",
-	"The above dynamic import cannot be analyzed by Vite."
+	"The above dynamic import cannot be analyzed by Vite.",
+	// gradio ships `static/js/iframeResizer.contentWindow.min.js` with a
+	// `sourceMappingURL` comment but without the `.map` file, so Vite warns with a
+	// full stack trace that reads like a fatal error. The script itself is served
+	// fine, so there is nothing to act on.
+	"iframeResizer.contentWindow"
 ];
 
 const logger = createLogger();