Create monorepo from known-good production state

app/components/portal/LaserToolkitSwitcher.tsx

@@ -0,0 +1,58 @@
+// components/portal/LaserToolkitSwitcher.tsx
+"use client";
+
+import { useMemo } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { TOOLKIT_TABS } from "@/components/utilities/laser-toolkit/registry";
+
+export default function LaserToolkitSwitcher() {
+    const sp = useSearchParams();
+    const router = useRouter();
+
+    const activeKey = useMemo(() => {
+        const def = TOOLKIT_TABS[0]?.key ?? "beam-spot-size";
+        const t = (sp.get("lt") || def).toLowerCase();
+        return TOOLKIT_TABS.some(x => x.key === t) ? t : def;
+    }, [sp]);
+
+    const active = useMemo(
+        () => TOOLKIT_TABS.find(x => x.key === activeKey) ?? TOOLKIT_TABS[0],
+                           [activeKey]
+    );
+
+    function setTab(k: string) {
+        const q = new URLSearchParams(sp.toString());
+        q.set("lt", k);
+        router.replace(`/portal/utilities?${q.toString()}`, { scroll: false });
+    }
+
+    if (!active) {
+        return <div className="text-sm text-zinc-400">No tools registered.</div>;
+    }
+
+    const ActiveCmp = active.component;
+
+    return (
+        <div className="space-y-4">
+        <div className="flex flex-wrap gap-2">
+        {TOOLKIT_TABS.map(t => (
+            <button
+            key={t.key}
+            onClick={() => setTab(t.key)}
+            className={cn(
+                "rounded-md border px-3 py-1.5 text-sm",
+                activeKey === t.key ? "bg-primary text-primary-foreground" : "hover:bg-muted"
+            )}
+            >
+            {t.label}
+            </button>
+        ))}
+        </div>
+
+        <div className="rounded-md border p-4">
+        <ActiveCmp />
+        </div>
+        </div>
+    );
+}