create-jay 0.21.0 → 0.22.0

package/dist/index.js

@@ -2,8 +2,10 @@
 
 // lib/index.ts
 import path2 from "node:path";
+import fs2 from "node:fs";
 import { execSync } from "node:child_process";
 import chalk from "chalk";
+import { input as input2 } from "@inquirer/prompts";
 
 // lib/prompts.ts
 import { input, checkbox } from "@inquirer/prompts";
@@ -97,30 +99,20 @@ var PLUGINS = [
     group: "Wix",
     checked: false,
     isDep: true
-  },
-  {
-    name: "@jay-framework/aiditor",
-    label: "AIditor",
-    description: "Visual AI editor: point-and-shoot editing with Claude",
-    group: "AIditor",
-    checked: false,
-    isDep: true
   }
 ];
-var CORE_DEPS = [
-  "@jay-framework/fullstack-component",
-  "@jay-framework/runtime",
-  "@jay-framework/stack-client-runtime",
-  "@jay-framework/stack-server-runtime"
-];
-var CORE_DEV_DEPS = [
-  "@jay-framework/jay-stack-cli",
-  "@jay-framework/compiler-jay-stack",
-  "@jay-framework/dev-environment",
-  "@jay-framework/jay-cli",
-  "typescript",
-  "vite"
-];
+var CORE_DEPS = {
+  "@jay-framework/fullstack-component": "^0.21.0",
+  "@jay-framework/jay-stack-cli": "^0.21.0"
+};
+var CORE_DEV_DEPS = {
+  "@jay-framework/aiditor": "^0.21.0",
+  "@jay-framework/jay-cli": "^0.21.0",
+  "@types/node": "^22.10.0",
+  rimraf: "^6.0.0",
+  typescript: "~5.7.2",
+  vite: "^6.0.1"
+};
 
 // lib/prompts.ts
 async function runPrompts() {
@@ -143,7 +135,7 @@ async function runPrompts() {
   }
   const choices = [];
   for (const [group, plugins] of groups) {
-    choices.push({ name: `\u2500\u2500 ${group} \u2500\u2500`, value: "__separator__", disabled: "" });
+    choices.push({ name: `\u2500\u2500 ${group} \u2500\u2500`, value: "__separator__", disabled: " " });
     for (const plugin of plugins) {
       choices.push({
         name: `${plugin.label} \u2014 ${plugin.description}`,
@@ -154,7 +146,8 @@ async function runPrompts() {
   }
   const selected = await checkbox({
     message: "Select plugins to install:",
-    choices
+    choices,
+    pageSize: process.stdout.rows ? process.stdout.rows - 5 : 20
   });
   const selectedPlugins = PLUGINS.filter((p) => selected.includes(p.name));
   return { name: name.trim(), selectedPlugins };
@@ -180,35 +173,45 @@ function writeFile(projectDir, relativePath, content) {
   fs.writeFileSync(fullPath, content, "utf-8");
 }
 function generatePackageJson(name, selectedPlugins) {
-  const deps = {};
-  for (const dep of CORE_DEPS) {
-    deps[dep] = "latest";
-  }
+  const deps = { ...CORE_DEPS };
+  const hasWixPlugins2 = selectedPlugins.some((p) => p.name.startsWith("@jay-framework/wix-"));
   for (const plugin of selectedPlugins) {
     if (plugin.isDep)
       deps[plugin.name] = "latest";
   }
-  const devDeps = {};
-  for (const dep of CORE_DEV_DEPS) {
-    devDeps[dep] = "latest";
+  if (hasWixPlugins2 && !deps["@jay-framework/wix-server-client"]) {
+    deps["@jay-framework/wix-server-client"] = "latest";
   }
+  const devDeps = { ...CORE_DEV_DEPS };
   for (const plugin of selectedPlugins) {
     if (!plugin.isDep)
       devDeps[plugin.name] = "latest";
   }
+  const hasWixDeploy = selectedPlugins.some((p) => p.name === "@jay-framework/wix-deploy");
+  const hasAiditor = true;
   const pkg = {
     name,
     version: "0.1.0",
     type: "module",
     private: true,
     scripts: {
-      dev: "jay-stack dev",
-      build: "jay-cli definitions src && jay-stack build",
-      serve: "jay-stack serve",
-      validate: "jay-stack validate",
-      "agent-kit": "jay-stack agent-kit",
-      setup: "jay-stack setup",
-      clean: "rimraf dist && rimraf build"
+      setup: "jay-stack-cli setup",
+      dev: "jay-stack-cli dev",
+      "agent-kit": "jay-stack-cli agent-kit",
+      validate: "jay-stack-cli validate",
+      clean: "rimraf dist && rimraf build && rimraf -g 'src/**/*.d.ts'",
+      definitions: "jay-cli definitions src",
+      build: "npm run agent-kit && npm run definitions",
+      "build:production": "npm run build && jay-stack-cli build",
+      "build:check-types": "tsc",
+      serve: "jay-stack-cli serve",
+      ...hasWixDeploy && {
+        "wix:deploy": "jay-stack-cli run wix-deploy/deploy --exclude-plugins aiditor",
+        "wix:serve": "node serve.mjs"
+      },
+      ...hasAiditor && {
+        "aiditor:publish": hasWixDeploy ? "npm run build:production && npm run wix:deploy" : "npm run build:production && echo 'add your deploy command here'"
+      }
     },
     dependencies: sortKeys(deps),
     devDependencies: sortKeys(devDeps)
@@ -225,13 +228,18 @@ function sortKeys(obj) {
 function scaffoldProject(projectDir, name, selectedPlugins) {
   fs.mkdirSync(projectDir, { recursive: true });
   writeFile(projectDir, "package.json", generatePackageJson(name, selectedPlugins));
-  writeFile(projectDir, "src/pages/page.jay-html", readTemplate("page.jay-html").replace(/\{\{name\}\}/g, name));
+  writeFile(
+    projectDir,
+    "src/pages/page.jay-html",
+    readTemplate("page.jay-html").replace(/\{\{name\}\}/g, name)
+  );
   writeFile(projectDir, "src/pages/page.ts", readTemplate("page.ts"));
   writeFile(projectDir, "src/pages/page.jay-contract", readTemplate("page.jay-contract"));
   writeFile(projectDir, "src/styles/theme.css", readTemplate("theme.css"));
   writeFile(projectDir, ".jay", readTemplate("jay-config.yaml"));
   writeFile(projectDir, "vite.config.ts", readTemplate("vite.config.ts"));
   writeFile(projectDir, "tsconfig.json", readTemplate("tsconfig.json"));
+  writeFile(projectDir, "CLAUDE.md", readTemplate("CLAUDE.md"));
   const jaySkillPath = path.join(templatesDir(), "jay-skill.md");
   if (fs.existsSync(jaySkillPath)) {
     writeFile(projectDir, "jay-skill.md", fs.readFileSync(jaySkillPath, "utf-8"));
@@ -242,6 +250,14 @@ function scaffoldProject(projectDir, name, selectedPlugins) {
   if (hasDesignValidator) {
     writeFile(projectDir, "DESIGN.md", readTemplate("DESIGN.md"));
   }
+  const hasWixMembers = selectedPlugins.some((p) => p.name === "@jay-framework/wix-members");
+  if (hasWixMembers) {
+    writeFile(
+      projectDir,
+      "src/pages/auth/callback/page.jay-html",
+      readTemplate("auth-callback.jay-html")
+    );
+  }
 }
 
 // lib/index.ts
@@ -254,6 +270,112 @@ function detectPackageManager() {
 function run(cmd, cwd) {
   execSync(cmd, { cwd, stdio: "inherit" });
 }
+function hasWixPlugins(selectedPlugins) {
+  return selectedPlugins.some((p) => p.name.startsWith("@jay-framework/wix-"));
+}
+async function promptWixApiKey() {
+  console.log("");
+  console.log(chalk.bold("  Wix Setup"));
+  console.log("");
+  console.log(chalk.dim("  Wix plugins require API credentials. Create an API key at:"));
+  console.log(chalk.cyan("  https://manage.wix.com/account/api-keys"));
+  console.log("");
+  return input2({
+    message: "Wix API Key:",
+    validate: (v) => v.trim() ? true : "API key is required"
+  });
+}
+async function setupWix(projectDir, apiKey) {
+  let loggedIn = false;
+  try {
+    execSync("npx @wix/cli whoami", { cwd: projectDir, stdio: "pipe" });
+    loggedIn = true;
+  } catch {
+  }
+  if (!loggedIn) {
+    console.log(chalk.dim("  You need to log in to Wix to connect your site."));
+    try {
+      run("npx @wix/cli login", projectDir);
+    } catch {
+      console.log(chalk.yellow("  \u26A0 Wix login failed \u2014 run `npx @wix/cli login` manually"));
+      return;
+    }
+  }
+  console.log(chalk.dim("  Connecting to your Wix site..."));
+  try {
+    run("npm create @wix/new@latest init", projectDir);
+  } catch {
+    console.log(chalk.yellow("  \u26A0 Wix site init failed \u2014 you can run it manually later"));
+    return;
+  }
+  const wixConfigPath = path2.join(projectDir, "wix.config.json");
+  if (!fs2.existsSync(wixConfigPath)) {
+    console.log(chalk.yellow("  \u26A0 wix.config.json not created \u2014 skipping credential setup"));
+    return;
+  }
+  let siteId = "";
+  let appId = "";
+  try {
+    const wixConfig = JSON.parse(fs2.readFileSync(wixConfigPath, "utf-8"));
+    siteId = wixConfig.siteId || "";
+    appId = wixConfig.appId || "";
+  } catch {
+    console.log(chalk.yellow("  \u26A0 Could not parse wix.config.json"));
+    return;
+  }
+  if (!siteId || !appId) {
+    console.log(chalk.yellow("  \u26A0 Missing siteId or appId in wix.config.json"));
+    return;
+  }
+  const configDir = path2.join(projectDir, "config");
+  fs2.mkdirSync(configDir, { recursive: true });
+  fs2.writeFileSync(
+    path2.join(configDir, ".wix.yaml"),
+    `# Wix API Configuration
+#
+# This file contains credentials for connecting to your Wix site.
+# Get these values from your Wix dashboard:
+#   - API Key: https://dev.wix.com/docs/rest/articles/getting-started/api-keys
+#   - Site ID: Found in your Wix dashboard URL or site settings
+#   - OAuth Client ID: Create an OAuth app in Wix Developers dashboard
+#
+# IMPORTANT: This file contains secrets. Add config/.wix.yaml to .gitignore.
+
+# Server-side authentication (required)
+apiKeyStrategy:
+  apiKey: "${apiKey.trim()}"
+  siteId: "${siteId}"
+
+# Client-side authentication (required for interactive features)
+oauthStrategy:
+  clientId: "${appId}"
+`,
+    "utf-8"
+  );
+  const gitignorePath = path2.join(projectDir, ".gitignore");
+  const gitignoreEntries = ["config/.wix.yaml", "wix.config.json"];
+  if (fs2.existsSync(gitignorePath)) {
+    let content = fs2.readFileSync(gitignorePath, "utf-8");
+    for (const entry of gitignoreEntries) {
+      if (!content.includes(entry)) {
+        content += `
+${entry}`;
+      }
+    }
+    fs2.writeFileSync(gitignorePath, content.trimEnd() + "\n", "utf-8");
+  } else {
+    fs2.writeFileSync(
+      gitignorePath,
+      `node_modules
+dist
+build
+${gitignoreEntries.join("\n")}
+`,
+      "utf-8"
+    );
+  }
+  console.log(chalk.green("  \u2713 Wix credentials configured"));
+}
 async function main() {
   const pm = detectPackageManager();
   console.log("");
@@ -263,24 +385,33 @@ async function main() {
   const projectDir = path2.resolve(process.cwd(), config.name);
   console.log("");
   console.log(`Creating project in ${chalk.cyan(`./${config.name}`)}...`);
+  const wixSelected = hasWixPlugins(config.selectedPlugins);
+  const wixApiKey = wixSelected ? await promptWixApiKey() : "";
   scaffoldProject(projectDir, config.name, config.selectedPlugins);
   console.log(chalk.green("  \u2713 Created project structure"));
   console.log(chalk.dim("  Installing dependencies..."));
   run(pm === "yarn" ? "yarn install" : "npm install", projectDir);
   console.log(chalk.green("  \u2713 Installed dependencies"));
+  if (wixSelected) {
+    await setupWix(projectDir, wixApiKey);
+  }
   console.log(chalk.dim("  Generating agent-kit..."));
   try {
-    run("npx jay-stack agent-kit", projectDir);
+    run("npx jay-stack-cli agent-kit", projectDir);
     console.log(chalk.green("  \u2713 Generated agent-kit"));
   } catch {
-    console.log(chalk.yellow("  \u26A0 Agent-kit generation skipped (can run later with: jay-stack agent-kit)"));
+    console.log(
+      chalk.yellow(
+        "  \u26A0 Agent-kit generation skipped (can run later with: npm run agent-kit)"
+      )
+    );
   }
   console.log(chalk.dim("  Running plugin setup..."));
   try {
-    run("npx jay-stack setup", projectDir);
+    run("npx jay-stack-cli setup", projectDir);
     console.log(chalk.green("  \u2713 Plugin setup complete"));
   } catch {
-    console.log(chalk.yellow("  \u26A0 Setup incomplete (can run later with: jay-stack setup)"));
+    console.log(chalk.yellow("  \u26A0 Setup incomplete (can run later with: npm run setup)"));
   }
   const runCmd = pm === "yarn" ? "yarn dev" : "npm run dev";
   console.log("");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-jay",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "type": "module",
   "description": "Create a new Jay Stack project",
   "license": "Apache-2.0",

package/templates/CLAUDE.md

@@ -0,0 +1,13 @@
+# CLAUDE.md
+
+This is a Jay Stack project.
+
+## Getting Started
+
+Run `yarn setup` then `yarn agent-kit` to generate the agent kit.
+
+Read `agent-kit/` for contracts, plugin references, and role guides. See the `/jay` skill for full details on the agent kit structure, CLI commands, and project organization.
+
+Before making changes, read `agent-kit/plugins-index.yaml` and the relevant role guide (`agent-kit/designer/`, `agent-kit/developer/`, etc.).
+
+Run `yarn validate` after changes.

package/templates/auth-callback.jay-html

@@ -0,0 +1,56 @@
+<html>
+  <head>
+    <title>Signing in...</title>
+    <meta name="description" content="Authentication callback — please wait while we sign you in.">
+    <script type="application/jay-headless" plugin="@jay-framework/wix-members" contract="auth-callback"></script>
+    <script type="application/jay-data">
+      data:
+    </script>
+    <link rel="stylesheet" href="../../../styles/theme.css" />
+    <style>
+      .auth-callback {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        padding: 2rem;
+      }
+
+      .auth-callback-content {
+        text-align: center;
+        max-width: 400px;
+      }
+
+      .auth-callback-content h1 {
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin-bottom: 0.75rem;
+      }
+
+      .auth-callback-content p {
+        color: var(--color-text-muted);
+      }
+
+      .auth-error {
+        color: #dc2626;
+      }
+    </style>
+  </head>
+  <body>
+    <jay:auth-callback>
+      <main class="auth-callback">
+        <div class="auth-callback-content">
+          <div if="isProcessing">
+            <h1>Signing you in...</h1>
+            <p>Please wait while we complete your login.</p>
+          </div>
+          <div if="hasError">
+            <h1>Something went wrong</h1>
+            <p class="auth-error">{errorMessage}</p>
+            <p><a href="/">Return to homepage</a></p>
+          </div>
+        </div>
+      </main>
+    </jay:auth-callback>
+  </body>
+</html>

package/templates/page.jay-html

@@ -1,35 +1,183 @@
 <html lang="en">
   <head>
-    <title>{{name}}</title>
-    <meta name="description" content="A Jay Stack project">
+    <title>Welcome to {{name}}</title>
+    <meta name="description" content="Your Jay Stack project is ready — edit pages with the AIditor, a coding agent, or by hand.">
     <script type="application/jay-data" contract="./page.jay-contract"></script>
+    <script
+      type="application/jay-headless"
+      plugin="@jay-framework/ui-kit"
+      contract="letter-split"
+    ></script>
     <link rel="stylesheet" href="../styles/theme.css" />
     <style>
+      /* ── Hero ── */
       .hero {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        min-height: 80vh;
+        min-height: 50vh;
         text-align: center;
-        padding: 2rem;
+        padding: 3rem 2rem 2rem;
       }
-      .hero h1 {
-        font-size: 2.5rem;
+
+      .hero-title {
+        font-size: clamp(2.2rem, 5vw, 3.5rem);
+        font-weight: 800;
+        margin-bottom: 1.5rem;
+        line-height: 1.15;
+        white-space: pre;
+      }
+
+      /* Letter-split wave animation */
+      .letter {
+        display: inline-block;
+        animation: wave 2.2s ease-in-out infinite;
+        animation-delay: calc(var(--i) * 0.07s);
+      }
+      @keyframes wave {
+        0%, 100% { transform: translateY(0); }
+        30%      { transform: translateY(-0.25em); }
+        50%      { transform: translateY(0); }
+      }
+
+      .hero-subtitle {
+        font-size: 1.2rem;
+        color: var(--color-text-muted);
+        max-width: 520px;
+        margin-bottom: 2rem;
+      }
+
+      /* ── CTA button ── */
+      .cta-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.85rem 2rem;
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: #fff;
+        background: var(--color-primary);
+        border: none;
+        border-radius: 0.6rem;
+        text-decoration: none;
+        cursor: pointer;
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+      }
+      .cta-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
+        text-decoration: none;
+      }
+      .cta-btn:active {
+        transform: translateY(0);
+      }
+
+      /* ── Steps section ── */
+      .steps {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+        max-width: 640px;
+        margin: 0 auto;
+        padding: 2rem 2rem 4rem;
+      }
+
+      .step {
+        display: flex;
+        align-items: flex-start;
+        gap: 1rem;
+        padding: 1.25rem 1.5rem;
+        background: var(--color-surface);
+        border: 1px solid var(--color-border);
+        border-radius: 0.75rem;
+        opacity: 0;
+        transform: translateY(12px);
+        animation: fadeUp 0.5s ease forwards;
+      }
+      .step:nth-child(1) { animation-delay: 0.2s; }
+      .step:nth-child(2) { animation-delay: 0.4s; }
+      .step:nth-child(3) { animation-delay: 0.6s; }
+
+      @keyframes fadeUp {
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .step-number {
+        flex-shrink: 0;
+        width: 2rem;
+        height: 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         font-weight: 700;
-        margin-bottom: 1rem;
+        font-size: 0.95rem;
+        color: var(--color-primary);
+        background: rgba(37, 99, 235, 0.1);
+        border-radius: 50%;
+      }
+
+      .step-body h2 {
+        font-size: 1rem;
+        font-weight: 600;
+        margin-bottom: 0.2rem;
+      }
+      .step-body p {
+        font-size: 0.9rem;
+        color: var(--color-text-muted);
+        line-height: 1.5;
       }
-      .hero p {
-        font-size: 1.25rem;
-        color: #64748b;
-        max-width: 600px;
+
+      .step-body code {
+        font-size: 0.85rem;
+        background: var(--color-border);
+        padding: 0.1em 0.4em;
+        border-radius: 0.3rem;
       }
     </style>
   </head>
   <body>
-    <main class="hero">
-      <h1>{title}</h1>
-      <p>{description}</p>
+    <main>
+      <section class="hero">
+        <jay:letter-split text="{title}">
+          <h1 class="hero-title" aria-label="Welcome to {{name}}">
+            <span forEach="letters" trackBy="index" class="letter" aria-hidden="true" style="--i: {index}">{text}</span>
+          </h1>
+        </jay:letter-split>
+
+        <p class="hero-subtitle">{description}</p>
+
+        <a class="cta-btn" href="/aiditor">Open the AIditor &#10132;</a>
+      </section>
+
+      <section class="steps">
+        <div class="step">
+          <span class="step-number">1</span>
+          <div class="step-body">
+            <h2>Use the AIditor</h2>
+            <p>Open the visual editor at <a href="/aiditor">/aiditor</a> to design and tweak pages with AI assistance.</p>
+          </div>
+        </div>
+
+        <div class="step">
+          <span class="step-number">2</span>
+          <div class="step-body">
+            <h2>Use any coding agent</h2>
+            <p>Work with your favorite AI coding tool — Cursor, Claude Code, or any agent that can edit files.</p>
+          </div>
+        </div>
+
+        <div class="step">
+          <span class="step-number">3</span>
+          <div class="step-body">
+            <h2>Edit the source directly</h2>
+            <p>Pages live in <code>src/pages/</code> — open the jay-html files in any editor and start building.</p>
+          </div>
+        </div>
+      </section>
     </main>
   </body>
 </html>

package/templates/page.ts

@@ -5,7 +5,7 @@ export const page = makeJayStackComponent<PageContract>().withSlowlyRender(async
     return phaseOutput(
         {
             title: 'Welcome to Jay',
-            description: 'Your project is ready. Edit src/pages/page.jay-html to get started.',
+            description: 'Your project is ready — here are three ways to start building.',
         },
         {},
     );

package/templates/tsconfig.json

@@ -1,7 +1,18 @@
 {
-  "extends": "@jay-framework/dev-environment/examples/tsconfig.json",
   "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "DOM"],
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
     "outDir": "dist",
+    "types": [],
   },
   "include": ["src"],
 }