@sudajs/cli 0.7.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudajs/cli",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "type": "module",
   "bin": {
     "suda": "./bin/suda.js"
@@ -25,14 +25,14 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "@puckeditor/core": "^0.21.2",
+    "@puckeditor/core": "^0.21.3",
     "commander": "^12.1.0",
     "esbuild": "^0.25.12",
     "open": "^10.1.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "zod": "^3.24.1",
-    "@sudajs/theme-engine": "2.0.2"
+    "@sudajs/theme-engine": "2.1.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.0",

package/templates/theme/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2
+}

package/templates/theme/AGENTS.md

@@ -12,13 +12,16 @@ This directory is a standalone Vite + React + Tailwind Suda theme generated by `
 ## Styling
 
 - Tailwind v4 starts in `src/styles.css` with `@import "tailwindcss";` and `@source "./**/*.{ts,tsx}";`.
+- Theme-local assets live in `src/assets/`; the CLI copies them to `dist/assets/` during build.
 - Customize `vite.config.ts`, `postcss.config.mjs`, and `src/styles.css` as needed.
 
 ## Commands
 
 ```bash
 pnpm install
+pnpm lint
 pnpm typecheck
+pnpm format
 pnpm dev       # Vite-powered local preview
 pnpm build     # Vite build + Suda artifact finalize + AI metadata check
 pnpm validate
@@ -28,3 +31,17 @@ suda theme check
 ## AI metadata
 
 Every component and layout component should declare useful `ai.instructions`. Missing component-level instructions fail `suda theme check` and block publish.
+
+Use `visibleIf: ({ props }, { fields }) => boolean` for synchronous field visibility that depends on sibling props or resolved fields. Keep it pure and fast; use Puck `resolveFields` directly for heavier dynamic field changes. AI and MCP schemas expose `visibleIf` fields as dynamic visibility so agents know the editor surface can change with props.
+
+## Field authoring rules
+
+- Prefer Suda field helpers over generic text fields: use `url` for links and routes, `image` for images, `video` for videos, `media` for mixed media, `color` for colors, `icon` for icon names, `font` for font selections, `range` for bounded numbers, `spacing` for spacing tokens, and `menu` for navigation items.
+- Use `select` or `radio` when authors must choose from a fixed set of values. Keep option values stable and serializable.
+- Use `array` for repeatable items and `object` for grouped settings. Keep nested field names aligned with the prop shape and `defaultProps`.
+- For card grids, feature lists, pricing tables, logo walls, gallery grids, and any multi-column component, expose a `columns` prop with a `range` or `select` field and a sensible default.
+- Use `textarea` for multi-sentence copy and `text` only for short labels, headings, slugs, or plain strings that are not URLs/media/color/icon/font values.
+- Keep `fields`, `defaultProps`, and `render` in sync: every editor field should have a sensible default and render should tolerate omitted optional values.
+- Put editor-only controls in props when they change rendering, for example `showLogo`; pair dependent controls with `visibleIf` rather than hiding logic only in JSX.
+- Keep persisted props JSON-serializable. Do not store functions, React nodes, class instances, database ids for media, or environment-specific absolute filesystem paths.
+- Add optional field-level `ai.instructions`, `ai.required`, or `ai.exclude` when a prop needs generation guidance beyond its label and type.

package/templates/theme/README.md

@@ -12,13 +12,21 @@ pnpm install
 
 ```bash
 pnpm dev
+pnpm lint
 pnpm typecheck
+pnpm format
 pnpm build
 pnpm validate
 ```
 
 `pnpm dev` starts the Vite-powered preview. `pnpm build` produces the Suda artifact contract in `dist/`, including `dist/index.js`, `dist/runtime.client.js`, `dist/manifest.json`, and `dist/styles.css`.
 
+Theme-local assets live in `src/assets/`. The starter hero exposes a Logo field that defaults to `src/assets/suda-logo.svg`, so you can replace it with your own brand image or choose a different image in the editor.
+
+Fields can use `visibleIf: ({ props }, { fields }) => boolean` for synchronous dynamic visibility. The starter hero shows this by hiding the Logo picker when `showLogo` is false. Suda converts `visibleIf` to Puck `resolveFields` during normalization, and the generated AI/MCP section schema marks those fields as dynamically visible.
+
+When adding fields, prefer purpose-built Suda field types over generic text inputs: use `url` for links, `image` / `video` / `media` for media, `color` for colors, `icon` for icon names, `range` for bounded numbers, `spacing` for spacing tokens, `menu` for navigation, `select` / `radio` for fixed choices, and `array` / `object` for structured values. Multi-column sections such as card grids should expose a `columns` prop.
+
 ## Publish
 
 ```bash

package/templates/theme/eslint.config.js

@@ -0,0 +1,48 @@
+import js from "@eslint/js";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import prettier from "eslint-config-prettier";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  {
+    ignores: ["dist/**", ".suda-build/**", "node_modules/**", "*.tsbuildinfo"],
+  },
+  js.configs.recommended,
+  {
+    files: ["**/*.{js,mjs,cjs}"],
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: globals.node,
+    },
+  },
+  ...tseslint.configs.recommendedTypeChecked.map((config) => ({
+    ...config,
+    files: ["**/*.{ts,tsx}"],
+  })),
+  {
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: globals.browser,
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "@typescript-eslint/consistent-type-imports": ["error", { prefer: "type-imports" }],
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+  prettier,
+);

package/templates/theme/package.json

@@ -10,29 +10,40 @@
     "build": "suda theme build --theme-root .",
     "dev": "suda theme dev --theme-root .",
     "finalize": "suda theme finalize --theme-root .",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "tsc -p tsconfig.json",
     "validate": "suda theme validate --theme-root ."
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.4",
     "@tailwindcss/postcss": "^4.3.0",
-    "@puckeditor/core": "^0.21.2",
+    "@puckeditor/core": "^0.21.3",
     "@sudajs/cli": "*",
     "@sudajs/theme-engine": "*",
-    "@types/node": "^22.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "globals": "^16.5.0",
     "postcss": "^8.5.15",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "prettier": "^3.8.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "tailwindcss": "^4.3.0",
-    "typescript": "^5.6.0",
-    "vite": "^7.3.3"
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.62.0",
+    "vite": "^8.1.0"
   },
   "peerDependencies": {
-    "@puckeditor/core": "^0.21.2",
+    "@puckeditor/core": "^0.21.3",
     "@sudajs/theme-engine": "*",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   }
 }

package/templates/theme/src/assets/suda-logo.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 2048 2048">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#00B6F6" />
+      <stop offset="100%" stop-color="#0538A1" />
+    </linearGradient>
+  </defs>
+
+  <rect x="0" y="0" width="2048" height="2048" fill="url(#bg)" />
+
+  <polygon fill="#FFFFFF" points="1508,503 989,503 934,710 867,764 398,764 328,1022 847,1022 902,816 969,761 1439,761" />
+
+  <polygon fill="#FFFFFF" points="929,894 860,1153 1118,1153 1187,894" />
+
+  <polygon fill="#FFFFFF" points="1719,1025 1200,1024 1144,1233 1079,1285 608,1285 539,1544 1058,1544 1114,1335 1179,1283 1650,1283" />
+</svg>

package/templates/theme/src/config.ts

@@ -1,19 +1,19 @@
-import type { Config, Data } from "@puckeditor/core";
+import type { LayoutData, SudaConfig } from "@sudajs/theme-engine";
 
 import { LAYOUT_COMPONENTS, rootConfig } from "./layout.js";
 import { SECTION_COMPONENTS } from "./sections.js";
 
-export const pageConfig: Config = {
+export const pageConfig: SudaConfig = {
   components: SECTION_COMPONENTS,
 };
 
-export const layoutConfig: Config = {
+export const layoutConfig: SudaConfig = {
   root: rootConfig,
   components: LAYOUT_COMPONENTS,
 };
 
-export const defaultLayout: Data = {
-  root: { props: { siteName: "__SUDA_THEME_KEY__" } },
+export const defaultLayout: LayoutData = {
+  root: { props: { title: "__SUDA_THEME_KEY__" } },
   content: [
     { type: "Header", props: { id: "Header-1", siteName: "__SUDA_THEME_KEY__" } },
     { type: "PageOutlet", props: { id: "PageOutlet-1" } },

package/templates/theme/src/layout.tsx

@@ -1,21 +1,26 @@
-import type { Config } from "@puckeditor/core";
-import type { SudaComponentConfig } from "@sudajs/theme-engine";
+import type { SudaComponentConfig, SudaRootConfig } from "@sudajs/theme-engine";
 import { getIcpRecord, getPageSlot, getWhiteLabel } from "@sudajs/theme-engine/runtime";
 import type { ReactElement, ReactNode } from "react";
 
 type PuckExtras = { puck?: { metadata?: Record<string, unknown> } };
+type RootProps = { children?: ReactNode; title?: string };
+type HeaderProps = { siteName?: string };
+type PageOutletProps = PuckExtras;
+type FooterProps = { text?: string } & PuckExtras;
 
-export const rootConfig: NonNullable<Config["root"]> = {
+export const rootConfig: SudaRootConfig<RootProps> = {
   fields: {
-    siteName: { type: "text", label: "Site name" },
+    title: { type: "text", label: "Site title" },
   },
-  defaultProps: { siteName: "__SUDA_THEME_KEY__" },
-  render: ({ children, siteName }: { children?: ReactNode; siteName?: string }) => (
-    <div className="__SUDA_THEME_KEY__-root" data-site-name={siteName}>{children}</div>
+  defaultProps: { title: "__SUDA_THEME_KEY__" },
+  render: ({ children, title }) => (
+    <div className="__SUDA_THEME_KEY__-root" data-site-name={title}>
+      {children}
+    </div>
   ),
 };
 
-export const Header: SudaComponentConfig = {
+export const Header: SudaComponentConfig<HeaderProps> = {
   label: "Header",
   ai: {
     instructions:
@@ -28,7 +33,7 @@ export const Header: SudaComponentConfig = {
   render: ({ siteName }) => <header className="__SUDA_THEME_KEY__-header">{siteName}</header>,
 };
 
-export const PageOutlet: SudaComponentConfig = {
+export const PageOutlet: SudaComponentConfig<PageOutletProps> = {
   label: "Page outlet",
   ai: {
     exclude: true,
@@ -38,10 +43,10 @@ export const PageOutlet: SudaComponentConfig = {
   },
   fields: {},
   defaultProps: {},
-  render: (props: PuckExtras): ReactElement => <>{getPageSlot(props.puck?.metadata)}</>,
+  render: (props): ReactElement => <>{getPageSlot(props.puck?.metadata)}</>,
 };
 
-export const Footer: SudaComponentConfig = {
+export const Footer: SudaComponentConfig<FooterProps> = {
   label: "Footer",
   ai: {
     instructions:
@@ -51,7 +56,7 @@ export const Footer: SudaComponentConfig = {
   },
   fields: { text: { type: "text", label: "Text" } },
   defaultProps: { text: "© __SUDA_THEME_KEY__" },
-  render: ({ text, puck }: { text?: string } & PuckExtras) => {
+  render: ({ text, puck }) => {
     const whiteLabel = getWhiteLabel(puck?.metadata);
     const icp = getIcpRecord(puck?.metadata);
     return (

package/templates/theme/src/sections.tsx

@@ -1,16 +1,23 @@
 import type { SudaComponentConfig } from "@sudajs/theme-engine";
+import { resolveAsset, type ThemeRenderMetadata } from "@sudajs/theme-engine/runtime";
+
+import { themeAsset } from "./theme-asset.js";
 
 type FeatureItem = { title?: string; description?: string };
+type PuckExtras = { puck?: { metadata?: ThemeRenderMetadata } };
 type HeroProps = {
+  showLogo?: boolean;
+  logo?: string;
   eyebrow?: string;
   title?: string;
   description?: string;
   primaryLabel?: string;
   primaryHref?: string;
-};
+} & PuckExtras;
 type FeatureGridProps = {
   title?: string;
   description?: string;
+  columns?: number;
   features?: FeatureItem[];
 };
 type TestimonialProps = {
@@ -25,7 +32,7 @@ type CallToActionProps = {
   buttonHref?: string;
 };
 
-export const Hero: SudaComponentConfig = {
+export const Hero: SudaComponentConfig<HeroProps> = {
   label: "Hero",
   ai: {
     instructions:
@@ -35,30 +42,62 @@ export const Hero: SudaComponentConfig = {
       "Use at most once per page. Do not use for ordinary section headings or article content.",
   },
   fields: {
+    showLogo: {
+      type: "radio",
+      label: "Show logo",
+      options: [
+        { label: "Show", value: true },
+        { label: "Hide", value: false },
+      ],
+    },
+    logo: {
+      type: "image",
+      label: "Logo",
+      visibleIf: ({ props }) => props.showLogo !== false,
+    },
     eyebrow: { type: "text", label: "Eyebrow" },
     title: { type: "text", label: "Title" },
     description: { type: "textarea", label: "Description" },
     primaryLabel: { type: "text", label: "Primary button label" },
-    primaryHref: { type: "text", label: "Primary button link" },
+    primaryHref: { type: "url", label: "Primary button link" },
   },
   defaultProps: {
+    showLogo: true,
+    logo: themeAsset("assets/suda-logo.svg"),
     eyebrow: "New theme",
     title: "Build with SudaCloud",
     description: "Edit this starter section in the visual editor.",
     primaryLabel: "Get started",
     primaryHref: "#contact",
   },
-  render: ({ eyebrow, title, description, primaryLabel, primaryHref }: HeroProps) => (
-    <section className="__SUDA_THEME_KEY__-section __SUDA_THEME_KEY__-hero">
-      <p className="__SUDA_THEME_KEY__-eyebrow">{eyebrow}</p>
-      <h1>{title}</h1>
-      <p>{description}</p>
-      <a className="__SUDA_THEME_KEY__-button" href={primaryHref}>{primaryLabel}</a>
-    </section>
-  ),
+  render: ({
+    showLogo = true,
+    logo,
+    eyebrow,
+    title,
+    description,
+    primaryLabel,
+    primaryHref,
+    puck,
+  }) => {
+    const logoSrc = resolveAsset(puck?.metadata, logo);
+    return (
+      <section className="__SUDA_THEME_KEY__-section __SUDA_THEME_KEY__-hero">
+        {showLogo && logoSrc ? (
+          <img className="__SUDA_THEME_KEY__-hero-logo" src={logoSrc} alt="" />
+        ) : null}
+        <p className="__SUDA_THEME_KEY__-eyebrow">{eyebrow}</p>
+        <h1>{title}</h1>
+        <p>{description}</p>
+        <a className="__SUDA_THEME_KEY__-button" href={primaryHref}>
+          {primaryLabel}
+        </a>
+      </section>
+    );
+  },
 };
 
-export const FeatureGrid: SudaComponentConfig = {
+export const FeatureGrid: SudaComponentConfig<FeatureGridProps> = {
   label: "Feature grid",
   ai: {
     instructions:
@@ -69,6 +108,7 @@ export const FeatureGrid: SudaComponentConfig = {
   fields: {
     title: { type: "text", label: "Title" },
     description: { type: "textarea", label: "Description" },
+    columns: { type: "range", label: "Columns", min: 2, max: 4, step: 1 },
     features: {
       type: "array",
       label: "Features",
@@ -81,17 +121,21 @@ export const FeatureGrid: SudaComponentConfig = {
   defaultProps: {
     title: "Everything you need to launch",
     description: "Use this section to explain the core value of the project.",
+    columns: 3,
     features: [
       { title: "Fast setup", description: "Start from a clean theme contract." },
       { title: "Visual editing", description: "Expose content fields through Puck." },
       { title: "Publish ready", description: "Build and publish with the Suda CLI." },
     ],
   },
-  render: ({ title, description, features = [] }: FeatureGridProps) => (
+  render: ({ title, description, columns = 3, features = [] }) => (
     <section className="__SUDA_THEME_KEY__-section">
       <h2>{title}</h2>
       <p>{description}</p>
-      <div className="__SUDA_THEME_KEY__-grid">
+      <div
+        className="__SUDA_THEME_KEY__-grid"
+        style={{ "--__SUDA_THEME_KEY__-columns": columns }}
+      >
         {features.map((feature: FeatureItem, index: number) => (
           <article className="__SUDA_THEME_KEY__-card" key={index}>
             <h3>{feature.title}</h3>
@@ -103,7 +147,7 @@ export const FeatureGrid: SudaComponentConfig = {
   ),
 };
 
-export const Testimonial: SudaComponentConfig = {
+export const Testimonial: SudaComponentConfig<TestimonialProps> = {
   label: "Testimonial",
   ai: {
     instructions:
@@ -121,15 +165,17 @@ export const Testimonial: SudaComponentConfig = {
     author: "Alex Chen",
     role: "Founder",
   },
-  render: ({ quote, author, role }: TestimonialProps) => (
+  render: ({ quote, author, role }) => (
     <section className="__SUDA_THEME_KEY__-section __SUDA_THEME_KEY__-quote">
       <blockquote>{quote}</blockquote>
-      <p>{author} · {role}</p>
+      <p>
+        {author} · {role}
+      </p>
     </section>
   ),
 };
 
-export const CallToAction: SudaComponentConfig = {
+export const CallToAction: SudaComponentConfig<CallToActionProps> = {
   label: "Call to action",
   ai: {
     instructions:
@@ -141,7 +187,7 @@ export const CallToAction: SudaComponentConfig = {
     title: { type: "text", label: "Title" },
     description: { type: "textarea", label: "Description" },
     buttonLabel: { type: "text", label: "Button label" },
-    buttonHref: { type: "text", label: "Button link" },
+    buttonHref: { type: "url", label: "Button link" },
   },
   defaultProps: {
     title: "Ready to build your next page?",
@@ -149,11 +195,13 @@ export const CallToAction: SudaComponentConfig = {
     buttonLabel: "Contact us",
     buttonHref: "#contact",
   },
-  render: ({ title, description, buttonLabel, buttonHref }: CallToActionProps) => (
+  render: ({ title, description, buttonLabel, buttonHref }) => (
     <section className="__SUDA_THEME_KEY__-section __SUDA_THEME_KEY__-cta" id="contact">
       <h2>{title}</h2>
       <p>{description}</p>
-      <a className="__SUDA_THEME_KEY__-button" href={buttonHref}>{buttonLabel}</a>
+      <a className="__SUDA_THEME_KEY__-button" href={buttonHref}>
+        {buttonLabel}
+      </a>
     </section>
   ),
 };

package/templates/theme/src/styles.css

@@ -37,6 +37,12 @@
 .__SUDA_THEME_KEY__-hero {
   background: #f8fafc;
 }
+.__SUDA_THEME_KEY__-hero-logo {
+  width: 64px;
+  height: 64px;
+  border-radius: 14px;
+  margin-bottom: 24px;
+}
 .__SUDA_THEME_KEY__-eyebrow {
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -74,7 +80,7 @@
 }
 .__SUDA_THEME_KEY__-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(var(--__SUDA_THEME_KEY__-columns, 3), minmax(0, 1fr));
   gap: 16px;
   margin-top: 28px;
 }
@@ -100,3 +106,8 @@
   background: #ffffff;
   color: #111827;
 }
+@media (max-width: 760px) {
+  .__SUDA_THEME_KEY__-grid {
+    grid-template-columns: 1fr;
+  }
+}

package/templates/theme/src/templates.ts

@@ -1,5 +1,7 @@
 import type { ThemeStarterPage } from "@sudajs/theme-engine";
 
+import { themeAsset } from "./theme-asset.js";
+
 export const starterPages: ThemeStarterPage[] = [
   {
     slug: "home",
@@ -12,6 +14,7 @@ export const starterPages: ThemeStarterPage[] = [
           type: "Hero",
           props: {
             id: "Hero-1",
+            logo: themeAsset("assets/suda-logo.svg"),
             eyebrow: "Starter page",
             title: "Welcome to __SUDA_THEME_KEY__",
             description: "This page was generated by suda theme init.",

package/templates/theme/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare const __SUDA_THEME_VERSION__: string;

package/templates/theme/tsconfig.json

@@ -1,22 +1,27 @@
 {
   "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
+    "types": ["node", "vite/client"],
+    "skipLibCheck": true,
+
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
     "jsx": "react-jsx",
-    "rootDir": "src",
-    "outDir": "dist",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
+    "resolveJsonModule": true,
+
     "strict": true,
     "noUncheckedIndexedAccess": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "types": ["node"]
+    "exactOptionalPropertyTypes": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src", "package.json"]
+  "include": ["src", "vite.config.ts", "postcss.config.mjs", "eslint.config.js"]
 }

package/templates/theme/vite.config.ts

@@ -2,9 +2,27 @@ import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import pkg from "./package.json" with { type: "json" };
 
+function assetFileNames(assetInfo: { names?: string[] | undefined }): string {
+  const names = assetInfo.names ?? [];
+  const isCss = names.some((name) => name.endsWith(".css"));
+  if (isCss) {
+    return "styles.css";
+  }
+  return "assets/[name]-[hash][extname]";
+}
+
 export default defineConfig({
   define: {
     __SUDA_THEME_VERSION__: JSON.stringify(pkg.version),
   },
   plugins: [react()],
+  build: {
+    assetsInlineLimit: 0,
+    cssCodeSplit: false,
+    rollupOptions: {
+      output: {
+        assetFileNames,
+      },
+    },
+  },
 });