bsmnt 0.4.0 → 0.4.2

package/src/templates/next-default/lib/utils/viewport.ts

@@ -0,0 +1,199 @@
+/**
+ * Viewport Utilities
+ *
+ * Convert pixel values to viewport-relative sizes and relative units.
+ * Mirrors the SASS functions for consistent responsive scaling.
+ *
+ * @example
+ * ```ts
+ * import { tovw, torem, toem } from '@/utils/viewport'
+ *
+ * // Convert to viewport width units
+ * const paddingX = tovw(16, 24) // "1.5625vw" with a minimum of 24px
+ * const fontSize = tovw(16, 'mobile') // "4.27vw" (no undefined needed!)
+ * const width = tovw(100, 50, 'desktop') // "max(50px, 6.94vw)"
+ *
+ * // Convert to rem/em
+ * const spacing = torem(24) // "1.5rem"
+ * const padding = toem(16, 14) // "1.14em"
+ * ```
+ *
+ * ## When to Use
+ *
+ * - **CSS**: Prefer the PostCSS functions `tovw()`, `torem()`, and `toem()`
+ * - **JavaScript/TypeScript**: Use these for dynamic calculations or inline styles
+ * - **Runtime calculations**: Use for canvas, WebGL, or dynamic sizing
+ */
+
+const BREAKPOINTS = {
+  "desktop-large": 1920,
+  desktop: 1440,
+  "tablet-lg": 1024,
+  tablet: 768,
+  mobile: 640,
+} as const
+
+type ContextSize = keyof typeof BREAKPOINTS | number
+
+/**
+ * Resolves a context size to a pixel value.
+ *
+ * @param context - Context identifier or pixel value
+ * @returns Pixel value
+ */
+function resolveContext(context: ContextSize): number {
+  if (typeof context === "number") {
+    return context
+  }
+  return BREAKPOINTS[context] ?? BREAKPOINTS.desktop
+}
+
+/**
+ * Checks if a value is a context identifier (breakpoint key).
+ *
+ * @param value - Value to check
+ * @returns True if value is a breakpoint key
+ */
+function isContextIdentifier(
+  value: unknown
+): value is keyof typeof BREAKPOINTS {
+  return typeof value === "string" && value in BREAKPOINTS
+}
+
+/**
+ * Rounds a number to a maximum of 4 decimal places, removing trailing zeros.
+ *
+ * @param value - Number to round
+ * @returns Rounded number as string without trailing zeros
+ */
+function roundToMaxDecimals(value: number): string {
+  // Round to 4 decimal places
+  const rounded = Math.round(value * 10000) / 10000
+  // Convert to string and remove trailing zeros only after decimal point
+  return rounded
+    .toString()
+    .replace(/\.0+$/, "")
+    .replace(/(\.\d*?)0+$/, "$1")
+}
+
+// Function overloads for tovw
+export function tovw(target: number): string
+export function tovw(target: number, min: number): string
+export function tovw(target: number, context: ContextSize): string
+export function tovw(target: number, min: number, context: ContextSize): string
+/**
+ * Converts a pixel value to viewport width units (vw).
+ * Optionally applies a minimum value using CSS max().
+ *
+ * Supports flexible parameter patterns:
+ * - `tovw(target)` - Uses default desktop context
+ * - `tovw(target, min)` - Sets minimum value
+ * - `tovw(target, context)` - Sets context (auto-detected if string identifier)
+ * - `tovw(target, min, context)` - Sets both min and context
+ *
+ * @param target - Target pixel value to convert
+ * @param minOrContext - Optional minimum pixel value OR context identifier
+ * @param context - Context size identifier (if min was provided)
+ * @returns CSS string with vw units (e.g., "6.94vw" or "max(50px, 6.94vw)")
+ *
+ * @example
+ * ```ts
+ * // Basic conversion
+ * tovw(100) // "6.94vw"
+ * tovw(16, 'mobile') // "4.27vw" (no undefined needed!)
+ *
+ * // With minimum value
+ * tovw(100, 50) // "max(50px, 6.94vw)"
+ * tovw(100, 50, 'mobile') // "max(50px, 6.94vw)" with mobile context
+ *
+ * // Custom context
+ * tovw(100, 1920) // "5.21vw"
+ *
+ * // Handles zero
+ * tovw(0) // "0"
+ * ```
+ */
+export function tovw(
+  target: number,
+  minOrContext?: number | ContextSize,
+  context?: ContextSize
+): string {
+  if (target === 0) {
+    return "0"
+  }
+
+  let min: number | undefined
+  let resolvedContext: ContextSize = "desktop"
+
+  if (minOrContext !== undefined) {
+    if (isContextIdentifier(minOrContext)) {
+      // Second param is context
+      resolvedContext = minOrContext
+      if (context !== undefined) {
+        resolvedContext = context
+      }
+    } else if (typeof minOrContext === "number") {
+      // Second param is min value
+      min = minOrContext
+      if (context !== undefined) {
+        resolvedContext = context
+      }
+    }
+  } else if (context !== undefined) {
+    // Only context provided as third param (legacy support)
+    resolvedContext = context
+  }
+
+  const contextSize = resolveContext(resolvedContext)
+  const vwValue = (target / contextSize) * 100
+
+  if (min !== undefined) {
+    return `max(${min}px, ${roundToMaxDecimals(vwValue)}vw)`
+  }
+
+  return `${roundToMaxDecimals(vwValue)}vw`
+}
+
+/**
+ * Converts a pixel value to rem units.
+ *
+ * @param target - Target pixel value to convert
+ * @param context - Base font size in pixels (default: 16)
+ * @returns CSS string with rem units (e.g., "1.5rem")
+ *
+ * @example
+ * ```ts
+ * torem(24) // "1.5rem" (24 / 16)
+ * torem(18, 14) // "1.29rem" (18 / 14)
+ * torem(0) // "0"
+ * ```
+ */
+export function torem(target: number, context = 16): string {
+  if (target === 0) {
+    return "0"
+  }
+
+  return `${roundToMaxDecimals(target / context)}rem`
+}
+
+/**
+ * Converts a pixel value to em units.
+ *
+ * @param target - Target pixel value to convert
+ * @param context - Context size in pixels (required)
+ * @returns CSS string with em units (e.g., "1.5em")
+ *
+ * @example
+ * ```ts
+ * toem(24, 16) // "1.5em" (24 / 16)
+ * toem(18, 14) // "1.29em" (18 / 14)
+ * toem(0, 16) // "0"
+ * ```
+ */
+export function toem(target: number, context: number): string {
+  if (target === 0) {
+    return "0"
+  }
+
+  return `${roundToMaxDecimals(target / context)}em`
+}

package/src/templates/next-default/package.json

@@ -8,17 +8,21 @@
     "analyze": "cross-env ANALYZE=true bun run build",
     "analyze:experimental": "next experimental-analyze",
     "build": "next build",
-    "dev": "next dev",
-    "dev:https": "next dev --experimental-https",
-    "dev:inspect": "next dev --inspect",
+    "dev": "bun ./lib/scripts/dev.ts",
+    "dev:https": "bun ./lib/scripts/dev.ts --https",
+    "dev:inspect": "bun ./lib/scripts/dev.ts --inspect",
     "format": "biome format --write .",
+    "knip": "bunx knip",
+    "knip:fix": "bunx knip --fix",
     "lighthouse": "bunx @unlighthouse/cli --site http://localhost:3000",
     "lint": "biome lint --max-diagnostics=200",
-    "lint:fix": "biome lint --write --unsafe --max-diagnostics=200",
+    "lint:fix": "biome check --write --unsafe --max-diagnostics=200",
+    "prepare": "lefthook install",
     "start": "next start",
     "typecheck": "tsgo --noEmit",
     "typecheck:compare": "bun run typecheck:tsc && bun run typecheck",
-    "typecheck:tsc": "tsc --noEmit --incremental false"
+    "typecheck:tsc": "tsc --noEmit --incremental false",
+    "update:packages": "cross-env NPM_CHECK_INSTALLER=bun bunx npm-check -u"
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
@@ -30,7 +34,7 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.14",
+    "@biomejs/biome": "^2.4.14",
     "@next/bundle-analyzer": "^16",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/postcss": "^4",
@@ -39,8 +43,9 @@
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "@typescript/native-preview": "^7.0.0-dev.20260122.3",
-    "babel-plugin-react-compiler": "1.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
     "cross-env": "^10.1.0",
+    "lefthook": "^1.13.0",
     "postcss-preset-env": "^10.6.1",
     "schema-dts": "^2.0.0",
     "tailwindcss": "^4",

package/src/templates/next-default/svg.d.ts

@@ -1,5 +1,6 @@
 declare module "*.svg" {
   import type { FC, SVGProps } from "react"
+
   const content: FC<SVGProps<SVGSVGElement>>
   export default content
 }

package/src/templates/next-experiments/.env.example

@@ -13,9 +13,9 @@
 # CORE (Recommended)
 # ============================================
 
-# Base URL (sitemaps, OG tags, canonical URLs)
-# On Vercel: auto-detected if unset. Set explicitly for custom domains.
-# Local: http://localhost:3000
+# Base URL for your site (used for SEO, canonical URLs, etc.)
+# Development: http://localhost:3000
+# Production: https://your-domain.com
 NEXT_PUBLIC_BASE_URL="http://localhost:3000"
 
 # Draft mode secret for preview functionality

package/src/templates/next-experiments/.knip.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://unpkg.com/knip@6/schema.json"
+}

package/src/templates/next-experiments/.vscode/extensions.json

@@ -7,14 +7,10 @@
     "bradlc.vscode-tailwindcss",
     "csstools.postcss",
 
-    // GraphQL (Shopify, etc.)
-    "graphql.vscode-graphql-syntax",
-
     // Sanity CMS (GROQ syntax + validation)
     "sanity-io.vscode-sanity",
 
     // DX Enhancements
-    "yoavbls.pretty-ts-errors",
-    "waderyan.gitblame"
+    "yoavbls.pretty-ts-errors"
   ]
 }

package/src/templates/next-experiments/.vscode/settings.json

@@ -82,7 +82,7 @@
     ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ],
-  "tailwindCSS.experimental.configFile": "./lib/styles/global.css",
+  "tailwindCSS.experimental.configFile": "./lib/styles/css/tailwind.css",
   "tailwindCSS.includeLanguages": {
     "typescriptreact": "html"
   },

package/src/templates/next-experiments/.zed/settings.json

@@ -0,0 +1,47 @@
+{
+  "format_on_save": "on",
+  "lsp": {
+    "vscode-css-language-server": {
+      "settings": {
+        "css": {
+          "lint": {
+            "unknownAtRules": "ignore"
+          }
+        }
+      }
+    }
+  },
+  "languages": {
+    "JavaScript": {
+      "language_servers": ["biome", "..."],
+      "formatter": { "language_server": { "name": "biome" } },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    },
+    "TypeScript": {
+      "formatter": { "language_server": { "name": "biome" } },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    },
+    "TSX": {
+      "formatter": { "language_server": { "name": "biome" } },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    },
+    "CSS": {
+      "formatter": { "language_server": { "name": "biome" } }
+    },
+    "JSON": {
+      "formatter": { "language_server": { "name": "biome" } }
+    },
+    "JSONC": {
+      "formatter": { "language_server": { "name": "biome" } }
+    }
+  }
+}

package/src/templates/next-experiments/README.md

@@ -34,16 +34,17 @@ lib/
   scripts/
   store/
   styles/
+    index.css
+    tokens.css
     global.css
+    fonts.ts
     cn.ts
   utils/
-    metadata.ts
-    portable-text-to-markdown.ts
-    json-ld.ts
 ```
 
 ## Styling
 
-- Import `@/lib/styles/global.css` once in `app/layout.tsx`.
-- `lib/styles/global.css` includes Tailwind utilities, theme tokens, and app-wide global styles.
-- `lib/styles/cn.ts` is the shared class merge helper.
+- Import `@/lib/styles/index.css` once in `app/layout.tsx`.
+- Edit `lib/styles/tokens.css` for theme variables, breakpoints, and custom Tailwind utilities.
+- Edit `lib/styles/global.css` for reset rules and app-wide global styles.
+- `lib/styles/fonts.ts` handles font variables.

package/src/templates/next-experiments/_gitignore

@@ -29,7 +29,6 @@
 # misc
 .DS_Store
 *.pem
-.cursor/scratchpad.md
 
 # debug
 npm-debug.log*
@@ -57,8 +56,7 @@ yarn-error.log*
 certificates
 
 next-env.d.ts
-# claude
-.claude
+
 
 # unlighthouse
 .unlighthouse/

package/src/templates/next-experiments/app/layout.tsx

@@ -1,40 +1,26 @@
-import type { Metadata, Viewport } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import { type PropsWithChildren, Suspense } from "react";
-import { Link } from "@/components/ui/link";
-import AppData from "@/package.json";
-import "@/lib/styles/global.css";
-import { cn } from "@/lib/styles/cn";
-import { getBaseUrl } from "@/lib/utils/url";
+import type { Metadata, Viewport } from "next"
+import { Geist } from "next/font/google"
+import { type PropsWithChildren, Suspense } from "react"
+import { Link } from "@/components/ui/link"
+import { fontsVariable } from "@/lib/styles/fonts"
+import AppData from "@/package.json"
+import "@/lib/styles/index.css"
+import { cn } from "@/lib/styles/cn"
 import {
-  JsonLd,
-  generateWebSiteJsonLd,
   generateOrganizationJsonLd,
-} from "@/lib/utils/json-ld";
+  generateWebSiteJsonLd,
+  JsonLd,
+} from "@/lib/utils/json-ld"
 
-const APP_NAME = AppData.name;
-const APP_DEFAULT_TITLE = "Basement Starter";
-const APP_TITLE_TEMPLATE = "%s - Basement Starter";
-const APP_DESCRIPTION = AppData.description;
-const APP_BASE_URL = getBaseUrl();
+const APP_NAME = AppData.name
+const APP_DEFAULT_TITLE = "Basement Starter"
+const APP_TITLE_TEMPLATE = "%s - Basement Starter"
+const APP_DESCRIPTION = AppData.description
+const APP_BASE_URL = process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:3000"
 
 const geist = Geist({
   subsets: ["latin"],
-});
-
-const mono = Geist_Mono({
-  subsets: ["latin"],
-  display: "swap",
-  variable: "--geist-mono",
-  fallback: [
-    "ui-monospace",
-    "SFMono-Regular",
-    "Consolas",
-    "Liberation Mono",
-    "Menlo",
-    "monospace",
-  ],
-});
+})
 
 export const metadata: Metadata = {
   alternates: {
@@ -87,19 +73,19 @@ export const metadata: Metadata = {
       template: APP_TITLE_TEMPLATE,
     },
   },
-};
+}
 
 export const viewport: Viewport = {
   colorScheme: "normal",
   themeColor: "#000000",
-};
+}
 
 export default async function Layout({ children }: PropsWithChildren) {
   return (
     <html
       lang="en"
       dir="ltr"
-      className={cn(mono.variable, geist.className)}
+      className={cn(fontsVariable, geist.className)}
       // NOTE: This is due to the data-theme attribute being set which causes hydration errors
       suppressHydrationWarning
     >
@@ -130,5 +116,5 @@ export default async function Layout({ children }: PropsWithChildren) {
         {children}
       </body>
     </html>
-  );
+  )
 }

package/src/templates/next-experiments/app/robots.ts

@@ -1,4 +1,6 @@
-import type { MetadataRoute } from "next";
+import type { MetadataRoute } from "next"
+
+const APP_BASE_URL = process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:3000"
 
 export default function robots(): MetadataRoute.Robots {
   return {
@@ -7,5 +9,6 @@ export default function robots(): MetadataRoute.Robots {
       allow: "/",
       disallow: [],
     },
-  };
+    sitemap: `${APP_BASE_URL}/sitemap.xml`,
+  }
 }

package/src/templates/next-experiments/app/sitemap.xml/route.ts

@@ -0,0 +1,51 @@
+import { getBaseUrl } from "@/lib/utils/url"
+
+const BASE_URL = getBaseUrl()
+
+export const dynamic = "force-dynamic"
+
+interface SitemapEntry {
+  loc: string
+  lastmod: string
+  changefreq: string
+  priority: number
+}
+
+function toXml(entries: SitemapEntry[]): string {
+  const urls = entries
+    .map(
+      (entry) => `
+  <url>
+    <loc>${entry.loc}</loc>
+    <lastmod>${entry.lastmod}</lastmod>
+    <changefreq>${entry.changefreq}</changefreq>
+    <priority>${entry.priority}</priority>
+  </url>`
+    )
+    .join("")
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${urls}
+</urlset>`
+}
+
+function getStaticEntries(): SitemapEntry[] {
+  return [
+    {
+      loc: BASE_URL,
+      lastmod: new Date().toISOString(),
+      changefreq: "daily",
+      priority: 1,
+    },
+  ]
+}
+
+export async function GET() {
+  const entries: SitemapEntry[] = getStaticEntries()
+
+  return new Response(toXml(entries), {
+    headers: {
+      "Content-Type": "application/xml",
+    },
+  })
+}

package/src/templates/next-experiments/biome.json

@@ -95,6 +95,7 @@
       },
       "nursery": {
         "useSortedClasses": {
+          "fix": "safe",
           "level": "warn",
           "options": {
             "attributes": ["class", "className"],
@@ -214,11 +215,12 @@
       }
     },
     {
-      "includes": ["lib/styles/global.css"],
+      "includes": ["lib/styles/tokens.css"],
       "linter": {
         "rules": {
           "suspicious": {
-            "noDuplicateCustomProperties": "off"
+            "noDuplicateCustomProperties": "off",
+            "noUnknownAtRules": "off"
           }
         }
       }

package/src/templates/next-experiments/components/layout/navigation-menu.tsx

@@ -122,6 +122,6 @@ export {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
   NavigationMenuViewport,
+  navigationMenuTriggerStyle,
 }

package/src/templates/next-experiments/components/layout/wrapper/index.tsx

@@ -3,17 +3,17 @@
  *
  * Customize the Header and Footer components for your project needs.
  */
-import cn from "clsx";
-import { Footer } from "@/components/layout/footer";
-import { Header } from "@/components/layout/header";
-import { Theme, type ThemeName } from "@/components/layout/theme";
+import cn from "clsx"
+import { Footer } from "@/components/layout/footer"
+import { Header } from "@/components/layout/header"
+import { Theme, type ThemeName } from "@/components/layout/theme"
 
 /**
  * Props for the Wrapper component.
  */
 interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Theme to apply ('dark' | 'light'). Defaults to 'dark'. */
-  theme?: ThemeName;
+  theme?: ThemeName
 }
 
 /**
@@ -58,5 +58,5 @@ export function Wrapper({
       </main>
       <Footer />
     </Theme>
-  );
+  )
 }