create-slotkit-app 0.1.7 → 0.3.0

package/README.md

@@ -1,319 +1,319 @@
-# create-slotkit-app
-
-[English](#english) | [中文](#中文)
-
----
-
-## English
-
-### Scaffold Tool for SlotKit Applications
-
-`create-slotkit-app` is a CLI tool that helps you quickly create a new SlotKit application with all the necessary configuration and boilerplate code.
-
-### Features
-
-- **Quick Setup**: Create a new SlotKit project in seconds
-- **Vite Integration**: Uses Vite for fast development and building
-- **TypeScript Support**: Full TypeScript configuration included
-- **Plugin System Ready**: Pre-configured plugin directory structure with a default helloworld plugin
-- **Auto Import Generation**: `slotkit generate-imports` runs automatically before `pnpm dev` and `pnpm build`
-- **Zero Configuration**: Works out of the box with sensible defaults
-
-### Installation
-
-```bash
-npm install -g create-slotkit-app
-# or
-yarn global add create-slotkit-app
-# or
-pnpm add -g create-slotkit-app
-```
-
-Or use it directly with npx/pnpm create:
-
-```bash
-npx create-slotkit-app my-app
-# or
-pnpm create slotkit-app my-app
-```
-
-### Usage
-
-```bash
-create-slotkit-app <project-name> [options]
-```
-
-**Options:**
-
-- `--template <template>` - Vite template to use (default: `react-ts`)
-  - Available templates: `react`, `react-ts`, `vue`, `vue-ts`, `vanilla`, `vanilla-ts`
-
-### Quick Start
-
-```bash
-# Create a new SlotKit project
-create-slotkit-app my-slotkit-app
-
-# Navigate to the project
-cd my-slotkit-app
-
-# Install dependencies
-pnpm install
-
-# Start development server (generate-imports runs automatically)
-pnpm dev
-```
-
-### What Gets Created
-
-When you run `create-slotkit-app`, it creates:
-
-```
-my-slotkit-app/
-├── src/
-│   ├── App.tsx              # Main app component with plugin loading
-│   ├── app/
-│   │   ├── AppLayout.tsx    # Layout with Slot components
-│   │   └── AppLayout.css    # Layout styles
-│   └── main.tsx             # Entry point
-├── plugins/
-│   └── helloworld/          # Default sample plugin
-├── slotkit.config.ts         # SlotKit configuration
-├── vite.config.ts           # Vite configuration
-├── package.json             # Project dependencies
-└── tsconfig.json            # TypeScript configuration
-```
-
-### Project Structure
-
-The generated project includes:
-
-1. **App.tsx**: Automatically loads and registers plugins on mount
-2. **AppLayout.tsx**: Pre-configured layout with Slot components for:
-   - `header` slot
-   - `sidebar` slot
-   - `content` slot
-   - `footer` slot
-3. **slotkit.config.ts**: Basic configuration pointing to `./plugins`
-4. **helloworld plugin**: Located at `plugins/helloworld/` as a ready-to-run example
-5. **vite.config.ts**: Vite configuration with plugin directory access
-
-### Creating Plugins
-
-After creating your project, you can create plugins:
-
-```bash
-# Create a plugin
-slotkit create-plugin my-plugin --slots content,sidebar
-
-# Generate import mappings (required after creating plugins)
-slotkit generate-imports
-
-# List all plugins
-slotkit list
-
-# Enable/disable plugins
-slotkit enable my-plugin
-slotkit disable my-plugin
-```
-
-### Next Steps
-
-1. Install dependencies: `pnpm install`
-2. Start the dev server: `pnpm dev` (runs `slotkit generate-imports` automatically)
-3. Create additional plugins: `slotkit create-plugin my-plugin --slots content`
-4. Whenever you create/modify plugins outside the dev flow, run `pnpm slotkit generate-imports`
-
-### Configuration
-
-The generated `slotkit.config.ts` file:
-
-```typescript
-import { defineConfig } from '@slotkitjs/core'
-
-export default defineConfig({
-  pluginsDir: './plugins',
-  // Add more configuration here
-})
-```
-
-### Development
-
-```bash
-# Clone the repository
-git clone <repository-url>
-cd create-slotkit-app
-
-# Install dependencies
-pnpm install
-
-# Build
-pnpm build
-
-# Development mode (watch)
-pnpm dev
-```
-
-### License
-
-MIT
-
----
-
-## 中文
-
-### SlotKit 应用脚手架工具
-
-`create-slotkit-app` 是一个 CLI 工具，帮助你快速创建一个新的 SlotKit 应用，包含所有必要的配置和样板代码。
-
-### 特性
-
-- **快速设置**：几秒钟内创建新的 SlotKit 项目
-- **Vite 集成**：使用 Vite 进行快速开发和构建
-- **TypeScript 支持**：包含完整的 TypeScript 配置
-- **插件系统就绪**：预配置的插件目录结构
-- **零配置**：开箱即用，使用合理的默认值
-
-### 安装
-
-```bash
-npm install -g create-slotkit-app
-# 或
-yarn global add create-slotkit-app
-# 或
-pnpm add -g create-slotkit-app
-```
-
-或者直接使用 npx/pnpm create：
-
-```bash
-npx create-slotkit-app my-app
-# 或
-pnpm create slotkit-app my-app
-```
-
-### 使用
-
-```bash
-create-slotkit-app <project-name> [options]
-```
-
-**选项:**
-
-- `--template <template>` - 使用的 Vite 模板（默认：`react-ts`）
-  - 可用模板：`react`, `react-ts`, `vue`, `vue-ts`, `vanilla`, `vanilla-ts`
-
-### 快速开始
-
-```bash
-# 创建新的 SlotKit 项目
-create-slotkit-app my-slotkit-app
-
-# 进入项目目录
-cd my-slotkit-app
-
-# 安装依赖
-pnpm install
-
-# 创建第一个插件
-slotkit create-plugin my-first-plugin --slots content
-
-# 生成插件导入映射
-slotkit generate-imports
-
-# 启动开发服务器
-slotkit dev
-```
-
-### 创建的内容
-
-运行 `create-slotkit-app` 后，会创建：
-
-```
-my-slotkit-app/
-├── src/
-│   ├── App.tsx              # 主应用组件，自动加载插件
-│   ├── app/
-│   │   ├── AppLayout.tsx    # 包含 Slot 组件的布局
-│   │   └── AppLayout.css    # 布局样式
-│   └── main.tsx             # 入口文件
-├── plugins/                  # 插件目录（初始为空）
-├── slotkit.config.ts         # SlotKit 配置
-├── vite.config.ts           # Vite 配置
-├── package.json             # 项目依赖
-└── tsconfig.json            # TypeScript 配置
-```
-
-### 项目结构
-
-生成的项目包括：
-
-1. **App.tsx**: 在挂载时自动加载并注册插件
-2. **AppLayout.tsx**: 预配置的布局，包含以下插槽的 Slot 组件：
-   - `header` 插槽
-   - `sidebar` 插槽
-   - `content` 插槽
-   - `footer` 插槽
-3. **slotkit.config.ts**: 指向 `./plugins` 目录的基本配置
-4. **vite.config.ts**: Vite 配置，包含插件文件系统访问权限
-
-### 创建插件
-
-创建项目后，你可以创建插件：
-
-```bash
-# 创建插件
-slotkit create-plugin my-plugin --slots content,sidebar
-
-# 生成导入映射（创建插件后必需）
-slotkit generate-imports
-
-# 列出所有插件
-slotkit list
-
-# 启用/禁用插件
-slotkit enable my-plugin
-slotkit disable my-plugin
-```
-
-### 下一步
-
-1. **创建插件**：使用 `slotkit create-plugin` 搭建新插件
-2. **生成导入**：创建插件后运行 `slotkit generate-imports`
-3. **开始开发**：运行 `slotkit dev` 启动开发服务器
-4. **构建**：准备生产构建时运行 `slotkit build`
-
-### 配置
-
-生成的 `slotkit.config.ts` 文件：
-
-```typescript
-import { defineConfig } from '@slotkitjs/core'
-
-export default defineConfig({
-  pluginsDir: './plugins',
-  // 在这里添加更多配置
-})
-```
-
-### 开发
-
-```bash
-# 克隆仓库
-git clone <repository-url>
-cd create-slotkit-app
-
-# 安装依赖
-pnpm install
-
-# 构建
-pnpm build
-
-# 开发模式（监听）
-pnpm dev
-```
-
-### 许可证
-
-MIT
-
+# create-slotkit-app
+
+[English](#english) | [中文](#中文)
+
+---
+
+## English
+
+### Scaffold Tool for SlotKit Applications
+
+`create-slotkit-app` is a CLI tool that helps you quickly create a new SlotKit application with all the necessary configuration and boilerplate code.
+
+### Features
+
+- **Quick Setup**: Create a new SlotKit project in seconds
+- **Vite Integration**: Uses Vite for fast development and building
+- **TypeScript Support**: Full TypeScript configuration included
+- **Plugin System Ready**: Pre-configured plugin directory structure with a default helloworld plugin
+- **Auto Import Generation**: `slotkit generate-imports` runs automatically before `pnpm dev` and `pnpm build`
+- **Zero Configuration**: Works out of the box with sensible defaults
+
+### Installation
+
+```bash
+npm install -g create-slotkit-app
+# or
+yarn global add create-slotkit-app
+# or
+pnpm add -g create-slotkit-app
+```
+
+Or use it directly with npx/pnpm create:
+
+```bash
+npx create-slotkit-app my-app
+# or
+pnpm create slotkit-app my-app
+```
+
+### Usage
+
+```bash
+create-slotkit-app <project-name> [options]
+```
+
+**Options:**
+
+- `--template <template>` - Vite template to use (default: `react-ts`)
+  - Available templates: `react`, `react-ts`, `vue`, `vue-ts`, `vanilla`, `vanilla-ts`
+
+### Quick Start
+
+```bash
+# Create a new SlotKit project
+create-slotkit-app my-slotkit-app
+
+# Navigate to the project
+cd my-slotkit-app
+
+# Install dependencies
+pnpm install
+
+# Start development server (generate-imports runs automatically)
+pnpm dev
+```
+
+### What Gets Created
+
+When you run `create-slotkit-app`, it creates:
+
+```
+my-slotkit-app/
+├── src/
+│   ├── App.tsx              # Main app component with plugin loading
+│   ├── app/
+│   │   ├── AppLayout.tsx    # Layout with Slot components
+│   │   └── AppLayout.css    # Layout styles
+│   └── main.tsx             # Entry point
+├── plugins/
+│   └── helloworld/          # Default sample plugin
+├── slotkit.config.ts         # SlotKit configuration
+├── vite.config.ts           # Vite configuration
+├── package.json             # Project dependencies
+└── tsconfig.json            # TypeScript configuration
+```
+
+### Project Structure
+
+The generated project includes:
+
+1. **App.tsx**: Automatically loads and registers plugins on mount
+2. **AppLayout.tsx**: Pre-configured layout with Slot components for:
+   - `header` slot
+   - `sidebar` slot
+   - `content` slot
+   - `footer` slot
+3. **slotkit.config.ts**: Basic configuration pointing to `./plugins`
+4. **helloworld plugin**: Located at `plugins/helloworld/` as a ready-to-run example
+5. **vite.config.ts**: Vite configuration with plugin directory access
+
+### Creating Plugins
+
+After creating your project, you can create plugins:
+
+```bash
+# Create a plugin
+slotkit create-plugin my-plugin --slots content,sidebar
+
+# Generate import mappings (required after creating plugins)
+slotkit generate-imports
+
+# List all plugins
+slotkit list
+
+# Enable/disable plugins
+slotkit enable my-plugin
+slotkit disable my-plugin
+```
+
+### Next Steps
+
+1. Install dependencies: `pnpm install`
+2. Start the dev server: `pnpm dev` (runs `slotkit generate-imports` automatically)
+3. Create additional plugins: `slotkit create-plugin my-plugin --slots content`
+4. Whenever you create/modify plugins outside the dev flow, run `pnpm slotkit generate-imports`
+
+### Configuration
+
+The generated `slotkit.config.ts` file:
+
+```typescript
+import { defineConfig } from '@slotkitjs/core'
+
+export default defineConfig({
+  pluginsDir: './plugins',
+  // Add more configuration here
+})
+```
+
+### Development
+
+```bash
+# Clone the repository
+git clone <repository-url>
+cd create-slotkit-app
+
+# Install dependencies
+pnpm install
+
+# Build
+pnpm build
+
+# Development mode (watch)
+pnpm dev
+```
+
+### License
+
+MIT
+
+---
+
+## 中文
+
+### SlotKit 应用脚手架工具
+
+`create-slotkit-app` 是一个 CLI 工具，帮助你快速创建一个新的 SlotKit 应用，包含所有必要的配置和样板代码。
+
+### 特性
+
+- **快速设置**：几秒钟内创建新的 SlotKit 项目
+- **Vite 集成**：使用 Vite 进行快速开发和构建
+- **TypeScript 支持**：包含完整的 TypeScript 配置
+- **插件系统就绪**：预配置的插件目录结构
+- **零配置**：开箱即用，使用合理的默认值
+
+### 安装
+
+```bash
+npm install -g create-slotkit-app
+# 或
+yarn global add create-slotkit-app
+# 或
+pnpm add -g create-slotkit-app
+```
+
+或者直接使用 npx/pnpm create：
+
+```bash
+npx create-slotkit-app my-app
+# 或
+pnpm create slotkit-app my-app
+```
+
+### 使用
+
+```bash
+create-slotkit-app <project-name> [options]
+```
+
+**选项:**
+
+- `--template <template>` - 使用的 Vite 模板（默认：`react-ts`）
+  - 可用模板：`react`, `react-ts`, `vue`, `vue-ts`, `vanilla`, `vanilla-ts`
+
+### 快速开始
+
+```bash
+# 创建新的 SlotKit 项目
+create-slotkit-app my-slotkit-app
+
+# 进入项目目录
+cd my-slotkit-app
+
+# 安装依赖
+pnpm install
+
+# 创建第一个插件
+slotkit create-plugin my-first-plugin --slots content
+
+# 生成插件导入映射
+slotkit generate-imports
+
+# 启动开发服务器
+slotkit dev
+```
+
+### 创建的内容
+
+运行 `create-slotkit-app` 后，会创建：
+
+```
+my-slotkit-app/
+├── src/
+│   ├── App.tsx              # 主应用组件，自动加载插件
+│   ├── app/
+│   │   ├── AppLayout.tsx    # 包含 Slot 组件的布局
+│   │   └── AppLayout.css    # 布局样式
+│   └── main.tsx             # 入口文件
+├── plugins/                  # 插件目录（初始为空）
+├── slotkit.config.ts         # SlotKit 配置
+├── vite.config.ts           # Vite 配置
+├── package.json             # 项目依赖
+└── tsconfig.json            # TypeScript 配置
+```
+
+### 项目结构
+
+生成的项目包括：
+
+1. **App.tsx**: 在挂载时自动加载并注册插件
+2. **AppLayout.tsx**: 预配置的布局，包含以下插槽的 Slot 组件：
+   - `header` 插槽
+   - `sidebar` 插槽
+   - `content` 插槽
+   - `footer` 插槽
+3. **slotkit.config.ts**: 指向 `./plugins` 目录的基本配置
+4. **vite.config.ts**: Vite 配置，包含插件文件系统访问权限
+
+### 创建插件
+
+创建项目后，你可以创建插件：
+
+```bash
+# 创建插件
+slotkit create-plugin my-plugin --slots content,sidebar
+
+# 生成导入映射（创建插件后必需）
+slotkit generate-imports
+
+# 列出所有插件
+slotkit list
+
+# 启用/禁用插件
+slotkit enable my-plugin
+slotkit disable my-plugin
+```
+
+### 下一步
+
+1. **创建插件**：使用 `slotkit create-plugin` 搭建新插件
+2. **生成导入**：创建插件后运行 `slotkit generate-imports`
+3. **开始开发**：运行 `slotkit dev` 启动开发服务器
+4. **构建**：准备生产构建时运行 `slotkit build`
+
+### 配置
+
+生成的 `slotkit.config.ts` 文件：
+
+```typescript
+import { defineConfig } from '@slotkitjs/core'
+
+export default defineConfig({
+  pluginsDir: './plugins',
+  // 在这里添加更多配置
+})
+```
+
+### 开发
+
+```bash
+# 克隆仓库
+git clone <repository-url>
+cd create-slotkit-app
+
+# 安装依赖
+pnpm install
+
+# 构建
+pnpm build
+
+# 开发模式（监听）
+pnpm dev
+```
+
+### 许可证
+
+MIT
+

package/bin/create-slotkit-app.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
-
-import '../dist/index.js'
-
+#!/usr/bin/env node
+
+import '../dist/index.js'
+

package/package.json

@@ -1,31 +1,31 @@
-{
-  "name": "create-slotkit-app",
-  "version": "0.1.7",
-  "type": "module",
-  "description": "Create a new SlotKit application",
-  "bin": {
-    "create-slotkit-app": "./bin/create-slotkit-app.js"
-  },
-  "files": [
-    "bin",
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch"
-  },
-  "keywords": [
-    "slotkit",
-    "create-app",
-    "scaffold"
-  ],
-  "author": "liusnew <liushuinew@gmail.com>",
-  "license": "MIT",
-  "dependencies": {
-    "commander": "^12.1.0"
-  },
-  "devDependencies": {
-    "@types/node": "^24.6.0",
-    "typescript": "~5.9.3"
-  }
-}
+{
+  "name": "create-slotkit-app",
+  "version": "0.3.0",
+  "type": "module",
+  "description": "Create a new SlotKit application",
+  "bin": {
+    "create-slotkit-app": "./bin/create-slotkit-app.js"
+  },
+  "files": [
+    "bin",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "keywords": [
+    "slotkit",
+    "create-app",
+    "scaffold"
+  ],
+  "author": "liusnew <liushuinew@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "commander": "^12.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.6.0",
+    "typescript": "~5.9.3"
+  }
+}

package/dist/index.js

@@ -1,494 +0,0 @@
-#!/usr/bin/env node
-/**
- * create-slotkit-app - Initialize a new SlotKit project using Vite
- */
-import { Command } from 'commander';
-import { spawn, execSync } from 'child_process';
-import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
-import { resolve, join } from 'path';
-const program = new Command();
-/**
- * Execute command and wait for completion
- */
-function execCommand(command, args, cwd) {
-    return new Promise((resolve, reject) => {
-        const child = spawn(command, args, {
-            cwd,
-            stdio: 'inherit',
-            shell: true
-        });
-        child.on('error', reject);
-        child.on('exit', (code) => {
-            if (code === 0) {
-                resolve();
-            }
-            else {
-                reject(new Error(`Command failed with exit code ${code}`));
-            }
-        });
-    });
-}
-/**
- * Get latest version of a package from npm
- */
-function getLatestVersion(packageName) {
-    try {
-        // Try to get latest version from npm
-        const result = execSync(`npm view ${packageName} version`, { encoding: 'utf-8', stdio: 'pipe' }).trim();
-        return `^${result}`;
-    }
-    catch (error) {
-        // If failed, use 'latest' tag to let npm resolve it
-        console.warn(`[WARN] Could not fetch latest version of ${packageName}, using 'latest' tag`);
-        return 'latest';
-    }
-}
-/**
- * Create SlotKit-specific files
- */
-function createSlotKitFiles(projectDir) {
-    // Replace Vite's default App.tsx with SlotKit App
-    // This way we don't need to modify main.tsx
-    const appFilePath = join(projectDir, 'src', 'App.tsx');
-    // Create src/app directory for AppLayout
-    const appDir = join(projectDir, 'src', 'app');
-    mkdirSync(appDir, { recursive: true });
-    // Create App.tsx (replaces Vite's default)
-    const appTsx = `import React, { useEffect, useState } from 'react'
-import { AppLayout } from './app/AppLayout'
-import { pluginRegistry, pluginLoader, setPluginImportFunctions } from '@slotkitjs/core'
-
-// Import generated plugin import mappings
-// This file is generated by 'slotkit generate-imports'
-import * as pluginImports from './core/plugin/loader/plugin-imports.generated'
-
-// Initialize plugin import mappings
-if (pluginImports.getPluginImport && pluginImports.getAvailablePluginIds) {
-  setPluginImportFunctions({
-    getPluginImport: (pluginId: string) => {
-      const importFn = pluginImports.getPluginImport(pluginId)
-      if (!importFn) return undefined
-      return () => Promise.resolve(importFn())
-    },
-    getAvailablePluginIds: pluginImports.getAvailablePluginIds,
-    getAllPluginManifests: pluginImports.getAllPluginManifests,
-    getPluginManifest: pluginImports.getPluginManifest
-  })
-} else {
-  console.warn('[WARN] Plugin import functions not found in generated file')
-}
-
-// Load all plugins
-const loadPlugins = async () => {
-  try {
-    const plugins = await pluginLoader.loadAllPlugins()
-
-    plugins.forEach(plugin => {
-      pluginRegistry.register(plugin)
-    })
-
-    return plugins
-  } catch (error) {
-    console.error('[ERROR] Failed to load plugins:', error)
-    return []
-  }
-}
-
-const App: React.FC = () => {
-  const [pluginsLoaded, setPluginsLoaded] = useState(false)
-  const [loadedPlugins, setLoadedPlugins] = useState<any[]>([])
-
-  useEffect(() => {
-    loadPlugins()
-      .then((plugins) => {
-        setPluginsLoaded(true)
-        setLoadedPlugins(plugins)
-      })
-      .catch((error) => {
-        console.error('[ERROR] Failed to load plugins:', error)
-      })
-  }, [])
-
-  return (
-    <div className="app">
-      <AppLayout />
-
-      {/* Plugin loading status indicator */}
-      <div style={{
-        position: 'fixed',
-        top: '10px',
-        right: '10px',
-        background: pluginsLoaded ? '#e8f5e8' : '#fff3cd',
-        padding: '10px',
-        borderRadius: '4px',
-        fontSize: '12px',
-        border: pluginsLoaded ? '1px solid #4caf50' : '1px solid #ffc107',
-        zIndex: 1000
-      }}>
-        {pluginsLoaded ? '[OK] Plugins loaded' : '[INFO] Loading plugins...'}
-      </div>
-
-      {/* Loaded plugins list */}
-      {loadedPlugins.length > 0 && (
-        <div style={{
-          position: 'fixed',
-          top: '50px',
-          right: '10px',
-          background: '#f3e5f5',
-          padding: '10px',
-          borderRadius: '4px',
-          fontSize: '11px',
-          border: '1px solid #9c27b0',
-          zIndex: 1000,
-          maxWidth: '200px'
-        }}>
-          <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>Loaded Plugins:</div>
-          {loadedPlugins.map(plugin => (
-            <div key={plugin.id} style={{ marginBottom: '2px' }}>
-              • {plugin.name} v{plugin.version}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default App;
-`;
-    writeFileSync(appFilePath, appTsx, 'utf-8');
-    // Create AppLayout.tsx
-    const appLayoutTsx = `import React from 'react'
-import { Slot } from '@slotkitjs/react'
-import './AppLayout.css'
-
-export const AppLayout: React.FC = () => {
-  return (
-    <div className="app-layout">
-      <header className="app-header">
-        <h1>SlotKit App</h1>
-        <Slot name="header" />
-      </header>
-      
-      <main className="app-main">
-        <aside className="app-sidebar">
-          <h3>Sidebar</h3>
-          <Slot name="sidebar">
-            <p style={{ color: '#666', fontSize: '14px' }}>Waiting for plugins...</p>
-          </Slot>
-        </aside>
-        
-        <section className="app-content">
-          <h3>Main Content</h3>
-          <Slot name="content">
-            <p style={{ color: '#666', fontSize: '14px' }}>Waiting for plugins...</p>
-          </Slot>
-        </section>
-      </main>
-      
-      <footer className="app-footer">
-        <Slot name="footer" />
-      </footer>
-    </div>
-  )
-}
-`;
-    writeFileSync(join(appDir, 'AppLayout.tsx'), appLayoutTsx, 'utf-8');
-    // Create AppLayout.css
-    const appLayoutCss = `.app-layout {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.app-header {
-  background: #2196f3;
-  color: white;
-  padding: 1rem 2rem;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.app-header h1 {
-  margin: 0;
-  font-size: 1.5rem;
-}
-
-.app-main {
-  display: flex;
-  flex: 1;
-  gap: 1rem;
-  padding: 1rem;
-}
-
-.app-sidebar {
-  width: 250px;
-  background: #f5f5f5;
-  padding: 1rem;
-  border-radius: 8px;
-  border: 1px solid #ddd;
-}
-
-.app-sidebar h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.1rem;
-  color: #333;
-}
-
-.app-content {
-  flex: 1;
-  background: white;
-  padding: 1rem;
-  border-radius: 8px;
-  border: 1px solid #ddd;
-}
-
-.app-content h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.1rem;
-  color: #333;
-}
-
-.app-footer {
-  background: #f5f5f5;
-  padding: 1rem 2rem;
-  border-top: 1px solid #ddd;
-  text-align: center;
-  color: #666;
-}
-`;
-    writeFileSync(join(appDir, 'AppLayout.css'), appLayoutCss, 'utf-8');
-    // No need to modify main.tsx - Vite's default already imports './App'
-    // We replaced src/App.tsx above, so it will automatically work
-    // Create slotkit.config.ts
-    const slotkitConfig = `import { defineConfig } from '@slotkitjs/core'
-
-export default defineConfig({
-  pluginsDir: './plugins',
-  // Add more configuration here
-})
-`;
-    writeFileSync(join(projectDir, 'slotkit.config.ts'), slotkitConfig, 'utf-8');
-    // Create plugins directory and default hello-world plugin
-    const pluginsDir = join(projectDir, 'plugins');
-    mkdirSync(pluginsDir, { recursive: true });
-    const helloWorldDir = join(pluginsDir, 'helloworld');
-    const helloWorldSrcDir = join(helloWorldDir, 'src');
-    mkdirSync(helloWorldSrcDir, { recursive: true });
-    const helloWorldManifest = `{
-  "id": "helloworld",
-  "name": "Hello-world Plugin",
-  "version": "1.0.0",
-  "description": "A built-in hello-world plugin",
-  "author": "SlotKit Team",
-  "entry": "./src/index.tsx",
-  "slots": [
-    "content"
-  ],
-  "enabled": true
-}`;
-    writeFileSync(join(helloWorldDir, 'manifest.json'), helloWorldManifest + '\n', 'utf-8');
-    const helloWorldPackageJson = `{
-  "name": "plugin-helloworld",
-  "version": "1.0.0",
-  "main": "src/index.tsx",
-  "private": true
-}`;
-    writeFileSync(join(helloWorldDir, 'package.json'), helloWorldPackageJson + '\n', 'utf-8');
-    const helloWorldTsconfig = `{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src/**/*"
-  ]
-}`;
-    writeFileSync(join(helloWorldDir, 'tsconfig.json'), helloWorldTsconfig + '\n', 'utf-8');
-    const helloWorldIndexTsx = `import React from 'react'
-
-const HelloWorldComponent: React.FC = () => {
-  return (
-    <div
-      style={{
-        padding: '1rem',
-        background: '#f5f5f5',
-        border: '1px solid #ddd',
-        borderRadius: '8px',
-        margin: '0.5rem 0'
-      }}
-    >
-      <h3>Hello-world Plugin</h3>
-      <p>This is the default hello-world plugin generated by create-slotkit-app.</p>
-    </div>
-  )
-}
-
-const helloworldPlugin = {
-  id: 'helloworld',
-  name: 'Hello-world Plugin',
-  version: '1.0.0',
-  component: HelloWorldComponent,
-  slots: ['content']
-}
-
-export { helloworldPlugin }
-export default helloworldPlugin
-`;
-    writeFileSync(join(helloWorldSrcDir, 'index.tsx'), helloWorldIndexTsx, 'utf-8');
-    // Create or update vite.config.ts with SlotKit-specific configuration
-    const viteConfigPath = join(projectDir, 'vite.config.ts');
-    const viteConfigJsPath = join(projectDir, 'vite.config.js');
-    // Check if vite.config.ts or vite.config.js exists
-    const existingConfigPath = existsSync(viteConfigPath) ? viteConfigPath :
-        (existsSync(viteConfigJsPath) ? viteConfigJsPath : null);
-    if (existingConfigPath) {
-        // Update existing config
-        let viteConfig = readFileSync(existingConfigPath, 'utf-8');
-        // Add server configuration if not present
-        if (!viteConfig.includes('server:')) {
-            // Find the defineConfig call and add server config inside it
-            if (viteConfig.includes('export default defineConfig')) {
-                viteConfig = viteConfig.replace(/export default defineConfig\(\{/, `export default defineConfig({
-  server: {
-    fs: {
-      // Allow access to plugin directory
-      allow: ['..', '../..', '../../..']
-    }
-  },`);
-                writeFileSync(existingConfigPath, viteConfig, 'utf-8');
-            }
-        }
-    }
-    else {
-        // Create new vite.config.ts
-        const viteConfigContent = `import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    fs: {
-      // Allow access to plugin directory
-      allow: ['..', '../..', '../../..']
-    }
-  }
-})
-`;
-        writeFileSync(viteConfigPath, viteConfigContent, 'utf-8');
-    }
-}
-program
-    .name('create-slotkit-app')
-    .description('Create a new SlotKit application')
-    .argument('<project-name>', 'Project name')
-    .option('--template <template>', 'Vite template to use', 'react-ts')
-    .action(async (projectName, options) => {
-    const projectDir = resolve(process.cwd(), projectName);
-    if (existsSync(projectDir)) {
-        console.error(`[ERROR] Directory "${projectName}" already exists`);
-        process.exit(1);
-    }
-    // Extract just the project name (last part of path)
-    const actualProjectName = projectName.split(/[/\\]/).pop() || projectName;
-    const packageName = actualProjectName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
-    console.log(`[INFO] Creating SlotKit app: ${actualProjectName}`);
-    console.log(`[INFO] Using Vite template: ${options.template || 'react'}`);
-    try {
-        // Step 1: Use Vite to create the base project
-        // Vite creates the project in a subdirectory, so we need to extract just the name
-        console.log('[INFO] Step 1: Creating Vite project...');
-        // Create parent directory if needed (e.g., examples/test-project -> create examples first)
-        const parentDir = resolve(projectDir, '..');
-        if (!existsSync(parentDir)) {
-            mkdirSync(parentDir, { recursive: true });
-        }
-        // Try pnpm first, fallback to npm if pnpm fails
-        // Use non-interactive flags to skip prompts
-        const createCommand = 'pnpm';
-        const createArgs = [
-            'create', 'vite', actualProjectName,
-            '--template', options.template || 'react-ts',
-            '--yes' // Skip prompts
-        ];
-        try {
-            // Run in the parent directory so Vite creates the project in the right place
-            await execCommand(createCommand, createArgs, parentDir);
-        }
-        catch (error) {
-            // If pnpm fails, try npm
-            console.log('[INFO] pnpm create vite failed, trying npm...');
-            const npmArgs = [
-                'create', 'vite@latest', actualProjectName,
-                '--', '--template', options.template || 'react-ts'
-            ];
-            await execCommand('npm', npmArgs, parentDir);
-        }
-        // Step 2: Update package.json with SlotKit dependencies
-        console.log('[INFO] Step 2: Adding SlotKit dependencies...');
-        const packageJsonPath = join(projectDir, 'package.json');
-        if (existsSync(packageJsonPath)) {
-            const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
-            // Update package name
-            packageJson.name = packageName;
-            // Ensure dependencies object exists
-            if (!packageJson.dependencies) {
-                packageJson.dependencies = {};
-            }
-            // Add SlotKit dependencies (merge with existing)
-            // Use latest versions
-            const slotkitCoreVersion = getLatestVersion('@slotkitjs/core');
-            const slotkitReactVersion = getLatestVersion('@slotkitjs/react');
-            packageJson.dependencies = {
-                ...packageJson.dependencies,
-                '@slotkitjs/core': slotkitCoreVersion,
-                '@slotkitjs/react': slotkitReactVersion
-            };
-            // Ensure React dependencies are present (for React templates)
-            if (options.template?.includes('react')) {
-                packageJson.dependencies['react'] = packageJson.dependencies['react'] || '^19.1.1';
-                packageJson.dependencies['react-dom'] = packageJson.dependencies['react-dom'] || '^19.1.1';
-                // Add React types to devDependencies if not present
-                if (!packageJson.devDependencies) {
-                    packageJson.devDependencies = {};
-                }
-                packageJson.devDependencies['@types/react'] = packageJson.devDependencies['@types/react'] || '^19.1.16';
-                packageJson.devDependencies['@types/react-dom'] = packageJson.devDependencies['@types/react-dom'] || '^19.1.9';
-                // Ensure @vitejs/plugin-react is in devDependencies
-                packageJson.devDependencies['@vitejs/plugin-react'] = packageJson.devDependencies['@vitejs/plugin-react'] || '^5.0.4';
-            }
-            // Ensure scripts object exists
-            if (!packageJson.scripts) {
-                packageJson.scripts = {};
-            }
-            packageJson.scripts.dev = 'slotkit generate-imports && slotkit dev';
-            packageJson.scripts.build = 'slotkit generate-imports && slotkit build';
-            packageJson.scripts.preview = packageJson.scripts.preview || 'slotkit preview';
-            packageJson.scripts['generate-imports'] = packageJson.scripts['generate-imports'] || 'slotkit generate-imports';
-            writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf-8');
-        }
-        // Step 3: Create SlotKit-specific files
-        console.log('[INFO] Step 3: Creating SlotKit-specific files...');
-        createSlotKitFiles(projectDir);
-        // Step 4: Create .gitignore entry for generated files
-        const gitignorePath = join(projectDir, '.gitignore');
-        if (existsSync(gitignorePath)) {
-            const gitignore = readFileSync(gitignorePath, 'utf-8');
-            if (!gitignore.includes('plugin-imports.generated.ts')) {
-                writeFileSync(gitignorePath, gitignore + '\n# Generated files\nsrc/core/plugin/loader/plugin-imports.generated.ts\n', 'utf-8');
-            }
-        }
-        console.log('[OK] Project created successfully!');
-        console.log(`[INFO] Project location: ${projectDir}`);
-        console.log('\n[INFO] Next steps:');
-        console.log(`  cd ${projectName}`);
-        console.log('  pnpm install');
-        console.log('  pnpm dev');
-        console.log('  # Optional: pnpm slotkit create-plugin <name> --slots <slots>');
-        console.log('  # predev/prebuild will automatically run slotkit generate-imports');
-    }
-    catch (error) {
-        console.error('[ERROR] Failed to create project:', error.message);
-        process.exit(1);
-    }
-});
-program.parse();