create-liferay-react-cx 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Laxit Khanpara
+
+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.

package/README.md

@@ -0,0 +1,288 @@
+# create-liferay-react-cx
+
+> ⚡ Zero-config CLI scaffold for **Liferay React Client Extensions** (custom element type).  
+> Powered by [Vite](https://vitejs.dev/) · Compatible with **Liferay 7.4 / DXP 2024.Q1+**
+
+[![npm version](https://img.shields.io/npm/v/create-liferay-react-cx?color=8B5CF6&label=npm)](https://www.npmjs.com/package/create-liferay-react-cx)
+[![license](https://img.shields.io/npm/l/create-liferay-react-cx?color=8B5CF6)](./LICENSE)
+[![node](https://img.shields.io/node/v/create-liferay-react-cx?color=8B5CF6)](https://nodejs.org)
+
+---
+
+## Table of Contents
+
+- [What is a Liferay Client Extension?](#what-is-a-liferay-client-extension)
+- [Requirements](#requirements)
+- [Quick Start](#quick-start)
+- [All Ways to Use This CLI](#all-ways-to-use-this-cli)
+  - [Method 1 — npm create (Recommended)](#method-1--npm-create-recommended)
+  - [Method 2 — npx (No Install)](#method-2--npx-no-install)
+  - [Method 3 — Global Install](#method-3--global-install)
+- [Options & Flags](#options--flags)
+- [Interactive Mode](#interactive-mode)
+- [Generated Project Structure](#generated-project-structure)
+- [Development Workflow](#development-workflow)
+- [React Version Compatibility](#react-version-compatibility)
+- [Contributing](#contributing)
+- [License](#license)
+
+---
+
+## What is a Liferay Client Extension?
+
+A **Client Extension (CE)** is the modern, decoupled way to extend Liferay DXP / Community Edition — no Java, no OSGi, no portal restarts required.
+
+A **Custom Element** CE wraps your React app as a standard Web Component (`<my-widget />`), which Liferay embeds directly on any page. This CLI scaffolds everything you need to build, preview, and deploy one in seconds.
+
+---
+
+## Requirements
+
+Before you start, make sure you have:
+
+| Requirement | Version |
+|---|---|
+| Node.js | ≥ 18.0.0 |
+| npm | ≥ 9.0.0 |
+| [Liferay Workspace](https://learn.liferay.com/dxp/latest/en/building-applications/tooling/liferay-workspace/what-is-liferay-workspace.html) | For `gradlew deploy` |
+
+> **Note:** The generated project must sit inside a Liferay Workspace at `[workspace]/client-extensions/my-widget/` for Gradle deployment to work.
+
+---
+
+## Quick Start
+
+```bash
+npm create liferay-react-cx my-widget
+cd my-widget
+../../gradlew deploy
+```
+
+That's it. Your custom element is live in Liferay. 🚀
+
+---
+
+## All Ways to Use This CLI
+
+### Method 1 — `npm create` (Recommended)
+
+`npm create` is the standard npm convention for scaffolding tools (like `npm create vite`, `npm create react-app`). It automatically resolves `create-liferay-react-cx` under the hood.
+
+**With a project name (fastest):**
+```bash
+npm create liferay-react-cx my-widget
+```
+
+**With a specific React version:**
+```bash
+npm create liferay-react-cx -- --name my-widget --react-version 18.2.0
+```
+> ⚠️ Note the `--` before flags — this is required when using `npm create` with named options, so npm passes them through to the CLI correctly.
+
+**Interactive wizard (no arguments):**
+```bash
+npm create liferay-react-cx
+```
+
+---
+
+### Method 2 — `npx` (No Install)
+
+Use `npx` to run the CLI directly without installing anything globally. The full package name `create-liferay-react-cx` is used here.
+
+**With a project name:**
+```bash
+npx create-liferay-react-cx my-widget
+```
+
+**With a specific React version:**
+```bash
+npx create-liferay-react-cx --name my-widget --react-version 18.2.0
+```
+
+**Interactive wizard:**
+```bash
+npx create-liferay-react-cx
+```
+
+---
+
+### Method 3 — Global Install
+
+Install once, use anywhere. After a global install, you can use the short alias `liferay-react-cx` from any directory.
+
+**Step 1 — Install globally:**
+```bash
+npm install -g create-liferay-react-cx
+```
+
+**Step 2 — Use it:**
+```bash
+liferay-react-cx my-widget
+liferay-react-cx --name my-widget --react-version 18.2.0
+liferay-react-cx --help
+```
+
+> **Tip:** To update a globally installed version later, run `npm update -g create-liferay-react-cx`.
+
+---
+
+## Options & Flags
+
+| Flag | Short | Description | Default |
+|------|-------|-------------|---------|
+| `--name` | `-n` | App name in **kebab-case** | _(prompted)_ |
+| `--react-version` | `-r` | React version to scaffold with | `16.12.0` |
+| `--help` | `-h` | Print help and exit | — |
+| `--version` | `-v` | Print version and exit | — |
+
+**App name rules:** lowercase letters, numbers, and hyphens only. Must start with a letter. Examples: `my-widget`, `employee-portal`, `news-feed`.
+
+---
+
+## Interactive Mode
+
+Run the CLI with no arguments to enter the interactive wizard:
+
+```bash
+npm create liferay-react-cx
+# or
+npx create-liferay-react-cx
+```
+
+You will be asked:
+
+1. **App name** — enter a kebab-case name for your widget
+2. **React version** — choose from a list or enter a custom version:
+   - `16.12.0` — Liferay 7.4 / DXP classic
+   - `18.2.0` — Liferay 7.4 U45+ / DXP 2024.Q1+
+   - `Custom` — enter any valid semver (e.g. `17.0.2`)
+3. **Install dependencies now?** — yes/no confirm
+
+---
+
+## Generated Project Structure
+
+Running the CLI creates the following layout:
+
+```
+my-widget/
+├── client-extension.yaml     ← Liferay CE descriptor (auto-configured)
+├── index.html                ← Vite dev-server entry point
+├── package.json              ← Project dependencies & scripts
+├── vite.config.js            ← Vite build config
+├── eslint.config.js          ← ESLint flat config
+└── src/
+    ├── main.jsx              ← Web Component registration (HTMLElement)
+    ├── App.jsx               ← Your React component — start editing here
+    ├── index.css             ← Global reset (shadow DOM scoped)
+    └── assets/
+        └── style.css         ← Component styles (shadow DOM isolated)
+```
+
+### What `client-extension.yaml` does
+
+This file tells Liferay how to register and display your widget:
+
+```yaml
+my-widget:
+  type: customElement          # renders as <my-widget> on Liferay pages
+  htmlElementName: my-widget   # the HTML tag name
+  urls:
+    - assets/*.js              # built JS bundle from vite-build/
+  cssURLs:
+    - assets/*.css             # built CSS bundle from vite-build/
+  useESM: true                 # ES module support
+  instanceable: false          # one instance per page
+  portletCategoryName: category.client-extensions
+```
+
+All values are automatically replaced with your app name during scaffolding.
+
+---
+
+## Development Workflow
+
+### ✅ Deploying to Liferay (Standard Workflow)
+
+When working inside a Liferay Workspace, **you only need one command**. Gradle handles the npm install, Vite build, and deployment automatically — no manual `npm run build` needed.
+
+**1. Navigate into your project:**
+```bash
+cd my-widget
+```
+
+**2. Deploy directly to Liferay** (from the Liferay Workspace root):
+```bash
+../../gradlew deploy
+```
+
+That's it. Under the hood, Gradle will:
+- Run `npm install` (if `node_modules` is missing)
+- Run `npm run build` (Vite compiles to `vite-build/`)
+- Copy the output into Liferay's deploy folder
+- Hot-reload the bundle in your running Liferay instance
+
+> After deployment, go to **Liferay Admin → Fragments and Resources → Client Extensions** to find and add your widget to a page.
+
+---
+
+### 🖥️ Local Preview (Optional)
+
+If you want to preview your React component in a browser **outside of Liferay** during development (faster feedback, hot reload), you can use Vite's dev server:
+
+```bash
+npm install       # only needed once
+npm run dev       # starts at http://localhost:5173
+```
+
+> This is purely optional and useful for rapid UI development. The component will render standalone — not inside Liferay's portal context.
+
+---
+
+## React Version Compatibility
+
+| React Version | Liferay Compatibility | Notes |
+|:---:|:---|:---|
+| `16.12.0` | Liferay 7.4 GA / DXP classic | Uses Liferay's bundled React. Smaller bundle. |
+| `18.2.0` | Liferay 7.4 U45+ / DXP 2024.Q1+ | Fully isolated in shadow DOM. Concurrent features. |
+
+Not sure which to pick? Use `16.12.0` for maximum compatibility with older Liferay instances, or `18.2.0` for newer deployments that support isolated client extensions.
+
+---
+
+## Contributing
+
+Contributions, issues, and feature requests are welcome!
+
+```bash
+# 1. Clone the repo
+git clone https://github.com/laxitkhanpara/liferay-react-ce.git
+cd liferay-react-cx
+
+# 2. Install dependencies
+npm install
+
+# 3. Test locally
+node bin/index.js my-test-app
+
+# 4. Clean up
+rm -rf my-test-app
+```
+
+Please open an [issue](https://github.com/laxitkhanpara/liferay-react-ce/issues) first to discuss any significant changes.
+
+---
+
+## License
+
+[MIT](./LICENSE) © [Laxit Khanpara](https://github.com/laxitkhanpara)
+
+---
+
+## Links
+
+- 📦 [npm package](https://www.npmjs.com/package/create-liferay-react-cx)
+- 🐛 [Report a bug](https://github.com/laxitkhanpara/liferay-react-ce/issues)
+- 📖 [Liferay Client Extensions docs](https://learn.liferay.com/dxp/latest/en/building-applications/client-extensions.html)
+- 🏗️ [Liferay Workspace docs](https://learn.liferay.com/dxp/latest/en/building-applications/tooling/liferay-workspace/what-is-liferay-workspace.html)

package/bin/index.js

@@ -0,0 +1,279 @@
+#!/usr/bin/env node
+
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { execa } from 'execa';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const commandName = 'liferay-react-cx';
+
+const PKG_VERSION = '1.0.1';
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+const args = process.argv.slice(2);
+
+const hasFlag = (flags) => flags.some((f) => args.includes(f));
+
+const getArgValue = (names) => {
+  const i = args.findIndex((arg) => names.includes(arg));
+  return i >= 0 && args[i + 1] ? args[i + 1] : undefined;
+};
+
+const positionalArgs = args.filter((a) => !a.startsWith('-'));
+
+// ─── Banner ──────────────────────────────────────────────────────────────────
+
+function printBanner() {
+  console.log('');
+
+  console.log(
+    chalk.bold.hex('#0B5FFF')(
+      '   ██╗     ██╗███████╗███████╗██████╗  █████╗ ██╗   ██╗'
+    )
+  );
+  console.log(
+    chalk.bold.hex('#0B5FFF')(
+      '   ██║     ██║██╔════╝██╔════╝██╔══██╗██╔══██╗╚██╗ ██╔╝'
+    )
+  );
+  console.log(
+    chalk.bold.hex('#0B5FFF')(
+      '   ██║     ██║█████╗  █████╗  ██████╔╝███████║ ╚████╔╝ '
+    )
+  );
+  console.log(
+    chalk.bold.hex('#0B5FFF')(
+      '   ██║     ██║██╔══╝  ██╔══╝  ██╔══██╗██╔══██║  ╚██╔╝  '
+    )
+  );
+  console.log(
+    chalk.bold.hex('#0B5FFF')(
+      '   ███████╗██║██║     ███████╗██║  ██║██║  ██║   ██║   '
+    )
+  );
+  console.log(
+    chalk.bold.hex('#0B5FFF')(
+      '   ╚══════╝╚═╝╚═╝     ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   '
+    )
+  );
+
+  console.log('');
+
+  console.log(
+    chalk.bold('   Liferay React Client Extension')
+  );
+
+  console.log(
+    chalk.dim('   Official-style scaffolding tool for Liferay DXP')
+  );
+
+  console.log(
+    chalk.dim(`   Version: ${PKG_VERSION}`)
+  );
+
+  console.log(
+    chalk.dim('   ─────────────────────────────────────────────')
+  );
+
+  console.log('');
+}
+
+// ─── Version / Help ──────────────────────────────────────────────────────────
+
+if (hasFlag(['--version', '-v'])) {
+  console.log(`liferay-react-cx v${PKG_VERSION}`);
+  process.exit(0);
+}
+
+if (hasFlag(['--help', '-h'])) {
+  console.log(`
+${chalk.bold('liferay-react-cx')} — Scaffold a Liferay React Client Extension
+
+${chalk.bold('USAGE')}
+  liferay-react-cx [app-name] [react-version]
+  liferay-react-cx --name <app-name> [--react-version <version>]
+  -n, --name            App name in kebab-case  (e.g. my-widget)
+  -r, --react-version   React version to use    (default: 16.12.0)
+  -v, --version         Print version
+  -h, --help            Show this help
+
+${chalk.bold('EXAMPLES')}
+  npm create liferay-react-cx my-widget
+  npm create liferay-react-cx -- --name my-widget --react-version 18.2.0
+  npm create liferay-react-cx                        # interactive mode
+
+${chalk.bold('AFTER SCAFFOLDING')}
+  cd <app-name>
+  ../../gradlew deploy    # deploy to Liferay
+
+${chalk.dim('https://github.com/laxitkhanpara/liferay-react-ce')}
+`);
+  process.exit(0);
+}
+
+// ─── Main ────────────────────────────────────────────────────────────────────
+
+(async () => {
+  printBanner();
+
+  // Resolve inputs
+  const appNameArg = getArgValue(['--name', '-n']) || positionalArgs[0];
+  const reactVersionArg =
+    getArgValue(['--react-version', '-r']) || positionalArgs[1];
+
+  // Interactive prompts only for missing fields
+  let answers;
+
+  if (appNameArg) {
+    answers = {
+      appName: appNameArg,
+      reactVersion: reactVersionArg || '16.12.0',
+      installDeps: true,
+    };
+  } else {
+    answers = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'appName',
+        message: chalk.cyan('App name') + chalk.dim(' (kebab-case):'),
+        validate: (input) =>
+          /^[a-z][a-z0-9-]*$/.test(input.trim())
+            ? true
+            : chalk.red('Use lowercase kebab-case — e.g. my-widget'),
+        filter: (v) => v.trim(),
+      },
+      {
+        type: 'list',
+        name: 'reactVersion',
+        message: chalk.cyan('React version:'),
+        choices: [
+          { name: '16.12.0  (Liferay 7.4 / DXP classic)', value: '16.12.0' },
+          { name: '18.2.0   (Liferay 7.4 U45+ / DXP 2024.Q1+)', value: '18.2.0' },
+          { name: 'Custom   (enter manually)', value: '__custom__' },
+        ],
+        default: '16.12.0',
+      },
+      {
+        type: 'input',
+        name: 'reactVersionCustom',
+        message: chalk.cyan('Enter React version:'),
+        when: (prev) => prev.reactVersion === '__custom__',
+        validate: (v) =>
+          /^\d+\.\d+\.\d+/.test(v.trim()) ? true : 'Enter a valid semver e.g. 17.0.2',
+        filter: (v) => v.trim(),
+      },
+      {
+        type: 'confirm',
+        name: 'installDeps',
+        message: chalk.cyan('Install npm dependencies now?'),
+        default: true,
+      },
+    ]);
+
+    if (answers.reactVersion === '__custom__') {
+      answers.reactVersion = answers.reactVersionCustom;
+    }
+  }
+
+  const { appName, reactVersion, installDeps } = answers;
+  const projectPath = path.resolve(process.cwd(), appName);
+  const templatePath = path.join(__dirname, '..', 'templates', 'custom-element');
+
+  // Guard: existing directory
+  if (fs.existsSync(projectPath)) {
+    console.error(
+      chalk.red(`\n  ✖  Directory "${appName}" already exists. Choose a different name.\n`)
+    );
+    process.exit(1);
+  }
+
+  // ── Step 1: Copy template ──────────────────────────────────────────────────
+  process.stdout.write(chalk.blue('\n  📁  Scaffolding project…'));
+  await fs.copy(templatePath, projectPath);
+  console.log(chalk.green('  ✔'));
+
+  // ── Step 2: Replace __APP_NAME__ placeholders ─────────────────────────────
+  const replaceInFile = (filePath) => {
+    let content = fs.readFileSync(filePath, 'utf-8');
+    content = content.replace(/__APP_NAME__/g, appName);
+    fs.writeFileSync(filePath, content);
+  };
+
+  const walk = (dir) => {
+    for (const file of fs.readdirSync(dir)) {
+      const full = path.join(dir, file);
+      fs.statSync(full).isDirectory() ? walk(full) : replaceInFile(full);
+    }
+  };
+
+  walk(projectPath);
+
+  // ── Step 3: Write package.json ────────────────────────────────────────────
+  process.stdout.write(chalk.blue('  📦  Writing package.json…'));
+
+  const projectPackageJson = {
+    name: appName,
+    version: '1.0.0',
+    private: true,
+    type: 'module',
+    scripts: {
+      dev: 'vite',
+      build: 'vite build',
+      preview: 'vite preview',
+    },
+    dependencies: {
+      react: reactVersion,
+      'react-dom': reactVersion,
+    },
+    devDependencies: {
+      '@vitejs/plugin-react': '^4.3.3',
+      vite: '^4.4.9',
+    },
+  };
+
+  fs.writeJsonSync(path.join(projectPath, 'package.json'), projectPackageJson, {
+    spaces: 2,
+  });
+  console.log(chalk.green('  ✔'));
+
+  // ── Step 4: Install dependencies ──────────────────────────────────────────
+  if (installDeps !== false) {
+    console.log(chalk.blue('\n  📥  Installing dependencies…\n'));
+    try {
+      await execa('npm', ['install'], { cwd: projectPath, stdio: 'inherit' });
+    } catch {
+      console.warn(
+        chalk.yellow(
+          '\n  ⚠  npm install failed. Run it manually inside the project folder.\n'
+        )
+      );
+    }
+  }
+
+  // ── Done ──────────────────────────────────────────────────────────────────
+  console.log('');
+  console.log(
+    chalk.bold.green('  ✅  Project created successfully!\n')
+  );
+  console.log(chalk.bold('  Next steps:\n'));
+  console.log(chalk.cyan(`    cd ${appName}`));
+  if (installDeps === false) {
+    console.log(chalk.cyan('    npm install'));
+  }
+  console.log(
+    chalk.cyan('    ../../gradlew deploy') + chalk.dim('   # deploy to Liferay')
+  );
+  console.log('');
+  console.log(
+    chalk.dim(
+      '  Docs: https://learn.liferay.com/dxp/latest/en/building-applications/client-extensions.html'
+    )
+  );
+  console.log('');
+})();

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "create-liferay-react-cx",
+  "version": "1.0.1",
+  "description": "CLI scaffold tool to generate Liferay React Client Extension (custom element) projects — zero-config, Vite-powered, Liferay 7.4+ compatible.",
+  "type": "module",
+  "main": "./bin/index.js",
+  "bin": {
+    "create-liferay-react-cx": "./bin/index.js",
+    "liferay-react-cx": "./bin/index.js"
+  },
+  "keywords": [
+    "liferay",
+    "client-extension",
+    "custom-element",
+    "react",
+    "vite",
+    "scaffold",
+    "cli",
+    "liferay-dxp",
+    "liferay-portal",
+    "web-component"
+  ],
+  "author": {
+    "name": "Laxit Khanpara",
+    "email": "laxitkhanpara3646@gmail.com",
+    "url": "https://github.com/laxitkhanpara"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/laxitkhanpara/liferay-react-ce.git"
+  },
+  "bugs": {
+    "url": "https://github.com/laxitkhanpara/liferay-react-ce/issues"
+  },
+  "homepage": "https://github.com/laxitkhanpara/liferay-react-ce#readme",
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0"
+  },
+  "files": [
+    "bin/",
+    "templates/",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "echo \"No tests yet\" && exit 0"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "execa": "^9.6.1",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^9.2.12"
+  }
+}

package/templates/custom-element/client-extension.yaml

@@ -0,0 +1,17 @@
+assemble:
+    - from: vite-build
+      into: static
+
+__APP_NAME__:
+    cssURLs:
+        - assets/*.css
+    friendlyURLMapping: __APP_NAME__
+    htmlElementName: __APP_NAME__
+    instanceable: false
+    name: __APP_NAME__
+    portletCategoryName: category.client-extensions
+    type: customElement
+    urls:
+        - assets/*.js
+    useESM: true
+    liferay.virtual.instance.id: default

package/templates/custom-element/eslint.config.js

@@ -0,0 +1 @@
+export default [{ rules: { 'no-console': 'warn' } }];

package/templates/custom-element/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__APP_NAME__</title>
+  </head>
+  <body>
+    <__APP_NAME__></__APP_NAME__>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/custom-element/src/App.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import './assets/style.css';
+
+function App() {
+  return (
+    <div className="lce-container">
+      <div className="lce-card">
+        <header className="lce-header">
+          <h1 className="lce-title">__APP_NAME__</h1>
+          <p className="lce-subtitle">
+            React {React.version}
+          </p>
+        </header>
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/templates/custom-element/src/assets/style.css

@@ -0,0 +1,47 @@
+/* ── Shadow DOM reset ─────────────────────────────────────────────────────── */
+
+:host {
+  all: initial;
+  display: block;
+  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  color: #1e1b4b;
+}
+
+/* ── Layout ───────────────────────────────────────────────────────────────── */
+
+.lce-container {
+  width: 100%;
+  min-height: 100px;
+  padding: 24px 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
+}
+
+.lce-card {
+  width: min(100%, 500px);
+  padding: 36px 40px;
+  border-radius: 20px;
+  background: #ffffff;
+  box-shadow: 0 8px 32px rgba(109, 40, 217, 0.12);
+  text-align: center;
+}
+
+/* ── Header ───────────────────────────────────────────────────────────────── */
+
+.lce-title {
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+  background: linear-gradient(135deg, #4c1d95, #7c3aed);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 10px;
+}
+
+.lce-subtitle {
+  color: #6b7280;
+  font-size: 14px;
+}

package/templates/custom-element/src/index.css

@@ -0,0 +1,5 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}

package/templates/custom-element/src/main.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import App from './App';
+
+class WebComponent extends HTMLElement {
+  connectedCallback() {
+    render(
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>,
+      this
+    );
+  }
+
+  disconnectedCallback() {
+    unmountComponentAtNode(this);
+  }
+}
+
+const ELEMENT_NAME = '__APP_NAME__';
+
+if (customElements.get(ELEMENT_NAME)) {
+  // eslint-disable-next-line no-console
+  console.log(`Skipping registration for <${ELEMENT_NAME}> (already registered)`);
+} else {
+  customElements.define(ELEMENT_NAME, WebComponent);
+}

package/templates/custom-element/vite.config.js

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  base: './',
+  build: {
+    outDir: 'vite-build',
+  },
+  plugins: [
+    react({
+      jsxRuntime: 'classic',
+    }),
+  ],
+});