bsmnt 0.4.0 → 0.4.2

package/src/templates/next-experiments/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-experiments/package.json

@@ -8,13 +8,13 @@
     "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 .",
     "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",
     "start": "next start",
     "typecheck": "tsgo --noEmit",
     "typecheck:compare": "bun run typecheck:tsc && bun run typecheck",
@@ -33,7 +33,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",
@@ -42,7 +42,7 @@
     "@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",
     "postcss-preset-env": "^10.6.1",
     "schema-dts": "^2.0.0",

package/src/templates/next-experiments/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-pagebuilder/.vscode/extensions.json

@@ -0,0 +1,16 @@
+{
+  "recommendations": [
+    // Formatting & Linting
+    "biomejs.biome",
+
+    // CSS & Styling
+    "bradlc.vscode-tailwindcss",
+    "csstools.postcss",
+
+    // Sanity CMS (GROQ syntax + validation)
+    "sanity-io.vscode-sanity",
+
+    // DX Enhancements
+    "yoavbls.pretty-ts-errors"
+  ]
+}

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

@@ -0,0 +1,105 @@
+{
+  // Language-specific formatters (explicit per-language ensures no fallback to other formatters)
+  "[css]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[postcss]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "colorize.languages": [
+    "javascript",
+    "typescript",
+    "css",
+    "scss",
+    "less",
+    "html",
+    "json",
+    "yaml",
+    "markdown",
+    "glsl"
+  ],
+  "css.lint.unknownAtRules": "ignore",
+
+  // CSS (Tailwind v4)
+  "css.lint.validProperties": ["user-drag"],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.biome": "always",
+    "source.organizeImports.biome": "always"
+  },
+  "editor.defaultFormatter": "biomejs.biome",
+
+  // Formatting
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
+
+  // File associations
+  "files.associations": {
+    "*.css": "css",
+    "*.json": "jsonc"
+  },
+
+  // General
+  "files.eol": "\n",
+  // "typescript.experimental.useTsgo": true, // Disabled: tsgo doesn't support Next.js plugin
+  "javascript.suggest.autoImports": true,
+  // Disable Prettier to prevent silent formatter conflicts
+  "prettier.enable": false,
+
+  // Search exclusions (performance)
+  "search.exclude": {
+    "**/.next": true,
+    "**/.vercel": true,
+    "**/bun.lock": true,
+    "**/lib/integrations/sanity/sanity.types.ts": true,
+    "**/node_modules": true
+  },
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    ".*ClassName",
+    ".*Styles"
+  ],
+  "tailwindCSS.classFunctions": ["cn", "cva", "twMerge", "cx"],
+  "tailwindCSS.experimental.classRegex": [
+    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
+  "tailwindCSS.experimental.configFile": "./lib/styles/css/tailwind.css",
+  "tailwindCSS.includeLanguages": {
+    "typescriptreact": "html"
+  },
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+
+  // TypeScript
+  "typescript.suggest.autoImports": true,
+  "typescript.tsdk": "node_modules/typescript/lib",
+
+  // Editor labels (fixed for .tsx files)
+  "workbench.editor.customLabels.patterns": {
+    "**/app/**/layout.tsx": "${dirname(1)}/${dirname} <layout>",
+    "**/app/**/page.tsx": "${dirname(1)}/${dirname} <page>",
+    "**/app/api/**/route.ts": "${dirname(1)}/${dirname} <route>",
+    "**/components/**/index.tsx": "${dirname} <component>"
+  },
+  "workbench.editorAssociations": {
+    "*.svg": "default"
+  }
+}

package/src/templates/next-pagebuilder/.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-pagebuilder/_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-pagebuilder/app/(content)/[[...slug]]/page.tsx

@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation"
+import { PageDocument } from "@/components/page-document"
 import { client } from "@/lib/integrations/sanity/client"
-import { sanityFetch } from "@/lib/integrations/sanity/live"
+import { fetchSanity } from "@/lib/integrations/sanity/live"
 import {
   ALL_PAGE_SLUGS_QUERY,
   PAGE_QUERY,
@@ -11,10 +12,9 @@ import type {
 } from "@/lib/integrations/sanity/sanity.types"
 import { generateSanityMetadata } from "@/lib/utils/metadata"
 import { getSlugTag } from "@/lib/utils/slug-tag"
-import { PageDocument } from "@/components/page-document"
 
 const getPageDocument = async (slug: string | null, stega = true) =>
-  sanityFetch({
+  fetchSanity<PAGE_QUERY_RESULT>({
     query: PAGE_QUERY,
     params: { slug },
     tags: [getSlugTag(slug)],
@@ -32,15 +32,19 @@ const getResolvedPage = async (
   return (page as NonNullable<PAGE_QUERY_RESULT> | null) ?? null
 }
 
+type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>
+
 export const generateStaticParams = async () => {
-  if (!client) return []
+  if (!client) return [{ slug: [] }]
 
   const slugs =
     await client.fetch<ALL_PAGE_SLUGS_QUERY_RESULT>(ALL_PAGE_SLUGS_QUERY)
 
+  if (!slugs?.length) return [{ slug: [] }]
+
   return (slugs ?? []).flatMap((page) => {
     if (!page.slug) return []
-    return { slug: page.slug.split("/") }
+    return page.slug === "/" ? { slug: [] } : { slug: page.slug.split("/") }
   })
 }
 
@@ -56,13 +60,18 @@ export const generateMetadata = async ({ params }: Props) => {
     : {}
 }
 
-export default async function CatchAllPage({ params }: Props) {
+export default async function CatchAllPage({
+  params,
+  searchParams,
+}: Props & {
+  searchParams: SearchParams
+}) {
   const { slug } = await params
 
   const path = toPath(slug)
   const page = await getResolvedPage(path)
 
-  if (!page) return notFound()
+  if (!page) notFound()
 
-  return <PageDocument page={page} path={path} />
+  return <PageDocument page={page} path={path} searchParams={searchParams} />
 }

package/src/templates/next-pagebuilder/app/(content)/layout.tsx

@@ -1,13 +1,24 @@
 import { JsonLd } from "@/components/layout/json-ld"
 import { Wrapper } from "@/components/layout/wrapper"
 import { SanityVisualEditing } from "@/components/sanity/visual-editing"
+import { getSiteLayoutData } from "@/lib/integrations/sanity/fetchers/layout"
 
-const Layout = async ({ children }: { children: React.ReactNode }) => (
-  <>
-    <JsonLd />
-    <Wrapper>{children}</Wrapper>
-    <SanityVisualEditing />
-  </>
-)
+const Layout = async ({ children }: { children: React.ReactNode }) => {
+  const layoutData = await getSiteLayoutData()
+
+  return (
+    <>
+      <JsonLd navbar={layoutData.navbar} companyData={layoutData.companyData} />
+      <Wrapper
+        navbar={layoutData.navbar}
+        footer={layoutData.footer}
+        companyData={layoutData.companyData}
+      >
+        {children}
+      </Wrapper>
+      <SanityVisualEditing />
+    </>
+  )
+}
 
 export default Layout

package/src/templates/next-pagebuilder/app/actions/refresh.ts

@@ -0,0 +1,5 @@
+"use client"
+
+export async function refreshAction(): Promise<"refresh"> {
+  return "refresh"
+}

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

@@ -1,7 +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";
+const APP_BASE_URL = process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:3000"
 
 export default function robots(): MetadataRoute.Robots {
   return {
@@ -11,5 +10,5 @@ export default function robots(): MetadataRoute.Robots {
       disallow: [],
     },
     sitemap: `${APP_BASE_URL}/sitemap.xml`,
-  };
+  }
 }

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

@@ -94,6 +94,7 @@
       },
       "nursery": {
         "useSortedClasses": {
+          "fix": "safe",
           "level": "warn",
           "options": {
             "attributes": ["class", "className"],
@@ -139,6 +140,11 @@
         "useTemplate": "warn"
       },
       "suspicious": {
+        "noConsole": {
+          "fix": "none",
+          "level": "warn",
+          "options": { "allow": ["warn", "error", "info"] }
+        },
         "noDebugger": "warn",
         "noDoubleEquals": "error",
         "noEmptyBlockStatements": "warn",
@@ -224,6 +230,17 @@
           }
         }
       }
+    },
+    {
+      "includes": ["lib/styles/tokens.css"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noDuplicateCustomProperties": "off",
+            "noUnknownAtRules": "off"
+          }
+        }
+      }
     }
   ],
   "plugins": [

package/src/templates/next-pagebuilder/components/layout/footer/index.tsx

@@ -1,32 +1,21 @@
 import { Link } from "@/components/ui/link"
 import { SanityImage } from "@/components/ui/sanity-image"
-import {
-  type CompanyData,
-  type FooterData,
-  getCompanyData,
-  getFooter,
+import type {
+  CompanyData,
+  FooterData,
 } from "@/lib/integrations/sanity/fetchers/layout"
 
 type FooterLinkGroup = NonNullable<FooterData["links"]>[number]
 type FooterLinkItem = NonNullable<FooterLinkGroup["items"]>[number]
 type SocialLink = NonNullable<CompanyData["socialLinks"]>[number]
 
-export const Footer = async () => {
-  const [footer, companyData] = await Promise.all([
-    getFooter(),
-    getCompanyData(),
-  ])
-
-  const year = new Date().getFullYear()
-
-  if (!(footer || companyData)) {
-    return (
-      <footer className="border-black/10 border-t px-6 py-3">
-        <p>&copy; {year} Basement</p>
-      </footer>
-    )
-  }
-
+export const Footer = ({
+  footer,
+  companyData,
+}: {
+  footer: FooterData | null
+  companyData: CompanyData | null
+}) => {
   const links = footer?.links ?? []
 
   return (
@@ -58,7 +47,9 @@ export const Footer = async () => {
         )}
 
         <div className="flex flex-row items-center justify-between gap-3 border-black/10 border-t pt-4">
-          <p className="w-fit">&copy; {year} Basement</p>
+          <p className="w-fit">
+            &copy; <CurrentYear /> Basement
+          </p>
 
           {companyData?.socialLinks && companyData.socialLinks.length > 0 ? (
             <div className="flex w-fit flex-wrap items-center gap-x-4 gap-y-2">
@@ -93,3 +84,7 @@ export const Footer = async () => {
     </footer>
   )
 }
+
+const CurrentYear = () => {
+  return <span>{new Date().getFullYear()}</span>
+}

package/src/templates/next-pagebuilder/components/layout/header/index.tsx

@@ -1,8 +1,6 @@
-import { getNavbar } from "@/lib/integrations/sanity/fetchers/layout"
-
+import type { NavbarData } from "@/lib/integrations/sanity/fetchers/layout"
 import { HeaderClient } from "./header-client"
 
-export const Header = async () => {
-  const navbar = await getNavbar()
-  return <HeaderClient data={navbar} />
+export const Header = ({ data }: { data: NavbarData | null }) => {
+  return <HeaderClient data={data} />
 }