bsmnt 0.0.0

package/layers/experiment/components/layout/header/index.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { Link } from "@/components/ui/link";
+import EXPERIMENTS from "@/lib/constants";
+import { cn } from "@/lib/styles/cn";
+import {
+	NavigationMenu,
+	NavigationMenuContent,
+	NavigationMenuItem,
+	NavigationMenuLink,
+	NavigationMenuList,
+	NavigationMenuTrigger,
+} from "../navigation-menu";
+
+export const Header = () => {
+	const pathname = usePathname();
+
+	return (
+		<nav className="fixed top-0 z-50 w-full py-2">
+			<div className="mx-auto flex items-center justify-between px-4">
+				<Link href="/" className="flex items-center gap-2 text-xl font-bold">
+					Basement Experiments Starter
+				</Link>
+				<NavigationMenu>
+					<NavigationMenuList>
+						<NavigationMenuItem>
+							<NavigationMenuTrigger className="text-sm font-medium px-8 py-6">
+								Experiments
+							</NavigationMenuTrigger>
+							<NavigationMenuContent>
+								<ul className="grid w-48 p-2 gap-1 bg-indigo-950/70 backdrop-blur-3xl text-white">
+									{EXPERIMENTS.map((experiment) => (
+										<li key={experiment.path}>
+											<NavigationMenuLink asChild>
+												<Link
+													href={experiment.path}
+													className={cn(
+														"block px-2 py-2 text-sm transition-colors duration-200 rounded-sm font-medium",
+														pathname === experiment.path
+															? "bg-purple-600 text-white"
+															: "text-white hover:bg-purple-500/20",
+													)}
+												>
+													{experiment.name}
+												</Link>
+											</NavigationMenuLink>
+										</li>
+									))}
+								</ul>
+							</NavigationMenuContent>
+						</NavigationMenuItem>
+					</NavigationMenuList>
+				</NavigationMenu>
+			</div>
+		</nav>
+	);
+};

package/layers/experiment/components/layout/navigation-menu.tsx

@@ -0,0 +1,127 @@
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/styles/cn";
+
+function NavigationMenu({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root>) {
+	return (
+		<NavigationMenuPrimitive.Root
+			className={cn(
+				"relative z-10 flex max-w-max flex-1 items-center justify-center",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<NavigationMenuViewport />
+		</NavigationMenuPrimitive.Root>
+	);
+}
+
+function NavigationMenuList({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+	return (
+		<NavigationMenuPrimitive.List
+			className={cn(
+				"group flex flex-1 list-none items-center justify-center space-x-1",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const navigationMenuTriggerStyle = cva(
+	"bg-indigo-950/30 backdrop-blur-3xl border border-purple-400/50 text-white group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-purple-800/50 hover:text-white focus:bg-purple-800/50 focus:text-white focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-white data-[state=open]:bg-indigo-900/70 data-[state=open]:hover:bg-purple-800/50 data-[state=open]:focus:bg-purple-800/50 cursor-pointer",
+);
+
+function NavigationMenuTrigger({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+	return (
+		<NavigationMenuPrimitive.Trigger
+			className={cn(navigationMenuTriggerStyle(), "group", className)}
+			{...props}
+		>
+			{children}{" "}
+			<ChevronDown
+				className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+				aria-hidden="true"
+			/>
+		</NavigationMenuPrimitive.Trigger>
+	);
+}
+
+function NavigationMenuContent({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+	return (
+		<NavigationMenuPrimitive.Content
+			className={cn(
+				"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+function NavigationMenuViewport({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+	return (
+		<div className={cn("absolute left-0 top-full flex justify-center")}>
+			<NavigationMenuPrimitive.Viewport
+				className={cn(
+					"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-purple-400/50 bg-indigo-950/70 text-white shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function NavigationMenuIndicator({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+	return (
+		<NavigationMenuPrimitive.Indicator
+			className={cn(
+				"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+				className,
+			)}
+			{...props}
+		>
+			<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-purple-400 shadow-md" />
+		</NavigationMenuPrimitive.Indicator>
+	);
+}
+
+export {
+	NavigationMenu,
+	NavigationMenuContent,
+	NavigationMenuIndicator,
+	NavigationMenuItem,
+	NavigationMenuLink,
+	NavigationMenuList,
+	NavigationMenuTrigger,
+	navigationMenuTriggerStyle,
+	NavigationMenuViewport,
+};

package/layers/experiment/lib/constants.ts

@@ -0,0 +1,12 @@
+const EXPERIMENTS = [
+	{
+		name: "EXPERIMENT 1",
+		path: "/experiment-1",
+	},
+	{
+		name: "EXPERIMENT 2",
+		path: "/experiment-2",
+	},
+];
+
+export default EXPERIMENTS;

package/layers/webgl/app/page.tsx

@@ -0,0 +1,10 @@
+import { Wrapper } from "@/components/layout/wrapper";
+import DynamicCanvas from "@/components/webgl/canvas/dynamic";
+
+export default function Home() {
+	return (
+		<Wrapper theme="dark">
+			<DynamicCanvas />
+		</Wrapper>
+	);
+}

package/layers/webgl/components/webgl/canvas/dynamic.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { Suspense, useRef } from "react";
+import { cn } from "@/lib/styles/cn";
+
+const WebGLCanvas = dynamic(() => import("./index"), {
+	ssr: false,
+});
+
+export default function DynamicCanvas() {
+	const eventSourceRef = useRef<HTMLDivElement>(null);
+
+	return (
+		<div
+			ref={eventSourceRef}
+			className={cn(
+				"pointer-events-none fixed top-0 left-0 z-50 h-lvh w-full overflow-hidden",
+			)}
+		>
+			<Suspense
+				fallback={
+					<div className="flex h-full w-full items-center justify-center bg-black/10">
+						<span className="font-mono text-xs uppercase tracking-widest opacity-30">
+							Loading WebGL...
+						</span>
+					</div>
+				}
+			>
+				<WebGLCanvas eventSource={eventSourceRef} />
+			</Suspense>
+		</div>
+	);
+}

package/layers/webgl/components/webgl/canvas/index.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Preload } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+import dynamic from "next/dynamic";
+
+import { cn } from "@/lib/styles/cn";
+
+const Scene = dynamic(
+	() =>
+		import("@/components/webgl/components/scene").then((mod) => mod.default),
+	{
+		ssr: false,
+	},
+);
+
+export default function WebGLCanvas({ ...props }) {
+	return (
+		<Canvas
+			className={cn("pointer-events-none h-lvh! w-full")}
+			dpr={[1, 2]}
+			eventPrefix="client"
+			frameloop="always"
+			camera={{
+				far: 1000,
+				near: 0.01,
+				fov: 16,
+				position: [0, 17, 350],
+			}}
+			gl={{
+				alpha: true,
+				antialias: true,
+				logarithmicDepthBuffer: true,
+				powerPreference: "high-performance",
+				premultipliedAlpha: true,
+			}}
+			{...props}
+		>
+			<Scene />
+			<Preload all />
+		</Canvas>
+	);
+}

package/layers/webgl/components/webgl/components/scene/index.tsx

@@ -0,0 +1,21 @@
+import { useFrame } from "@react-three/fiber";
+import { useRef } from "react";
+import type { Mesh } from "three";
+
+const Scene = () => {
+	const meshRef = useRef<Mesh>(null);
+
+	useFrame((_state, delta) => {
+		meshRef.current.rotation.x += delta;
+		meshRef.current.rotation.y += delta;
+	});
+
+	return (
+		<mesh ref={meshRef} scale={10}>
+			<boxGeometry />
+			<meshBasicMaterial color="orange" />
+		</mesh>
+	);
+};
+
+export default Scene;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "bsmnt",
+  "version": "0.0.0",
+  "description": "CLI to scaffold basement projects and add integrations",
+  "type": "module",
+  "bin": {
+    "basement": "./bin/index.js"
+  },
+  "scripts": {
+    "build": "bun pm pack --dry-run --ignore-scripts",
+    "check": "for f in $(rg --files bin src -g '*.js'); do node --check \"$f\"; done",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "changeset publish",
+    "prepublishOnly": "bun run build"
+  },
+  "keywords": [
+    "webgpu",
+    "r3f",
+    "agents",
+    "claude",
+    "opencode"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "dotenv": "^17.2.3",
+    "fs-extra": "^11.3.3",
+    "inquirer": "^9.3.8",
+    "ora": "^9.1.0",
+    "picocolors": "^1.1.1",
+    "prompts": "^2.4.2",
+    "tiged": "^2.12.7"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.14",
+    "@changesets/changelog-github": "^0.5.2",
+    "@changesets/cli": "^2.29.8"
+  }
+}

package/plugins/README.md

@@ -0,0 +1,21 @@
+## Plugins
+
+### 1. `no-anchor-element.grit`
+Enforces using Next.js `<Link>` component instead of HTML `<a>` elements.
+
+### 2. `no-unnecessary-forwardref.grit`
+Checks for unnecessary `forwardRef` usage in React 19 with the compiler.
+
+### 3. `no-relative-parent-imports.grit`
+Forbids relative parent imports (`../`) and encourages alias imports (`@/`).
+
+## Plugin Configuration
+
+The plugins are configured in `biome.json`:
+```json
+"plugins": [
+  "./biome-plugins/no-anchor-element.grit",
+  "./biome-plugins/no-unnecessary-forwardref.grit",
+  "./biome-plugins/no-relative-parent-imports.grit"
+]
+``` 

package/plugins/no-anchor-element.grit

@@ -0,0 +1,11 @@
+language js
+
+`<a $attrs>$content</a>` as $anchor where {
+	! $anchor <: within `if ($condition) { return ($jsx) }` where {
+		$condition <: contains or {
+			`isExternal`,
+			`isExternalSSR`
+		}
+	} ,
+	register_diagnostic(span=$anchor, message="Use custom Link component instead of <a> element. The Link component handles both internal and external links automatically.", severity="error")
+}

package/plugins/no-relative-parent-imports.grit

@@ -0,0 +1,6 @@
+language js
+
+`import $imports from $source` as $import where {
+	$source <: r"['\"]\.\.\/\.\.\/.*['\"]",
+	register_diagnostic(span=$import, message="Use alias imports (~/dir/) instead of deep relative imports (../../). Single level imports (../) are allowed for colocated files.", severity="error")
+}

package/plugins/no-unnecessary-forwardref.grit

@@ -0,0 +1,5 @@
+language js
+
+`forwardRef($func)` as $ref where {
+	register_diagnostic(span=$ref, message="forwardRef is unnecessary in React 19 with the compiler", severity="warning")
+}