bsmnt 0.0.2 → 0.1.0

package/packages/create-basement-app/templates/webgl/lib/scripts/generate-page.ts

@@ -0,0 +1,193 @@
+#!/usr/bin/env bun
+/**
+ * Generate Page Module
+ *
+ * Generates new pages with pre-configured templates through interactive prompts.
+ * Used by the unified generator: `bun run generate`
+ *
+ * Cross-platform compatible (Windows, macOS, Linux)
+ */
+
+import * as p from "@clack/prompts"
+import { createDir } from "./utils"
+
+interface PageOptions {
+  theme?: string
+  css?: boolean
+}
+
+export interface PageConfig {
+  name: string
+  options: PageOptions
+}
+
+/**
+ * Interactive prompts for page configuration
+ */
+export const promptPageConfig = async (): Promise<PageConfig> => {
+  const name = await p.text({
+    message: "What should the page be called?",
+    placeholder: "about, contact, products",
+    validate: (value) => {
+      if (!value) return "Page name is required"
+      if (!/^[a-zA-Z][a-zA-Z0-9-_]*$/.test(value)) {
+        return "Page name must start with a letter and contain only letters, numbers, hyphens, and underscores"
+      }
+      return undefined
+    },
+  })
+
+  if (p.isCancel(name)) {
+    p.cancel("Page generation cancelled")
+    process.exit(0)
+  }
+
+  const theme = await p.select({
+    message: "Choose a theme for the page",
+    options: [
+      { value: "dark", label: "Dark (default)", hint: "Standard dark theme" },
+      { value: "light", label: "Light", hint: "Light theme" },
+      { value: "red", label: "Red", hint: "Red accent theme" },
+    ],
+    initialValue: "dark",
+  })
+
+  if (p.isCancel(theme)) {
+    p.cancel("Page generation cancelled")
+    process.exit(0)
+  }
+
+  const includeCss = await p.confirm({
+    message: "Include a CSS module file?",
+    initialValue: false,
+  })
+
+  if (p.isCancel(includeCss)) {
+    p.cancel("Page generation cancelled")
+    process.exit(0)
+  }
+
+  return {
+    name,
+    options: {
+      theme,
+      css: includeCss,
+    },
+  }
+}
+
+/**
+ * Generate page.tsx content
+ */
+const generatePageContent = (
+  pageName: string,
+  options: PageOptions
+): string => {
+  const { theme = "dark" } = options
+
+  // Capitalize first letter for title
+  const title = pageName.charAt(0).toUpperCase() + pageName.slice(1)
+
+  // Build imports
+  const imports: string[] = []
+  imports.push(`import type { Metadata } from 'next'`)
+  imports.push(`import { Wrapper } from '@/components/layout/wrapper'`)
+
+  // Build wrapper props
+  const wrapperProps: string[] = [`theme="${theme}"`]
+
+  const componentBody: string = `(
+    <Wrapper ${wrapperProps.join(" ")}>
+      <section className="py-44">
+        <div className="container">
+          <h1>${title}</h1>
+          {/* Your content here */}
+        </div>
+      </section>
+    </Wrapper>
+  )`
+
+  // Build metadata export
+  const metadataExport: string = `
+export const metadata: Metadata = {
+  title: '${title}',
+  description: '${title} page description',
+}`
+
+  return `${imports.join("\n")}
+${metadataExport}
+
+export default function ${title}Page() {
+  return ${componentBody}
+}
+`
+}
+
+/**
+ * Create page files and directories
+ */
+export const createPage = async (
+  pageName: string,
+  options: PageOptions
+): Promise<void> => {
+  const s = p.spinner()
+
+  try {
+    // Create directory structure
+    const pageDir = `app/${pageName}`
+    const componentsDir = `${pageDir}/_components`
+
+    s.start(`Creating page structure for "${pageName}"`)
+
+    // Create main page directory (cross-platform)
+    await createDir(pageDir)
+
+    // Create _components subdirectory (cross-platform)
+    await createDir(componentsDir)
+
+    // Create .gitkeep in _components
+    await Bun.write(`${componentsDir}/.gitkeep`, "")
+
+    // Generate and write page.tsx
+    const pageContent = generatePageContent(pageName, options)
+    await Bun.write(`${pageDir}/page.tsx`, pageContent)
+
+    // Create CSS module if requested
+    if (options.css) {
+      const cssContent = `/* ${pageName}.module.css */
+
+.container {
+  /* Add your styles here */
+}
+`
+      await Bun.write(`${pageDir}/${pageName}.module.css`, cssContent)
+    }
+
+    s.stop(`Page "${pageName}" generated successfully!`)
+
+    // Show what was created
+    p.log.success(`Generated files:`)
+    p.log.message(`  📄 ${pageDir}/page.tsx`)
+    p.log.message(`  📁 ${componentsDir}/`)
+    if (options.css) {
+      p.log.message(`  🎨 ${pageDir}/${pageName}.module.css`)
+    }
+
+    // Build next steps message
+    const nextSteps = [`1. Customize ${pageDir}/page.tsx`]
+
+    nextSteps.push(
+      `${nextSteps.length + 1}. Add components to ${componentsDir}/`
+    )
+    nextSteps.push(
+      `${nextSteps.length + 1}. Visit /${pageName} to see your page`
+    )
+
+    p.note(`Next steps:\n  ${nextSteps.join("\n  ")}`)
+  } catch (error) {
+    s.stop(`Failed to generate page "${pageName}"`)
+    throw error
+  }
+}
+
+// Export functions for use by unified generate script

package/packages/create-basement-app/templates/webgl/lib/scripts/generate.ts

@@ -0,0 +1,79 @@
+#!/usr/bin/env bun
+/**
+ * Satūs Generator CLI
+ *
+ * Interactive scaffolding for new pages and components.
+ * Generates pre-configured templates following project conventions.
+ *
+ * Usage:
+ *   bun run generate
+ *
+ * Options:
+ *   - Page: Creates route with layout, metadata, and optional integrations
+ *   - Component: Creates UI component with CSS module and barrel export
+ */
+
+import * as p from "@clack/prompts"
+import { createComponent, promptComponentConfig } from "./generate-component"
+// Import the existing generators
+import { createPage, promptPageConfig } from "./generate-page"
+
+/**
+ * Main CLI function
+ */
+const main = async (): Promise<void> => {
+  console.clear()
+
+  p.intro("Satūs Generator")
+
+  // Ask what to create
+  const createType = await p.select({
+    message: "What would you like to generate?",
+    options: [
+      {
+        value: "page",
+        label: "Page",
+        hint: "New route/page with layout and components",
+      },
+      {
+        value: "component",
+        label: "Component",
+        hint: "New reusable UI component",
+      },
+    ],
+  })
+
+  if (p.isCancel(createType)) {
+    p.cancel("Generation cancelled")
+    process.exit(0)
+  }
+
+  try {
+    if (createType === "page") {
+      // Get page configuration through interactive prompts
+      const { name: pageName, options } = await promptPageConfig()
+
+      // Create the page
+      await createPage(pageName, options)
+    } else if (createType === "component") {
+      // Get component configuration through interactive prompts
+      const { path: componentPath, options } = await promptComponentConfig()
+
+      // Create the component
+      await createComponent(componentPath, options)
+    }
+
+    p.outro("Generation completed successfully! 🚀")
+  } catch (error) {
+    p.log.error(
+      `Generation failed: ${error instanceof Error ? error.message : String(error)}`
+    )
+    process.exit(1)
+  }
+}
+
+// Run the CLI
+main().catch((err) => {
+  p.log.error(`Unexpected error: ${err.message}`)
+  process.exit(1)
+})

package/packages/create-basement-app/templates/webgl/lib/scripts/utils.ts

@@ -0,0 +1,246 @@
+/**
+ * Shared Script Utilities
+ *
+ * Cross-platform utilities for CLI scripts.
+ * Works on Windows, macOS, and Linux.
+ */
+
+import { access, mkdir, rm } from "node:fs/promises"
+
+// ============================================================================
+// Path Utilities
+// ============================================================================
+
+/**
+ * Get the project root directory
+ */
+export const projectRoot = process.cwd()
+
+/**
+ * Resolve a path relative to the project root
+ */
+export const resolvePath = (path: string): string => `${projectRoot}/${path}`
+
+/**
+ * Check if a file or directory exists
+ */
+export const pathExists = async (path: string): Promise<boolean> => {
+  try {
+    await access(path)
+    return true
+  } catch {
+    return false
+  }
+}
+
+// ============================================================================
+// File System Operations (Cross-platform)
+// ============================================================================
+
+/**
+ * Remove a directory recursively
+ * @param path - Relative path from project root
+ * @param dryRun - If true, skip actual deletion
+ */
+export const removeDir = async (
+  path: string,
+  dryRun = false
+): Promise<boolean> => {
+  try {
+    const fullPath = resolvePath(path)
+
+    // Check if path exists
+    if (!(await pathExists(fullPath))) {
+      return false
+    }
+
+    if (!dryRun) {
+      await rm(fullPath, { recursive: true, force: true })
+    }
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Remove a file
+ * @param path - Relative path from project root
+ * @param dryRun - If true, skip actual deletion
+ */
+export const removeFile = async (
+  path: string,
+  dryRun = false
+): Promise<boolean> => {
+  try {
+    const fullPath = resolvePath(path)
+    const file = Bun.file(fullPath)
+    const exists = await file.exists()
+
+    if (!exists) return false
+
+    if (!dryRun) {
+      await rm(fullPath, { force: true })
+    }
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Create a directory (and parent directories if needed)
+ * @param path - Relative path from project root
+ */
+export const createDir = async (path: string): Promise<void> => {
+  await mkdir(resolvePath(path), { recursive: true })
+}
+
+// ============================================================================
+// Process Utilities
+// ============================================================================
+
+/**
+ * Get the current Bun executable path (cross-platform)
+ */
+export const bunExecutable = process.execPath
+
+/**
+ * Current platform
+ */
+export const platform = process.platform
+
+/**
+ * Check if running on Windows
+ */
+export const isWindows = platform === "win32"
+
+/**
+ * Check if running on macOS
+ */
+export const isMacOS = platform === "darwin"
+
+/**
+ * Check if running on Linux
+ */
+export const isLinux = platform === "linux"
+
+// ============================================================================
+// CLI Argument Utilities
+// ============================================================================
+
+/**
+ * Parse common CLI flags from process.argv
+ */
+export const parseCliFlags = (
+  argv: string[] = process.argv.slice(2)
+): {
+  dryRun: boolean
+  verbose: boolean
+  help: boolean
+  args: string[]
+} => {
+  return {
+    dryRun: argv.includes("--dry-run") || argv.includes("-d"),
+    verbose: argv.includes("--verbose") || argv.includes("-v"),
+    help: argv.includes("--help") || argv.includes("-h"),
+    args: argv.filter(
+      (arg) =>
+        !["--dry-run", "-d", "--verbose", "-v", "--help", "-h"].includes(arg)
+    ),
+  }
+}
+
+// ============================================================================
+// Clipboard Utilities (Cross-platform)
+// ============================================================================
+
+/**
+ * Copy text to clipboard (cross-platform)
+ * @returns true if successful, false otherwise
+ */
+export const copyToClipboard = async (text: string): Promise<boolean> => {
+  try {
+    if (isMacOS) {
+      const proc = Bun.spawn(["pbcopy"], { stdin: "pipe" })
+      proc.stdin.write(text)
+      proc.stdin.end()
+      await proc.exited
+      return proc.exitCode === 0
+    }
+
+    if (isLinux) {
+      // Try xclip first, then xsel
+      for (const cmd of [
+        ["xclip", "-selection", "clipboard"],
+        ["xsel", "--clipboard", "--input"],
+      ]) {
+        try {
+          const proc = Bun.spawn(cmd, { stdin: "pipe" })
+          proc.stdin.write(text)
+          proc.stdin.end()
+          await proc.exited
+          if (proc.exitCode === 0) return true
+        } catch {
+          // Silently try next clipboard command
+        }
+      }
+      return false
+    }
+
+    if (isWindows) {
+      const proc = Bun.spawn(["clip"], { stdin: "pipe" })
+      proc.stdin.write(text)
+      proc.stdin.end()
+      await proc.exited
+      return proc.exitCode === 0
+    }
+
+    return false
+  } catch {
+    return false
+  }
+}
+
+// ============================================================================
+// Spawn Utilities
+// ============================================================================
+
+/**
+ * Spawn a process with inherited stdio (cross-platform)
+ * Uses Bun.spawn with proper defaults
+ */
+export const spawn = (
+  args: string[],
+  options: {
+    env?: Record<string, string | undefined>
+    cwd?: string
+    stdin?: "inherit" | "pipe"
+    stdout?: "inherit" | "pipe"
+    stderr?: "inherit" | "pipe"
+  } = {}
+) => {
+  const spawnOptions: Parameters<typeof Bun.spawn>[1] = {
+    stdin: options.stdin ?? "inherit",
+    stdout: options.stdout ?? "inherit",
+    stderr: options.stderr ?? "inherit",
+  }
+
+  if (options.cwd) spawnOptions.cwd = options.cwd
+  if (options.env) spawnOptions.env = options.env
+
+  return Bun.spawn(args, spawnOptions)
+}
+
+/**
+ * Build environment with FORCE_COLOR enabled
+ * Removes NO_COLOR to prevent warnings
+ */
+export const colorEnv = (): Record<string, string | undefined> => {
+  const env = { ...process.env, FORCE_COLOR: "1" } as Record<
+    string,
+    string | undefined
+  >
+  delete env.NO_COLOR
+  return env
+}

package/packages/create-basement-app/templates/webgl/lib/store/app.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand"
+
+type Store = {
+  isNavOpened: boolean
+  setIsNavOpened: (value: boolean) => void
+}
+
+export const useStore = create<Store>((set) => ({
+  isNavOpened: false,
+  setIsNavOpened: (value: boolean) => set({ isNavOpened: value }),
+}))

package/packages/create-basement-app/templates/webgl/lib/store/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Custom Zustand Stores
+ *
+ * Import individual hooks:
+ *   import { useStore } from '@/store/app'
+ *
+ * Or import from barrel:
+ *   import { useStore } from '@/store/app'
+ */
+
+export { useStore } from "./app"

package/packages/create-basement-app/templates/webgl/lib/styles/README.md

@@ -0,0 +1,64 @@
+# Styles
+
+Hybrid styling with Tailwind CSS v4 and custom PostCSS functions.
+
+## PostCSS Functions
+
+```css
+/* Viewport-relative sizing */
+.element {
+  width: tovw(100);                    /* 6.94vw (100px at 1440px) */
+  width: tovw(100, 50);                 /* max(50px, 6.94vw) */
+  width: tovw(16, undefined, 'mobile'); /* 4.27vw (16px at 375px) */
+}
+
+/* Relative units */
+.text {
+  font-size: torem(24);    /* 1.5rem (24px / 16px) */
+  padding: toem(16, 14);   /* 1.14em (16px / 14px) */
+}
+
+/* Grid columns */
+.sidebar {
+  width: columns(3);       /* Spans 3 columns + gaps */
+}
+```
+
+## Custom Utilities (`dr-*`)
+
+```tsx
+// Responsive sizing (scales with viewport)
+<div className="dr-w-150 dr-h-100" />
+
+// Column-based sizing
+<div className="dr-w-col-4" />  {/* 4 columns wide */}
+
+// Grid layout
+<div className="dr-grid" />     {/* 4 cols mobile, 12 cols desktop */}
+```
+
+## Breakpoints
+
+```css
+@media (--mobile) { /* <= 799px */ }
+@media (--desktop) { /* >= 800px */ }
+```
+
+## Configuration
+
+| File | Purpose |
+|------|---------|
+| `colors.ts` | Color palette & themes |
+| `typography.ts` | Font sizes & weights |
+| `layout.mjs` | Grid, breakpoints, spacing |
+| `easings.ts` | Animation curves |
+| `fonts.ts` | Font loading |
+
+After changing config: `bun setup:styles`
+
+## Generated Files (Don't Edit)
+
+- `css/root.css` — CSS custom properties
+- `css/tailwind.css` — Tailwind utilities
+
+See [scripts/README.md](scripts/README.md) for generation details.

package/packages/create-basement-app/templates/webgl/lib/styles/cn.ts

@@ -0,0 +1,7 @@
+import { cx } from "class-variance-authority"
+import type { ClassValue } from "class-variance-authority/types"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(cx(inputs))
+}

package/packages/create-basement-app/templates/webgl/lib/styles/colors.ts

@@ -0,0 +1,63 @@
+const palettes = {
+  gray: {
+    50: "#F5F5F5",
+    100: "#E0E0E0",
+    200: "#C2C2C2",
+    300: "#A3A3A3",
+    400: "#858585",
+    500: "#666666",
+    600: "#4D4D4D",
+    700: "#333333",
+    800: "#1A1A1A",
+  },
+  blue: {
+    500: "#487CFF",
+  },
+  green: {
+    500: "#00FF9B",
+  },
+  violet: {
+    500: "#F101A5",
+  },
+  pink: {
+    500: "#FF73A6",
+  },
+  orange: {
+    500: "#FF4D00",
+  },
+}
+
+const colors = {
+  black: "#000000",
+  white: "#ffffff",
+  orange: palettes.orange[500],
+  blue: palettes.blue[500],
+  green: palettes.green[500],
+  violet: palettes.violet[500],
+  pink: palettes.pink[500],
+  gray: palettes.gray[500],
+} as const
+
+const themeNames = ["light", "dark"] as const
+const colorNames = ["primary", "secondary", "contrast"] as const
+
+const themes = {
+  light: {
+    primary: colors.white,
+    secondary: colors.black,
+    contrast: colors.orange,
+  },
+  dark: {
+    primary: colors.black,
+    secondary: colors.white,
+    contrast: colors.orange,
+  },
+} as const satisfies Themes
+
+export { colors, palettes, themeNames, themes }
+
+// UTIL TYPES
+export type Themes = Record<
+  (typeof themeNames)[number],
+  Record<(typeof colorNames)[number], string>
+>

package/packages/create-basement-app/templates/webgl/lib/styles/config.ts

@@ -0,0 +1,34 @@
+import { colors, palettes, themeNames, themes } from "./colors"
+import { easings } from "./easings"
+import { breakpoints, customSizes, layout, screens } from "./layout.mjs"
+import { fonts, typography } from "./typography"
+
+const config = {
+  breakpoints,
+  colors,
+  customSizes,
+  easings,
+  fonts,
+  layout,
+  palettes,
+  screens,
+  themeNames,
+  themes,
+  typography,
+} as const
+
+export {
+  breakpoints,
+  colors,
+  customSizes,
+  easings,
+  fonts,
+  layout,
+  palettes,
+  screens,
+  themeNames,
+  themes,
+  typography,
+}
+export type ThemeName = keyof typeof themes
+export type Config = typeof config