whale-igniter 1.3.4 → 1.3.5

package/dist/commands/createLanding.js

@@ -5,6 +5,7 @@ import { loadConfig } from "../utils/config.js";
 import { upsertComponent } from "../utils/components.js";
 import { generateWiki } from "../generators/wikiGenerator.js";
 import { ui } from "../ui/index.js";
+import { loadUiTheme, DEFAULT_UI_THEME } from "../themes/registry.js";
 const DEFAULT_SECTIONS = ["hero", "features", "proof", "contact"];
 const VALID_SECTIONS = new Set(DEFAULT_SECTIONS);
 export async function createLandingCommand(options = {}) {
@@ -35,23 +36,26 @@ export async function createLandingCommand(options = {}) {
         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";
+    // Resolve theme: CLI flag → config.theme → DEFAULT_UI_THEME
+    const themeName = options.theme ?? config.theme ?? DEFAULT_UI_THEME;
+    const theme = await loadUiTheme(themeName);
+    if (!theme) {
+        console.log(ui.fail(`Unknown theme '${themeName}'. Run \`whale themes list\`.`));
+        process.exitCode = 1;
+        return;
+    }
     await fs.writeFile(htmlAbs, renderHtml(projectName, sections), "utf8");
-    await fs.writeFile(cssAbs, renderCss({
-        grid,
-        controlRadius,
-        containerRadius,
+    await fs.writeFile(cssAbs, renderCss(theme, {
         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 })}`);
+    console.log(`  ${ui.kv("theme", theme.label, { keyWidth: 8 })}`);
+    console.log(`  ${ui.kv("grid", `${theme.structural.grid}px`, { keyWidth: 8 })}`);
+    console.log(`  ${ui.kv("radius", `${theme.structural.radiusControl}px controls, ${theme.structural.radiusContainer}px containers`, { keyWidth: 8 })}`);
     if (!options.noRegister) {
         for (const section of sections) {
             await upsertComponent(target, {
@@ -214,17 +218,45 @@ function renderSection(section, title, sections) {
 </section>`;
     }
 }
-function renderCss(args) {
-    const { grid, controlRadius, containerRadius, includeProof, includeContact } = args;
+function renderCss(theme, opts) {
+    const { includeProof, includeContact } = opts;
+    const { identity, typography, structural, interaction } = theme;
+    const g = structural.grid;
+    const focusStyles = interaction.focus === "ring"
+        ? `box-shadow: 0 0 0 3px var(--color-accent);
+  outline: none;`
+        : `outline: var(--border-width) solid var(--color-accent);
+  outline-offset: ${g / 2}px;`;
     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;
+  /* Identity */
+  --color-bg: ${identity.bg};
+  --color-surface: ${identity.surface};
+  --color-text: ${identity.text};
+  --color-muted: ${identity.muted};
+  --color-border: ${identity.border};
+  --color-accent: ${identity.accent};
+  --color-accent-strong: ${identity.accentStrong};
+  --color-on-accent: ${identity.onAccent};
+
+  /* Typography */
+  --font-display: ${typography.display};
+  --font-body: ${typography.body};
+  --font-mono: ${typography.mono};
+
+  /* Structure */
+  --space-grid: ${structural.grid}px;
+  --radius-control: ${structural.radiusControl}px;
+  --radius-container: ${structural.radiusContainer}px;
+  --border-width: ${structural.borderWidth}px;
+  --shadow: ${structural.shadow};
+
+  /* Motion */
+  --motion-duration: ${interaction.duration}ms;
+  --motion-ease: ${interaction.easing};
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * { transition: none !important; }
 }
 
 * {
@@ -233,7 +265,7 @@ function renderCss(args) {
 
 body {
   margin: 0;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: var(--font-body);
   color: var(--color-text);
   background: var(--color-bg);
 }
@@ -243,17 +275,17 @@ a {
 }
 
 .section {
-  padding: ${grid * 8}px ${grid * 3}px;
+  padding: calc(var(--space-grid) * 8) calc(var(--space-grid) * 3);
 }
 
 .section__inner {
   width: 100%;
-  max-width: ${grid * 140}px;
+  max-width: calc(var(--space-grid) * 140);
   margin: 0 auto;
 }
 
 .hero {
-  min-height: ${grid * 80}px;
+  min-height: calc(var(--space-grid) * 80);
   display: grid;
   align-items: center;
 }
@@ -262,13 +294,13 @@ a {
 .contact__grid,
 .proof__grid {
   display: grid;
-  grid-template-columns: minmax(0, 1.2fr) minmax(${grid * 36}px, 0.8fr);
-  gap: ${grid * 6}px;
+  grid-template-columns: minmax(0, 1.2fr) minmax(calc(var(--space-grid) * 36), 0.8fr);
+  gap: calc(var(--space-grid) * 6);
   align-items: center;
 }
 
 .eyebrow {
-  margin: 0 0 ${grid * 2}px;
+  margin: 0 0 calc(var(--space-grid) * 2);
   color: var(--color-accent-strong);
   font-size: 0.875rem;
   font-weight: 700;
@@ -283,27 +315,29 @@ p {
 }
 
 h1 {
-  max-width: ${grid * 88}px;
-  margin-bottom: ${grid * 3}px;
+  max-width: calc(var(--space-grid) * 88);
+  margin-bottom: calc(var(--space-grid) * 3);
+  font-family: var(--font-display);
   font-size: clamp(2.5rem, 6vw, 4.5rem);
   line-height: 1;
 }
 
 h2 {
-  max-width: ${grid * 80}px;
-  margin-bottom: ${grid * 4}px;
+  max-width: calc(var(--space-grid) * 80);
+  margin-bottom: calc(var(--space-grid) * 4);
+  font-family: var(--font-display);
   font-size: clamp(2rem, 4vw, 3rem);
   line-height: 1.1;
 }
 
 h3 {
-  margin-bottom: ${grid}px;
+  margin-bottom: var(--space-grid);
   font-size: 1.125rem;
 }
 
 .lede {
-  max-width: ${grid * 72}px;
-  margin-bottom: ${grid * 4}px;
+  max-width: calc(var(--space-grid) * 72);
+  margin-bottom: calc(var(--space-grid) * 4);
   color: var(--color-muted);
   font-size: 1.125rem;
   line-height: 1.6;
@@ -311,18 +345,19 @@ h3 {
 
 .button {
   display: inline-flex;
-  min-height: ${grid * 6}px;
+  min-height: calc(var(--space-grid) * 6);
   align-items: center;
   justify-content: center;
-  padding: ${grid}px ${grid * 3}px;
+  padding: var(--space-grid) calc(var(--space-grid) * 3);
   border: 0;
-  border-radius: ${controlRadius}px;
+  border-radius: var(--radius-control);
   background: var(--color-accent);
-  color: var(--color-surface);
+  color: var(--color-on-accent);
   font: inherit;
   font-weight: 700;
   text-decoration: none;
   cursor: pointer;
+  transition: background var(--motion-duration) var(--motion-ease);
 }
 
 .button:hover {
@@ -332,24 +367,23 @@ h3 {
 .button:focus-visible,
 input:focus-visible,
 textarea:focus-visible {
-  outline: ${controlRadius}px solid var(--color-accent);
-  outline-offset: ${grid / 2}px;
+  ${focusStyles}
 }
 
 .hero__panel,
 .card,
 blockquote,
 .contact-form {
-  border: 1px solid var(--color-border);
-  border-radius: ${containerRadius}px;
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-container);
   background: var(--color-surface);
-  box-shadow: 0 ${grid}px ${grid * 3}px rgba(17, 24, 39, 0.08);
+  box-shadow: var(--shadow);
 }
 
 .hero__panel {
   display: grid;
-  gap: ${grid * 2}px;
-  padding: ${grid * 4}px;
+  gap: calc(var(--space-grid) * 2);
+  padding: calc(var(--space-grid) * 4);
 }
 
 .hero__panel strong {
@@ -359,15 +393,15 @@ blockquote,
 .feature-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: ${grid * 3}px;
+  gap: calc(var(--space-grid) * 3);
 }
 
 .card {
-  padding: ${grid * 3}px;
+  padding: calc(var(--space-grid) * 3);
 }
-${includeProof ? proofCss(grid) : ""}
-${includeContact ? contactCss(grid) : ""}
-@media (max-width: ${grid * 96}px) {
+${includeProof ? proofCss() : ""}
+${includeContact ? contactCss() : ""}
+@media (max-width: calc(var(--space-grid) * 96)) {
   .hero__grid,
   .contact__grid,
   .proof__grid,
@@ -376,12 +410,12 @@ ${includeContact ? contactCss(grid) : ""}
   }
 
   .section {
-    padding: ${grid * 6}px ${grid * 2}px;
+    padding: calc(var(--space-grid) * 6) calc(var(--space-grid) * 2);
   }
 }
 `;
 }
-function proofCss(grid) {
+function proofCss() {
     return `
 .proof {
   background: var(--color-surface);
@@ -389,11 +423,11 @@ function proofCss(grid) {
 
 blockquote {
   margin: 0;
-  padding: ${grid * 3}px;
+  padding: calc(var(--space-grid) * 3);
 }
 
 blockquote p {
-  margin-bottom: ${grid * 2}px;
+  margin-bottom: calc(var(--space-grid) * 2);
   font-size: 1.25rem;
   line-height: 1.5;
 }
@@ -404,26 +438,26 @@ cite {
 }
 `;
 }
-function contactCss(grid) {
+function contactCss() {
     return `
 .contact-form {
   display: grid;
-  gap: ${grid * 2}px;
-  padding: ${grid * 3}px;
+  gap: calc(var(--space-grid) * 2);
+  padding: calc(var(--space-grid) * 3);
 }
 
 label {
   display: grid;
-  gap: ${grid}px;
+  gap: var(--space-grid);
   font-weight: 700;
 }
 
 input,
 textarea {
   width: 100%;
-  padding: ${grid}px ${grid * 2}px;
-  border: 1px solid var(--color-border);
-  border-radius: 2px;
+  padding: var(--space-grid) calc(var(--space-grid) * 2);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-control);
   font: inherit;
 }
 `;

package/dist/commands/ignite.js

@@ -10,6 +10,7 @@ import { getAiAvailability } from "../utils/aiAvailability.js";
 import { mapWizardAnswers, suggestUiCategories } from "../utils/wizardMapping.js";
 import { ui } from "../ui/index.js";
 import { PACKAGE_VERSION } from "../version.js";
+import { splash } from "../ui/splash.js";
 const OPINIONATED_PACKS = ["lighthouse", "forge", "scribe"];
 const MINIMAL_PACKS = ["lighthouse"];
 export async function igniteCommand(projectName = "whale-project", options = {}) {
@@ -19,7 +20,8 @@ export async function igniteCommand(projectName = "whale-project", options = {})
             ? "minimal"
             : "opinionated";
     console.log();
-    console.log(ui.header("Whale Igniter", `ignite • ${mode}`));
+    console.log(splash());
+    console.log(ui.muted(`ignite • ${mode}`));
     console.log();
     // ---- Resolve config based on mode -----------------------------------------
     let config;

package/dist/commands/themes.js

@@ -0,0 +1,20 @@
+import { ui } from "../ui/index.js";
+import { listUiThemes } from "../themes/registry.js";
+export async function themesListCommand() {
+    const themes = await listUiThemes();
+    if (themes.length === 0) {
+        console.log(ui.warn("No UI themes found."));
+        return;
+    }
+    for (const theme of themes) {
+        console.log();
+        console.log(ui.section(theme.label));
+        console.log(ui.muted(theme.description));
+        console.log(`  ${ui.kv("accent", theme.identity.accent, { keyWidth: 10 })}`);
+        console.log(`  ${ui.kv("radius", `${theme.structural.radiusControl}px / ${theme.structural.radiusContainer}px`, { keyWidth: 10 })}`);
+        console.log(`  ${ui.kv("mode", theme.identity.mode, { keyWidth: 10 })}`);
+        console.log(`  ${ui.kv("slug", theme.name, { keyWidth: 10 })}`);
+    }
+    console.log();
+    console.log(ui.muted(`Use --theme <slug> with \`whale create landing\` to apply a theme.`));
+}

package/dist/index.js

@@ -15,6 +15,7 @@ import { adoptReviewCommand, adoptStatusCommand } from "./commands/adoptReview.j
 import { insightsCommand, insightsDriftReviewCommand } from "./commands/insights.js";
 import { createComponentCommand } from "./commands/createComponent.js";
 import { createLandingCommand } from "./commands/createLanding.js";
+import { themesListCommand } from "./commands/themes.js";
 import { updateTokensCommand } from "./commands/updateTokens.js";
 import { seleneDescribeCommand, seleneAuditCommand, seleneSuggestCommand, seleneApplyCommand, seleneStatusCommand, seleneCacheClearCommand } from "./commands/selene.js";
 import { mcpServeCommand, mcpConfigCommand } from "./commands/mcp.js";
@@ -182,6 +183,7 @@ create
     .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")
+    .option("--theme <name>", "Visual theme for the generated UI (see `whale themes list`)")
     .action((opts) => createLandingCommand(opts));
 const adopt = program
     .command("adopt [target]")
@@ -294,4 +296,11 @@ program
     .description("Show what changed in intelligence stores since a git ref.")
     .option("--since <ref>", "Git ref to compare against (default: HEAD~1)", "HEAD~1")
     .action((target, opts) => changesCommand({ since: opts.since, target }));
+const themes = program
+    .command("themes")
+    .description("Browse local UI themes for generated output.");
+themes
+    .command("list")
+    .description("List available UI themes.")
+    .action(() => themesListCommand());
 program.parse();

package/dist/themes/registry.js

@@ -0,0 +1,49 @@
+import path from "node:path";
+import fs from "fs-extra";
+import { fileURLToPath } from "node:url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+// Resolve themes/ relative to compiled output (dist/themes/ → ../../themes)
+const THEMES_DIR = path.resolve(__dirname, "../../themes");
+export const DEFAULT_UI_THEME = "atlas";
+function isValidUiTheme(obj) {
+    if (!obj || typeof obj !== "object")
+        return false;
+    const t = obj;
+    return (typeof t.name === "string" &&
+        typeof t.label === "string" &&
+        typeof t.description === "string" &&
+        typeof t.identity === "object" && t.identity !== null &&
+        typeof t.typography === "object" && t.typography !== null &&
+        typeof t.structural === "object" && t.structural !== null &&
+        typeof t.interaction === "object" && t.interaction !== null);
+}
+export async function listUiThemes() {
+    const files = await fs.readdir(THEMES_DIR).catch(() => []);
+    const themes = [];
+    for (const file of files) {
+        if (!file.endsWith(".json"))
+            continue;
+        try {
+            const raw = await fs.readJson(path.join(THEMES_DIR, file));
+            if (isValidUiTheme(raw))
+                themes.push(raw);
+        }
+        catch {
+            // skip malformed packs
+        }
+    }
+    return themes.sort((a, b) => a.label.localeCompare(b.label));
+}
+export async function loadUiTheme(name) {
+    const filePath = path.join(THEMES_DIR, `${name}.json`);
+    if (!(await fs.pathExists(filePath)))
+        return null;
+    try {
+        const raw = await fs.readJson(filePath);
+        return isValidUiTheme(raw) ? raw : null;
+    }
+    catch {
+        return null;
+    }
+}

package/dist/themes/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/splash.js

@@ -0,0 +1,36 @@
+/**
+ * splash.ts — capability-gated welcome banner for `whale ignite`.
+ *
+ * Three tiers:
+ *   1. Full (color + unicode)  — wordmark with accent color + glyphs
+ *   2. Unicode, no color       — same layout, no color
+ *   3. Plain                   — single ASCII line, no glyphs
+ *
+ * Rules: no chalk imports, no direct env var reads, no "premium".
+ * Uses `capabilities()` from capabilities.js and `ui` atoms.
+ */
+import { capabilities } from "./capabilities.js";
+import { accent, muted, emphasis } from "./atoms.js";
+import { PACKAGE_VERSION } from "../version.js";
+const TAGLINE = "map the project before the agent moves";
+export function splash() {
+    const { color, unicode } = capabilities();
+    const isPlain = !unicode;
+    // Tier 3 — plain ASCII, single line
+    if (isPlain) {
+        return `WHALE IGNITER v${PACKAGE_VERSION} — ${TAGLINE}`;
+    }
+    // Tier 1 & 2 — unicode layout (color applied via atom functions when available)
+    const whale = "◆ ～";
+    const wordmarkWhale = color ? accent("WHALE") : "WHALE";
+    const wordmarkIgniter = color ? emphasis("IGNITER") : "IGNITER";
+    const version = color ? muted(`v${PACKAGE_VERSION}`) : `v${PACKAGE_VERSION}`;
+    const tag = color ? muted(TAGLINE) : TAGLINE;
+    const rule = "─".repeat(36);
+    return [
+        `${whale}`,
+        `${wordmarkWhale} ${wordmarkIgniter}  ${version}`,
+        tag,
+        rule
+    ].join("\n");
+}

package/dist/version.js

@@ -1 +1 @@
-export const PACKAGE_VERSION = "1.3.4";
+export const PACKAGE_VERSION = "1.3.5";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whale-igniter",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "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",
@@ -11,6 +11,7 @@
     "dist",
     "brand",
     "packs",
+    "themes",
     "ui-references",
     "README.md",
     "LICENSE",

package/themes/atlas.json

@@ -0,0 +1,34 @@
+{
+  "name": "atlas",
+  "label": "Atlas",
+  "description": "Enterprise minimal: dense, neutral, hairline borders.",
+  "identity": {
+    "mode": "light",
+    "bg": "#FFFFFF",
+    "surface": "#FFFFFF",
+    "text": "#0F172A",
+    "muted": "#475569",
+    "border": "#E2E8F0",
+    "accent": "#334155",
+    "accentStrong": "#0F172A",
+    "onAccent": "#FFFFFF"
+  },
+  "typography": {
+    "display": "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif",
+    "body": "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif",
+    "mono": "ui-monospace, SFMono-Regular, monospace",
+    "scaleRatio": 1.2
+  },
+  "structural": {
+    "grid": 8,
+    "radiusControl": 2,
+    "radiusContainer": 4,
+    "borderWidth": 1,
+    "shadow": "none"
+  },
+  "interaction": {
+    "duration": 120,
+    "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "focus": "ring"
+  }
+}

package/themes/aurora.json

@@ -0,0 +1,34 @@
+{
+  "name": "aurora",
+  "label": "Aurora",
+  "description": "Modern SaaS: soft, airy, friendly, generous whitespace.",
+  "identity": {
+    "mode": "light",
+    "bg": "#FBFAFF",
+    "surface": "#FFFFFF",
+    "text": "#26215C",
+    "muted": "#534AB7",
+    "border": "#E4DFFA",
+    "accent": "#6D5AE6",
+    "accentStrong": "#534AB7",
+    "onAccent": "#FFFFFF"
+  },
+  "typography": {
+    "display": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
+    "body": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
+    "mono": "ui-monospace, SFMono-Regular, monospace",
+    "scaleRatio": 1.25
+  },
+  "structural": {
+    "grid": 8,
+    "radiusControl": 6,
+    "radiusContainer": 8,
+    "borderWidth": 1,
+    "shadow": "0 8px 24px rgba(109, 90, 230, 0.12)"
+  },
+  "interaction": {
+    "duration": 200,
+    "easing": "cubic-bezier(0.16, 1, 0.3, 1)",
+    "focus": "ring"
+  }
+}

package/themes/harbor.json

@@ -0,0 +1,34 @@
+{
+  "name": "harbor",
+  "label": "Harbor",
+  "description": "The Whale brand: confident, editorial, royal blue on paper.",
+  "identity": {
+    "mode": "light",
+    "bg": "#F2ECE1",
+    "surface": "#FFFFFF",
+    "text": "#003087",
+    "muted": "#3A4D7A",
+    "border": "#C9D6F2",
+    "accent": "#0034D3",
+    "accentStrong": "#003087",
+    "onAccent": "#F2ECE1"
+  },
+  "typography": {
+    "display": "\"Special Elite\", ui-monospace, SFMono-Regular, monospace",
+    "body": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, monospace",
+    "scaleRatio": 1.25
+  },
+  "structural": {
+    "grid": 8,
+    "radiusControl": 2,
+    "radiusContainer": 4,
+    "borderWidth": 1,
+    "shadow": "0 8px 24px rgba(0, 48, 135, 0.10)"
+  },
+  "interaction": {
+    "duration": 160,
+    "easing": "cubic-bezier(0.2, 0, 0, 1)",
+    "focus": "outline"
+  }
+}