@ic-reactor/cli 0.0.0-dev2 → 0.0.0-dev3

package/dist/index.js

@@ -227,8 +227,8 @@ export const clientManager = new ClientManager({
 
 // src/commands/add.ts
 import * as p2 from "@clack/prompts";
-import fs4 from "fs";
-import path3 from "path";
+import fs5 from "fs";
+import path4 from "path";
 import pc2 from "picocolors";
 
 // src/parsers/did.ts
@@ -299,14 +299,15 @@ function getServiceTypeName(canisterName) {
 
 // src/generators/reactor.ts
 function generateReactorFile(options) {
-  const { canisterName, canisterConfig } = options;
+  const { canisterName, canisterConfig, hasDeclarations = true } = options;
   const pascalName = toPascalCase(canisterName);
   const reactorName = getReactorName(canisterName);
   const serviceName = getServiceTypeName(canisterName);
   const reactorType = canisterConfig.useDisplayReactor !== false ? "DisplayReactor" : "Reactor";
   const clientManagerPath = canisterConfig.clientManagerPath ?? "../../lib/client";
   const declarationsPath = `./declarations/${canisterName}.did`;
-  return `/**
+  if (hasDeclarations) {
+    return `/**
  * ${pascalName} Reactor
  *
  * Auto-generated by @ic-reactor/cli
@@ -365,6 +366,78 @@ export const { useAuth, useAgentState, useUserPrincipal } = createAuthHooks(clie
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 
 export { idlFactory }
+`;
+  }
+  return `/**
+ * ${pascalName} Reactor
+ *
+ * Auto-generated by @ic-reactor/cli
+ * This file provides the shared reactor instance for the ${canisterName} canister.
+ *
+ * You can customize this file to add global configuration.
+ */
+
+import { ${reactorType}, createActorHooks, createAuthHooks } from "@ic-reactor/react"
+import { clientManager } from "${clientManagerPath}"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// DECLARATIONS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+// TODO: Generate proper types by running:
+// npx @icp-sdk/bindgen --input <path-to-did> --output ./${canisterName}/declarations
+
+// Then uncomment:
+// import { idlFactory, type _SERVICE as ${serviceName} } from "${declarationsPath}"
+
+// Fallback generic type - replace with generated types
+type ${serviceName} = Record<string, (...args: unknown[]) => Promise<unknown>>
+
+// You'll need to define idlFactory here or import from declarations
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const idlFactory = ({ IDL }: { IDL: any }) => IDL.Service({})
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// REACTOR INSTANCE
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+/**
+ * ${pascalName} Reactor with ${canisterConfig.useDisplayReactor !== false ? "Display" : "Candid"} type transformations.
+ * ${canisterConfig.useDisplayReactor !== false ? "Automatically converts bigint \u2192 string, Principal \u2192 string, etc." : "Uses raw Candid types."}
+ */
+export const ${reactorName} = new ${reactorType}<${serviceName}>({
+  clientManager,
+  idlFactory,
+  name: "${canisterName}",
+})
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// BASE HOOKS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+/**
+ * Base actor hooks - use these directly or import method-specific hooks.
+ */
+export const {
+  useActorQuery,
+  useActorMutation,
+  useActorSuspenseQuery,
+  useActorInfiniteQuery,
+  useActorSuspenseInfiniteQuery,
+  useActorMethod,
+} = createActorHooks(${reactorName})
+
+/**
+ * Auth hooks for the client manager.
+ */
+export const { useAuth, useAgentState, useUserPrincipal } = createAuthHooks(clientManager)
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// RE-EXPORTS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+export { idlFactory }
+export type { ${serviceName} }
 `;
 }
 
@@ -759,6 +832,46 @@ export const invalidate${pascalMethod}Pages = ${camelMethod}InfiniteQuery.invali
 `;
 }
 
+// src/utils/bindgen.ts
+import { generate } from "@icp-sdk/bindgen/core";
+import path3 from "path";
+import fs4 from "fs";
+async function generateDeclarations(options) {
+  const { didFile, outDir } = options;
+  if (!fs4.existsSync(didFile)) {
+    return {
+      success: false,
+      declarationsDir: "",
+      error: `DID file not found: ${didFile}`
+    };
+  }
+  const declarationsDir = path3.join(outDir, "declarations");
+  try {
+    await generate({
+      didFile,
+      outDir: declarationsDir,
+      output: {
+        actor: {
+          disabled: true
+          // We don't need actor creation, we use Reactor
+        },
+        force: true
+        // Overwrite existing files
+      }
+    });
+    return {
+      success: true,
+      declarationsDir
+    };
+  } catch (error) {
+    return {
+      success: false,
+      declarationsDir,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+
 // src/commands/add.ts
 async function addCommand(options) {
   console.log();
@@ -821,7 +934,7 @@ async function addCommand(options) {
     p2.log.error(`Canister ${pc2.yellow(selectedCanister)} not found in config.`);
     process.exit(1);
   }
-  const didFilePath = path3.resolve(projectRoot, canisterConfig.didFile);
+  const didFilePath = path4.resolve(projectRoot, canisterConfig.didFile);
   let methods;
   try {
     methods = parseDIDFile(didFilePath);
@@ -946,26 +1059,42 @@ ${error.message}`
     p2.log.warn("All methods were skipped. Nothing to generate.");
     process.exit(0);
   }
-  const canisterOutDir = path3.join(projectRoot, config.outDir, selectedCanister);
-  const hooksOutDir = path3.join(canisterOutDir, "hooks");
+  const canisterOutDir = path4.join(projectRoot, config.outDir, selectedCanister);
+  const hooksOutDir = path4.join(canisterOutDir, "hooks");
   ensureDir(hooksOutDir);
   const spinner4 = p2.spinner();
   spinner4.start("Generating hooks...");
   const generatedFiles = [];
-  const reactorPath = path3.join(canisterOutDir, "reactor.ts");
+  const reactorPath = path4.join(canisterOutDir, "reactor.ts");
   if (!fileExists(reactorPath)) {
+    spinner4.message("Generating TypeScript declarations...");
+    const bindgenResult = await generateDeclarations({
+      didFile: didFilePath,
+      outDir: canisterOutDir,
+      canisterName: selectedCanister
+    });
+    if (bindgenResult.success) {
+      generatedFiles.push("declarations/");
+    } else {
+      p2.log.warn(`Could not generate declarations: ${bindgenResult.error}`);
+      p2.log.info(
+        `You can manually run: npx @icp-sdk/bindgen --input ${didFilePath} --output ${canisterOutDir}/declarations`
+      );
+    }
+    spinner4.message("Generating reactor...");
     const reactorContent = generateReactorFile({
       canisterName: selectedCanister,
       canisterConfig,
       config,
-      outDir: canisterOutDir
+      outDir: canisterOutDir,
+      hasDeclarations: bindgenResult.success
     });
-    fs4.writeFileSync(reactorPath, reactorContent);
+    fs5.writeFileSync(reactorPath, reactorContent);
     generatedFiles.push("reactor.ts");
   }
   for (const { method, hookType } of methodsWithHookTypes) {
     const fileName = getHookFileName(method.name, hookType);
-    const filePath = path3.join(hooksOutDir, fileName);
+    const filePath = path4.join(hooksOutDir, fileName);
     let content;
     switch (hookType) {
       case "query":
@@ -992,12 +1121,12 @@ ${error.message}`
         });
         break;
     }
-    fs4.writeFileSync(filePath, content);
-    generatedFiles.push(path3.join("hooks", fileName));
+    fs5.writeFileSync(filePath, content);
+    generatedFiles.push(path4.join("hooks", fileName));
   }
-  const indexPath = path3.join(hooksOutDir, "index.ts");
+  const indexPath = path4.join(hooksOutDir, "index.ts");
   const indexContent = generateIndexFile(methodsWithHookTypes);
-  fs4.writeFileSync(indexPath, indexContent);
+  fs5.writeFileSync(indexPath, indexContent);
   generatedFiles.push("hooks/index.ts");
   config.generatedHooks[selectedCanister] = [
     .../* @__PURE__ */ new Set([
@@ -1010,7 +1139,7 @@ ${error.message}`
   console.log();
   p2.note(
     generatedFiles.map((f) => pc2.green(`\u2713 ${f}`)).join("\n"),
-    `Generated in ${pc2.dim(path3.relative(projectRoot, canisterOutDir))}`
+    `Generated in ${pc2.dim(path4.relative(projectRoot, canisterOutDir))}`
   );
   p2.outro(pc2.green("\u2713 Done!"));
 }
@@ -1029,8 +1158,8 @@ async function promptForNewCanister(projectRoot) {
     placeholder: "./backend.did",
     validate: (value) => {
       if (!value) return "DID file path is required";
-      const fullPath = path3.resolve(projectRoot, value);
-      if (!fs4.existsSync(fullPath)) {
+      const fullPath = path4.resolve(projectRoot, value);
+      if (!fs5.existsSync(fullPath)) {
         return `File not found: ${value}`;
       }
       return void 0;
@@ -1063,8 +1192,8 @@ ${exports.join("\n")}
 
 // src/commands/sync.ts
 import * as p3 from "@clack/prompts";
-import fs5 from "fs";
-import path4 from "path";
+import fs6 from "fs";
+import path5 from "path";
 import pc3 from "picocolors";
 async function syncCommand(options) {
   console.log();
@@ -1116,7 +1245,7 @@ async function syncCommand(options) {
     if (generatedMethods.length === 0) {
       continue;
     }
-    const didFilePath = path4.resolve(projectRoot, canisterConfig.didFile);
+    const didFilePath = path5.resolve(projectRoot, canisterConfig.didFile);
     let methods;
     try {
       methods = parseDIDFile(didFilePath);
@@ -1141,17 +1270,17 @@ async function syncCommand(options) {
         `${canisterName}: New methods available: ${pc3.cyan(newMethods.map((m) => m.name).join(", "))}`
       );
     }
-    const canisterOutDir = path4.join(projectRoot, config.outDir, canisterName);
-    const reactorPath = path4.join(canisterOutDir, "reactor.ts");
+    const canisterOutDir = path5.join(projectRoot, config.outDir, canisterName);
+    const reactorPath = path5.join(canisterOutDir, "reactor.ts");
     const reactorContent = generateReactorFile({
       canisterName,
       canisterConfig,
       config,
       outDir: canisterOutDir
     });
-    fs5.writeFileSync(reactorPath, reactorContent);
+    fs6.writeFileSync(reactorPath, reactorContent);
     totalUpdated++;
-    const hooksOutDir = path4.join(canisterOutDir, "hooks");
+    const hooksOutDir = path5.join(canisterOutDir, "hooks");
     ensureDir(hooksOutDir);
     for (const methodName of generatedMethods) {
       const method = methods.find((m) => m.name === methodName);
@@ -1164,7 +1293,7 @@ async function syncCommand(options) {
       const infiniteQueryFileName = getHookFileName(methodName, "infiniteQuery");
       let content;
       let fileName;
-      if (fs5.existsSync(path4.join(hooksOutDir, infiniteQueryFileName))) {
+      if (fs6.existsSync(path5.join(hooksOutDir, infiniteQueryFileName))) {
         fileName = infiniteQueryFileName;
         totalSkipped++;
         continue;
@@ -1183,7 +1312,7 @@ async function syncCommand(options) {
           config
         });
       }
-      fs5.writeFileSync(path4.join(hooksOutDir, fileName), content);
+      fs6.writeFileSync(path5.join(hooksOutDir, fileName), content);
       totalUpdated++;
     }
   }
@@ -1206,7 +1335,7 @@ Skipped: ${pc3.dim(totalSkipped.toString())} files (preserved customizations)`,
 
 // src/commands/list.ts
 import * as p4 from "@clack/prompts";
-import path5 from "path";
+import path6 from "path";
 import pc4 from "picocolors";
 async function listCommand(options) {
   console.log();
@@ -1255,7 +1384,7 @@ async function listCommand(options) {
     p4.log.error(`Canister ${pc4.yellow(selectedCanister)} not found in config.`);
     process.exit(1);
   }
-  const didFilePath = path5.resolve(projectRoot, canisterConfig.didFile);
+  const didFilePath = path6.resolve(projectRoot, canisterConfig.didFile);
   try {
     const methods = parseDIDFile(didFilePath);
     if (methods.length === 0) {
@@ -1316,8 +1445,8 @@ ${error.message}`
 
 // src/commands/fetch.ts
 import * as p5 from "@clack/prompts";
-import fs6 from "fs";
-import path6 from "path";
+import fs7 from "fs";
+import path7 from "path";
 import pc5 from "picocolors";
 
 // src/utils/network.ts
@@ -1583,7 +1712,7 @@ async function fetchCommand(options) {
   let configPath = findConfigFile();
   let config;
   if (!configPath) {
-    configPath = path6.join(projectRoot, CONFIG_FILE_NAME);
+    configPath = path7.join(projectRoot, CONFIG_FILE_NAME);
     config = { ...DEFAULT_CONFIG };
     p5.log.info(`Creating ${pc5.yellow(CONFIG_FILE_NAME)}`);
   } else {
@@ -1596,28 +1725,44 @@ async function fetchCommand(options) {
     canisterId
   };
   config.canisters[canisterName] = canisterConfig;
-  const canisterOutDir = path6.join(projectRoot, config.outDir, canisterName);
-  const hooksOutDir = path6.join(canisterOutDir, "hooks");
-  const candidDir = path6.join(projectRoot, "candid");
+  const canisterOutDir = path7.join(projectRoot, config.outDir, canisterName);
+  const hooksOutDir = path7.join(canisterOutDir, "hooks");
+  const candidDir = path7.join(projectRoot, "candid");
   ensureDir(hooksOutDir);
   ensureDir(candidDir);
   const genSpinner = p5.spinner();
   genSpinner.start("Generating hooks...");
   const generatedFiles = [];
-  const candidPath = path6.join(candidDir, `${canisterName}.did`);
-  fs6.writeFileSync(candidPath, candidSource);
+  const candidPath = path7.join(candidDir, `${canisterName}.did`);
+  fs7.writeFileSync(candidPath, candidSource);
   generatedFiles.push(`candid/${canisterName}.did`);
-  const reactorPath = path6.join(canisterOutDir, "reactor.ts");
+  genSpinner.message("Generating TypeScript declarations...");
+  const bindgenResult = await generateDeclarations({
+    didFile: candidPath,
+    outDir: canisterOutDir,
+    canisterName
+  });
+  if (bindgenResult.success) {
+    generatedFiles.push("declarations/");
+  } else {
+    p5.log.warn(`Could not generate declarations: ${bindgenResult.error}`);
+    p5.log.info(
+      `You can manually run: npx @icp-sdk/bindgen --input ${candidPath} --output ${canisterOutDir}/declarations`
+    );
+  }
+  genSpinner.message("Generating reactor...");
+  const reactorPath = path7.join(canisterOutDir, "reactor.ts");
   const reactorContent = generateReactorFileForFetch({
     canisterName,
     canisterConfig,
-    canisterId
+    canisterId,
+    hasDeclarations: bindgenResult.success
   });
-  fs6.writeFileSync(reactorPath, reactorContent);
+  fs7.writeFileSync(reactorPath, reactorContent);
   generatedFiles.push("reactor.ts");
   for (const { method, hookType } of methodsWithHookTypes) {
     const fileName = getHookFileName(method.name, hookType);
-    const filePath = path6.join(hooksOutDir, fileName);
+    const filePath = path7.join(hooksOutDir, fileName);
     let content;
     switch (hookType) {
       case "query":
@@ -1644,12 +1789,12 @@ async function fetchCommand(options) {
         });
         break;
     }
-    fs6.writeFileSync(filePath, content);
-    generatedFiles.push(path6.join("hooks", fileName));
+    fs7.writeFileSync(filePath, content);
+    generatedFiles.push(path7.join("hooks", fileName));
   }
-  const indexPath = path6.join(hooksOutDir, "index.ts");
+  const indexPath = path7.join(hooksOutDir, "index.ts");
   const indexContent = generateIndexFile2(methodsWithHookTypes);
-  fs6.writeFileSync(indexPath, indexContent);
+  fs7.writeFileSync(indexPath, indexContent);
   generatedFiles.push("hooks/index.ts");
   config.generatedHooks[canisterName] = [
     .../* @__PURE__ */ new Set([
@@ -1662,7 +1807,7 @@ async function fetchCommand(options) {
   console.log();
   p5.note(
     generatedFiles.map((f) => pc5.green(`\u2713 ${f}`)).join("\n"),
-    `Generated in ${pc5.dim(path6.relative(projectRoot, canisterOutDir))}`
+    `Generated in ${pc5.dim(path7.relative(projectRoot, canisterOutDir))}`
   );
   console.log();
   p5.note(
@@ -1675,13 +1820,14 @@ Methods: ${pc5.dim(selectedMethods.map((m) => m.name).join(", "))}`,
   p5.outro(pc5.green("\u2713 Done!"));
 }
 function generateReactorFileForFetch(options) {
-  const { canisterName, canisterConfig, canisterId } = options;
+  const { canisterName, canisterConfig, canisterId, hasDeclarations } = options;
   const pascalName = canisterName.charAt(0).toUpperCase() + canisterName.slice(1);
   const reactorName = `${canisterName}Reactor`;
   const serviceName = `${pascalName}Service`;
   const reactorType = canisterConfig.useDisplayReactor !== false ? "DisplayReactor" : "Reactor";
   const clientManagerPath = canisterConfig.clientManagerPath ?? "../../lib/client";
-  return `/**
+  if (hasDeclarations) {
+    return `/**
  * ${pascalName} Reactor
  *
  * Auto-generated by @ic-reactor/cli
@@ -1694,18 +1840,82 @@ import { ${reactorType}, createActorHooks, createAuthHooks } from "@ic-reactor/r
 import { clientManager } from "${clientManagerPath}"
 
 // Import generated declarations
-// Note: You may need to run 'npx @icp-sdk/bindgen' to generate TypeScript types
-// For now, we use a generic service type
-import { idlFactory } from "./declarations/${canisterName}.did"
+import { idlFactory, type _SERVICE as ${serviceName} } from "./declarations/${canisterName}.did"
 
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-// SERVICE TYPE
+// REACTOR INSTANCE
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+/**
+ * ${pascalName} Reactor
+ *
+ * Canister ID: ${canisterId}
+ */
+export const ${reactorName} = new ${reactorType}<${serviceName}>({
+  clientManager,
+  idlFactory,
+  canisterId: "${canisterId}",
+  name: "${canisterName}",
+})
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// BASE HOOKS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+/**
+ * Base actor hooks - use these directly or import method-specific hooks.
+ */
+export const {
+  useActorQuery,
+  useActorMutation,
+  useActorSuspenseQuery,
+  useActorInfiniteQuery,
+  useActorSuspenseInfiniteQuery,
+  useActorMethod,
+} = createActorHooks(${reactorName})
+
+/**
+ * Auth hooks for the client manager.
+ */
+export const { useAuth, useAgentState, useUserPrincipal } = createAuthHooks(clientManager)
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// RE-EXPORTS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+export { idlFactory }
+export type { ${serviceName} }
+`;
+  }
+  return `/**
+ * ${pascalName} Reactor
+ *
+ * Auto-generated by @ic-reactor/cli
+ * Fetched from canister: ${canisterId}
+ *
+ * You can customize this file to add global configuration.
+ */
+
+import { ${reactorType}, createActorHooks, createAuthHooks } from "@ic-reactor/react"
+import { clientManager } from "${clientManagerPath}"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// DECLARATIONS
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 
-// TODO: Generate proper types using @icp-sdk/bindgen
-// npx @icp-sdk/bindgen --input ./candid/${canisterName}.did --output ./src/canisters/${canisterName}/declarations
+// TODO: Generate proper types by running:
+// npx @icp-sdk/bindgen --input ./candid/${canisterName}.did --output ./${canisterName}/declarations
+
+// For now, import just the IDL factory (you may need to create this manually)
+// import { idlFactory, type _SERVICE as ${serviceName} } from "./declarations/${canisterName}.did"
+
+// Fallback generic type - replace with generated types
 type ${serviceName} = Record<string, (...args: unknown[]) => Promise<unknown>>
 
+// You'll need to define idlFactory here or import from declarations
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const idlFactory = ({ IDL }: { IDL: any }) => IDL.Service({})
+
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 // REACTOR INSTANCE
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ic-reactor/cli",
-  "version": "0.0.0-dev2",
+  "version": "0.0.0-dev3",
   "type": "module",
   "description": "CLI tool to generate shadcn-style React hooks for ICP canisters",
   "main": "dist/index.js",
@@ -34,6 +34,7 @@
   "homepage": "https://github.com/B3Pay/ic-reactor#readme",
   "dependencies": {
     "@clack/prompts": "^0.9.1",
+    "@icp-sdk/bindgen": "^0.2.1",
     "@icp-sdk/core": "^5.0.0",
     "commander": "^13.1.0",
     "picocolors": "^1.1.1"