bsmnt 0.0.2 → 0.1.1

package/{src → packages/create-basement-app/src}/mergers/index.js

@@ -1,10 +1,8 @@
-// src/mergers/index.js
+// packages/create-basement-app/src/mergers/index.js
 
-import os from "node:os";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import fs from "fs-extra";
-import tiged from "tiged";
 import { getCmsConfig, getLayerConfig } from "./config.js";
 
 const __filename = fileURLToPath(import.meta.url);
@@ -17,16 +15,17 @@ const __dirname = path.dirname(__filename);
 const CMS_MERGERS = {
 	sanity: {
 		"app/layout.tsx": () =>
-			import("./layout-merger.js").then((m) => m.mergeLayout),
+			import("../../integrations/sanity/mergers/layout-merger.js").then(
+				(m) => m.mergeLayout,
+			),
 		"app/sitemap.ts": () =>
-			import("./sitemap-merger.js").then((m) => m.mergeSitemap),
-		"lib/integrations/check-integration.ts": () =>
-			import("./check-integration-merger.js").then(
-				(m) => m.mergeCheckIntegration,
+			import("../../integrations/sanity/mergers/sitemap-merger.js").then(
+				(m) => m.mergeSitemap,
 			),
-	},
-	basehub: {
-		// BaseHub mergers would go here when implemented
+		"lib/integrations/check-integration.ts": () =>
+			import(
+				"../../integrations/sanity/mergers/check-integration-merger.js"
+			).then((m) => m.mergeCheckIntegration),
 	},
 };
 
@@ -90,7 +89,7 @@ async function getMerger(cms, basePath) {
 /**
  * Inject CMS integration using smart merge
  * @param {string} targetDir - The project directory
- * @param {string} cms - The CMS name (e.g., 'sanity', 'basehub')
+ * @param {string} cms - The CMS name (e.g., 'sanity')
  * @param {object} spinner - Ora spinner for progress
  * @returns {object} Results of the merge operation
  */
@@ -108,12 +107,12 @@ export async function injectIntegration(targetDir, cms, spinner) {
 	if (!cmsConfig) {
 		results.failed.push({
 			path: cms,
-			error: `CMS "${cms}" is not supported. Supported: sanity, basehub`,
+			error: `CMS "${cms}" is not supported. Supported: sanity`,
 		});
 		return results;
 	}
 
-	const { branch, mergeFiles, additivePaths } = cmsConfig;
+	const { mergeFiles, additivePaths } = cmsConfig;
 
 	// Detect if project uses src/ prefix (e.g., src/app/ instead of app/)
 	const pathPrefix = await detectPathPrefix(targetDir);
@@ -121,111 +120,103 @@ export async function injectIntegration(targetDir, cms, spinner) {
 		spinner.text = `Detected src/ directory structure...`;
 	}
 
-	// 1. Clone integration to temp directory
-	const tempDir = path.join(os.tmpdir(), `integration-${Date.now()}`);
-
-	try {
-		spinner.text = `Downloading ${cms} integration...`;
+	// Resolve local integration files directory
+	const integrationDir = path.resolve(
+		__dirname,
+		"../../integrations",
+		cms,
+		"files",
+	);
 
-		// Use CMS-specific branch
-		const integrationRepoPath = `github:basementstudio/basement-cli/integrations/${cms}#${branch}`;
-		const emitter = tiged(integrationRepoPath, {
-			cache: false,
-			force: true,
-			mode: "git",
+	if (!(await fs.pathExists(integrationDir))) {
+		results.failed.push({
+			path: cms,
+			error: `Integration directory not found: ${integrationDir}`,
 		});
+		return results;
+	}
 
-		await emitter.clone(tempDir);
-
-		// 2. Copy additive files/directories (CMS-specific paths)
-		spinner.text = `Adding ${cms} files...`;
+	// 1. Copy additive files/directories (CMS-specific paths)
+	spinner.text = `Adding ${cms} files...`;
 
-		for (const additivePath of additivePaths) {
-			const src = path.join(tempDir, additivePath);
-			// Transform destination path based on project structure
-			const transformedPath = transformPath(additivePath, pathPrefix);
-			const dest = path.join(targetDir, transformedPath);
+	for (const additivePath of additivePaths) {
+		const src = path.join(integrationDir, additivePath);
+		// Transform destination path based on project structure
+		const transformedPath = transformPath(additivePath, pathPrefix);
+		const dest = path.join(targetDir, transformedPath);
 
-			try {
-				if (await fs.pathExists(src)) {
-					await fs.copy(src, dest, { overwrite: false });
-					results.copied.push(transformedPath);
-				}
-			} catch (error) {
-				results.failed.push({ path: transformedPath, error: error.message });
+		try {
+			if (await fs.pathExists(src)) {
+				await fs.copy(src, dest, { overwrite: false });
+				results.copied.push(transformedPath);
 			}
+		} catch (error) {
+			results.failed.push({ path: transformedPath, error: error.message });
 		}
+	}
 
-		// 3. Smart merge files that exist in both (CMS-specific mergers)
-		if (mergeFiles.length > 0) {
-			spinner.text = `Merging ${cms} integration...`;
-
-			for (const mergeFile of mergeFiles) {
-				// Transform path for the target project
-				const transformedPath = transformPath(mergeFile, pathPrefix);
-				const templateFile = path.join(targetDir, transformedPath);
-				const integrationFile = path.join(tempDir, mergeFile);
-
-				try {
-					// Check if template file exists
-					if (!(await fs.pathExists(templateFile))) {
-						// Template doesn't have this file - copy from integration
-						if (await fs.pathExists(integrationFile)) {
-							await fs.ensureDir(path.dirname(templateFile));
-							await fs.copy(integrationFile, templateFile);
-							results.copied.push(transformedPath);
-						} else {
-							results.skipped.push({
-								path: transformedPath,
-								reason: "Not in integration",
-							});
-						}
-						continue;
-					}
+	// 2. Smart merge files that exist in both (CMS-specific mergers)
+	if (mergeFiles.length > 0) {
+		spinner.text = `Merging ${cms} integration...`;
+
+		for (const mergeFile of mergeFiles) {
+			// Transform path for the target project
+			const transformedPath = transformPath(mergeFile, pathPrefix);
+			const templateFile = path.join(targetDir, transformedPath);
+			const integrationFile = path.join(integrationDir, mergeFile);
 
-					// Check if integration file exists
-					if (!(await fs.pathExists(integrationFile))) {
+			try {
+				// Check if template file exists
+				if (!(await fs.pathExists(templateFile))) {
+					// Template doesn't have this file - copy from integration
+					if (await fs.pathExists(integrationFile)) {
+						await fs.ensureDir(path.dirname(templateFile));
+						await fs.copy(integrationFile, templateFile);
+						results.copied.push(transformedPath);
+					} else {
 						results.skipped.push({
 							path: transformedPath,
 							reason: "Not in integration",
 						});
-						continue;
 					}
+					continue;
+				}
 
-					// Get the CMS-specific merger function (use base path for lookup)
-					const merger = await getMerger(cms, mergeFile);
+				// Check if integration file exists
+				if (!(await fs.pathExists(integrationFile))) {
+					results.skipped.push({
+						path: transformedPath,
+						reason: "Not in integration",
+					});
+					continue;
+				}
 
-					if (merger) {
-						const result = await merger(templateFile, {
-							targetDir,
-							pathPrefix,
-						});
-						if (result.skipped) {
-							results.skipped.push({
-								path: transformedPath,
-								reason: result.reason,
-							});
-						} else {
-							results.merged.push(transformedPath);
-						}
-					} else {
+				// Get the CMS-specific merger function (use base path for lookup)
+				const merger = await getMerger(cms, mergeFile);
+
+				if (merger) {
+					const result = await merger(templateFile, {
+						targetDir,
+						pathPrefix,
+					});
+					if (result.skipped) {
 						results.skipped.push({
 							path: transformedPath,
-							reason: `No merger for ${cms}`,
+							reason: result.reason,
 						});
+					} else {
+						results.merged.push(transformedPath);
 					}
-				} catch (error) {
-					results.failed.push({ path: transformedPath, error: error.message });
+				} else {
+					results.skipped.push({
+						path: transformedPath,
+						reason: `No merger for ${cms}`,
+					});
 				}
+			} catch (error) {
+				results.failed.push({ path: transformedPath, error: error.message });
 			}
 		}
-	} finally {
-		// 4. Cleanup temp directory
-		try {
-			await fs.remove(tempDir);
-		} catch {
-			// Ignore cleanup errors
-		}
 	}
 
 	return results;
@@ -253,8 +244,8 @@ export async function injectLayer(targetDir, layer, spinner) {
 		return results;
 	}
 
-	// Resolve the layer directory from the CLI repo's layers/{type}/ path
-	const layerDir = path.resolve(__dirname, "../../layers", layer);
+	// Resolve the layer directory from create-basement-app's templates/{type}/ path
+	const layerDir = path.resolve(__dirname, "../../templates", layer);
 
 	if (!(await fs.pathExists(layerDir))) {
 		results.skipped.push({

package/packages/create-basement-app/src/mergers/layout-merger.js

@@ -0,0 +1,223 @@
+// packages/create-basement-app/src/mergers/layout-merger.js
+
+import path from "node:path";
+import fs from "fs-extra";
+
+/**
+ * Sanity-specific imports to inject into layout.
+ * Only two lightweight components — no dynamic functions (draftMode, headers, etc.)
+ */
+const SANITY_IMPORTS = `import { SanityStudioGuard } from "@/components/sanity/studio-guard"
+import { SanityVisualEditing } from "@/components/sanity/visual-editing"`;
+
+/**
+ * Client component that hides site chrome on /studio routes.
+ * Uses useSelectedLayoutSegment() — a stable Next.js client API.
+ */
+const STUDIO_GUARD_COMPONENT = `"use client"
+
+import { useSelectedLayoutSegment } from "next/navigation"
+
+export function SanityStudioGuard({ children }: { children: React.ReactNode }) {
+  const segment = useSelectedLayoutSegment()
+  if (segment === "studio") return null
+  return <>{children}</>
+}
+`;
+
+/**
+ * Server component that handles Sanity visual editing.
+ * Keeps draftMode() inside its own <Suspense> boundary so the root layout
+ * never calls dynamic functions directly — preserving static rendering.
+ */
+const VISUAL_EDITING_COMPONENT = `import { Suspense } from "react"
+import { draftMode } from "next/headers"
+import { VisualEditing } from "next-sanity/visual-editing"
+import { isSanityConfigured } from "@/lib/integrations/check-integration"
+import { SanityLive } from "@/lib/integrations/sanity/live"
+
+async function VisualEditingInner() {
+  const { isEnabled: isDraftMode } = await draftMode()
+  const sanityConfigured = isSanityConfigured()
+
+  if (!sanityConfigured || !isDraftMode) return null
+
+  return (
+    <>
+      <VisualEditing />
+      <SanityLive />
+    </>
+  )
+}
+
+export function SanityVisualEditing() {
+  return (
+    <Suspense fallback={null}>
+      <VisualEditingInner />
+    </Suspense>
+  )
+}
+`;
+
+/**
+ * Merge Sanity integration into template layout.
+ * The layout itself stays free of dynamic functions (draftMode, headers, etc.)
+ * All dynamic behavior is encapsulated in generated components.
+ *
+ * Strategy:
+ * 1. Inject two imports (SanityStudioGuard, SanityVisualEditing)
+ * 2. Wrap body chrome in <SanityStudioGuard>
+ * 3. Add <SanityVisualEditing /> before </body>
+ * 4. Generate the two component files
+ *
+ * @param {string} templatePath - Path to the template's layout.tsx
+ * @param {object} options - Options from the merge orchestrator
+ * @param {string} options.targetDir - The project root directory
+ * @param {string} options.pathPrefix - Path prefix (e.g., 'src/' or '')
+ * @returns {Promise<{skipped?: boolean, reason?: string, success?: boolean}>}
+ */
+export async function mergeLayout(
+	templatePath,
+	{ targetDir, pathPrefix } = {},
+) {
+	let content = await fs.readFile(templatePath, "utf-8");
+
+	// Skip if already has Sanity integration
+	if (
+		content.includes("SanityStudioGuard") ||
+		content.includes("isSanityConfigured")
+	) {
+		return { skipped: true, reason: "Already has Sanity integration" };
+	}
+
+	// 1. Add Sanity imports after existing imports
+	const importMatches = [...content.matchAll(/^import .+$/gm)];
+	if (importMatches.length > 0) {
+		const lastImport = importMatches[importMatches.length - 1];
+		const insertPos = lastImport.index + lastImport[0].length;
+		content =
+			content.slice(0, insertPos) +
+			"\n" +
+			SANITY_IMPORTS +
+			content.slice(insertPos);
+	}
+
+	// 2. Ensure Suspense is imported from react
+	if (!content.match(/import\s+.*Suspense.*from\s+["']react["']/)) {
+		const reactImportMatch = content.match(
+			/import\s+\{([^}]*)\}\s+from\s+["']react["']/,
+		);
+		if (reactImportMatch) {
+			if (!reactImportMatch[1].includes("Suspense")) {
+				content = content.replace(
+					reactImportMatch[0],
+					reactImportMatch[0].replace(
+						reactImportMatch[1],
+						`${reactImportMatch[1].trim()}, Suspense`,
+					),
+				);
+			}
+		} else {
+			const lastImportMatch = content.match(/^(import\s+.+\n)/gm);
+			if (lastImportMatch) {
+				const lastImport = lastImportMatch[lastImportMatch.length - 1];
+				content = content.replace(
+					lastImport,
+					`${lastImport}import { Suspense } from "react"\n`,
+				);
+			}
+		}
+	}
+
+	// 3. Wrap body chrome in <SanityStudioGuard> and add <SanityVisualEditing />
+	content = content.replace(
+		/(\s*)(<body[^>]*>)([\s\S]*?)(\{children\})([\s\S]*?)(<\/body>)/m,
+		(
+			_match,
+			bodyIndent,
+			bodyOpen,
+			beforeChildren,
+			_childrenExpr,
+			afterChildren,
+			bodyClose,
+		) => {
+			const baseIndent = bodyIndent || "        ";
+			const indent = `${baseIndent}  `;
+			const innerIndent = `${indent}  `;
+
+			const trimmedBefore = beforeChildren.trim();
+			const trimmedAfter = afterChildren.trim();
+			const hasChrome = trimmedBefore.length > 0 || trimmedAfter.length > 0;
+
+			// Preserve relative indentation of chrome content
+			const reindent = (text, targetIndent) => {
+				const lines = text.split("\n").filter((line) => line.trim());
+				if (lines.length === 0) return "";
+				const minIndent = Math.min(
+					...lines
+						.map((line) => line.match(/^(\s*)/)[1].length)
+						.filter((n) => n > 0),
+					Infinity,
+				);
+				return lines
+					.map((line) => {
+						const currentIndent = line.match(/^(\s*)/)[1].length;
+						const relativeIndent = Math.max(
+							0,
+							currentIndent - (minIndent === Infinity ? 0 : minIndent),
+						);
+						return targetIndent + " ".repeat(relativeIndent) + line.trim();
+					})
+					.join("\n");
+			};
+
+			let result = `${baseIndent}${bodyOpen}\n`;
+
+			if (hasChrome && trimmedBefore) {
+				result += `${indent}<Suspense fallback={null}>\n`;
+				result += `${innerIndent}<SanityStudioGuard>\n`;
+				result += reindent(trimmedBefore, `${innerIndent}  `);
+				result += `\n${innerIndent}</SanityStudioGuard>\n`;
+				result += `${indent}</Suspense>\n\n`;
+			}
+
+			result += `${indent}{children}\n`;
+
+			if (hasChrome && trimmedAfter) {
+				result += `\n${indent}<Suspense fallback={null}>\n`;
+				result += `${innerIndent}<SanityStudioGuard>\n`;
+				result += reindent(trimmedAfter, `${innerIndent}  `);
+				result += `\n${innerIndent}</SanityStudioGuard>\n`;
+				result += `${indent}</Suspense>\n`;
+			}
+
+			result += `\n${indent}<SanityVisualEditing />\n${baseIndent}${bodyClose}`;
+			return result;
+		},
+	);
+
+	await fs.writeFile(templatePath, content);
+
+	// 3. Generate component files
+	if (targetDir) {
+		const sanityDir = path.join(
+			targetDir,
+			pathPrefix || "",
+			"components",
+			"sanity",
+		);
+		await fs.ensureDir(sanityDir);
+
+		const guardPath = path.join(sanityDir, "studio-guard.tsx");
+		if (!(await fs.pathExists(guardPath))) {
+			await fs.writeFile(guardPath, STUDIO_GUARD_COMPONENT);
+		}
+
+		const visualEditingPath = path.join(sanityDir, "visual-editing.tsx");
+		if (!(await fs.pathExists(visualEditingPath))) {
+			await fs.writeFile(visualEditingPath, VISUAL_EDITING_COMPONENT);
+		}
+	}
+
+	return { success: true };
+}

package/packages/create-basement-app/src/mergers/sitemap-merger.js

@@ -0,0 +1,121 @@
+// packages/create-basement-app/src/mergers/sitemap-merger.js
+import fs from "fs-extra";
+
+/**
+ * Sanity-specific import to add
+ */
+const SANITY_IMPORT = `import { isSanityConfigured } from "@/lib/integrations/check-integration"`;
+
+/**
+ * Sanity fetch logic to inject before return statement
+ * Uses early return pattern and spread operator for cleaner code
+ */
+const SANITY_FETCH_LOGIC = `
+  // Only fetch Sanity pages if Sanity is configured
+  if (isSanityConfigured()) {
+    try {
+      const sanityModule = await import("@/lib/integrations/sanity/client")
+      const sanityGroq = await import("next-sanity")
+
+      const client = sanityModule?.client
+      const groq = sanityGroq?.groq
+
+      // Skip if client is null (shouldn't happen since we check isSanityConfigured)
+      if (!(client && groq)) return baseRoutes
+
+      type SanityDocument = {
+        slug: { current: string }
+        _updatedAt: string
+        metadata?: { noIndex?: boolean }
+      }
+
+      // Fetch all published pages and articles
+      const pages = (await client.fetch(
+        groq\`*[_type == "page" && defined(slug.current)] {
+          slug,
+          _updatedAt,
+          metadata
+        }\`
+      )) as SanityDocument[]
+
+      const articles = (await client.fetch(
+        groq\`*[_type == "article" && defined(slug.current)] {
+          slug,
+          _updatedAt,
+          metadata
+        }\`
+      )) as SanityDocument[]
+
+      // Add pages to sitemap (exclude noIndex pages)
+      const pageEntries: MetadataRoute.Sitemap = pages
+        .filter((page: SanityDocument) => !page.metadata?.noIndex)
+        .map((page: SanityDocument) => ({
+          url: \`\${APP_BASE_URL}/\${page.slug.current}\`,
+          lastModified: new Date(page._updatedAt),
+          changeFrequency: "weekly" as const,
+          priority: 0.8,
+        }))
+
+      // Add articles to sitemap (exclude noIndex articles)
+      const articleEntries: MetadataRoute.Sitemap = articles
+        .filter((article: SanityDocument) => !article.metadata?.noIndex)
+        .map((article: SanityDocument) => ({
+          url: \`\${APP_BASE_URL}/blog/\${article.slug.current}\`,
+          lastModified: new Date(article._updatedAt),
+          changeFrequency: "weekly" as const,
+          priority: 0.7,
+        }))
+
+      return [...baseRoutes, ...pageEntries, ...articleEntries]
+    } catch (error) {
+      console.error("Error generating sitemap from Sanity:", error)
+      return baseRoutes
+    }
+  }
+
+`;
+
+/**
+ * Merge Sanity integration into template sitemap
+ * Preserves all existing agnostic code (routes, baseRoutes structure)
+ * and injects Sanity-specific fetching logic
+ *
+ * @param {string} templatePath - Path to the template's sitemap.ts
+ * @returns {Promise<{skipped?: boolean, reason?: string, success?: boolean}>}
+ */
+export async function mergeSitemap(templatePath) {
+	let content = await fs.readFile(templatePath, "utf-8");
+
+	// Skip if already has Sanity integration
+	if (content.includes("isSanityConfigured")) {
+		return { skipped: true, reason: "Already has Sanity integration" };
+	}
+
+	// 1. Add Sanity import after existing imports
+	const importMatches = [...content.matchAll(/^import .+$/gm)];
+	if (importMatches.length > 0) {
+		const lastImport = importMatches[importMatches.length - 1];
+		const insertPos = lastImport.index + lastImport[0].length;
+		content =
+			content.slice(0, insertPos) +
+			"\n" +
+			SANITY_IMPORT +
+			content.slice(insertPos);
+	}
+
+	// 2. Add Sanity fetch logic before the final return statement
+	// Find the last "return baseRoutes" or "return [...baseRoutes" pattern
+	const returnMatch = content.match(
+		/(\n)([ \t]*)(return\s+(?:baseRoutes|\[\.\.\.baseRoutes))/m,
+	);
+	if (returnMatch) {
+		const returnIndex = content.indexOf(returnMatch[0]);
+		content =
+			content.slice(0, returnIndex) +
+			SANITY_FETCH_LOGIC +
+			content.slice(returnIndex);
+	}
+
+	await fs.writeFile(templatePath, content);
+	return { success: true };
+}

package/packages/create-basement-app/template-hooks/config.js

@@ -0,0 +1,38 @@
+// packages/create-basement-app/template-hooks/config.js
+
+/**
+ * Hook configuration manifest.
+ * Each entry describes a template hook, its source file, and npm dependencies.
+ */
+export const hooksConfig = [
+	{
+		name: "use-battery",
+		file: "use-battery.ts",
+		dependencies: {
+			"lodash-es": "^4.17.21",
+		},
+		devDependencies: {},
+	},
+	{
+		name: "use-device-perf",
+		file: "use-device-perf.ts",
+		dependencies: {
+			"detect-gpu": "^5.0.0",
+			"react-device-detect": "^2.2.3",
+			zustand: "^5.0.0",
+		},
+		devDependencies: {},
+	},
+	{
+		name: "use-intersection-observer",
+		file: "use-intersection-observer.ts",
+		dependencies: {},
+		devDependencies: {},
+	},
+	{
+		name: "use-media",
+		file: "use-media.ts",
+		dependencies: {},
+		devDependencies: {},
+	},
+];

package/packages/create-basement-app/templates/default/.biome/plugins/README.md

@@ -0,0 +1,21 @@
+## Plugins
+
+### 1. `no-anchor-element.grit`
+Enforces using Next.js `<Link>` component instead of HTML `<a>` elements.
+
+### 2. `no-unnecessary-forwardref.grit`
+Checks for unnecessary `forwardRef` usage in React 19 with the compiler.
+
+### 3. `no-relative-parent-imports.grit`
+Forbids relative parent imports (`../`) and encourages alias imports (`@/`).
+
+## Plugin Configuration
+
+The plugins are configured in `biome.json`:
+```json
+"plugins": [
+  "./biome-plugins/no-anchor-element.grit",
+  "./biome-plugins/no-unnecessary-forwardref.grit",
+  "./biome-plugins/no-relative-parent-imports.grit"
+]
+``` 

package/packages/create-basement-app/templates/default/.biome/plugins/no-anchor-element.grit

@@ -0,0 +1,12 @@
+language js;
+
+`<a $attrs>$content</a>` as $anchor where {
+    !$anchor <: within `if ($condition) { return ($jsx) }` where {
+        $condition <: contains or { `isExternal`, `isExternalSSR` }
+    },
+    register_diagnostic(
+        span = $anchor,
+        message = "Use custom Link component instead of <a> element. The Link component handles both internal and external links automatically.",
+        severity = "error"
+    )
+} 

package/packages/create-basement-app/templates/default/.biome/plugins/no-relative-parent-imports.grit

@@ -0,0 +1,10 @@
+language js;
+
+`import $imports from $source` as $import where {
+    $source <: r"['\"]\.\.\/\.\.\/.*['\"]",
+    register_diagnostic(
+        span = $import,
+        message = "Use alias imports (~/dir/) instead of deep relative imports (../../). Single level imports (../) are allowed for colocated files.",
+        severity = "error"
+    )
+}