create-fornix 0.0.8 → 0.0.9

package/dist/index.js

@@ -329,6 +329,39 @@ const { title } = Astro.props;${tailwindImport}
     <slot />
   </body>
 </html>
+
+<style is:global>
+  *, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  html {
+    scroll-behavior: smooth;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--color-background, #0f172a);
+    color: var(--color-foreground, #f8fafc);
+    line-height: 1.6;
+    min-height: 100vh;
+  }
+
+  img, video {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+</style>
 `.trim() + "\n";
   if (config.deployTarget === "cloudflare") {
     const wrangler = {
@@ -373,7 +406,7 @@ function generateAstroConfig(config, blocks = []) {
       local: "defineConfig"
     });
     const configObject = module.exports.default.$args[0];
-    if (config.renderMode === "server") {
+    if (config.renderMode === "server" || config.renderMode === "hybrid") {
       configObject.output = "server";
     }
     const adapter = ADAPTER_MAP[config.deployTarget];
@@ -427,22 +460,11 @@ function generateTailwindConfig(config) {
   if (config.cssEngine !== "tailwind") {
     return ok(null);
   }
-  const themeBlock = [
-    "@theme {",
-    "  --color-primary: var(--color-primary);",
-    "  --color-secondary: var(--color-secondary);",
-    "  --color-accent: var(--color-accent);",
-    "  --color-background: var(--color-background);",
-    "  --color-foreground: var(--color-foreground);",
-    "}"
-  ].join("\n");
   const lines = [
     '@import "tailwindcss";',
     '@import "./src/styles/palettes/_current.css";',
     "",
     `@source "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}";`,
-    "",
-    themeBlock,
     ""
   ];
   return ok(lines.join("\n"));
@@ -615,7 +637,7 @@ function generateContentConfig(blocks) {
     'import { defineCollection, z } from "astro:content";'
   ];
   const collections = [];
-  const dataCollections = /* @__PURE__ */ new Map();
+  const dataCollectionNames = /* @__PURE__ */ new Set();
   for (const block of blocks) {
     if (block.collections && block.collections.length > 0) {
       for (const col of block.collections) {
@@ -632,27 +654,15 @@ function generateContentConfig(blocks) {
     }
     const slots = block.ai?.contentSlots;
     if (slots && Object.keys(slots).length > 0) {
-      const schemaFields = Object.entries(slots).map(([name, slot]) => `      ${name}: ${zodTypeForSlot(slot)}.optional(),`).join("\n");
       const subdirectory = TYPE_DIRECTORY[block.type] ?? block.type;
-      if (!dataCollections.has(subdirectory)) {
-        dataCollections.set(subdirectory, []);
-      }
-      dataCollections.get(subdirectory).push(
-        `    // ${block.name}
-    z.object({
-${schemaFields}
-    })`
-      );
+      dataCollectionNames.add(subdirectory);
     }
   }
-  for (const [colName, schemas] of dataCollections.entries()) {
-    const schemaStr = schemas.length === 1 ? schemas[0] : `z.union([
-${schemas.join(",\n")}
-    ])`;
+  for (const colName of dataCollectionNames) {
     collections.push(
       `  "${colName}": defineCollection({
     type: "data",
-    schema: ${schemaStr},
+    schema: z.record(z.unknown()),
   })`
     );
   }
@@ -666,20 +676,6 @@ ${schemas.join(",\n")}
   ];
   return lines.join("\n");
 }
-function zodTypeForSlot(slot) {
-  switch (slot.type) {
-    case "string":
-      return "z.string()";
-    case "number":
-      return "z.number()";
-    case "boolean":
-      return "z.boolean()";
-    case "array":
-      return "z.array(z.unknown())";
-    case "object":
-      return "z.record(z.unknown())";
-  }
-}
 function buildDefaultFromSlots(slots) {
   const content = {};
   for (const [name, slot] of Object.entries(slots)) {
@@ -703,13 +699,13 @@ function defaultValueForType(type) {
 }
 
 // src/scaffold/i18n-wiring.ts
-function wireI18n(config) {
+function wireI18n(config, manifests) {
   const files = {};
   if (config.locales.length < 2) {
     return ok(files);
   }
   files["src/i18n/utils.ts"] = generateI18nUtils(config);
-  files["src/pages/[locale]/index.astro"] = generateLocaleIndexPage(config);
+  files["src/pages/[locale]/index.astro"] = generateLocaleIndexPage(config, manifests ?? []);
   return ok(files);
 }
 function generateI18nUtils(config) {
@@ -744,11 +740,21 @@ export function t<T>(
 }
 `;
 }
-function generateLocaleIndexPage(config) {
+function generateLocaleIndexPage(config, manifests) {
+  const sectionBlocks = manifests.filter((m) => m.type === "section");
+  const imports = [];
+  const tags = [];
+  for (const block of sectionBlocks) {
+    const componentName = block.name.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+    imports.push(`import ${componentName} from '../../../components/sections/${block.name}.astro';`);
+    tags.push(`    <${componentName} />`);
+  }
+  const importSection = imports.length > 0 ? imports.join("\n") + "\n" : "";
+  const blockSection = tags.length > 0 ? "\n" + tags.join("\n") + "\n  " : "\n    <h1>" + config.projectName + "</h1>\n    <p>Locale: {locale}</p>\n  ";
   return `---
-import { locales } from "../../i18n/utils";
-import Layout from "../../layouts/Layout.astro";
-
+import { locales } from "../../../i18n/utils";
+import Layout from "../../../layouts/Layout.astro";
+${importSection}
 export function getStaticPaths() {
   return locales.map((locale) => ({ params: { locale } }));
 }
@@ -756,10 +762,7 @@ export function getStaticPaths() {
 const { locale } = Astro.params;
 ---
 <Layout title="${config.projectName}">
-  <main>
-    <h1>${config.projectName}</h1>
-    <p>Locale: {locale}</p>
-  </main>
+  <main>${blockSection}</main>
 </Layout>
 `;
 }
@@ -875,7 +878,7 @@ function scaffold(input) {
     return err(contentResult.error);
   }
   Object.assign(files, contentResult.value);
-  const i18nResult = wireI18n(config);
+  const i18nResult = wireI18n(config, resolvedManifests);
   if (!isOk(i18nResult)) {
     return err(i18nResult.error);
   }
@@ -1503,7 +1506,7 @@ function manifest(name, overrides = {}) {
 var FIXTURE_MANIFESTS = {
   "hero-gradient": manifest("hero-gradient", {
     category: "hero",
-    conflicts: ["hero-video"],
+    conflicts: ["hero-video", "hero-split"],
     ai: {
       whenToUse: "Landing page hero with gradient background",
       whenNotToUse: "Internal pages",
@@ -1515,7 +1518,8 @@ var FIXTURE_MANIFESTS = {
     }
   }),
   "footer-minimal": manifest("footer-minimal", {
-    category: "footer"
+    category: "footer",
+    conflicts: ["footer-rich"]
   }),
   "cta-simple": manifest("cta-simple", {
     category: "cta"
@@ -1626,17 +1630,96 @@ var FIXTURE_MANIFESTS = {
       }
     }
   }),
-  "hero-video": manifest("hero-video"),
-  "features-bento": manifest("features-bento"),
-  "pricing-table": manifest("pricing-table"),
-  "faq-accordion": manifest("faq-accordion"),
-  "footer-rich": manifest("footer-rich"),
+  "hero-video": manifest("hero-video", {
+    category: "hero",
+    conflicts: ["hero-gradient", "hero-split"],
+    files: [
+      { source: "hero-video.astro", destination: "src/components/sections/hero-video.astro" },
+      { source: "hero-video.css", destination: "src/styles/sections/hero-video.css" }
+    ],
+    ai: {
+      whenToUse: "Hero with background video",
+      whenNotToUse: "Static sites",
+      pairsWith: [],
+      contentSlots: {
+        headline: { type: "string" },
+        subheadline: { type: "string" },
+        ctaText: { type: "string" },
+        ctaHref: { type: "string" },
+        videoUrl: { type: "string" },
+        posterUrl: { type: "string" }
+      }
+    }
+  }),
+  "features-bento": manifest("features-bento", {
+    category: "features",
+    ai: {
+      whenToUse: "Feature showcase in bento grid",
+      whenNotToUse: "Simple pages",
+      pairsWith: [],
+      contentSlots: {
+        headline: { type: "string" },
+        subheadline: { type: "string" },
+        items: { type: "array" }
+      }
+    }
+  }),
+  "pricing-table": manifest("pricing-table", {
+    category: "pricing",
+    conflicts: ["pricing-comparison"],
+    ai: {
+      whenToUse: "Pricing plans display",
+      whenNotToUse: "Free products",
+      pairsWith: [],
+      contentSlots: {
+        headline: { type: "string" },
+        subheadline: { type: "string" },
+        plans: { type: "array" }
+      }
+    }
+  }),
+  "faq-accordion": manifest("faq-accordion", {
+    category: "faq",
+    ai: {
+      whenToUse: "Frequently asked questions",
+      whenNotToUse: "Simple pages",
+      pairsWith: [],
+      contentSlots: {
+        headline: { type: "string" },
+        items: { type: "array" }
+      }
+    }
+  }),
+  "footer-rich": manifest("footer-rich", {
+    category: "footer",
+    conflicts: ["footer-minimal"],
+    ai: {
+      whenToUse: "Multi-column footer with links",
+      whenNotToUse: "Minimal sites",
+      pairsWith: [],
+      contentSlots: {
+        brand: { type: "string" },
+        description: { type: "string" },
+        columns: { type: "array" },
+        copyright: { type: "string" }
+      }
+    }
+  }),
   "testimonials-carousel": manifest("testimonials-carousel"),
   "contact-form": manifest("contact-form"),
-  "hero-split": manifest("hero-split"),
-  "header-transparent": manifest("header-transparent"),
+  "hero-split": manifest("hero-split", {
+    category: "hero",
+    conflicts: ["hero-gradient", "hero-video"]
+  }),
+  "header-transparent": manifest("header-transparent", {
+    category: "header",
+    conflicts: ["header-sticky"]
+  }),
   "cta-newsletter": manifest("cta-newsletter"),
-  "header-sticky": manifest("header-sticky")
+  "header-sticky": manifest("header-sticky", {
+    category: "header",
+    conflicts: ["header-transparent"]
+  })
 };
 var FIXTURE_BLOCK_SOURCES = {
   "hero-gradient": {
@@ -1769,11 +1852,31 @@ export function getStaticPaths() { return [{ params: { slug: '1' } }]; }
 <slot />`,
     "default-content.json": `{ "sidebarLinks": [], "logoutText": "" }`
   },
-  "hero-video": { "hero-video.astro": "<section>Hero Video</section>\n" },
-  "features-bento": { "features-bento.astro": "<section>Features Bento</section>\n" },
-  "pricing-table": { "pricing-table.astro": "<section>Pricing</section>\n" },
-  "faq-accordion": { "faq-accordion.astro": "<section>FAQ</section>\n" },
-  "footer-rich": { "footer-rich.astro": "<section>Footer</section>\n" },
+  "hero-video": {
+    "hero-video.astro": "<section>Hero Video</section>\n",
+    "hero-video.css": ".hero-video { min-height: 80vh; }\n",
+    "default-content.json": '{"headline":"Experience the Future","subheadline":"Immersive experiences.","ctaText":"Get Started","ctaHref":"#","videoUrl":"","posterUrl":""}'
+  },
+  "features-bento": {
+    "features-bento.astro": "<section>Features Bento</section>\n",
+    "features-bento.css": ".features-bento { padding: 4rem 2rem; }\n",
+    "default-content.json": '{"headline":"Features","subheadline":"Everything you need.","items":[{"title":"Fast","description":"Lightning speed."}]}'
+  },
+  "pricing-table": {
+    "pricing-table.astro": "<section>Pricing</section>\n",
+    "pricing-table.css": ".pricing-table { padding: 4rem 2rem; }\n",
+    "default-content.json": '{"headline":"Pricing","subheadline":"Simple pricing.","plans":[{"name":"Free","price":"$0","features":["Basic"]}]}'
+  },
+  "faq-accordion": {
+    "faq-accordion.astro": "<section>FAQ</section>\n",
+    "faq-accordion.css": ".faq-accordion { padding: 4rem 2rem; }\n",
+    "default-content.json": '{"headline":"FAQ","items":[{"question":"How does it work?","answer":"It just works."}]}'
+  },
+  "footer-rich": {
+    "footer-rich.astro": "<section>Footer</section>\n",
+    "footer-rich.css": ".footer-rich { padding: 3rem 2rem; }\n",
+    "default-content.json": '{"brand":"Acme","description":"Building the future.","columns":[],"copyright":"\xA9 2025"}'
+  },
   "testimonials-carousel": { "testimonials-carousel.astro": "<section>Testimonials</section>\n" },
   "contact-form": { "contact-form.astro": "<section>Contact</section>\n" },
   "hero-split": { "hero-split.astro": "<section>Hero Split</section>\n" },
@@ -2067,7 +2170,7 @@ async function runManualFlow(input) {
     message: "Choose a render mode",
     options: [
       { value: "static", label: "Static (SSG)", hint: "Pre-built HTML, fastest" },
-      { value: "hybrid", label: "Hybrid", hint: "Static by default, opt into SSR per page" },
+      { value: "hybrid", label: "Hybrid", hint: "Static + per-page SSR opt-in" },
       { value: "server", label: "Server (SSR)", hint: "Server-rendered on every request" }
     ]
   });
@@ -2285,7 +2388,7 @@ function runPostScaffold(input, callbacks) {
     log(pc2.dim(`    ${config.packageManager} install`));
   }
   log(pc2.dim(`    ${config.packageManager} dev`));
-  log(pc2.dim(`    fornix add <block>`));
+  log(pc2.dim(`    npx create-fornix add <block>`));
   log("");
 }
 function installDependencies(projectDir, packageManager, verbose, log, warn) {
@@ -2378,9 +2481,9 @@ function generateClaudeMd(projectDir, config, blockNames) {
   lines.push("");
   lines.push(`- \`${config.packageManager} dev\` \u2014 start development server`);
   lines.push(`- \`${config.packageManager} build\` \u2014 build for production`);
-  lines.push("- `fornix add <block>` \u2014 add a new block");
-  lines.push("- `fornix remove <block>` \u2014 remove a block");
-  lines.push("- `fornix status` \u2014 show project configuration");
+  lines.push("- `npx create-fornix add <block>` \u2014 add a new block");
+  lines.push("- `npx create-fornix remove <block>` \u2014 remove a block");
+  lines.push("- `npx create-fornix status` \u2014 show project configuration");
   lines.push("");
   lines.push("## File Structure");
   lines.push("");
@@ -3829,8 +3932,9 @@ async function runFlagDrivenMode(args2, manifests, allPalettes) {
 async function runScaffold(config, manifests, allPalettes, dryRun, verbose, skipInstall, skipGit) {
   const spinner2 = p2.spinner();
   spinner2.start("Fetching blocks from registry...");
-  const blockNames = config.blocks.map((b) => b.name);
-  const blockResults = await fetchBlocks(blockNames);
+  const selectedBlockNames = config.blocks.map((b) => b.name);
+  const allBlockNames = preResolveDependencies(selectedBlockNames, manifests);
+  const blockResults = await fetchBlocks(allBlockNames);
   const blockSources = {};
   const blockDefaultContent = {};
   for (const result2 of blockResults) {
@@ -3977,12 +4081,79 @@ function showNoProviderGuide() {
   console.error("    export CLOUDFLARE_ACCOUNT_ID=... CLOUDFLARE_API_TOKEN=...\n");
   console.error(pc3.dim("  Or use manual mode: npx create-fornix --manual\n"));
 }
+function preResolveDependencies(selected, manifests) {
+  const result = /* @__PURE__ */ new Set();
+  function walk(name) {
+    if (result.has(name)) return;
+    const manifest2 = manifests[name];
+    if (!manifest2) {
+      result.add(name);
+      return;
+    }
+    for (const dep of manifest2.requires) {
+      walk(dep);
+    }
+    result.add(name);
+  }
+  for (const name of selected) {
+    walk(name);
+  }
+  return [...result];
+}
 
 // src/cli/commands/add.ts
 import { defineCommand as defineCommand2 } from "citty";
 import pc4 from "picocolors";
 import { readFileSync as readFileSync5, writeFileSync as writeFileSync5, existsSync as existsSync4, mkdirSync as mkdirSync5 } from "fs";
 import { join as join7, dirname as dirname3 } from "path";
+
+// src/scaffold/page-updater.ts
+function blockNameToComponentName(blockName) {
+  return blockName.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function blockNameToImportPath(blockName) {
+  return `../components/sections/${blockName}.astro`;
+}
+function addBlockToPage(pageContent, blockName) {
+  const componentName = blockNameToComponentName(blockName);
+  const importPath = blockNameToImportPath(blockName);
+  if (pageContent.includes(importPath) || pageContent.includes(`import ${componentName}`)) {
+    return pageContent;
+  }
+  const importLine = `import ${componentName} from '${importPath}';`;
+  const componentTag = `    <${componentName} />`;
+  const frontmatterEnd = pageContent.indexOf("---", pageContent.indexOf("---") + 3);
+  if (frontmatterEnd === -1) {
+    return pageContent;
+  }
+  let updated = pageContent.slice(0, frontmatterEnd) + importLine + "\n" + pageContent.slice(frontmatterEnd);
+  const mainCloseIndex = updated.lastIndexOf("</main>");
+  if (mainCloseIndex !== -1) {
+    updated = updated.slice(0, mainCloseIndex) + componentTag + "\n  " + updated.slice(mainCloseIndex);
+  }
+  return updated;
+}
+function removeBlockFromPage(pageContent, blockName) {
+  const componentName = blockNameToComponentName(blockName);
+  const importPath = blockNameToImportPath(blockName);
+  let updated = pageContent;
+  const importRegex = new RegExp(
+    `^\\s*import\\s+${componentName}\\s+from\\s+['"]${escapeRegex(importPath)}['"];?\\s*\\n?`,
+    "m"
+  );
+  updated = updated.replace(importRegex, "");
+  const tagRegex = new RegExp(
+    `^\\s*<${componentName}\\s*/?>\\s*\\n?`,
+    "m"
+  );
+  updated = updated.replace(tagRegex, "");
+  return updated;
+}
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+// src/cli/commands/add.ts
 var addCommand = defineCommand2({
   meta: {
     name: "add",
@@ -4125,6 +4296,20 @@ var addCommand = defineCommand2({
       });
     }
     writeFileSync5(manifestPath, JSON.stringify(manifest2, null, 2) + "\n");
+    const indexPath = join7(cwd, "src/pages/index.astro");
+    if (existsSync4(indexPath)) {
+      let pageContent = readFileSync5(indexPath, "utf-8");
+      for (const name of blocksToAdd) {
+        const bManifest = manifests[name];
+        if (bManifest && bManifest.type === "section") {
+          pageContent = addBlockToPage(pageContent, name);
+        }
+      }
+      writeFileSync5(indexPath, pageContent);
+      if (typedArgs.verbose) {
+        console.log(`  ${pc4.dim("\u270E")} updated index.astro`);
+      }
+    }
     console.log();
     for (const name of blocksToAdd) {
       const isDep = name !== blockName;
@@ -4261,6 +4446,17 @@ var removeCommand = defineCommand3({
     }
     manifest2.blocks = manifest2.blocks.filter((b) => b.name !== blockName);
     writeFileSync6(manifestPath, JSON.stringify(manifest2, null, 2) + "\n");
+    const indexPath = join8(cwd, "src/pages/index.astro");
+    if (existsSync5(indexPath)) {
+      const original = readFileSync6(indexPath, "utf-8");
+      const updated = removeBlockFromPage(original, blockName);
+      if (updated !== original) {
+        writeFileSync6(indexPath, updated);
+        if (typedArgs.verbose) {
+          console.log(`  ${pc5.dim("\u270E")} updated index.astro`);
+        }
+      }
+    }
     console.log();
     console.log(`  ${pc5.red("-")} ${pc5.bold(blockName)} removed`);
     if (dependents.length > 0) {
@@ -4992,7 +5188,7 @@ async function validateContent(input) {
   }
   const schemaShape = {};
   for (const [slotName, slot] of Object.entries(contentSlots)) {
-    schemaShape[slotName] = zodTypeForSlot2(slot.type);
+    schemaShape[slotName] = zodTypeForSlot(slot.type);
   }
   const schema = z5.object(schemaShape);
   const parseResult = schema.safeParse(data);
@@ -5004,7 +5200,7 @@ async function validateContent(input) {
   );
   return ok({ valid: false, errors });
 }
-function zodTypeForSlot2(slotType) {
+function zodTypeForSlot(slotType) {
   switch (slotType) {
     case "string":
       return z5.string();