bsmnt 0.4.1 → 0.4.2

package/src/templates/next-webgl/lib/utils/strings.ts

@@ -0,0 +1,246 @@
+/**
+ * String & Object Utilities
+ *
+ * Helper functions for string manipulation, object operations, and refs.
+ */
+
+import type { Ref } from "react"
+
+// =============================================================================
+// STRING UTILITIES
+// =============================================================================
+
+/**
+ * Converts text to URL-friendly slug format.
+ *
+ * @param text - Text to convert (must have toString method)
+ * @returns URL-safe slug string
+ *
+ * @example
+ * ```ts
+ * slugify('Hello World!') // 'hello-world'
+ * slugify('Café & Restaurant') // 'cafe-restaurant'
+ * ```
+ */
+export function slugify(text: { toString: () => string }) {
+  return text
+    .toString()
+    .normalize("NFKD")
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, "-")
+    .replace(/[^\w-]+/g, "")
+    .replace(/--+/g, "-")
+}
+
+/**
+ * Converts first character to lowercase (camelCase format).
+ *
+ * @param inputString - String to convert
+ * @returns String with lowercase first character
+ *
+ * @example
+ * ```ts
+ * convertToCamelCase('HelloWorld') // 'helloWorld'
+ * ```
+ */
+export function convertToCamelCase(inputString: string) {
+  return inputString.charAt(0).toLowerCase() + inputString.slice(1)
+}
+
+/**
+ * Capitalizes the first letter of a string.
+ *
+ * @param inputString - String to capitalize
+ * @returns String with capitalized first letter
+ *
+ * @example
+ * ```ts
+ * capitalizeFirstLetter('hello') // 'Hello'
+ * capitalizeFirstLetter('world') // 'World'
+ * ```
+ */
+export function capitalizeFirstLetter(inputString: string) {
+  return inputString.charAt(0).toUpperCase() + inputString.slice(1)
+}
+
+/**
+ * Formats a number as a two-digit string (padding with zero).
+ *
+ * @param number - Number to format
+ * @returns Two-digit string representation
+ *
+ * @example
+ * ```ts
+ * twoDigits(5)  // '05'
+ * twoDigits(23) // '23'
+ * ```
+ */
+export function twoDigits(number: number) {
+  return number > 9 ? `${number}` : `0${number}`
+}
+
+/**
+ * Adds commas as thousands separators to numbers.
+ *
+ * @param x - Number to format (must have toString method)
+ * @returns String with comma separators
+ *
+ * @example
+ * ```ts
+ * numberWithCommas(1234)     // '1,234'
+ * numberWithCommas(1234567)  // '1,234,567'
+ * ```
+ */
+export function numberWithCommas(x: { toString: () => string }) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+}
+
+// =============================================================================
+// ARRAY & OBJECT UTILITIES
+// =============================================================================
+
+export function checkIsArray<T>(value: T): T extends unknown[] ? T[0] : T {
+  return (Array.isArray(value) ? value[0] : value) as T extends unknown[]
+    ? T[0]
+    : T
+}
+
+/**
+ * Checks if an object is empty (has no enumerable properties).
+ *
+ * @param obj - Object to check
+ * @returns True if object is empty or null/undefined
+ *
+ * @example
+ * ```ts
+ * isEmptyObject({})        // true
+ * isEmptyObject({ a: 1 })  // false
+ * isEmptyObject(null)      // true
+ * ```
+ */
+export function isEmptyObject(obj: Record<string, unknown>) {
+  if (!obj) return true
+  return Object.keys(obj).length === 0
+}
+
+/**
+ * Checks if an array is empty or if the input is not an array.
+ *
+ * @param arr - Array or value to check
+ * @returns True if empty array or not an array
+ *
+ * @example
+ * ```ts
+ * isEmptyArray([])      // true
+ * isEmptyArray([1, 2])  // false
+ * isEmptyArray('test')  // true (not an array)
+ * isEmptyArray(null)    // true
+ * ```
+ */
+export function isEmptyArray(arr: string | unknown[]) {
+  if (!arr) return true
+  return Array.isArray(arr) && arr.length === 0
+}
+
+export function arraytoObject(array: Record<string, unknown>[]) {
+  return array.reduce((acc: Record<string, unknown>, currentObj) => {
+    const key = Object.keys(currentObj)[0]
+    if (key !== undefined) {
+      acc[key] = currentObj[key]
+    }
+    return acc
+  }, {})
+}
+
+export function shortenObjectKeys(
+  obj: Record<string, unknown>,
+  keyword: string
+) {
+  const regex = new RegExp(`[^]+${keyword}(.*)`)
+
+  for (const key in obj) {
+    const match = key.match(regex)
+
+    if (match?.[1]) {
+      const newKey = convertToCamelCase(match[1])
+      obj[newKey] = obj[key]
+      delete obj[key]
+    }
+  }
+
+  return obj
+}
+
+export function filterObjectKeys(
+  obj: { [x: string]: unknown },
+  keyword: string
+) {
+  const newObj: { [x: string]: unknown } = {}
+
+  for (const key in obj) {
+    const match = key.includes(keyword)
+
+    if (match) {
+      newObj[key] = obj[key]
+    }
+  }
+
+  return newObj
+}
+
+export function iterableObject(
+  obj: { [s: string]: unknown } | ArrayLike<unknown>
+) {
+  return Object.entries(obj).map(([, value]) => {
+    return value
+  })
+}
+
+// =============================================================================
+// REF UTILITIES
+// =============================================================================
+
+/**
+ * Merges multiple React refs into a single ref callback.
+ *
+ * Useful when you need to assign multiple refs to the same element,
+ * such as combining a local ref with a forwarded ref.
+ *
+ * @param refs - Refs to merge (functions and ref objects supported)
+ * @returns A ref callback that updates all provided refs
+ *
+ * @example
+ * ```tsx
+ * // Component that needs both local and forwarded ref
+ * function MyComponent({ ref }: { ref: React.Ref<HTMLDivElement> }) {
+ *   const localRef = useRef<HTMLDivElement>(null)
+ *   const mergedRef = mergeRefs(localRef, ref)
+ *
+ *   return <div ref={mergedRef}>Content</div>
+ * }
+ *
+ * // Forward ref pattern
+ * const ForwardedComponent = forwardRef(MyComponent)
+ * ```
+ */
+export function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T> {
+  return (value) => {
+    const cleanups = refs.reduce<VoidFunction[]>((accumulator, ref) => {
+      if (typeof ref === "function") {
+        const cleanup = ref(value)
+        if (typeof cleanup === "function") {
+          accumulator.push(cleanup)
+        }
+      } else if (ref) {
+        ref.current = value
+      }
+
+      return accumulator
+    }, [])
+
+    return () => {
+      for (const cleanup of cleanups) cleanup()
+    }
+  }
+}

package/src/templates/next-webgl/lib/utils/types.d.ts

@@ -0,0 +1,15 @@
+// Type augmentations and module declarations
+
+// React CSS custom properties support
+import "react"
+
+declare module "react" {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number
+  }
+}
+
+// Global window extensions
+declare global {
+  interface Window {}
+}

package/src/templates/next-webgl/lib/utils/url.ts

@@ -8,9 +8,12 @@
  * 4. localhost fallback
  */
 export function getBaseUrl(): string {
-  if (process.env.NEXT_PUBLIC_BASE_URL) return process.env.NEXT_PUBLIC_BASE_URL;
-  if (process.env.VERCEL_PROJECT_PRODUCTION_URL)
-    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;
-  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
-  return "http://localhost:3000";
+  if (process.env.NEXT_PUBLIC_BASE_URL) {
+    return process.env.NEXT_PUBLIC_BASE_URL
+  }
+  if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {
+    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
+  }
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`
+  return "http://localhost:3000"
 }

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

@@ -8,21 +8,25 @@
     "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": {
     "@react-three/drei": "^11.0.0-alpha.4",
-    "@react-three/fiber": "10.0.0-alpha.2",
+    "@react-three/fiber": "^10.0.0-alpha.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "next": "^16",
@@ -33,7 +37,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",
@@ -43,8 +47,9 @@
     "@types/react-dom": "^19.2.3",
     "@types/three": "^0.182.0",
     "@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-webgl/svg.d.ts

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