@ic-reactor/cli 0.0.0-dev

package/dist/index.js

@@ -0,0 +1,1709 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/init.ts
+import * as p from "@clack/prompts";
+import fs2 from "fs";
+import path2 from "path";
+import pc from "picocolors";
+
+// src/utils/config.ts
+import fs from "fs";
+import path from "path";
+var CONFIG_FILE_NAME = "reactor.config.json";
+var DEFAULT_CONFIG = {
+  $schema: "https://raw.githubusercontent.com/B3Pay/ic-reactor/main/packages/cli/schema.json",
+  outDir: "src/canisters",
+  canisters: {},
+  generatedHooks: {}
+};
+function findConfigFile(startDir = process.cwd()) {
+  let currentDir = startDir;
+  while (currentDir !== path.dirname(currentDir)) {
+    const configPath = path.join(currentDir, CONFIG_FILE_NAME);
+    if (fs.existsSync(configPath)) {
+      return configPath;
+    }
+    currentDir = path.dirname(currentDir);
+  }
+  return null;
+}
+function loadConfig(configPath) {
+  const filePath = configPath ?? findConfigFile();
+  if (!filePath || !fs.existsSync(filePath)) {
+    return null;
+  }
+  try {
+    const content = fs.readFileSync(filePath, "utf-8");
+    return JSON.parse(content);
+  } catch {
+    return null;
+  }
+}
+function saveConfig(config, configPath = path.join(process.cwd(), CONFIG_FILE_NAME)) {
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2) + "\n");
+}
+function getProjectRoot() {
+  let currentDir = process.cwd();
+  while (currentDir !== path.dirname(currentDir)) {
+    if (fs.existsSync(path.join(currentDir, "package.json"))) {
+      return currentDir;
+    }
+    currentDir = path.dirname(currentDir);
+  }
+  return process.cwd();
+}
+function ensureDir(dirPath) {
+  if (!fs.existsSync(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+  }
+}
+function fileExists(filePath) {
+  return fs.existsSync(filePath);
+}
+
+// src/commands/init.ts
+async function initCommand(options) {
+  console.log();
+  p.intro(pc.cyan("\u{1F527} ic-reactor CLI Setup"));
+  const existingConfig = findConfigFile();
+  if (existingConfig) {
+    const shouldOverwrite = await p.confirm({
+      message: `Config file already exists at ${pc.yellow(existingConfig)}. Overwrite?`,
+      initialValue: false
+    });
+    if (p.isCancel(shouldOverwrite) || !shouldOverwrite) {
+      p.cancel("Setup cancelled.");
+      process.exit(0);
+    }
+  }
+  const projectRoot = getProjectRoot();
+  let config;
+  if (options.yes) {
+    config = { ...DEFAULT_CONFIG };
+    if (options.outDir) {
+      config.outDir = options.outDir;
+    }
+  } else {
+    const outDir = await p.text({
+      message: "Where should generated hooks be placed?",
+      placeholder: "src/canisters",
+      defaultValue: "src/canisters",
+      validate: (value) => {
+        if (!value) return "Output directory is required";
+        return void 0;
+      }
+    });
+    if (p.isCancel(outDir)) {
+      p.cancel("Setup cancelled.");
+      process.exit(0);
+    }
+    const addCanister = await p.confirm({
+      message: "Would you like to add a canister now?",
+      initialValue: true
+    });
+    if (p.isCancel(addCanister)) {
+      p.cancel("Setup cancelled.");
+      process.exit(0);
+    }
+    config = {
+      ...DEFAULT_CONFIG,
+      outDir
+    };
+    if (addCanister) {
+      const canisterInfo = await promptForCanister(projectRoot);
+      if (canisterInfo) {
+        config.canisters[canisterInfo.name] = canisterInfo.config;
+      }
+    }
+  }
+  const configPath = path2.join(projectRoot, CONFIG_FILE_NAME);
+  saveConfig(config, configPath);
+  const fullOutDir = path2.join(projectRoot, config.outDir);
+  ensureDir(fullOutDir);
+  const clientManagerPath = path2.join(projectRoot, "src/lib/client.ts");
+  if (!fs2.existsSync(clientManagerPath)) {
+    const createClient = await p.confirm({
+      message: "Create a sample client manager at src/lib/client.ts?",
+      initialValue: true
+    });
+    if (!p.isCancel(createClient) && createClient) {
+      ensureDir(path2.dirname(clientManagerPath));
+      fs2.writeFileSync(clientManagerPath, getClientManagerTemplate());
+      p.log.success(`Created ${pc.green("src/lib/client.ts")}`);
+    }
+  }
+  p.log.success(`Created ${pc.green(CONFIG_FILE_NAME)}`);
+  p.log.success(`Created ${pc.green(config.outDir)} directory`);
+  console.log();
+  p.note(
+    `Next steps:
+  
+  1. ${pc.cyan("Add a canister:")}
+     ${pc.dim("npx @ic-reactor/cli add")}
+  
+  2. ${pc.cyan("List available methods:")}
+     ${pc.dim("npx @ic-reactor/cli list -c <canister-name>")}
+  
+  3. ${pc.cyan("Add hooks for specific methods:")}
+     ${pc.dim("npx @ic-reactor/cli add -c <canister> -m <method>")}`,
+    "Getting Started"
+  );
+  p.outro(pc.green("\u2713 ic-reactor initialized successfully!"));
+}
+async function promptForCanister(projectRoot) {
+  const name = await p.text({
+    message: "Canister name",
+    placeholder: "backend",
+    validate: (value) => {
+      if (!value) return "Canister name is required";
+      if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(value)) {
+        return "Canister name must start with a letter and contain only letters, numbers, hyphens, and underscores";
+      }
+      return void 0;
+    }
+  });
+  if (p.isCancel(name)) return null;
+  const didFile = await p.text({
+    message: "Path to .did file",
+    placeholder: "./backend.did",
+    validate: (value) => {
+      if (!value) return "DID file path is required";
+      const fullPath = path2.resolve(projectRoot, value);
+      if (!fs2.existsSync(fullPath)) {
+        return `File not found: ${value}`;
+      }
+      return void 0;
+    }
+  });
+  if (p.isCancel(didFile)) return null;
+  const clientManagerPath = await p.text({
+    message: "Import path to your client manager (relative from generated hooks)",
+    placeholder: "../../lib/client",
+    defaultValue: "../../lib/client"
+  });
+  if (p.isCancel(clientManagerPath)) return null;
+  const useDisplayReactor = await p.confirm({
+    message: "Use DisplayReactor? (auto-converts bigint \u2192 string, Principal \u2192 string)",
+    initialValue: true
+  });
+  if (p.isCancel(useDisplayReactor)) return null;
+  return {
+    name,
+    config: {
+      didFile,
+      clientManagerPath,
+      useDisplayReactor
+    }
+  };
+}
+function getClientManagerTemplate() {
+  return `/**
+ * IC Client Manager
+ *
+ * This file configures the IC agent and client manager for your application.
+ * Customize the agent options based on your environment.
+ */
+
+import { ClientManager } from "@ic-reactor/react"
+
+/**
+ * The client manager handles agent lifecycle and authentication.
+ *
+ * Configuration options:
+ * - host: IC network host (defaults to process env or mainnet)
+ * - identity: Initial identity (optional, can be set later)
+ * - verifyQuerySignatures: Verify query signatures (recommended for production)
+ *
+ * For local development, the agent will automatically detect local replica.
+ */
+export const clientManager = new ClientManager({
+  // Uncomment for explicit host configuration:
+  // host: process.env.DFX_NETWORK === "local"
+  //   ? "http://localhost:4943"
+  //   : "https://icp-api.io",
+})
+`;
+}
+
+// src/commands/add.ts
+import * as p2 from "@clack/prompts";
+import fs4 from "fs";
+import path3 from "path";
+import pc2 from "picocolors";
+
+// src/parsers/did.ts
+import fs3 from "fs";
+function parseDIDFile(didFilePath) {
+  if (!fs3.existsSync(didFilePath)) {
+    throw new Error(`DID file not found: ${didFilePath}`);
+  }
+  const content = fs3.readFileSync(didFilePath, "utf-8");
+  return extractMethods(content);
+}
+function extractMethods(didContent) {
+  const methods = [];
+  const cleanContent = didContent.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
+  const methodRegex = /([a-zA-Z_][a-zA-Z0-9_]*)\s*:\s*(?:func\s*)?\(([^)]*)\)\s*->\s*\(([^)]*)\)\s*(query|composite_query)?/g;
+  let match;
+  while ((match = methodRegex.exec(cleanContent)) !== null) {
+    const name = match[1];
+    const args = match[2].trim();
+    const returnType = match[3].trim();
+    const queryAnnotation = match[4];
+    const isQuery = queryAnnotation === "query" || queryAnnotation === "composite_query";
+    methods.push({
+      name,
+      type: isQuery ? "query" : "mutation",
+      hasArgs: args.length > 0 && args !== "",
+      argsDescription: args || void 0,
+      returnDescription: returnType || void 0
+    });
+  }
+  return methods;
+}
+function formatMethodForDisplay(method) {
+  const typeLabel = method.type === "query" ? "query" : "update";
+  const argsLabel = method.hasArgs ? "with args" : "no args";
+  return `${method.name} (${typeLabel}, ${argsLabel})`;
+}
+
+// src/utils/naming.ts
+function toPascalCase(str) {
+  return str.split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join("");
+}
+function toCamelCase(str) {
+  const pascal = toPascalCase(str);
+  return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+}
+function getHookFileName(methodName, hookType) {
+  const camelMethod = toCamelCase(methodName);
+  const pascalType = toPascalCase(hookType);
+  return `${camelMethod}${pascalType}.ts`;
+}
+function getHookExportName(methodName, hookType) {
+  const camelMethod = toCamelCase(methodName);
+  const pascalType = toPascalCase(hookType);
+  return `${camelMethod}${pascalType}`;
+}
+function getReactHookName(methodName, hookType) {
+  const pascalMethod = toPascalCase(methodName);
+  const pascalType = toPascalCase(hookType);
+  return `use${pascalMethod}${pascalType}`;
+}
+function getReactorName(canisterName) {
+  return `${toCamelCase(canisterName)}Reactor`;
+}
+function getServiceTypeName(canisterName) {
+  return `${toPascalCase(canisterName)}Service`;
+}
+
+// src/generators/reactor.ts
+function generateReactorFile(options) {
+  const { canisterName, canisterConfig } = 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 `/**
+ * ${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}"
+import { idlFactory, type _SERVICE } from "${declarationsPath}"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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 type ${serviceName} = _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 }
+`;
+}
+
+// src/generators/query.ts
+function generateQueryHook(options) {
+  const { canisterName, method } = options;
+  const pascalMethod = toPascalCase(method.name);
+  const reactorName = getReactorName(canisterName);
+  const serviceName = getServiceTypeName(canisterName);
+  const hookExportName = getHookExportName(method.name, "query");
+  const reactHookName = getReactHookName(method.name, "query");
+  if (method.hasArgs) {
+    return `/**
+ * Query Hook: ${method.name}
+ *
+ * Auto-generated by @ic-reactor/cli
+ * This hook wraps the ${method.name} query method.
+ *
+ * @example
+ * // With the factory (for dynamic args)
+ * const query = ${hookExportName}([arg1, arg2])
+ * const { data } = query.useQuery()
+ *
+ * // Or use the hook directly
+ * const { data } = ${reactHookName}([arg1, arg2])
+ */
+
+import { createQueryFactory } from "@ic-reactor/react"
+import { ${reactorName}, type ${serviceName} } from "../reactor"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// QUERY FACTORY
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+/**
+ * Query factory for ${method.name}
+ *
+ * Creates a query instance with the provided arguments.
+ * Each unique set of args gets its own cached query.
+ */
+export const ${hookExportName} = createQueryFactory(${reactorName}, {
+  functionName: "${method.name}",
+  // Customize your query options:
+  // staleTime: 5 * 60 * 1000,
+  // select: (data) => data,
+})
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// CONVENIENCE HOOK
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+/**
+ * React hook for ${method.name}
+ *
+ * @param args - Arguments to pass to the canister method
+ * @param options - Additional React Query options
+ */
+export function ${reactHookName}(
+  args: Parameters<${serviceName}["${method.name}"]>,
+  options?: Parameters<ReturnType<typeof ${hookExportName}>["useQuery"]>[0]
+) {
+  return ${hookExportName}(args).useQuery(options)
+}
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// UTILITY FUNCTIONS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+/**
+ * Fetch ${method.name} directly (for loaders, server components, etc.)
+ */
+export function fetch${pascalMethod}(args: Parameters<${serviceName}["${method.name}"]>) {
+  return ${hookExportName}(args).fetch()
+}
+
+/**
+ * Invalidate ${method.name} query cache
+ */
+export function invalidate${pascalMethod}(args: Parameters<${serviceName}["${method.name}"]>) {
+  return ${hookExportName}(args).invalidate()
+}
+
+/**
+ * Get ${method.name} query key (for cache manipulation)
+ */
+export function get${pascalMethod}QueryKey(args: Parameters<${serviceName}["${method.name}"]>) {
+  return ${hookExportName}(args).getQueryKey()
+}
+`;
+  } else {
+    return `/**
+ * Query Hook: ${method.name}
+ *
+ * Auto-generated by @ic-reactor/cli
+ * This hook wraps the ${method.name} query method.
+ *
+ * @example
+ * // Use the hook
+ * const { data, isLoading } = ${reactHookName}()
+ *
+ * // Or access the query object directly
+ * const data = await ${hookExportName}.fetch()
+ * ${hookExportName}.invalidate()
+ */
+
+import { createQuery } from "@ic-reactor/react"
+import { ${reactorName} } from "../reactor"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// QUERY 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
+
+/**
+ * Query for ${method.name}
+ *
+ * Provides:
+ * - .useQuery() - React hook
+ * - .fetch() - Direct fetch (for loaders)
+ * - .invalidate() - Invalidate cache
+ * - .getQueryKey() - Get query key
+ * - .getCacheData() - Read from cache
+ */
+export const ${hookExportName} = createQuery(${reactorName}, {
+  functionName: "${method.name}",
+  // Customize your query options:
+  // staleTime: 5 * 60 * 1000,
+  // select: (data) => data,
+})
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// CONVENIENCE 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
+
+/**
+ * React hook for ${method.name}
+ */
+export const ${reactHookName} = ${hookExportName}.useQuery
+
+/**
+ * Fetch ${method.name} directly (for loaders, server components, etc.)
+ */
+export const fetch${pascalMethod} = ${hookExportName}.fetch
+
+/**
+ * Invalidate ${method.name} query cache
+ */
+export const invalidate${pascalMethod} = ${hookExportName}.invalidate
+
+/**
+ * Get ${method.name} query key (for cache manipulation)
+ */
+export const get${pascalMethod}QueryKey = ${hookExportName}.getQueryKey
+
+/**
+ * Get cached data for ${method.name}
+ */
+export const get${pascalMethod}CacheData = ${hookExportName}.getCacheData
+`;
+  }
+}
+
+// src/generators/mutation.ts
+function generateMutationHook(options) {
+  const { canisterName, method } = options;
+  const pascalMethod = toPascalCase(method.name);
+  const reactorName = getReactorName(canisterName);
+  const serviceName = getServiceTypeName(canisterName);
+  const hookExportName = getHookExportName(method.name, "mutation");
+  const reactHookName = getReactHookName(method.name, "mutation");
+  return `/**
+ * Mutation Hook: ${method.name}
+ *
+ * Auto-generated by @ic-reactor/cli
+ * This hook wraps the ${method.name} update method.
+ *
+ * @example
+ * // Use the hook in a component
+ * const { mutate, isPending } = ${reactHookName}()
+ *
+ * // Call the mutation
+ * mutate(${method.hasArgs ? "[arg1, arg2]" : "[]"})
+ *
+ * // Or execute directly
+ * const result = await execute${pascalMethod}(${method.hasArgs ? "[arg1, arg2]" : "[]"})
+ */
+
+import { createMutation } from "@ic-reactor/react"
+import { ${reactorName}, type ${serviceName} } from "../reactor"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// MUTATION 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
+
+/**
+ * Mutation for ${method.name}
+ *
+ * Provides:
+ * - .useMutation() - React hook
+ * - .execute() - Direct execution
+ */
+export const ${hookExportName} = createMutation(${reactorName}, {
+  functionName: "${method.name}",
+  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // INVALIDATION
+  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // Uncomment and import query keys to auto-invalidate on success:
+  // invalidateQueries: [
+  //   someQuery.getQueryKey(),
+  // ],
+
+  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // SUCCESS HANDLER
+  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // onSuccess: (data, variables, context) => {
+  //   console.log("${method.name} succeeded:", data)
+  // },
+
+  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // ERROR HANDLERS
+  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // Handle canister-level errors (from Result { Err })
+  // onCanisterError: (error, variables) => {
+  //   console.error("Canister error:", error)
+  // },
+
+  // Handle all errors (network, canister, etc.)
+  // onError: (error, variables, context) => {
+  //   console.error("Error:", error)
+  // },
+})
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// CONVENIENCE 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
+
+/**
+ * React hook for ${method.name}
+ *
+ * @param options - Mutation options (onSuccess, onError, etc.)
+ */
+export const ${reactHookName} = ${hookExportName}.useMutation
+
+/**
+ * Execute ${method.name} directly (outside of React)
+ *
+ * @param args - Arguments to pass to the canister method
+ */
+export const execute${pascalMethod} = ${hookExportName}.execute
+`;
+}
+
+// src/generators/infiniteQuery.ts
+function generateInfiniteQueryHook(options) {
+  const { canisterName, method } = options;
+  const pascalMethod = toPascalCase(method.name);
+  const camelMethod = toCamelCase(method.name);
+  const reactorName = getReactorName(canisterName);
+  const serviceName = getServiceTypeName(canisterName);
+  return `/**
+ * Infinite Query Hook: ${method.name}
+ *
+ * Auto-generated by @ic-reactor/cli
+ * This hook wraps the ${method.name} method for infinite/paginated queries.
+ *
+ * \u26A0\uFE0F  CUSTOMIZATION REQUIRED:
+ * You need to configure getArgs and getNextPageParam based on your API.
+ *
+ * @example
+ * const {
+ *   data,
+ *   fetchNextPage,
+ *   hasNextPage,
+ *   isFetching,
+ * } = ${camelMethod}InfiniteQuery.useInfiniteQuery()
+ *
+ * // Flatten all pages
+ * const allItems = data?.pages.flatMap(page => page.items) ?? []
+ */
+
+import { createInfiniteQuery } from "@ic-reactor/react"
+import { ${reactorName}, type ${serviceName} } from "../reactor"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// CURSOR TYPE
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+/**
+ * Define your pagination cursor type here.
+ * Common patterns:
+ * - number (offset-based)
+ * - string (cursor-based)
+ * - { offset: number; limit: number }
+ */
+type PageCursor = number
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// INFINITE QUERY 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
+
+/**
+ * Infinite query for ${method.name}
+ *
+ * Provides:
+ * - .useInfiniteQuery() - React hook with pagination
+ * - .fetch() - Fetch first page
+ * - .invalidate() - Invalidate all pages
+ * - .getQueryKey() - Get query key
+ * - .getCacheData() - Read from cache
+ */
+export const ${camelMethod}InfiniteQuery = createInfiniteQuery(${reactorName}, {
+  functionName: "${method.name}",
+
+  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // PAGINATION CONFIG (CUSTOMIZE THESE)
+  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+  /**
+   * Initial page parameter (e.g., 0 for offset, null for cursor)
+   */
+  initialPageParam: 0 as PageCursor,
+
+  /**
+   * Convert page param to method arguments.
+   * Customize this based on your canister API.
+   */
+  getArgs: (pageParam: PageCursor) => {
+    // Example: offset-based pagination
+    return [{ offset: pageParam, limit: 10 }] as Parameters<${serviceName}["${method.name}"]>
+
+    // Example: cursor-based pagination
+    // return [{ cursor: pageParam, limit: 10 }] as Parameters<${serviceName}["${method.name}"]>
+  },
+
+  /**
+   * Extract next page param from the last page.
+   * Return undefined/null when there are no more pages.
+   */
+  getNextPageParam: (lastPage, allPages, lastPageParam) => {
+    // Example: offset-based - return next offset or undefined if no more
+    // const items = lastPage.items ?? []
+    // if (items.length < 10) return undefined
+    // return lastPageParam + 10
+
+    // Example: cursor-based
+    // return lastPage.nextCursor ?? undefined
+
+    // Placeholder - customize for your API
+    return undefined
+  },
+
+  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // OPTIONAL CONFIG
+  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+  // Bi-directional scrolling (optional)
+  // getPreviousPageParam: (firstPage, allPages, firstPageParam) => {
+  //   return firstPageParam > 0 ? firstPageParam - 10 : undefined
+  // },
+
+  // Max pages to keep in cache (for memory management)
+  // maxPages: 10,
+
+  // How long data stays fresh
+  // staleTime: 5 * 60 * 1000,
+
+  // Transform the data
+  // select: (data) => ({
+  //   pages: data.pages,
+  //   pageParams: data.pageParams,
+  //   items: data.pages.flatMap(page => page.items),
+  // }),
+})
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// CONVENIENCE 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
+
+/**
+ * React hook for paginated ${method.name}
+ */
+export const use${pascalMethod}InfiniteQuery = ${camelMethod}InfiniteQuery.useInfiniteQuery
+
+/**
+ * Fetch first page of ${method.name}
+ */
+export const fetch${pascalMethod}FirstPage = ${camelMethod}InfiniteQuery.fetch
+
+/**
+ * Invalidate all cached pages
+ */
+export const invalidate${pascalMethod}Pages = ${camelMethod}InfiniteQuery.invalidate
+`;
+}
+
+// src/commands/add.ts
+async function addCommand(options) {
+  console.log();
+  p2.intro(pc2.cyan("\u{1F527} Add Canister Hooks"));
+  const configPath = findConfigFile();
+  if (!configPath) {
+    p2.log.error(
+      `No ${pc2.yellow("reactor.config.json")} found. Run ${pc2.cyan("npx @ic-reactor/cli init")} first.`
+    );
+    process.exit(1);
+  }
+  const config = loadConfig(configPath);
+  if (!config) {
+    p2.log.error(`Failed to load config from ${pc2.yellow(configPath)}`);
+    process.exit(1);
+  }
+  const projectRoot = getProjectRoot();
+  const canisterNames = Object.keys(config.canisters);
+  if (canisterNames.length === 0) {
+    p2.log.error(
+      `No canisters configured. Add a canister to ${pc2.yellow("reactor.config.json")} first.`
+    );
+    const addNow = await p2.confirm({
+      message: "Would you like to add a canister now?",
+      initialValue: true
+    });
+    if (p2.isCancel(addNow) || !addNow) {
+      process.exit(1);
+    }
+    const canisterInfo = await promptForNewCanister(projectRoot);
+    if (!canisterInfo) {
+      p2.cancel("Cancelled.");
+      process.exit(0);
+    }
+    config.canisters[canisterInfo.name] = canisterInfo.config;
+    saveConfig(config, configPath);
+    canisterNames.push(canisterInfo.name);
+  }
+  let selectedCanister = options.canister;
+  if (!selectedCanister) {
+    if (canisterNames.length === 1) {
+      selectedCanister = canisterNames[0];
+    } else {
+      const result = await p2.select({
+        message: "Select a canister",
+        options: canisterNames.map((name) => ({
+          value: name,
+          label: name
+        }))
+      });
+      if (p2.isCancel(result)) {
+        p2.cancel("Cancelled.");
+        process.exit(0);
+      }
+      selectedCanister = result;
+    }
+  }
+  const canisterConfig = config.canisters[selectedCanister];
+  if (!canisterConfig) {
+    p2.log.error(`Canister ${pc2.yellow(selectedCanister)} not found in config.`);
+    process.exit(1);
+  }
+  const didFilePath = path3.resolve(projectRoot, canisterConfig.didFile);
+  let methods;
+  try {
+    methods = parseDIDFile(didFilePath);
+  } catch (error) {
+    p2.log.error(
+      `Failed to parse DID file: ${pc2.yellow(didFilePath)}
+${error.message}`
+    );
+    process.exit(1);
+  }
+  if (methods.length === 0) {
+    p2.log.warn(`No methods found in ${pc2.yellow(didFilePath)}`);
+    process.exit(0);
+  }
+  p2.log.info(
+    `Found ${pc2.green(methods.length.toString())} methods in ${pc2.dim(selectedCanister)}`
+  );
+  let selectedMethods;
+  if (options.all) {
+    selectedMethods = methods;
+  } else if (options.methods && options.methods.length > 0) {
+    selectedMethods = methods.filter((m) => options.methods.includes(m.name));
+    const notFound = options.methods.filter(
+      (name) => !methods.some((m) => m.name === name)
+    );
+    if (notFound.length > 0) {
+      p2.log.warn(`Methods not found: ${pc2.yellow(notFound.join(", "))}`);
+    }
+  } else {
+    const alreadyGenerated = config.generatedHooks[selectedCanister] ?? [];
+    const result = await p2.multiselect({
+      message: "Select methods to add hooks for",
+      options: methods.map((method) => {
+        const isGenerated = alreadyGenerated.includes(method.name);
+        return {
+          value: method.name,
+          label: formatMethodForDisplay(method),
+          hint: isGenerated ? pc2.dim("(already generated)") : void 0
+        };
+      }),
+      required: true
+    });
+    if (p2.isCancel(result)) {
+      p2.cancel("Cancelled.");
+      process.exit(0);
+    }
+    selectedMethods = methods.filter(
+      (m) => result.includes(m.name)
+    );
+  }
+  if (selectedMethods.length === 0) {
+    p2.log.warn("No methods selected.");
+    process.exit(0);
+  }
+  const methodsWithHookTypes = [];
+  for (const method of selectedMethods) {
+    if (method.type === "query") {
+      const hookType = await p2.select({
+        message: `Hook type for ${pc2.cyan(method.name)}`,
+        options: [
+          { value: "query", label: "Query", hint: "Standard query hook" },
+          {
+            value: "suspenseQuery",
+            label: "Suspense Query",
+            hint: "For React Suspense"
+          },
+          {
+            value: "infiniteQuery",
+            label: "Infinite Query",
+            hint: "Paginated/infinite scroll"
+          },
+          {
+            value: "suspenseInfiniteQuery",
+            label: "Suspense Infinite Query",
+            hint: "Paginated with Suspense"
+          }
+        ]
+      });
+      if (p2.isCancel(hookType)) {
+        p2.cancel("Cancelled.");
+        process.exit(0);
+      }
+      methodsWithHookTypes.push({ method, hookType });
+    } else {
+      methodsWithHookTypes.push({ method, hookType: "mutation" });
+    }
+  }
+  const canisterOutDir = path3.join(projectRoot, config.outDir, selectedCanister);
+  const hooksOutDir = path3.join(canisterOutDir, "hooks");
+  ensureDir(hooksOutDir);
+  const spinner4 = p2.spinner();
+  spinner4.start("Generating hooks...");
+  const generatedFiles = [];
+  const reactorPath = path3.join(canisterOutDir, "reactor.ts");
+  if (!fileExists(reactorPath)) {
+    const reactorContent = generateReactorFile({
+      canisterName: selectedCanister,
+      canisterConfig,
+      config,
+      outDir: canisterOutDir
+    });
+    fs4.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);
+    let content;
+    switch (hookType) {
+      case "query":
+      case "suspenseQuery":
+        content = generateQueryHook({
+          canisterName: selectedCanister,
+          method,
+          config
+        });
+        break;
+      case "infiniteQuery":
+      case "suspenseInfiniteQuery":
+        content = generateInfiniteQueryHook({
+          canisterName: selectedCanister,
+          method,
+          config
+        });
+        break;
+      case "mutation":
+        content = generateMutationHook({
+          canisterName: selectedCanister,
+          method,
+          config
+        });
+        break;
+    }
+    fs4.writeFileSync(filePath, content);
+    generatedFiles.push(path3.join("hooks", fileName));
+  }
+  const indexPath = path3.join(hooksOutDir, "index.ts");
+  const indexContent = generateIndexFile(methodsWithHookTypes);
+  fs4.writeFileSync(indexPath, indexContent);
+  generatedFiles.push("hooks/index.ts");
+  config.generatedHooks[selectedCanister] = [
+    .../* @__PURE__ */ new Set([
+      ...config.generatedHooks[selectedCanister] ?? [],
+      ...selectedMethods.map((m) => m.name)
+    ])
+  ];
+  saveConfig(config, configPath);
+  spinner4.stop("Hooks generated!");
+  console.log();
+  p2.note(
+    generatedFiles.map((f) => pc2.green(`\u2713 ${f}`)).join("\n"),
+    `Generated in ${pc2.dim(path3.relative(projectRoot, canisterOutDir))}`
+  );
+  p2.outro(pc2.green("\u2713 Done!"));
+}
+async function promptForNewCanister(projectRoot) {
+  const name = await p2.text({
+    message: "Canister name",
+    placeholder: "backend",
+    validate: (value) => {
+      if (!value) return "Canister name is required";
+      return void 0;
+    }
+  });
+  if (p2.isCancel(name)) return null;
+  const didFile = await p2.text({
+    message: "Path to .did file",
+    placeholder: "./backend.did",
+    validate: (value) => {
+      if (!value) return "DID file path is required";
+      const fullPath = path3.resolve(projectRoot, value);
+      if (!fs4.existsSync(fullPath)) {
+        return `File not found: ${value}`;
+      }
+      return void 0;
+    }
+  });
+  if (p2.isCancel(didFile)) return null;
+  return {
+    name,
+    config: {
+      didFile,
+      clientManagerPath: "../../lib/client",
+      useDisplayReactor: true
+    }
+  };
+}
+function generateIndexFile(methods) {
+  const exports = methods.map(({ method, hookType }) => {
+    const fileName = getHookFileName(method.name, hookType).replace(".ts", "");
+    return `export * from "./${fileName}"`;
+  });
+  return `/**
+ * Hook barrel exports
+ *
+ * Auto-generated by @ic-reactor/cli
+ */
+
+${exports.join("\n")}
+`;
+}
+
+// src/commands/sync.ts
+import * as p3 from "@clack/prompts";
+import fs5 from "fs";
+import path4 from "path";
+import pc3 from "picocolors";
+async function syncCommand(options) {
+  console.log();
+  p3.intro(pc3.cyan("\u{1F504} Sync Canister Hooks"));
+  const configPath = findConfigFile();
+  if (!configPath) {
+    p3.log.error(
+      `No ${pc3.yellow("reactor.config.json")} found. Run ${pc3.cyan("npx @ic-reactor/cli init")} first.`
+    );
+    process.exit(1);
+  }
+  const config = loadConfig(configPath);
+  if (!config) {
+    p3.log.error(`Failed to load config from ${pc3.yellow(configPath)}`);
+    process.exit(1);
+  }
+  const projectRoot = getProjectRoot();
+  const canisterNames = Object.keys(config.canisters);
+  if (canisterNames.length === 0) {
+    p3.log.error("No canisters configured.");
+    process.exit(1);
+  }
+  let canistersToSync;
+  if (options.canister) {
+    if (!config.canisters[options.canister]) {
+      p3.log.error(
+        `Canister ${pc3.yellow(options.canister)} not found in config.`
+      );
+      process.exit(1);
+    }
+    canistersToSync = [options.canister];
+  } else {
+    canistersToSync = canisterNames.filter(
+      (name) => (config.generatedHooks[name]?.length ?? 0) > 0
+    );
+    if (canistersToSync.length === 0) {
+      p3.log.warn("No hooks have been generated yet. Run `add` first.");
+      process.exit(0);
+    }
+  }
+  const spinner4 = p3.spinner();
+  spinner4.start("Syncing hooks...");
+  let totalUpdated = 0;
+  let totalSkipped = 0;
+  const errors = [];
+  for (const canisterName of canistersToSync) {
+    const canisterConfig = config.canisters[canisterName];
+    const generatedMethods = config.generatedHooks[canisterName] ?? [];
+    if (generatedMethods.length === 0) {
+      continue;
+    }
+    const didFilePath = path4.resolve(projectRoot, canisterConfig.didFile);
+    let methods;
+    try {
+      methods = parseDIDFile(didFilePath);
+    } catch (error) {
+      errors.push(
+        `${canisterName}: Failed to parse DID file - ${error.message}`
+      );
+      continue;
+    }
+    const currentMethodNames = methods.map((m) => m.name);
+    const removedMethods = generatedMethods.filter(
+      (name) => !currentMethodNames.includes(name)
+    );
+    if (removedMethods.length > 0) {
+      p3.log.warn(
+        `${canisterName}: Methods removed from DID: ${pc3.yellow(removedMethods.join(", "))}`
+      );
+    }
+    const newMethods = methods.filter((m) => !generatedMethods.includes(m.name));
+    if (newMethods.length > 0) {
+      p3.log.info(
+        `${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 reactorContent = generateReactorFile({
+      canisterName,
+      canisterConfig,
+      config,
+      outDir: canisterOutDir
+    });
+    fs5.writeFileSync(reactorPath, reactorContent);
+    totalUpdated++;
+    const hooksOutDir = path4.join(canisterOutDir, "hooks");
+    ensureDir(hooksOutDir);
+    for (const methodName of generatedMethods) {
+      const method = methods.find((m) => m.name === methodName);
+      if (!method) {
+        totalSkipped++;
+        continue;
+      }
+      const queryFileName = getHookFileName(methodName, "query");
+      const mutationFileName = getHookFileName(methodName, "mutation");
+      const infiniteQueryFileName = getHookFileName(methodName, "infiniteQuery");
+      let content;
+      let fileName;
+      if (fs5.existsSync(path4.join(hooksOutDir, infiniteQueryFileName))) {
+        fileName = infiniteQueryFileName;
+        totalSkipped++;
+        continue;
+      } else if (method.type === "query") {
+        fileName = queryFileName;
+        content = generateQueryHook({
+          canisterName,
+          method,
+          config
+        });
+      } else {
+        fileName = mutationFileName;
+        content = generateMutationHook({
+          canisterName,
+          method,
+          config
+        });
+      }
+      fs5.writeFileSync(path4.join(hooksOutDir, fileName), content);
+      totalUpdated++;
+    }
+  }
+  spinner4.stop("Sync complete!");
+  if (errors.length > 0) {
+    console.log();
+    p3.log.error("Errors encountered:");
+    for (const error of errors) {
+      console.log(`  ${pc3.red("\u2022")} ${error}`);
+    }
+  }
+  console.log();
+  p3.note(
+    `Updated: ${pc3.green(totalUpdated.toString())} files
+Skipped: ${pc3.dim(totalSkipped.toString())} files (preserved customizations)`,
+    "Summary"
+  );
+  p3.outro(pc3.green("\u2713 Sync complete!"));
+}
+
+// src/commands/list.ts
+import * as p4 from "@clack/prompts";
+import path5 from "path";
+import pc4 from "picocolors";
+async function listCommand(options) {
+  console.log();
+  p4.intro(pc4.cyan("\u{1F4CB} List Canister Methods"));
+  const configPath = findConfigFile();
+  if (!configPath) {
+    p4.log.error(
+      `No ${pc4.yellow("reactor.config.json")} found. Run ${pc4.cyan("npx @ic-reactor/cli init")} first.`
+    );
+    process.exit(1);
+  }
+  const config = loadConfig(configPath);
+  if (!config) {
+    p4.log.error(`Failed to load config from ${pc4.yellow(configPath)}`);
+    process.exit(1);
+  }
+  const projectRoot = getProjectRoot();
+  const canisterNames = Object.keys(config.canisters);
+  if (canisterNames.length === 0) {
+    p4.log.error(
+      `No canisters configured. Add a canister to ${pc4.yellow("reactor.config.json")} first.`
+    );
+    process.exit(1);
+  }
+  let selectedCanister = options.canister;
+  if (!selectedCanister) {
+    if (canisterNames.length === 1) {
+      selectedCanister = canisterNames[0];
+    } else {
+      const result = await p4.select({
+        message: "Select a canister",
+        options: canisterNames.map((name) => ({
+          value: name,
+          label: name
+        }))
+      });
+      if (p4.isCancel(result)) {
+        p4.cancel("Cancelled.");
+        process.exit(0);
+      }
+      selectedCanister = result;
+    }
+  }
+  const canisterConfig = config.canisters[selectedCanister];
+  if (!canisterConfig) {
+    p4.log.error(`Canister ${pc4.yellow(selectedCanister)} not found in config.`);
+    process.exit(1);
+  }
+  const didFilePath = path5.resolve(projectRoot, canisterConfig.didFile);
+  try {
+    const methods = parseDIDFile(didFilePath);
+    if (methods.length === 0) {
+      p4.log.warn(`No methods found in ${pc4.yellow(didFilePath)}`);
+      process.exit(0);
+    }
+    const queries = methods.filter((m) => m.type === "query");
+    const mutations = methods.filter((m) => m.type === "mutation");
+    const generatedMethods = config.generatedHooks[selectedCanister] ?? [];
+    if (queries.length > 0) {
+      console.log();
+      console.log(pc4.bold(pc4.cyan("  Queries:")));
+      for (const method of queries) {
+        const isGenerated = generatedMethods.includes(method.name);
+        const status = isGenerated ? pc4.green("\u2713") : pc4.dim("\u25CB");
+        const argsHint = method.hasArgs ? pc4.dim("(args)") : pc4.dim("()");
+        console.log(`    ${status} ${method.name} ${argsHint}`);
+      }
+    }
+    if (mutations.length > 0) {
+      console.log();
+      console.log(pc4.bold(pc4.yellow("  Mutations (Updates):")));
+      for (const method of mutations) {
+        const isGenerated = generatedMethods.includes(method.name);
+        const status = isGenerated ? pc4.green("\u2713") : pc4.dim("\u25CB");
+        const argsHint = method.hasArgs ? pc4.dim("(args)") : pc4.dim("()");
+        console.log(`    ${status} ${method.name} ${argsHint}`);
+      }
+    }
+    console.log();
+    const generatedCount = generatedMethods.length;
+    const totalCount = methods.length;
+    p4.note(
+      `Total: ${pc4.bold(totalCount.toString())} methods
+Generated: ${pc4.green(generatedCount.toString())} / ${totalCount}
+
+${pc4.green("\u2713")} = hook generated
+${pc4.dim("\u25CB")} = not yet generated`,
+      selectedCanister
+    );
+    if (generatedCount < totalCount) {
+      console.log();
+      console.log(
+        pc4.dim(
+          `  Run ${pc4.cyan(`npx @ic-reactor/cli add -c ${selectedCanister}`)} to add hooks`
+        )
+      );
+    }
+  } catch (error) {
+    p4.log.error(
+      `Failed to parse DID file: ${pc4.yellow(didFilePath)}
+${error.message}`
+    );
+    process.exit(1);
+  }
+  console.log();
+}
+
+// src/commands/fetch.ts
+import * as p5 from "@clack/prompts";
+import fs6 from "fs";
+import path6 from "path";
+import pc5 from "picocolors";
+
+// src/utils/network.ts
+import { HttpAgent, Actor } from "@icp-sdk/core/agent";
+import { Principal } from "@icp-sdk/core/principal";
+import { IDL } from "@icp-sdk/core/candid";
+var IC_HOST = "https://icp-api.io";
+var LOCAL_HOST = "http://127.0.0.1:4943";
+async function fetchCandidFromCanister(options) {
+  const { canisterId, network = "ic", host } = options;
+  let principal;
+  try {
+    principal = Principal.fromText(canisterId);
+  } catch {
+    throw new Error(`Invalid canister ID: ${canisterId}`);
+  }
+  const agentHost = host ?? (network === "local" ? LOCAL_HOST : IC_HOST);
+  const agent = await HttpAgent.create({
+    host: agentHost,
+    // Don't verify signatures for CLI queries
+    verifyQuerySignatures: false
+  });
+  if (network === "local") {
+    try {
+      await agent.fetchRootKey();
+    } catch {
+      throw new Error(
+        `Failed to connect to local replica at ${agentHost}. Is it running?`
+      );
+    }
+  }
+  const candidInterface = IDL.Service({
+    __get_candid_interface_tmp_hack: IDL.Func([], [IDL.Text], ["query"])
+  });
+  const actor = Actor.createActor(() => candidInterface, {
+    agent,
+    canisterId: principal
+  });
+  try {
+    const candidSource = await actor.__get_candid_interface_tmp_hack();
+    if (!candidSource || candidSource.trim() === "") {
+      throw new Error("Canister returned empty Candid interface");
+    }
+    const methods = extractMethods(candidSource);
+    return {
+      candidSource,
+      methods,
+      canisterId,
+      network
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    if (message.includes("Replica Error")) {
+      throw new Error(
+        `Canister ${canisterId} does not expose a Candid interface. The canister may not support the __get_candid_interface_tmp_hack method.`
+      );
+    }
+    if (message.includes("not found") || message.includes("404")) {
+      throw new Error(`Canister ${canisterId} not found on ${network} network.`);
+    }
+    throw new Error(`Failed to fetch Candid from canister: ${message}`);
+  }
+}
+function isValidCanisterId(canisterId) {
+  try {
+    Principal.fromText(canisterId);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function shortenCanisterId(canisterId) {
+  if (canisterId.length <= 15) return canisterId;
+  return `${canisterId.slice(0, 5)}...${canisterId.slice(-5)}`;
+}
+
+// src/commands/fetch.ts
+async function fetchCommand(options) {
+  console.log();
+  p5.intro(pc5.cyan("\u{1F310} Fetch from Live Canister"));
+  const projectRoot = getProjectRoot();
+  let canisterId = options.canisterId;
+  if (!canisterId) {
+    const input = await p5.text({
+      message: "Enter canister ID",
+      placeholder: "ryjl3-tyaaa-aaaaa-aaaba-cai",
+      validate: (value) => {
+        if (!value) return "Canister ID is required";
+        if (!isValidCanisterId(value)) {
+          return "Invalid canister ID format";
+        }
+        return void 0;
+      }
+    });
+    if (p5.isCancel(input)) {
+      p5.cancel("Cancelled.");
+      process.exit(0);
+    }
+    canisterId = input;
+  }
+  if (!isValidCanisterId(canisterId)) {
+    p5.log.error(`Invalid canister ID: ${pc5.yellow(canisterId)}`);
+    process.exit(1);
+  }
+  let network = options.network;
+  if (!network) {
+    const result = await p5.select({
+      message: "Select network",
+      options: [
+        { value: "ic", label: "IC Mainnet", hint: "icp-api.io" },
+        { value: "local", label: "Local Replica", hint: "localhost:4943" }
+      ]
+    });
+    if (p5.isCancel(result)) {
+      p5.cancel("Cancelled.");
+      process.exit(0);
+    }
+    network = result;
+  }
+  const spinner4 = p5.spinner();
+  spinner4.start(`Fetching Candid from ${shortenCanisterId(canisterId)}...`);
+  let candidResult;
+  try {
+    candidResult = await fetchCandidFromCanister({
+      canisterId,
+      network
+    });
+    spinner4.stop(
+      `Found ${pc5.green(candidResult.methods.length.toString())} methods`
+    );
+  } catch (error) {
+    spinner4.stop("Failed to fetch Candid");
+    p5.log.error(error.message);
+    process.exit(1);
+  }
+  const { methods, candidSource } = candidResult;
+  if (methods.length === 0) {
+    p5.log.warn("No methods found in canister interface");
+    process.exit(0);
+  }
+  let canisterName = options.name;
+  if (!canisterName) {
+    const input = await p5.text({
+      message: "Name for this canister (used in generated code)",
+      placeholder: toCamelCase(canisterId.split("-")[0]),
+      defaultValue: toCamelCase(canisterId.split("-")[0]),
+      validate: (value) => {
+        if (!value) return "Name is required";
+        if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(value)) {
+          return "Name must start with a letter and contain only letters, numbers, hyphens, and underscores";
+        }
+        return void 0;
+      }
+    });
+    if (p5.isCancel(input)) {
+      p5.cancel("Cancelled.");
+      process.exit(0);
+    }
+    canisterName = input;
+  }
+  let selectedMethods;
+  if (options.all) {
+    selectedMethods = methods;
+  } else if (options.methods && options.methods.length > 0) {
+    selectedMethods = methods.filter((m) => options.methods.includes(m.name));
+    const notFound = options.methods.filter(
+      (name) => !methods.some((m) => m.name === name)
+    );
+    if (notFound.length > 0) {
+      p5.log.warn(`Methods not found: ${pc5.yellow(notFound.join(", "))}`);
+    }
+  } else {
+    const result = await p5.multiselect({
+      message: "Select methods to generate hooks for",
+      options: methods.map((method) => ({
+        value: method.name,
+        label: formatMethodForDisplay(method)
+      })),
+      required: true
+    });
+    if (p5.isCancel(result)) {
+      p5.cancel("Cancelled.");
+      process.exit(0);
+    }
+    selectedMethods = methods.filter(
+      (m) => result.includes(m.name)
+    );
+  }
+  if (selectedMethods.length === 0) {
+    p5.log.warn("No methods selected.");
+    process.exit(0);
+  }
+  const methodsWithHookTypes = [];
+  for (const method of selectedMethods) {
+    if (method.type === "query") {
+      const hookType = await p5.select({
+        message: `Hook type for ${pc5.cyan(method.name)}`,
+        options: [
+          { value: "query", label: "Query", hint: "Standard query hook" },
+          {
+            value: "suspenseQuery",
+            label: "Suspense Query",
+            hint: "For React Suspense"
+          },
+          {
+            value: "infiniteQuery",
+            label: "Infinite Query",
+            hint: "Paginated/infinite scroll"
+          },
+          {
+            value: "suspenseInfiniteQuery",
+            label: "Suspense Infinite Query",
+            hint: "Paginated with Suspense"
+          }
+        ]
+      });
+      if (p5.isCancel(hookType)) {
+        p5.cancel("Cancelled.");
+        process.exit(0);
+      }
+      methodsWithHookTypes.push({ method, hookType });
+    } else {
+      methodsWithHookTypes.push({ method, hookType: "mutation" });
+    }
+  }
+  let configPath = findConfigFile();
+  let config;
+  if (!configPath) {
+    configPath = path6.join(projectRoot, CONFIG_FILE_NAME);
+    config = { ...DEFAULT_CONFIG };
+    p5.log.info(`Creating ${pc5.yellow(CONFIG_FILE_NAME)}`);
+  } else {
+    config = loadConfig(configPath) ?? { ...DEFAULT_CONFIG };
+  }
+  const canisterConfig = {
+    didFile: `./candid/${canisterName}.did`,
+    clientManagerPath: "../../lib/client",
+    useDisplayReactor: true,
+    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");
+  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);
+  generatedFiles.push(`candid/${canisterName}.did`);
+  const reactorPath = path6.join(canisterOutDir, "reactor.ts");
+  const reactorContent = generateReactorFileForFetch({
+    canisterName,
+    canisterConfig,
+    canisterId
+  });
+  fs6.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);
+    let content;
+    switch (hookType) {
+      case "query":
+      case "suspenseQuery":
+        content = generateQueryHook({
+          canisterName,
+          method,
+          config
+        });
+        break;
+      case "infiniteQuery":
+      case "suspenseInfiniteQuery":
+        content = generateInfiniteQueryHook({
+          canisterName,
+          method,
+          config
+        });
+        break;
+      case "mutation":
+        content = generateMutationHook({
+          canisterName,
+          method,
+          config
+        });
+        break;
+    }
+    fs6.writeFileSync(filePath, content);
+    generatedFiles.push(path6.join("hooks", fileName));
+  }
+  const indexPath = path6.join(hooksOutDir, "index.ts");
+  const indexContent = generateIndexFile2(methodsWithHookTypes);
+  fs6.writeFileSync(indexPath, indexContent);
+  generatedFiles.push("hooks/index.ts");
+  config.generatedHooks[canisterName] = [
+    .../* @__PURE__ */ new Set([
+      ...config.generatedHooks[canisterName] ?? [],
+      ...selectedMethods.map((m) => m.name)
+    ])
+  ];
+  saveConfig(config, configPath);
+  genSpinner.stop("Hooks generated!");
+  console.log();
+  p5.note(
+    generatedFiles.map((f) => pc5.green(`\u2713 ${f}`)).join("\n"),
+    `Generated in ${pc5.dim(path6.relative(projectRoot, canisterOutDir))}`
+  );
+  console.log();
+  p5.note(
+    `Canister ID: ${pc5.cyan(canisterId)}
+Network: ${pc5.yellow(network)}
+Name: ${pc5.green(canisterName)}
+Methods: ${pc5.dim(selectedMethods.map((m) => m.name).join(", "))}`,
+    "Canister Info"
+  );
+  p5.outro(pc5.green("\u2713 Done!"));
+}
+function generateReactorFileForFetch(options) {
+  const { canisterName, canisterConfig, canisterId } = 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 `/**
+ * ${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}"
+
+// 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"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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
+type ${serviceName} = Record<string, (...args: unknown[]) => Promise<unknown>>
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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
+ *
+ * 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} }
+`;
+}
+function generateIndexFile2(methods) {
+  const exports = methods.map(({ method, hookType }) => {
+    const fileName = getHookFileName(method.name, hookType).replace(".ts", "");
+    return `export * from "./${fileName}"`;
+  });
+  return `/**
+ * Hook barrel exports
+ *
+ * Auto-generated by @ic-reactor/cli
+ */
+
+${exports.join("\n")}
+`;
+}
+
+// src/index.ts
+import pc6 from "picocolors";
+var program = new Command();
+program.name("ic-reactor").description(
+  pc6.cyan("\u{1F527} Generate shadcn-style React hooks for ICP canisters")
+).version("3.0.0");
+program.command("init").description("Initialize ic-reactor configuration in your project").option("-y, --yes", "Skip prompts and use defaults").option("-o, --out-dir <path>", "Output directory for generated hooks").action(initCommand);
+program.command("add").description("Add hooks for canister methods (from local .did file)").option("-c, --canister <name>", "Canister name to add hooks for").option("-m, --methods <methods...>", "Method names to generate hooks for").option("-a, --all", "Add hooks for all methods").action(addCommand);
+program.command("fetch").description("Fetch Candid from a live canister and generate hooks").option("-i, --canister-id <id>", "Canister ID to fetch from").option("-n, --network <network>", "Network: 'ic' or 'local'", "ic").option("--name <name>", "Name for the canister in generated code").option("-m, --methods <methods...>", "Method names to generate hooks for").option("-a, --all", "Add hooks for all methods").action(fetchCommand);
+program.command("sync").description("Sync hooks with .did file changes").option("-c, --canister <name>", "Canister to sync").action(syncCommand);
+program.command("list").description("List available methods from a canister").option("-c, --canister <name>", "Canister to list methods from").action(listCommand);
+program.parse();