create-jay 0.21.0 → 0.22.1

package/dist/index.js

@@ -50,14 +50,6 @@ var PLUGINS = [
     checked: false,
     isDep: true
   },
-  {
-    name: "@jay-framework/wix-cart",
-    label: "Wix Cart",
-    description: "Shopping cart: add/remove items, checkout, order summary",
-    group: "Wix",
-    checked: false,
-    isDep: true
-  },
   {
     name: "@jay-framework/wix-members",
     label: "Wix Members",
@@ -89,51 +81,37 @@ var PLUGINS = [
     group: "Wix",
     checked: false,
     isDep: true
-  },
-  {
-    name: "@jay-framework/wix-server-client",
-    label: "Wix Server Client",
-    description: "Server-side Wix API client: authentication, API access",
-    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
+function validateProjectName(value) {
+  const name = value.trim();
+  if (!name)
+    return "Project name is required";
+  if (name.length < 3)
+    return "Project name must be at least 3 characters";
+  if (!/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(name)) {
+    return "Use lowercase letters, numbers, and hyphens \u2014 must start and end with a letter or number (e.g., my-store)";
+  }
+  return true;
+}
 async function runPrompts() {
   const name = await input({
     message: "Project name:",
-    validate: (value) => {
-      if (!value.trim())
-        return "Project name is required";
-      if (!/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(value.trim())) {
-        return "Use lowercase letters, numbers, and hyphens (e.g., my-store)";
-      }
-      return true;
-    }
+    validate: validateProjectName
   });
   const groups = /* @__PURE__ */ new Map();
   for (const plugin of PLUGINS) {
@@ -143,7 +121,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 +132,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 +159,47 @@ 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 };
   for (const plugin of selectedPlugins) {
     if (plugin.isDep)
       deps[plugin.name] = "latest";
   }
-  const devDeps = {};
-  for (const dep of CORE_DEV_DEPS) {
-    devDeps[dep] = "latest";
-  }
+  const hasWixPlugins = selectedPlugins.some((p) => p.name.startsWith("@jay-framework/wix-"));
+  const hasWixStores = selectedPlugins.some((p) => p.name === "@jay-framework/wix-stores");
+  if (hasWixPlugins)
+    deps["@jay-framework/wix-server-client"] = "latest";
+  if (hasWixStores)
+    deps["@jay-framework/wix-cart"] = "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 +216,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 +238,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,39 +258,84 @@ function detectPackageManager() {
 function run(cmd, cwd) {
   execSync(cmd, { cwd, stdio: "inherit" });
 }
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const result = {};
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "--name" && args[i + 1]) {
+      result.name = args[++i];
+    } else if (args[i] === "--plugins" && args[i + 1]) {
+      result.plugins = args[++i];
+    }
+  }
+  return result;
+}
 async function main() {
   const pm = detectPackageManager();
+  const cliArgs = parseArgs();
+  const isNonInteractive = !!(cliArgs.name && cliArgs.plugins !== void 0);
   console.log("");
   console.log(chalk.bold("  Create Jay Stack Project"));
   console.log("");
-  const config = await runPrompts();
-  const projectDir = path2.resolve(process.cwd(), config.name);
+  let name;
+  let selectedPlugins;
+  if (isNonInteractive) {
+    name = cliArgs.name;
+    const nameError = validateProjectName(name);
+    if (nameError !== true) {
+      console.error(chalk.red(`  Error: ${nameError}`));
+      process.exit(1);
+    }
+    const requested = cliArgs.plugins ? cliArgs.plugins.split(",").map((s) => s.trim()) : [];
+    selectedPlugins = PLUGINS.filter(
+      (p) => requested.includes(p.name) || requested.includes(p.label.toLowerCase())
+    );
+  } else {
+    const config = await runPrompts();
+    name = config.name;
+    selectedPlugins = config.selectedPlugins;
+  }
+  const projectDir = path2.resolve(process.cwd(), name);
   console.log("");
-  console.log(`Creating project in ${chalk.cyan(`./${config.name}`)}...`);
-  scaffoldProject(projectDir, config.name, config.selectedPlugins);
+  console.log(`Creating project in ${chalk.cyan(`./${name}`)}...`);
+  scaffoldProject(projectDir, name, 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"));
   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);
+    const setupCmd = isNonInteractive ? "npx jay-stack-cli setup" : "npx jay-stack-cli setup --interactive";
+    run(setupCmd, projectDir);
     console.log(chalk.green("  \u2713 Plugin setup complete"));
   } catch {
-    console.log(chalk.yellow("  \u26A0 Setup incomplete (can run later with: jay-stack setup)"));
+    if (!isNonInteractive) {
+      try {
+        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: npm run setup)"));
+      }
+    } else {
+      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("");
   console.log(chalk.bold("  Ready!"));
   console.log("");
-  console.log(`  ${chalk.cyan(`cd ${config.name}`)}`);
+  console.log(`  ${chalk.cyan(`cd ${name}`)}`);
   console.log(`  ${chalk.cyan(runCmd)}`);
   console.log("");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-jay",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "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/jay-skill.md

@@ -15,7 +15,7 @@ Jay Stack is a full-stack framework. Plugins provide headless components (data +
 yarn jay-stack-cli setup
 ```
 
-This configures plugins — creates config templates, validates credentials, connects to external services. Run this once when starting a new project or after adding a plugin.
+This configures plugins interactively — prompts for API keys and credentials, creates config files, validates services. Run this once when starting a new project or after adding a plugin. Use `--no-interactive` in CI/scripts to create config templates without prompting.
 
 ### Step 2: Generate the agent kit
 

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"],
 }