bsmnt 0.9.0 → 0.11.0

package/src/templates/next-webgl/lib/utils/README.md

@@ -5,10 +5,12 @@ Pure utility functions organized by concern.
 Use explicit imports for clarity and better tree-shaking:
 
 ```tsx
-import { clamp, lerp, mapRange } from '@/utils/math'
-import { slugify } from '@/utils/strings'
-import { generatePageMetadata } from '@/utils/metadata'
-import { tovw, torem, toem } from '@/utils/viewport'
+import { clamp, lerp, mapRange } from '@/lib/utils/math'
+import { slugify } from '@/lib/utils/strings'
+import { generatePageMetadata } from '@/lib/utils/metadata'
+import { tovw, torem, toem } from '@/lib/utils/viewport'
+import { buildImageSizes, buildGridImageSizes } from '@/lib/utils/image-sizes'
+import { useMergeRefs } from '@/lib/utils/merge-refs'
 ```
 
 ## Modules
@@ -18,8 +20,10 @@ import { tovw, torem, toem } from '@/utils/viewport'
 | `math` | `clamp`, `lerp`, `mapRange`, `modulo`, `normalize`, `distance` |
 | `easings` | All easing functions (`easeOutCubic`, etc.) |
 | `viewport` | `tovw`, `torem`, `toem` |
-| `strings` | `slugify`, `mergeRefs`, `capitalizeFirstLetter` |
+| `strings` | `slugify`, `capitalizeFirstLetter`, `twoDigits`, `numberWithCommas` |
 | `metadata` | `generatePageMetadata` |
+| `image-sizes` | `buildImageSizes`, `buildGridImageSizes` |
+| `merge-refs` | `mergeRefs`, `useMergeRefs`, `assignRef` |
 
 ## Common Patterns
 
@@ -37,4 +41,13 @@ toem(16, 14) // → "1.14em"
 
 // SEO
 export const metadata = generatePageMetadata({ title: 'About' })
+
+// next/image sizes — keys mirror the element's Tailwind variants
+buildImageSizes({ base: '100vw', desktop: '796px' })
+buildGridImageSizes({ base: 1, tablet: 2, desktop: 3 })
+
+// Refs — in a component, use the hook: an inline mergeRefs([...]) is a new
+// callback each render, so React detaches and reattaches every ref.
+const mergedRef = useMergeRefs([localRef, ref])
+return <input ref={mergedRef} />
 ```

package/src/templates/next-webgl/lib/utils/image-sizes.ts

@@ -0,0 +1,72 @@
+/** Mirrors the theme's `--breakpoint-*` scale, which clears Tailwind's defaults. */
+export const BASEMENT_BREAKPOINTS = {
+  mobile: 640,
+  tablet: 768,
+  "tablet-lg": 1024,
+  desktop: 1440,
+  "desktop-large": 1920,
+} as const
+
+export type BreakpointMap = Readonly<Record<string, number>>
+
+/** Mirrors the element's variants: `grid-cols-1 tablet:grid-cols-2` → `{ base: 1, tablet: 2 }`. */
+export type ByBreakpoint<
+  T,
+  B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
+> = { base: T } & Partial<Record<Extract<keyof B, string>, T>>
+
+function columnWidth(columns: number): string {
+  return `${Math.round(100 / columns)}vw`
+}
+
+/**
+ * Widest first, since `sizes` takes the first matching condition and the last
+ * entry must be bare. `min-width` matches the Tailwind variant's boundary; a
+ * `max-width: <next> - 1` one would leave a fractional-pixel gap.
+ */
+function toSizes(
+  base: string,
+  overrides: Readonly<Record<string, string | undefined>>,
+  scale: BreakpointMap
+): string {
+  const conditions: string[] = []
+
+  for (const [name, min] of Object.entries(scale).sort(
+    ([, a], [, b]) => b - a
+  )) {
+    const value = overrides[name]
+    if (value !== undefined) {
+      conditions.push(`(min-width: ${min}px) ${value}`)
+    }
+  }
+
+  return [...conditions, base].join(", ")
+}
+
+/** Builds `sizes` from the CSS length the image renders at per breakpoint. */
+export function buildImageSizes<
+  B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
+>(widths: ByBreakpoint<string, B>, breakpoints?: B): string {
+  const { base, ...overrides } = widths
+  return toSizes(base, overrides, breakpoints ?? BASEMENT_BREAKPOINTS)
+}
+
+/**
+ * Builds `sizes` from a grid's column count per breakpoint. Rounded: `sizes`
+ * only steers which srcset candidate the browser picks, and gaps make the real
+ * column narrower than `100 / N` anyway.
+ */
+export function buildGridImageSizes<
+  B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
+>(columns: ByBreakpoint<number, B>, breakpoints?: B): string {
+  const { base, ...overrides } = columns
+  const widths: Record<string, string> = {}
+
+  for (const [name, count] of Object.entries(overrides)) {
+    if (count !== undefined) {
+      widths[name] = columnWidth(count)
+    }
+  }
+
+  return toSizes(columnWidth(base), widths, breakpoints ?? BASEMENT_BREAKPOINTS)
+}

package/src/templates/next-webgl/lib/utils/merge-refs.ts

@@ -0,0 +1,56 @@
+import { type Ref, type RefCallback, useRef } from "react"
+
+/** Returns the ref's own cleanup callback when it provides one (React 19). */
+export function assignRef<T>(
+  ref: Ref<T> | undefined,
+  value: T | null
+): ReturnType<RefCallback<T>> {
+  if (typeof ref === "function") {
+    return ref(value)
+  }
+  if (ref) {
+    ref.current = value
+  }
+  return undefined
+}
+
+/** Merges object/callback refs into one callback ref, with React 19 ref cleanup. */
+export function mergeRefs<T>(refs: (Ref<T> | undefined)[]): RefCallback<T> {
+  return (value) => {
+    const cleanups = refs.map((ref) => {
+      const cleanup = assignRef(ref, value)
+      return typeof cleanup === "function"
+        ? cleanup
+        : () => assignRef(ref, null)
+    })
+    return () => {
+      for (const cleanup of cleanups) {
+        cleanup()
+      }
+    }
+  }
+}
+
+/**
+ * Memoized {@link mergeRefs}, stable across renders for the same ref list.
+ * Compares the list here rather than passing it as `useMemo` deps: React only
+ * compares the common prefix, so a list that grows or shrinks would silently
+ * reuse the old callback and leave a ref unattached or stale.
+ */
+export function useMergeRefs<T>(refs: (Ref<T> | undefined)[]): RefCallback<T> {
+  const cache = useRef<{
+    refs: (Ref<T> | undefined)[]
+    merged: RefCallback<T>
+  } | null>(null)
+
+  if (
+    !cache.current ||
+    cache.current.refs.length !== refs.length ||
+    cache.current.refs.some((ref, i) => ref !== refs[i])
+  ) {
+    // Snapshot: a caller may hand us a persistent array it mutates in place.
+    cache.current = { refs: [...refs], merged: mergeRefs(refs) }
+  }
+
+  return cache.current.merged
+}

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

@@ -1,11 +1,9 @@
 /**
  * String & Object Utilities
  *
- * Helper functions for string manipulation, object operations, and refs.
+ * Helper functions for string manipulation and object operations.
  */
 
-import type { Ref } from "react"
-
 // =============================================================================
 // STRING UTILITIES
 // =============================================================================
@@ -196,51 +194,3 @@ export function iterableObject(
     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/next.config.ts

@@ -5,9 +5,8 @@ const nextConfig: NextConfig = {
   reactStrictMode: true,
   reactCompiler: true,
   typedRoutes: true,
-  // Bundle the committed encrypted env files into serverless functions so
-  // instrumentation.ts can decrypt them at runtime. .env.keys is never listed
-  // (and is git/vercel-ignored); missing files are skipped.
+  // Bundle the committed encrypted env files so instrumentation.ts can decrypt
+  // them at runtime. `.env.keys` is never listed; missing files are skipped.
   outputFileTracingIncludes: {
     "/**": ["./.env", "./.env.production", "./.env.preview"],
   },
@@ -64,8 +63,10 @@ const nextConfig: NextConfig = {
       },
     },
   },
+  logging: {
+    browserToTerminal: true,
+  },
   experimental: {
-    browserDebugInfoInTerminal: true,
     optimizePackageImports: [
       "@react-three/drei",
       "@react-three/fiber",
@@ -86,7 +87,8 @@ const nextConfig: NextConfig = {
   },
   headers: async () => [
     {
-      source: "/(.*)",
+      // Excludes /studio* — must stay mutually exclusive with the rule below.
+      source: "/((?!studio(?:/|$)).*)",
       headers: [
         {
           key: "X-Content-Type-Options",
@@ -118,6 +120,37 @@ const nextConfig: NextConfig = {
         },
       ],
     },
+    {
+      // X-Frame-Options can't allow a third-party origin, and Next can't unset
+      // it from another rule — the iframe needs it absent, not overridden.
+      source: "/studio/:path*",
+      headers: [
+        {
+          key: "X-Content-Type-Options",
+          value: "nosniff",
+        },
+        {
+          key: "Content-Security-Policy",
+          value: "frame-ancestors 'self' https://*.sanity.io;",
+        },
+        {
+          key: "X-XSS-Protection",
+          value: "1; mode=block",
+        },
+        {
+          key: "X-DNS-Prefetch-Control",
+          value: "on",
+        },
+        {
+          key: "Strict-Transport-Security",
+          value: "max-age=63072000; includeSubDomains; preload",
+        },
+        {
+          key: "Permissions-Policy",
+          value: "camera=(), microphone=(), geolocation=()",
+        },
+      ],
+    },
   ],
   redirects: async () => [
     {

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

@@ -22,9 +22,7 @@
     "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 --noEmit",
     "update:packages": "cross-env NPM_CHECK_INSTALLER=bun bunx npm-check -u"
   },
   "dependencies": {
@@ -32,32 +30,31 @@
     "@react-three/fiber": "^10.0.0-alpha.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "next": "^16",
-    "react": "^19",
-    "react-dom": "^19",
+    "next": "^16.3.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "tailwind-merge": "^3.4.0",
-    "three": "^0.182.0",
+    "three": "^0.185.1",
     "zod": "^4.3.6"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.14",
-    "@next/bundle-analyzer": "^16",
+    "@next/bundle-analyzer": "^16.3.0",
     "@svgr/webpack": "^8.1.0",
-    "@tailwindcss/postcss": "^4",
+    "@tailwindcss/postcss": "^4.2.2",
     "@types/bun": "^1.3.6",
     "@types/node": "^24.13.1",
-    "@types/react": "^19.2.9",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@types/three": "^0.182.0",
-    "@typescript/native-preview": "^7.0.0-dev.20260122.3",
+    "@types/three": "^0.185.1",
     "babel-plugin-react-compiler": "^1.0.0",
     "cross-env": "^10.1.0",
     "knip": "^6.16.1",
     "lefthook": "^1.13.0",
     "postcss-preset-env": "^10.6.1",
     "schema-dts": "^2.0.0",
-    "tailwindcss": "^4",
-    "typescript": "^5"
+    "tailwindcss": "^4.2.2",
+    "typescript": "^7.0.2"
   },
   "trustedDependencies": [
     "@biomejs/biome",