start tanstack router experimentation

package.json

@@ -75,6 +75,8 @@
   "dependencies": {
     "@lumphammer/shared-fvtt-bits": "workspace:^",
     "@monaco-editor/react": "^4.6.0",
+    "@tanstack/react-router": "^1.34.9",
+    "@tanstack/router-devtools": "^1.34.9",
     "case": "^1.6.3",
     "d3-ease": "^3.0.1",
     "html-escaper": "^3.0.3",

src/components/settings/Cards/RouterExperiment.tsx

@@ -0,0 +1,133 @@
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Link as RouterLink,
+  Outlet,
+  RouterProvider,
+  useLocation,
+} from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+import React, { ComponentPropsWithRef } from "react";
+
+// import { systemLogger } from "../../../functions/utilities";
+
+function stopPropagation(e: React.MouseEvent<"a", MouseEvent>) {
+  e.stopPropagation();
+}
+
+function preventDefault(e: React.MouseEvent<HTMLElement>) {
+  e.preventDefault();
+}
+
+/**
+ * Custom version of Link component that stops propagation so
+ * that whatever weird link handler Foundry has doesn't get triggered.
+ */
+function Link(props: ComponentPropsWithRef<typeof RouterLink>) {
+  return <RouterLink {...props} onClick={stopPropagation} />;
+}
+
+const history = createMemoryHistory({
+  initialEntries: ["/"],
+});
+
+const RootComponent = () => {
+  const loc = useLocation();
+  return (
+    <>
+      <div>
+        <Link to="/" className="[&.active]:font-bold">
+          Home
+        </Link>{" "}
+        <Link to="/about" className="[&.active]:font-bold">
+          About
+        </Link>{" "}
+        <Link to="/people" className="[&.active]:font-bold">
+          People
+        </Link>{" "}
+        {loc.href}
+      </div>
+      <hr />
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  );
+};
+
+const rootRoute = createRootRoute({
+  component: RootComponent,
+});
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  component: function Index() {
+    return (
+      <div className="p-2">
+        <h3>Welcome Home!</h3>
+      </div>
+    );
+  },
+});
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/about",
+  component: function About() {
+    return (
+      <div className="p-2">
+        Hello from About!
+        <Link to="/">I wanna go home!</Link>
+        <Link to="people">People</Link>
+      </div>
+    );
+  },
+});
+
+const peopleRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/about/people",
+  component: function About() {
+    return (
+      <div className="p-2">
+        Our team!
+        <ul>
+          <li>
+            <Link to="ndc">Neil de Carteret</Link>
+          </li>
+          <li>
+            <Link to="people/fred">Fred</Link>
+          </li>
+        </ul>
+      </div>
+    );
+  },
+});
+
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute, peopleRoute]);
+
+const router = createRouter({ routeTree, history });
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+// my component
+
+interface RouterExperimentProps {}
+
+export const RouterExperiment: React.FC<RouterExperimentProps> = () => {
+  return (
+    // preventDefault here blocks clicks on router dev tools from tgriggering
+    // foundry's own click handlers.
+    <div onClick={preventDefault}>
+      <RouterProvider router={router} basepath="/" />
+    </div>
+  );
+};
+
+RouterExperiment.displayName = "RouterExperiment";

src/components/settings/Settings.tsx

@@ -11,6 +11,7 @@ import { TabContainer } from "../TabContainer";
 import { Translate } from "../Translate";
 import { AbilitySettings } from "./AbilitySettings";
 import { CardsSettings } from "./Cards/CardsSettings";
+import { RouterExperiment } from "./Cards/RouterExperiment";
 import { DirtyContext, DispatchContext, StateContext } from "./contexts";
 import { CoreSettings } from "./CoreSettings";
 import { EquipmentSettings } from "./Equipment/EquipmentSettings";
@@ -110,6 +111,12 @@ export const Settings: React.FC<SettingsProps> = ({ foundryApplication }) => {
                     label: "Misc",
                     content: <MiscSettings setters={setters} />,
                   },
+                  {
+                    id: "router",
+                    label: "Router",
+
+                    content: <RouterExperiment />,
+                  },
                 ]}
               />
             </div>

src/components/settings/Stats/StatsSettings.tsx

@@ -1,20 +1,16 @@
 import React from "react";
 
 import { absoluteCover } from "../../absoluteCover";
-import { InputGrid } from "../../inputs/InputGrid";
+// import { InputGrid } from "../../inputs/InputGrid";
 import { TabContainer } from "../../TabContainer";
 import { StatsSettingsEditor } from "./StatsSettingsEditor";
 
 export const StatsSettings: React.FC = () => {
-  const idx = 0;
-
   return (
     <div
       css={{
         ...absoluteCover,
         margin: "1em",
-        // backgroundColor: "rgba(0, 0, 0, 0.5)",
-        col,
       }}
     >
       <TabContainer