whale-igniter 1.3.1 → 1.3.3

package/dist/commands/createLanding.js

@@ -0,0 +1,437 @@
+import path from "node:path";
+import fs from "fs-extra";
+import { resolveTarget } from "../utils/paths.js";
+import { loadConfig } from "../utils/config.js";
+import { upsertComponent } from "../utils/components.js";
+import { generateWiki } from "../generators/wikiGenerator.js";
+import { ui } from "../ui/index.js";
+const DEFAULT_SECTIONS = ["hero", "features", "proof", "contact"];
+const VALID_SECTIONS = new Set(DEFAULT_SECTIONS);
+export async function createLandingCommand(options = {}) {
+    const target = resolveTarget();
+    const config = await loadConfig(target);
+    const sections = parseSections(options.sections);
+    if (sections.length === 0) {
+        console.log(ui.fail("No valid sections selected. Use hero,features,proof,contact."));
+        process.exitCode = 1;
+        return;
+    }
+    const outDir = options.outDir ?? "src";
+    const htmlRel = path.join(outDir, "index.html").replace(/\\/g, "/");
+    const cssRel = path.join(outDir, "styles.css").replace(/\\/g, "/");
+    const htmlAbs = path.join(target, htmlRel);
+    const cssAbs = path.join(target, cssRel);
+    const existing = [];
+    if (await fs.pathExists(htmlAbs))
+        existing.push(htmlRel);
+    if (await fs.pathExists(cssAbs))
+        existing.push(cssRel);
+    if (existing.length > 0 && !options.force) {
+        console.log(ui.fail(`${existing.map((f) => ui.path(f)).join(", ")} already exists. Use --force to overwrite.`));
+        process.exitCode = 1;
+        return;
+    }
+    if (config.stack && config.stack !== "css") {
+        console.log(ui.warn(`Project stack is ${ui.code(config.stack)}; generating portable HTML/CSS anyway.`));
+    }
+    await fs.ensureDir(path.dirname(htmlAbs));
+    const grid = config.foundations?.grid ?? 8;
+    const controlRadius = config.foundations?.radius?.control ?? 2;
+    const containerRadius = config.foundations?.radius?.container ?? 4;
+    const projectName = config.projectName ?? "Whale Landing";
+    await fs.writeFile(htmlAbs, renderHtml(projectName, sections), "utf8");
+    await fs.writeFile(cssAbs, renderCss({
+        grid,
+        controlRadius,
+        containerRadius,
+        includeProof: sections.includes("proof"),
+        includeContact: sections.includes("contact")
+    }), "utf8");
+    console.log(ui.ok(`Created ${ui.path(htmlRel)}`));
+    console.log(ui.ok(`Created ${ui.path(cssRel)}`));
+    console.log(`  ${ui.kv("sections", sections.join(", "), { keyWidth: 8 })}`);
+    console.log(`  ${ui.kv("grid", `${grid}px`, { keyWidth: 8 })}`);
+    console.log(`  ${ui.kv("radius", `${controlRadius}px controls, ${containerRadius}px containers`, { keyWidth: 8 })}`);
+    if (!options.noRegister) {
+        for (const section of sections) {
+            await upsertComponent(target, {
+                name: sectionName(section),
+                description: sectionDescription(section),
+                category: section === "contact" ? "form" : section === "hero" ? "layout" : "surface",
+                files: [htmlRel, cssRel],
+                variants: section === "contact" ? ["default"] : undefined,
+                states: section === "contact" ? ["focus", "disabled"] : undefined,
+                tokens: ["--color-bg", "--color-surface", "--color-accent", "--space-grid"]
+            });
+        }
+        console.log(ui.muted(`  registered ${sections.length} section(s) in intelligence/components.json`));
+    }
+    if (!options.noSync && !options.noRegister) {
+        await generateWiki(target);
+        console.log(ui.muted(`${ui.glyph.check} AI context updated`));
+    }
+}
+function parseSections(raw) {
+    if (!raw)
+        return DEFAULT_SECTIONS;
+    const seen = new Set();
+    const sections = [];
+    for (const part of raw.split(",")) {
+        const value = part.trim().toLowerCase();
+        if (VALID_SECTIONS.has(value) && !seen.has(value)) {
+            seen.add(value);
+            sections.push(value);
+        }
+    }
+    return sections;
+}
+function sectionName(section) {
+    const map = {
+        hero: "HeroSection",
+        features: "FeatureSection",
+        proof: "SocialProofSection",
+        contact: "ContactForm"
+    };
+    return map[section];
+}
+function sectionDescription(section) {
+    const map = {
+        hero: "Landing hero with headline, value prop and primary CTA.",
+        features: "Feature grid for the landing page offer.",
+        proof: "Social proof band with customer quotes and trust signals.",
+        contact: "Contact form with accessible labels and focus states."
+    };
+    return map[section];
+}
+function titleize(input) {
+    return input
+        .split(/[-_\s]+/)
+        .filter(Boolean)
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(" ");
+}
+function renderHtml(projectName, sections) {
+    const title = titleize(projectName);
+    const blocks = sections.map((section) => renderSection(section, title, sections)).join("\n\n");
+    return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${title}</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+${indent(blocks, 6)}
+    </main>
+  </body>
+</html>
+`;
+}
+function renderSection(section, title, sections) {
+    switch (section) {
+        case "hero": {
+            const ctaTarget = sections.includes("contact")
+                ? "#contact"
+                : sections.includes("features")
+                    ? "#features-title"
+                    : "#";
+            return `<section class="section hero" aria-labelledby="hero-title">
+  <div class="section__inner hero__grid">
+    <div class="hero__copy">
+      <p class="eyebrow">Launch-ready landing</p>
+      <h1 id="hero-title">${title} turns interest into qualified conversations.</h1>
+      <p class="lede">A focused page with clear benefits, trust signals and a path that is easy to scan.</p>
+      <a class="button" href="${ctaTarget}">Start a conversation</a>
+    </div>
+    <div class="hero__panel" aria-label="Landing page highlights">
+      <span>Fast setup</span>
+      <strong>${sections.length} sections</strong>
+      <span>${sections.includes("contact") ? "Contact-ready" : "Ready to extend"}</span>
+    </div>
+  </div>
+</section>`;
+        }
+        case "features":
+            return `<section class="section" aria-labelledby="features-title">
+  <div class="section__inner">
+    <p class="eyebrow">Why it works</p>
+    <h2 id="features-title">Everything a simple landing needs.</h2>
+    <div class="feature-grid">
+      <article class="card">
+        <h3>Clear offer</h3>
+        <p>A direct headline and CTA keep the first screen focused.</p>
+      </article>
+      <article class="card">
+        <h3>Readable proof</h3>
+        <p>Compact testimonials and metrics make trust easy to evaluate.</p>
+      </article>
+      <article class="card">
+        <h3>Low-friction contact</h3>
+        <p>The form asks only for the details needed to continue.</p>
+      </article>
+    </div>
+  </div>
+</section>`;
+        case "proof":
+            return `<section class="section proof" aria-labelledby="proof-title">
+  <div class="section__inner proof__grid">
+    <div>
+      <p class="eyebrow">Social proof</p>
+      <h2 id="proof-title">Built for teams that need momentum.</h2>
+    </div>
+    <blockquote>
+      <p>"The page gave us a cleaner way to explain the offer and capture serious leads."</p>
+      <cite>Marina Silva, Growth Lead</cite>
+    </blockquote>
+  </div>
+</section>`;
+        case "contact":
+            return `<section class="section contact" id="contact" aria-labelledby="contact-title">
+  <div class="section__inner contact__grid">
+    <div>
+      <p class="eyebrow">Contact</p>
+      <h2 id="contact-title">Tell us what you want to launch.</h2>
+      <p class="lede">Share a few details and we will follow up with next steps.</p>
+    </div>
+    <form class="contact-form">
+      <label>
+        Name
+        <input name="name" type="text" autocomplete="name" required />
+      </label>
+      <label>
+        Email
+        <input name="email" type="email" autocomplete="email" required />
+      </label>
+      <label>
+        Message
+        <textarea name="message" rows="4" required></textarea>
+      </label>
+      <button class="button" type="submit">Send message</button>
+    </form>
+  </div>
+</section>`;
+    }
+}
+function renderCss(args) {
+    const { grid, controlRadius, containerRadius, includeProof, includeContact } = args;
+    return `:root {
+  --space-grid: ${grid}px;
+  --color-bg: #f7fafc;
+  --color-text: #111827;
+  --color-muted: #4b5563;
+  --color-surface: #ffffff;
+  --color-accent: #0891b2;
+  --color-accent-strong: #0e7490;
+  --color-border: #d1d5db;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: var(--color-text);
+  background: var(--color-bg);
+}
+
+a {
+  color: inherit;
+}
+
+.section {
+  padding: ${grid * 8}px ${grid * 3}px;
+}
+
+.section__inner {
+  width: 100%;
+  max-width: ${grid * 140}px;
+  margin: 0 auto;
+}
+
+.hero {
+  min-height: ${grid * 80}px;
+  display: grid;
+  align-items: center;
+}
+
+.hero__grid,
+.contact__grid,
+.proof__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(${grid * 36}px, 0.8fr);
+  gap: ${grid * 6}px;
+  align-items: center;
+}
+
+.eyebrow {
+  margin: 0 0 ${grid * 2}px;
+  color: var(--color-accent-strong);
+  font-size: 0.875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  max-width: ${grid * 88}px;
+  margin-bottom: ${grid * 3}px;
+  font-size: clamp(2.5rem, 6vw, 4.5rem);
+  line-height: 1;
+}
+
+h2 {
+  max-width: ${grid * 80}px;
+  margin-bottom: ${grid * 4}px;
+  font-size: clamp(2rem, 4vw, 3rem);
+  line-height: 1.1;
+}
+
+h3 {
+  margin-bottom: ${grid}px;
+  font-size: 1.125rem;
+}
+
+.lede {
+  max-width: ${grid * 72}px;
+  margin-bottom: ${grid * 4}px;
+  color: var(--color-muted);
+  font-size: 1.125rem;
+  line-height: 1.6;
+}
+
+.button {
+  display: inline-flex;
+  min-height: ${grid * 6}px;
+  align-items: center;
+  justify-content: center;
+  padding: ${grid}px ${grid * 3}px;
+  border: 0;
+  border-radius: ${controlRadius}px;
+  background: var(--color-accent);
+  color: var(--color-surface);
+  font: inherit;
+  font-weight: 700;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.button:hover {
+  background: var(--color-accent-strong);
+}
+
+.button:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+  outline: ${controlRadius}px solid var(--color-accent);
+  outline-offset: ${grid / 2}px;
+}
+
+.hero__panel,
+.card,
+blockquote,
+.contact-form {
+  border: 1px solid var(--color-border);
+  border-radius: ${containerRadius}px;
+  background: var(--color-surface);
+  box-shadow: 0 ${grid}px ${grid * 3}px rgba(17, 24, 39, 0.08);
+}
+
+.hero__panel {
+  display: grid;
+  gap: ${grid * 2}px;
+  padding: ${grid * 4}px;
+}
+
+.hero__panel strong {
+  font-size: 2rem;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: ${grid * 3}px;
+}
+
+.card {
+  padding: ${grid * 3}px;
+}
+${includeProof ? proofCss(grid) : ""}
+${includeContact ? contactCss(grid) : ""}
+@media (max-width: ${grid * 96}px) {
+  .hero__grid,
+  .contact__grid,
+  .proof__grid,
+  .feature-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .section {
+    padding: ${grid * 6}px ${grid * 2}px;
+  }
+}
+`;
+}
+function proofCss(grid) {
+    return `
+.proof {
+  background: var(--color-surface);
+}
+
+blockquote {
+  margin: 0;
+  padding: ${grid * 3}px;
+}
+
+blockquote p {
+  margin-bottom: ${grid * 2}px;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+cite {
+  color: var(--color-muted);
+  font-style: normal;
+}
+`;
+}
+function contactCss(grid) {
+    return `
+.contact-form {
+  display: grid;
+  gap: ${grid * 2}px;
+  padding: ${grid * 3}px;
+}
+
+label {
+  display: grid;
+  gap: ${grid}px;
+  font-weight: 700;
+}
+
+input,
+textarea {
+  width: 100%;
+  padding: ${grid}px ${grid * 2}px;
+  border: 1px solid var(--color-border);
+  border-radius: 2px;
+  font: inherit;
+}
+`;
+}
+function indent(input, spaces) {
+    const prefix = " ".repeat(spaces);
+    return input
+        .split("\n")
+        .map((line) => (line.length > 0 ? `${prefix}${line}` : line))
+        .join("\n");
+}

package/dist/commands/ignite.js

@@ -46,7 +46,8 @@ export async function igniteCommand(projectName = "whale-project", options = {})
         };
     }
     // ---- Step 1: scaffold workspace -------------------------------------------
-    const target = await initCommand(projectName, { config, silent: true });
+    const resolvedProjectName = config.projectName ?? projectName;
+    const target = await initCommand(resolvedProjectName, { config, silent: true });
     const targetRel = path.relative(process.cwd(), target) || ".";
     console.log(ui.ok(`Workspace created at ${ui.path(targetRel)}`));
     // ---- Step 1b: record free-text project intent as first decision ------------

package/dist/index.js

@@ -14,6 +14,7 @@ import { adoptCommand } from "./commands/adopt.js";
 import { adoptReviewCommand, adoptStatusCommand } from "./commands/adoptReview.js";
 import { insightsCommand, insightsDriftReviewCommand } from "./commands/insights.js";
 import { createComponentCommand } from "./commands/createComponent.js";
+import { createLandingCommand } from "./commands/createLanding.js";
 import { seleneDescribeCommand, seleneAuditCommand, seleneSuggestCommand, seleneApplyCommand, seleneStatusCommand, seleneCacheClearCommand } from "./commands/selene.js";
 import { mcpServeCommand, mcpConfigCommand } from "./commands/mcp.js";
 import { watchCommand } from "./commands/watch.js";
@@ -172,6 +173,15 @@ create
     .option("--no-register", "Don't add this component to intelligence/components.json")
     .option("--no-sync", "Don't regenerate CLAUDE.md / wiki after creating")
     .action((name, opts) => createComponentCommand(name, opts));
+create
+    .command("landing")
+    .description("Generate a static HTML/CSS landing page using current foundations.")
+    .option("--sections <list>", "Comma-separated sections (hero,features,proof,contact)")
+    .option("--out-dir <path>", "Output directory relative to project root (default: src)")
+    .option("--force", "Overwrite generated files if they already exist")
+    .option("--no-register", "Don't add generated sections to intelligence/components.json")
+    .option("--no-sync", "Don't regenerate CLAUDE.md / wiki after creating")
+    .action((opts) => createLandingCommand(opts));
 const adopt = program
     .command("adopt [target]")
     .description("Scan an existing project and propose components, foundations and decisions.")

package/dist/version.js

@@ -1 +1 @@
-export const PACKAGE_VERSION = "1.3.1";
+export const PACKAGE_VERSION = "1.3.3";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whale-igniter",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "CLI-first operational intelligence. Bootstraps and adopts AI-readable project context so agents like Claude Code, Codex and Cursor understand your design system from the first commit. Includes an MCP server, a file watcher, deterministic insights, and an opt-in AI bridge (Selene).",
   "type": "module",
   "main": "./dist/index.js",