@master/create-css 2.0.0-rc.88 → 2.0.1

package/README.md

@@ -5,13 +5,13 @@ Add Master CSS to an existing project.
 ## Usage
 
 ```bash
-npm create @master/css@rc -- --yes
+npm create @master/css@latest -- --yes
 ```
 
 or run the package directly:
 
 ```bash
-npx @master/create-css@rc add --yes
+npx @master/create-css@latest add --yes
 ```
 
 The recommended workflow adds Master CSS to the detected framework and includes the development guardrails Master CSS expects by default:
@@ -26,46 +26,46 @@ Without `--yes`, TTY sessions ask about ESLint, MCP, AI guidance, and dependency
 
 Use `--minimal` for core framework setup only, or disable individual recommended integrations with `--no-eslint`, `--no-mcp`, or `--no-ai`.
 
-Use `--mode <mode>` when the framework integration should be configured for a specific rendering mode during setup:
+Without `--mode`, the installer configures static rendering. Use `--mode <mode>` when the framework integration should be configured for a specific rendering mode during setup:
 
 ```bash
-npm create @master/css@rc -- --framework nextjs --mode static --yes
+npm create @master/css@latest -- --framework nextjs --mode static --yes
 ```
 
-Supported `--mode` values are `runtime`, `static`, `progressive`, and `pre-render`. Mode setup is supported for `vite`, `react`, `react-router`, `tanstack-start`, `vue`, `nextjs`, `nuxt`, `astro`, `webpack`, `rspack`, `rsbuild`, `laravel`, and `lit`; Laravel supports `static` only.
+The installer accepts `static`, `runtime`, `prerender`, and `progressive` for `vite`, `react`, `react-router`, `tanstack-start`, `vue`, `nextjs`, `nuxt`, `astro`, `webpack`, `rspack`, `rsbuild`, and `lit`. The [rendering modes guide](https://css.master.co/guide/rendering-modes) explains where each integration generates CSS. `laravel` accepts `static` only; `angular` and `none` accept `static` and `runtime`. SvelteKit setup is delegated to the Svelte CLI add-on and does not accept `--mode` here.
 
 If you do not have a project yet, create one first:
 
 ```bash
 npm create vite@latest my-app
 cd my-app
-npm create @master/css@rc -- --yes
+npm create @master/css@latest -- --yes
 ```
 
 ## Examples
 
 ```bash
-npx @master/create-css@rc add --yes
+npx @master/create-css@latest add --yes
 ```
 
 ```bash
-npx @master/create-css@rc add --minimal
+npx @master/create-css@latest add --minimal
 ```
 
 ```bash
-npx @master/create-css@rc add --no-mcp --no-ai
+npx @master/create-css@latest add --no-mcp --no-ai
 ```
 
 ```bash
-npx @master/create-css@rc add --json --minimal --eslint
+npx @master/create-css@latest add --json --minimal --eslint
 ```
 
 ```bash
-npx @master/create-css@rc add --framework nextjs --mode runtime --yes
+npx @master/create-css@latest add --framework nextjs --mode runtime --yes
 ```
 
 ```bash
-npx @master/create-css@rc add --framework webpack --mode static --yes
+npx @master/create-css@latest add --framework webpack --mode static --yes
 ```
 
 Supported `--framework` values:
@@ -77,5 +77,5 @@ auto, vite, react, react-router, tanstack-start, vue, nextjs, svelte, nuxt, astr
 SvelteKit setup is delegated to the Svelte CLI add-on:
 
 ```bash
-npx sv add @master/css-sv
+npx sv add @master/css-svelte-addon
 ```

package/dist/bin/index.js

@@ -1,6 +1,5 @@
 #!/usr/bin/env node
 import runProgram from "../core.js";
-//#region src/bin/index.ts
+// src/bin/index.ts
 runProgram();
-//#endregion
 export {};

package/dist/constants.d.ts

@@ -1,21 +1,19 @@
-//#region src/constants.d.ts
-declare const MASTER_CSS_VERSION = "rc";
+declare const MASTER_CSS_VERSION: string;
 declare const MASTER_CSS_PACKAGES: {
   readonly css: '@master/css';
   readonly runtime: '@master/css-runtime';
   readonly preset: '@master/css-preset';
   readonly cli: '@master/css-cli';
-  readonly vite: '@master/css.vite';
-  readonly next: '@master/css.next';
-  readonly nuxt: '@master/css.nuxt';
-  readonly astro: '@master/css.astro';
-  readonly svelte: '@master/css.svelte';
-  readonly svelteAddon: '@master/css-sv';
-  readonly webpack: '@master/css.webpack';
+  readonly vite: '@master/css-vite';
+  readonly next: '@master/css-next';
+  readonly nuxt: '@master/css-nuxt';
+  readonly astro: '@master/css-astro';
+  readonly svelte: '@master/css-svelte';
+  readonly svelteAddon: '@master/css-svelte-addon';
+  readonly webpack: '@master/css-webpack';
   readonly eslintConfig: '@master/eslint-config-css';
   readonly mcp: '@master/css-mcp';
 };
-declare const CANONICAL_ESLINT_CONFIG = "import { defineConfig } from 'eslint/config'\nimport css from '@master/eslint-config-css'\n\nexport default defineConfig([\n  ...css\n])\n";
-declare const AGENT_RULES_BLOCK = "## Master CSS\n\n- Use https://rc.css.master.co as the source of truth.\n- Inspect the framework, package manager, CSS entry, rendering mode, theme tokens, component classes, utilities, custom variants, and validation commands before editing styles.\n- Prefer existing @theme tokens, @components, @utilities, and @custom-variant definitions.\n- Use the Master CSS MCP server when available.\n- Use ESLint for class policy diagnostics and the Master CSS Language Service for completion, hover, colors, highlighting, and directive formatting.\n- Do not invent Master CSS APIs, directives, package names, or Tailwind-style syntax.\n- Preserve semantic HTML, accessibility attributes, and behavior.\n";
-//#endregion
+declare const CANONICAL_ESLINT_CONFIG = "import masterCSS from '@master/eslint-config-css'\n\nexport default masterCSS\n";
+declare const AGENT_RULES_BLOCK = "## Master CSS\n\n- Read installed Master CSS versions and the active manifest before choosing matching documentation; the preview documentation is https://rc.css.master.co.\n- Use the official master-css skill for UI work. Install it for your chosen agent with: npx skills add master-co/css --skill master-css. Check its compatibility with the installed project version.\n- Inspect the framework, package manager, CSS entry, rendering mode, theme tokens, component classes, mixins, custom media, and validation commands before editing styles.\n- Prefer existing @theme tokens and native CSS in @layer defaults or @layer components. Use @utility for on-demand classes and @mixin for CSS reuse and native property names for direct declarations. Write native declarations and selectors in stylesheets.\n- Use fixed utilities such as flex and items-center, direct-value utilities such as p(16), named tokens such as bg-brand, and parenthesized native declarations such as (gap:1rem). Query the active manifest rather than guessing token values.\n- Reuse selector and conditional wrappers with @mixin, @contents and @apply; classes use @apply(--name(...)). Keep wrapper suffixes in their authored nesting order. Choose a class layer with @layer(base|defaults|components|utilities), and use outer @layer blocks in CSS.\n- Use static rendering by default, explicit CSS variables for dynamic values, and enable native pruning only when intended.\n- Use the Master CSS MCP server with project context when available. A manifest load failure is an error, never permission to switch to the preset.\n- When available, mastercss_suggest_classes proposes classes for isolated CSS declaration blocks. Preserve its remainingCss and review cascade changes; generated CSS alone does not verify browser rendering.\n- Distinguish matching, CSS value validity, and browser support; preserve unknown native CSS and report known invalid values.\n- Use ESLint for class policy diagnostics and the Master CSS Language Service for completion, hover, colors, highlighting, and directive formatting.\n- Do not invent Master CSS APIs, directives, package names, or Tailwind-style syntax.\n- Preserve semantic HTML, accessibility attributes, and behavior.\n";
 export { AGENT_RULES_BLOCK, CANONICAL_ESLINT_CONFIG, MASTER_CSS_PACKAGES, MASTER_CSS_VERSION };

package/dist/constants.js

@@ -1,36 +1,38 @@
-//#region src/constants.ts
-const MASTER_CSS_VERSION = "rc";
+import { readFileSync } from "node:fs";
+const MASTER_CSS_VERSION = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8")).version || "rc";
 const MASTER_CSS_PACKAGES = {
 	css: "@master/css",
 	runtime: "@master/css-runtime",
 	preset: "@master/css-preset",
 	cli: "@master/css-cli",
-	vite: "@master/css.vite",
-	next: "@master/css.next",
-	nuxt: "@master/css.nuxt",
-	astro: "@master/css.astro",
-	svelte: "@master/css.svelte",
-	svelteAddon: "@master/css-sv",
-	webpack: "@master/css.webpack",
+	vite: "@master/css-vite",
+	next: "@master/css-next",
+	nuxt: "@master/css-nuxt",
+	astro: "@master/css-astro",
+	svelte: "@master/css-svelte",
+	svelteAddon: "@master/css-svelte-addon",
+	webpack: "@master/css-webpack",
 	eslintConfig: "@master/eslint-config-css",
 	mcp: "@master/css-mcp"
 };
-const CANONICAL_ESLINT_CONFIG = `import { defineConfig } from 'eslint/config'
-import css from '@master/eslint-config-css'
+const CANONICAL_ESLINT_CONFIG = `import masterCSS from '@master/eslint-config-css'
 
-export default defineConfig([
-  ...css
-])
+export default masterCSS
 `;
 const AGENT_RULES_BLOCK = `## Master CSS
 
-- Use https://rc.css.master.co as the source of truth.
-- Inspect the framework, package manager, CSS entry, rendering mode, theme tokens, component classes, utilities, custom variants, and validation commands before editing styles.
-- Prefer existing @theme tokens, @components, @utilities, and @custom-variant definitions.
-- Use the Master CSS MCP server when available.
+- Read installed Master CSS versions and the active manifest before choosing matching documentation; the preview documentation is https://rc.css.master.co.
+- Use the official master-css skill for UI work. Install it for your chosen agent with: npx skills add master-co/css --skill master-css. Check its compatibility with the installed project version.
+- Inspect the framework, package manager, CSS entry, rendering mode, theme tokens, component classes, mixins, custom media, and validation commands before editing styles.
+- Prefer existing @theme tokens and native CSS in @layer defaults or @layer components. Use @utility for on-demand classes and @mixin for CSS reuse and native property names for direct declarations. Write native declarations and selectors in stylesheets.
+- Use fixed utilities such as flex and items-center, direct-value utilities such as p(16), named tokens such as bg-brand, and parenthesized native declarations such as (gap:1rem). Query the active manifest rather than guessing token values.
+- Reuse selector and conditional wrappers with @mixin, @contents and @apply; classes use @apply(--name(...)). Keep wrapper suffixes in their authored nesting order. Choose a class layer with @layer(base|defaults|components|utilities), and use outer @layer blocks in CSS.
+- Use static rendering by default, explicit CSS variables for dynamic values, and enable native pruning only when intended.
+- Use the Master CSS MCP server with project context when available. A manifest load failure is an error, never permission to switch to the preset.
+- When available, mastercss_suggest_classes proposes classes for isolated CSS declaration blocks. Preserve its remainingCss and review cascade changes; generated CSS alone does not verify browser rendering.
+- Distinguish matching, CSS value validity, and browser support; preserve unknown native CSS and report known invalid values.
 - Use ESLint for class policy diagnostics and the Master CSS Language Service for completion, hover, colors, highlighting, and directive formatting.
 - Do not invent Master CSS APIs, directives, package names, or Tailwind-style syntax.
 - Preserve semantic HTML, accessibility attributes, and behavior.
 `;
-//#endregion
 export { AGENT_RULES_BLOCK, CANONICAL_ESLINT_CONFIG, MASTER_CSS_PACKAGES, MASTER_CSS_VERSION };

package/dist/core.d.ts

@@ -1,5 +1,4 @@
-import { RenderingMode } from "./modes.js";
-//#region src/core.d.ts
+import { MasterCSSRenderingMode } from "@master/css-schema/integration";
 type CommandFramework = 'none' | 'vite' | 'react' | 'react-router' | 'tanstack-start' | 'vue' | 'nextjs' | 'svelte' | 'nuxt' | 'astro' | 'webpack' | 'rspack' | 'rsbuild' | 'laravel' | 'lit' | 'angular';
 type CommandFrameworkOption = CommandFramework | 'auto';
 type CommandPackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
@@ -14,7 +13,7 @@ interface CommandOptions {
   dryRun?: boolean;
   json?: boolean;
   yes?: boolean;
-  mode?: RenderingMode;
+  mode?: MasterCSSRenderingMode;
 }
 type InstallResolution = CommandPackageManager | false | 'detected' | undefined;
 type PromptQuestion = (question: string) => Promise<string>;
@@ -26,5 +25,4 @@ interface ResolvedCommandOptions {
 }
 declare function runProgram(argv?: string[]): Promise<void>;
 declare function resolveCommandOptions(options: CommandOptions, prompt?: PromptQuestion): Promise<ResolvedCommandOptions>;
-//#endregion
 export { CommandOptions, InstallResolution, PromptQuestion, ResolvedCommandOptions, runProgram as default, resolveCommandOptions };

package/dist/core.js

@@ -1,27 +1,29 @@
-import { formatRenderingModes, isRenderingMode } from "./modes.js";
-import { applySetupPlan, createSetupPlan } from "./index.js";
+import { MASTER_CSS_VERSION } from "./constants.js";
+import { formatRenderingModes, resolveRenderingMode } from "./modes.js";
+import { applyMasterCSSSetupPlan, planMasterCSSSetup } from "./index.js";
 import { existsSync, readFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { createInterface } from "node:readline/promises";
 import { fileURLToPath } from "node:url";
 import { Command, InvalidArgumentError } from "commander";
-//#region src/core.ts
-const __dirname = dirname(fileURLToPath(import.meta.url));
+// src/core.ts
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 const pkg = JSON.parse(readFileSync(resolve(__dirname, "../package.json"), "utf8"));
 const newProjectCommands = [
 	"npm create vite@latest my-app",
 	"cd my-app",
-	"npm create @master/css@rc -- --yes"
+	`npm create @master/css@${MASTER_CSS_VERSION} -- --yes`
 ];
 async function runProgram(argv = process.argv) {
 	const program = new Command();
 	program.name("create-css").description(pkg.description).version(pkg.version || "0.0.0");
-	const configure = (command) => command.option("-C, --cwd <path>", "Project root to update.").option("--framework <framework>", "Framework: auto, vite, react, react-router, tanstack-start, vue, nextjs, svelte, nuxt, astro, webpack, rspack, rsbuild, laravel, lit, angular, none.", "auto").option("--eslint", "Add the Master CSS recommended ESLint flat config.").option("--no-eslint", "Skip the Master CSS recommended ESLint flat config.").option("--mcp", "Add the Master CSS MCP package and print the stdio registration command.").option("--no-mcp", "Skip the Master CSS MCP package and registration command.").option("--ai", "Add Master CSS guidance to AGENTS.md.").option("--no-ai", "Skip Master CSS guidance for coding agents.").option("--minimal", "Only add core Master CSS framework setup.").option("--mode <mode>", `Rendering mode: ${formatRenderingModes()}.`, parseRenderingModeOption).option("--install <package-manager>", "Run dependency installation with npm, pnpm, yarn, or bun after edits.").option("--no-install", "Do not run dependency installation.").option("--dry-run", "Print the setup plan without writing files.").option("--json", "Print machine-readable JSON.").option("-y, --yes", "Accept recommended defaults and run package installation with the detected package manager.");
+	const configure = (command) => command.option("-C, --cwd <path>", "Project root to update.").option("--framework <framework>", "Framework: auto, vite, react, react-router, tanstack-start, vue, nextjs, svelte, nuxt, astro, webpack, rspack, rsbuild, laravel, lit, angular, none.", "auto").option("--eslint", "Add the Master CSS recommended ESLint flat config.").option("--no-eslint", "Skip the Master CSS recommended ESLint flat config.").option("--mcp", "Add the Master CSS MCP package and print the stdio registration command.").option("--no-mcp", "Skip the Master CSS MCP package and registration command.").option("--ai", "Add Master CSS guidance to AGENTS.md.").option("--no-ai", "Skip Master CSS guidance for coding agents.").option("--minimal", "Only add core Master CSS framework setup.").option("--mode <mode>", `Rendering mode: ${formatRenderingModes()}. Defaults to static.`, parseRenderingModeOption).option("--install <package-manager>", "Run dependency installation with npm, pnpm, yarn, or bun after edits.").option("--no-install", "Do not run dependency installation.").option("--dry-run", "Print the setup plan without writing files.").option("--json", "Print machine-readable JSON.").option("-y, --yes", "Accept recommended defaults and run package installation with the detected package manager.");
 	configure(program).argument("[project name]", "Deprecated. The installer now updates the current project; use --cwd for another root.").action(async (projectName, options) => {
 		if (projectName && projectName !== "add") program.error(`Project scaffolding is not provided by @master/create-css. Create a Vite project first, then run the installer from the project root:\n\n${formatNewProjectCommands()}`);
 		await runAdd(options);
 	});
-	configure(program.command("add").description("Add Master CSS to an existing project.")).action(runAdd);
+	configure(program.command("add").description("Add Master CSS to an existing project.")).action((_options, command) => runAdd(command.optsWithGlobals()));
 	await program.parseAsync(argv);
 }
 async function runAdd(options) {
@@ -52,12 +54,12 @@ async function runAdd(options) {
 		process.stdout.write(`${JSON.stringify(plan, null, 2)}\n`);
 		return;
 	}
-	applySetupPlan(plan, { install: resolvedOptions.install === "detected" ? plan.packageManager : resolvedOptions.install });
+	applyMasterCSSSetupPlan(plan, { install: resolvedOptions.install === "detected" ? plan.packageManager : resolvedOptions.install });
 	if (!options.json) printSummary(plan);
 }
 function createCommandSetupPlan(options) {
 	try {
-		return createSetupPlan(options);
+		return planMasterCSSSetup(options);
 	} catch (error) {
 		if (error instanceof Error) {
 			process.stderr.write(`${error.message}\n`);
@@ -99,8 +101,11 @@ function shouldPrompt(options) {
 	return !options.yes && !options.json && !options.dryRun && Boolean(process.stdin.isTTY) && Boolean(process.stdout.isTTY);
 }
 function parseRenderingModeOption(value) {
-	if (isRenderingMode(value)) return value;
-	throw new InvalidArgumentError(`Invalid rendering mode "${value}". Supported modes: ${formatRenderingModes()}.`);
+	try {
+		return resolveRenderingMode(value);
+	} catch {
+		throw new InvalidArgumentError(`Invalid rendering mode "${value}". Supported modes: ${formatRenderingModes()}.`);
+	}
 }
 function createTTYPrompt() {
 	const input = process.stdin;
@@ -129,7 +134,6 @@ function printSummary(plan) {
 	process.stdout.write(`Files created: ${plan.summary.filesToCreate}\n`);
 	process.stdout.write(`Files updated: ${plan.summary.filesToUpdate}\n`);
 	for (const warning of plan.warnings) process.stdout.write(`Warning: ${warning}\n`);
-	for (const command of plan.commands) process.stdout.write(`Next: ${command.command}\n`);
+	for (const command of plan.commands) process.stdout.write(`Next: ${[command.executable, ...command.args].join(" ")}\n`);
 }
-//#endregion
 export { runProgram as default, resolveCommandOptions };

package/dist/index.d.ts

@@ -1,46 +1,52 @@
-import { RenderingMode } from "./modes.js";
-//#region src/index.d.ts
-type Framework = 'none' | 'vite' | 'react' | 'react-router' | 'tanstack-start' | 'vue' | 'nextjs' | 'svelte' | 'nuxt' | 'astro' | 'webpack' | 'rspack' | 'rsbuild' | 'laravel' | 'lit' | 'angular';
-type FrameworkOption = Framework | 'auto';
-type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
-type FileAction = 'create' | 'update' | 'skip';
-interface SetupOptions {
+import { MasterCSSRenderingMode } from "@master/css-schema/integration";
+type MasterCSSSetupFramework = 'none' | 'vite' | 'react' | 'react-router' | 'tanstack-start' | 'vue' | 'nextjs' | 'svelte' | 'nuxt' | 'astro' | 'webpack' | 'rspack' | 'rsbuild' | 'laravel' | 'lit' | 'angular';
+type MasterCSSSetupFrameworkOption = MasterCSSSetupFramework | 'auto';
+type MasterCSSSetupPackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
+type MasterCSSSetupFileAction = 'create' | 'update' | 'skip';
+interface MasterCSSSetupOptions {
   root?: string;
-  framework?: FrameworkOption;
+  framework?: MasterCSSSetupFrameworkOption;
   eslint?: boolean;
   mcp?: boolean;
   ai?: boolean;
   minimal?: boolean;
-  install?: PackageManager | false;
+  install?: MasterCSSSetupPackageManager | false;
   yes?: boolean;
   packageTag?: string;
-  mode?: RenderingMode;
+  mode?: MasterCSSRenderingMode;
 }
-interface PlannedDependency {
+interface MasterCSSSetupDependency {
   name: string;
   version: string;
   dev: boolean;
 }
-interface PlannedFileChange {
+interface MasterCSSSetupFilePrecondition {
+  exists: boolean;
+  digest: string | null;
+}
+interface MasterCSSSetupFileChange {
   path: string;
-  action: FileAction;
+  action: MasterCSSSetupFileAction;
   content?: string;
   reason: string;
+  precondition: MasterCSSSetupFilePrecondition;
 }
-interface PlannedCommand {
-  command: string;
+interface MasterCSSSetupCommand {
+  executable: string;
+  args: readonly string[];
   reason: string;
 }
-interface SetupPlan {
+interface MasterCSSSetupPlan {
   version: 1;
   root: string;
-  framework: Framework;
-  packageManager: PackageManager;
-  dependencies: PlannedDependency[];
-  files: PlannedFileChange[];
-  commands: PlannedCommand[];
-  warnings: string[];
-  mode?: RenderingMode;
+  framework: MasterCSSSetupFramework;
+  packageManager: MasterCSSSetupPackageManager;
+  packageJSONPrecondition: MasterCSSSetupFilePrecondition;
+  dependencies: readonly MasterCSSSetupDependency[];
+  files: readonly MasterCSSSetupFileChange[];
+  commands: readonly MasterCSSSetupCommand[];
+  warnings: readonly string[];
+  mode?: MasterCSSRenderingMode;
   summary: {
     dependencies: number;
     filesToCreate: number;
@@ -49,8 +55,6 @@ interface SetupPlan {
     warnings: number;
   };
 }
-declare function createSetupPlan(options?: SetupOptions): SetupPlan;
-declare function applySetupPlan(plan: SetupPlan, options?: SetupOptions): void;
-declare function applySetup(options?: SetupOptions): SetupPlan;
-//#endregion
-export { FileAction, Framework, FrameworkOption, PackageManager, PlannedCommand, PlannedDependency, PlannedFileChange, type RenderingMode, SetupOptions, SetupPlan, applySetup, applySetupPlan, createSetupPlan };
+declare function planMasterCSSSetup(options?: MasterCSSSetupOptions): MasterCSSSetupPlan;
+declare function applyMasterCSSSetupPlan(plan: MasterCSSSetupPlan, options?: MasterCSSSetupOptions): void;
+export { MasterCSSSetupCommand, MasterCSSSetupDependency, MasterCSSSetupFileAction, MasterCSSSetupFileChange, MasterCSSSetupFilePrecondition, MasterCSSSetupFramework, MasterCSSSetupFrameworkOption, MasterCSSSetupOptions, MasterCSSSetupPackageManager, MasterCSSSetupPlan, applyMasterCSSSetupPlan, planMasterCSSSetup };

package/dist/index.js

@@ -1,24 +1,25 @@
-import { AGENT_RULES_BLOCK, CANONICAL_ESLINT_CONFIG, MASTER_CSS_PACKAGES } from "./constants.js";
+import { AGENT_RULES_BLOCK, CANONICAL_ESLINT_CONFIG, MASTER_CSS_PACKAGES, MASTER_CSS_VERSION } from "./constants.js";
+import { addAngularRuntimeSetup, addGeneratedStylesheetImport, addLitShadowRuntime, addLitShadowStylesheet, addMasterCSSAstroIntegration, addMasterCSSEslintConfig, addMasterCSSImportToStylesheet, addMasterCSSNextConfig, addMasterCSSNuxtModule, addMasterCSSRsbuildPlugin, addMasterCSSRspackPlugin, addMasterCSSStaticVitePlugin, addMasterCSSTanStackStartVitePlugin, addMasterCSSVitePlugin, addMasterCSSWebpackPlugin, addReactRouterRootCSSImport, addTanStackStartRootCSSImport, addViteClientTypes, createAstroConfig, createMasterCSSStylesheet, createNextConfig, createNuxtConfig, createRsbuildConfig, createRspackConfig, createStaticViteConfig, createViteConfig, createWebpackConfig } from "./transforms.js";
 import { resolveRenderingMode } from "./modes.js";
-import { addAngularRuntimeSetup, addLitShadowRuntime, addMasterCSSAstroIntegration, addMasterCSSEslintConfig, addMasterCSSImportToStylesheet, addMasterCSSNextConfig, addMasterCSSNuxtModule, addMasterCSSRsbuildPlugin, addMasterCSSRspackPlugin, addMasterCSSStaticVitePlugin, addMasterCSSTanStackStartVitePlugin, addMasterCSSVitePlugin, addMasterCSSWebpackPlugin, addReactRouterRootCSSImport, addTanStackStartRootCSSImport, addViteClientTypes, createAstroConfig, createMasterCSSStylesheet, createNextConfig, createNuxtConfig, createRsbuildConfig, createRspackConfig, createStaticViteConfig, createViteConfig, createWebpackConfig } from "./transforms.js";
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { dirname, join, resolve } from "node:path";
 import { spawnSync } from "node:child_process";
-//#region src/index.ts
+import { createHash } from "node:crypto";
+import { dirname, join, resolve } from "node:path";
+// src/index.ts
 const lockfiles = {
-	pnpm: "pnpm-lock.yaml",
-	npm: "package-lock.json",
-	yarn: "yarn.lock",
-	bun: "bun.lockb"
+	pnpm: ["pnpm-lock.yaml"],
+	npm: ["package-lock.json"],
+	yarn: ["yarn.lock"],
+	bun: ["bun.lock", "bun.lockb"]
 };
-function createSetupPlan(options = {}) {
+function planMasterCSSSetup(options = {}) {
 	const root = resolve(options.root || process.cwd());
 	const packageJSON = readPackageJSON(root);
 	const packageManager = resolvePackageManager(root, packageJSON, options.install || void 0);
 	const framework = resolveFramework(root, packageJSON, options.framework || "auto");
 	const mode = resolveRenderingMode(options.mode);
 	assertFrameworkSupportsMode(framework, mode);
-	const version = options.packageTag || "rc";
+	const version = options.packageTag || MASTER_CSS_VERSION;
 	const eslint = resolveRecommendedOption(options.eslint, options.minimal);
 	const mcp = resolveRecommendedOption(options.mcp, options.minimal);
 	const ai = resolveRecommendedOption(options.ai, options.minimal);
@@ -27,13 +28,36 @@ function createSetupPlan(options = {}) {
 	const commands = [];
 	const warnings = [];
 	if (framework === "svelte") commands.push({
-		command: packageManager === "pnpm" ? "pnpm dlx sv add @master/css-sv" : packageManager === "yarn" ? "yarn dlx sv add @master/css-sv" : packageManager === "bun" ? "bunx sv add @master/css-sv" : "npx sv add @master/css-sv",
+		executable: packageManager === "pnpm" ? "pnpm" : packageManager === "yarn" ? "yarn" : packageManager === "bun" ? "bunx" : "npx",
+		args: packageManager === "pnpm" || packageManager === "yarn" ? [
+			"dlx",
+			"sv",
+			"add",
+			"@master/css-svelte-addon"
+		] : [
+			"sv",
+			"add",
+			"@master/css-svelte-addon"
+		],
 		reason: "SvelteKit file setup is delegated to the official Svelte CLI add-on."
 	});
 	else {
-		for (const dependency of dependenciesForFramework(framework, version)) pushDependency(dependencies, dependency.name, dependency.dev, dependency.version);
+		for (const dependency of dependenciesForFramework(framework, version, mode)) pushDependency(dependencies, dependency.name, dependency.dev, dependency.version);
 		files.push(...filesForFramework(root, framework, warnings, mode));
 	}
+	if ((framework === "angular" || framework === "none") && (!mode || mode === "static")) {
+		commands.push({
+			executable: "npx",
+			args: [
+				"master-css",
+				"generate",
+				"--output",
+				"src/master.generated.css"
+			],
+			reason: "Generate static CSS before the application build. Add --watch in a separate terminal during development."
+		});
+		warnings.push("Run the proposed CSS generation command after installation and before the application build; it does not run automatically.");
+	}
 	if (eslint) {
 		pushDependency(dependencies, MASTER_CSS_PACKAGES.eslintConfig, true, version);
 		pushDependency(dependencies, "eslint", true, "^9.0.0 || ^10.0.0");
@@ -42,11 +66,30 @@ function createSetupPlan(options = {}) {
 	if (mcp) {
 		pushDependency(dependencies, MASTER_CSS_PACKAGES.mcp, true, version);
 		commands.push({
-			command: `npx -y @master/css-mcp@${version} --root ${root}`,
+			executable: "npx",
+			args: [
+				"-y",
+				`@master/css-mcp@${version}`,
+				"--root",
+				root
+			],
 			reason: "Use this stdio command when registering the Master CSS MCP server in an MCP client."
 		});
 	}
-	if (ai) files.push(planTextFile(root, "AGENTS.md", appendAgentRules, AGENT_RULES_BLOCK, "Add Master CSS instructions for local coding agents."));
+	if (ai) {
+		files.push(planTextFile(root, "AGENTS.md", appendAgentRules, AGENT_RULES_BLOCK, "Add Master CSS instructions for local coding agents."));
+		commands.push({
+			executable: "npx",
+			args: [
+				"skills",
+				"add",
+				"master-co/css",
+				"--skill",
+				"master-css"
+			],
+			reason: "Install the official Master CSS skill for your chosen coding agent. This command is guidance only and is not run by setup; verify skill compatibility with the installed Master CSS version."
+		});
+	}
 	if (!existsSync(join(root, "package.json"))) warnings.push("No package.json was found. Dependency changes will be skipped until a package.json exists.");
 	if (framework === "none") warnings.push("No supported framework was detected. The plan adds base Master CSS packages and a standalone stylesheet entry only.");
 	return {
@@ -54,6 +97,7 @@ function createSetupPlan(options = {}) {
 		root,
 		framework,
 		packageManager,
+		packageJSONPrecondition: createFilePrecondition(join(root, "package.json")),
 		dependencies,
 		files,
 		commands,
@@ -68,7 +112,8 @@ function createSetupPlan(options = {}) {
 		}
 	};
 }
-function applySetupPlan(plan, options = {}) {
+function applyMasterCSSSetupPlan(plan, options = {}) {
+	assertPlanPreconditions(plan);
 	applyDependencyChanges(plan.root, plan.dependencies);
 	for (const file of plan.files) {
 		if (file.action === "skip" || file.content === void 0) continue;
@@ -86,11 +131,6 @@ function applySetupPlan(plan, options = {}) {
 		if (result.status) throw new Error(`${install} install failed with exit code ${result.status}`);
 	}
 }
-function applySetup(options = {}) {
-	const plan = createSetupPlan(options);
-	applySetupPlan(plan, options);
-	return plan;
-}
 function filesForFramework(root, framework, warnings, mode) {
 	switch (framework) {
 		case "vite": return [planTextFile(root, firstExistingPath(root, [
@@ -124,7 +164,7 @@ function filesForFramework(root, framework, warnings, mode) {
 			return files;
 		}
 		case "tanstack-start": {
-			const pluginMode = mode ?? "runtime";
+			const pluginMode = mode ?? "static";
 			const files = [planTextFile(root, firstExistingPath(root, [
 				"vite.config.ts",
 				"vite.config.js",
@@ -164,7 +204,7 @@ function filesForFramework(root, framework, warnings, mode) {
 			const viteConfigPath = findExistingPath(root, ["vite.config.ts", "vite.config.js"]);
 			const files = [planTextFile(root, "resources/css/app.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the Laravel Vite CSS entry.")];
 			if (viteConfigPath) files.unshift(planTextFile(root, viteConfigPath, addMasterCSSStaticVitePlugin, createStaticViteConfig(), "Register the Master CSS Vite plugin in static mode."));
-			else warnings.push("No vite.config.ts or vite.config.js was found. Add @master/css.vite to the Laravel Vite config manually after setup.");
+			else warnings.push("No vite.config.ts or vite.config.js was found. Add @master/css-vite to the Laravel Vite config manually after setup.");
 			return files;
 		}
 		case "lit": {
@@ -176,19 +216,20 @@ function filesForFramework(root, framework, warnings, mode) {
 				], "vite.config.ts"), (content) => addMasterCSSVitePlugin(content, mode), createViteConfig(mode), "Register the Master CSS Vite plugin."),
 				planTextFile(root, "src/index.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the Lit project CSS entry."),
 				planTextFile(root, "src/vite-env.d.ts", addViteClientTypes, `/// <reference types="vite/client" />
-/// <reference types="@master/css-integration/client" />
+/// <reference types="@master/css/client" />
 `, "Add Vite and Master CSS integration client types.")
 			];
 			const elementPath = findExistingPath(root, ["src/my-element.ts", "src/my-element.js"]);
-			if (elementPath) files.push(planTextFile(root, elementPath, addLitShadowRuntime, "", "Initialize Master CSS Runtime for the Lit shadow root."));
-			else warnings.push("No standard src/my-element.ts or src/my-element.js file was found. Add @cssRuntime to Lit elements that render Master CSS classes inside shadow roots.");
+			if (elementPath) files.push(planTextFile(root, elementPath, mode === "runtime" || mode === "progressive" ? addLitShadowRuntime : addLitShadowStylesheet, "", mode === "runtime" || mode === "progressive" ? "Initialize Master CSS Runtime for the Lit shadow root." : "Include generated CSS in the Lit shadow root."));
+			else warnings.push("No standard src/my-element.ts or src/my-element.js file was found. Add the selected mode’s CSS or runtime to each Lit shadow root using the Lit installation guide.");
 			return files;
 		}
 		case "angular": {
+			if (!mode || mode === "static") return [planTextFile(root, "master.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create the CLI source entry."), planTextFile(root, "src/styles.css", addGeneratedStylesheetImport, addGeneratedStylesheetImport(""), "Import the generated static CSS from Angular’s global stylesheet.")];
 			const files = [planTextFile(root, "src/styles.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the Angular global stylesheet entry.")];
 			const mainPath = findExistingPath(root, ["src/main.ts"]);
 			if (mainPath) files.unshift(planTextFile(root, mainPath, addAngularRuntimeSetup, "", "Initialize Master CSS Runtime in the Angular browser entry."));
-			else warnings.push("No src/main.ts file was found. Initialize CSSRuntime manually in the Angular browser entry after setup.");
+			else warnings.push("No src/main.ts file was found. Initialize MasterCSSRuntime manually in the Angular browser entry after setup.");
 			return files;
 		}
 		case "rspack": return [planTextFile(root, firstExistingPath(root, [
@@ -211,7 +252,7 @@ function filesForFramework(root, framework, warnings, mode) {
 			"webpack.config.js",
 			"webpack.config.cjs"
 		], "webpack.config.mjs"), (content) => addMasterCSSWebpackPlugin(content, mode), createWebpackConfig(mode), "Register the Master CSS Webpack plugin."), planTextFile(root, "src/index.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the project CSS entry for Webpack.")];
-		default: return [planTextFile(root, "src/master.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create a standalone Master CSS stylesheet entry.")];
+		default: return [planTextFile(root, "master.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create a standalone Master CSS source entry; link the generated src/master.generated.css in your application.")];
 	}
 }
 function assertFrameworkSupportsMode(framework, mode) {
@@ -220,9 +261,13 @@ function assertFrameworkSupportsMode(framework, mode) {
 		if (mode === "static") return;
 		throw new Error(`--mode ${mode} is not supported for laravel. The Laravel installer only supports --mode static.`);
 	}
-	if (framework === "angular" || framework === "svelte" || framework === "none") throw new Error(`--mode is not supported for ${framework}. Supported frameworks: vite, react, react-router, tanstack-start, vue, nextjs, nuxt, astro, webpack, rspack, rsbuild, laravel, lit.`);
+	if (framework === "angular" || framework === "none") {
+		if (mode === "static" || mode === "runtime") return;
+		throw new Error(`--mode ${mode} is not supported for ${framework}. Use static or runtime.`);
+	}
+	if (framework === "svelte") throw new Error(`--mode is not supported for ${framework}. Supported frameworks: vite, react, react-router, tanstack-start, vue, nextjs, nuxt, astro, webpack, rspack, rsbuild, laravel, lit.`);
 }
-function dependenciesForFramework(framework, version) {
+function dependenciesForFramework(framework, version, mode) {
 	const dependencies = [{
 		name: MASTER_CSS_PACKAGES.css,
 		version,
@@ -253,15 +298,15 @@ function dependenciesForFramework(framework, version) {
 		version,
 		dev: false
 	});
-	if (framework === "none" || framework === "lit" || framework === "angular") dependencies.push({
+	if ((framework === "none" || framework === "lit" || framework === "angular") && (mode === "runtime" || mode === "progressive")) dependencies.push({
 		name: MASTER_CSS_PACKAGES.runtime,
 		version,
 		dev: false
 	});
-	if (framework === "angular") dependencies.push({
-		name: MASTER_CSS_PACKAGES.preset,
+	if ((framework === "none" || framework === "angular") && (!mode || mode === "static")) dependencies.push({
+		name: MASTER_CSS_PACKAGES.cli,
 		version,
-		dev: false
+		dev: true
 	});
 	return dependencies;
 }
@@ -271,7 +316,8 @@ function planTextFile(root, path, transform, createContent, reason) {
 		path,
 		action: "create",
 		content: createContent,
-		reason
+		reason,
+		precondition: createFilePrecondition(filePath)
 	};
 	const content = readFileSync(filePath, "utf8");
 	const nextContent = transform(content);
@@ -279,7 +325,8 @@ function planTextFile(root, path, transform, createContent, reason) {
 		path,
 		action: nextContent === content ? "skip" : "update",
 		...nextContent === content ? {} : { content: nextContent },
-		reason
+		reason,
+		precondition: createFilePrecondition(filePath)
 	};
 }
 function applyDependencyChanges(root, dependencies) {
@@ -321,7 +368,7 @@ function resolvePackageManager(root, packageJSON, explicit) {
 	if (isPackageManager(explicit)) return explicit;
 	const declared = packageJSON?.packageManager?.split("@")[0];
 	if (isPackageManager(declared)) return declared;
-	for (const [name, lockfile] of Object.entries(lockfiles)) if (existsSync(join(root, lockfile))) return name;
+	for (const [name, lockfile] of Object.entries(lockfiles)) if (lockfile.some((file) => existsSync(join(root, file)))) return name;
 	return "npm";
 }
 function resolveFramework(root, packageJSON, framework) {
@@ -360,5 +407,25 @@ function appendAgentRules(content) {
 	if (content.includes("## Master CSS")) return content;
 	return `${content.trimEnd()}${content.trim() ? "\n\n" : ""}${AGENT_RULES_BLOCK}`;
 }
-//#endregion
-export { applySetup, applySetupPlan, createSetupPlan };
+function digest(content) {
+	return createHash("sha256").update(content).digest("hex");
+}
+function createFilePrecondition(filePath) {
+	if (!existsSync(filePath)) return {
+		exists: false,
+		digest: null
+	};
+	return {
+		exists: true,
+		digest: digest(readFileSync(filePath, "utf8"))
+	};
+}
+function assertFilePrecondition(root, path, precondition) {
+	const current = createFilePrecondition(join(root, path));
+	if (current.exists !== precondition.exists || current.digest !== precondition.digest) throw new Error(`Setup plan is stale because ${path} changed after planning.`);
+}
+function assertPlanPreconditions(plan) {
+	if (plan.dependencies.length) assertFilePrecondition(plan.root, "package.json", plan.packageJSONPrecondition);
+	for (const file of plan.files) if (file.action !== "skip") assertFilePrecondition(plan.root, file.path, file.precondition);
+}
+export { applyMasterCSSSetupPlan, planMasterCSSSetup };

package/dist/modes.d.ts

@@ -1,8 +1,5 @@
-//#region src/modes.d.ts
-declare const renderingModes: readonly ['runtime', 'static', 'progressive', 'pre-render'];
-type RenderingMode = typeof renderingModes[number];
-declare function isRenderingMode(value: unknown): value is RenderingMode;
+import { MasterCSSRenderingMode } from "@master/css-schema/integration";
+declare function isRenderingMode(value: unknown): value is MasterCSSRenderingMode;
 declare function formatRenderingModes(): string;
-declare function resolveRenderingMode(value: unknown): RenderingMode | undefined;
-//#endregion
-export { RenderingMode, formatRenderingModes, isRenderingMode, renderingModes, resolveRenderingMode };
+declare function resolveRenderingMode(value: unknown): MasterCSSRenderingMode | undefined;
+export { formatRenderingModes, isRenderingMode, resolveRenderingMode };

package/dist/modes.js

@@ -1,20 +1,15 @@
-//#region src/modes.ts
-const renderingModes = [
-	"runtime",
-	"static",
-	"progressive",
-	"pre-render"
-];
+import { MASTER_CSS_RENDERING_MODES, isMasterCSSRenderingMode } from "@master/css-schema/integration";
+// src/modes.ts
 function isRenderingMode(value) {
-	return renderingModes.includes(value);
+	return isMasterCSSRenderingMode(value);
 }
 function formatRenderingModes() {
-	return renderingModes.join(", ");
+	return MASTER_CSS_RENDERING_MODES.join(", ");
 }
 function resolveRenderingMode(value) {
 	if (value === void 0) return void 0;
+	if (value === "pre-render") return "prerender";
 	if (isRenderingMode(value)) return value;
 	throw new Error(`Invalid rendering mode "${String(value)}". Supported modes: ${formatRenderingModes()}.`);
 }
-//#endregion
-export { formatRenderingModes, isRenderingMode, renderingModes, resolveRenderingMode };
+export { formatRenderingModes, isRenderingMode, resolveRenderingMode };

package/dist/transforms.d.ts

@@ -1,29 +1,30 @@
-import { RenderingMode } from "./modes.js";
-//#region src/transforms.d.ts
+import { MasterCSSRenderingMode } from "@master/css-schema/integration";
 declare function addMasterCSSImportToStylesheet(content: string): string;
 declare function createMasterCSSStylesheet(): string;
-declare function addMasterCSSVitePlugin(content: string, mode?: RenderingMode): string;
+declare function addMasterCSSVitePlugin(content: string, mode?: MasterCSSRenderingMode): string;
 declare function addReactRouterRootCSSImport(content: string): string;
 declare function addTanStackStartRootCSSImport(content: string): string;
 declare function addMasterCSSStaticVitePlugin(content: string): string;
-declare function addMasterCSSTanStackStartVitePlugin(content: string, mode?: RenderingMode): string;
-declare function addMasterCSSRspackPlugin(content: string, mode?: RenderingMode): string;
-declare function addMasterCSSWebpackPlugin(content: string, mode?: RenderingMode): string;
-declare function addMasterCSSRsbuildPlugin(content: string, mode?: RenderingMode): string;
-declare function createViteConfig(mode?: RenderingMode): string;
+declare function addMasterCSSTanStackStartVitePlugin(content: string, mode?: MasterCSSRenderingMode): string;
+declare function addMasterCSSRspackPlugin(content: string, mode?: MasterCSSRenderingMode): string;
+declare function addMasterCSSWebpackPlugin(content: string, mode?: MasterCSSRenderingMode): string;
+declare function addMasterCSSRsbuildPlugin(content: string, mode?: MasterCSSRenderingMode): string;
+declare function createViteConfig(mode?: MasterCSSRenderingMode): string;
 declare function createStaticViteConfig(): string;
-declare function createRspackConfig(mode?: RenderingMode): string;
-declare function createWebpackConfig(mode?: RenderingMode): string;
-declare function createRsbuildConfig(mode?: RenderingMode): string;
-declare function createNextConfig(mode?: RenderingMode): string;
-declare function addMasterCSSNextConfig(content: string, mode?: RenderingMode): string;
-declare function addMasterCSSNuxtModule(content: string, mode?: RenderingMode): string;
-declare function createNuxtConfig(mode?: RenderingMode): string;
-declare function addMasterCSSAstroIntegration(content: string, mode?: RenderingMode): string;
-declare function createAstroConfig(mode?: RenderingMode): string;
+declare function createRspackConfig(mode?: MasterCSSRenderingMode): string;
+declare function createWebpackConfig(mode?: MasterCSSRenderingMode): string;
+declare function createRsbuildConfig(mode?: MasterCSSRenderingMode): string;
+declare function createNextConfig(mode?: MasterCSSRenderingMode): string;
+declare function addMasterCSSNextConfig(content: string, mode?: MasterCSSRenderingMode): string;
+declare function addMasterCSSNuxtModule(content: string, mode?: MasterCSSRenderingMode): string;
+declare function createNuxtConfig(mode?: MasterCSSRenderingMode): string;
+declare function addMasterCSSAstroIntegration(content: string, mode?: MasterCSSRenderingMode): string;
+declare function createAstroConfig(mode?: MasterCSSRenderingMode): string;
 declare function addViteClientTypes(content: string): string;
+/** Preserve the component's own styles while adding build-generated shadow CSS. */
+declare function addLitShadowStylesheet(content: string): string;
+declare function addGeneratedStylesheetImport(content: string): string;
 declare function addLitShadowRuntime(content: string): string;
 declare function addAngularRuntimeSetup(content: string): string;
 declare function addMasterCSSEslintConfig(content: string): string;
-//#endregion
-export { addAngularRuntimeSetup, addLitShadowRuntime, addMasterCSSAstroIntegration, addMasterCSSEslintConfig, addMasterCSSImportToStylesheet, addMasterCSSNextConfig, addMasterCSSNuxtModule, addMasterCSSRsbuildPlugin, addMasterCSSRspackPlugin, addMasterCSSStaticVitePlugin, addMasterCSSTanStackStartVitePlugin, addMasterCSSVitePlugin, addMasterCSSWebpackPlugin, addReactRouterRootCSSImport, addTanStackStartRootCSSImport, addViteClientTypes, createAstroConfig, createMasterCSSStylesheet, createNextConfig, createNuxtConfig, createRsbuildConfig, createRspackConfig, createStaticViteConfig, createViteConfig, createWebpackConfig };
+export { addAngularRuntimeSetup, addGeneratedStylesheetImport, addLitShadowRuntime, addLitShadowStylesheet, addMasterCSSAstroIntegration, addMasterCSSEslintConfig, addMasterCSSImportToStylesheet, addMasterCSSNextConfig, addMasterCSSNuxtModule, addMasterCSSRsbuildPlugin, addMasterCSSRspackPlugin, addMasterCSSStaticVitePlugin, addMasterCSSTanStackStartVitePlugin, addMasterCSSVitePlugin, addMasterCSSWebpackPlugin, addReactRouterRootCSSImport, addTanStackStartRootCSSImport, addViteClientTypes, createAstroConfig, createMasterCSSStylesheet, createNextConfig, createNuxtConfig, createRsbuildConfig, createRspackConfig, createStaticViteConfig, createViteConfig, createWebpackConfig };

package/dist/transforms.js

@@ -1,5 +1,5 @@
 import { CANONICAL_ESLINT_CONFIG } from "./constants.js";
-//#region src/transforms.ts
+// src/transforms.ts
 function formatMasterCSSCall(mode) {
 	return mode ? `masterCSS({ mode: '${mode}' })` : "masterCSS()";
 }
@@ -7,17 +7,28 @@ function formatWebpackPluginCall(mode) {
 	return mode ? `new MasterCSSPlugin({ mode: '${mode}' })` : "new MasterCSSPlugin()";
 }
 function formatNuxtModule(mode) {
-	return mode ? `['@master/css.nuxt', { mode: '${mode}' }]` : "'@master/css.nuxt'";
+	return mode ? `['@master/css-nuxt', { mode: '${mode}' }]` : "'@master/css-nuxt'";
 }
 function formatNextCall(target, mode) {
-	return mode ? `${mode === "static" ? "await " : ""}withMasterCSS(${target}, { mode: '${mode}' })` : `withMasterCSS(${target})`;
+	return mode ? `withMasterCSS(${target}, { mode: '${mode}' })` : `withMasterCSS(${target})`;
+}
+function formatNextExport(target, mode) {
+	return `${!mode || mode === "static" ? "async () => " : ""}${formatNextCall(target, mode)}`;
 }
 function addImport(content, statement) {
 	if (content.includes(statement)) return content;
+	const newline = content.includes("\r\n") ? "\r\n" : "\n";
 	const lines = content.split("\n");
+	if (content && !/^import\s/.test(lines[0])) return content + (content.endsWith("\n") ? "" : newline) + statement + newline;
 	let insertIndex = 0;
-	while (insertIndex < lines.length && /^import\s/.test(lines[insertIndex])) insertIndex++;
-	lines.splice(insertIndex, 0, statement);
+	while (insertIndex < lines.length) {
+		const complete = /^import\s+(?:[^'"]+\s+from\s+)?(['"])[^'"]+\1\s*(;?)\s*(?:\/\/.*)?$/.exec(lines[insertIndex]);
+		if (!complete) break;
+		const next = lines.slice(insertIndex + 1).find((line) => line.trim())?.trim();
+		if (!complete[2] && next && !/^(?:import|export|const|let|var|function|class)\b/.test(next)) break;
+		insertIndex++;
+	}
+	lines.splice(insertIndex, 0, statement + (newline === "\r\n" ? "\r" : ""));
 	return lines.join("\n").replace(/\n{3,}/, "\n\n");
 }
 function ensureCSSImport(content) {
@@ -49,8 +60,8 @@ function addMasterCSSStaticVitePlugin(content) {
 }
 function addMasterCSSTanStackStartVitePlugin(content, mode = "static") {
 	const pluginCall = formatMasterCSSCall(mode);
-	if (content.includes("@master/css.vite")) return content;
-	let next = addImport(content, "import masterCSS from '@master/css.vite'");
+	if (content.includes("@master/css-vite")) return content;
+	let next = addImport(content, "import masterCSS from '@master/css-vite'");
 	const tanStackStartPluginPattern = /^(\s*)tanstackStart\([^)]*\),?/m;
 	if (tanStackStartPluginPattern.test(next)) return next.replace(tanStackStartPluginPattern, (match, indent) => {
 		return `${match.endsWith(",") ? match : `${match},`}\n${indent}${pluginCall},`;
@@ -60,24 +71,24 @@ function addMasterCSSTanStackStartVitePlugin(content, mode = "static") {
 	return next;
 }
 function addMasterCSSRspackPlugin(content, mode) {
-	if (content.includes("@master/css.webpack")) return content;
+	if (content.includes("@master/css-webpack")) return content;
 	const pluginCall = formatWebpackPluginCall(mode);
-	let next = addImport(content, "import MasterCSSPlugin from '@master/css.webpack'");
+	let next = addImport(content, "import MasterCSSPlugin from '@master/css-webpack'");
 	if (/plugins\s*:\s*\[/.test(next)) return replaceFirst(next, /plugins\s*:\s*\[/, `plugins: [\n        ${pluginCall},`);
 	if (/export\s+default\s+\{/.test(next)) return replaceFirst(next, /export\s+default\s+\{/, `export default {\n    plugins: [${pluginCall}],`);
 	return next;
 }
 function addMasterCSSWebpackPlugin(content, mode) {
-	if (content.includes("@master/css.webpack")) return content;
+	if (content.includes("@master/css-webpack")) return content;
 	const pluginCall = formatWebpackPluginCall(mode);
-	let next = addImport(content, "import MasterCSSPlugin from '@master/css.webpack'");
+	let next = addImport(content, "import MasterCSSPlugin from '@master/css-webpack'");
 	if (/plugins\s*:\s*\[/.test(next)) return replaceFirst(next, /plugins\s*:\s*\[/, `plugins: [\n        ${pluginCall},`);
 	if (/export\s+default\s+\{/.test(next)) return replaceFirst(next, /export\s+default\s+\{/, `export default {\n    plugins: [${pluginCall}],`);
 	return next;
 }
 function addMasterCSSRsbuildPlugin(content, mode) {
-	if (content.includes("@master/css.webpack")) return content;
-	let next = addImport(content, "import MasterCSSPlugin from '@master/css.webpack'");
+	if (content.includes("@master/css-webpack")) return content;
+	let next = addImport(content, "import MasterCSSPlugin from '@master/css-webpack'");
 	const rspackSetupBody = `            config.plugins ||= []
       config.plugins.push(${formatWebpackPluginCall(mode)})
       return config`;
@@ -99,15 +110,15 @@ ${rspackSetupBody}`);
 	return next;
 }
 function addMasterCSSVitePluginCall(content, pluginCall) {
-	if (content.includes("@master/css.vite")) return content;
-	let next = addImport(content, "import masterCSS from '@master/css.vite'");
+	if (content.includes("@master/css-vite")) return content;
+	let next = addImport(content, "import masterCSS from '@master/css-vite'");
 	if (/plugins\s*:\s*\[/.test(next)) return replaceFirst(next, /plugins\s*:\s*\[/, `plugins: [\n            ${pluginCall},`);
 	if (/defineConfig\(\s*\{/.test(next)) return replaceFirst(next, /defineConfig\(\s*\{/, `defineConfig({\n    plugins: [${pluginCall}],`);
 	return next;
 }
 function createViteConfig(mode) {
 	return `import { defineConfig } from 'vite'
-import masterCSS from '@master/css.vite'
+import masterCSS from '@master/css-vite'
 
 export default defineConfig({
   plugins: [
@@ -120,7 +131,7 @@ function createStaticViteConfig() {
 	return createViteConfig("static");
 }
 function createRspackConfig(mode) {
-	return `import MasterCSSPlugin from '@master/css.webpack'
+	return `import MasterCSSPlugin from '@master/css-webpack'
 
 export default {
   module: {
@@ -138,7 +149,7 @@ export default {
 `;
 }
 function createWebpackConfig(mode) {
-	return `import MasterCSSPlugin from '@master/css.webpack'
+	return `import MasterCSSPlugin from '@master/css-webpack'
 
 export default {
   plugins: [
@@ -149,7 +160,7 @@ export default {
 }
 function createRsbuildConfig(mode) {
 	return `import { defineConfig } from '@rsbuild/core'
-import MasterCSSPlugin from '@master/css.webpack'
+import MasterCSSPlugin from '@master/css-webpack'
 
 export default defineConfig({
   tools: {
@@ -163,27 +174,39 @@ export default defineConfig({
 `;
 }
 function createNextConfig(mode) {
-	return `import { withMasterCSS } from '@master/css.next'
+	return `import withMasterCSS from '@master/css-next'
 
-const nextConfig = ${formatNextCall("{}", mode)}
+const nextConfig = ${formatNextExport("{}", mode)}
 
 export default nextConfig
 `;
 }
 function addMasterCSSNextConfig(content, mode) {
-	if (content.includes("@master/css.next")) return mode ? addMasterCSSNextMode(content, mode) : content;
-	const next = addImport(content, "import { withMasterCSS } from '@master/css.next'");
-	if (/export\s+default\s+/.test(next)) return next.replace(/export\s+default\s+([^;\n]+)(;?)(\n|$)/, `export default ${formatNextCall("$1", mode)}$2$3`);
+	if (content.includes("@master/css-next")) return updateMasterCSSNextConfig(content, mode);
+	const next = addImport(content, "import withMasterCSS from '@master/css-next'");
+	if (/export\s+default\s+/.test(next)) return next.replace(/export\s+default\s+([^;\r\n]+)(;?)(\r?\n|$)/, `export default ${formatNextExport("$1", mode)}$2$3`);
 	return `${next.trimEnd()}
 
-export default ${formatNextCall("{}", mode)}
+export default ${formatNextExport("{}", mode)}
 `;
 }
-function addMasterCSSNextMode(content, mode) {
-	return content.replace(/(?:await\s+)?withMasterCSS\(\s*(\{\s*\}|[A-Za-z_$][\w$]*)\s*(?:,\s*\{[^)]*\})?\s*\)/g, (_match, target) => formatNextCall(target, mode));
+function updateMasterCSSNextConfig(content, mode) {
+	return content.replace(/(await[ \t]+)?\b(withMasterCSS\(\s*(\{\s*\}|[A-Za-z_$][\w$]*)\s*(?:,\s*(\{[^)]*\}))?\s*\))/g, (match, awaited, call, target, options, offset) => {
+		let updated = call;
+		if (mode) {
+			if (!options || /^\{\s*(?:mode\s*:\s*['"][a-z-]+['"]\s*,?\s*)?\}$/.test(options)) updated = formatNextCall(target, mode);
+			else updated = `withMasterCSS(${target}, { ...${/^\{ \.\.\.(\{[^)]*\}), mode: '[a-z-]+' \}$/.exec(options)?.[1] ?? options}, mode: '${mode}' })`;
+		}
+		const before = content.slice(content.lastIndexOf("\n", offset - 1) + 1, offset);
+		const after = content.slice(offset + match.length);
+		const exportedCall = /^export[ \t]+default[ \t]+$/.test(before) && /^;?[ \t]*(?:\r?\n|$)/.test(after);
+		const exportedBinding = /^const[ \t]+nextConfig[ \t]*=[ \t]*$/.test(before) && /^;?[ \t]*(?:\r?\n[ \t]*)+export[ \t]+default[ \t]+nextConfig;?[ \t]*(?:\r?\n|$)/.test(after);
+		if ((exportedCall || exportedBinding) && (awaited || mode === "static")) return `${!mode || mode === "static" ? "async () => " : ""}${updated}`;
+		return (awaited ?? "") + updated;
+	});
 }
 function addMasterCSSNuxtModule(content, mode) {
-	if (content.includes("@master/css.nuxt")) return content;
+	if (content.includes("@master/css-nuxt")) return content;
 	const moduleEntry = formatNuxtModule(mode);
 	if (/modules\s*:\s*\[/.test(content)) return replaceFirst(content, /modules\s*:\s*\[/, `modules: [\n        ${moduleEntry},`);
 	if (/defineNuxtConfig\(\s*\{/.test(content)) return replaceFirst(content, /defineNuxtConfig\(\s*\{/, `defineNuxtConfig({\n    modules: [${moduleEntry}],`);
@@ -197,16 +220,16 @@ function createNuxtConfig(mode) {
 `;
 }
 function addMasterCSSAstroIntegration(content, mode) {
-	if (content.includes("@master/css.astro")) return content;
+	if (content.includes("@master/css-astro")) return content;
 	const pluginCall = formatMasterCSSCall(mode);
-	let next = addImport(content, "import masterCSS from '@master/css.astro'");
+	let next = addImport(content, "import masterCSS from '@master/css-astro'");
 	if (/integrations\s*:\s*\[/.test(next)) return replaceFirst(next, /integrations\s*:\s*\[/, `integrations: [\n        ${pluginCall},`);
 	if (/defineConfig\(\s*\{/.test(next)) return replaceFirst(next, /defineConfig\(\s*\{/, `defineConfig({\n    integrations: [${pluginCall}],`);
 	return next;
 }
 function createAstroConfig(mode) {
 	return `import { defineConfig } from 'astro/config'
-import masterCSS from '@master/css.astro'
+import masterCSS from '@master/css-astro'
 
 export default defineConfig({
   integrations: [
@@ -218,33 +241,46 @@ export default defineConfig({
 function addViteClientTypes(content) {
 	let next = content;
 	if (!next.includes("/// <reference types=\"vite/client\" />")) next = `/// <reference types="vite/client" />\n${next}`;
-	if (!next.includes("/// <reference types=\"@master/css-integration/client\" />")) {
+	if (!next.includes("/// <reference types=\"@master/css/client\" />")) {
 		const lines = next.split("\n");
 		const viteReferenceIndex = lines.findIndex((line) => line.includes("/// <reference types=\"vite/client\" />"));
-		lines.splice(viteReferenceIndex + 1, 0, "/// <reference types=\"@master/css-integration/client\" />");
+		lines.splice(viteReferenceIndex + 1, 0, "/// <reference types=\"@master/css/client\" />");
 		next = lines.join("\n");
 	}
 	return next;
 }
+/** Preserve the component's own styles while adding build-generated shadow CSS. */
+function addLitShadowStylesheet(content) {
+	if (content.includes("import masterCSSStyles from './index.css?inline'")) return content;
+	const ownStyles = /\bstatic\s+(?:get\s+)?styles\b/.test(content);
+	let next = content.replace(/(\bstatic\s+(?:get\s+)?)styles\b/, "$1masterCSSOriginalStyles");
+	next = addImport(next, "import { unsafeCSS } from 'lit'");
+	next = addImport(next, "import masterCSSStyles from './index.css?inline'");
+	return next.replace(/(export\s+class\s+\w+[^\{]*\{)/, `$1\n  static get styles() { return [unsafeCSS(masterCSSStyles)${ownStyles ? ", this.masterCSSOriginalStyles" : ""}] }\n`);
+}
+function addGeneratedStylesheetImport(content) {
+	const statement = "@import './master.generated.css';";
+	return content.includes(statement) ? content : `${statement}\n${content}`;
+}
 function addLitShadowRuntime(content) {
-	if (content.includes("@master/css-runtime") && content.includes("virtual:master-css-manifest") && content.includes("@cssRuntime({ manifest, emittedGlobals })") && content.includes("cssRuntime?: CSSRuntime")) return content;
-	let next = addImport(content, "import { cssRuntime } from '@master/css-runtime'");
-	next = addImport(next, "import type CSSRuntime from '@master/css-runtime'");
-	next = addImport(next, "import manifest from 'virtual:master-css-manifest'");
+	if (content.includes("@master/css-runtime") && content.includes("virtual:master-css-program") && content.includes("@withMasterCSSRuntime({ program, emittedGlobals })") && content.includes("masterCSSRuntime?: MasterCSSRuntime")) return content;
+	let next = addImport(content, "import { withMasterCSSRuntime } from '@master/css-runtime'");
+	next = addImport(next, "import type { MasterCSSRuntime } from '@master/css-runtime'");
+	next = addImport(next, "import program from 'virtual:master-css-program'");
 	next = addImport(next, "import emittedGlobals from 'virtual:master-css-emitted-globals'");
-	if (!next.includes("@cssRuntime({ manifest, emittedGlobals })")) if (/@customElement\([^\n]+\)\nexport\s+class\s/.test(next)) next = next.replace(/(@customElement\([^\n]+\)\n)(export\s+class\s)/, "$1@cssRuntime({ manifest, emittedGlobals })\n$2");
-	else next = next.replace(/export\s+class\s/, "@cssRuntime({ manifest, emittedGlobals })\nexport class ");
-	if (!next.includes("cssRuntime?: CSSRuntime")) next = next.replace(/(export\s+class\s+\w+[^{]*\{)/, "$1\n\n    cssRuntime?: CSSRuntime");
+	if (!next.includes("@withMasterCSSRuntime({ program, emittedGlobals })")) {
+		if (/@customElement\([^\n]+\)\nexport\s+class\s/.test(next)) next = next.replace(/(@customElement\([^\n]+\)\n)(export\s+class\s)/, "$1@withMasterCSSRuntime({ program, emittedGlobals })\n$2");
+		else next = next.replace(/export\s+class\s/, "@withMasterCSSRuntime({ program, emittedGlobals })\nexport class ");
+	}
+	if (!next.includes("masterCSSRuntime?: MasterCSSRuntime")) next = next.replace(/(export\s+class\s+\w+[^{]*\{)/, "$1\n\n    masterCSSRuntime?: MasterCSSRuntime");
 	return next;
 }
 function addAngularRuntimeSetup(content) {
 	if (content.includes("@master/css-runtime")) return content;
-	let next = addImport(content, "import defaultManifestJSON from '@master/css-preset/default-manifest.json'");
-	next = addImport(next, "import CSSRuntime from '@master/css-runtime'");
-	next = addImport(next, "import type { MasterCSSManifest } from '@master/css-runtime'");
-	const setup = `const defaultManifest = defaultManifestJSON as unknown as MasterCSSManifest
-
-CSSRuntime.create({ manifest: defaultManifest }).observe()
+	const next = addImport(content, "import { MasterCSSRuntime } from '@master/css-runtime'");
+	const setup = `void MasterCSSRuntime.start({ program: () => import('@master/css-runtime/default-program').then((module) => module.defaultProgram) })
+  .then((cssRuntime) => cssRuntime.observe())
+  .catch((error) => console.error(error))
 
 `;
 	if (/bootstrapApplication\s*\(/.test(next)) return next.replace(/bootstrapApplication\s*\(/, `${setup}bootstrapApplication(`);
@@ -257,10 +293,10 @@ function addMasterCSSEslintConfig(content) {
 	if (content.includes("@master/eslint-config-css")) return content;
 	if (!content.trim()) return CANONICAL_ESLINT_CONFIG;
 	let next = addImport(content, "import { defineConfig } from 'eslint/config'");
-	next = addImport(next, "import css from '@master/eslint-config-css'");
-	if (/export\s+default\s+defineConfig\(\s*\[/.test(next)) return replaceFirst(next, /export\s+default\s+defineConfig\(\s*\[/, "export default defineConfig([\n  ...css,");
+	next = addImport(next, "import masterCSS from '@master/eslint-config-css'");
+	if (/export\s+default\s+defineConfig\(\s*\[/.test(next)) return replaceFirst(next, /export\s+default\s+defineConfig\(\s*\[/, "export default defineConfig([\n  ...masterCSS,");
 	if (/export\s+default\s+\[/.test(next)) {
-		next = replaceFirst(next, /export\s+default\s+\[/, "export default defineConfig([\n  ...css,");
+		next = replaceFirst(next, /export\s+default\s+\[/, "export default defineConfig([\n  ...masterCSS,");
 		const closeIndex = next.lastIndexOf("]");
 		return closeIndex === -1 ? next : `${next.slice(0, closeIndex + 1)})${next.slice(closeIndex + 1)}`;
 	}
@@ -268,9 +304,8 @@ function addMasterCSSEslintConfig(content) {
 
 // Master CSS recommended config:
 // export default defineConfig([
-//     ...css
+//     ...masterCSS
 // ])
 `;
 }
-//#endregion
-export { addAngularRuntimeSetup, addLitShadowRuntime, addMasterCSSAstroIntegration, addMasterCSSEslintConfig, addMasterCSSImportToStylesheet, addMasterCSSNextConfig, addMasterCSSNuxtModule, addMasterCSSRsbuildPlugin, addMasterCSSRspackPlugin, addMasterCSSStaticVitePlugin, addMasterCSSTanStackStartVitePlugin, addMasterCSSVitePlugin, addMasterCSSWebpackPlugin, addReactRouterRootCSSImport, addTanStackStartRootCSSImport, addViteClientTypes, createAstroConfig, createMasterCSSStylesheet, createNextConfig, createNuxtConfig, createRsbuildConfig, createRspackConfig, createStaticViteConfig, createViteConfig, createWebpackConfig };
+export { addAngularRuntimeSetup, addGeneratedStylesheetImport, addLitShadowRuntime, addLitShadowStylesheet, addMasterCSSAstroIntegration, addMasterCSSEslintConfig, addMasterCSSImportToStylesheet, addMasterCSSNextConfig, addMasterCSSNuxtModule, addMasterCSSRsbuildPlugin, addMasterCSSRspackPlugin, addMasterCSSStaticVitePlugin, addMasterCSSTanStackStartVitePlugin, addMasterCSSVitePlugin, addMasterCSSWebpackPlugin, addReactRouterRootCSSImport, addTanStackStartRootCSSImport, addViteClientTypes, createAstroConfig, createMasterCSSStylesheet, createNextConfig, createNuxtConfig, createRsbuildConfig, createRspackConfig, createStaticViteConfig, createViteConfig, createWebpackConfig };

package/package.json

@@ -1,51 +1,56 @@
 {
-  "name": "@master/create-css",
-  "type": "module",
-  "license": "MIT",
-  "description": "Add Master CSS to an existing project.",
-  "author": "Aoyue Design LLC.",
-  "funding": "https://rc.css.master.co/sponsor",
-  "homepage": "https://css.master.co",
-  "bugs": {
-    "url": "https://github.com/master-co/css/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/master-co/css.git",
-    "directory": "packages/create"
-  },
-  "keywords": [
-    "cli",
-    "create",
-    "init",
-    "css",
-    "mastercss"
-  ],
-  "bin": {
-    "create-css": "./dist/bin/index.js"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "access": "public",
-    "provenance": true
-  },
-  "dependencies": {
-    "commander": "^14.0.3"
-  },
-  "version": "2.0.0-rc.88",
-  "scripts": {
-    "build": "tsdown --config ../../shared/tsdown-package.config.ts",
-    "dev": "tsdown --config ../../shared/tsdown-package.config.ts --watch",
-    "lint": "eslint",
-    "test": "vitest"
-  }
-}
+    "name": "@master/create-css",
+    "type": "module",
+    "engines": {
+        "node": "^24"
+    },
+    "scripts": {
+        "build": "bun --bun tsdown --config ../../shared/tsdown-package.config.ts",
+        "dev": "bun --bun tsdown --config ../../shared/tsdown-package.config.ts --watch",
+        "lint": "bun --bun eslint",
+        "test": "node ../../node_modules/vitest/vitest.mjs run"
+    },
+    "license": "MIT",
+    "description": "Add Master CSS to an existing project.",
+    "author": "Aoyue Design LLC.",
+    "homepage": "https://css.master.co",
+    "bugs": {
+        "url": "https://github.com/master-co/css/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/master-co/css.git",
+        "directory": "packages/create"
+    },
+    "keywords": [
+        "cli",
+        "create",
+        "init",
+        "css",
+        "mastercss"
+    ],
+    "bin": {
+        "create-css": "./dist/bin/index.js"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "default": "./dist/index.js"
+        }
+    },
+    "sideEffects": false,
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public",
+        "provenance": true
+    },
+    "dependencies": {
+        "@master/css-schema": "2.0.1",
+        "commander": "^15.0.0"
+    },
+    "version": "2.0.1",
+    "gitHead": "76012032a62d59365419b6acb74781d62f003874"
+}

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License
-
-Copyright (c) Aoyue Design LLC.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.