bsmnt 0.4.1 → 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,4 +1,5 @@
 import { notFound } from "next/navigation"
+import { PageDocument } from "@/components/page-document"
 import { client } from "@/lib/integrations/sanity/client"
 import { fetchSanity } from "@/lib/integrations/sanity/live"
 import {
@@ -9,7 +10,6 @@ import type {
   ALL_PAGE_SLUGS_QUERY_RESULT,
   PAGE_QUERY_RESULT,
 } from "@/lib/integrations/sanity/sanity.types"
-import { PageDocument } from "@/components/page-document"
 import { generateSanityMetadata } from "@/lib/utils/metadata"
 import { getSlugTag } from "@/lib/utils/slug-tag"
 

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

@@ -3,7 +3,6 @@ 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 }) => {
   const layoutData = await getSiteLayoutData()
 

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,8 +1,8 @@
 import { Link } from "@/components/ui/link"
 import { SanityImage } from "@/components/ui/sanity-image"
-import {
-  type CompanyData,
-  type FooterData,
+import type {
+  CompanyData,
+  FooterData,
 } from "@/lib/integrations/sanity/fetchers/layout"
 
 type FooterLinkGroup = NonNullable<FooterData["links"]>[number]
@@ -85,7 +85,6 @@ export const Footer = ({
   )
 }
 
-
 const CurrentYear = () => {
   return <span>{new Date().getFullYear()}</span>
-}
+}

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

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

package/src/templates/next-pagebuilder/components/page-builder/components/article-content/index.tsx

@@ -1,13 +1,10 @@
+import type { ArticleContentProps } from "@/components/page-builder/types"
 import { RichText } from "@/components/sanity/rich-text"
 import { SanityImage } from "@/components/ui/sanity-image"
 import { formatDate } from "@/lib/utils/format-date"
-import {RelatedPostItem} from "./related-post-item"
-import type { ArticleContentProps } from "@/components/page-builder/types"
-
+import { RelatedPostItem } from "./related-post-item"
 
-export function ArticleContent({
-block
-}: ArticleContentProps) {
+export function ArticleContent({ block }: ArticleContentProps) {
   const { author, body, categories, date, relatedPosts, thumbnail } = block
   return (
     <div className="py-8 md:py-12">
@@ -71,9 +68,7 @@ block
             {relatedPosts.map((post) => {
               if (!post.resolvedSlug) return null
 
-              return (
-                <RelatedPostItem key={post._id} post={post} />
-              )
+              return <RelatedPostItem key={post._id} post={post} />
             })}
           </ul>
         </aside>

package/src/templates/next-pagebuilder/components/page-builder/components/article-content/related-post-item.tsx

@@ -1,8 +1,8 @@
+import type { ArticleRelatedPost } from "@/components/page-builder/types"
 import { Link } from "@/components/ui/link"
 import { SanityImage } from "@/components/ui/sanity-image"
-import type { ArticleRelatedPost } from "@/components/page-builder/types"
-  
-export const RelatedPostItem = ({ post }: {post: ArticleRelatedPost}) => {
+
+export const RelatedPostItem = ({ post }: { post: ArticleRelatedPost }) => {
   return (
     <li key={post._id}>
       <Link
@@ -24,4 +24,4 @@ export const RelatedPostItem = ({ post }: {post: ArticleRelatedPost}) => {
       </Link>
     </li>
   )
-}
+}

package/src/templates/next-pagebuilder/components/page-builder/components/content-collection/content-card.tsx

@@ -46,7 +46,9 @@ export const ContentCard = ({ article, className }: ContentCardProps) => {
             </div>
           ) : null}
 
-          <h3 className="text-balance font-medium text-lg leading-snug">{title}</h3>
+          <h3 className="text-balance font-medium text-lg leading-snug">
+            {title}
+          </h3>
 
           {authorName || formattedDate ? (
             <div className="flex items-center gap-2 text-current/60 text-sm">

package/src/templates/next-pagebuilder/components/page-builder/components/content-collection/index.tsx

@@ -8,9 +8,9 @@ import { ContentFilters } from "./content-filters"
 import { ContentGrid } from "./content-grid"
 import { ContentPaginationNav } from "./content-pagination-nav"
 import type {
+  ContentCategory,
   ContentCollectionBlock,
   ContentCollectionSearchParams,
-  ContentCategory,
   ContentItemCard,
   SearchParams,
 } from "./types"
@@ -42,7 +42,9 @@ const getTotalPages = ({
   totalCount: number
 }) => {
   const regularTotal =
-    activeCategory === "" ? Math.max(0, totalCount - FEATURED_COUNT) : totalCount
+    activeCategory === ""
+      ? Math.max(0, totalCount - FEATURED_COUNT)
+      : totalCount
 
   return Math.max(1, Math.ceil(regularTotal / PAGE_SIZE))
 }
@@ -61,7 +63,8 @@ const getCollectionWindow = ({
     fetchLimit: isFirstPageNoFilter ? PAGE_SIZE + FEATURED_COUNT : PAGE_SIZE,
     fetchOffset: isFirstPageNoFilter
       ? 0
-      : (currentPage - 1) * PAGE_SIZE + (activeCategory === "" ? FEATURED_COUNT : 0),
+      : (currentPage - 1) * PAGE_SIZE +
+        (activeCategory === "" ? FEATURED_COUNT : 0),
   }
 }
 
@@ -95,7 +98,9 @@ function CollectionResultsSection({
   isFirstPageNoFilter: boolean
   subtitle: string | null | undefined
 }) {
-  const featuredItems = isFirstPageNoFilter ? items.slice(0, FEATURED_COUNT) : []
+  const featuredItems = isFirstPageNoFilter
+    ? items.slice(0, FEATURED_COUNT)
+    : []
   const regularItems = isFirstPageNoFilter ? items.slice(FEATURED_COUNT) : items
   const isEmpty = featuredItems.length === 0 && regularItems.length === 0
 
@@ -158,7 +163,9 @@ export async function ContentCollection({
   )
 
   const canonicalCategory =
-    activeCategory && validCategorySlugs.has(activeCategory) ? activeCategory : ""
+    activeCategory && validCategorySlugs.has(activeCategory)
+      ? activeCategory
+      : ""
 
   const { data: totalCountData } = await fetchSanity<number>({
     query: BLOG_ARTICLES_COUNT_QUERY,

package/src/templates/next-pagebuilder/components/page-builder/components/content-collection/types.ts

@@ -13,5 +13,7 @@ export type ContentCollectionBlock = Extract<
 >
 
 export type BlogArticleCard = ALL_BLOG_ARTICLES_QUERY_RESULT[number]
-export type ContentCategory = NonNullable<BlogArticleCard["blogContent"]>["categories"][number]
+export type ContentCategory = NonNullable<
+  NonNullable<BlogArticleCard["blogContent"]>["categories"]
+>[number]
 export type ContentItemCard = BlogArticleCard