bsmnt 0.2.0 → 0.2.4

package/src/templates/next-experiments/components/ui/image/index.tsx

@@ -4,13 +4,13 @@
  * Next.js Image wrapper with optimized defaults and error handling.
  * Always use this component instead of next/image directly.
  */
-"use client"
+"use client";
 
-import cn from "clsx"
-import NextImage, { type ImageProps as NextImageProps } from "next/image"
-import type { CSSProperties, Ref } from "react"
-import { breakpoints } from "@/lib/styles/config"
-import s from "./image.module.css"
+import cn from "clsx";
+import NextImage, { type ImageProps as NextImageProps } from "next/image";
+import type { CSSProperties, Ref } from "react";
+import { breakpoints } from "@/lib/styles/config";
+import s from "./image.module.css";
 
 /**
  * Enhanced Image component props extending Next.js Image.
@@ -20,26 +20,24 @@ import s from "./image.module.css"
  */
 export type ImageProps = Omit<NextImageProps, "objectFit" | "alt"> & {
   /** CSS object-fit property for image positioning */
-  objectFit?: CSSProperties["objectFit"]
+  objectFit?: CSSProperties["objectFit"];
   /** Display as block element (adds display: block) */
-  block?: boolean
+  block?: boolean;
   /** Size on mobile devices (e.g., "100vw", "50vw") */
-  mobileSize?: `${number}vw`
+  mobileSize?: `${number}vw`;
   /** Size on desktop devices (e.g., "33vw", "25vw") */
-  desktopSize?: `${number}vw`
+  desktopSize?: `${number}vw`;
   /** Ref for accessing the underlying img element */
-  ref?: Ref<HTMLImageElement>
-  /** Alt text for accessibility (required for meaningful images) */
-  alt?: string
+  ref?: Ref<HTMLImageElement>;
   /** Aspect ratio for automatic placeholder and layout stability */
-  aspectRatio?: number
-}
+  aspectRatio?: number;
+};
 
 // Memoize helper functions to avoid recreation
 const toBase64 = (str: string) =>
   typeof window === "undefined"
     ? Buffer.from(str).toString("base64")
-    : window.btoa(str)
+    : window.btoa(str);
 
 // Helper to generate blur placeholder with transparent background by default
 const generateShimmer = (w: number, h: number) => `
@@ -54,7 +52,7 @@ const generateShimmer = (w: number, h: number) => `
     <rect width="${w}" height="${h}" fill="rgba(0,0,0,0)" />
     <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
     <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
-  </svg>`
+  </svg>`;
 
 // Helper to determine if blur placeholder should be used
 const shouldUseBlurPlaceholder = (
@@ -62,10 +60,10 @@ const shouldUseBlurPlaceholder = (
   placeholder: string,
   blurDataURL: string | undefined
 ): boolean => {
-  if (!src) return false
-  const isSvg = typeof src === "string" && src.includes(".svg")
-  return !isSvg && placeholder === "blur" && !blurDataURL
-}
+  if (!src) return false;
+  const isSvg = typeof src === "string" && src.includes(".svg");
+  return !isSvg && placeholder === "blur" && !blurDataURL;
+};
 
 // Helper to generate blur data URL
 const generateBlurDataURL = (
@@ -73,11 +71,11 @@ const generateBlurDataURL = (
   aspectRatio: number | undefined,
   existingBlurDataURL: string | undefined
 ): string | undefined => {
-  if (!(shouldUse && aspectRatio)) return existingBlurDataURL
+  if (!(shouldUse && aspectRatio)) return existingBlurDataURL;
 
-  const shimmerSvg = generateShimmer(700, Math.round(700 / aspectRatio))
-  return `data:image/svg+xml;base64,${toBase64(shimmerSvg)}`
-}
+  const shimmerSvg = generateShimmer(700, Math.round(700 / aspectRatio));
+  return `data:image/svg+xml;base64,${toBase64(shimmerSvg)}`;
+};
 
 // Helper to determine final placeholder value
 const getFinalPlaceholder = (
@@ -89,11 +87,11 @@ const getFinalPlaceholder = (
   if (!shouldUse) {
     return originalPlaceholder === "blur" && !blurDataURL
       ? "empty"
-      : originalPlaceholder
+      : originalPlaceholder;
   }
 
-  return aspectRatio || blurDataURL ? "blur" : "empty"
-}
+  return aspectRatio || blurDataURL ? "blur" : "empty";
+};
 
 /**
  * Enhanced Image component with responsive sizing and automatic optimizations.
@@ -102,14 +100,14 @@ const getFinalPlaceholder = (
  * - Automatic responsive sizes generation
  * - Smart blur placeholders with aspect ratio support
  * - Performance optimizations (lazy loading by default)
- * - Preload for LCP images
+ * - Priority flag for LCP images
  *
  * @param props - Image props extending Next.js Image
  * @param props.aspectRatio - Aspect ratio for layout stability and blur placeholder
  * @param props.mobileSize - Size on mobile (e.g., "100vw")
  * @param props.desktopSize - Size on desktop (e.g., "50vw")
  * @param props.block - Display as block element
- * @param props.preload - Enable preloading for LCP images
+ * @param props.priority - Prioritize loading for LCP images
  *
  * @example
  * ```tsx
@@ -123,12 +121,12 @@ const getFinalPlaceholder = (
  *
  * @example
  * ```tsx
- * // LCP image with preload
+ * // LCP image with priority
  * <Image
  *   src="/hero.jpg"
  *   alt="Hero image"
  *   aspectRatio={16/9}
- *   preload // Preloads image for LCP
+ *   priority // Preloads image for LCP
  * />
  * ```
  *
@@ -147,7 +145,6 @@ const getFinalPlaceholder = (
 export function Image({
   style,
   className,
-  loading,
   objectFit = "cover",
   quality = 90,
   alt = "",
@@ -163,38 +160,35 @@ export function Image({
   ref,
   aspectRatio,
   placeholder = "blur",
-  preload = false,
+  priority = false,
   ...props
 }: ImageProps) {
-  // Determine loading strategy
-  const finalLoading = loading ?? (preload ? "eager" : "lazy")
-
   // Generate responsive sizes if not provided
   const finalSizes =
     sizes ||
-    `(max-width: ${breakpoints.desktop}px) ${mobileSize}, ${desktopSize}`
+    `(max-width: ${breakpoints.desktop}px) ${mobileSize}, ${desktopSize}`;
 
   // Early return after hooks
-  if (!src) return null
+  if (!src) return null;
 
   // Determine SVG status and placeholder logic
-  const isSvg = typeof src === "string" && src.includes(".svg")
+  const isSvg = typeof src === "string" && src.includes(".svg");
   const shouldUsePlaceholder = shouldUseBlurPlaceholder(
     src,
     placeholder,
     props.blurDataURL
-  )
+  );
   const blurDataURL = generateBlurDataURL(
     shouldUsePlaceholder,
     aspectRatio,
     props.blurDataURL
-  )
+  );
   const finalPlaceholder = getFinalPlaceholder(
     shouldUsePlaceholder,
     aspectRatio,
     props.blurDataURL,
     placeholder
-  )
+  );
 
   return (
     <NextImage
@@ -202,7 +196,7 @@ export function Image({
       fill={!block}
       {...(width !== undefined && { width })}
       {...(height !== undefined && { height })}
-      loading={finalLoading}
+      priority={priority}
       quality={quality}
       alt={alt}
       style={{
@@ -217,8 +211,7 @@ export function Image({
       onDragStart={(e) => e.preventDefault()}
       {...(finalPlaceholder && { placeholder: finalPlaceholder })}
       {...(blurDataURL && { blurDataURL })}
-      preload={preload}
       {...props}
     />
-  )
+  );
 }

package/src/templates/next-experiments/components/ui/link/index.tsx

@@ -112,6 +112,12 @@ export function Link({
     return <div {...getDivProps(props)}>{children}</div>
   }
 
+  // Block dangerous URIs (javascript:, data:, vbscript:)
+  const isDangerousHref = /^(javascript|data|vbscript):/i.test(href)
+  if (isDangerousHref) {
+    return <span {...getDivProps(props)}>{children}</span>
+  }
+
   // For SSR, check if it's external based on the href pattern
   const isExternalSSR =
     href.startsWith("http://") || href.startsWith("https://")

package/src/templates/next-experiments/lib/utils/metadata.ts

@@ -1,4 +1,4 @@
-import type { Metadata } from "next"
+import type { Metadata } from "next";
 
 /**
  * Metadata Generation Utilities
@@ -8,26 +8,26 @@ import type { Metadata } from "next"
  */
 
 interface GenerateMetadataOptions {
-  title?: string
-  description?: string
-  keywords?: string[]
+  title?: string;
+  description?: string;
+  keywords?: string[];
   image?: {
-    url?: string
-    width?: number
-    height?: number
-    alt?: string
-  }
-  url?: string
-  siteName?: string
-  noIndex?: boolean
-  type?: "website" | "article"
-  publishedTime?: string
-  modifiedTime?: string
-  authors?: string[]
+    url?: string;
+    width?: number;
+    height?: number;
+    alt?: string;
+  };
+  url?: string;
+  siteName?: string;
+  noIndex?: boolean;
+  type?: "website" | "article";
+  publishedTime?: string;
+  modifiedTime?: string;
+  authors?: string[];
 }
 
 const APP_BASE_URL =
-  process.env.NEXT_PUBLIC_BASE_URL ?? "https://localhost:3000"
+  process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:3000";
 
 /**
  * Generate complete metadata object for pages
@@ -62,13 +62,13 @@ export function generatePageMetadata(
     publishedTime,
     modifiedTime,
     authors,
-  } = options
+  } = options;
 
-  const fullUrl = url ? `${APP_BASE_URL}${url}` : APP_BASE_URL
-  const imageUrl = image?.url || "/opengraph-image.jpg"
-  const imageWidth = image?.width || 1200
-  const imageHeight = image?.height || 630
-  const imageAlt = image?.alt || title || siteName
+  const fullUrl = url ? `${APP_BASE_URL}${url}` : APP_BASE_URL;
+  const imageUrl = image?.url || "/opengraph-image.jpg";
+  const imageWidth = image?.width || 1200;
+  const imageHeight = image?.height || 630;
+  const imageAlt = image?.alt || title || siteName;
 
   const metadata: Metadata = {
     metadataBase: new URL(APP_BASE_URL),
@@ -113,14 +113,14 @@ export function generatePageMetadata(
     other: {
       "fb:app_id": process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || "",
     },
-  }
+  };
 
   if (noIndex) {
     metadata.robots = {
       index: false,
       follow: false,
-    }
+    };
   }
 
-  return metadata
+  return metadata;
 }

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

@@ -1,5 +1,5 @@
 {
-  "name": "basement-next-starter-experiments",
+  "name": "bsmnt-experiments-starter",
   "description": "Basement Next.js starter template",
   "version": "0.1.0",
   "private": true,
@@ -31,7 +31,7 @@
     "class-variance-authority": "^0.7.1",
     "leva": "^0.9.35",
     "lucide-react": "^0.474.0",
-    "next": "16.1.4",
+    "next": "16.1.6",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-use": "^17.6.0",
@@ -41,10 +41,10 @@
     "zustand": "^5.0.10"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.11",
+    "@biomejs/biome": "2.3.14",
     "@clack/prompts": "^0.11.0",
     "@csstools/postcss-global-data": "^3.1.0",
-    "@next/bundle-analyzer": "16.1.1",
+    "@next/bundle-analyzer": "16.1.6",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/postcss": "^4.1.18",
     "@types/bun": "^1.3.6",

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

@@ -1,23 +1,23 @@
-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 { themes } from "@/lib/styles/colors"
-import { fontsVariable } from "@/lib/styles/fonts"
-import AppData from "@/package.json"
-import "@/lib/styles/css/index.css"
-import { cn } from "@/lib/styles/cn"
+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 { themes } from "@/lib/styles/colors";
+import { fontsVariable } from "@/lib/styles/fonts";
+import AppData from "@/package.json";
+import "@/lib/styles/css/index.css";
+import { cn } from "@/lib/styles/cn";
 
-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_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 ?? "https://localhost:3000"
+  process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:3000";
 
 const geist = Geist({
   subsets: ["latin"],
-})
+});
 
 export const metadata: Metadata = {
   alternates: {
@@ -70,12 +70,12 @@ export const metadata: Metadata = {
       template: APP_TITLE_TEMPLATE,
     },
   },
-}
+};
 
 export const viewport: Viewport = {
   colorScheme: "normal",
   themeColor: themes.dark.primary,
-}
+};
 
 export default async function Layout({ children }: PropsWithChildren) {
   return (
@@ -100,5 +100,5 @@ export default async function Layout({ children }: PropsWithChildren) {
         {children}
       </body>
     </html>
-  )
+  );
 }

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

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

package/src/templates/next-webgl/app/sitemap.ts

@@ -1,7 +1,7 @@
-import type { MetadataRoute } from "next"
+import type { MetadataRoute } from "next";
 
 const APP_BASE_URL =
-  process.env.NEXT_PUBLIC_BASE_URL ?? "https://localhost:3000"
+  process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:3000";
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const baseRoutes: MetadataRoute.Sitemap = [
@@ -11,6 +11,6 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
       changeFrequency: "daily",
       priority: 1,
     },
-  ]
-  return baseRoutes
+  ];
+  return baseRoutes;
 }

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

@@ -1,5 +1,5 @@
 {
-  "root": false,
+  "root": true,
   "$schema": "node_modules/@biomejs/biome/configuration_schema.json",
   "assist": {
     "actions": {
@@ -245,6 +245,6 @@
   "vcs": {
     "clientKind": "git",
     "enabled": true,
-    "useIgnoreFile": true
+    "useIgnoreFile": false
   }
 }

package/src/templates/next-webgl/components/layout/theme/index.tsx

@@ -47,7 +47,7 @@ export function Theme({
 
   return (
     <>
-      {global && (
+      {global && /^[a-z]+$/.test(currentTheme) && (
         <script>
           {`document.documentElement.setAttribute('data-theme', '${currentTheme}');`}
         </script>

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

@@ -3,8 +3,6 @@
  *
  * Customize the Header and Footer components for your project needs.
  */
-"use client"
-
 import cn from "clsx"
 import { Footer } from "@/components/layout/footer"
 import { Header } from "@/components/layout/header"

package/src/templates/next-webgl/components/ui/image/index.tsx

@@ -102,14 +102,14 @@ const getFinalPlaceholder = (
  * - Automatic responsive sizes generation
  * - Smart blur placeholders with aspect ratio support
  * - Performance optimizations (lazy loading by default)
- * - Preload for LCP images
+ * - Priority flag for LCP images
  *
  * @param props - Image props extending Next.js Image
  * @param props.aspectRatio - Aspect ratio for layout stability and blur placeholder
  * @param props.mobileSize - Size on mobile (e.g., "100vw")
  * @param props.desktopSize - Size on desktop (e.g., "50vw")
  * @param props.block - Display as block element
- * @param props.preload - Enable preloading for LCP images
+ * @param props.priority - Prioritize loading for LCP images
  *
  * @example
  * ```tsx
@@ -123,12 +123,12 @@ const getFinalPlaceholder = (
  *
  * @example
  * ```tsx
- * // LCP image with preload
+ * // LCP image with priority
  * <Image
  *   src="/hero.jpg"
  *   alt="Hero image"
  *   aspectRatio={16/9}
- *   preload // Preloads image for LCP
+ *   priority // Preloads image for LCP
  * />
  * ```
  *
@@ -147,7 +147,6 @@ const getFinalPlaceholder = (
 export function Image({
   style,
   className,
-  loading,
   objectFit = "cover",
   quality = 90,
   alt = "",
@@ -163,12 +162,9 @@ export function Image({
   ref,
   aspectRatio,
   placeholder = "blur",
-  preload = false,
+  priority = false,
   ...props
 }: ImageProps) {
-  // Determine loading strategy
-  const finalLoading = loading ?? (preload ? "eager" : "lazy")
-
   // Generate responsive sizes if not provided
   const finalSizes =
     sizes ||
@@ -202,7 +198,7 @@ export function Image({
       fill={!block}
       {...(width !== undefined && { width })}
       {...(height !== undefined && { height })}
-      loading={finalLoading}
+      priority={priority}
       quality={quality}
       alt={alt}
       style={{
@@ -217,7 +213,6 @@ export function Image({
       onDragStart={(e) => e.preventDefault()}
       {...(finalPlaceholder && { placeholder: finalPlaceholder })}
       {...(blurDataURL && { blurDataURL })}
-      preload={preload}
       {...props}
     />
   )

package/src/templates/next-webgl/components/ui/link/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import NextLink from "next/link"
+import Link from "next/link"
 import { usePathname } from "next/navigation"
 import {
   type AnchorHTMLAttributes,
@@ -112,13 +113,19 @@ export function Link({
     return <div {...getDivProps(props)}>{children}</div>
   }
 
+  // Block dangerous URIs (javascript:, data:, vbscript:)
+  const isDangerousHref = /^(javascript|data|vbscript):/i.test(href)
+  if (isDangerousHref) {
+    return <span {...getDivProps(props)}>{children}</span>
+  }
+
   // For SSR, check if it's external based on the href pattern
   const isExternalSSR =
     href.startsWith("http://") || href.startsWith("https://")
 
   if (isExternalSSR || isExternal) {
     return (
-      <a
+      <Link
         href={href}
         target="_blank"
         rel="noopener noreferrer"
@@ -127,7 +134,7 @@ export function Link({
         {...props}
       >
         {children}
-      </a>
+      </Link>
     )
   }
 

package/src/templates/next-webgl/components/webgl/components/scene/index.tsx

@@ -8,6 +8,7 @@ const Scene = () => {
   const meshRef = useRef<Mesh>(null)
 
   useFrame((_state, delta) => {
+    if (!meshRef.current) return
     meshRef.current.rotation.x += delta
     meshRef.current.rotation.y += delta
   })

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

@@ -1,4 +1,4 @@
-import type { Metadata } from "next"
+import type { Metadata } from "next";
 
 /**
  * Metadata Generation Utilities
@@ -8,26 +8,26 @@ import type { Metadata } from "next"
  */
 
 interface GenerateMetadataOptions {
-  title?: string
-  description?: string
-  keywords?: string[]
+  title?: string;
+  description?: string;
+  keywords?: string[];
   image?: {
-    url?: string
-    width?: number
-    height?: number
-    alt?: string
-  }
-  url?: string
-  siteName?: string
-  noIndex?: boolean
-  type?: "website" | "article"
-  publishedTime?: string
-  modifiedTime?: string
-  authors?: string[]
+    url?: string;
+    width?: number;
+    height?: number;
+    alt?: string;
+  };
+  url?: string;
+  siteName?: string;
+  noIndex?: boolean;
+  type?: "website" | "article";
+  publishedTime?: string;
+  modifiedTime?: string;
+  authors?: string[];
 }
 
 const APP_BASE_URL =
-  process.env.NEXT_PUBLIC_BASE_URL ?? "https://localhost:3000"
+  process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:3000";
 
 /**
  * Generate complete metadata object for pages
@@ -62,13 +62,13 @@ export function generatePageMetadata(
     publishedTime,
     modifiedTime,
     authors,
-  } = options
+  } = options;
 
-  const fullUrl = url ? `${APP_BASE_URL}${url}` : APP_BASE_URL
-  const imageUrl = image?.url || "/opengraph-image.jpg"
-  const imageWidth = image?.width || 1200
-  const imageHeight = image?.height || 630
-  const imageAlt = image?.alt || title || siteName
+  const fullUrl = url ? `${APP_BASE_URL}${url}` : APP_BASE_URL;
+  const imageUrl = image?.url || "/opengraph-image.jpg";
+  const imageWidth = image?.width || 1200;
+  const imageHeight = image?.height || 630;
+  const imageAlt = image?.alt || title || siteName;
 
   const metadata: Metadata = {
     metadataBase: new URL(APP_BASE_URL),
@@ -113,14 +113,14 @@ export function generatePageMetadata(
     other: {
       "fb:app_id": process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || "",
     },
-  }
+  };
 
   if (noIndex) {
     metadata.robots = {
       index: false,
       follow: false,
-    }
+    };
   }
 
-  return metadata
+  return metadata;
 }