create-isotope-app 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ATOMS GAMING / K4GFX
+
+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,108 @@
+<div align="center">
+
+<img src="docs/assets/logo.png" alt="Isotope Logo" width="200">
+
+# Isotope Framework
+
+[![npm version](https://img.shields.io/badge/version-1.0.0-blue.svg)](https://www.npmjs.com/package/create-isotope-app)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Build Status](https://img.shields.io/badge/build-passing-brightgreen.svg)](https://github.com/atoms-gaming/isotope)
+[![PHP Version](https://img.shields.io/badge/PHP-%3E%3D8.0-777bb4.svg)](https://www.php.net/)
+
+**Isotope** is a unified PHP & React hybrid framework designed by **ATOMS GAMING**.  
+It transforms the constraints of shared hosting into a modern development field.
+
+**Isotope** は、ATOMS GAMING が提供する PHP と React のハイブリッドフレームワークです。  
+レンタルサーバーという制限を、モダンな開発フィールドへと変貌させます。
+
+</div>
+
+---
+
+## ⚛️ Concept: Atomic Fusion
+
+Isotope fuses server-side logic and client-side UI into a single atomic structure: **The ISX File (.isx)**.
+
+- **Nucleus (PHP)**: The server-side core. Handles DB operations and initial data fetching.
+- **Electron (React)**: The client-side shell. Handles interactive UI and state management.
+
+### ⚛️ Quantum Fusion (SSR/CSR)
+
+Next.js-like developer experience on standard PHP servers.
+
+- **Server Components (Default)**: Rendered by PHP's Quantum Engine. Zero JS sent to browser.
+- **Client Components**: Add `"use client";` to the top to enable React hydration and HMR.
+
+---
+
+- **Atomic Fusion (.isx)**: Write PHP and React in a single file.
+- **Quantum SSR Engine**: PHP-only JSX rendering. No Node.js required!
+- **Zero-API Fetching**: Data from PHP is directly available in React props.
+- **Shared Hosting Optimized**: Runs perfectly on standard rental servers.
+
+---
+
+## 🚀 Quick Start / クイックスタート
+
+### 1. Initialize / プロジェクト生成
+
+```bash
+npx create-isotope-app my-app
+cd my-app
+```
+
+### 2. Start Development / 開発エンジンの起動
+
+```bash
+npm run dev
+```
+
+> [!TIP]
+> `npm run dev` starts both `vite` and the PHP built-in server concurrently.
+
+---
+
+## 🛠 Usage / 使い方
+
+### Unified Component (Atomic Fusion)
+
+`app/dashboard/page.isx`
+
+```tsx
+import { proton } from "../../src/isotope";
+
+export const nucleus = proton`
+// SERVER SIDE LOGIC (Executed on Server)
+return [
+    'user' => 'Atoms_User',
+    'status' => 'Stable'
+];
+`;
+
+// "use client"; // Uncomment to make it a Client Component
+
+/**
+ * Renders on Server by default (Quantum Engine)
+ */
+export default function Page({ user, status }) {
+  return (
+    <main>
+      <h1>User: {user}</h1>
+      <p>Status: {status}</p>
+    </main>
+  );
+}
+```
+
+---
+
+## 🚢 Deployment / デプロイ
+
+1. Run `npm run build`.
+2. Upload `app/`, `core/`, `public/dist/`, `index.php`, `.htaccess` to your server.
+
+---
+
+<div align="center">
+Produced by <strong>ATOMS GAMING</strong>
+</div>

package/index.js

@@ -0,0 +1,209 @@
+#!/usr/bin/env node
+
+import fse from "fs-extra";
+import path from "path";
+import chalk from "chalk";
+import { fileURLToPath } from "url";
+import { execSync } from "child_process";
+import readline from "readline";
+
+// ESM 互換
+const fs = fse.default || fse;
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// テンプレートのインポート
+import { kernelPhp } from "./src/templates/core/kernel.js";
+import { nucleusPhp } from "./src/templates/core/nucleus.js";
+import { bridgePhp, optimizerPhp } from "./src/templates/core/utils.js";
+import { homePageIsx, aboutPageIsx } from "./src/templates/pages/pages.js";
+import { linkTsx } from "./src/templates/pages/components.js";
+import { layoutIsx } from "./src/templates/layouts/layout.js";
+import { tailwindStyles, scssStyles } from "./src/templates/styles/styles.js";
+import {
+  tailwindConfig,
+  postcssConfig,
+  tsConfig,
+  tsConfigNode,
+  viteConfig,
+  mainTsx,
+} from "./src/templates/configs/configs.js";
+import { splitterTs } from "./src/templates/configs/splitter.js";
+import { readmeMd } from "./src/templates/configs/readme.js";
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+const question = (query) =>
+  new Promise((resolve) => rl.question(query, resolve));
+
+async function init() {
+  const projectName = process.argv[2] || "my-isotope-app";
+  const root = path.resolve(projectName);
+
+  // 1. ポートの競合を解消
+  console.log(chalk.cyan("🧹 Cleaning up ports 8000 and 5173..."));
+  try {
+    execSync('pkill -9 -f "vite" || true');
+    execSync('pkill -9 -f "php -S localhost:8000" || true');
+  } catch (e) {}
+
+  const args = process.argv.slice(2);
+  let styleChoice = args
+    .find((arg) => arg.startsWith("--style="))
+    ?.split("=")[1];
+
+  console.log(
+    chalk.blueBright(
+      `\n⚛️  Isotope: Stabilizing new atomic structure at ${root}...\n`,
+    ),
+  );
+
+  if (!styleChoice) {
+    styleChoice = await question(
+      "Which CSS framework? (tailwind / scss / none): ",
+    );
+  }
+  rl.close();
+
+  console.log(chalk.yellow(`\n📂 Creating project directories...`));
+
+  // 2. ディレクトリ構造の作成
+  const dirs = [
+    "app/home",
+    "app/about",
+    "app/layouts",
+    "core",
+    "public/dist",
+    "src",
+    "src/styles",
+    "src/components",
+    "docs/framework",
+    ".vscode",
+  ];
+  dirs.forEach((dir) => {
+    fs.ensureDirSync(path.join(root, dir));
+  });
+
+  console.log(chalk.yellow(`\n📝 Generating templates...`));
+
+  // 3. テンプレートの生成
+  const pkgDeps = {
+    react: "^18.2.0",
+    "react-dom": "^18.2.0",
+  };
+
+  const pkgDevDeps = {
+    "@vitejs/plugin-react": "^4.0.0",
+    vite: "^4.3.0",
+    typescript: "^5.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/node": "^20.0.0",
+    concurrently: "^8.2.0",
+  };
+
+  if (styleChoice === "tailwind") {
+    Object.assign(pkgDevDeps, {
+      tailwindcss: "^3.3.0",
+      autoprefixer: "^10.4.0",
+      postcss: "^8.4.0",
+    });
+    fs.writeFileSync(path.join(root, "tailwind.config.js"), tailwindConfig());
+    fs.writeFileSync(path.join(root, "postcss.config.js"), postcssConfig());
+    fs.writeFileSync(
+      path.join(root, "src/styles/globals.css"),
+      tailwindStyles(),
+    );
+  } else if (styleChoice === "scss") {
+    pkgDevDeps["sass"] = "^1.62.0";
+    fs.writeFileSync(path.join(root, "src/styles/globals.scss"), scssStyles());
+  }
+
+  // コアファイル
+  fs.writeFileSync(path.join(root, "core/Kernel.php"), kernelPhp(styleChoice));
+  fs.writeFileSync(path.join(root, "core/nucleus.php"), nucleusPhp());
+  fs.writeFileSync(path.join(root, "core/Bridge.php"), bridgePhp());
+  fs.writeFileSync(path.join(root, "core/optimizer.php"), optimizerPhp());
+  fs.writeFileSync(
+    path.join(root, "index.php"),
+    `<?php require_once 'core/Kernel.php'; Isotope\\Kernel::boot();`,
+  );
+
+  // 設定・ビルドツール
+  fs.writeFileSync(
+    path.join(root, "src/isotope.ts"),
+    `export function proton(strings: TemplateStringsArray, ...values: any[]): any { return null; }`,
+  );
+  fs.writeFileSync(path.join(root, "src/isotope-splitter.ts"), splitterTs());
+  fs.writeFileSync(path.join(root, "src/main.tsx"), mainTsx(styleChoice));
+  fs.writeFileSync(path.join(root, "vite.config.ts"), viteConfig(styleChoice));
+  fs.writeFileSync(
+    path.join(root, "tsconfig.json"),
+    JSON.stringify(tsConfig(projectName), null, 2),
+  );
+  fs.writeFileSync(
+    path.join(root, "tsconfig.node.json"),
+    JSON.stringify(tsConfigNode(), null, 2),
+  );
+  fs.writeFileSync(path.join(root, "README.md"), readmeMd());
+  fs.writeFileSync(
+    path.join(root, ".vscode/settings.json"),
+    JSON.stringify(
+      { "files.associations": { "*.isx": "typescriptreact" } },
+      null,
+      2,
+    ),
+  );
+
+  // コンポーネント・ページ
+  fs.writeFileSync(path.join(root, "src/components/Link.tsx"), linkTsx());
+  fs.writeFileSync(
+    path.join(root, "app/layouts/layout.isx"),
+    layoutIsx(styleChoice),
+  );
+  fs.writeFileSync(
+    path.join(root, "app/home/page.isx"),
+    homePageIsx(styleChoice),
+  );
+  fs.writeFileSync(
+    path.join(root, "app/about/page.isx"),
+    aboutPageIsx(styleChoice),
+  );
+
+  // ロゴコピー
+  const logoSrc = path.join(__dirname, "templates", "logo.png");
+  if (fs.existsSync(logoSrc)) {
+    fs.copySync(logoSrc, path.join(root, "public/logo.png"));
+  }
+
+  // 4. package.json & インストール
+  const pkg = {
+    name: projectName,
+    version: "1.0.0",
+    type: "module",
+    scripts: {
+      dev: 'concurrently "vite" "php -S localhost:8000 index.php"',
+      build: "vite build",
+      preview: "vite preview",
+    },
+    dependencies: pkgDeps,
+    devDependencies: pkgDevDeps,
+  };
+  fs.writeFileSync(
+    path.join(root, "package.json"),
+    JSON.stringify(pkg, null, 2),
+  );
+
+  console.log(chalk.yellow(`\n📦 Installing dependencies...`));
+  try {
+    execSync(`npm install`, { cwd: root, stdio: "inherit" });
+    console.log(chalk.green(`\n🚀 Ready! cd ${projectName} && npm run dev`));
+  } catch (err) {
+    console.log(chalk.red(`\n❌ Install failed.`));
+  }
+}
+
+init();

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "create-isotope-app",
+  "version": "1.0.1",
+  "description": "Atomic-based PHP & React hybrid framework for ATOMS GAMING",
+  "main": "index.js",
+  "type": "module",
+  "bin": {
+    "create-isotope-app": "index.js"
+  },
+  "files": [
+    "index.js",
+    "src",
+    "templates",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/K4GFX/create-isotope-app.git"
+  },
+  "keywords": [
+    "php",
+    "react",
+    "framework",
+    "isotope",
+    "atoms-gaming"
+  ],
+  "author": "ATOMS GAMING / K4GFX",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "fs-extra": "^11.3.3"
+  },
+  "devDependencies": {
+    "@types/node": "^25.2.3",
+    "vite": "^7.3.1"
+  }
+}

package/src/templates/configs/configs.js

@@ -0,0 +1,105 @@
+export const tailwindConfig = () =>
+  `export default { content: ["./index.php", "./src/**/*.{js,ts,jsx,tsx,isx}", "./app/**/*.{js,ts,jsx,tsx,isx}"], theme: { extend: {} }, plugins: [], }`;
+
+export const postcssConfig = () =>
+  `export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, }`;
+
+export const tsConfig = (projectName) => ({
+  compilerOptions: {
+    target: "ESNext",
+    lib: ["DOM", "DOM.Iterable", "ESNext"],
+    module: "ESNext",
+    skipLibCheck: true,
+    moduleResolution: "node",
+    allowImportingTsExtensions: true,
+    resolveJsonModule: true,
+    isolatedModules: true,
+    noEmit: true,
+    jsx: "react-jsx",
+    strict: true,
+    noUnusedLocals: true,
+    noUnusedParameters: true,
+    noFallthroughCasesInSwitch: true,
+    baseUrl: ".",
+    paths: {
+      "@/*": ["./src/*"],
+    },
+  },
+  include: ["src", "app"],
+  references: [{ path: "./tsconfig.node.json" }],
+});
+
+export const tsConfigNode = () => ({
+  compilerOptions: {
+    composite: true,
+    skipLibCheck: true,
+    module: "ESNext",
+    moduleResolution: "node",
+    allowSyntheticDefaultImports: true,
+  },
+  include: ["vite.config.ts"],
+});
+
+export const viteConfig = (styleChoice) => `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import isotopeSplitter from './src/isotope-splitter';
+
+export default defineConfig({
+  plugins: [isotopeSplitter(), react({ include: /\\.(isx|tsx?|jsx?)$/ })],
+  server: { cors: true, port: 5173, strictPort: true },
+  optimizeDeps: {
+    extensions: ['.isx'],
+    esbuildOptions: {
+      loader: {
+        '.isx': 'tsx',
+      },
+    },
+  },
+  build: {
+    outDir: 'public/dist',
+    manifest: true,
+    rollupOptions: {
+      input: 'src/main.tsx',
+      output: {
+        entryFileNames: 'assets/[name].js',
+        chunkFileNames: 'assets/[name].js',
+        assetFileNames: 'assets/[name].[ext]'
+      }
+    }
+  }
+});
+`;
+
+export const mainTsx = (styleChoice) => `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Layout from '../app/layouts/layout.isx';
+
+const rootElement = document.getElementById('isotope-nucleus');
+if (rootElement) {
+    const protonData = JSON.parse(rootElement.getAttribute('data-proton') || '{}');
+    const electronPath = rootElement.getAttribute('data-electron') || '';
+    
+    // Client-side hydration logic
+    const pages = import.meta.glob('../app/**/page.isx');
+    
+    const render = async () => {
+        const pageKey = electronPath.startsWith('/') ? electronPath : '/' + electronPath;
+        const matchedKey = Object.keys(pages).find(key => key.includes(electronPath));
+        
+        if (matchedKey) {
+            const mod = await pages[matchedKey]() as any;
+            const Page = mod.default;
+            
+            ReactDOM.createRoot(rootElement).render(
+                <React.StrictMode>
+                    <Layout>
+                        <Page {...protonData} />
+                    </Layout>
+                </React.StrictMode>
+            );
+        }
+    };
+    
+    render();
+}
+`;

package/src/templates/configs/readme.js

@@ -0,0 +1,63 @@
+export const readmeMd = () => `<div align="center">
+
+<img src="public/logo.png" alt="Isotope Logo" width="200">
+
+# Isotope: Atomic Fusion
+
+[![npm version](https://img.shields.io/badge/version-1.0.0-blue.svg)](https://www.npmjs.com/package/create-isotope-app)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Build Status](https://img.shields.io/badge/build-passing-brightgreen.svg)](https://github.com/atoms-gaming/isotope)
+[![PHP Version](https://img.shields.io/badge/PHP-%3E%3D8.0-777bb4.svg)](https://www.php.net/)
+
+**Isotope** is a unified PHP & React hybrid framework designed by **ATOMS GAMING**.  
+It transforms the constraints of shared hosting into a modern development field.
+
+</div>
+
+---
+
+## ⚛️ Getting Started
+
+### 1. Start Development
+
+\`\`\`bash
+npm run dev
+\`\`\`
+
+This starts the **Proton (PHP Nucleus)** on port 8000 and the **Electron (Vite)** on port 5173.
+
+### 2. File Structure
+
+- \`app/\`: Contains your Atomic Components (\`.isx\`).
+- \`core/\`: Framework kernel.
+- \`src/\`: Frontend entry points.
+
+## 🛠 Atomic Fusion (.isx)
+
+Write PHP and React in a single file!
+
+\`\`\`tsx
+import { proton } from '../../src/isotope';
+
+export const nucleus = proton\\\`
+// SERVER SIDE LOGIC
+return ['message' => 'Hello from Quantum SSR'];
+\\\`;
+
+// "use client"; // Add this for Client Components (CSR)
+
+export default function Page({ message }) {
+    return <h1>{message}</h1>;
+}
+\`\`\`
+
+### ⚛️ Quantum Fusion (SSR/CSR)
+- **Server Components (Default)**: Rendered by PHP. Zero JS overhead.
+- **Client Components**: Interactive UI using React hydration.
+
+---
+
+<div align="center">
+Produced by <strong>ATOMS GAMING</strong>
+</div>
+`;

package/src/templates/configs/splitter.js

@@ -0,0 +1,42 @@
+export const splitterTs =
+  () => `import { Plugin, transformWithEsbuild } from 'vite';
+import fs from 'fs';
+
+export default function isotopeSplitter(): Plugin {
+  return {
+    name: 'isotope-splitter',
+    enforce: 'pre',
+    async transform(code, id) {
+      const [path] = id.split('?');
+      if (path.endsWith('.isx')) {
+          const isClient = /['"]use client['"]/.test(code.replace(/\\/\\*\\s*[\\s\\S]*?\\s*\\*\\/|\\/\\/.*/g, ''));
+          if (!isClient) {
+              const stubCode = 'import React from "react"; export default function SC(props) { return <div dangerouslySetInnerHTML={{ __html: props._pageHtml }} style={{ display: "contents" }} />; }';
+              return transformWithEsbuild(stubCode, id, {
+                loader: 'tsx',
+                jsx: 'automatic',
+              });
+          }
+          const cleanedCode = code
+              .replace(/<\\?php[\\s\\S]*?\\?>/g, '')
+              .replace(/proton\\\`[\\s\\S]*?\\\`/g, 'null');
+          
+          return transformWithEsbuild(cleanedCode, id, {
+            loader: 'tsx',
+            jsx: 'automatic',
+          });
+      }
+      return null;
+    },
+    handleHotUpdate({ file, server }) {
+      if (file.split('?')[0].endsWith('.isx')) {
+        const mod = server.moduleGraph.getModuleById(file);
+        if (mod) {
+          server.moduleGraph.invalidateModule(mod);
+          return [mod];
+        }
+      }
+    }
+  };
+}
+`;